922 lines
22 KiB
Vue
922 lines
22 KiB
Vue
<template>
|
|
<div class="page-body">
|
|
<view class="centent-box">
|
|
<!-- <view class="top-images"> -->
|
|
<!-- <image
|
|
src="https://eshangtech.com/wanmeiyizhanImg/cumulativeCode/vip-ico.png"
|
|
mode="aspectFill"
|
|
></image> -->
|
|
<!-- </view> -->
|
|
<!-- <view class="top-block"> </view> -->
|
|
<!-- <h3 class="text-title">会员积分码</h3> -->
|
|
|
|
<div class="userImgBox">
|
|
<div style="
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #eaecee;
|
|
border-radius: 50%;
|
|
">
|
|
<image style="width: 100%; height: 100%" :src="WXProfile || user.MEMBERSHIP_HEADIMAGEURL" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="checkPay">
|
|
<div style="position: relative; text-align: center">
|
|
<div v-if="!barcodeImg">
|
|
<canvas canvas-id="barcode" style="height: 120rpx; width: 480rpx; margin: 0 0 14rpx 0" />
|
|
</div>
|
|
|
|
<image v-if="barcodeImg" style="height: 120rpx; width: 480rpx; margin: 0 0 14rpx 0" :src="barcodeImg" />
|
|
</div>
|
|
<view class="code-box">
|
|
<text class="code-text">{{
|
|
isShowAllCode ? allCode : showCode
|
|
}}</text>
|
|
|
|
<text class="text-blue" @tap="isShowAllCode = !isShowAllCode">{{ isShowAllCode ? "关闭查看" : "查看数字" }}
|
|
</text>
|
|
</view>
|
|
|
|
<div style="position: relative; text-align: center">
|
|
<div v-if="!qrcodeImg">
|
|
<canvas canvas-id="qrcode" style="height: 360rpx; width: 360rpx" />
|
|
</div>
|
|
|
|
<image v-if="qrcodeImg" style="height: 360rpx; width: 360rpx" :src="qrcodeImg" />
|
|
</div>
|
|
<div class="refresh-box flex align-center" @click.stop="refreshCode()">
|
|
<image class="replayIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/replay.svg" />
|
|
<span class="text-xs color9d">每分钟自动刷新</span>
|
|
</div>
|
|
<div class="flex justify-between coupon-box align-center" @tap="isShow = true">
|
|
<div class="flex align-center">
|
|
<div class="flex align-center">
|
|
<image src="https://eshangtech.com/wanmeiyizhanImg/home/couponLogo.png" class="coupon-ico"></image>
|
|
<view class="text-39">优惠券</view>
|
|
</div>
|
|
</div>
|
|
<div @click="handleSelectCoupon" style="display: flex; align-items: center">
|
|
<text class="text-sm color9d" style="margin-right: 8rpx" v-if="couponlist.length == 0">暂无可使用的优惠券</text>
|
|
<text class="text-sm color9d" v-else>{{
|
|
cid && choeseCouponIndex != null
|
|
? couponlist[choeseCouponIndex].CouponName
|
|
: "选择要使用的优惠券"
|
|
}}</text>
|
|
<image style="width: 24rpx; height: 24rpx"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="check-end" v-if="checkPay === false">
|
|
<p class="pay-end">支付成功</p>
|
|
<p class="pay-door">{{ payDoor }}</p>
|
|
<div class="pay-price">
|
|
<span>{{ payPrice }}</span>元
|
|
</div>
|
|
<div class="pay-btn" @tap="payEnd">完成</div>
|
|
</div>
|
|
</view>
|
|
|
|
<!-- 快捷跳转 -->
|
|
<view class="skipBox">
|
|
<view class="skipContent" v-if="false">
|
|
<!-- <view class="skipTitleBox">
|
|
<span class="skip">快捷支付</span>
|
|
</view> -->
|
|
|
|
<view class="shipList">
|
|
<!-- <view
|
|
class="shipItem"
|
|
@click="handleRealGoPay(1)"
|
|
style="margin-right: 40rpx"
|
|
>
|
|
<view class="shipIconBox">
|
|
<image
|
|
class="shipIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/alipayIcon.svg"
|
|
/>
|
|
</view> -->
|
|
<!-- <span class="shipTitle">支付宝</span> -->
|
|
<!-- </view> -->
|
|
<view class="shipItem" @click="handleRealGoPay(2)">
|
|
<view class="shipIconBox">
|
|
<image class="shipIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/wxPay.svg" />
|
|
</view>
|
|
<!-- <span class="shipTitle">微信</span> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<UniPopup ref="popup" closeable position="bottom" :show="isShow" custom-style="height: 760rpx;" :safe-area="false">
|
|
<view class="couponPopup">
|
|
<view class="body-title"> 选择优惠券 </view>
|
|
|
|
<view class="pop-body">
|
|
<scroll-view scroll-y style="height: 680rpx">
|
|
<view class="couponItem" v-for="(item, i) in couponlist" :key="i" @tap="selectCoupon" :data-key="i">
|
|
<div class="itemleft">
|
|
<div>
|
|
<span class="leftUnit">¥</span>
|
|
<span class="money">{{ 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>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</UniPopup>
|
|
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// let barcode = require('../../common/js/JsBarcode.all.js')
|
|
import { mapGetters } from "vuex";
|
|
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
showCode: "",
|
|
isShowAllCode: false,
|
|
allCode: "",
|
|
isShow: false,
|
|
timer: "",
|
|
cid: "",
|
|
couponlist: [],
|
|
choeseCouponIndex: null,
|
|
payTimer: "",
|
|
checkPay: true,
|
|
payDoor: "",
|
|
payPrice: 0.01,
|
|
isPrice: false,
|
|
balance_amount: "0.00",
|
|
loginType: "",
|
|
barcodeImg: "", // 条码转的图片路径
|
|
qrcodeImg: "", // 二维码图片转的路径
|
|
isLoading: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["user"]),
|
|
|
|
barcodeHeight() {
|
|
return (120 / 750) * uni.getSystemInfoSync().windowWidth;
|
|
},
|
|
barcodeWidth() {
|
|
return (480 / 750) * uni.getSystemInfoSync().windowWidth;
|
|
},
|
|
qrcodeHeight() {
|
|
return (360 / 750) * uni.getSystemInfoSync().windowWidth;
|
|
},
|
|
},
|
|
components: {
|
|
UniPopup,
|
|
},
|
|
methods: {
|
|
// 快捷支付
|
|
handleRealGoPay(payType) {
|
|
uni.showToast({
|
|
title: "上架后，待申请...",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
if (this.loginType === "android") {
|
|
if (payType === 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/thirdParty/aliPay",
|
|
});
|
|
|
|
// uni.showModal({
|
|
// title: "确认跳转支付宝？",
|
|
// content: "点击确认将自动跳转到支付宝付款码页面",
|
|
// confirmText: "确认",
|
|
// cancelText: "取消",
|
|
// success: function (res) {
|
|
// plus.runtime.openURL(
|
|
// `alipayqr://platformapi/startapp?saId=20000056`
|
|
// );
|
|
// },
|
|
// });
|
|
} else if (payType === 2) {
|
|
uni.showModal({
|
|
title: "确认跳转微信？",
|
|
content: "跳转后点击首页右上角-->首付款",
|
|
confirmText: "确认",
|
|
cancelText: "取消",
|
|
success: function (res) {
|
|
plus.runtime.openURL(`weixin://`);
|
|
},
|
|
});
|
|
}
|
|
} else if (this.loginType === "min") {
|
|
if (payType === 1) {
|
|
// uni.navigateToMiniProgram({
|
|
// shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
|
|
// });
|
|
uni.navigateTo({
|
|
url: "/pages/thirdParty/aliPay",
|
|
});
|
|
}
|
|
}
|
|
},
|
|
paintCode(Membership_ECode) {
|
|
let _this = this;
|
|
|
|
// let code = _this.allCode;
|
|
let code = Membership_ECode;
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
|
|
_this.$utils.barc(
|
|
"barcode",
|
|
code,
|
|
_this.barcodeWidth,
|
|
_this.barcodeHeight
|
|
);
|
|
|
|
// _this.$utils.barc('barcode2', code, _this.qrcodeHeight2, 160, 90)
|
|
_this.$utils.qrc(
|
|
"qrcode",
|
|
code,
|
|
_this.qrcodeHeight,
|
|
_this.qrcodeHeight,
|
|
null,
|
|
"https://eshangtech.com/wanmeiyizhanImg/home/YDIconWhiteBg.png"
|
|
);
|
|
// _this.$utils.qrc('qrcode2', code, _this.qrcodeHeight2, _this.qrcodeHeight2, null, '../../..https://eshangtech.com/wanmeiyizhanImg/gsuyiw.png')
|
|
_this.showCode = code.substring(0, 4) + " " + "*".repeat("6");
|
|
|
|
wx.canvasToTempFilePath({
|
|
canvasId: "barcode",
|
|
success: (res) => {
|
|
console.log("barcode", res);
|
|
// this.setData({
|
|
// qrCodeImage: res.tempFilePath, // 保存图片路径
|
|
// });
|
|
_this.barcodeImg = res.tempFilePath;
|
|
_this.$forceUpdate();
|
|
},
|
|
});
|
|
wx.canvasToTempFilePath({
|
|
canvasId: "qrcode",
|
|
success: (res) => {
|
|
console.log("barcode", res);
|
|
// this.setData({
|
|
// qrCodeImage: res.tempFilePath, // 保存图片路径
|
|
// });
|
|
_this.qrcodeImg = res.tempFilePath;
|
|
_this.$forceUpdate();
|
|
},
|
|
});
|
|
|
|
_this.$forceUpdate();
|
|
_this.timer = setInterval(function () {
|
|
_this.getCode();
|
|
}, 60000);
|
|
},
|
|
selectCoupon(e) {
|
|
const index = e.currentTarget.dataset.key;
|
|
this.cid = this.couponlist[index].CouponSendId;
|
|
this.choeseCouponIndex = index;
|
|
this.getCode();
|
|
this.handleClosePopup();
|
|
},
|
|
// 调起选择优惠券的页面
|
|
handleSelectCoupon() {
|
|
this.$refs.popup.open("bottom");
|
|
this.isShow = true;
|
|
},
|
|
// 关闭优惠券的页面
|
|
handleClosePopup() {
|
|
// @tap="isShow = false"
|
|
this.isShow = false;
|
|
this.$refs.popup.close();
|
|
},
|
|
// payMent () {
|
|
// let _this = this
|
|
// _this.$api.getCoop({
|
|
// action_type: 'GetMembershipConsumption',
|
|
// memberShipId: _this.user.MEMBERSHIP_ID,
|
|
// industryMembershipId: _this.user.INDUSTRY_MEMBERSHIP_ID,
|
|
// ticketcode: _this.str
|
|
|
|
// }).then((res) => {
|
|
// if (res.ResultCode === '100') {
|
|
// _this.payDoor = res.Data.List[0].SERVERPART_NAME + ' ' + res.Data.List[0].SHOPNAME
|
|
// _this.payPrice = res.Data.List[0].RECODE_AMOUNT
|
|
|
|
// clearInterval(this.payTimer)
|
|
// _this.checkPay = false
|
|
// _this.$forceUpdate()
|
|
// }
|
|
// })
|
|
// },
|
|
getCode() {
|
|
let _this = this;
|
|
|
|
this.isLoading = true;
|
|
if (!_this.user.MEMBERSHIP_ID) {
|
|
return;
|
|
}
|
|
|
|
this.barcodeImg = "";
|
|
this.qrcodeImg = "";
|
|
this.$api
|
|
// .$get("/WeChat/GetMemberECode", { couponCode: this.cid || "" })
|
|
.$get("/WeChat/GetMemberECode", {
|
|
membershipId: _this.user.MEMBERSHIP_ID || "",
|
|
couponCode: this.cid || "",
|
|
})
|
|
.then((res) => {
|
|
console.log("resdsadasd", res);
|
|
if (res.Result_Code === 100) {
|
|
_this.allCode = res.Result_Data.Membership_ECode;
|
|
_this.paintCode(res.Result_Data.Membership_ECode);
|
|
}
|
|
_this.isLoading = false;
|
|
});
|
|
},
|
|
getCouponLsit() {
|
|
let _this = this;
|
|
this.isLoading = true;
|
|
this.$api
|
|
.$get("/WeChat/GetMemberCouponList", { CouponStatus: 0 })
|
|
.then((res) => {
|
|
if (res.Result_Code === 100) {
|
|
_this.couponlist = res.Result_Data.List;
|
|
console.log('_this.couponlist_this.couponlist_this.couponlist', _this.couponlist);
|
|
|
|
if (_this.cid) {
|
|
let id = Number(_this.cid);
|
|
res.Result_Data.List.forEach((item, index) => {
|
|
if (item.CouponId === id) {
|
|
_this.choeseCouponIndex = index;
|
|
}
|
|
})
|
|
|
|
// let index = res.Result_Data.List.findIndex(
|
|
// (n) => id === n.CouponSendId
|
|
// );
|
|
|
|
}
|
|
|
|
console.log('_this.choeseCouponIndex_this.choeseCouponIndex_this.choeseCouponIndex_this.choeseCouponIndex', _this.choeseCouponIndex);
|
|
|
|
}
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
// payEnd () {
|
|
// let _this = this
|
|
// _this.checkPay = true
|
|
// _this.paintCode()
|
|
// _this.payTimer = setInterval(function () {
|
|
// _this.payMent()
|
|
// }, 5000)
|
|
// },
|
|
|
|
refreshCode() {
|
|
this.getCode();
|
|
},
|
|
},
|
|
onShow() {
|
|
// let _this = this
|
|
// _this.timer = setInterval(function () {
|
|
// _this.paintCode()
|
|
// }, 60000)
|
|
// _this.payTimer = setInterval(function () {
|
|
// _this.payMent()
|
|
// }, 5000)
|
|
},
|
|
onLoad(option) {
|
|
let type = uni.getStorageSync("loginType");
|
|
this.loginType = type;
|
|
console.log("option", option);
|
|
if (option.cid) {
|
|
this.cid = option.cid;
|
|
} else {
|
|
this.cid = "";
|
|
this.choeseCouponIndex = null;
|
|
}
|
|
this.getCouponLsit();
|
|
this.getCode();
|
|
this.$utils.addUserBehaviorNew();
|
|
},
|
|
onHide() {
|
|
clearInterval(this.timer);
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.timer);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
bgBule = #4085EC;
|
|
|
|
page {
|
|
background-color: bgBule;
|
|
}
|
|
|
|
canvas {
|
|
display: inline-block;
|
|
}
|
|
|
|
.couponPopup {
|
|
width: 100%;
|
|
height: 500px;
|
|
background: #fff;
|
|
}
|
|
|
|
.text-blue {
|
|
// color: bgBule;
|
|
color: #BA922F;
|
|
}
|
|
|
|
.text-38 {
|
|
color: #383838;
|
|
}
|
|
|
|
.text-39 {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130F05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.color9d {
|
|
color: #9D9D9D;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.text-xs {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.page-body {
|
|
padding-top: 112rpx;
|
|
padding-bottom: 24rpx;
|
|
height: calc(100vh);
|
|
// background-color: bgBule;
|
|
background-color: #F6F7F8;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.centent-box {
|
|
width: 700rpx;
|
|
// height 800rpx
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
border-radius: 12rpx;
|
|
// padding 0rpx 0 64rpx 0
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
box-shadow: 0px 6rpx 12rpx 0px rgba(202, 202, 202, 0.23);
|
|
padding-top: 112rpx;
|
|
position: relative;
|
|
|
|
.userImgBox {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.skipBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.skipContent {
|
|
width: 700rpx;
|
|
height: 136rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0px 6rpx 12rpx 0px rgba(202, 202, 202, 0.23);
|
|
|
|
.skipTitleBox {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 6px 0;
|
|
|
|
.skip {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.shipList {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.shipItem {
|
|
box-sizing: border-box;
|
|
// padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.shipIconBox {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-bottom: 4px;
|
|
|
|
.shipIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.shipTitle {
|
|
font-size: 16px;
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-block {
|
|
background-color: #e0ae86;
|
|
height: 25rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.refresh-box {
|
|
margin-bottom: 24rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.replayIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.cuIcon-refresh::before {
|
|
color: #FF4748;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.top-images {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
background: linear-gradient(#79aaf2 0%, #4085ec 100%);
|
|
border: 2rpx solid #ffffff;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
padding-top: 14rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 36rpx;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 51rpx;
|
|
height: 43rpx;
|
|
}
|
|
}
|
|
|
|
.text-title {
|
|
// background-color #f8f8f8
|
|
padding: 30rpx 20rpx 20rpx;
|
|
color: bgBule;
|
|
font-size: 28rpx;
|
|
position: relative;
|
|
top: -1rpx;
|
|
}
|
|
|
|
// .text-title::before
|
|
// content ''
|
|
// width 34rpx
|
|
// height 15rpx
|
|
// background url(https://eshangtech.com/wanmeiyizhanImg/cumulativeCode/border-radius.png) no-repeat
|
|
// background-size contain
|
|
// display block
|
|
// position absolute
|
|
// left 50%
|
|
// transform translateX(-54rpx)
|
|
// top 0rpx
|
|
// .text-title::after
|
|
// display block
|
|
// content ''
|
|
// width 34rpx
|
|
// height 15rpx
|
|
// background url(https://eshangtech.com/wanmeiyizhanImg/cumulativeCode/border-radius.png) no-repeat
|
|
// background-size contain
|
|
// position absolute
|
|
// right 50%
|
|
// transform scaleX(-1) translateX(-54rpx)
|
|
// top 0rpx
|
|
.code-box {
|
|
width: 480rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #656565;
|
|
margin: auto;
|
|
|
|
.code-text {
|
|
letter-spacing: 2rpx;
|
|
text-align: center;
|
|
margin-right: 8rpx;
|
|
color: #130F05;
|
|
// flex 1
|
|
}
|
|
}
|
|
|
|
.coupon-box {
|
|
width: 647rpx;
|
|
margin: 0 auto;
|
|
border-top: 1rpx solid #ebebeb;
|
|
height: 108rpx;
|
|
// padding 20rpx 0rpx
|
|
text-align: left;
|
|
line-height: 1.2;
|
|
|
|
.coupon-ico {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
line-height: 102rpx;
|
|
}
|
|
}
|
|
|
|
.code-tab-box {
|
|
width: 700rpx;
|
|
margin-top: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 8rpx;
|
|
padding: 0 24rpx 0 36rpx;
|
|
|
|
.code-btn {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cuIcon-right::before {
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.alipay-ico {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
// 优惠券列表弹出框
|
|
.body-title {
|
|
color: #000;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
padding: 24rpx 0;
|
|
}
|
|
|
|
.pop-body {
|
|
padding-top: 16rpx;
|
|
border-top: 1rpx solid #ebebeb;
|
|
box-sizing: border-box;
|
|
|
|
.couponItem {
|
|
width: 100%;
|
|
height: 144rpx;
|
|
background: url('https://eshangtech.com/wanmeiyizhanImg/home/validCoupons.png') no-repeat center;
|
|
background-size: contain;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 32rpx;
|
|
|
|
.itemleft {
|
|
width: 195rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-right: 2rpx dashed #E5CD92;
|
|
|
|
.leftUnit {
|
|
font-family: 'PingFangSC';
|
|
font-weight: 400;
|
|
font-size: 34rpx;
|
|
color: #BA922F;
|
|
line-height: 48rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.money {
|
|
font-family: 'DINAlternate';
|
|
font-weight: bold;
|
|
font-size: 48rpx;
|
|
color: #BA922F;
|
|
line-height: 56rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.condition {
|
|
font-family: 'PingFangSC';
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #BA922F;
|
|
line-height: 28rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.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';
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130F05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.timeText {
|
|
.coupon-date {
|
|
font-family: 'PingFangSC';
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #716F69;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.useBtn {
|
|
.useBtnText {
|
|
font-family: 'PingFangSC';
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
padding: 8rpx 20rpx;
|
|
background: #BA922F;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-img {
|
|
border-radius: 50%;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.coupon-list-cell {
|
|
padding: 38rpx 36rpx 0 0;
|
|
margin: 0 0 0 36rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.flex-sub {
|
|
flex: 1;
|
|
}
|
|
|
|
.border-bottom {
|
|
padding-bottom: 25rpx;
|
|
border-bottom: 1rpx solid #ebebeb;
|
|
}
|
|
|
|
.active {
|
|
font-size: 40rpx;
|
|
color: #4085EC;
|
|
}
|
|
|
|
.check-end img {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.check-end .pay-end {
|
|
color: #DD514C;
|
|
margin: 30rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.check-end .pay-door {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.check-end .pay-price span {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
font-size: 60rpx;
|
|
}
|
|
|
|
.check-end .pay-btn {
|
|
background: #3ab5f0;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
margin-top: 30rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
</style>
|