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

完成订单列表、详情页面

This commit is contained in:
TOP糯米 2023-03-04 00:25:22 +08:00
parent d58031302e
commit c0ab005913
8 changed files with 486 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/order/confirm-price.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<view class="order-confirm-price">
<widget-modal title="尾款确认" @close="closeModal">
<view class="modal-content">
<view class="input-row">
<text class="title">费用增加</text>
<input class="input" type="number" v-model="price" @input="price = parseFloat(price)" />
<text class="unit">
<text class="iconfont icon-qingchu" @click="price = 0"></text>
<text class="text">元</text>
</text>
</view>
<view class="desc">
<text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
<text class="text">2)没有尾款的话，请直接点击确认提交</text>
</view>
<view class="btn" @click="confirmPrice">确认添加</view>
</view>
</widget-modal>
</view>
</template>
<script>
import WidgetModal from "@/components/widgets/modal";
import { mapState } from "vuex";
export default {
name: "order-confirm-price",
data() {
return {
id: 0,
price: 0,
};
},
props: {
currentId: {
type: Number,
default: 0,
},
},
computed: {
...mapState("order", {
confirmId: (state) => state.confirmId,
}),
},
components: {
WidgetModal,
},
created() {},
mounted() {},
destroyed() {},
watch: {},
methods: {
closeModal() {
this.$store.commit("order/setConfirmId", 0);
this.price = 0;
this.$emit("close");
},
confirmPrice() {
console.log("当前id：" + this.confirmId + "，价格：" + this.price);
this.$emit("confirm");
},
},
};
</script>
<style lang="less" scoped>
.order-confirm-price {
.modal-content {
width: 100%;
.desc {
padding: 24rpx 0;
.text {
display: block;
font-size: 24rpx;
color: #999999;
line-height: 36rpx;
}
}
.btn {
width: 100%;
height: 68rpx;
line-height: 68rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
background-color: #7286f1;
margin-top: 15rpx;
}
}
.input-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: 4rpx solid #f5f5f5;
.title {
font-size: 28rpx;
color: #666666;
}
.input {
width: 308rpx;
height: 72rpx;
box-sizing: border-box;
border: 1px solid #d8d8d8;
text-align: center;
}
.unit {
color: #333333;
}
.iconfont {
display: inline-block;
font-size: 30rpx;
margin-right: 22rpx;
}
.text {
font-size: 28rpx;
}
}
}
</style>

6
src/components/widgets/modal.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="component-widgets-modal" v-if="show">
<view class="component-widgets-modal">
<view class="modal-mask" @click="close"></view>
<view class="modal-content" :style="{ width: width }">
<view class="modal-title">
@ -22,10 +22,6 @@ export default {
return {};
},
props: {
show: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "默认标题",

6
src/pages.json
View File

@ -24,6 +24,12 @@
"navigationBarTitleText": "订单"
}
},
{
"path": "pages/order/detail",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/message/message",
"style": {

328
src/pages/order/detail.vue Normal file
View File

@ -0,0 +1,328 @@
<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: 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" @setPrice="showPriceModal(order.id)" />
</view>
</view>
<order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import OrderAction from "@/components/order/action";
import OrderConfirmPrice from "@/components/order/confirm-price";
import { mapState } from "vuex";
export default {
name: "order-detail",
data() {
return {
utils: this.$utils,
models: this.$models,
showModal: false,
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: 1,
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,
OrderConfirmPrice,
},
computed: {
...mapState({
config: (state) => state.system.config,
}),
},
onLoad(e) {
if (e.id && e.id > 0) {
this.id = e.id;
} else {
this.$utils.toast("参数错误");
}
},
onShow() {},
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.showModal = true;
},
},
};
</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>

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

@ -31,10 +31,10 @@
<swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
<swiper-item v-for="(item, index) in tabList" :key="index">
<view :class="['tab' + index]">
<view class="order-item-box" v-for="(v, k) in item.list" :key="k">
<view class="order-item-box" v-for="(v, k) in item.list" :key="k" @click.stop="toDetail(v.id)">
<order-item :order="v">
<view class="order-action">
<view class="price">¥ 306.00</view>
<view class="price">¥ {{ v.price }}</view>
<order-action :order="v" @setPrice="showPriceModal(v.id)" />
</view>
</order-item>
@ -47,28 +47,7 @@
</swiper>
</view>
</view>
<widget-modal title="尾款确认" :show="priceModal" @close="priceModal = false">
<view class="modal-content">
<view class="input-row">
<text class="title">费用增加</text>
<input
class="input"
type="number"
v-model="currentOrder.price"
@input="currentOrder.price = parseFloat(currentOrder.price)"
/>
<text class="unit">
<text class="iconfont icon-qingchu" @click="currentOrder.price = 0"></text>
<text class="text">元</text>
</text>
</view>
<view class="desc">
<text class="text">1)添加后，请客户在小程序订单中支付尾款</text>
<text class="text">2)没有尾款的话，请直接点击确认提交</text>
</view>
<view class="btn" @click="setPrice">确认添加</view>
</view>
</widget-modal>
<order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
</app-layout>
</template>
@ -77,13 +56,13 @@ import AppLayout from "@/components/layout/layout";
import OrderItem from "@/components/order/item";
import OrderAction from "@/components/order/action";
import LoadMore from "@/components/widgets/loadmore";
import WidgetModal from "@/components/widgets/modal";
import OrderConfirmPrice from "@/components/order/confirm-price";
export default {
name: "get-index",
data() {
return {
utils: this.$utils,
priceModal: false,
showModal: false,
safePt: 0,
tabIndex: 0,
tabHeight: 0,
@ -164,10 +143,7 @@ export default {
list: [],
},
],
currentOrder: {
id: 0,
price: 0,
},
currentId: 0,
keywords: "",
};
},
@ -176,7 +152,7 @@ export default {
OrderItem,
OrderAction,
LoadMore,
WidgetModal,
OrderConfirmPrice,
},
onLoad() {
this.$nextTick(() => {
@ -211,12 +187,11 @@ export default {
});
},
showPriceModal(id) {
this.currentOrder.id = id;
this.priceModal = true;
this.$store.commit("order/setConfirmId", id);
this.showModal = true;
},
setPrice() {
console.log(this.currentOrder);
this.priceModal = false;
toDetail(id) {
this.$utils.toPage("/pages/order/detail?id=" + id);
},
},
};
@ -309,56 +284,4 @@ export default {
padding: 20rpx 0;
}
}
.modal-content {
width: 100%;
.input-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: 4rpx solid #f5f5f5;
.title {
font-size: 28rpx;
color: #666666;
}
.input {
width: 308rpx;
height: 72rpx;
box-sizing: border-box;
border: 1px solid #d8d8d8;
text-align: center;
}
.unit {
color: #333333;
}
.iconfont {
display: inline-block;
font-size: 30rpx;
margin-right: 22rpx;
}
.text {
font-size: 28rpx;
}
}
.desc {
padding: 24rpx 0;
.text {
display: block;
font-size: 24rpx;
color: #999999;
line-height: 36rpx;
}
}
.btn {
width: 100%;
height: 68rpx;
line-height: 68rpx;
text-align: center;
font-size: 32rpx;
color: #ffffff;
background-color: #7286f1;
margin-top: 15rpx;
}
}
</style>

BIN
src/static/temp/cate/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

2
src/store/index.js
View File

@ -3,11 +3,13 @@ import Vuex from 'vuex'
import user from "@/store/modules/user"
import system from "@/store/modules/system"
import order from "@/store/modules/order"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user,
system,
order
}
})

17
src/store/modules/order.js Normal file
View File

@ -0,0 +1,17 @@
export default {
namespaced: true,
state: {
confirmId: 0,
},
getters: {
getConfirmId(state) {
return state.confirmId;
}
},
mutations: {
setConfirmId(state, data) {
state.confirmId = data;
}
},
actions: {}
}