587 lines
14 KiB
Vue
587 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="topBox">
|
||
<view class="statusText">{{orderInfo.status_name}}</view>
|
||
<view class="statusTip">{{orderInfo.order_status_content}}</view>
|
||
</view>
|
||
<view class="orderInfoBox" style="overflow: hidden;">
|
||
<view class="viewBox">
|
||
<view>货物信息</view>
|
||
<view class="goodsInfo flex-between">
|
||
<view class="infoLeft flex-center">
|
||
<image src="/static/img/40.png" class="goodsImg"></image>
|
||
<view style="margin-left: 22rpx;">
|
||
<view class="text1">回收品类</view>
|
||
<view class="text2">{{orderInfo.type_name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoCenter">
|
||
<view class="text1">数量</view>
|
||
<view style="margin-top: 15rpx;">
|
||
<text class="textIcon">x</text>
|
||
<text class="textNum">{{orderInfo.quantity}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="infoRight">
|
||
<view class="text1">单价</view>
|
||
<view style="margin-top: 15rpx;">
|
||
<text class="textIcon">￥</text>
|
||
<text class="textNum">{{orderInfo.single_price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="specsBox">
|
||
<text class="specsText">规格：</text>
|
||
<text>{{deelData(orderInfo.spec_value)}}</text>
|
||
<!-- <text v-for="item in orderInfo.spec_value">{{item}}</text> -->
|
||
<!-- <u-icon name="arrow-right" color="#282F38" size="10"></u-icon> -->
|
||
</view>
|
||
|
||
<view class="countBox">
|
||
<view class="text1">合计</view>
|
||
<view style="margin-top: 0rpx;">
|
||
<text class="textIcon">￥</text>
|
||
<text class="textNum">{{orderInfo.price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-show="orderInfo.person_name" class="infoWrap" style="border-radius: 30rpx;background: #fff;margin-top: 20rpx;">
|
||
<view class="bgHead">
|
||
回收员信息
|
||
</view>
|
||
<view class="infoBox">
|
||
<text class="infoText1">{{orderInfo.person_name}}</text>
|
||
<text class="infoText2">{{orderInfo.person_mobile}}</text>
|
||
<view class="infoTip">平台已认证师傅资质，上门请校核是否本人上门</view>
|
||
<view class="flex-center infoBtnBox" @click="callPhone(orderInfo.person_mobile)">
|
||
<u-icon name="phone" color="#282F38" size="22" style="margin-right: 12rpx;margin-top: 5rpx;"></u-icon>
|
||
联系师傅
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoWrap" style="border-radius: 30rpx;background: #fff;margin-top: 20rpx;">
|
||
<view class="bgHead">
|
||
用户信息
|
||
</view>
|
||
<view class="infoBox">
|
||
<view style="border-bottom: 1px solid #DEDEDE;">
|
||
<text class="infoText1">{{orderInfo.accept_name}}</text>
|
||
<text class="infoText2">{{orderInfo.accept_mobile}}</text>
|
||
<view class="infoAddress" style="margin-top: 10rpx;">{{orderInfo.area_name}}{{orderInfo.accept_address}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoWrap" style="border-radius: 30rpx;background: #fff;margin-top: 20rpx;">
|
||
<view class="bgHead">
|
||
预约上门时间
|
||
<text class="infoTip2">待师傅与您确认哦~</text>
|
||
</view>
|
||
<view class="infoBox">
|
||
<view class="flex-between">
|
||
<text class="infoDate">请选择上门服务时间</text>
|
||
<view class="infoTip3">此项由师傅填写</view>
|
||
</view>
|
||
<view class="infoAddress">期望上门时间：{{orderInfo.order_time}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="detailBox">
|
||
<view>订单备注</view>
|
||
<view class="detailText">{{orderInfo.remark}}</view>
|
||
</view>
|
||
<view class="detailBox">
|
||
<view>订单信息</view>
|
||
<view class="detailText">下单时间：{{orderInfo.order_time}}</view>
|
||
<view class="detailText">订单编号：{{orderInfo.order_no}}</view>
|
||
</view>
|
||
|
||
<!-- <view class="news_title">
|
||
<view class="fsz30 overflow2 title tag">
|
||
{{orderInfo.status_name||''}}
|
||
</view>
|
||
<view class="time fsz26">
|
||
订单号：{{orderInfo.order_no||''}}
|
||
</view>
|
||
<view class="time fsz26">
|
||
下单时间：{{orderInfo.createtime||''}}
|
||
</view>
|
||
<view class="time fsz26" v-if="orderInfo.status ==3">
|
||
完成时间：{{orderInfo.finish_time||''}}
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class=" w">
|
||
<view class="biaoti fsz30">
|
||
预约信息
|
||
</view>
|
||
<view class="main">
|
||
<view class="li fsz30">
|
||
<view class="ti">联系人 : </view>
|
||
<view>{{orderInfo.accept_name||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view class="ti">电话 : </view>
|
||
<view>{{orderInfo.accept_mobile||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view class="ti">地址 : </view>
|
||
<view>{{orderInfo.area_name||''}} </view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view class="ti"></view>
|
||
<view style=" text-align: right;">{{orderInfo.accept_address||''}}</view>
|
||
</view>
|
||
<view class="li fsz30" v-if="orderInfo.status ==3">
|
||
<view class="ti">订单金额 : </view>
|
||
<view style="text-align: right;" class="red-price">{{orderInfo.price||''}}</view>
|
||
</view>
|
||
<view class="li fsz30" v-if="orderInfo.status ==3">
|
||
<view class="ti">订单赠送积分 : </view>
|
||
<view style="text-align: right;" class="red-price">{{orderInfo.send_point||''}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class=" w">
|
||
<view class="biaoti fsz30">
|
||
回收信息
|
||
</view>
|
||
<view class="main">
|
||
<view class="li fsz30">
|
||
<view class="ti">预约回收品类 : </view>
|
||
<view>{{orderInfo.type_name||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view class="ti">预约时间 : </view>
|
||
<view>{{orderInfo.order_time||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view class="ti">预约重量 : </view>
|
||
<view>{{orderInfo.weight||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view class="ti">备注 : </view>
|
||
<view>{{orderInfo.remark||'无'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class=" w" v-if="orderInfo.status==2">
|
||
<view class="biaoti fsz30">
|
||
回收员
|
||
</view>
|
||
<view class="main">
|
||
<view class="li fsz30">
|
||
<view>姓名 : </view>
|
||
<view>{{orderInfo.person_name||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view >电话 : </view>
|
||
<view @tap="call(orderInfo.person_mobile)" >{{orderInfo.person_mobile||''}}</view>
|
||
</view>
|
||
<view class="li fsz30">
|
||
<view >接单时间 : </view>
|
||
<view >{{orderInfo.jiedan_time||''}}</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view style="height:100px"></view>
|
||
</view>
|
||
<view class="button-bottom" v-if="orderInfo.status==1 || orderInfo.status==2">
|
||
<button class='btn btn-default flex-center' v-if="orderInfo.status == 1 || orderInfo.status == 2" @click="cancelOrder()">取消订单</button>
|
||
<view class="buttonEdit flex-center">修改订单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
order_id: '',
|
||
orderInfo: {},
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.order_id = e.id;
|
||
this.getOrderDetail();
|
||
},
|
||
methods: {
|
||
callPhone(phoneNumber) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber, // 必需，电话号码字符串
|
||
success: (res) => {
|
||
console.log("拨号成功", res);
|
||
},
|
||
fail: (err) => {
|
||
console.error("拨号失败", err);
|
||
}
|
||
});
|
||
},
|
||
deelData(val){
|
||
console.log(val)
|
||
let str = ''
|
||
let index = 1
|
||
for(let key in val){
|
||
console.log(key)
|
||
if(index>1){
|
||
str += ' | ' + key+':'+val[key]
|
||
}else{
|
||
str += key+':'+val[key]
|
||
}
|
||
index++
|
||
}
|
||
console.log(str)
|
||
return str
|
||
},
|
||
cancelOrder() {
|
||
uni.showModal({
|
||
title:'提示',
|
||
content: '确认要取消订单吗?',
|
||
success:(ret)=>{
|
||
if(ret.confirm){
|
||
let data = {
|
||
id: this.order_id
|
||
}
|
||
|
||
this.$api.cancelorder(data, res => {
|
||
if (res.code ==1) {
|
||
uni.showToast({ title: res.msg , icon: 'success' })
|
||
setTimeout(function() {
|
||
this.getOrderDetail()
|
||
},2000);
|
||
} else {
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getOrderDetail() {
|
||
let _this = this
|
||
let data = {
|
||
id: _this.order_id
|
||
}
|
||
_this.$api.orderdetail(data, function(res) {
|
||
if (res.code ==1 ) {
|
||
let data = res.data.info
|
||
_this.orderInfo = data;
|
||
} else {
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
},
|
||
call(phone){
|
||
uni.makePhoneCall({
|
||
phoneNumber:phone,
|
||
success:function(){
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail() {
|
||
console.log('打电话失败了');
|
||
}
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background: #F5F5FA;
|
||
}
|
||
|
||
.news_title{
|
||
border-bottom: 1px solid #eee;
|
||
padding: 20rpx 5%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
position: relative;
|
||
width: 100%; }
|
||
.news_title .title{
|
||
color: #333;
|
||
line-height: 50rpx;
|
||
}
|
||
.news_title .time{
|
||
color: #777;
|
||
margin-top: 20rpx;
|
||
}
|
||
.news_title .tag{
|
||
color: #e01f20;
|
||
}
|
||
|
||
|
||
.biaoti{
|
||
color: #777777;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
margin-top: 20rpx; }
|
||
.biaoti image{width: 35rpx;margin-right: 10rpx; margin-bottom: -6rpx;}
|
||
.main{
|
||
line-height: 60rpx;}
|
||
.main .li{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
.line{border:solid 3px #eee}.button-bottom {
|
||
padding: 15upx 26upx;
|
||
text-align: right;
|
||
display: block;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
height: unset;
|
||
}
|
||
.buttonEdit{
|
||
width: 224rpx;
|
||
height: 90rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 45rpx;
|
||
border: 1px solid #FB8F0C;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #FB8F0C;
|
||
}
|
||
.button-bottom .btn {
|
||
margin-left: 20upx;
|
||
width: 224rpx!important;
|
||
height: 90rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 45rpx;
|
||
border: 1px solid #FB8F0C;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #FB8F0C;
|
||
flex: unset;
|
||
}
|
||
.ti{width:115px}
|
||
|
||
.topBox{
|
||
width: 100%;
|
||
height: 280rpx;
|
||
background: linear-gradient(0deg, #F5F5FA 0%, #FFF3D5 100%);
|
||
padding: 0 72rpx;
|
||
overflow: hidden;
|
||
}
|
||
.statusText{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #413A2A;
|
||
margin-top: 52rpx;
|
||
}
|
||
.statusTip{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #A69879;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
|
||
.orderInfoBox{
|
||
padding: 0 35rpx;
|
||
margin-top: -80rpx;
|
||
}
|
||
|
||
.viewBox{
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 35rpx;
|
||
.goodsInfo{
|
||
margin-top: 32rpx;
|
||
background: #FFF9F5;
|
||
border-radius: 20rpx;
|
||
padding: 14rpx 16rpx;
|
||
padding-right: 35rpx;
|
||
.infoLeft{
|
||
.goodsImg{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
}
|
||
.text2{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
.infoCenter{
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
}
|
||
.textIcon{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
.textNum{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-left: 7rpx;
|
||
}
|
||
}
|
||
.infoRight{
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.textIcon{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ED6343;
|
||
}
|
||
.textNum{
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #ED6343;
|
||
margin-left: 7rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.specsBox{
|
||
height: 70rpx;
|
||
background: #FFF7F7;
|
||
border-radius: 20rpx;
|
||
margin-top: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-left: 33rpx;
|
||
.specsText{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
margin-right: 18rpx;
|
||
margin-top: -5rpx;
|
||
}
|
||
}
|
||
.countBox{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
align-items: center;
|
||
margin-top: 15rpx;
|
||
padding-left: 10rpx;
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
margin-right: 14rpx;
|
||
margin-top: 7rpx;
|
||
}
|
||
.textIcon{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ED6343;
|
||
}
|
||
.textNum{
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #ED6343;
|
||
margin-left: 7rpx;
|
||
}
|
||
}
|
||
.infoWrap{
|
||
.bgHead{
|
||
height: 108rpx;
|
||
line-height: 108rpx;
|
||
background: linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
|
||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||
padding-left: 41rpx;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
.infoTip2{
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FF7F18;
|
||
margin-left: 38rpx;
|
||
}
|
||
}
|
||
.infoBox{
|
||
padding: 0 39rpx 45rpx;
|
||
margin-top: -5rpx;
|
||
.infoText1{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.infoText2{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-left: 28rpx;
|
||
}
|
||
.infoAddress{
|
||
font-weight: 300;
|
||
font-size: 22rpx;
|
||
color: #95979B;
|
||
// font-weight: 300;
|
||
// font-size: 28rpx;
|
||
// color: #95979B;
|
||
// margin-top: 30rpx;
|
||
}
|
||
.infoTip{
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #E4AA45;
|
||
margin-top: 12rpx;
|
||
border-bottom: 1px solid #DEDEDE;
|
||
padding-bottom: 29rpx;
|
||
}
|
||
.infoDate{
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #999999;
|
||
}
|
||
.infoTip3{
|
||
background: #FFF4ED;
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FF7F18;
|
||
padding: 16rpx 11rpx;
|
||
}
|
||
.infoBtnBox{
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-top: 41rpx;
|
||
}
|
||
}
|
||
}
|
||
.detailBox{
|
||
padding: 45rpx 37rpx 60rpx;
|
||
border-radius: 30rpx;
|
||
background: #fff;
|
||
margin-top: 20rpx;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
.detailText{
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-top: 41rpx;
|
||
}
|
||
}
|
||
</style>
|