You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

222 lines
4.9 KiB

<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>