364 lines
11 KiB
Vue
364 lines
11 KiB
Vue
<template>
|
|
<app-layout v-model="safePt" title="订单" btnType="unset">
|
|
<view class="order-container">
|
|
<view class="fixed-box" :style="{ top: safePt + 'px' }">
|
|
<view class="search-order">
|
|
<text class="iconfont icon-sousuo"></text>
|
|
<input
|
|
class="input"
|
|
v-model="keywords"
|
|
placeholder="输入订单编号/客户姓名/电话"
|
|
placeholder-class="placeholder-style-3"
|
|
/>
|
|
</view>
|
|
<view class="scroll-box">
|
|
<scroll-view scroll-x>
|
|
<view class="cate-group">
|
|
<view
|
|
class="cate-item"
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
:class="{ active: tabIndex == index }"
|
|
@click="tabIndex = index"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="order-group">
|
|
<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">
|
|
<order-item :order="v">
|
|
<view class="order-action">
|
|
<view class="price">¥ 306.00</view>
|
|
<order-action :order="v" @setPrice="showPriceModal(v.id)" />
|
|
</view>
|
|
</order-item>
|
|
</view>
|
|
<view class="loadmore-box">
|
|
<load-more :hasMore="false" />
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</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>
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
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";
|
|
export default {
|
|
name: "get-index",
|
|
data() {
|
|
return {
|
|
utils: this.$utils,
|
|
priceModal: false,
|
|
safePt: 0,
|
|
tabIndex: 0,
|
|
tabHeight: 0,
|
|
tabList: [
|
|
{
|
|
id: 1,
|
|
name: "报价",
|
|
list: [
|
|
{
|
|
id: 1,
|
|
orderId: "xxgfdkgn1223",
|
|
cate: "家具安装",
|
|
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
|
createTime: "2022-10-18 10:56:34",
|
|
serviceTime: "2022-10-18 10:56:34",
|
|
orderType: 1,
|
|
state: 1,
|
|
price: 306,
|
|
username: "李先生",
|
|
},
|
|
{
|
|
id: 2,
|
|
orderId: "xxgfdkgn1223",
|
|
cate: "家具安装",
|
|
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
|
createTime: "2022-10-18 10:56:34",
|
|
serviceTime: "2022-10-18 10:56:34",
|
|
orderType: 1,
|
|
state: 1,
|
|
price: 306,
|
|
username: "李先生",
|
|
},
|
|
{
|
|
id: 3,
|
|
orderId: "xxgfdkgn1223",
|
|
cate: "家具安装",
|
|
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
|
createTime: "2022-10-18 10:56:34",
|
|
serviceTime: "2022-10-18 10:56:34",
|
|
orderType: 1,
|
|
state: 1,
|
|
price: 306,
|
|
username: "李先生",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "待预约",
|
|
list: [
|
|
{
|
|
id: 2,
|
|
orderId: "xxgfdkgn1223",
|
|
cate: "家具安装",
|
|
content: "我想要安装一个书柜，需要上墙啊啊啊啊",
|
|
createTime: "2022-10-18 10:56:34",
|
|
serviceTime: "2022-10-18 10:56:34",
|
|
orderType: 2,
|
|
state: 1,
|
|
price: 306,
|
|
username: "李先生",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "服务中",
|
|
list: [],
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "完工/关闭",
|
|
list: [],
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "退款",
|
|
list: [],
|
|
},
|
|
],
|
|
currentOrder: {
|
|
id: 0,
|
|
price: 0,
|
|
},
|
|
keywords: "",
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
OrderItem,
|
|
OrderAction,
|
|
LoadMore,
|
|
WidgetModal,
|
|
},
|
|
onLoad() {
|
|
this.$nextTick(() => {
|
|
this.setTabHeight();
|
|
});
|
|
},
|
|
onShow() {},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {
|
|
switchTab(index) {
|
|
this.tabIndex = index;
|
|
this.$nextTick(() => {
|
|
this.setTabHeight();
|
|
});
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 100,
|
|
});
|
|
},
|
|
changeTab(e) {
|
|
this.switchTab(e.detail.current);
|
|
},
|
|
setTabHeight() {
|
|
let query = uni.createSelectorQuery().in(this);
|
|
query.select(".tab" + this.tabIndex).boundingClientRect();
|
|
query.exec((res) => {
|
|
if (res && res[0]) {
|
|
this.tabHeight = res[0].height;
|
|
}
|
|
});
|
|
},
|
|
showPriceModal(id) {
|
|
this.currentOrder.id = id;
|
|
this.priceModal = true;
|
|
},
|
|
setPrice() {
|
|
console.log(this.currentOrder);
|
|
this.priceModal = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.order-container {
|
|
width: 100%;
|
|
padding-bottom: 50rpx;
|
|
}
|
|
.fixed-box {
|
|
z-index: 15;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.search-order {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 670rpx;
|
|
height: 66rpx;
|
|
margin: 0 auto 20rpx auto;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
.iconfont {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.input {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #bebebe;
|
|
}
|
|
}
|
|
.scroll-box {
|
|
width: 100%;
|
|
background-color: #f7a134;
|
|
.cate-group {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
padding: 5rpx 0;
|
|
.cate-item {
|
|
display: inline-block;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
margin: 0 20rpx;
|
|
color: #ffffff;
|
|
}
|
|
.cate-item.active {
|
|
box-sizing: border-box;
|
|
border-bottom: 7rpx solid #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.order-group {
|
|
z-index: 10;
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 202rpx;
|
|
.order-item-box {
|
|
margin-bottom: 20rpx;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
padding: 0 40rpx;
|
|
.order-action {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.price {
|
|
width: 250rpx;
|
|
font-size: 42rpx;
|
|
font-weight: bold;
|
|
color: #ec7655;
|
|
line-height: 42rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.loadmore-box {
|
|
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> |