topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成订单详情页面

This commit is contained in:
TOP糯米 2023-02-25 18:56:01 +08:00
parent 8aebb910c1
commit 2f77202358
2 changed files with 303 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

301
src/pages/order/detail.vue
View File

@ -23,22 +23,113 @@
:style="{ height: tabHeight + 'px' }"
>
<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>
<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>
</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>
</template>
<script>
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 {
name: "order-detail",
data() {
return {
utils: this.$utils,
tabIndex: 0,
tabHeight: 0,
order: {
@ -48,6 +139,20 @@ export default {
explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
createTime: "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,
state: 1,
worker: {
@ -72,7 +177,7 @@ export default {
grade: 4.5,
},
{
id: 1,
id: 2,
name: "王师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
@ -82,7 +187,7 @@ export default {
grade: 4.5,
},
{
id: 1,
id: 3,
name: "李师傅",
cover: require("@/static/temp/order/1.png"),
price: 306.0,
@ -97,6 +202,14 @@ export default {
},
components: {
AppLayout,
WorkerItem,
ServiceInsurance,
OrderAction,
},
computed: {
...mapState({
config: (state) => state.system.config,
}),
},
onLoad(e) {
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>
@ -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>

9
src/pages/order/order.vue
View File

@ -62,7 +62,7 @@ export default {
{
type: "all",
name: "全部订单",
more: true,
more: false,
list: [
{
id: 1,
@ -72,7 +72,7 @@ export default {
createTime: "2022-10-18 10:56:34",
serviceTime: "2022-10-18 10:56:34",
orderType: 2,
state: 1,
state: 2,
worker: {
id: 1,
name: "张师傅",
@ -252,12 +252,15 @@ export default {
}
.more-list {
width: 100%;
padding-bottom: 12px;
padding: 50rpx 0;
}
.order-item {
width: 100%;
margin-bottom: 30rpx;
}
.order-item:last-child {
margin-bottom: 0;
}
.action-group {
width: 100%;
padding: 30rpx 0;