424 lines
13 KiB
Vue
424 lines
13 KiB
Vue
<template>
|
||
<app-layout title="订单详情">
|
||
<view class="order-detail-container">
|
||
<view class="detail-section">
|
||
<view class="order-head">
|
||
<view class="order-title">
|
||
<text class="type" :style="{ backgroundColor: typeTextBg }">
|
||
{{ typeText }}
|
||
</text>
|
||
<text class="text">{{ order.cate }}</text>
|
||
</view>
|
||
<view class="state" :style="{ color: stateTextColor }">
|
||
{{ stateText }}
|
||
</view>
|
||
</view>
|
||
<view class="order-body">
|
||
<view class="order-desc-row datetime">
|
||
<text class="text">订单号：{{ order.orderId }}</text>
|
||
<text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
|
||
</view>
|
||
<view class="order-desc-row datetime">
|
||
<text class="text">{{ order.createTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-if="listType == 't1' || listType == 't2'">
|
||
<view class="detail-section">
|
||
<view class="section-title">需求信息</view>
|
||
<view class="section-content">
|
||
<view class="demand-item">
|
||
<view class="title">需求内容：</view>
|
||
<view class="content">
|
||
{{ order.content }}
|
||
</view>
|
||
</view>
|
||
<view class="demand-item">
|
||
<view class="title">上门时间：</view>
|
||
<view class="content service-time">
|
||
<text class="datetime">
|
||
{{ order.serviceTime }}
|
||
</text>
|
||
<!-- <text class="iconfont icon-bianji"></text> -->
|
||
</view>
|
||
</view>
|
||
<view class="demand-item">
|
||
<view class="demand-images">
|
||
<view class="image-box" v-for="(item, index) in order.images" :key="index">
|
||
<image class="image" :src="item" mode="aspectFill" @click="previewImage(index)" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail-section">
|
||
<view class="section-title">上门地址</view>
|
||
<view class="address-box">
|
||
<text class="iconfont icon-dingwei"></text>
|
||
<view>
|
||
<view class="contact limit-line clamp-1">
|
||
<text class="name">
|
||
{{ order.address.name }}({{ order.address.sex == "男" ? "先生" : "女士" }})
|
||
</text>
|
||
<text class="mobile">{{ order.address.mobile }}</text>
|
||
<text class="call" @click="utils.callPhone(order.address.mobile)">拨号</text>
|
||
</view>
|
||
<view class="detail">
|
||
<text>{{ order.address.address }}{{ order.address.detail }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="listType == 't3'">
|
||
<view class="detail-section">
|
||
<view class="section-title">取货时间</view>
|
||
<view class="section-content">
|
||
<view class="demand-item">
|
||
<view class="title">上门时间：</view>
|
||
<view class="content service-time">
|
||
<text class="datetime">
|
||
{{ order.serviceTime }}
|
||
</text>
|
||
<!-- <text class="iconfont icon-bianji"></text> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail-section">
|
||
<view class="section-title">取货地址</view>
|
||
<view class="address-box">
|
||
<text class="iconfont icon-dingwei"></text>
|
||
<view>
|
||
<view class="detail">
|
||
<text>{{ order.pickupAddress }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail-section">
|
||
<view class="section-title">卸货地址</view>
|
||
<view class="address-box">
|
||
<text class="iconfont icon-dingwei"></text>
|
||
<view>
|
||
<view class="detail">
|
||
<text>{{ order.unloadAddress }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="detail-section">
|
||
<text class="price-box">¥ {{ utils.formatNumber(order.price, 2) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
|
||
<view class="service" @click="showService = true">
|
||
<text class="iconfont icon-kefu"></text>
|
||
<text class="text">客服</text>
|
||
</view>
|
||
<view class="action">
|
||
<order-action :order="order" @confirmPrice="showPriceModal(order.id)" @refresh="refresh" />
|
||
</view>
|
||
</view>
|
||
<order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="finishOrder" />
|
||
<widget-service :showService="showService" @close="showService = false" />
|
||
</app-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import AppLayout from "@/components/layout/layout";
|
||
import OrderAction from "@/components/order/action";
|
||
import GetAction from "@/components/get/action";
|
||
import OrderConfirmPrice from "@/components/order/confirm-price";
|
||
import WidgetService from "@/components/widgets/service";
|
||
export default {
|
||
name: "order-detail",
|
||
data() {
|
||
return {
|
||
utils: this.$utils,
|
||
models: this.$models,
|
||
pageConfig: {},
|
||
showConfirmModal: false,
|
||
listType: "",
|
||
typeText: "",
|
||
typeTextBg: "",
|
||
stateText: "",
|
||
stateTextColor: "",
|
||
showService: false,
|
||
order: {
|
||
address: {},
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
AppLayout,
|
||
OrderAction,
|
||
GetAction,
|
||
OrderConfirmPrice,
|
||
WidgetService,
|
||
},
|
||
onLoad(e) {
|
||
this.pageConfig = getApp().globalData.pageConfig;
|
||
if (e.id && e.id > 0) {
|
||
this.id = e.id;
|
||
} else {
|
||
this.$utils.toast("参数错误");
|
||
return;
|
||
}
|
||
this.listType = e.list;
|
||
},
|
||
onShow() {
|
||
this.loadDetail();
|
||
},
|
||
onReady() {},
|
||
onReachBottom() {},
|
||
onPullDownRefresh() {},
|
||
methods: {
|
||
copyOrderId(orderId) {
|
||
const that = this;
|
||
uni.setClipboardData({
|
||
data: orderId,
|
||
success(result) {
|
||
that.$utils.toast("内容已复制");
|
||
},
|
||
fail(error) {
|
||
that.$utils.toast("复制失败");
|
||
},
|
||
});
|
||
},
|
||
showPriceModal(id) {
|
||
this.$store.commit("order/setConfirmId", id);
|
||
this.showConfirmModal = true;
|
||
},
|
||
/**
|
||
* 确认订单
|
||
*/
|
||
finishOrder(e) {
|
||
this.showConfirmModal = false;
|
||
this.$models.order
|
||
.finishOrder({
|
||
request: {
|
||
api: "order.finish." + this.listType,
|
||
data: {
|
||
id: e.id,
|
||
money: e.price,
|
||
},
|
||
},
|
||
})
|
||
.then((response) => {
|
||
this.$utils.toast(response.msg).then(() => {
|
||
this.$store.commit("system/refreshOrder", true);
|
||
this.loadDetail();
|
||
});
|
||
})
|
||
.catch((e) => {
|
||
this.$utils.toast(e);
|
||
});
|
||
},
|
||
/**
|
||
* 订单详情
|
||
*/
|
||
loadDetail() {
|
||
this.$models.order
|
||
.getDetail({
|
||
request: {
|
||
api: "order.detail." + this.listType,
|
||
data: {
|
||
id: this.id,
|
||
},
|
||
},
|
||
listType: this.listType,
|
||
})
|
||
.then((order) => {
|
||
let [typeText, typeTextBg] = this.$models.order.typeText(this.listType, order.orderType);
|
||
this.typeText = typeText;
|
||
this.typeTextBg = typeTextBg ? typeTextBg : "#8b9beb";
|
||
let [stateText, stateTextColor] = this.$models.order.stateText(this.listType, order.orderType, order.state);
|
||
this.stateText = stateText;
|
||
this.stateTextColor = stateTextColor ? stateTextColor : "#999999";
|
||
this.order = order;
|
||
});
|
||
},
|
||
/**
|
||
* 刷新页面
|
||
*/
|
||
refresh() {
|
||
this.$store.commit("system/refreshOrder", true);
|
||
this.loadDetail();
|
||
},
|
||
/**
|
||
* 预览图片
|
||
*/
|
||
previewImage(index) {
|
||
uni.previewImage({
|
||
urls: this.order.images,
|
||
current: index,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.order-detail-container {
|
||
padding-bottom: 120rpx;
|
||
}
|
||
.detail-section {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 40rpx;
|
||
background-color: #ffffff;
|
||
margin-bottom: 24rpx;
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.order-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.order-title {
|
||
display: flex;
|
||
align-items: center;
|
||
.type {
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
padding: 9rpx 24rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 24rpx;
|
||
margin-right: 22rpx;
|
||
}
|
||
.text {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
.state {
|
||
font-size: 26rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
.order-body {
|
||
width: 100%;
|
||
.order-desc-row {
|
||
position: relative;
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
line-height: 30rpx;
|
||
margin-top: 30rpx;
|
||
.title {
|
||
color: #999999;
|
||
}
|
||
.text {
|
||
color: #000000;
|
||
}
|
||
.copy {
|
||
color: #8194f2;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.demand-item {
|
||
width: 100%;
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
line-height: 36rpx;
|
||
margin-top: 40rpx;
|
||
.title {
|
||
width: 150rpx;
|
||
flex-shrink: 0;
|
||
color: #999999;
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
color: #000000;
|
||
}
|
||
.service-time {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.datetime {
|
||
color: #000000;
|
||
}
|
||
.iconfont {
|
||
font-size: 32rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
.demand-images {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.image-box {
|
||
width: 133.2rpx;
|
||
height: 133.2rpx;
|
||
background: rgba(184, 180, 179, 0);
|
||
box-sizing: border-box;
|
||
border-radius: 25rpx;
|
||
overflow: hidden;
|
||
border: 1px solid #f7f7f7;
|
||
.image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.address-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
.iconfont {
|
||
font-size: 40rpx;
|
||
color: #8194f2;
|
||
padding: 0 50rpx;
|
||
}
|
||
.contact,
|
||
.detail {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
}
|
||
.contact {
|
||
color: #000000;
|
||
line-height: 26rpx;
|
||
margin-bottom: 16rpx;
|
||
.mobile {
|
||
margin: 0 10rpx;
|
||
}
|
||
.call {
|
||
color: #8194f2;
|
||
}
|
||
}
|
||
.detail {
|
||
color: #2d2d2d;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
.price-box {
|
||
font-size: 48rpx;
|
||
line-height: 48rpx;
|
||
font-weight: bold;
|
||
color: #ec7655;
|
||
}
|
||
.common-bottom-components {
|
||
.service {
|
||
display: flex;
|
||
align-items: center;
|
||
.iconfont {
|
||
font-size: 60rpx;
|
||
color: #999999;
|
||
}
|
||
.text {
|
||
display: inline-block;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |