268 lines
6.7 KiB
Vue
268 lines
6.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="我的订单" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
|
|
title-size='36' height='44'></u-navbar>
|
|
<scroll-view class="list" scroll-y="true" @scrolltolower="onScrollToLower" style="height: 90vh;">
|
|
<view class="list_item" v-for="(item,index) in wateringList" :key="index" @scrolltolower="onReachBottom"
|
|
@click="btnxq(item.billId)">
|
|
<view class="top">
|
|
<view class="bh">
|
|
设备编号：{{item.deviceNo}}
|
|
</view>
|
|
<view style="color: #17b402;" v-if="item.isUsing == true"> <text
|
|
style="background-color: #17b402;"></text> 进行中 </view>
|
|
<view style="color: #8883F0;" v-if="item.isFinished == true && item.status != 3"> <text
|
|
style="background-color: #8883F0;"></text> 已完成 </view>
|
|
<view v-if="item.status == 3" style="red"><text style="background-red"></text> 已退款</view>
|
|
<view class="" v-if="item.isUsing == false && item.isFinished == false && item.status != 3">
|
|
<view v-if="item.status == 1" style="color: #004fd8;"><text
|
|
style="background-color: #004fd8;"></text> 未支付</view>
|
|
<view v-if="item.status == 2" style="color: #e6b000;"><text
|
|
style="background-color: #e6b000;"></text> 支付成功</view>
|
|
<view v-if="item.status == 4" style="color: #5d5d5d;"><text
|
|
style="background-color: #5d5d5d;"></text> 用户取消</view>
|
|
<view v-if="item.status == 5" style="color: #5d5d5d;"><text
|
|
style="background-color: #5d5d5d;"></text> 系统超时取消</view>
|
|
<view v-if="item.status == 6" style="color: #e6b000;"><text
|
|
style="background-color: #e6b000;"></text> 支付中</view>
|
|
<view v-if="item.status == 7" style="red"><text
|
|
style="background-red"></text> 退款中</view>
|
|
<view v-if="item.status == 8" style="color: #004fd8;"><text
|
|
style="background-color: #004fd8;"></text> 押金未支付</view>
|
|
<view v-if="item.status == 9" style="color: #e6b000;"><text
|
|
style="background-color: #e6b000;"></text> 押金已支付</view>
|
|
</view>
|
|
</view>
|
|
<view class="item_xx">
|
|
<view class="">
|
|
订单号
|
|
</view>
|
|
<view class="">
|
|
{{item.billNo}}
|
|
</view>
|
|
</view>
|
|
<view class="item_xx">
|
|
<view class="">
|
|
购买套餐：
|
|
</view>
|
|
<view class="">
|
|
{{item.suitName}}
|
|
</view>
|
|
</view>
|
|
<view class="item_xx">
|
|
<view class="">
|
|
金额
|
|
</view>
|
|
<view class="">
|
|
￥{{item.suitPrice}}
|
|
</view>
|
|
</view>
|
|
<view class="item_xx">
|
|
<view class="">
|
|
经营场所：
|
|
</view>
|
|
<view class="">
|
|
{{item.storeName}} {{item.deviceRoom == undefined ? '' : item.deviceRoom + '室'}}
|
|
</view>
|
|
</view>
|
|
<view class="bot">
|
|
<view class="time">
|
|
{{item.createTime}}
|
|
</view>
|
|
<view class="pagexq">
|
|
订单详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
|
|
-已经到底了-
|
|
</view>
|
|
</scroll-view>
|
|
<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
|
|
<image style="width: 100%;height: 100vh;"
|
|
src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
curtitidx: 0,
|
|
storeId: {},
|
|
bgc: {
|
|
// background:'linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%)'
|
|
},
|
|
pagenum: 1,
|
|
wateringList: [],
|
|
pagesize: 10, // 一页多少数据
|
|
isLoading: false, // 是否正在加载数据
|
|
noMoreData: false, // 是否没有更多数据
|
|
total: 0,
|
|
showflag: false
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
onShow() {
|
|
this.wateringList = []
|
|
this.pagenum = 1
|
|
this.getlist()
|
|
},
|
|
// 分享到好友（会话）
|
|
onShareAppMessage: function() {
|
|
return {
|
|
title: '创亿康',
|
|
path: '/pages/index/index'
|
|
}
|
|
},
|
|
|
|
// 分享到朋友圈
|
|
onShareTimeline: function() {
|
|
return {
|
|
title: '创亿康',
|
|
query: '',
|
|
path: '/pages/index/index'
|
|
}
|
|
},
|
|
methods: {
|
|
// 滚动到底部
|
|
onScrollToLower() {
|
|
if (this.total > this.wateringList.length) {
|
|
this.getlist() // 上拉加载更多
|
|
} else {
|
|
|
|
}
|
|
},
|
|
// 跳转详情 billId参数
|
|
btnxq(billId) {
|
|
uni.navigateTo({
|
|
url: '/page_user/mydetail?billId=' + billId
|
|
})
|
|
},
|
|
// 请求订单列表
|
|
getlist() {
|
|
this.$u.get('/app/bill/rechargeList?pageNum=' + this.pagenum + '&pageSize=' + this.pagesize).then((
|
|
res) => {
|
|
if (res.code == 200) {
|
|
this.total = res.total
|
|
if (res.rows.length > 0) {
|
|
// 有数据，追加到列表
|
|
this.wateringList = this.wateringList.concat(res.rows)
|
|
this.pagenum++
|
|
} else {
|
|
// 没有更多数据
|
|
this.noMoreData = true;
|
|
}
|
|
this.isLoading = false;
|
|
} else if (res.code == 401) {
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .u-title {
|
|
padding-bottom: 15rpx;
|
|
}
|
|
|
|
/deep/ .u-icon__icon {
|
|
padding-bottom: 15rpx;
|
|
}
|
|
|
|
page {
|
|
background: #F4F5F7;
|
|
}
|
|
|
|
.page {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
.list {
|
|
width: 100%;
|
|
// height: 90vh;
|
|
// overflow: scroll;
|
|
padding-bottom: 100rpx;
|
|
box-sizing: border-box;
|
|
|
|
.list_item {
|
|
width: 658rpx;
|
|
max-height: 418rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
padding: 24rpx 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
padding-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.bh {
|
|
font-size: 28rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.wc {
|
|
font-size: 28rpx;
|
|
color: #8883F0;
|
|
}
|
|
}
|
|
|
|
.bot {
|
|
margin-top: 22rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 28rpx;
|
|
padding-top: 20rpx;
|
|
box-sizing: border-box;
|
|
border-top: 1px solid #D8D8D8;
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
}
|
|
|
|
.pagexq {
|
|
width: 142rpx;
|
|
height: 48rpx;
|
|
background: #8883F0;
|
|
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
text-align: center;
|
|
line-height: 48rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.item_xx {
|
|
margin-top: 22rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |