<template>
|
|
<view class="order-container">
|
|
<view v-if="orderList.length>0">
|
|
<view class="order-text-blod" style="margin: 0 0 14px 10px;">
|
|
全部订单
|
|
</view>
|
|
<view class="order-item" v-for="(order,index) in orderList" :key="index">
|
|
<view class="order-title">
|
|
<text
|
|
class="order-text-blod">{{order.orderItemList&&order.orderItemList[0]&&order.orderItemList[0].productName}}</text>
|
|
<text style="font-size: 14px;color: #A94F20;">{{ getStatusName(order.status) }}</text>
|
|
</view>
|
|
<view class="order-content">
|
|
<view class="order-title">
|
|
<text class="order-text-normal">下单时间</text>
|
|
<text class="order-text-normal" style="color: #999;">{{order.paymentTime}}</text>
|
|
</view>
|
|
<view class="order-title" style="margin-top: 14px;">
|
|
<text class="order-text-normal">上门频率</text>
|
|
<text class="order-text-normal" style="color: #999;">
|
|
{{order.service.serviceFrequency =='once_a_day'?'一天一次':'一天两次'}}
|
|
</text>
|
|
</view>
|
|
<!-- <view class="order-title" style="margin-top: 14px;">
|
|
<text class="order-text-normal">服务时间</text>
|
|
<view>
|
|
<view class="order-text-normal" style="color: #999;margin-bottom: 5px;"
|
|
v-for="date in (order.service.serviceDate && getDateList(order.service.serviceDate))"
|
|
:key="date">
|
|
{{date}}
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="order-price">
|
|
<view class="order-text-blod">
|
|
总价:
|
|
<text style="font-size: 20px; color:#FF530A;">¥{{order.payAmount}}</text>
|
|
<text style="color:#FF530A; font-size:14px"> 元</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="no-data" v-else>
|
|
暂无数据
|
|
</view>
|
|
|
|
<Kefu></Kefu>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOpenIdKey } from '@/utils/auth';
|
|
import Kefu from '../common/kefu.vue'
|
|
import {
|
|
getOrderList,
|
|
getOpenId
|
|
} from "@/api/system/user.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
prames: {
|
|
status: '-1',
|
|
page: 0,
|
|
size: 20,
|
|
openId: ''
|
|
},
|
|
orderList: [],
|
|
openIdStr: '',
|
|
totalPages: 1,
|
|
statusLsit: [{
|
|
value: -1,
|
|
label: '全部'
|
|
},
|
|
{
|
|
value: 1,
|
|
label: '待派单'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '已派单'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '已完成'
|
|
},
|
|
]
|
|
};
|
|
},
|
|
components:{
|
|
Kefu
|
|
},
|
|
onLoad() {
|
|
this.openIdStr = getOpenIdKey()
|
|
// this.openIdStr = this.$globalData.openIdStr;
|
|
this.getOrderData()
|
|
},
|
|
onReachBottom() {
|
|
this.prames.page = this.prames.page + 1
|
|
this.getOrderData()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.prames = {
|
|
status: '-1',
|
|
page: 0,
|
|
size: 20,
|
|
openId: ''
|
|
}
|
|
this.orderList = []
|
|
this.getOrderData()
|
|
// wx.stopPullDownRefresh()
|
|
//停止下拉刷新效果的api,如果发现进入刷新状态无法停止,可以用这个
|
|
},
|
|
methods: {
|
|
getOrderData() {
|
|
if (!this.openIdStr) {
|
|
this.login()
|
|
} else {
|
|
if (this.prames.page < this.totalPages) {
|
|
this.prames.openId = this.openIdStr
|
|
getOrderList(this.prames).then(res => {
|
|
if (res && res.content) {
|
|
this.totalPages = res.totalPages
|
|
this.orderList = [...this.orderList, ...res.content]
|
|
}
|
|
console.log(res);
|
|
})
|
|
} else {
|
|
uni.showToast('暂无更多数据')
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
login() {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: (loginRes) => {
|
|
this.getOpenId(loginRes.code)
|
|
},
|
|
fail: function(error) {
|
|
// 授权失败处理
|
|
uni.showToast('授权失败,请授权后再试')
|
|
}
|
|
});
|
|
},
|
|
getOpenId(code) {
|
|
getOpenId(code).then(res => {
|
|
if (res.code == 200 && res.data) {
|
|
this.openIdStr = JSON.parse(res.data).openId;
|
|
this.$globalData.openIdStr = this.openIdStr;
|
|
this.getOrderData()
|
|
}
|
|
})
|
|
},
|
|
getStatusName(status) {
|
|
const currentStatus = this.statusLsit.find(item => item.value == status)
|
|
if (currentStatus) {
|
|
return currentStatus.label
|
|
}
|
|
return ''
|
|
},
|
|
getDateList(serviceDate) {
|
|
return JSON.parse(serviceDate).sort()
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order-container {
|
|
padding: 14px 10px;
|
|
background-color: #F5F5F7;
|
|
height: 100vh;
|
|
|
|
.order-item {
|
|
border-radius: 8px;
|
|
background: #FFF;
|
|
padding: 18px 10px 14px;
|
|
margin-bottom: 10px;
|
|
|
|
.order-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.order-content {
|
|
background-color: #FFFCF2;
|
|
padding: 14px 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.order-price {
|
|
margin-top: 14px;
|
|
text-align: end;
|
|
}
|
|
}
|
|
|
|
.order-text-blod {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.order-text-normal {
|
|
font-size: 16px;
|
|
color: #333;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.no-data {
|
|
color: #999;
|
|
height: 60vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style>
|