Commit ac6f7b42 by 宋冰琦

修改 订单详情 页面部分内容

parent d589b72d
<template> <template>
<scroll-view class="msg" scroll-y> <scroll-view class="msg" scroll-y>
<view class="empty" v-show="empty == true"> <view class="empty" v-show="empty == true">
<view :style="{'text-align':'center'}">
<image class="empty_icon" src="/static/imgs/none_content.png"></image> <image class="empty_icon" src="/static/imgs/none_content.png"></image>
<view class="empty_text">---暂无消息,去品尝杯咖啡吧---</view> </view>
<button class="empty_button" @click="goHome">去品尝</button> <view class="empty_text">——暂无消息,去品尝杯咖啡吧——</view>
<button class="empty_button" @click="goHome"></button>
</view> </view>
<view class="msg_item" v-for="item in list" @click="toRead(item)" :key="item.id"> <view class="msg_item" v-for="item in list" @click="toRead(item)" :key="item.id">
<view class="msg_item_title_time"> <view class="msg_item_title_time">
...@@ -14,6 +16,7 @@ ...@@ -14,6 +16,7 @@
<view class="msg_content">{{ item.message }}</view> <view class="msg_content">{{ item.message }}</view>
</view> </view>
</scroll-view> </scroll-view>
<show-toast ref="toast"/>
</template> </template>
<script> <script>
...@@ -63,30 +66,31 @@ export default { ...@@ -63,30 +66,31 @@ export default {
/* 兼容老版本的方法 */ /* 兼容老版本的方法 */
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
margin-top: 200rpx; margin-top: 311rpx;
.empty_icon { .empty_icon {
width: 325rpx; width: 280rpx;
height: 296rpx; height: 266rpx;
} }
.empty_text { .empty_text {
font-size: 20rpx; margin-top: 44rpx;
margin-top: 10rpx; width: 414rpx;
font-family: ArialMT;
color: #666666;
text-align: center; text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
} }
.empty_button { .empty_button {
width: 128rpx; margin-top: 35rpx;
height: 46rpx; width: 167rpx;
margin-top: 10rpx; height: 64rpx;
background: #006ECF; border-radius: 2rpx;
border-radius: 10rpx; background: url('@/static/imgs/qupinchang.png') center center no-repeat;
text-align: center; }
font-size: 20rpx; .empty_button::after{
line-height: 46rpx; border-radius: 2rpx;
color: #fff;
} }
} }
......
...@@ -2,25 +2,36 @@ ...@@ -2,25 +2,36 @@
<div class="pages"> <div class="pages">
<div class="order_status"> <div class="order_status">
<view class="status_text">{{ orderStatusText }}</view> <view class="status_text">{{ orderStatusText }}</view>
<view class="tips">
<view v-if="orderInfo.state == 7">为保持口感,请尽快引用哦~</view>
<view v-if="orderInfo.state == 4">订单已制作完成,请尽快取餐~</view>
</view>
<div class="btns"> <div class="btns">
<a type="primary" @click="cancelOrder" v-if="orderInfo.state == 1" class="btn_cancel">取消订单</a> <a type="primary" @click="cancelOrder" v-if="orderInfo.state == 1" class="btn_cancel">取消订单</a>
<a type="primary" @click="PayNow" v-if="orderInfo.state == 1" class="btn">立即支付</a> <a type="primary" @click="PayNow" v-if="orderInfo.state == 1" class="btn">立即支付</a>
<a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn">申请退款</a> <a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn_cancel">申请退款</a>
<a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a> <a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a>
</div> </div>
</div> </div>
<div class="order_flow"> <div class="order_flow">
<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div> <div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
<div v-if="qrShow" class="qr_code"> <div class="realQrcodeBox" v-if="qrShow&&isBuild">
<image mode="aspectFit" :src="ewmImg" class="qr"></image> <image mode="aspectFit" :src="ewmImg" class="qr_real"></image>
<view class="status_text">{{ qrText }}</view> </div>
<div v-if="qrShow&&!isBuild" class="qr_code" >
<image mode="aspectFit" :src="'/static/imgs/erweimazhedang.png'" class="qr"></image>
<view class="status_text">——制作完成后才能扫哦——</view>
</div> </div>
<canvas v-if="qrShow" 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> <image :mode="'aspectFit'" class="flow_img" src="/static/imgs/saomaliucheng.png"></image>
<image :mode="'aspectFit'" class="flow_img" src="/static/imgs/order_flow.png"></image> </div>
</div> </div>
<div class="shop_info"> <div class="shop_info">
<div class="address"> <div class="address">
<div class="address_1">{{ orderInfo.shop.name }}</div> <div class="address_1">{{ orderInfo.shop.name }}</div>
...@@ -36,7 +47,7 @@ ...@@ -36,7 +47,7 @@
<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>
<div class="price">¥{{ Utils.isInteger(setPrice(item.realAmount)) }}</div> <div class="price">¥{{ Utils.isInteger(item.realAmount) }}</div>
</div> </div>
<div class="goods_psce"> <div class="goods_psce">
<div class="psce_name"> <div class="psce_name">
...@@ -65,31 +76,9 @@ ...@@ -65,31 +76,9 @@
<div class="size">{{ totalNum }}件商品</div> <div class="size">{{ totalNum }}件商品</div>
<div> <div>
<span class="paid_in">实付</span> <span class="paid_in">实付</span>
<span class="money">{{ Utils.isInteger(setPrice(orderInfo.amount)) }}</span> <span class="money">{{ Utils.isInteger(orderInfo.amount) }}</span>
</div>
</div>
</div>
</div>
<div class="order_describe">
<h3>订单信息</h3>
<div class="item">
<span class="label">下单时间:</span>
<span class="value">{{ orderInfo.createdAt }}</span>
</div>
<div class="item">
<span class="label">取单码号:</span>
<span class="value">{{ orderInfo.orderNum }}</span>
</div>
<div class="item">
<span class="label">订单编号:</span>
<span class="value">{{ orderInfo.orderNo }}</span>
</div> </div>
</div> </div>
<div class="customer_service">
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
<span>有疑问,联系客服</span>
<u-icon name="arrow-right" color="#000" size="20"></u-icon>
</button>
</div> </div>
</div> </div>
</template> </template>
...@@ -106,9 +95,9 @@ export default { ...@@ -106,9 +95,9 @@ export default {
const resData = uni.getStorageSync('orderInfo'); const resData = uni.getStorageSync('orderInfo');
this.orderInfo = resData this.orderInfo = resData
const isBuild = ['4', '5'].indexOf(this.orderInfo.state) >= 0; const isBuild = ['4', '5'].indexOf(this.orderInfo.state) >= 0;
if (isBuild) { if (!isBuild) {
new QRCode('myQrcode', { new QRCode('myQrcode', {
text: this.orderInfo.pickCode, text: 'http://www.baidu.com',
width: 141, //canvas 画布的宽 width: 141, //canvas 画布的宽
height: 141, //canvas 画布的高 height: 141, //canvas 画布的高
padding: 0, // 生成二维码四周自动留边宽度,不传入默认为0 padding: 0, // 生成二维码四周自动留边宽度,不传入默认为0
...@@ -117,15 +106,15 @@ export default { ...@@ -117,15 +106,15 @@ export default {
this.ewmImg = res.path this.ewmImg = res.path
} }
}) })
} else {
this.ewmImg = '/static/imgs/noQr.png'
} }
this.isBuild = isBuild
}, },
data() { data() {
return { return {
orderInfo: {}, orderInfo: {},
ewmImg: '', ewmImg: '',
Utils Utils,
isBuild:true
} }
}, },
methods: { methods: {
...@@ -182,13 +171,14 @@ export default { ...@@ -182,13 +171,14 @@ export default {
computed: { computed: {
totalNum() { totalNum() {
let totalNum = 0; let totalNum = 0;
this.orderInfo.orderDetails.forEach(item => { const {orderDetails} = this.orderInfo
orderDetails.forEach(item => {
totalNum += parseInt(item.num); totalNum += parseInt(item.num);
}) })
return totalNum; return totalNum;
}, },
qrShow() { qrShow() {
console.log(this.orderInfo.orderDetails);
return ['2','3','4','5'].indexOf(this.orderInfo.state) >= 0; return ['2','3','4','5'].indexOf(this.orderInfo.state) >= 0;
}, },
// 1 未支付 // 1 未支付
...@@ -260,110 +250,117 @@ export default { ...@@ -260,110 +250,117 @@ export default {
} }
.order_status { .order_status {
width: 590rpx;
// max-height: 174rpx; // max-height: 174rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; margin: 32rpx 32rpx;
margin: 32rpx auto 0; padding: 24rpx 0rpx 30rpx 0rpx;
padding: 14px;
.status_text { .status_text {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
text-align: center;
}
.tips {
text-align: center; text-align: center;
margin-top: 19rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
} }
.btns { .btns {
margin-top: 26rpx;
text-align: center; text-align: center;
width: 428rpx;
display: flex; display: flex;
align-items: center; margin: 0 auto;
justify-content: center; justify-content: space-around;
a {
line-height: 64rpx;
}
} }
.btn { .btn {
width: 160rpx; font-size: 24rpx;
height: 52rpx; font-family: PingFangSC-Regular, PingFang SC;
background: #006ECF; font-weight: 400;
border-radius: 6rpx;
display: inline-block;
margin: 0rpx 20rpx;
margin-top: 20rpx;
padding: 0;
line-height: 52rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
font-size: 20rpx;
text-align: center; width: 167rpx;
height: 64rpx;
background: #003AE9;
border-radius: 2rpx;
} }
.btn_cancel { .btn_cancel {
width: 160rpx; box-sizing: border-box;
height: 52rpx; font-size: 24rpx;
border: 1rpx solid #EEEEEE; font-family: PingFangSC-Regular, PingFang SC;
border-radius: 6rpx; font-weight: 400;
display: inline-block; color: #003AE9;
margin: 0rpx 20rpx;
margin-top: 20rpx; width: 167rpx;
padding: 0; height: 64rpx;
line-height: 52rpx; border-radius: 2rpx;
font-family: PingFangSC-Medium, PingFang SC; border: 2rpx solid #003AE9;
font-weight: 500;
color: #006ECF;
font-size: 20rpx;
text-align: center;
} }
} }
.order_flow { .order_flow {
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; margin: 32rpx;
margin-top: 32rpx; padding-top: 55rpx;
.code { .code {
font-size: 36rpx; text-align: center;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #333333;
text-align: center;
padding-top: 30rpx;
} }
.qr_code { .qr_code {
width: 508rpx; height: 314rpx;
height: 510rpx;
display: block; display: block;
margin: 25rpx auto; margin: 92rpx auto;
background-color: #ccc;
position: relative; position: relative;
.status_text { .status_text {
font-size: 48rpx; margin-top: 40rpx;
font-family: PingFangSC-Semibold, PingFang SC; text-align: center;
font-weight: 600; font-size: 28rpx;
color: #FFFFFF; font-family: PingFangSC-Medium, PingFang SC;
line-height: 66rpx; font-weight: 500;
position: absolute; color: #666666;
top: 50%; line-height: 40rpx;
left: 50%; letter-spacing: 1rpx;
transform: translate(-50%, -50%);
} }
.qr { .qr {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.realQrcodeBox{
margin: 20rpx auto;
width: 510rpx;
height: 510rpx;
image{
width: 100%;
height: 100%;
}
}
.flow_describe { .flow_describe {
width: 590rpx; width: 100%;
height: 300rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
border-radius: 10rpx; border-radius: 10rpx;
margin: 0 auto; padding-top: 50rpx;
padding: 30rpx; padding-bottom: 60rpx;
margin-bottom: 10rpx;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
...@@ -373,20 +370,17 @@ export default { ...@@ -373,20 +370,17 @@ export default {
} }
.flow_img { .flow_img {
width: 590rpx; width: 100%;
height: 211rpx; height: 100%;
display: block; display: block;
} }
} }
} }
.shop_info { .shop_info {
width: 686rpx; margin: 32rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; padding: 40rpx 30rpx;
margin: 0 auto;
padding: 0rpx 32rpx;
box-sizing: border-box;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
...@@ -396,23 +390,24 @@ export default { ...@@ -396,23 +390,24 @@ export default {
} }
.address { .address {
padding-top: 20rpx; border-bottom: 1rpx solid #ECECEC;
border-bottom: 1rpx solid #EEEEEE; padding-bottom: 25rpx;
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;
color: #333333; color: #333333;
line-height: 40rpx;
} }
.address_2 { .address_2 {
margin-top: 5rpx; margin-top: 18rpx;
font-size: 20rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 34rpx;
} }
} }
...@@ -426,8 +421,8 @@ export default { ...@@ -426,8 +421,8 @@ export default {
} }
.goods_img { .goods_img {
height: 80rpx; height: 112rpx;
width: 80rpx; width: 112rpx;
background-color: #eee; background-color: #eee;
margin-right: 30rpx; margin-right: 30rpx;
} }
...@@ -442,24 +437,24 @@ export default { ...@@ -442,24 +437,24 @@ export default {
align-items: center; align-items: center;
.name { .name {
font-size: 24rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600; font-weight: 400;
color: #333333; color: #666666;
} }
.price { .price {
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: Futura-Medium, Futura;
font-weight: normal; font-weight: 500;
color: #000000; color: #333333;
} }
.psce_name { .psce_name {
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #999999;
} }
.size { .size {
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<view class="user-name" v-if="userms">HI!{{ userInfo.customerName || '我是谁' }}</view> <view class="user-name" v-if="userms">HI!{{ userInfo.customerName || '我是谁' }}</view>
<view class="user-name" v-else>未登录</view> <view class="user-name" v-else>未登录</view>
<view class="dialog"> <view class="dialog">
<view class="content" v-if="userms">如果以后再也见不到你,那就祝你早安,午安,晚安...</view> <view class="content" v-if="userms">如果以后再也见不到你,那就祝你早安</view>
<view class="content" v-if="!userms">请您尽快登录</view> <view class="content" v-if="!userms">请您尽快登录</view>
</view> </view>
</view> </view>
......
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