You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
6.5 KiB
309 lines
6.5 KiB
5 months ago
|
<template>
|
||
|
|
<view class="coupon" :id="`coupon${styleIndex}`">
|
||
|
|
<view class="rule" @click="openPage()">规则</view>
|
||
|
|
<view class="coupon-hd">
|
||
|
|
<!-- <image v-if="styleIndex > 0" :src="`https://www.royaum.com.cn/static/news/coupon-bg${styleIndex}.jpg`"></image> -->
|
||
|
|
<!-- <image v-if="styleIndex > 0" src="https://www.royaum.com.cn/static/news/coupon-bg.jpg"></image> -->
|
||
|
|
<image v-if="!styleIndex" src="https://www.royaum.com.cn/static/news/coupon-bg.jpg"></image>
|
||
|
|
</view>
|
||
|
|
<view class="coupon-tab">
|
||
|
|
<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">商品券</view>
|
||
|
|
<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">服务券</view>
|
||
|
|
</view>
|
||
|
|
<view class="coupon-bd">
|
||
|
|
<view class="item" v-for="(item,index) in couponList" :key="index">
|
||
|
|
<view class="a" v-if="item.coupon_type==10">￥<text>{{ item.reduce_price?Number(item.reduce_price):''}}</text></view>
|
||
|
|
<view class="a" v-if="item.coupon_type==20"><text>{{item.discount}}</text>折</view>
|
||
|
|
<view class="b">满{{item.min_price? Number(item.min_price):''}}元使用</view>
|
||
|
|
<view class="c">
|
||
|
|
<text v-if="item.apply_range==10">适用于全场商品</text>
|
||
|
|
<text v-if="item.apply_range==20">适用于部分商品</text>
|
||
|
|
</view>
|
||
|
|
<view class="d" @click="toUse(item)" v-if="item.state.value==0">去使用</view>
|
||
|
|
<view class="d" @click="receive(item)" v-else>点击领取</view>
|
||
|
|
<image :src="$picUrl+'/static/news/icon-coupon-01.png?t=2'"></image>
|
||
|
|
<view class="f" v-if="item.start_time&&item.end_time">有效期:{{item.start_time}}-{{item.end_time}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="nolist" v-if="couponList.length==0">
|
||
|
|
<image :src="$picUrl+'/static/news/icon-coupon-03.png'"></image>
|
||
|
|
<view class="txt">暂无已使用优惠券</view>
|
||
|
|
</view>
|
||
|
|
<view class="footer" @click="goMyCoupon">
|
||
|
|
查看我的优惠券
|
||
|
|
<u-icon name="arrow-right" class="fooIcon"></u-icon>
|
||
|
|
</view>
|
||
|
|
<addShuiyin />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as CouponApi from '@/api/coupon'
|
||
|
|
import styleColor from '../../styleColor';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabIndex: 0,
|
||
|
|
couponList: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
styleIndex() {
|
||
|
|
const index = uni.getStorageSync('styleIndex') || '';
|
||
|
|
return index;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
styleIndex: {
|
||
|
|
immediate: true,
|
||
|
|
handler() {
|
||
|
|
uni.setNavigationBarColor({
|
||
|
|
frontColor: '#ffffff',
|
||
|
|
backgroundColor: this.styleIndex > 0 ? styleColor.couponNavBgColor[this.styleIndex - 1] : '#FB3A22',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getCoupon(this.tabIndex)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getCoupon(index) {
|
||
|
|
const that = this
|
||
|
|
if (index == 0) {
|
||
|
|
CouponApi.list()
|
||
|
|
.then(res => {
|
||
|
|
that.couponList = res.data.list
|
||
|
|
})
|
||
|
|
.finally(() => that.isLoading = false)
|
||
|
|
} else {
|
||
|
|
CouponApi.serveList()
|
||
|
|
.then(res => {
|
||
|
|
that.couponList = res.data.list
|
||
|
|
})
|
||
|
|
.finally(() => that.isLoading = false)
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
openPage() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/activity/presaleRule?type=7'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
tabItem(index) {
|
||
|
|
this.tabIndex = index;
|
||
|
|
this.getCoupon(index)
|
||
|
|
},
|
||
|
|
receive(item) {
|
||
|
|
const that = this
|
||
|
|
CouponApi.receive({
|
||
|
|
couponId: item.coupon_id
|
||
|
|
})
|
||
|
|
.then(res => {
|
||
|
|
that.$toast(res.message)
|
||
|
|
that.getCoupon(that.tabIndex)
|
||
|
|
})
|
||
|
|
.finally(() => that.isLoading = false)
|
||
|
|
},
|
||
|
|
// 去使用
|
||
|
|
toUse(){
|
||
|
|
// 调到商品列表
|
||
|
|
uni.switchTab({
|
||
|
|
url: "/pages/index/index"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
goMyCoupon() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: "/pages/news/coupon/list"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './style.scss';
|
||
|
|
.coupon {
|
||
|
|
background-color: #FB3A22;
|
||
|
|
overflow: hidden;
|
||
|
|
min-height: 100vh;
|
||
|
|
|
||
|
|
.rule {
|
||
|
|
right: 0;
|
||
|
|
top: 74rpx;
|
||
|
|
z-index: 999;
|
||
|
|
width: 100rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
line-height: 60rpx;
|
||
|
|
text-align: center;
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50rpx 0 0 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nolist {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-align: center;
|
||
|
|
padding: 150rpx 50rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 388rpx;
|
||
|
|
height: 378rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.txt {
|
||
|
|
font-size: 32rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-hd {
|
||
|
|
width: 100%;
|
||
|
|
height: 460rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-tab {
|
||
|
|
padding: 40rpx 40rpx 0;
|
||
|
|
border-radius: 30rpx 30rpx 0 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 316rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
&-on {
|
||
|
|
color: #F34A40;
|
||
|
|
background: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-bd {
|
||
|
|
padding: 0 40rpx 180rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 662rpx;
|
||
|
|
height: 240rpx;
|
||
|
|
position: relative;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 15rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.a {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 60rpx;
|
||
|
|
top: 20rpx;
|
||
|
|
z-index: 2;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FE6900;
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 60rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.b {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 60rpx;
|
||
|
|
top: 100rpx;
|
||
|
|
z-index: 2;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #6B6B6B;
|
||
|
|
}
|
||
|
|
|
||
|
|
.c {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 60rpx;
|
||
|
|
bottom: 22rpx;
|
||
|
|
z-index: 2;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #A7572C;
|
||
|
|
}
|
||
|
|
|
||
|
|
.d {
|
||
|
|
width: 188rpx;
|
||
|
|
line-height: 68rpx;
|
||
|
|
background: linear-gradient(180deg, #FF7366 0%, #FF5242 100%);
|
||
|
|
border-radius: 68rpx;
|
||
|
|
position: absolute;
|
||
|
|
right: 28rpx;
|
||
|
|
top: 35rpx;
|
||
|
|
z-index: 2;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.f{
|
||
|
|
height: 40rpx;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #AFAFAF;
|
||
|
|
line-height: 40rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
position: absolute;
|
||
|
|
right: 28rpx;
|
||
|
|
bottom: 85rpx;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 98rpx;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FA3B22;
|
||
|
|
line-height: 98rpx;
|
||
|
|
background: #FFE5B2;
|
||
|
|
z-index: 999;
|
||
|
|
|
||
|
|
.fooIcon {
|
||
|
|
margin-left: 15rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|