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 01:01:35 +08:00
parent c0ab005913
commit 36fee17b9c
8 changed files with 167 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/get/action.vue
View File

@ -1,9 +1,9 @@
<template>
<view class="component-get-action">
<view class="btn active" @click="getOrder" v-if="order.orderType == models.order.type.NORMAL">
<view class="btn active" @click.stop="getOrder" v-if="order.orderType == models.order.type.NORMAL">
<text>立即抢单</text>
</view>
<view class="btn active" @click="postPrice" v-if="order.orderType == models.order.type.WORKER_PRICE">
<view class="btn active" @click.stop="postPrice" v-if="order.orderType == models.order.type.WORKER_PRICE">
<text>立即报价</text>
</view>
</view>

115
src/components/get/post-price.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<view class="get-post-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: "get-post-price",
data() {
return {
price: 0,
};
},
props: {},
computed: {
...mapState("order", {
postId: (state) => state.postId,
}),
},
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.postId + "，价格：" + this.price);
this.$emit("confirm");
},
},
};
</script>
<style lang="less" scoped>
.get-post-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/order/action.vue
View File

@ -3,7 +3,7 @@
<view class="btn">
<text>立即抢单</text>
</view>
<view class="btn" @click.stop="setPrice">
<view class="btn" @click.stop="confirmPrice">
<text>尾款确认</text>
</view>
<view v-if="false" class="btn">
@ -40,8 +40,8 @@ export default {
mounted() {},
destroyed() {},
methods: {
setPrice() {
this.$emit("setPrice");
confirmPrice() {
this.$emit("confirmPrice");
},
},
};

24
src/pages/get/detail.vue
View File

@ -1,24 +0,0 @@
<template>
<app-layout title="接单详情"> </app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
export default {
name: "get-detail",
data() {
return {};
},
components: {
AppLayout,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped></style>

16
src/pages/get/index.vue
View File

@ -20,7 +20,7 @@
<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>
@ -43,7 +43,7 @@
<text class="text">刷新列表</text>
</view>
</view>
<widget-modal title="报价" :show="postModal" @close="postModal = false"> 开始报价 </widget-modal>
<get-post-price v-show="showPriceModal" @close="showPriceModal = false" @confirm="showPriceModal = false" />
</app-layout>
</template>
@ -51,13 +51,13 @@
import AppLayout from "@/components/layout/layout";
import GetAction from "@/components/get/action";
import OrderItem from "@/components/order/item";
import WidgetModal from "@/components/widgets/modal";
import GetPostPrice from "@/components/get/post-price";
export default {
name: "get-index",
data() {
return {
utils: this.$utils,
postModal: false,
showPriceModal: false,
safePt: 0,
tabIndex: 0,
tabHeight: 0,
@ -139,7 +139,7 @@ export default {
AppLayout,
GetAction,
OrderItem,
WidgetModal,
GetPostPrice,
},
onLoad() {
this.$nextTick(() => {
@ -170,7 +170,8 @@ export default {
});
},
postPrice(id) {
this.postModal = true;
this.$store.commit("order/setPostId", id);
this.showPriceModal = true;
},
setting() {
console.log("设置");
@ -178,6 +179,9 @@ export default {
refresh() {
console.log("刷新");
},
toDetail(id) {
this.$utils.toPage("/pages/order/detail?type=preview&id=" + id);
},
},
};
</script>

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

@ -78,17 +78,25 @@
<text class="text">客服</text>
</view>
<view class="action">
<order-action :order="order" @setPrice="showPriceModal(order.id)" />
<block v-if="type == 'detail'">
<order-action :order="order" @confirmPrice="confirmPrice(order.id)" />
</block>
<block v-if="type == 'preview'">
<get-action :order="order" @postPrice="postPrice(order.id)" />
</block>
</view>
</view>
<order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
<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";
import { mapState } from "vuex";
export default {
name: "order-detail",
@ -96,7 +104,9 @@ export default {
return {
utils: this.$utils,
models: this.$models,
showModal: false,
showPriceModal: false,
showConfirmModal: false,
type: "detail",
order: {
id: 1,
orderId: "xxgfdkgn1223",
@ -107,7 +117,7 @@ export default {
date: "2022-10-18",
time: ["14:00", "18:00"],
},
orderType: 1,
orderType: 2,
state: 1,
price: 306,
username: "李先生",
@ -131,7 +141,9 @@ export default {
components: {
AppLayout,
OrderAction,
GetAction,
OrderConfirmPrice,
GetPostPrice,
},
computed: {
...mapState({
@ -143,6 +155,10 @@ export default {
this.id = e.id;
} else {
this.$utils.toast("参数错误");
return;
}
if (e.type == "preview") {
this.type = e.type;
}
},
onShow() {},
@ -162,9 +178,13 @@ export default {
},
});
},
showPriceModal(id) {
confirmPrice(id) {
this.$store.commit("order/setConfirmId", id);
this.showModal = true;
this.showConfirmModal = true;
},
postPrice(id) {
this.$store.commit("order/setPostId", id);
this.showPriceModal = true;
},
},
};

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

@ -47,7 +47,7 @@
</swiper>
</view>
</view>
<order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
<order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="showConfirmModal = false" />
</app-layout>
</template>
@ -62,7 +62,7 @@ export default {
data() {
return {
utils: this.$utils,
showModal: false,
showConfirmModal: false,
safePt: 0,
tabIndex: 0,
tabHeight: 0,
@ -188,10 +188,10 @@ export default {
},
showPriceModal(id) {
this.$store.commit("order/setConfirmId", id);
this.showModal = true;
this.showConfirmModal = true;
},
toDetail(id) {
this.$utils.toPage("/pages/order/detail?id=" + id);
this.$utils.toPage("/pages/order/detail?type=detail&id=" + id);
},
},
};

7
src/store/modules/order.js
View File

@ -2,15 +2,22 @@ export default {
namespaced: true,
state: {
confirmId: 0,
postId: 0,
},
getters: {
getConfirmId(state) {
return state.confirmId;
},
getPostId(state) {
return state.postId;
}
},
mutations: {
setConfirmId(state, data) {
state.confirmId = data;
},
setPostId(state, data) {
state.postId = data;
}
},
actions: {}