750 lines
17 KiB
Vue
750 lines
17 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="content">
|
||
<div class="contentTop">
|
||
<div class="top">
|
||
<image class="couponIcon" src="/static/images/home/couponLogo.svg" />
|
||
<span class="couponText">满减券</span>
|
||
</div>
|
||
<div class="topContent">
|
||
<div class="first">
|
||
<span class="nomarl">满</span>
|
||
<span class="light">{{ couponMsg.WithAmount || "-" }}</span>
|
||
<span class="nomarl">减</span>
|
||
<span class="light">{{ couponMsg.UseAmount || "-" }}</span>
|
||
</div>
|
||
<div class="second">
|
||
{{
|
||
couponMsg.WithAmount == 0
|
||
? "无门槛使用"
|
||
: "订单满" + (couponMsg.WithAmount || "-") + "可用"
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="noticeBox">
|
||
<div class="noticeTitle">
|
||
<image class="noticeIcon" src="/static/images/home/noticeIcon.svg" />
|
||
<span class="noticeText">领取说明</span>
|
||
</div>
|
||
<div class="noticeItem">
|
||
<div class="noticeLabel">领取时间</div>
|
||
<div class="noticeValue">截止：{{ couponMsg.EndTime || "-" }}</div>
|
||
</div>
|
||
<div class="noticeItem">
|
||
<div class="noticeLabel">使用说明</div>
|
||
<div class="noticeValue">
|
||
{{
|
||
couponMsg.CouponInstructions ||
|
||
"该券适用于部分商品，详询店内工作人员"
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="noticeItem">
|
||
<div class="noticeLabel">适用门店</div>
|
||
<div
|
||
class="noticeValue"
|
||
v-if="
|
||
couponMsg.ServerpartList && couponMsg.ServerpartList.length > 0
|
||
"
|
||
>
|
||
<span
|
||
v-for="(item, index) in couponMsg.ServerpartList"
|
||
:key="index"
|
||
>
|
||
<template
|
||
v-if="
|
||
item.ServerpartShopList && item.ServerpartShopList.length > 0
|
||
"
|
||
>
|
||
<span
|
||
v-for="(subItem, subIndex) in item.ServerpartShopList"
|
||
:key="subIndex"
|
||
>{{ subItem.ServerpartShopName || "-"
|
||
}}{{
|
||
subIndex > 0 &&
|
||
subIndex !== item.ServerpartShopList.length - 1
|
||
? "、"
|
||
: ""
|
||
}}</span
|
||
>
|
||
</template>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btnBox">
|
||
<div
|
||
class="btn"
|
||
:style="{
|
||
background: couponMsg.takeState
|
||
? 'rgba(186, 146, 47, 1)'
|
||
: 'rgba(186, 146, 47, 0.4)',
|
||
}"
|
||
@tap="getCoupon"
|
||
>
|
||
{{ couponMsg.takeState ? "立即领取" : "已领取" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pad95" v-if="false">
|
||
<div class="coupon-box" v-show="isShow">
|
||
<view class="coupon-type flex align-center">
|
||
<image
|
||
src="/static/images/coupon/coupon-type.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text>{{
|
||
couponMsg.WithAmount == 0
|
||
? "无门槛优惠券"
|
||
: couponMsg.CouponTypeText
|
||
}}</text>
|
||
</view>
|
||
<div class="coupon-border"></div>
|
||
<div class="coupon-title">{{ couponMsg.CouponName }}</div>
|
||
<div class="coupon-price-box">
|
||
{{
|
||
couponMsg.WithAmount == 0
|
||
? "无门槛使用"
|
||
: "订单满" + couponMsg.WithAmount + "可用"
|
||
}}
|
||
</div>
|
||
<div class="coupon-des" v-if="couponMsg.PAY_METHOD === 2000">
|
||
{{ couponMsg.COUPON_POINT }}积分兑换
|
||
</div>
|
||
<block v-if="!couponMsg.CouponSendId">
|
||
<div
|
||
v-if="!couponMsg.takeState"
|
||
class="coupon-needed-button"
|
||
@tap="getCoupon"
|
||
>
|
||
已领取
|
||
</div>
|
||
<div
|
||
v-if="couponMsg.takeState"
|
||
class="coupon-need-button"
|
||
@tap="getCoupon"
|
||
>
|
||
立即领取
|
||
</div>
|
||
|
||
<view class="flex justify-between date-box">
|
||
<view>领取时间至</view>
|
||
<view>{{ couponMsg.EndTime }}</view>
|
||
</view>
|
||
</block>
|
||
|
||
<block v-else>
|
||
<div
|
||
class="coupon-need-button"
|
||
v-if="couponMsg.CouponState == 0"
|
||
@tap="toUse"
|
||
>
|
||
去使用
|
||
</div>
|
||
<div class="coupon-used-tip" v-else>
|
||
{{ couponMsg.CouponState == 1 ? "已使用" : "已过期" }}
|
||
</div>
|
||
<view class="flex justify-between date-box">
|
||
<view>有效期限至</view>
|
||
<view>{{ couponMsg.ValidEndTime }}</view>
|
||
</view>
|
||
</block>
|
||
|
||
<view class="flex justify-between desc-box">
|
||
<view>使用说明</view>
|
||
<view class="desc-text">
|
||
{{
|
||
couponMsg.CouponInstructions ||
|
||
"该券适用于部分商品，详询店内工作人员"
|
||
}}
|
||
</view>
|
||
</view>
|
||
<div class="use-shop">
|
||
<view
|
||
class="flex align-center justify-between"
|
||
@tap="showShop = !showShop"
|
||
>
|
||
<view>适用门店</view>
|
||
<view class="flex align-center">
|
||
<!-- <text class="text-sm">查看</text> -->
|
||
<van-icon
|
||
:name="!showShop ? 'arrow' : 'arrow-down'"
|
||
size="16"
|
||
color="#7a7a7a"
|
||
></van-icon>
|
||
</view>
|
||
</view>
|
||
<div class="list-box" v-show="showShop">
|
||
<div
|
||
v-for="(value, key) in couponMsg.ServerpartList"
|
||
:key="key"
|
||
class="list-unit"
|
||
>
|
||
<view class="severpart-title">{{ value.ServerpartName }}</view>
|
||
<text
|
||
v-for="(shop, i) in value.ServerpartShopList"
|
||
:key="i"
|
||
class="text-sm"
|
||
>
|
||
{{ shop.ServerpartShopName }}</text
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="isShow && !couponMsg.CouponName">
|
||
<no-data
|
||
:text="'没有此优惠券信息'"
|
||
:isShow="isShow && !couponMsg.CouponName"
|
||
type="0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import couponList from '@/common/coupon.json'
|
||
import noData from "../../components/noData.vue";
|
||
import { mapGetters, mapMutations } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
isShow: false,
|
||
showShop: false,
|
||
couponMsg: {
|
||
CouponId: "",
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
components: {
|
||
noData,
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
setFresh: "refresh",
|
||
}),
|
||
toUse() {
|
||
uni.redirectTo({
|
||
url: "/pages/homeFn/payfor/index?cid=" + this.couponMsg.CouponSendId,
|
||
});
|
||
},
|
||
getCoupon() {
|
||
let _this = this;
|
||
if (!_this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "您还不是驿付会员，请去认证成为驿付会员",
|
||
showCancel: true,
|
||
cancelText: "知道了",
|
||
cancelColor: "#000000",
|
||
confirmText: "去注册",
|
||
confirmColor: "#3CC51F",
|
||
success: (result) => {
|
||
if (result.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
|
||
return false;
|
||
}
|
||
_this.$api
|
||
.$post("/WeChat/CouponSend", {
|
||
couponId: this.couponMsg.CouponId,
|
||
})
|
||
.then(function (data) {
|
||
if (data.Result_Code === 100) {
|
||
uni.showToast({
|
||
title: data.Result_Desc,
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
_this.loadCoupon();
|
||
uni.showToast({
|
||
title: data.Result_Desc,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
}, // 领用优惠券
|
||
|
||
loadCoupon() {
|
||
// 加载优惠券
|
||
let _this = this;
|
||
|
||
_this.$api
|
||
.$get("/WeChat/GetCouponDetail", {
|
||
couponId: this.couponMsg.CouponId,
|
||
membershipId: this.user.MEMBERSHIP_ID,
|
||
})
|
||
.then(function (data) {
|
||
if (data.Result_Code === 100) {
|
||
_this.isShow = true;
|
||
_this.couponMsg = data.Result_Data;
|
||
console.log("_this.couponMsg", _this.couponMsg);
|
||
}
|
||
});
|
||
},
|
||
loadMycoupon() {
|
||
// 加载我的优惠券
|
||
let _this = this;
|
||
_this.$api
|
||
.$get("/WeChat/GetMemberCouponDetail", {
|
||
CouponSendId: this.couponMsg.CouponSendId,
|
||
})
|
||
.then(function (data) {
|
||
if (data.Result_Code === 100) {
|
||
data.Result_Data.CouponSendId = _this.couponMsg.CouponSendId;
|
||
_this.couponMsg = data.Result_Data;
|
||
console.log("_this.couponMsg", _this.couponMsg);
|
||
|
||
_this.isShow = true;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
onUnload() {
|
||
this.isShow = false;
|
||
this.showShop = false;
|
||
this.couponMsg = {
|
||
CouponId: "",
|
||
};
|
||
},
|
||
|
||
onLoad(options) {
|
||
console.log("options", options);
|
||
// eslint-disable-next-line eqeqeq
|
||
this.isShow = false;
|
||
if (options.sendId) {
|
||
// 是否是使用优惠券
|
||
this.couponMsg.CouponSendId = options.sendId;
|
||
this.loadMycoupon();
|
||
} else {
|
||
// 领取优惠券
|
||
this.couponMsg.CouponId = options.id;
|
||
this.loadCoupon();
|
||
}
|
||
console.log("this.user", this.user);
|
||
},
|
||
onShareAppMessage() {
|
||
let _this = this;
|
||
if (this.couponMsg.CouponId) {
|
||
return {
|
||
title: _this.couponMsg.CouponInstructions,
|
||
path: "/pages/couponDetail/index?id=" + this.couponMsg.CouponId,
|
||
imageUrl: "",
|
||
};
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #f6f7f8;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
.contentTop {
|
||
width: 100%;
|
||
height: 346rpx;
|
||
background: #ffffff;
|
||
margin-bottom: 32rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1px solid #f6f6f6;
|
||
.couponIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.couponText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.topContent {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 64rpx 0;
|
||
.first {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.nomarl {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ba922f;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.light {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 64rpx;
|
||
color: #ba922f;
|
||
line-height: 72rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin: 0 8rpx;
|
||
}
|
||
}
|
||
.second {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ba922f;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.noticeBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 36rpx 32rpx;
|
||
background: #ffffff;
|
||
border-radius: 6rpx;
|
||
margin-top: 32rpx;
|
||
.noticeTitle {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
.noticeIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.noticeText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.noticeItem {
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.noticeLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 16rpx;
|
||
width: 120rpx;
|
||
}
|
||
.noticeValue {
|
||
width: calc(100% - 120rpx);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnBox {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 0;
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 40rpx;
|
||
background: #fff;
|
||
.btn {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
padding: 22rpx 0;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// bgBule = #4085EC;
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.align-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.justify-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.pad95 {
|
||
padding-top: 56rpx;
|
||
background: bgBule;
|
||
padding-bottom: 24rpx;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.coupon-box {
|
||
width: 690rpx;
|
||
// min-height 968rpx
|
||
background: #fff;
|
||
margin: 0 auto;
|
||
border-radius: 8rpx;
|
||
padding: 0rpx 6rpx 168rpx 6rpx;
|
||
box-sizing: border-box;
|
||
// overflow hidden
|
||
}
|
||
|
||
.coupon-type {
|
||
background-color: #fafafa;
|
||
box-shadow: 0 2rpx 6rpx 0 #f2f2f2;
|
||
padding: 18rpx 36rpx 14rpx 36rpx;
|
||
color: #959595;
|
||
font-size: 28rpx;
|
||
|
||
image {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-right: 22rpx;
|
||
}
|
||
}
|
||
|
||
.coupon-border {
|
||
height: 2rpx;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.coupon-border:before {
|
||
position: absolute;
|
||
content: "";
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 9rpx;
|
||
background: bgBule;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
left: -14rpx;
|
||
top: -7rpx;
|
||
}
|
||
|
||
.coupon-border:after {
|
||
right: -14rpx;
|
||
top: -7rpx;
|
||
position: absolute;
|
||
content: "";
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 9rpx;
|
||
background: bgBule;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.coupon-title {
|
||
margin-top: 96rpx;
|
||
color: #000;
|
||
font-size: 40rpx;
|
||
font-family: "PingFang SC";
|
||
text-align: center;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.coupon-price-box {
|
||
margin-top: 24rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #a1a1a1;
|
||
}
|
||
|
||
.coupon-price {
|
||
color: #dc615a;
|
||
font-family: "PingFang SC";
|
||
font-weight: bolder;
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
.coupon-unit {
|
||
color: #dc615a;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.coupon-price-though {
|
||
text-decoration: line-through;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.coupon-des {
|
||
margin-top: 24rpx;
|
||
color: #333;
|
||
font-size: 36rpx;
|
||
font-family: "PingFang SC";
|
||
font-weight: bolder;
|
||
text-align: center;
|
||
}
|
||
|
||
.coupon-usetime {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.coupon-usetime-text {
|
||
color: #a1a1a1;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.coupon-usetime-t {
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.coupon-need-button {
|
||
margin: 68rpx auto 0rpx auto;
|
||
color: #ffffff;
|
||
line-height: 76rpx;
|
||
font-size: 26rpx;
|
||
width: 613rpx;
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
text-align: center;
|
||
background: linear-gradient(#2a7edd 0%, #669ff5 100%);
|
||
}
|
||
|
||
.coupon-needed-button {
|
||
margin: 68rpx auto 0rpx auto;
|
||
color: #ffffff;
|
||
line-height: 76rpx;
|
||
font-size: 26rpx;
|
||
width: 613rpx;
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
text-align: center;
|
||
background: #acacad;
|
||
}
|
||
|
||
.coupon-used-tip {
|
||
margin: 68rpx auto 0 auto;
|
||
line-height: 76rpx;
|
||
font-size: 26rpx;
|
||
width: 613rpx;
|
||
height: 76rpx;
|
||
border-radius: 38rpx;
|
||
text-align: center;
|
||
color: #999;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.date-box {
|
||
width: 613rpx;
|
||
padding-top: 34rpx;
|
||
padding-bottom: 12rpx;
|
||
margin: 76rpx auto 0 auto;
|
||
color: #7a7a7a;
|
||
border-top: 1rpx dashed #ededed;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.desc-box {
|
||
width: 613rpx;
|
||
padding-top: 12rpx;
|
||
padding-bottom: 34rpx;
|
||
margin: 0 auto 0 auto;
|
||
color: #7a7a7a;
|
||
border-bottom: 1rpx solid #ededed;
|
||
font-size: 24rpx;
|
||
|
||
.desc-text {
|
||
width: 440rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.use-shop {
|
||
width: 613rpx;
|
||
padding-top: 12rpx;
|
||
border-bottom: 1rpx solid #ededed;
|
||
margin: 0 auto 0 auto;
|
||
padding-bottom: 40rpx;
|
||
padding-top: 36rpx;
|
||
font-size: 26rpx;
|
||
|
||
text {
|
||
color: #7a7a7a;
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
padding-top: 20rpx;
|
||
line-height: 40rpx;
|
||
color: #404040;
|
||
// padding-left 36rpx
|
||
font-size: 24rpx;
|
||
|
||
.list-unit {
|
||
padding-bottom: 34rpx;
|
||
}
|
||
|
||
.severpart-title {
|
||
font-size: 26rpx;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.text-sm + .text-sm::before {
|
||
content: "；";
|
||
color: #404040;
|
||
}
|
||
}
|
||
</style>
|