|
|
@@ -12,16 +12,25 @@
|
|
|
<div class="page-scroll">
|
|
|
<div class="status-info">
|
|
|
<div class="left">
|
|
|
- <div class="status">{{ status }}</div>
|
|
|
+ <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">{{ packageInfo.name }}</div>
|
|
|
- <div class="numbers">
|
|
|
+ <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>
|
|
|
@@ -31,36 +40,46 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="total-price">
|
|
|
+ <!-- <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> -->
|
|
|
<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">
|
|
|
+ <div class="qrcode">
|
|
|
+ <canvas canvas-id="mycanvas" :style="{ width: codeSize + 'px', height: codeSize + 'px' }" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="list">
|
|
|
<div class="row head">
|
|
|
- <div class="name">包含项目</div>
|
|
|
- <div class="num">数量</div>
|
|
|
+ <div class="name">支付详情</div>
|
|
|
</div>
|
|
|
- <div class="row" v-for="item in packageGoods" :key="item.id">
|
|
|
- <div class="name">{{ item.name }}</div>
|
|
|
- <div class="num">{{ item.num }}{{ item.unit }}</div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="name">商品总额</div>
|
|
|
+ <div class="num">¥{{ orderInfo.price }}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="group">
|
|
|
<div class="row">
|
|
|
- <div class="name">配送方式</div>
|
|
|
- <div class="value">即时到账</div>
|
|
|
+ <div class="name">运费</div>
|
|
|
+ <div class="num">+0.00</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="name">订单留言</div>
|
|
|
- <div class="value">无</div>
|
|
|
+ <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:10px">
|
|
|
+ <div class="group" style="margin-top:20px">
|
|
|
<div class="row">
|
|
|
<div class="name">订单编号</div>
|
|
|
<div class="value">
|
|
|
@@ -76,39 +95,72 @@
|
|
|
<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 style="height:80px"></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-large btn-pay" @click="pay">立即支付</div>
|
|
|
+ <div class="btn-cancel " @click="cancel">取消订单</div>
|
|
|
+ <div class="btn-pay btn-large" @click="pay">立即支付</div>
|
|
|
</div>
|
|
|
+ <van-dialog id="van-dialog"></van-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import recommend from './recommend.vue';
|
|
|
+import qrcode from '../qrcode';
|
|
|
export default {
|
|
|
+ components: { recommend },
|
|
|
data() {
|
|
|
return {
|
|
|
orderInfo: {},
|
|
|
packageInfo: {},
|
|
|
packageGoods: [],
|
|
|
orderStatus: [
|
|
|
- { label: '待支付', value: 'UNPAID' },
|
|
|
- { label: '已完成', value: 'PAID' },
|
|
|
- { label: '已取消', value: 'CANCELLED' },
|
|
|
- { label: '已完成', value: 'OFFLINE_PAID' }
|
|
|
- ]
|
|
|
+ { label: '待付款', value: 'UNPAID', desc: '您还没完成支付哦～' },
|
|
|
+ { label: '待使用', value: 'PAID', desc: '使用时请展示核销码' },
|
|
|
+ { label: '已取消', value: 'CANCELLED', desc: '订单已经被取消了' },
|
|
|
+ { label: '已完成', value: 'OFFLINE_PAID', desc: '欢迎下次继续购买哦' }
|
|
|
+ ],
|
|
|
+ qrcodeImg: ''
|
|
|
};
|
|
|
},
|
|
|
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.createQrCode(encodeURI(`orderId=${res.id}&time=${new Date().getTime()}`), 'mycanvas', 200, 200);
|
|
|
});
|
|
|
- this.$http.postJson('/packageGoods/all', { size: 10000, query: { packageId: res.packageId } }).then(res => {
|
|
|
- this.packageGoods = res.content;
|
|
|
- });
|
|
|
+
|
|
|
+ // this.$http.postJson('/packageGoods/all', { size: 10000, query: { packageId: res.packageId } }).then(res => {
|
|
|
+ // this.packageGoods = res.content;
|
|
|
+ // });
|
|
|
});
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -119,7 +171,7 @@ export default {
|
|
|
return (this.orderInfo.price || 0).toFixed(2).split('.')[1];
|
|
|
},
|
|
|
status() {
|
|
|
- return (this.orderStatus.find(i => i.value === this.orderInfo.status) || {}).label;
|
|
|
+ return this.orderStatus.find(i => i.value === this.orderInfo.status) || {};
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -185,43 +237,86 @@ export default {
|
|
|
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);
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
-page {
|
|
|
-}
|
|
|
.page-scroll {
|
|
|
- padding-bottom: 0 !important;
|
|
|
- background: linear-gradient(to top, #f5f7fa 0, @prim 200px, @prim 100%);
|
|
|
+ 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: 50px 20px 50px 20px;
|
|
|
- padding-bottom: 30px;
|
|
|
- .status {
|
|
|
- width: 130px;
|
|
|
- height: 44px;
|
|
|
- background: white;
|
|
|
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.03);
|
|
|
- border-radius: 22px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- font-weight: 500;
|
|
|
- color: @prim;
|
|
|
- line-height: 20px;
|
|
|
- .flex();
|
|
|
- justify-content: center;
|
|
|
- position: absolute;
|
|
|
- top: -22px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
+ padding: 20px 16px 16px;
|
|
|
.info {
|
|
|
width: 100%;
|
|
|
.flex();
|
|
|
@@ -236,17 +331,28 @@ page {
|
|
|
height: 80px;
|
|
|
flex-grow: 1;
|
|
|
.flex-col();
|
|
|
+ overflow: hidden;
|
|
|
.name {
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
- font-weight: 500;
|
|
|
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: @text3;
|
|
|
+ color: #000000;
|
|
|
font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
.flex();
|
|
|
.price {
|
|
|
flex-grow: 1;
|
|
|
@@ -264,7 +370,7 @@ page {
|
|
|
.divider {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
- margin-top: 36px;
|
|
|
+ margin-top: 24px;
|
|
|
.circle {
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
@@ -285,25 +391,21 @@ page {
|
|
|
.row {
|
|
|
.flex();
|
|
|
line-height: 24px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 14px;
|
|
|
.name {
|
|
|
font-size: 14px;
|
|
|
- color: black;
|
|
|
+ color: #939599;
|
|
|
flex-grow: 1;
|
|
|
}
|
|
|
.num {
|
|
|
font-size: 14px;
|
|
|
color: black;
|
|
|
- font-weight: bold;
|
|
|
- font-weight: 500;
|
|
|
}
|
|
|
&.head {
|
|
|
.name {
|
|
|
- color: @text3;
|
|
|
- }
|
|
|
- .num {
|
|
|
- color: @text3;
|
|
|
- font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -325,26 +427,96 @@ page {
|
|
|
.btn-copy {
|
|
|
width: 40px;
|
|
|
height: 22px;
|
|
|
+ background: #f2f3f5;
|
|
|
border-radius: 2px;
|
|
|
- border: 1px solid @border3;
|
|
|
.flex();
|
|
|
justify-content: center;
|
|
|
- margin-left: 6px;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 22px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bottom {
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- height: 60px;
|
|
|
+ height: 56px;
|
|
|
.flex();
|
|
|
justify-content: center;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
- width: 100%;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.code {
|
|
|
+ .qrcode {
|
|
|
+ canvas {
|
|
|
+ // width: 200px;
|
|
|
+ // height: 200px;
|
|
|
+ // padding: 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid #f5f7fa;
|
|
|
+ }
|
|
|
+ .qrcode-img {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid #f5f7fa;
|
|
|
+ img {
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ padding: 27px 0 0;
|
|
|
+ .flex-col();
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
