|
|
@@ -1,758 +0,0 @@
|
|
|
-<config>
|
|
|
-{
|
|
|
- "disableScroll": true,
|
|
|
- "navigationBarTitleText": "订单详情",
|
|
|
- "navigationBarBackgroundColor": "#FF7F1F",
|
|
|
- "navigationBarTextStyle": "white",
|
|
|
- "backgroundColor": "#CC9B52"
|
|
|
-}
|
|
|
-</config>
|
|
|
-<template>
|
|
|
- <div class="page-container">
|
|
|
- <div class="page-scroll">
|
|
|
- <div class="status-info">
|
|
|
- <div class="left">
|
|
|
- <div class="status">{{ status.label }}</div>
|
|
|
- <div class="desc">{{ status.desc }}</div>
|
|
|
- </div>
|
|
|
- <img src="../static/svgs/icon_dingdan_daishiyong.svg" alt="" />
|
|
|
- </div>
|
|
|
- <div class="container">
|
|
|
- <!-- <div class="status">{{ status }}</div> -->
|
|
|
- <div class="info">
|
|
|
- <img class="cover" :src="((packageInfo || {}).img || [])[0]" mode="aspectFill" />
|
|
|
- <div class="content">
|
|
|
- <div class="name">{{ orderInfo.name }}</div>
|
|
|
-
|
|
|
- <block v-if="orderInfo.specification">
|
|
|
- <div class="desc" v-if="orderInfo.specification">{{ orderInfo.specification }} 1 张</div>
|
|
|
- <div class="desc" v-if="orderInfo.day">
|
|
|
- {{ orderInfo.day }}
|
|
|
- </div>
|
|
|
- </block>
|
|
|
- <div class="numbers" v-else>
|
|
|
- <div class="price">
|
|
|
- <span style="font-size: 12px;">¥</span>
|
|
|
- <span>{{ integer }}</span>
|
|
|
- <span style="font-size: 12px;">.{{ fraction }}</span>
|
|
|
- </div>
|
|
|
- <div class="num">×1</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="total-price">
|
|
|
- <div style="margin-right: 4px; margin-top: 2px;">总金额</div>
|
|
|
- <price-tag color="black" size="22" :value="orderInfo.price || 0"></price-tag>
|
|
|
- </div> -->
|
|
|
- <div class="divider">
|
|
|
- <div class="circle" style="left:-31px"></div>
|
|
|
- <div class="line"></div>
|
|
|
- <div class="circle" style="right:-31px"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="code" v-if="orderInfo.status === 'PAID' || orderInfo.status === 'USED'">
|
|
|
- <div class="qrcode" :class="{ used: orderInfo.status === 'USED' }">
|
|
|
- <canvas canvas-id="mycanvas" :style="{ width: codeSize + 'px', height: codeSize + 'px' }" />
|
|
|
-
|
|
|
- <img
|
|
|
- class="used-img"
|
|
|
- v-if="orderInfo.status === 'USED'"
|
|
|
- src="../static/svgs/icon_yishiyong.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <span class="text">请在活动当天出示给工作人员</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="code-detail" v-if="orderInfo.status === 'PAID' || orderInfo.status === 'USED'">
|
|
|
- <div class="code-detail-info" v-if="orderInfo.day || event.day">
|
|
|
- <div class="name">
|
|
|
- <img src="../static/svgs/icon_xuzhi_youxiaoqi.svg" alt="" />
|
|
|
- <span>活动日期</span>
|
|
|
- </div>
|
|
|
- <div class="val">{{ orderInfo.day || event.day }} {{ getDay(orderInfo.day || event.day) }}</div>
|
|
|
- </div>
|
|
|
- <div class="code-detail-info" v-if="event.time">
|
|
|
- <div class="name">
|
|
|
- <img src="../static/svgs/icon_xuzhi_shijian.svg" alt="" />
|
|
|
- <span>活动时间</span>
|
|
|
- </div>
|
|
|
- <div class="val">{{ event.time }}</div>
|
|
|
- </div>
|
|
|
- <div class="code-detail-info" v-if="event.address">
|
|
|
- <div class="name">
|
|
|
- <img src="../static/svgs/icon_xuzhi_didian.svg" alt="" />
|
|
|
- <span>活动地点</span>
|
|
|
- </div>
|
|
|
- <div class="val">{{ event.address }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="list">
|
|
|
- <div class="row head">
|
|
|
- <div class="name">支付详情</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="name">商品总额</div>
|
|
|
- <div class="num">¥{{ orderInfo.price }}</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="name">运费</div>
|
|
|
- <div class="num">+0.00</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="name">优惠券</div>
|
|
|
- <div class="num">-0.00</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="name">实际付款</div>
|
|
|
- <div class="num">
|
|
|
- <price-tag color="red" size="24" :value="orderInfo.price || 0"></price-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="group" style="margin-top:20px">
|
|
|
- <div class="row">
|
|
|
- <div class="name">订单编号</div>
|
|
|
- <div class="value">
|
|
|
- {{ orderInfo.id }}
|
|
|
- <div class="btn-copy" @click="copy">复制</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="name">创建时间</div>
|
|
|
- <div class="value">{{ orderInfo.createdAt }}</div>
|
|
|
- </div>
|
|
|
- <div class="row" v-if="orderInfo.paidAt">
|
|
|
- <div class="name">付款时间</div>
|
|
|
- <div class="value">{{ orderInfo.paidAt }}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row">
|
|
|
- <div class="name">订单留言</div>
|
|
|
- <div class="value remark">{{ orderInfo.remark }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list">
|
|
|
- <div class="row head">
|
|
|
- <div class="name">购买者信息</div>
|
|
|
- </div>
|
|
|
- <div class="row" v-if="orderInfo.realName">
|
|
|
- <div class="name">姓名</div>
|
|
|
- <div class="num">{{ orderInfo.realName }}</div>
|
|
|
- </div>
|
|
|
- <div class="row" v-if="orderInfo.IDNo">
|
|
|
- <div class="name">身份证号</div>
|
|
|
- <div class="num">{{ orderInfo.IDNo }}</div>
|
|
|
- </div>
|
|
|
- <div class="row" v-if="orderInfo.buyPhone">
|
|
|
- <div class="name">手机号</div>
|
|
|
- <div class="num">{{ orderInfo.buyPhone }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <recommend v-if="orderInfo.status !== 'UNPAID'"></recommend>
|
|
|
-
|
|
|
- <div class="bottom-box"></div>
|
|
|
- <div class="bottom" v-if="orderInfo.status === 'UNPAID'">
|
|
|
- <div class="btn-cancel " @click="cancel">取消订单</div>
|
|
|
- <div class="btn-pay btn-large" @click="pay">立即支付</div>
|
|
|
- </div>
|
|
|
- <van-dialog id="van-dialog"></van-dialog>
|
|
|
-
|
|
|
- <van-overlay z-index="20" :show="showCounpon" @click="showCounpon = false">
|
|
|
- <div class="coupon-info" @click.stop="">
|
|
|
- <img mode="widthFix" src="../static/imgs/tanchuang_img_bg.png" class="bg" alt="" />
|
|
|
- <img
|
|
|
- @click="navigateTo('/pagesMine/counponDetail?id=' + couponInfo.id)"
|
|
|
- src="../static/imgs/tanchuang_btn_chakan.png"
|
|
|
- alt=""
|
|
|
- class="btn"
|
|
|
- />
|
|
|
- <img src="../static/imgs/icon_close.png" @click="showCounpon = false" alt="" class="close" />
|
|
|
- <div class="info">
|
|
|
- <div class="left">
|
|
|
- <div class="tag">立减券</div>
|
|
|
- <div class="name">{{ couponInfo.name }}</div>
|
|
|
- <div class="desc">{{ couponInfo.title }}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="right">
|
|
|
- {{ couponInfo.price }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text">已帮您放入<span>我的卡券</span></div>
|
|
|
- </div>
|
|
|
- </van-overlay>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import recommend from './recommend.vue';
|
|
|
-import qrcode from '../qrcode';
|
|
|
-import { mapState } from 'vuex';
|
|
|
-import dayjs from 'dayjs';
|
|
|
-export default {
|
|
|
- components: { recommend },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orderInfo: {},
|
|
|
- packageInfo: {},
|
|
|
- packageGoods: [],
|
|
|
- qrcodeImg: '',
|
|
|
- event: {},
|
|
|
- couponInfo: {},
|
|
|
- showCounpon: false
|
|
|
- };
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.codeSize = this.setCanvasSize();
|
|
|
- this.$http.get(`/orderInfo/get/${this.$mp.query.id}`).then(res => {
|
|
|
- this.orderInfo = res;
|
|
|
- this.$http.get(`/package/get/${res.packageId}`).then(res => {
|
|
|
- this.packageInfo = res;
|
|
|
- this.event = res.event || {};
|
|
|
- this.createQrCode(
|
|
|
- encodeURI(`https://jiashanxia.izouma.com/verify?orderId=${res.id}&time=${new Date().getTime()}`),
|
|
|
- 'mycanvas',
|
|
|
- this.setCanvasSize(190),
|
|
|
- this.setCanvasSize(190)
|
|
|
- );
|
|
|
- });
|
|
|
-
|
|
|
- // this.$http.postJson('/packageGoods/all', { size: 10000, query: { packageId: res.packageId } }).then(res => {
|
|
|
- // this.packageGoods = res.content;
|
|
|
- // });
|
|
|
- });
|
|
|
- var ids = (wx.getStorageSync('couponOrderId') || '').split(',');
|
|
|
- if (!ids.includes(this.$mp.query.id)) {
|
|
|
- this.$http
|
|
|
- .post('/coupon/chooseByOrder', {
|
|
|
- orderInfoId: this.$mp.query.id
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- if (res) {
|
|
|
- wx.setStorageSync('couponOrderId', [...ids, this.$mp.query.id].join(','));
|
|
|
- this.showCounpon = true;
|
|
|
- this.couponInfo = { ...res.coupon, id: res.id };
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['orderStatus']),
|
|
|
- integer() {
|
|
|
- return (this.orderInfo.price || 0).toFixed(2).split('.')[0];
|
|
|
- },
|
|
|
- fraction() {
|
|
|
- return (this.orderInfo.price || 0).toFixed(2).split('.')[1];
|
|
|
- },
|
|
|
- status() {
|
|
|
- return this.orderStatus.find(i => i.value === this.orderInfo.status) || {};
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- this.$http.get(`/orderInfo/get/${this.$mp.query.id}`).then(res => {
|
|
|
- this.orderInfo = res;
|
|
|
- this.$http.get(`/package/get/${res.packageId}`).then(res => {
|
|
|
- this.packageInfo = res;
|
|
|
- });
|
|
|
- this.$http
|
|
|
- .postJson('/packageGoods/all', { size: 10000, query: { packageId: res.packageId } })
|
|
|
- .then(res => {
|
|
|
- this.packageGoods = res.content;
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- copy() {
|
|
|
- wx.setClipboardData({
|
|
|
- data: this.orderInfo.id + '',
|
|
|
- success(res) {
|
|
|
- wx.getClipboardData({
|
|
|
- success(res) {
|
|
|
- wx.showToast({
|
|
|
- title: '复制成功'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- pay() {
|
|
|
- wx.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- this.$http
|
|
|
- .get('/pay/wx', { orderId: this.orderInfo.id })
|
|
|
- .then(res => {
|
|
|
- res.package = res.packageValue;
|
|
|
- wx.requestPayment({
|
|
|
- ...res,
|
|
|
- success: () => {
|
|
|
- wx.hideLoading();
|
|
|
- wx.showToast({
|
|
|
- title: '支付成功'
|
|
|
- });
|
|
|
- this.$set(this.orderInfo, 'status', 'PAID');
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- fail: e => {
|
|
|
- console.log(e);
|
|
|
- wx.hideLoading();
|
|
|
- wx.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '支付失败'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- wx.hideLoading();
|
|
|
- wx.showToast({
|
|
|
- title: e.error,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- cancel() {
|
|
|
- this.$dialog
|
|
|
- .confirm({
|
|
|
- title: '提示',
|
|
|
- message: '确定取消订单？'
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- wx.showLoading({
|
|
|
- title: ''
|
|
|
- });
|
|
|
- this.$http.post('/orderInfo/cancel', { orderId: this.orderInfo.id }).then(res => {
|
|
|
- wx.hideLoading();
|
|
|
- wx.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '订单已取消'
|
|
|
- });
|
|
|
- this.orderInfo.status = 'CANCELLED';
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
- setCanvasSize(_width = 200) {
|
|
|
- var size = {};
|
|
|
- try {
|
|
|
- var res = wx.getSystemInfoSync();
|
|
|
- var scale = 375 / _width; //不同屏幕下canvas的适配比例；设计稿是750宽
|
|
|
- var width = res.windowWidth / scale;
|
|
|
- } catch (e) {
|
|
|
- // Do something when catch error
|
|
|
- console.log('获取设备信息失败' + e);
|
|
|
- }
|
|
|
- return width;
|
|
|
- },
|
|
|
- createQrCode(content, canvasId, cavW, cavH) {
|
|
|
- console.log(content, canvasId, cavW, cavH);
|
|
|
- //调用插件中的draw方法，绘制二维码图片
|
|
|
- //this.canvasToTempImage 为绘制完成的回调函数，可根据自己的业务添加
|
|
|
- qrcode.api.draw(content, canvasId, cavW, cavH, this, this.canvasToTempImage(canvasId));
|
|
|
- },
|
|
|
- //获取临时缓存图片路径，存入data中
|
|
|
- canvasToTempImage(canvasId) {
|
|
|
- let that = this;
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- canvasId, // 这里canvasId即之前创建的canvas-id
|
|
|
- success: res => {
|
|
|
- let tempFilePath = res.tempFilePath;
|
|
|
- },
|
|
|
- fail: function(res) {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getDay(day) {
|
|
|
- let list = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
|
|
- return list[dayjs(day, 'YYYY-MM-DD').day()];
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="less">
|
|
|
-.page-scroll {
|
|
|
- padding-bottom: 30px !important;
|
|
|
- background: linear-gradient(
|
|
|
- to top,
|
|
|
- #f5f7fa 0px,
|
|
|
- #f5f7fa calc(env(safe-area-inset-bottom) + 56px),
|
|
|
- @prim calc(env(safe-area-inset-bottom) + 256px),
|
|
|
- @prim 100%
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-.bottom-box {
|
|
|
- height: calc(env(safe-area-inset-bottom) + 56px);
|
|
|
-}
|
|
|
-.recommend-list {
|
|
|
- padding-top: 0px;
|
|
|
-}
|
|
|
-.container {
|
|
|
- background: white;
|
|
|
- border-radius: 12px;
|
|
|
- margin: 0 12px 0 12px;
|
|
|
- position: relative;
|
|
|
- padding: 20px 16px 16px;
|
|
|
- .info {
|
|
|
- width: 100%;
|
|
|
- .flex();
|
|
|
- .cover {
|
|
|
- width: 80px;
|
|
|
- min-width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- .content {
|
|
|
- margin-left: 12px;
|
|
|
- height: 80px;
|
|
|
- flex-grow: 1;
|
|
|
- .flex-col();
|
|
|
- overflow: hidden;
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: black;
|
|
|
- line-height: 22px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- font-size: 13px;
|
|
|
- color: #939599;
|
|
|
- line-height: 18px;
|
|
|
- flex-grow: 1;
|
|
|
- }
|
|
|
- .numbers {
|
|
|
- margin-top: 8px;
|
|
|
- color: #000000;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 24px;
|
|
|
- .flex();
|
|
|
- .price {
|
|
|
- flex-grow: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .total-price {
|
|
|
- margin-top: 20px;
|
|
|
- .flex();
|
|
|
- justify-content: flex-end;
|
|
|
- color: @text3;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .divider {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- margin-top: 24px;
|
|
|
- .circle {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- border-radius: 11px;
|
|
|
- background: @prim;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
- .line {
|
|
|
- margin: 0 9px;
|
|
|
- border-top: 1px dashed @border2;
|
|
|
- }
|
|
|
- }
|
|
|
- .list {
|
|
|
- margin-top: 29px;
|
|
|
- .row {
|
|
|
- .flex();
|
|
|
- line-height: 24px;
|
|
|
- margin-bottom: 14px;
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- color: #939599;
|
|
|
- flex-grow: 1;
|
|
|
- }
|
|
|
- .num {
|
|
|
- font-size: 14px;
|
|
|
- color: black;
|
|
|
- }
|
|
|
- &.head {
|
|
|
- .name {
|
|
|
- color: #000000;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .group {
|
|
|
- border-top: 1px solid @border2;
|
|
|
- .row {
|
|
|
- .flex();
|
|
|
- margin-top: 14px;
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- color: @text3;
|
|
|
- flex-grow: 1;
|
|
|
- }
|
|
|
- .value {
|
|
|
- font-size: 14px;
|
|
|
- color: @text1;
|
|
|
- .flex();
|
|
|
- .btn-copy {
|
|
|
- width: 40px;
|
|
|
- height: 22px;
|
|
|
- background: #f2f3f5;
|
|
|
- border-radius: 2px;
|
|
|
- .flex();
|
|
|
- justify-content: center;
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 14px;
|
|
|
- color: #303133;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.bottom {
|
|
|
- height: 56px;
|
|
|
- .flex();
|
|
|
- justify-content: center;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background: white;
|
|
|
- box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.06);
|
|
|
- padding: 0 25px env(safe-area-inset-bottom);
|
|
|
-}
|
|
|
-.btn-cancel {
|
|
|
- text-align: center;
|
|
|
- flex-grow: 1;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #c8c9cc;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #939599;
|
|
|
- line-height: 44px;
|
|
|
- margin: 0 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-pay {
|
|
|
- flex-grow: 1;
|
|
|
- width: auto;
|
|
|
- margin: 0 5px;
|
|
|
-}
|
|
|
-.status-info {
|
|
|
- .flex();
|
|
|
- padding: 3px 55px 20px;
|
|
|
- .left {
|
|
|
- flex-grow: 1;
|
|
|
- .status {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- font-size: 13px;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.code {
|
|
|
- .flex-col();
|
|
|
- align-items: center;
|
|
|
- .qrcode {
|
|
|
- position: relative;
|
|
|
- border-radius: 12px;
|
|
|
- border: 1px solid #f5f7fa;
|
|
|
- padding: 5px;
|
|
|
- margin-top: 27px;
|
|
|
- canvas {
|
|
|
- // width: 200px;
|
|
|
- // height: 200px;
|
|
|
- // padding: 15px;
|
|
|
- }
|
|
|
- .qrcode-img {
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 12px;
|
|
|
- border: 1px solid #f5f7fa;
|
|
|
- img {
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
- }
|
|
|
- }
|
|
|
- .flex-col();
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &.used {
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 2;
|
|
|
- background-color: rgba(255, 255, 255, 0.8);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .used-img {
|
|
|
- width: 66px;
|
|
|
- height: 66px;
|
|
|
- position: absolute;
|
|
|
- right: 0px;
|
|
|
- bottom: 0px;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
- color: #c8c9cc;
|
|
|
- line-height: 24px;
|
|
|
- margin-top: 12px;
|
|
|
- background: #f5f7fa;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 2px 9px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.code-detail-info {
|
|
|
- .name {
|
|
|
- .flex();
|
|
|
- margin-top: 30px;
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000000;
|
|
|
- line-height: 24px;
|
|
|
- margin-left: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .val {
|
|
|
- font-size: 16px;
|
|
|
- color: #606266;
|
|
|
- line-height: 26px;
|
|
|
- margin-left: 24px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.coupon-info {
|
|
|
- position: relative;
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .flex-col();
|
|
|
- align-items: center;
|
|
|
- .bg {
|
|
|
- width: 100vw;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 156px;
|
|
|
- height: 48px;
|
|
|
- transform: translateY(-24px);
|
|
|
- }
|
|
|
-
|
|
|
- .close {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- .flex();
|
|
|
- position: absolute;
|
|
|
- top: 312px;
|
|
|
- left: 78px;
|
|
|
- right: 65px;
|
|
|
- bottom: 159px;
|
|
|
-
|
|
|
- .left {
|
|
|
- flex-grow: 1;
|
|
|
-
|
|
|
- .tag {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
- color: #f9692a;
|
|
|
- line-height: 18px;
|
|
|
- width: 42px;
|
|
|
- height: 18px;
|
|
|
- background: #ffd984;
|
|
|
- border-radius: 2px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- .desc {
|
|
|
- font-size: 11px;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- font-size: 33px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ec4b25;
|
|
|
- line-height: 54px;
|
|
|
- margin-left: 12px;
|
|
|
- width: 80px;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '¥';
|
|
|
- font-size: 14px;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .text {
|
|
|
- position: absolute;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
- line-height: 20px;
|
|
|
- bottom: 150px;
|
|
|
- text-align: center;
|
|
|
- left: 100px;
|
|
|
- right: 100px;
|
|
|
- span {
|
|
|
- color: #ee4f26;
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
