356 lines
11 KiB
Vue
356 lines
11 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: models.order.getOrderTypeColor(order.orderType) }">
|
||
{{ models.order.getOrderTypeText(order.orderType) }}
|
||
</text>
|
||
<text class="text">{{ order.username }}-{{ order.cate }}</text>
|
||
</view>
|
||
<view class="state" :style="{ color: models.order.getOrderStateTextColor(order.state) }">
|
||
{{ models.order.getOrderStateText(order.state) }}
|
||
</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>
|
||
<view class="detail-section">
|
||
<view class="section-title">需求信息</view>
|
||
<view class="section-content">
|
||
<view class="demand-item">
|
||
<view class="title">需求内容：</view>
|
||
<view class="content">
|
||
我想要安装一个书柜，需要上墙,我想要 安装一个书柜，需要上墙,我想要安装一
|
||
个书柜，需要上墙个书柜，需要上墙个书柜，需要上墙
|
||
</view>
|
||
</view>
|
||
<view class="demand-item">
|
||
<view class="title">上门时间：</view>
|
||
<view class="content service-time">
|
||
<text class="datetime">
|
||
{{ order.serviceDateTime.date }}
|
||
{{ order.serviceDateTime.time[0] }}-{{ order.serviceDateTime.time[1] }}
|
||
</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.src" mode="aspectFill" />
|
||
</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">测试(先生)</text>
|
||
<text class="mobile">13108196080</text>
|
||
</view>
|
||
<view class="detail">
|
||
<text>四川省成都市涪城区剑门门路西段书亦烧 仙草(成都七中店) 测试</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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="utils.serviceActions()">
|
||
<text class="iconfont icon-kefu"></text>
|
||
<text class="text">客服</text>
|
||
</view>
|
||
<view class="action">
|
||
<order-action :order="order" @confirmPrice="confirmPrice(order.id)" />
|
||
</view>
|
||
</view>
|
||
<order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="showConfirmModal = false" />
|
||
<get-post-price v-show="showPriceModal" @close="showPriceModal = false" @confirm="showPriceModal = 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 GetPostPrice from "@/components/get/post-price";
|
||
export default {
|
||
name: "order-detail",
|
||
data() {
|
||
return {
|
||
utils: this.$utils,
|
||
models: this.$models,
|
||
pageConfig: {},
|
||
showPriceModal: false,
|
||
showConfirmModal: false,
|
||
listType: "",
|
||
typeText: "",
|
||
typeTextBg: "",
|
||
order: {
|
||
id: 1,
|
||
orderId: "xxgfdkgn1223",
|
||
cate: "家具安装",
|
||
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
||
createTime: "2022-10-18 10:56:34",
|
||
serviceDateTime: {
|
||
date: "2022-10-18",
|
||
time: ["14:00", "18:00"],
|
||
},
|
||
orderType: 2,
|
||
state: 1,
|
||
price: 306,
|
||
username: "李先生",
|
||
images: [
|
||
{
|
||
src: require("@/static/temp/cate/1.png"),
|
||
},
|
||
{
|
||
src: require("@/static/temp/cate/1.png"),
|
||
},
|
||
{
|
||
src: require("@/static/temp/cate/1.png"),
|
||
},
|
||
{
|
||
src: require("@/static/temp/cate/1.png"),
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
AppLayout,
|
||
OrderAction,
|
||
GetAction,
|
||
OrderConfirmPrice,
|
||
GetPostPrice,
|
||
},
|
||
async 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.type;
|
||
await this.loadDetail();
|
||
let [typeText, typeTextBg] = this.$models.order.orderTypeText(this.listType, this.order.orderType);
|
||
this.typeText = typeText;
|
||
this.typeTextBg = typeTextBg ? typeTextBg : "#8b9beb";
|
||
},
|
||
onShow() {},
|
||
onReady() {},
|
||
onReachBottom() {},
|
||
onPullDownRefresh() {},
|
||
methods: {
|
||
copyOrderId(orderId) {
|
||
const that = this;
|
||
uni.setClipboardData({
|
||
data: orderId,
|
||
success(result) {
|
||
that.$utils.toast("内容已复制");
|
||
},
|
||
fail(error) {
|
||
that.$utils.toast("复制失败");
|
||
},
|
||
});
|
||
},
|
||
confirmPrice(id) {
|
||
this.$store.commit("order/setConfirmId", id);
|
||
this.showConfirmModal = true;
|
||
},
|
||
/**
|
||
* 订单详情
|
||
*/
|
||
loadDetail() {
|
||
this.$models.order
|
||
.getDetail({
|
||
request: {
|
||
api: "order.detail." + this.listType,
|
||
data: {
|
||
id: this.id,
|
||
},
|
||
},
|
||
listType: this.listType,
|
||
})
|
||
.then((response) => {
|
||
console.log(response);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
.detail {
|
||
color: #2d2d2d;
|
||
line-height: 36rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
.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> |