uniapp-兑换页面
<template>
<view>
<view class="container">
<!-- S-头部 -->
<view class="head">
<view class="head-title">以下类型可以参与抽奖兑换</view>
<view class="head-card">
<view class="item-li">
<view class="icon"><text class="iconfont"></text></view>
<view class="item-title">抵用金</view>
</view>
<view class="item-li">
<view class="icon"><text class="iconfont"></text></view>
<view class="item-title">余额</view>
</view>
<view class="item-li">
<view class="icon"><text class="iconfont"></text></view>
<view class="item-title">积分</view>
</view>
<view class="item-li">
<view class="icon"><text class="iconfont"></text></view>
<view class="item-title">兑换记录</view>
</view>
</view>
</view>
<!-- E-头部 -->
<!-- S-列表 -->
<view class="list-wrap">
<view class="item-li" @tap="openModal(1)">
<view class="item-l">
<view class="title fff f-32">抵用金兑换</view>
<view class="desc fff f-24">兑换抽奖次数</view>
<view class="join-btn">立即参与</view>
</view>
<view class="item-r">
<view class="item-label"> <text class="iconfont"></text></view>
</view>
</view>
<view class="item-li" @tap="openModal(2)">
<view class="item-l">
<view class="title fff f-32">余额兑换</view>
<view class="desc fff f-24">兑换抽奖次数</view>
<view class="join-btn">立即参与</view>
</view>
<view class="item-r">
<view class="item-label"> <text class="iconfont"></text></view>
</view>
</view>
<view class="item-li" @tap="openModal(3)">
<view class="item-l">
<view class="title fff f-32">积分兑换</view>
<view class="desc fff f-24">兑换抽奖次数</view>
<view class="join-btn">立即参与</view>
</view>
<view class="item-r">
<view class="item-label"> <text class="iconfont"></text></view>
</view>
</view>
</view>
<!-- E-列表 -->
<!-- S-兑换弹框 -->
<view class="mask" v-if="showModal" @tap="showModal = false">
<view class="wrap" @tap.stop="">
<view class="exchange-modal">
<view class="close iconfont" @tap="showModal = false"></view>
<view class="hd">
<image class="thumb" mode="aspectFill" src=""></image>
<view class="con">
<view class="f-30 c-6 title two">抵用金兑换抽奖比例抵用金</view>
<view class="price">100元/次</view>
</view>
</view>
<view class="cd mt-20">
<view class="f-28 c-3">兑换规则</view>
<view class="f-28 c-red">10元抵用金兑换一次抽奖机额温枪二无群二无群二无我我我去二无群二无群二二无群二无群二无群会。</view>
</view>
<view class="bd mt-10 ac sb">
<view class="f-28 c-3">兑换数量(次)</view>
<view class="step ac mb-10">
<view class="step-mm iconfont" @tap="reduce"></view>
<view class="step-li c"><input type="number" v-model="form.num"></view>
<view class="step-mm iconfont" @tap="add"></view>
</view>
</view>
<view class="btn c">立即兑换</view>
</view>
<view class="safe-wrap"></view>
</view>
</view>
<!-- E-兑换弹框 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 表单
form:{
num:1
},
// 是否显示兑换弹框
showModal:false,
};
},
methods:{
/**
* 打开弹框
*/
openModal(id){
this.showModal = true
},
/**
* 加
*/
add(){
this.form.num = Number(this.form.num) + 1
},
/**
* 减
*/
reduce(){
if(this.form.num <= 1){ return }
this.form.num = Number(this.form.num) - 1
}
}
}
</script>
<style lang="scss" scoped>
.mask{
.exchange-modal{
.btn{
width: 690rpx;
height: 88rpx;
background-color: #3951fb;
border-radius: 10rpx;
color: #fff;
font-size: 30rpx;
margin: 20rpx 0;
}
.bd{
.step{
.step-mm{
padding: 5rpx 10rpx;
}
.step-li{
input{
font-size: 30rpx;
text-align: center;
}
width: 99rpx;
height: 50rpx;
border-radius: 90rpx;
background-color: #f8f8f8;
}
}
}
.cd{
.c-red{
color: #BD3124;
}
line-height: 1.5;
}
.hd{
.con{
.title{
line-height: 1.5;
}
.price{
font-size: 38rpx;
color: #ecb751;
}
padding-left: 24rpx;
height: 150rpx;
max-width: 500rpx;
}
.thumb{
width: 150rpx;
height: 150rpx;
background-color: #f0f0f0;
}
display: flex;
}
.close{
position: absolute;
right: 20rpx;
top: 20rpx;
font-size: 38rpx;
}
padding: 28rpx;
position: relative;
width: 750rpx;
min-height: 500rpx;
background-color: #fff;
box-sizing: border-box;
}
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .3);
position: fixed;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
// 列表
.list-wrap{
.item-li{
.item-label{
.iconfont{
color: #fff;
font-size: 40rpx;
}
display: flex;
align-items: center;
justify-content: center;
width: 100rpx;
height: 100rpx;
background-color: rgba(0, 0, 0, .3);
border-radius: 90%;
}
.desc{
margin-top: 4rpx;
}
.join-btn{
margin-top: 20rpx;
padding: 7rpx 30rpx;
display: inline-flex;
background-color: #fff;
border-radius: 88rpx;
}
padding: 24rpx;
border-radius: 14rpx;
width: 700rpx;
height: 240rpx;
background-color: #ff6060;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
box-sizing: border-box;
&:nth-child(1){
background-color: #ff6060;
.join-btn{ color: #FF6060;}
}
&:nth-child(2){
background-color: #C750FF;
.join-btn{ color: #C750FF;}
}
&:nth-child(3){
background-color: #ecb751;
.join-btn{ color: #ecb751;}
}
}
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx 0;
}
*{
box-sizing: border-box;
}
// 头部
.head{
.head-card{
.item-li{
.item-title{
margin-top: 4rpx;
color: #666;
font-size: 26rpx;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
.iconfont{
color: #fff;
}
width: 75rpx;
height: 75rpx;
border-radius: 80%;
background-color: #3951fb;
}
flex-direction: column;
align-items: center;
display: flex;
flex: 1;
}
display: flex;
align-items: center;
width: 650rpx;
height: 150rpx;
background-color: #fff;
border-radius: 16rpx;
}
.head-title{
margin-top: 20rpx;
margin-bottom: 20rpx;
font-size: 42rpx;
color: #fff;
}
display: flex;
flex-direction: column;
align-items: center;
width: 750rpx;
height: 300rpx;
background-color: #bd3124;
}
.safe-wrap{
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #FFFFFF;
}
.fff{ color: #fff;}
.c-3{ color: #333;}
.c-6{ color: #666;}
.c-9{ color: #999;}
.red{ color: #ff0238}
.f-20{ font-size:20rpx }
.f-24{ font-size:24rpx }
.f-26{ font-size:26rpx }
.f-28{ font-size:28rpx }
.f-30{ font-size:30rpx;}
.f-32{ font-size:32rpx;}
.f-36{ font-size: 36rpx;}
.ac { display: flex;align-items: center;}
.flex { display: flex;}
.flex1 { flex: 1;}
.pl-20{ padding-left: 20rpx;}
.sb{ justify-content: space-between;}
.lh-15{ line-height: 1.2;}
.mb-10{ margin-bottom: 10rpx;}
.mt-10{ margin-top: 10rpx;}
.mt-20{ margin-top: 20rpx;}
.mr-10{ margin-right: 10rpx;}
.ml-10{ margin-left: 10rpx;}
.c{ display: flex;align-items: center;justify-content: center;}
.fb{ font-weight: 600;}
*{ box-sizing: border-box;}
.two{
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-line-clamp: 2;
-moz-box-orient: vertical;
overflow-wrap: break-word;
word-break: break-all;
white-space: normal;
overflow: hidden;
}
// 字体图标
@font-face {
font-family: "iconfont"; /* Project id 3728286 */
src:
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAcQAAsAAAAADYQAAAbAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACENgqMKIpEATYCJAMsCxgABCAFhGcHgQkbwwvIjtRWsU2SvOjncdPeT4LlQxFrPVWbqAIVRUKgjrTdHDaHEwOm2s5ErvRMORGBgDj1MykWtFxAF6djCsTa2rSCV7gCk/b/rbV8d6gkog3eeIRCTZ8dbGQXVa1miXgh7SAqkdJEX6c3TMKzl3p8lMoA3AUQAFqJEYhywjQdxCyN7haIRxHjEchroqWdM4LQjUT12CJChc/dMwa0BR4gNsQDAHg5/nj0hz6BEIDAi0AcZ9Z4vAWuRATfNJCeqAeAvEKI19eG1iYA8ACQAAr2LBqd+xP3AZmSgpjRbfUpiwBoyNy/i/8SRGIiqggTKY9URixfrv0y9E1DNAo6E5MhGlkIIEAdfzkRGt/hEfY/D6UgmBiGa4poEBFoCjGPQThQ4CqEgxCcQTgg8HKEgwi8Engd3AJvwAdfrg0HwuQheAMe+KaBw92mw/U1AOIAESLqBMJChyEZT6JIwhUIVCZm1COSFHK5LDsbiRW8WGHMMEohNp9/YYyvy9uNpf79nn0ukibEIAkxKUEuLuTt8qks1qBvn0fNWt5YFwjsDmk5NgQINmiMvnAYect6TVvco78ueN58sxL5u71dtAGVhTTBrj0qnSG4a986tf4NlW4NxfsxBjq2wUdo5O9GXg1GeIGtaVSn0tEGLQoib0irzT5tHhX79Scz1YEAeFRQdwHw9PT4e3sRaoXDPt2b5eWQB96yPkN4Boz9IoVVEn/IG6Tp471Te9dbv6dHj8NhQ5he0RY65A363gCiVwfwfHEa4ony8ZE336SXSAwb6IMLx/7jLA+egD+EyEk6jfTBs2arlQaEqlp9wKOyvJFF+4L7JtJyIb8F8GTOQnrdkuV/zOFAuUR+vFfiebtM/p7h4su9uEJn6PJe9ufqy7r9Fz2dZaEoY71Khy9EMk2Xx750b+zzbdCWiRl9saJxFQL5IqO4XLLQr2YDQBn5Ml8XEvS8vl3su+C5iCX+y95LhtzcRGtx3T7y6jGStIRUSdgyNSENVMfGvEalBhmrmbPWJaTGr5sZe5i5JkGesKbeTH3JyPPUr/r0ajMN5C8XZo7SQ3TephtTqoLtNQW1+ZVTJkybWJ4cIYgggyJU02raq4Jdd2cWgKxK0cumAtFWdufncJ+smTZnztyOnfohnE6nIMYZFaZlTZPpmXgzRFGq7pxuFUWh+tOuGDh/rO7TqbUEIgnRZifaRf1yIr3PKBGpQ87NIoJEcOxuTsrAZK7P4YQnCqLfJg9M4UoPJz4pl1TKzGsmNJadfMMiMyl+J6CkGzunMICA6qRMum6R2+VfAjDR9SmT2Q52xZf2l4SFLwp/oPmOvvO+uebtUfETymfkTs1mXxLrB4gtrl1lRZUlNlf9kJpBA+vP0x+qozQluzlHUOJ5RIqXsME3LmQu7TOhwlrhRbGhD2YHzx00x1XnnMYhdYP61Z3H32k+MExSTokA1vOPojh05MGR8GhHF/8wceL3ed/fvfP9qDr8PW1Sf3/7dvkoj6MDBpw7a4DBXfuswir9gIpBz1V9w4CCqllyTm7W8cXyzrhu595Z/Wvy1I3qoG7/R20PHz56KO8rbOQdnZCopveFy7r0k4Wz43/Jj6j/biiUrBua++bNkf5RxsmkxpAEc5j53XFJI/Mats2DrLxecZ/RPlDOUqxXUFpjazT8pc6U8yPOp4Rjk/8q2Gf85cDIhKVPEGuRBdoMEI1GHrJs25OywlXkJdLVpvV6iH5CbiaTHf8ilxN/Ol4hL5OjHXvIbjK/eCt5mDR+79cC47pjY5102G9C/Fsw58PFE0/HGdFVFKw3G4SI9ymDbzmvZg5ITSMB1tEjGi+ZhLUV8PoJLccAfK1TFT4gWclm8IciK3NEEEhAJKE0DWWYh3iwPohPaDii5Ru/P6bUhoRiEQBkWW4gRGY/IsQ4i0gytzWUYS/hTeQvgPhk/kM0QyA5GpYVmMc6WaObtTCm+Yzd3NpiVYo71ncOy7U3GZ1NeQbW6bIjhyktKqmWTGRbWOcqtnF1cH3cbitjdbY2MxPs87FNTa1Mm7O1gTW7i2xud9uQ4mJr2zZF5tZmGMuJZeQOPVowTOb7tDNr1cI6sLv89eZgcdo1MXIyNYZ4J5cpkf6MUkVKGJqJrIXV4Z7Ud+nA6cNN8VaMJk4qbsaY4AJIk1PYitHWnt+AZZ4kFrEtkd9miGI5kJXLirYvN9/YSwCgiWfAAYFIRCEe4iMBEiIRohFGYqDmdmOLYAHbwiUqfK7d2GKy0wts0XacrX1+O8trsFvZFtECW6Okw/mmofUb7Dyutb2znVcrdNuxy7YkyIymdgAAAAA=') format('woff2');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jian:before {
content: "\e620";
}
.icon-zengjia:before {
content: "\e889";
}
.icon-guanbi:before {
content: "\eb6a";
}
.icon-zhanghuyue:before {
content: "\e60e";
}
.icon-jifen:before {
content: "\e897";
}
.icon-zhuanhuan:before {
content: "\e664";
}
.icon-bianji:before {
content: "\e607";
}
.icon-gouwu:before {
content: "\e614";
}
.icon-huati:before {
content: "\e658";
}
.icon-shengjijilu:before {
content: "\e65a";
}
</style>