Skip to content

U
user
Commit 31e89ad2 by weijiguang
Options

修改订单详情UI

parent b511068a
Showing with 44 additions and 47 deletions
orderSubPackage/pages/orderInfo/index.vue
...@@ -15,12 +15,11 @@ ...@@ -15,12 +15,11 @@
<image mode="aspectFit" :src="ewmImg" class="qr"></image> <image mode="aspectFit" :src="ewmImg" class="qr"></image>
<view class="status_text">{{ orderStatusText }}</view> <view class="status_text">{{ orderStatusText }}</view>
</div> </div>
<canvas class="canvas-code" canvas-id="myQrcode" <canvas v-if="qrShow" class="canvas-code" canvas-id="myQrcode"
style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" /> style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
<div v-if="qrShow" class="flow_describe"> <div v-if="qrShow" class="flow_describe">
<h3>扫码流程 </h3> <h3>扫码流程</h3>
<image :mode="'aspectFit'" width="600px" class="flow_img" src="../../../static/imgs/order_flow.png"> <image :mode="'aspectFit'" class="flow_img" src="/static/imgs/order_flow.png"></image>
</image>
</div> </div>
<div class="shop_info"> <div class="shop_info">
<div class="address"> <div class="address">
...@@ -33,10 +32,7 @@ ...@@ -33,10 +32,7 @@
<image mode="aspectFit" v-if="jsonParse(item.goods.pics).thumbnailApplet" <image mode="aspectFit" v-if="jsonParse(item.goods.pics).thumbnailApplet"
:src="jsonParse(item.goods.pics).thumbnailApplet" class="goods_img"> :src="jsonParse(item.goods.pics).thumbnailApplet" class="goods_img">
</image> </image>
<image mode="aspectFit" v-else :src="jsonParse(item.goods.pics).thumbnail" <image mode="aspectFit" v-else :src="jsonParse(item.goods.pics).thumbnail" class="goods_img"></image>
class="goods_img">
</image>
<div class="goods_text"> <div class="goods_text">
<div class="goods_name"> <div class="goods_name">
<div class="name">{{ item.goodsName }}</div> <div class="name">{{ item.goodsName }}</div>
...@@ -44,16 +40,17 @@ ...@@ -44,16 +40,17 @@
</div> </div>
<div class="goods_psce"> <div class="goods_psce">
<div class="psce_name"> <div class="psce_name">
<span v-for="rule in jsonParse(item.specRuleDetail)" :key="rule.specId"> <span v-for="(rule, index) in jsonParse(item.specRuleDetail)" :key="rule.specId">
{{ rule.ruleName }}/ {{ rule.ruleName }}
<text v-if="index != jsonParse(item.specRuleDetail).length - 1">/</text>
</span> </span>
</div> </div>
<div class="size">*{{ item.num }}</div> <div class="size">x{{ item.num }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="discount"> <!-- <div class="discount">
<div class="discount_1"> <div class="discount_1">
<div class="name">优惠免减</div> <div class="name">优惠免减</div>
<div class="price">¥{{ setPrice(item.amount - item.realAmount) }}</div> <div class="price">¥{{ setPrice(item.amount - item.realAmount) }}</div>
...@@ -62,10 +59,10 @@ ...@@ -62,10 +59,10 @@
<div class="name">特惠价</div> <div class="name">特惠价</div>
<div class="price">¥{{ setPrice(item.realAmount) }}</div> <div class="price">¥{{ setPrice(item.realAmount) }}</div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="total"> <div class="total">
<div class="size">共一件商品</div> <div class="size">共{{ totalNum }}件商品</div>
<div> <div>
<span class="paid_in">实付</span> <span class="paid_in">实付</span>
<span class="money">￥{{ setPrice(orderInfo.amount) }}</span> <span class="money">￥{{ setPrice(orderInfo.amount) }}</span>
...@@ -108,6 +105,7 @@ export default { ...@@ -108,6 +105,7 @@ export default {
onLoad() { onLoad() {
const resData = uni.getStorageSync('orderInfo'); const resData = uni.getStorageSync('orderInfo');
this.orderInfo = resData this.orderInfo = resData
console.log("orderInfo:"+JSON.stringify(this.orderInfo));
this.ewmImg = '/static/imgs/noQr.png' this.ewmImg = '/static/imgs/noQr.png'
const isBuild = ['2', '3', '4', '5'].indexOf(this.orderInfo.state) != -1; const isBuild = ['2', '3', '4', '5'].indexOf(this.orderInfo.state) != -1;
...@@ -171,7 +169,6 @@ export default { ...@@ -171,7 +169,6 @@ export default {
} }
}) })
}, },
jsonParse(json) { jsonParse(json) {
return JSON.parse(json) return JSON.parse(json)
...@@ -183,6 +180,13 @@ export default { ...@@ -183,6 +180,13 @@ export default {
}, },
}, },
computed: { computed: {
totalNum() {
let totalNum = 0;
this.orderInfo.orderDetails.map(item => {
totalNum += parseInt(item.num);
})
return totalNum;
},
qrShow() { qrShow() {
console.log("order state:"+this.orderInfo.state); console.log("order state:"+this.orderInfo.state);
return ['2','3','4','5'].indexOf(this.orderInfo.state) != -1 return ['2','3','4','5'].indexOf(this.orderInfo.state) != -1
...@@ -253,8 +257,8 @@ export default { ...@@ -253,8 +257,8 @@ export default {
} }
.order_status { .order_status {
width: 686rpx; width: 590rpx;
max-height: 174rpx; // max-height: 174rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
margin: 32rpx auto 0; margin: 32rpx auto 0;
...@@ -273,8 +277,6 @@ export default { ...@@ -273,8 +277,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.btn { .btn {
...@@ -283,7 +285,8 @@ export default { ...@@ -283,7 +285,8 @@ export default {
background: #006ECF; background: #006ECF;
border-radius: 6rpx; border-radius: 6rpx;
display: inline-block; display: inline-block;
margin: 20rpx; margin: 0rpx 20rpx;
margin-top: 20rpx;
padding: 0; padding: 0;
line-height: 52rpx; line-height: 52rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
...@@ -295,10 +298,11 @@ export default { ...@@ -295,10 +298,11 @@ export default {
.btn_cancel { .btn_cancel {
width: 160rpx; width: 160rpx;
height: 52rpx; height: 52rpx;
border: 1rpx solid #CCCCCC; border: 1rpx solid #EEEEEE;
border-radius: 6rpx; border-radius: 6rpx;
display: inline-block; display: inline-block;
margin: 20rpx; margin: 0rpx 20rpx;
margin-top: 20rpx;
padding: 0; padding: 0;
line-height: 52rpx; line-height: 52rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
...@@ -313,7 +317,6 @@ export default { ...@@ -313,7 +317,6 @@ export default {
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
margin-top: 32rpx; margin-top: 32rpx;
padding-top: 65rpx;
.code { .code {
font-size: 36rpx; font-size: 36rpx;
...@@ -321,7 +324,7 @@ export default { ...@@ -321,7 +324,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
text-align: center; text-align: center;
padding-top: 30rpx;
} }
.qr_code { .qr_code {
...@@ -351,15 +354,13 @@ export default { ...@@ -351,15 +354,13 @@ export default {
} }
.flow_describe { .flow_describe {
width: 686rpx; width: 590rpx;
height: 340rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
border-radius: 10rpx; border-radius: 10rpx;
margin: 0 auto; margin: 0 auto;
padding: 30rpx; padding: 30rpx;
margin-bottom: 10rpx;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
...@@ -369,10 +370,9 @@ export default { ...@@ -369,10 +370,9 @@ export default {
} }
.flow_img { .flow_img {
width: 600rpx; width: 590rpx;
height: 214rpx; height: 211rpx;
display: block; display: block;
margin: 24rpx auto;
} }
} }
} }
...@@ -382,11 +382,9 @@ export default { ...@@ -382,11 +382,9 @@ export default {
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
margin: 0 auto; margin: 0 auto;
margin-top: 32rpx; padding: 0rpx 32rpx;
padding: 24rpx 32rpx;
box-sizing: border-box; box-sizing: border-box;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
...@@ -395,10 +393,11 @@ export default { ...@@ -395,10 +393,11 @@ export default {
} }
.address { .address {
margin-top: 16rpx; padding-top: 20rpx;
border-bottom: 1rpx solid #EEEEEE;
padding-bottom: 20rpx;
.address_1 { .address_1 {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
...@@ -414,10 +413,8 @@ export default { ...@@ -414,10 +413,8 @@ export default {
} }
} }
.goods { .goods {
margin-top: 10rpx; padding-top: 20rpx;
padding-top: 15rpx;
.goods_item { .goods_item {
display: flex; display: flex;
...@@ -429,7 +426,7 @@ export default { ...@@ -429,7 +426,7 @@ export default {
height: 80rpx; height: 80rpx;
width: 80rpx; width: 80rpx;
background-color: #eee; background-color: #eee;
margin-right: 50rpx; margin-right: 30rpx;
} }
.goods_text { .goods_text {
...@@ -473,14 +470,12 @@ export default { ...@@ -473,14 +470,12 @@ export default {
margin-top: 10rpx; margin-top: 10rpx;
} }
} }
} }
.discount { .discount {
margin-top: 24rpx; margin-top: 24rpx;
padding-bottom: 24rpx; padding-bottom: 24rpx;
border-bottom: 1rpx solid #CCCCCC; border-bottom: 1rpx solid #EEEEEE;
.discount_1 { .discount_1 {
display: flex; display: flex;
...@@ -510,7 +505,6 @@ export default { ...@@ -510,7 +505,6 @@ export default {
margin-top: 18rpx; margin-top: 18rpx;
.price { .price {
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: 700; font-weight: 700;
color: #000; color: #000;
...@@ -524,6 +518,9 @@ export default { ...@@ -524,6 +518,9 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 52rpx; margin-top: 52rpx;
border-top: 1rpx solid #EEEEEE;
padding-bottom: 20rpx;
padding-top: 20rpx;
.size { .size {
font-size: 24rpx; font-size: 24rpx;
...@@ -561,7 +558,7 @@ export default { ...@@ -561,7 +558,7 @@ export default {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
border-bottom: 1rpx solid #CCCCCC; border-bottom: 1rpx solid #EEEEEE;
} }
.item { .item {
......
orderSubPackage/pages/settlement/index.vue
...@@ -299,7 +299,7 @@ export default { ...@@ -299,7 +299,7 @@ export default {
.take_order { .take_order {
margin-top: 28rpx; margin-top: 28rpx;
padding-top: 28rpx; padding-top: 28rpx;
border-top: 1rpx solid #CCCCCC; border-top: 1rpx solid #EEEEEE;
.title { .title {
font-size: 28rpx; font-size: 28rpx;
...@@ -344,7 +344,7 @@ export default { ...@@ -344,7 +344,7 @@ export default {
.goods { .goods {
margin-top: 42rpx; margin-top: 42rpx;
border-bottom: 1rpx solid #CCCCCC; border-bottom: 1rpx solid #EEEEEE;
padding-bottom: 20rpx; padding-bottom: 20rpx;
.goods_item { .goods_item {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment