修改优惠券显示有问题

master
lemon橪 2022-04-19 14:08:57 +08:00
parent b0714ab27e
commit c6e04bc4b9
2 changed files with 184 additions and 184 deletions

View File

@ -6,7 +6,7 @@ export default {
downloadLink: "https://pickmall.cn/download-page/index.html", //下载地址下载app的地址
shareLink: "https://m-b2b2c.pickmall.cn", //分享地址也就是在h5中默认的复制地址
appid: "wx6f10f29075dc1b0b", //小程序唯一凭证,即 AppID可在「微信公众平台 - 设置 - 开发设置」页中获得。(需要已经成为开发者,且帐号没有异常状态)
aMapKey: "d649892b3937a5ad20b76dacb2bcb5bd", //在高德中申请web端key
aMapKey: "d649892b3937a5ad20b76dacb2bcb5bd", //在高德中申请Web服务key
scanAuthNavigation:['https://m-b2b2c.pickmall.cn/'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
iosAppId:"id1564638363", //AppStore的应用地址id 具体在分享->拷贝链接中查看
logo:"https://lilishop-oss.oss-cn-beijing.aliyuncs.com/4c864e133c2944efad1f7282ac8a3b9e.png", //logo地址

View File

@ -1,184 +1,184 @@
<template>
<view class="wrapper">
<div class="coupon-empty" v-if="!res"></div>
<view class="coupon-List" v-for="(item, index) in couponRes" :key="index">
<view class="coupon-item">
<view class="top">
<div class="price">
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}</span>
<span v-if="item.couponType == 'PRICE'">{{ item.price | unitPrice }}</span>
</div>
<view class="text">
<div class="coupon-List-title">
<view v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'"
>全平台</span
>
<span v-if="item.scopeType == 'PORTION_CATEGORY'"></span>
<view v-else
>{{
item.storeName == "platform" ? "全平台" : item.storeName + "店铺"
}}使用</view
>
</view>
</div>
<div>{{ item.consumeThreshold | unitPrice }}可用</div>
</view>
<view class="lingqu-btn" @click="getCoupon(item, index)">
<div :class="yhqFlag[index] ? 'cur' : ''">
{{ yhqFlag[index] ? "已领取或领完" : "立即领取" }}
</div>
</view>
</view>
<view class="line"></view>
<view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
</view>
</view>
</view>
<view class="wrapper">
<div class="coupon-empty" v-if="!res"></div>
<view class="coupon-List" v-for="(item, index) in couponRes" :key="index">
<view class="coupon-item">
<view class="top">
<div class="price">
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}</span>
<span v-if="item.couponType == 'PRICE'">{{ item.price | unitPrice }}</span>
</div>
<view class="text">
<div class="coupon-List-title">
<view v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'"></span>
<span v-if="item.scopeType == 'PORTION_CATEGORY'"></span>
<view v-else>{{
item.storeName == "platform" ? "全平台" : item.storeName + "店铺"
}}使用</view>
</view>
</div>
<div>{{ item.consumeThreshold | unitPrice }}可用</div>
</view>
<view class="lingqu-btn" @click="getCoupon(item, index)">
<div :class="yhqFlag[index] ? 'cur' : ''">
{{ yhqFlag[index] ? "已领取或领完" : "立即领取" }}
</div>
</view>
</view>
<view class="line"></view>
<view class="time">{{ item.startTime / 1000 | unixToDate }} - {{ item.endTime / 1000 | unixToDate }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
yhqFlag: [], //
couponRes: {},
};
},
props: {
res: {
type: null,
default: "",
},
},
watch: {
res: {
handler() {
if (this.res && this.res.length != 0) {
Object.keys(this.res).forEach((item) => {
let key = item.split("-")[0];
if (key === "COUPON") {
this.couponRes[item] = this?.res[item];
}
});
}
},
immediate: true,
},
},
methods: {
//
getCoupon(item, index) {
this.yhqFlag[index] = true;
this.$emit("getCoupon", item);
},
},
};
export default {
data() {
return {
yhqFlag: [], //
couponRes: [],
};
},
props: {
res: {
type: null,
default: "",
},
},
watch: {
res: {
handler() {
if (this.res && this.res.length != 0) {
Object.keys(this.res).forEach((item) => {
let key = item.split("-")[0];
if (key === "COUPON") {
this.couponRes.push(this?.res[item]);
}
});
}
},
immediate: true,
},
},
methods: {
//
getCoupon(item, index) {
this.yhqFlag[index] = true;
this.$emit("getCoupon", item);
},
},
};
</script>
<style lang="scss" scoped>
.coupon-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.coupon-List {
display: flex;
flex-direction: column;
height: 230rpx;
background: #e9ebfb;
margin: 30rpx 0;
padding: 10rpx 30rpx;
.coupon-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.line {
height: 1px;
background: #fff;
margin: 0 20rpx;
position: relative;
.coupon-List {
display: flex;
flex-direction: column;
height: 230rpx;
background: #e9ebfb;
margin: 30rpx 0;
padding: 10rpx 30rpx;
&:before,
&:after {
content: "";
display: block;
width: 15rpx;
height: 30rpx;
background: #fff;
position: absolute;
top: -15rpx;
}
.line {
height: 1px;
background: #fff;
margin: 0 20rpx;
position: relative;
&:before {
left: -50rpx;
}
&:before,
&:after {
content: "";
display: block;
width: 15rpx;
height: 30rpx;
background: #fff;
position: absolute;
top: -15rpx;
}
&:after {
right: -50rpx;
}
}
&:before {
left: -50rpx;
}
.time {
flex: 1;
font-size: 24rpx;
align-items: center;
display: flex;
align-items: center;
}
}
&:after {
right: -50rpx;
}
}
.top {
height: 140rpx;
display: flex;
.time {
flex: 1;
font-size: 24rpx;
align-items: center;
display: flex;
align-items: center;
}
}
.price {
width: 33%;
justify-content: center;
color: #6772e5;
font-size: 40rpx;
display: flex;
.top {
height: 140rpx;
display: flex;
height: 100%;
align-items: center;
span {
font-size: 50rpx;
}
}
.price {
width: 33%;
justify-content: center;
color: #6772e5;
font-size: 40rpx;
display: flex;
.text {
width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26rpx;
color: 333;
margin-left: 40rpx;
height: 100%;
align-items: center;
.coupon-List-title {
font-size: 30rpx;
font-weight: bold;
}
}
span {
font-size: 50rpx;
}
}
.lingqu-btn {
display: flex;
align-items: center;
margin-left: 40rpx;
text {
width: 140rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
color: #fff;
background: #6772e5;
border-radius: 5px;
font-size: 26rpx;
.text {
width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26rpx;
color: 333;
margin-left: 40rpx;
&.cur {
background: none;
transform: rotate(45deg) translate(10rpx, -46rpx);
}
}
}
}
.coupon-List-title {
font-size: 30rpx;
font-weight: bold;
}
}
.lingqu-btn {
display: flex;
align-items: center;
margin-left: 40rpx;
text {
width: 140rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
color: #fff;
background: #6772e5;
border-radius: 5px;
font-size: 26rpx;
&.cur {
background: none;
transform: rotate(45deg) translate(10rpx, -46rpx);
}
}
}
}
</style>