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.
yanzong_qianduan/pages/news/coupon/index.vue

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>