完成订单详情页面
This commit is contained in:
parent
8aebb910c1
commit
2f77202358
|
|
@ -23,22 +23,113 @@
|
||||||
:style="{ height: tabHeight + 'px' }"
|
:style="{ height: tabHeight + 'px' }"
|
||||||
>
|
>
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<view class="detail-tab tab0">选择师傅</view>
|
<view class="detail-tab tab0">
|
||||||
|
<!-- 师傅列表 -->
|
||||||
|
<view class="worker-group">
|
||||||
|
<view class="worker-item" v-for="(item, index) in order.workerList" :key="index">
|
||||||
|
<view class="datetime"> 2022-10-18 10:56:34</view>
|
||||||
|
<view class="price">
|
||||||
|
<text class="title">报价金额</text>
|
||||||
|
<text class="number">¥ 306.00</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail" @click="workerDetail(item.id)">
|
||||||
|
<worker-item :data="item" />
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="btn" @click="chooseWorker(item.id)">选择师傅</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<view class="detail-tab tab1">2</view>
|
<view class="detail-tab tab1">
|
||||||
|
<view class="order-detail">
|
||||||
|
<view class="section info">
|
||||||
|
<view class="section-title">订单信息</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="title">订单编号：</text>
|
||||||
|
<text class="text">{{ order.orderId }}</text>
|
||||||
|
<text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="title">服务分类：</text>
|
||||||
|
<text class="text">{{ order.cate }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row limit-line clamp-1">
|
||||||
|
<text class="title">需求内容：</text>
|
||||||
|
<text class="text">{{ order.explain }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="title">下单时间：</text>
|
||||||
|
<text class="text">{{ order.createTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="title">服务时间：</text>
|
||||||
|
<text class="text">{{ order.serviceTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="section insurance">
|
||||||
|
<service-insurance :showSwitch="false" />
|
||||||
|
</view>
|
||||||
|
<view class="section address">
|
||||||
|
<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="section demand">
|
||||||
|
<view class="section-title">需求信息</view>
|
||||||
|
<view class="demand-box">
|
||||||
|
<view class="textarea-box">
|
||||||
|
<text class="textarea">{{ order.explain }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="upload-item">
|
||||||
|
<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>
|
||||||
|
</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="bottom-components" :style="{ bottom: config.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" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</app-layout>
|
</app-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AppLayout from "@/components/layout/layout";
|
import AppLayout from "@/components/layout/layout";
|
||||||
|
import WorkerItem from "@/components/worker/item";
|
||||||
|
import ServiceInsurance from "@/components/service/insurance";
|
||||||
|
import OrderAction from "@/components/order/action";
|
||||||
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
name: "order-detail",
|
name: "order-detail",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
utils: this.$utils,
|
||||||
tabIndex: 0,
|
tabIndex: 0,
|
||||||
tabHeight: 0,
|
tabHeight: 0,
|
||||||
order: {
|
order: {
|
||||||
|
|
@ -48,6 +139,20 @@ export default {
|
||||||
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
||||||
createTime: "2022-10-18 10:56:34",
|
createTime: "2022-10-18 10:56:34",
|
||||||
serviceTime: "2022-10-18 10:56:34",
|
serviceTime: "2022-10-18 10:56:34",
|
||||||
|
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"),
|
||||||
|
},
|
||||||
|
],
|
||||||
orderType: 2,
|
orderType: 2,
|
||||||
state: 1,
|
state: 1,
|
||||||
worker: {
|
worker: {
|
||||||
|
|
@ -72,7 +177,7 @@ export default {
|
||||||
grade: 4.5,
|
grade: 4.5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 2,
|
||||||
name: "王师傅",
|
name: "王师傅",
|
||||||
cover: require("@/static/temp/order/1.png"),
|
cover: require("@/static/temp/order/1.png"),
|
||||||
price: 306.0,
|
price: 306.0,
|
||||||
|
|
@ -82,7 +187,7 @@ export default {
|
||||||
grade: 4.5,
|
grade: 4.5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 3,
|
||||||
name: "李师傅",
|
name: "李师傅",
|
||||||
cover: require("@/static/temp/order/1.png"),
|
cover: require("@/static/temp/order/1.png"),
|
||||||
price: 306.0,
|
price: 306.0,
|
||||||
|
|
@ -97,6 +202,14 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
|
WorkerItem,
|
||||||
|
ServiceInsurance,
|
||||||
|
OrderAction,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
config: (state) => state.system.config,
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
if (e.type && e.type == "detail") {
|
if (e.type && e.type == "detail") {
|
||||||
|
|
@ -129,6 +242,32 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
copyOrderId(orderId) {
|
||||||
|
const that = this;
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: orderId,
|
||||||
|
success(result) {
|
||||||
|
that.$utils.toast("内容已复制");
|
||||||
|
},
|
||||||
|
fail(error) {
|
||||||
|
that.$utils.toast("复制失败");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
workerDetail(id) {
|
||||||
|
console.log(id);
|
||||||
|
},
|
||||||
|
chooseWorker(id) {
|
||||||
|
const that = this;
|
||||||
|
uni.showModal({
|
||||||
|
title: "确认选择该师傅？",
|
||||||
|
complete(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
that.$utils.toast("你选择了师傅" + id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -180,4 +319,158 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.order-detail-body {
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
.detail-tab {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.worker-group {
|
||||||
|
width: 100%;
|
||||||
|
.worker-item {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
.datetime {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 28rpx;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40rpx;
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #010101;
|
||||||
|
}
|
||||||
|
.number {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ec7655;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
border-bottom: 2rpx solid #e8e7e7;
|
||||||
|
}
|
||||||
|
.action {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 15rpx 26rpx;
|
||||||
|
background-color: #8c9bec;
|
||||||
|
border-radius: 28rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order-detail {
|
||||||
|
width: 100%;
|
||||||
|
.section {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
.section-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.info,
|
||||||
|
.address,
|
||||||
|
.demand {
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
.info-row {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
.title {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.copy {
|
||||||
|
color: #8194f2;
|
||||||
|
margin-left: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-row:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.address-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.demand-box {
|
||||||
|
.textarea {
|
||||||
|
display: inline-block;
|
||||||
|
min-height: 190rpx;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.form-container {
|
||||||
|
.upload-item {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
</style>
|
||||||
|
|
@ -62,7 +62,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: "all",
|
type: "all",
|
||||||
name: "全部订单",
|
name: "全部订单",
|
||||||
more: true,
|
more: false,
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
|
|
@ -72,7 +72,7 @@ export default {
|
||||||
createTime: "2022-10-18 10:56:34",
|
createTime: "2022-10-18 10:56:34",
|
||||||
serviceTime: "2022-10-18 10:56:34",
|
serviceTime: "2022-10-18 10:56:34",
|
||||||
orderType: 2,
|
orderType: 2,
|
||||||
state: 1,
|
state: 2,
|
||||||
worker: {
|
worker: {
|
||||||
id: 1,
|
id: 1,
|
||||||
name: "张师傅",
|
name: "张师傅",
|
||||||
|
|
@ -252,12 +252,15 @@ export default {
|
||||||
}
|
}
|
||||||
.more-list {
|
.more-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 12px;
|
padding: 50rpx 0;
|
||||||
}
|
}
|
||||||
.order-item {
|
.order-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
.order-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.action-group {
|
.action-group {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 30rpx 0;
|
padding: 30rpx 0;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue