964 lines
24 KiB
Vue
964 lines
24 KiB
Vue
<!-- //电子码新规则,共计23位
|
||
//2位固定数+2位分钟+9位会员ID+2位小时+5位企业ID+1位固定数(标识是否支持积分)+1位随机数+1位校验码
|
||
/* 2位固定数字具体含义：
|
||
* 20 企业会员电子码
|
||
* 21 驿网会员电子码
|
||
* 30 企业会员优惠券码
|
||
* 31 驿网会员优惠券码
|
||
*/ -->
|
||
<template>
|
||
<div class="page-body">
|
||
<view class="centent-box">
|
||
<!-- <view class="top-images"> -->
|
||
<!-- <image
|
||
src="/static/images/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()">
|
||
<!-- <van-icon name="replay" size="30rpx" color="#ff6666" custom-style="margin-right:8rpx;" /> -->
|
||
<image class="replayIcon" src="http://saas.eshangtech.com/caiyunyiImg/replay.png" />
|
||
<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="/static/images/home/couponIcon.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" 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="/static/images/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" v-if="false">
|
||
<view class="skipContent">
|
||
<!-- <view class="skipTitleBox">
|
||
<span class="skip">快捷支付</span>
|
||
</view> -->
|
||
|
||
<view class="shipList">
|
||
<view class="shipItem" @click="handleRealGoPay(1)">
|
||
<view class="shipIconBox">
|
||
<image class="shipIcon" src="/static/images/home/alipayIcon.png" />
|
||
</view>
|
||
<!-- <span class="shipTitle">支付宝</span> -->
|
||
</view>
|
||
<view class="shipItem" @click="handleRealGoPay(2)">
|
||
<view class="shipIconBox">
|
||
<image class="shipIcon" src="/static/images/home/wxPay.png" />
|
||
</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>
|
||
</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,
|
||
WXProfile: "",
|
||
user: {}
|
||
};
|
||
},
|
||
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: {
|
||
// 拿用户最新的user信息
|
||
async handleGetUserInfo() {
|
||
let _this = this;
|
||
let vuex = uni.getStorageSync('vuex')
|
||
let vuexObj = {}
|
||
if (vuex) {
|
||
vuexObj = JSON.parse(vuex)
|
||
console.log('vuexObjvuexObjvuexObj', JSON.parse(JSON.stringify(vuexObj)));
|
||
}
|
||
|
||
const data = await _this.$api
|
||
.getCoop({
|
||
action_type: "GetMembershipInfo",
|
||
// WechatUserId: _this.user.WechatUserId,
|
||
WechatUserId: vuexObj.user.WechatUserId,
|
||
})
|
||
|
||
// .then(function (data) {
|
||
if (data.ResultCode === "100") {
|
||
let _data = data;
|
||
_this.user.MEMBERSHIP_ID = _data.Data.MEMBERSHIP_ID || "";
|
||
_this.user.WechatUserId = _data.Data.WechatUserId || "";
|
||
_this.user.MEMBERSHIP_NAME = _data.Data.MEMBERSHIP_NAME || "";
|
||
_this.user.MEMBERSHIP_LEVEL_TEXT =
|
||
_data.Data.MEMBERSHIP_LEVEL_TEXT || "";
|
||
_this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
|
||
_this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
|
||
_this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
|
||
_this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
|
||
_this.user.ISPLUS = _data.Data.ISPLUS || "";
|
||
_this.user.INDUSTRY_MEMBERSHIP_ID =
|
||
_data.Data.INDUSTRY_MEMBERSHIP_ID || "";
|
||
_this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
|
||
_this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
|
||
_this.user.InviteCode = _data.Data.InviteCode || "";
|
||
_this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
|
||
_this.user.MEMBERSHIP_MOBILEPHONE =
|
||
_data.Data.MEMBERSHIP_MOBILEPHONE || "";
|
||
_this.WXProfile = _data.Data.MEMBERSHIP_HEADIMAGEURL;
|
||
_this.user.TEST_MEMBER = _data.Data.TEST_MEMBER || "";
|
||
// _this.setUser(user);
|
||
_this.$store.commit("setUser", _this.user);
|
||
|
||
_this.$forceUpdate()
|
||
_this.showAvatar = true
|
||
} else {
|
||
// _this.setUser({});
|
||
// _this.$store.commit("setUser", user);
|
||
}
|
||
// });
|
||
},
|
||
// 快捷支付
|
||
handleRealGoPay(payType) {
|
||
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() {
|
||
let _this = this;
|
||
|
||
let code = _this.allCode;
|
||
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,
|
||
"../../static/images/home/caiyunLogo.png"
|
||
);
|
||
// _this.$utils.qrc('qrcode2', code, _this.qrcodeHeight2, _this.qrcodeHeight2, null, '../../../static/images/gsuyiw.png')
|
||
_this.showCode = code.substring(0, 4) + " " + "*".repeat("6");
|
||
|
||
setTimeout(() => {
|
||
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();
|
||
},
|
||
});
|
||
}, 300)
|
||
|
||
_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.$api
|
||
.$get("/WeChat/GetMemberCouponList", { CouponStatus: 0 })
|
||
.then((res) => {
|
||
if (res.Result_Code === 100) {
|
||
_this.couponlist = res.Result_Data.List;
|
||
if (_this.cid) {
|
||
let id = Number(_this.cid);
|
||
let index = res.Result_Data.List.findIndex(
|
||
(n) => id === n.CouponSendId
|
||
);
|
||
_this.choeseCouponIndex = index;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 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)
|
||
},
|
||
async 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;
|
||
}
|
||
|
||
await this.handleGetUserInfo()
|
||
|
||
this.getCouponLsit();
|
||
this.getCode();
|
||
// this.$utils.addUserBehaviorNew();
|
||
this.$utils.addUserBehaviorNew({
|
||
behaviorRecordDesc: "查看会员码"
|
||
});
|
||
|
||
},
|
||
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;
|
||
padding: 6px;
|
||
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: 64rpx;
|
||
height: 64rpx;
|
||
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;
|
||
}
|
||
|
||
.refresh-box .replayIcon{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.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(/static/images/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(/static/images/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;
|
||
// 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: 44rpx;
|
||
height: 35rpx;
|
||
margin-right: 20rpx;
|
||
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('/static/images/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, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #BA922F;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.money {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #BA922F;
|
||
line-height: 56rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.condition {
|
||
font-family: PingFangSC, PingFang SC;
|
||
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, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130F05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.timeText {
|
||
.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: #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>
|