<template>
|
<view class="page_bg">
|
<z-paging ref="paging" class="z-paging page_bg" v-model="orderList" @query="getOrderList"
|
:hide-loading-more-when-no-more-by-limit="5">
|
<view class="list-item flex-col" v-for="item in orderList" :key="item._id" @click="checkDetail(item)">
|
<text class="text_1">订单编号：{{item.order_no}}</text>
|
<image src="/static/local/f763a2c78a597fab3f429dc5644387de.png" class="image_2" />
|
<view class="center-group flex-row">
|
<block v-if="item.courseInfo&&item.courseInfo.goods_thumb">
|
<u-image :src="item.courseInfo.goods_thumb" :lazy-load="true" width="250" height="160"
|
border-radius="8rpx" mode="aspectFill">
|
</u-image>
|
<view class="right-group flex-col">
|
<text class="text_3">{{item.title}}</text>
|
<text class="text_5">￥{{item.total_fee / 100}}</text>
|
</view>
|
</block>
|
<block v-else>
|
<view class="right-group-text">
|
<text class="text_3">{{item.title}}</text>
|
<text class="text_5">￥{{item.total_fee / 100}}</text>
|
</view>
|
</block>
|
</view>
|
<view class="bottom-group justify-between">
|
<text class="text_7">{{orderStatus(item.status)}}</text>
|
<view style="display: flex;">
|
<block v-if="item.status == 1 && item.type!='recharge'">
|
<view class="flex-col items-center text-wrapper del" @click.stop="continueBuy(item)">
|
<text>继续支付</text>
|
</view>
|
</block>
|
<view class="flex-col items-center text-wrapper"
|
@click.stop="popShow = true;selectId = item._id">
|
<text>删除订单</text>
|
</view>
|
<view class="flex-col items-center text-wrapper">
|
<text>查看详情</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</z-paging>
|
|
<u-modal v-model="popShow" content="确认删除该订单么？" show-cancel-button @confirm="remove" @cancel="selectId = ''">
|
</u-modal>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
// 订单列表
|
orderList: [],
|
// 选中订单
|
selectId: '',
|
|
popShow: false
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
computed: {
|
// 订单状态
|
orderStatus() {
|
return (status) => {
|
switch (status) {
|
case 1:
|
return '待付款';
|
case 2:
|
return '已付款';
|
case 3:
|
return '退款审核中';
|
case 4:
|
return '已退款';
|
case 5:
|
return '退款中';
|
case -1:
|
return '已取消付款/退款';
|
case -2:
|
return '退款拒绝';
|
case -3:
|
return '退款失败';
|
}
|
}
|
}
|
},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {},
|
// 获取订单列表
|
getOrderList(pageNo, pageSize) {
|
vk.callFunction({
|
url: 'client/order/kh/list',
|
title: '获取中...',
|
data: { pageIndex: pageNo, pageSize: pageSize, need_user_info: true },
|
success(data) {
|
that.$refs.paging.complete(data.rows);
|
}
|
})
|
},
|
// 查看详情
|
checkDetail(item) {
|
// 订单数据存入本地
|
vk.setStorageSync('order-detail', item);
|
uni.vk.navigateTo('./order-detail')
|
},
|
// 删除订单
|
remove() {
|
vk.callFunction({
|
url: 'client/order/kh/deleteOrder',
|
title: '删除中...',
|
data: { id: that.selectId },
|
success: function(data) {
|
that.selectId = ''
|
that.$refs.paging.reload()
|
}
|
})
|
},
|
// 继续支付
|
continueBuy(item) {
|
uni.vk.redirectTo('/pages/payment/payType?order_id=' + item._id)
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
height: 100vh;
|
padding: 20rpx 20rpx 0;
|
background: #F5F5F5;
|
}
|
|
.list-item {
|
padding: 31rpx 0 26rpx;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
|
border-radius: 12rpx;
|
margin-bottom: 20rpx;
|
|
.text_1 {
|
margin-left: 20rpx;
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 36rpx;
|
white-space: nowrap;
|
}
|
|
.image_2 {
|
margin-top: 24rpx;
|
width: 94.5vw;
|
height: 0.5vw;
|
}
|
|
.center-group {
|
margin-top: 28rpx;
|
padding-left: 20rpx;
|
padding-right: 18rpx;
|
|
.right-group {
|
margin-left: 26rpx;
|
margin-bottom: 4rpx;
|
flex: 1 1 auto;
|
|
.text_3 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
|
.text_5 {
|
margin-left: 7rpx;
|
margin-top: 43rpx;
|
color: rgb(246, 21, 21);
|
font-size: 36rpx;
|
line-height: 43rpx;
|
white-space: nowrap;
|
}
|
}
|
|
.right-group-text {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-left: 0;
|
flex: 1 1 auto;
|
|
.text_3 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
}
|
|
.text_5 {
|
margin: 0 6rpx 0 0;
|
color: rgb(246, 21, 21);
|
font-size: 36rpx;
|
line-height: 43rpx;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.bottom-group {
|
margin-top: 28rpx;
|
padding: 0 20rpx;
|
|
.text_7 {
|
margin: 10rpx 0 8rpx;
|
color: rgb(255, 12, 12);
|
font-size: 30rpx;
|
line-height: 36rpx;
|
white-space: nowrap;
|
font-weight: bold;
|
}
|
|
.text-wrapper {
|
padding: 14rpx 0 12rpx;
|
color: rgb(255, 255, 255);
|
font-size: 24rpx;
|
line-height: 29rpx;
|
white-space: nowrap;
|
background-color: rgb(51, 51, 51);
|
border-radius: 27rpx;
|
width: 160rpx;
|
height: 54rpx;
|
margin-left: 10rpx;
|
}
|
|
.del {
|
background-color: #F56C6C;
|
}
|
}
|
}
|
</style>
|
