501 lines
13 KiB
Vue
501 lines
13 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :is-back="false" title="订单" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#fff' title-size='36'
|
|
height='36' id="navbar">
|
|
</u-navbar>
|
|
<view class="nav">
|
|
<view :class="navindex == 0 ? 'navactive' : ''" @click="btnnav(0)">
|
|
爆灯订单
|
|
<text></text>
|
|
</view>
|
|
<view :class="navindex == 1 ? 'navactive' : ''" @click="btnnav(1)">
|
|
充值订单
|
|
<text></text>
|
|
</view>
|
|
<view :class="navindex == 2 ? 'navactive' : ''" @click="btnnav(2)">
|
|
购物订单
|
|
<text></text>
|
|
</view>
|
|
<!-- <view :class="navindex == 3 ? 'navactive' : ''" @click="btnnav(3)">
|
|
卡劵订单
|
|
<text></text>
|
|
</view> -->
|
|
</view>
|
|
<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white" v-if="orderlist.length != 0">
|
|
<view class="list_item" :class="{'shopping-order': navindex == 2}" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.id)">
|
|
<view class="top">
|
|
<view class="" v-if="navindex == 0">
|
|
充值类-爆灯次数充值
|
|
</view>
|
|
<view class="" v-if="navindex == 1">
|
|
充值类-余额充值
|
|
</view>
|
|
<view class="" v-if="navindex == 2">
|
|
购物类-商品购买
|
|
</view>
|
|
<view class="" v-if="navindex == 3">
|
|
兑换类-卡劵兑换
|
|
</view>
|
|
<view class="">
|
|
<text style="font-size: 26rpx;" v-if="item.status == 'FINISHED'">交易成功</text>
|
|
<text v-if="item.status == 'CANCELED'" style="color: #9F9F9F;font-size: 26rpx;">交易取消</text>
|
|
<text style="font-size: 26rpx;" v-if="item.status == 'REFUNDED'">交易成功</text>
|
|
<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_PAY'">待支付</text>
|
|
<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_DELIVERY'">待配送</text>
|
|
</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="lt" v-if="navindex == 0">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ubGWMXEuBaNSGPLrcN7P" mode=""></image>
|
|
</view>
|
|
<view class="lt" v-if="navindex == 1">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2TJIagWNcBSCm0S8bU" mode=""></image>
|
|
</view>
|
|
<view class="rt">
|
|
<view class="bai" v-if="navindex == 0">
|
|
爆灯次数充值 - {{item.suitNum}}次
|
|
</view>
|
|
<view class="bai" v-if="navindex == 1">
|
|
余额充值 - {{item.rechargeAmount}}元，赠送{{item.giftedAmount == null ? '0' : item.giftedAmount}}元
|
|
</view>
|
|
<view v-if="navindex == 2" class="goods-list">
|
|
<view v-for="goods in item.goodsOrderSkuVOList" :key="goods.id" class="goods-item">
|
|
<image :src="goods.picture" class="goods-img" mode="aspectFill"></image>
|
|
<view class="goods-info">
|
|
<view class="goods-name">{{ goods.goodsName }}</view>
|
|
<view class="goods-spec">
|
|
规格：
|
|
<span v-for="(spec, sidx) in goods.specValue" :key="sidx">
|
|
{{ spec.value }}<span v-if="sidx < goods.specValue.length - 1">,</span>
|
|
</span>
|
|
</view>
|
|
<view class="goods-row">
|
|
<view class="goods-qty">数量：{{ goods.number }}</view>
|
|
<view class="goods-price">单价：￥{{ goods.price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bai">
|
|
商品购买 - 原价{{item.originalAmount}}元，优惠{{item.discountedAmount == null ? '0' : item.discountedAmount}}元
|
|
</view>
|
|
</view>
|
|
<view class="hui">
|
|
下单时间：{{item.createTime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bot">
|
|
<view class="">
|
|
|
|
</view>
|
|
<view class="" v-if="navindex == 0">
|
|
<text>金额：￥{{item.payAmount}}</text>
|
|
</view>
|
|
<view class="" v-if="navindex == 1">
|
|
<text>金额：￥{{item.rechargeAmount}}</text>
|
|
</view>
|
|
<view class="" v-if="navindex == 2">
|
|
<text>金额：￥{{item.payAmount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="wu">
|
|
没有更多订单了...
|
|
</view>
|
|
</scroll-view>
|
|
<view style="width: 480rpx;height: 373rpx;margin: auto;margin-top: 390rpx;" v-else>
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uEiNJh8Rfurw9ORQzlit" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#010000",
|
|
},
|
|
orderlist:[],
|
|
total:'',
|
|
pageNum:1,
|
|
isRefreshing: false,
|
|
navindex:0
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onLoad() {
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
// 点击切换nav
|
|
btnnav(num){
|
|
this.navindex = num
|
|
this.isRefreshing = true
|
|
this.pageNum = 1
|
|
if(num == 0){
|
|
this.getlist()
|
|
}else if(num == 1){
|
|
this.getchongzhi()
|
|
}else if(num == 2){
|
|
this.getshop()
|
|
}else if(num == 3){
|
|
this.geikajuan()
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
onRefresh() {
|
|
this.isRefreshing = true
|
|
this.pageNum = 1
|
|
if(this.navindex == 0){
|
|
this.getlist()
|
|
}else if(this.navindex == 1){
|
|
this.getchongzhi()
|
|
}else if(this.navindex == 2){
|
|
this.getshop()
|
|
}else if(this.navindex == 3){
|
|
this.getkajuan()
|
|
}
|
|
setTimeout(() => {
|
|
this.isRefreshing = false
|
|
}, 1000)
|
|
},
|
|
// 获取卡劵兑换列表
|
|
getkajuan(){
|
|
this.$u.get(`/app/vipUser/list?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if(this.pageNum == 1){
|
|
this.orderlist = res.rows
|
|
this.pageNum++
|
|
}else{
|
|
this.orderlist = this.orderlist.concat(res.rows)
|
|
this.pageNum++
|
|
}
|
|
}else if(res.code == 401){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '你还未登录，是否去登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定')
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取充值余额列表
|
|
getchongzhi(){
|
|
this.$u.get(`/app/rechargeOrder?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if(this.pageNum == 1){
|
|
this.orderlist = res.rows
|
|
this.pageNum++
|
|
}else{
|
|
this.orderlist = this.orderlist.concat(res.rows)
|
|
this.pageNum++
|
|
}
|
|
}else if(res.code == 401){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '你还未登录，是否去登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定')
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取购买商品列表
|
|
getshop(){
|
|
this.$u.get(`/app/goodsOrder/list?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if(this.pageNum == 1){
|
|
this.orderlist = res.rows
|
|
this.pageNum++
|
|
}else{
|
|
this.orderlist = this.orderlist.concat(res.rows)
|
|
this.pageNum++
|
|
}
|
|
}else if(res.code == 401){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '你还未登录，是否去登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定')
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//获取爆灯次数列表
|
|
getlist(){
|
|
this.$u.get(`/app/order?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if(this.pageNum == 1){
|
|
this.orderlist = res.rows
|
|
this.pageNum++
|
|
}else{
|
|
this.orderlist = this.orderlist.concat(res.rows)
|
|
this.pageNum++
|
|
}
|
|
}else if(res.code == 401){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '你还未登录，是否去登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定')
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 上拉加载更多
|
|
handqixing(){
|
|
if(this.total > this.orderlist.length){
|
|
if(this.navindex == 0){
|
|
this.getlist()
|
|
}else if(this.navindex == 1){
|
|
this.getchongzhi()
|
|
}else if(this.navindex == 2){
|
|
this.getshop()
|
|
}else if(this.navindex == 3){
|
|
this.getkajuan()
|
|
}
|
|
}else{
|
|
console.log(11);
|
|
}
|
|
},
|
|
// 点击进入订单详情
|
|
btnxq(orderid){
|
|
uni.navigateTo({
|
|
url:'/pages/nearbystores/index?orderid=' + orderid + '&navindex=' + this.navindex
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #010000;
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
height: 83vh;
|
|
overflow: scroll;
|
|
padding-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
.wu{
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 36rpx;
|
|
}
|
|
.list_item {
|
|
width: 702rpx;
|
|
background: #211f1f;
|
|
border-radius: 16rpx;
|
|
margin: auto;
|
|
margin-top: 26rpx;
|
|
padding: 22rpx 34rpx;
|
|
box-sizing: border-box;
|
|
// 默认高度
|
|
height: 288rpx;
|
|
// 针对购物订单自适应高度
|
|
&.shopping-order {
|
|
height: auto;
|
|
padding-bottom: 30rpx;
|
|
.goods-list {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.goods-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
.goods-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
.goods-info {
|
|
flex: 1;
|
|
.goods-name {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.goods-spec {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
margin-top: 4rpx;
|
|
}
|
|
.goods-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 4rpx;
|
|
.goods-qty, .goods-price {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
margin-right: 24rpx;
|
|
}
|
|
.goods-price {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bot{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 2rpx;
|
|
box-sizing: border-box;
|
|
font-size: 26rpx;
|
|
color: #9F9F9F;
|
|
text{
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 28rpx;
|
|
}
|
|
}
|
|
.bd{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
.lt{
|
|
image{
|
|
width: 122rpx;
|
|
height: 122rpx;
|
|
}
|
|
margin-right: 42rpx;
|
|
}
|
|
.rt{
|
|
.bai{
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
margin-top: 6rpx;
|
|
}
|
|
.hui{
|
|
font-size: 26rpx;
|
|
color: #9F9F9F;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
.navactive{
|
|
font-size: 32rpx;
|
|
color: #FFFFFF !important;
|
|
text{
|
|
display: block;
|
|
margin: auto;
|
|
margin-top: 8rpx;
|
|
width: 40rpx;
|
|
height: 6rpx;
|
|
background: #FF8998;
|
|
border-radius: 5rpx 5rpx 5rpx 5rpx;
|
|
}
|
|
}
|
|
.nav{
|
|
width: 100%;
|
|
height: 50rpx;
|
|
background-color: #010000;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 30rpx;
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
view{
|
|
text-align: center;
|
|
text{
|
|
|
|
}
|
|
}
|
|
}
|
|
.goods-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
.goods-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
.goods-info {
|
|
flex: 1;
|
|
.goods-name {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.goods-spec {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
margin-top: 4rpx;
|
|
}
|
|
.goods-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 4rpx;
|
|
.goods-qty, .goods-price {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
margin-right: 24rpx;
|
|
}
|
|
.goods-price {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |