|
|
|
@ -1,88 +1,106 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<navbar |
|
|
|
title="订单中心" |
|
|
|
/> |
|
|
|
<navbar title="分享记录" /> |
|
|
|
|
|
|
|
<uv-tabs :list="tabs" |
|
|
|
:activeStyle="{color : '#FD5100', fontWeight : 600}" |
|
|
|
lineColor="#FD5100" |
|
|
|
lineHeight="8rpx" |
|
|
|
lineWidth="50rpx" |
|
|
|
@click="clickTabs"></uv-tabs> |
|
|
|
|
|
|
|
<view v-if="orderList.length > 0" class="list"> |
|
|
|
<view class="item" |
|
|
|
v-for="(item, index) in orderList.records" |
|
|
|
@click="toOrderDetail(item.id)" |
|
|
|
:key="index"> |
|
|
|
|
|
|
|
<view class="top"> |
|
|
|
<view class="service"> |
|
|
|
<text>{{item.projectId_dictText}}</text> |
|
|
|
<text>{{item.type_dictText}}</text> |
|
|
|
</view> |
|
|
|
<view class="status"> |
|
|
|
<text> {{item.state_dictText}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
|
|
<view class="left"> |
|
|
|
<image mode="aspectFill" :src="item.image"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="right"> |
|
|
|
<view class="text-hidden-1"> |
|
|
|
客户姓名：{{item.name}} |
|
|
|
<view class="content"> |
|
|
|
|
|
|
|
<view class="card" style="padding-left: 0;"> |
|
|
|
<uv-tabs :list="tabs" |
|
|
|
:inactiveStyle="{ |
|
|
|
color: '#999999', |
|
|
|
fontSize: '30rpx', |
|
|
|
fontWeight: 500, |
|
|
|
whiteSpace: 'nowrap', |
|
|
|
}" |
|
|
|
:activeStyle="{ |
|
|
|
color: '#1B1B1B', |
|
|
|
fontSize: '38rpx', |
|
|
|
fontWeight: 900, |
|
|
|
whiteSpace: 'nowrap', |
|
|
|
}" |
|
|
|
lineHeight="13rpx" |
|
|
|
lineWidth="77rpx" |
|
|
|
:lineColor="`url('../../static/image/record/slider.png') 100% 100%`" |
|
|
|
:scrollable="false" |
|
|
|
@click="clickTabs" |
|
|
|
> |
|
|
|
<template v-slot:right> |
|
|
|
<view> |
|
|
|
<uv-popup |
|
|
|
ref="popup" |
|
|
|
:overlayOpacity="0" |
|
|
|
:customStyle="{ |
|
|
|
backgroundColor: 'transparent', |
|
|
|
position: 'fixed', |
|
|
|
top: '300rpx', |
|
|
|
right: '20rpx' |
|
|
|
}" |
|
|
|
> |
|
|
|
<view class="card popup-options"> |
|
|
|
<view |
|
|
|
class="popup-option" |
|
|
|
:class="{ 'is-active': item.value === queryParams.auditStatus }" |
|
|
|
v-for="item in auditStatusOptions" |
|
|
|
:key="item.value" |
|
|
|
@click="onSelectAuditStatus(item.value)" |
|
|
|
> |
|
|
|
<text>{{ item.label }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-popup> |
|
|
|
<button class="btn-simple" plain @click="openPicker" > |
|
|
|
<image src="../../static/image/record/filter.png" style="width: 30rpx; height: 30rpx;"></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="text-hidden-1"> |
|
|
|
产品规格：{{item.unit}} |
|
|
|
</template> |
|
|
|
</uv-tabs> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-if="recordList.records.length > 0" class="card list"> |
|
|
|
<view class="list-item" |
|
|
|
v-for="item in recordList.records" |
|
|
|
@click="toSharingDetail(item.id)" |
|
|
|
:key="item.id" |
|
|
|
> |
|
|
|
<image class="left" :src="item.imageUrl"></image> |
|
|
|
<view class="right"> |
|
|
|
<view class="title">{{ item.title }}</view> |
|
|
|
<view class="desc">{{ item.description }}</view> |
|
|
|
<view class="bottom"> |
|
|
|
<text class="desc">{{ item.createTime }}</text> |
|
|
|
<button plain class="btn-simple btn-delete flex" @click="onDelete(item.id)"> |
|
|
|
<image src="../../static/image/record/delete.png" style="width: 24rpx; height: 24rpx;"></image> |
|
|
|
<text style="margin-left: 10rpx;">删除</text> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="text-hidden-1"> |
|
|
|
租赁地址：{{item.address}} |
|
|
|
|
|
|
|
<view class="mark"> |
|
|
|
<image |
|
|
|
:src="auditStatusImgMapping[item.auditStatus]" |
|
|
|
style="width: 100rpx; height: 100rpx;" |
|
|
|
></image> |
|
|
|
</view> |
|
|
|
<!-- <view class="text-hidden-1"> |
|
|
|
总计时间：{{item.useTime}}分钟 |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bottom"> |
|
|
|
<view class="price"> |
|
|
|
总价格：<text class="num">{{item.money}}元</text> |
|
|
|
</view> |
|
|
|
<view class="b1"> |
|
|
|
查看物流 |
|
|
|
</view> |
|
|
|
<!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0"> |
|
|
|
立即付款 |
|
|
|
</view> |
|
|
|
<view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3"> |
|
|
|
再来一单 |
|
|
|
</view> |
|
|
|
<view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)" v-if="item.state == 3"> |
|
|
|
立即评价 |
|
|
|
</view> |
|
|
|
<view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4"> |
|
|
|
再来一单 |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<tabber select="order"/> |
|
|
|
<tabber select="record"/> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
|
|
|
|
const URL_MAPPING = { // state -> url |
|
|
|
'-1': '/pages_order/record/personalSharing', |
|
|
|
'1': '/pages_order/record/videoSharing', |
|
|
|
'2': '/pages_order/record/groupSharing', |
|
|
|
'3': '/pages_order/record/articleSharing', |
|
|
|
} |
|
|
|
|
|
|
|
export default { |
|
|
|
components : { |
|
|
|
tabber, |
|
|
|
@ -93,41 +111,81 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tabs: [{ |
|
|
|
name: '全部' |
|
|
|
name: '个人分享' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '租赁押金' |
|
|
|
name: '视频分享' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '水洗租赁' |
|
|
|
name: '群分享' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '破损换货' |
|
|
|
name: '文章分享' |
|
|
|
}, |
|
|
|
], |
|
|
|
auditStatusOptions: [ |
|
|
|
{ |
|
|
|
name: '退货退款' |
|
|
|
} |
|
|
|
label: '审核中', |
|
|
|
value: 0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '已通过', |
|
|
|
value: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '未通过', |
|
|
|
value: 2, |
|
|
|
}, |
|
|
|
], |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10 |
|
|
|
pageSize: 10, |
|
|
|
auditStatus: null, |
|
|
|
}, |
|
|
|
// orderList: [ |
|
|
|
// { |
|
|
|
// money : 99.99, |
|
|
|
// address : '广东省广州市越秀区城南故事C3栋2802', |
|
|
|
// name : '李**', |
|
|
|
// phone : '150*****091', |
|
|
|
// unit : '120*40*75【桌子尺寸】', |
|
|
|
// image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', |
|
|
|
// state_dictText : '已完成', |
|
|
|
// } |
|
|
|
// ], //订单列表数据 |
|
|
|
orderList : { |
|
|
|
records : [], |
|
|
|
total : 0, |
|
|
|
recordList: { |
|
|
|
records: [ |
|
|
|
{ |
|
|
|
id: '001', |
|
|
|
imageUrl: '../../static/image/record/temp.png', |
|
|
|
times: 10, |
|
|
|
qrCode: null, |
|
|
|
title: '裂变星轻松获客', |
|
|
|
description: '如此好用的赚钱项目，赶快加入吧！', |
|
|
|
auditStatus: 0, |
|
|
|
createTime: '2025年2月1日', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '002', |
|
|
|
imageUrl: '../../static/image/record/temp.png', |
|
|
|
times: 10, |
|
|
|
qrCode: null, |
|
|
|
title: '裂变星轻松获客', |
|
|
|
description: '如此好用的赚钱项目，赶快加入吧！', |
|
|
|
auditStatus: 1, |
|
|
|
createTime: '2025年2月1日', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '002', |
|
|
|
imageUrl: '../../static/image/record/temp.png', |
|
|
|
times: 10, |
|
|
|
qrCode: null, |
|
|
|
title: '裂变星轻松获客', |
|
|
|
description: '如此好用的赚钱项目，赶快加入吧！', |
|
|
|
auditStatus: 2, |
|
|
|
createTime: '2025年2月1日', |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
// recordList : { // 列表数据 |
|
|
|
// records : [], |
|
|
|
// total : 0, |
|
|
|
// }, |
|
|
|
state : -1, |
|
|
|
auditStatusImgMapping: { |
|
|
|
0: '../../static/image/record/audit.png', // 审核中 |
|
|
|
1: '../../static/image/record/pass.png', // 已通过 |
|
|
|
2: '../../static/image/record/fail.png', // 未通过 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
@ -135,13 +193,15 @@ |
|
|
|
}, |
|
|
|
//滚动到屏幕底部 |
|
|
|
onReachBottom() { |
|
|
|
if(this.queryParams.pageSize < this.orderList.total){ |
|
|
|
if(this.queryParams.pageSize < this.recordList.total){ |
|
|
|
this.queryParams.pageSize += 10 |
|
|
|
this.orderPage() |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
orderPage(){ |
|
|
|
// todo |
|
|
|
return |
|
|
|
let queryParams = { |
|
|
|
...this.queryParams, |
|
|
|
} |
|
|
|
@ -150,7 +210,7 @@ |
|
|
|
} |
|
|
|
this.$api('orderPage', queryParams, res => { |
|
|
|
if(res.code == 200){ |
|
|
|
this.orderList = res.result |
|
|
|
this.recordList = res.result |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -164,14 +224,22 @@ |
|
|
|
this.queryParams.pageSize = 10 |
|
|
|
this.orderPage() |
|
|
|
}, |
|
|
|
//跳转订单详情页面 |
|
|
|
toOrderDetail(id) { |
|
|
|
openPicker() { |
|
|
|
this.$refs.popup.open(); |
|
|
|
}, |
|
|
|
onSelectAuditStatus(val) { |
|
|
|
const selected = this.queryParams.auditStatus |
|
|
|
|
|
|
|
this.queryParams.auditStatus = selected === val ? null : val |
|
|
|
}, |
|
|
|
//跳转分享详情页面 |
|
|
|
toSharingDetail(id) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/record/orderDetail?id=' + id |
|
|
|
url: `${URL_MAPPING[this.state]}?id=${id}` |
|
|
|
}) |
|
|
|
}, |
|
|
|
getOrderList(){ |
|
|
|
|
|
|
|
onDelete(id) { |
|
|
|
// todo |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
@ -180,83 +248,90 @@ |
|
|
|
<style scoped lang="scss"> |
|
|
|
.page{ |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
padding: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
.item { |
|
|
|
width: calc(100% - 40rpx); |
|
|
|
background-color: #fff; |
|
|
|
margin: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
font-size: 30rpx; |
|
|
|
|
|
|
|
.service {} |
|
|
|
|
|
|
|
.status { |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
margin-top: 20rpx; |
|
|
|
padding: 40rpx 59rpx 40rpx 43rpx; |
|
|
|
|
|
|
|
&-item { |
|
|
|
font-size: 0; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
& + & { |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
display: flex; |
|
|
|
margin: 10rpx 0; |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
width: calc(100% - 160rpx); |
|
|
|
color: #777; |
|
|
|
font-size: 24rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
background-color: #F8F8F8; |
|
|
|
} |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 220rpx; |
|
|
|
height: 148rpx; |
|
|
|
background-color: yellow; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 25rpx; |
|
|
|
.price { |
|
|
|
font-weight: 900; |
|
|
|
text { |
|
|
|
color: #ff780099; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.b1 { |
|
|
|
border: 1px solid #777; |
|
|
|
color: #777; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.b2 { |
|
|
|
background: linear-gradient(178deg, #4FD3BC, #60C285); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
view { |
|
|
|
margin: 12rpx; |
|
|
|
border-radius: 28rpx; |
|
|
|
padding: 8rpx 28rpx; |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
width: calc(100% - 220rpx); |
|
|
|
padding-left: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
color: #1B1B1B; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.desc { |
|
|
|
color: #999999; |
|
|
|
font-size: 24rpx; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.title + .desc { |
|
|
|
margin-top: 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: calc(100% - 20rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-delete { |
|
|
|
float: right; |
|
|
|
color: #05D9A2; |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.mark { |
|
|
|
position: absolute; |
|
|
|
top: 10rpx; |
|
|
|
right: 5rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.popup { |
|
|
|
&-options { |
|
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); |
|
|
|
padding: 16rpx 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-option { |
|
|
|
color: #999999; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
&.is-active { |
|
|
|
color: #1B1B1B; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
& + & { |
|
|
|
margin-top: 16rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
