167 lines
3.4 KiB
Vue
167 lines
3.4 KiB
Vue
<template>
|
|
<view class="more-coupon-page">
|
|
<NavCom title="更多优惠券"></NavCom>
|
|
<view v-if="list.length === 0" style="padding-top: 200rpx;">
|
|
<empty></empty>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="main" v-if="list.length > 0">
|
|
<view class="list" v-for="(item,index) in list" :key="index">
|
|
<view class="price">
|
|
<text class="price-sym">¥</text>20
|
|
</view>
|
|
<view class="title">商城通用券</view>
|
|
<view class="operation">
|
|
<image src="@/static/mine/coupon-sub.png" mode="" class="operation-img" @click="sub(index)"></image>
|
|
<view class="operation-num">{{item.quantity}}</view>
|
|
<image src="@/static/mine/coupon-add.png" mode="" class="operation-img" @click="add(index)"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="footer">
|
|
<view class="price">
|
|
<text class="title">应付合计</text>
|
|
<text class="sym">¥</text>
|
|
60
|
|
</view>
|
|
<view class="buy">去结算</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import NavCom from '@/pages/components/nav.vue'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
list:[
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
{quantity:0},
|
|
]
|
|
}
|
|
},
|
|
components:{NavCom},
|
|
onLoad(option) {
|
|
|
|
},
|
|
methods:{
|
|
//减
|
|
sub(index){
|
|
if(this.list[index].quantity === 0){
|
|
return;
|
|
}
|
|
if(this.list[index].quantity >= 1){
|
|
this.list[index].quantity--
|
|
}
|
|
|
|
},
|
|
//加
|
|
add(index){
|
|
this.list[index].quantity++
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.more-coupon-page{
|
|
.main{
|
|
padding: 130rpx 0;
|
|
height: 100vh;
|
|
.list{
|
|
width: 711rpx;
|
|
height: 169rpx;
|
|
background-image: url('@/static/mine/coupon.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-left: 17rpx;
|
|
margin-bottom: 19rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.price{
|
|
width: 210rpx;
|
|
font-weight: 600;
|
|
font-size: 94rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
.price-sym{
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.title{
|
|
margin-left: 30rpx;
|
|
width: 270rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.operation{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
.operation-img{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
.operation-num{
|
|
// border: 1px solid #000;
|
|
width: 60rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
background-color: #fff;
|
|
padding: 0 22rpx 0 76rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.price{
|
|
font-weight: 500;
|
|
font-size: 46rpx;
|
|
color: #F04638;
|
|
.title{
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
margin-right: 14rpx;
|
|
}
|
|
.sym{
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.buy{
|
|
width: 274rpx;
|
|
height: 68rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 34rpx;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |