549 lines
13 KiB
Vue
549 lines
13 KiB
Vue
<template>
|
||
<div class="coupon">
|
||
<view class="contentbox">
|
||
<radio-group :value="radio">
|
||
<radio
|
||
style="width: 100%;background-color: #fff;margin-bottom: 24rpx;box-sizing: border-box;padding: 16rpx;border-radius: 16rpx;"
|
||
color="#4BCB7E" v-for="(item, i) in couponList" :key="i" :checked="radio === i"
|
||
:disabled="item.CouponState === -1" @click="handleChange(i)"
|
||
:class="{ 'coupon-bg': couponOrder <= item.WithAmount }">
|
||
<div class="couponItem">
|
||
<!-- :style="{
|
||
backgroundImage: `url(${item.CouponState === -1 ? 'https://eshangtech.com/wanmeiyizhanImg/expireBg.svg' : 'https://eshangtech.com/wanmeiyizhanImg/newCouponBg.svg'})`
|
||
}" -->
|
||
<div class="itemleft">
|
||
<div
|
||
style="width: 100%;display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center;">
|
||
<span class="leftUnit" :style="{ color: item.CouponState === -1 ? '#868686' : '' }">¥</span>
|
||
<span class="money" :style="{ color: item.CouponState === -1 ? '#868686' : '' }">{{ item.UseAmount
|
||
}}</span>
|
||
</div>
|
||
<div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
|
||
{{ item.CouponPoint }}积分兑换
|
||
</div>
|
||
<div v-else class="condition">
|
||
{{
|
||
item.WithAmount > 0
|
||
? "满" + item.WithAmount + "可用"
|
||
: "无门槛使用"
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="itemRight">
|
||
<div>
|
||
<div class="couponName">{{ item.CouponName }}</div>
|
||
<div class="timeText">
|
||
<span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
|
||
<span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="useBtn">
|
||
<span class="useBtnText" v-if="!item.takeState" @click="handleDistributeCoupons(item)">点击领取</span>
|
||
|
||
<image class="goUseIcon" v-else-if="item.takeState" @click="handleGoCouponsList(item)"
|
||
src="/static/home/goUseIcon.svg" />
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="coupon-list" v-if=false>
|
||
<div class="coupon-top">
|
||
<div class="coupon-left">
|
||
<block v-if="item.CouponType === 2000">
|
||
<span class="coupon-price">{{ item.UseAmount * 10 }}</span>折
|
||
</block>
|
||
<block v-else>
|
||
￥ <span class="coupon-price">{{ item.UseAmount }}</span>
|
||
</block>
|
||
<div class="span24">
|
||
{{
|
||
item.WithAmount > 0
|
||
? "满" + item.WithAmount + "可用"
|
||
: "无门槛使用"
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div style="width: 316rpx">
|
||
<div class="coupon-name">{{ item.CouponName }}</div>
|
||
<div class="coupon-type-text">{{ item.CouponTypeText }}</div>
|
||
<div class="coupon-center">
|
||
<span class="coupon-date">有效期至{{ item.EndTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="coupon-radio">
|
||
<van-radio :name="i" checked-color="#CAA97F" :disabled="couponOrder < item.WithAmount"
|
||
@click="getRadio(i)" />
|
||
</div>
|
||
</div>
|
||
<div class="coupon-bottom">
|
||
<div class="coupon-des">
|
||
使用说明：{{ item.CouponInstructions }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</radio>
|
||
</radio-group>
|
||
<!-- <no-data :text="'暂无可用优惠券'" :isShow="!(couponList && couponList.length > 0)" /> -->
|
||
<no-data :text="'暂无可用优惠券'" v-if="!(couponList && couponList.length > 0)" />
|
||
</view>
|
||
|
||
<div class="confirm-choese">
|
||
<div class="pay-left">
|
||
可抵扣
|
||
<span class="pay-price">{{
|
||
couponList.length > 0 ? couponList[radio].UseAmount : 0
|
||
}}</span>
|
||
元
|
||
</div>
|
||
<div class="pay-right" @click="couponBtn">确认使用</div>
|
||
</div>
|
||
<!-- <div class="coupon-btn" @click="couponBtn">使用</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters, mapMutations } from "vuex";
|
||
import NoData from "../../../components/noData.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
radio: null,
|
||
couponOrder: {},
|
||
couponList: [],
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
// user: 'user',
|
||
// isLoading: 'isLoading',
|
||
provinceCode: "provinceCode",
|
||
couponPrice: "couponPrice",
|
||
}),
|
||
},
|
||
components: {
|
||
NoData,
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
setIsLoading: "setIsLoading",
|
||
}),
|
||
handleChange(e) {
|
||
console.log("handleChange", e);
|
||
this.radio = e;
|
||
},
|
||
getRadio(item) {
|
||
if (this.radio === item) {
|
||
this.radio = "";
|
||
} else {
|
||
this.radio = parseInt(item);
|
||
}
|
||
},
|
||
couponBtn() {
|
||
this.$store.commit("couponPrice", this.couponList[this.radio]);
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
getCouponList() {
|
||
// 获取有用的优惠券
|
||
let _this = this;
|
||
let arr = {
|
||
CouponStatus: 0,
|
||
provinceCode: this.provinceCode || "530000",
|
||
orderAmount: this.couponOrder.couponOrder,
|
||
serverpartShopId: this.couponOrder.storeId,
|
||
};
|
||
console.log("arr", arr);
|
||
_this.$api.$get("/WeChat/GetMemberCouponList", arr).then(function (data) {
|
||
console.log("GetMemberCouponList", data);
|
||
if (data.Result_Code === 100) {
|
||
_this.setIsLoading(false);
|
||
_this.couponList = data.Result_Data.List;
|
||
if (
|
||
_this.couponList &&
|
||
_this.couponList.length > 0 &&
|
||
_this.couponPrice
|
||
) {
|
||
_this.couponList.forEach((item, index) => {
|
||
if (item.CouponId === _this.couponPrice.CouponId && item.CouponState !== -1) {
|
||
_this.radio = index;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
},
|
||
onUnload() {
|
||
this.couponOrder = {};
|
||
this.couponList = [];
|
||
},
|
||
// onHide () {
|
||
// this.couponOrder = {}
|
||
// this.couponList = []
|
||
// },
|
||
onLoad(option) {
|
||
console.log("option", option);
|
||
if (option.storeId) {
|
||
// 是否是选择优惠券
|
||
this.couponOrder = option;
|
||
}
|
||
// this.setIsLoading(true)
|
||
// this.getCouponList()
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
onShow() {
|
||
this.setIsLoading(true);
|
||
this.getCouponList();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.coupon {
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 120rpx;
|
||
|
||
}
|
||
|
||
.coupon-bg {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.coupon-title {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 638rpx;
|
||
margin: 30rpx auto 0 auto;
|
||
|
||
image {
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
margin-right: 24rpx;
|
||
border-radius: 36rpx;
|
||
}
|
||
}
|
||
|
||
.contentbox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.couponItem {
|
||
// width: 100%;
|
||
width: calc(100vw - 120rpx);
|
||
height: 144rpx;
|
||
// background: url('https://eshangtech.com/wanmeiyizhanImg/home/validCoupons.png') no-repeat center;
|
||
// background: url('https://eshangtech.com/wanmeiyizhanImg/newCouponBg.svg') no-repeat;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-bottom: 32rpx;
|
||
|
||
.itemleft {
|
||
width: 25%;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding-left: 20rpx;
|
||
margin-right: 30rpx;
|
||
// white-space: nowrap;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
|
||
// padding-left: 30rpx;
|
||
// margin-right: 50rpx;
|
||
|
||
// border-right: 2rpx dashed #E5CD92;
|
||
|
||
.leftUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #4BCB7E;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.money {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #4BCB7E;
|
||
line-height: 56rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.condition {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #868686;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.itemRight {
|
||
flex: 1;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.couponName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 250rpx;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.timeText {
|
||
display: inline-block;
|
||
width: 250rpx;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
.coupon-date {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #716F69;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.useBtn {
|
||
.useBtnText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
padding: 8rpx 20rpx;
|
||
background: #FF3A3A;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
.goUseIcon {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.coupon-list {
|
||
background: url('https://eshangtech.com/ShopICO/icos/coup-bg.png') no-repeat center;
|
||
background-size: contain;
|
||
height: 263rpx;
|
||
width: 708rpx;
|
||
padding: 12rpx 30rpx;
|
||
margin: 0 auto 16rpx auto;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.coupon-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 164rpx;
|
||
}
|
||
|
||
.coupon-left {
|
||
text-align: center;
|
||
color: #ea3323;
|
||
width: 130rpx;
|
||
}
|
||
|
||
.coupon-price {
|
||
color: #ea3323;
|
||
font-size: 46rpx;
|
||
font-weight: bolder;
|
||
font-family: 'San Francisco Display Medium';
|
||
}
|
||
|
||
.coupon-manjian {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.coupon-center {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.coupon-img {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 10rpx;
|
||
background: #dddddd;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.coupon-zx {
|
||
display: inline-block;
|
||
padding: 6rpx 10rpx;
|
||
color: #be6f6b;
|
||
border: 2rpx solid #edd0cc;
|
||
background: #fef4f3;
|
||
border-radius: 6rpx;
|
||
margin: 6rpx 0;
|
||
}
|
||
|
||
.coupon-name {
|
||
color: #000;
|
||
font-size: 30rpx;
|
||
margin-bottom: 5rpx;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.coupon-type-text {
|
||
color: #5A5B56;
|
||
font-size: 20rpx;
|
||
border: 1rpx solid #E9E9E9;
|
||
margin-bottom: 12rpx;
|
||
display: inline-block;
|
||
padding: 1rpx 4rpx;
|
||
border-radius: 1rpx;
|
||
line-height: 20rpx;
|
||
}
|
||
|
||
.coupon-right {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.coupon-use-door {
|
||
background: url('https://eshangtech.com/ShopICO/coupon-btn.png') no-repeat center; // eshangtech.com/ShopICO/coupon-btn.png) no-repeat center
|
||
background-size: contain;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
display: inline-block;
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.coupon-door {
|
||
display: inline-block;
|
||
background: #f2f2f2;
|
||
color: #999;
|
||
padding: 6rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.coupon-date {
|
||
color: #666;
|
||
}
|
||
|
||
.span24 {
|
||
display: block;
|
||
color: color999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.coupon-radio {
|
||
width: 100rpx;
|
||
}
|
||
|
||
.coupon-bottom {
|
||
padding-top: 16rpx;
|
||
padding-left: 8rpx;
|
||
}
|
||
|
||
.coupon-des {
|
||
color: #999997;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.coupon-btn {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
line-height: 100rpx;
|
||
background: #333;
|
||
color: bodyColor;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0rpx;
|
||
}
|
||
|
||
.confirm-choese {
|
||
border-top: 1rpx solid #eee;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
|
||
.pay-left {
|
||
font-size: 26rpx;
|
||
flex: 7;
|
||
background-color: #fff;
|
||
padding-left: 20rpx;
|
||
|
||
.pay-price {
|
||
color: #4BCB7E;
|
||
margin-left: 10rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
|
||
.pay-right {
|
||
flex: 3;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
// background: linear-gradient(to right, #C5A671, #DCC194);
|
||
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
|
||
}
|
||
}
|
||
</style>
|