282 lines
7.4 KiB
Vue
282 lines
7.4 KiB
Vue
<template>
|
||
<view class="detail" style="padding: 0 20rpx;">
|
||
<view class="title bg-white hide">
|
||
<view class="iconfont icon-cuowutishi qy-text-red" style="font-size: 30px;"></view>
|
||
<view class="qy-text-red">商家取消了订单</view>
|
||
<view class="title_yy">
|
||
<view class="title_yy_l qy-text-grey">取消原因：商户同意用户退款</view>
|
||
<view class="title_yy_r"><view class="iconfont icon-tishi" ></view>取消规则</view>
|
||
</view>
|
||
</view>
|
||
<view class="ddps">
|
||
<view class="ddps_l"><img class="pare_logo":src="(info.store_logo)"></img></view>
|
||
<view class="ddps_r">{{info.po_id}}</view>
|
||
</view>
|
||
<view class="list qy-bg-white">
|
||
<view class="li" >
|
||
<view class="li_m">{{__('商家名称')}}</view>
|
||
<view class="li_r">{{info.store_name}}</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="li_m">{{__('商家电话')}}</view>
|
||
<view class="li_r">{{info.store_tel}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="list qy-bg-white">
|
||
<view class="li" >
|
||
<view class="li_m">{{__('客人姓名')}}</view>
|
||
<view class="li_r">{{info.po_receive_name}}</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="li_m">{{__('客人电话')}}</view>
|
||
<view class="li_r">{{receive_tel}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list qy-bg-white">
|
||
<view class="li" >
|
||
<view class="li_m">{{__('本单收入')}}</view>
|
||
<view class="li_r">{{__('￥')}}{{info.po_freight}}</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="li_m">{{__('结束时间')}}</view>
|
||
<view class="li_r">{{info.po_endtime}}</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="li_m">{{__('期望时间')}}</view>
|
||
<view class="li_r">{{info.po_expectedtime}}</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="li_m">{{__('备注')}}</view>
|
||
<view class="li_r">{{info.po_remark}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="Process padding-xs" >
|
||
<view class="process_01">
|
||
<view class="process_01_l">
|
||
<view class="process_01_l_01 qy-bg-yellow text-white">
|
||
<view class="tex">{{__('取')}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="process_01_r">
|
||
<view class="">{{__('地址')}}</view>
|
||
<span>{{info.store_address}}</span>
|
||
</view>
|
||
</view>
|
||
<view class="process_01">
|
||
<view class="process_01_l">
|
||
<view class="process_01_l_01 qy-bg-red text-white">
|
||
<view class="tex">{{__('送')}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="process_01_r">
|
||
<view class="process_01_r_01">{{__('地址')}}</view>
|
||
<span>{{info.po_receive_address}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="shang bg-white">
|
||
{{__('签收照片')}}<span class="text-gery text-sm"></span>
|
||
</view>
|
||
<view class="packer bg-white">
|
||
<block v-for="(item,index) in info.po_pickup_image">
|
||
<view class="pac bg-gray text-bold">
|
||
<image :src="item" :data-src="item" @click="ImgTap"></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="list qy-bg-white">
|
||
<view class="li" >
|
||
<view class="li_m">{{__('签收时间')}}</view>
|
||
<view class="li_r">{{info.po_endtime}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="time qy-bg-white margin-top-sm" v-if="(false)">
|
||
<view class="time_l ">
|
||
<view class="time_l_01 ">{{__('本单收入')}}</view>
|
||
<view class="time_l_02">{{__('￥')}}{{info.po_freight}}</view>
|
||
</view>
|
||
<view class="time_m"></view>
|
||
<view class="time_l ">
|
||
<view class="time_r_01">{{__('下单时间')}}</view>
|
||
<view class="time_r_02">{{info.order_time}}</view>
|
||
</view>
|
||
<view class="time_m"></view>
|
||
<view class="time_l ">
|
||
<view class="time_r_01">{{__('期望时间')}}</view>
|
||
<view class="time_r_02">{{info.po_expectedtime}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding flex flex-direction margin-top-sm">
|
||
<button class="cu-btn bg-yellow round lg">{{__('已送达')}}</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
po_id: '',
|
||
info: {},
|
||
receive_tel: '',
|
||
};
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
onLoad: function(options){
|
||
uni.setNavigationBarTitle({
|
||
title:this.__('订单详情')
|
||
});
|
||
|
||
|
||
|
||
this.forceUserInfo(function(user) {
|
||
|
||
});
|
||
|
||
if(options.po_id)
|
||
{
|
||
this.setData({
|
||
po_id: options.po_id
|
||
})
|
||
}
|
||
|
||
this.init()
|
||
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
|
||
init: function() {
|
||
var that = this;
|
||
|
||
var params = {
|
||
po_id: that.po_id
|
||
};
|
||
that.$.request({
|
||
url: that.Config.URL.city.order_get,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
var tel = (data.po_receive_tel).toString();;
|
||
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
||
tel = tel.replace(reg, "$1****$2");
|
||
|
||
that.setData({
|
||
info: data,
|
||
receive_tel: tel
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
ImgTap: function(e) {
|
||
var that = this,
|
||
urls = [];
|
||
console.log(e)
|
||
|
||
urls.push(e.target.dataset.src);
|
||
|
||
var s = e.target.dataset.src;
|
||
|
||
that.$.previewImage({ current: s, urls: urls });
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/colorui/animation";
|
||
@import "../../styles/colorui/icon";
|
||
@import "../../styles/colorui/main";
|
||
@import "../../paotui/css/paotui";
|
||
.detail{
|
||
|
||
.title{text-align: center;padding: 25px 0 10px;font-size: 16px;
|
||
.title_yy{display: flex;justify-content: space-between;width: 100%;padding: 25px 10px 2px;font-size: 12px;}
|
||
.title_yy_r{display: flex;}
|
||
}
|
||
.ddps{display: flex;padding: 10px;justify-content: space-between;
|
||
.ddps_r{font-weight: 600;line-height: 80rpx;}
|
||
}
|
||
.time{display: flex;padding: 10px 10px;
|
||
span{font-size: 22px;}
|
||
.time_l{width: 50%;text-align: center;}
|
||
.time_m{border-left: 1px solid #F2F2F2;margin-top: 5px;height: 25px;}
|
||
}
|
||
|
||
.Process{background-color: #fff;padding: 10px;
|
||
.process_01{display: flex;padding: 10px 0;justify-content: space-between;border-bottom: 1px solid #FAFAFA;
|
||
.process_01_l{width: 10%;display:flex;align-items: center;
|
||
.process_01_l_01{width: 20px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;
|
||
border-radius:16px 16px 16px 0;
|
||
-webkit-transform:rotate(-45deg);
|
||
-moz-transform: ratate(-45deg);
|
||
transform:rotate(-45deg);
|
||
.tex{transform:rotate(45deg);}
|
||
}
|
||
}
|
||
.process_01_r{width: 88%;font-size: 16px;font-weight: 600;
|
||
.process_01_r_01{padding-bottom: 5px;}
|
||
span{font-size: 12px;font-weight: 100;}
|
||
}
|
||
}
|
||
.icon-map{
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.qy-bg-yellow {
|
||
background-color: #FBBD08;
|
||
}
|
||
|
||
.text-white {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.qy-bg-red {
|
||
background-color: #FB303C;
|
||
}
|
||
|
||
.pare_logo {
|
||
width:80rpx;
|
||
height:80rpx;
|
||
float:left;
|
||
}
|
||
.list {
|
||
margin:20rpx 0;
|
||
}
|
||
.li{display: flex;border-bottom: 1px solid #F9F9F9;height: 50px;line-height: 50px;padding: 0 10px;
|
||
.li_l{width: 30px;line-height: 100rpx;}
|
||
.li_m{flex-grow: 1;line-height: 100rpx;}
|
||
.li_r{display: flex;color: #A6A6AB;line-height: 100rpx;}
|
||
}
|
||
|
||
.packer{display: flex;justify-content: space-around;border-bottom: 1px solid #F7F7F7;padding:24rpx 20rpx;
|
||
.pac{background-color: #FAFAFA;text-align: center;
|
||
image{width: 88rpx;height: 88rpx;}
|
||
}
|
||
}
|
||
|
||
.shang {
|
||
padding: 24rpx 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.lg{
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
</style>
|