baodeng_xcx/pages/tj.vue

501 lines
13 KiB
Vue
Raw Normal View History

2023-12-05 16:45:28 +08:00
<template>
2024-01-24 11:55:35 +08:00
<view class="page">
2025-05-14 15:14:12 +08:00
<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>
2025-08-19 17:02:49 +08:00
<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>
2025-05-14 15:14:12 +08:00
<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white" v-if="orderlist.length != 0">
2025-08-19 17:02:49 +08:00
<view class="list_item" :class="{'shopping-order': navindex == 2}" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.id)">
2025-05-14 15:14:12 +08:00
<view class="top">
2025-08-19 17:02:49 +08:00
<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">
兑换类-卡劵兑换
2025-05-14 15:14:12 +08:00
</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>
2025-06-06 11:14:06 +08:00
<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_PAY'">待支付</text>
2025-08-19 17:02:49 +08:00
<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_DELIVERY'">待配送</text>
2025-05-14 15:14:12 +08:00
</view>
2024-01-27 16:37:52 +08:00
</view>
2025-05-14 15:14:12 +08:00
<view class="bd">
2025-08-19 17:02:49 +08:00
<view class="lt" v-if="navindex == 0">
2025-05-14 15:14:12 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/ubGWMXEuBaNSGPLrcN7P" mode=""></image>
</view>
2025-08-19 17:02:49 +08:00
<view class="lt" v-if="navindex == 1">
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2TJIagWNcBSCm0S8bU" mode=""></image>
</view>
2025-05-14 15:14:12 +08:00
<view class="rt">
2025-08-19 17:02:49 +08:00
<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>
2025-05-14 15:14:12 +08:00
</view>
<view class="hui">
下单时间{{item.createTime}}
</view>
</view>
2024-01-27 16:37:52 +08:00
</view>
2025-05-14 15:14:12 +08:00
<view class="bot">
<view class="">
</view>
2025-08-19 17:02:49 +08:00
<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">
2025-06-06 11:14:06 +08:00
<text>金额{{item.payAmount}}</text>
2025-05-14 15:14:12 +08:00
</view>
</view>
</view>
<view class="wu">
没有更多订单了...
2024-01-27 16:37:52 +08:00
</view>
2025-05-14 15:14:12 +08:00
</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>
2024-01-27 16:37:52 +08:00
</view>
2023-12-05 16:45:28 +08:00
</view>
</template>
<script>
export default {
data() {
return {
2025-05-14 15:14:12 +08:00
bgc: {
backgroundColor: "#010000",
2024-03-25 19:46:07 +08:00
},
2025-05-14 15:14:12 +08:00
orderlist:[],
total:'',
pageNum:1,
2025-08-19 17:02:49 +08:00
isRefreshing: false,
navindex:0
2024-01-23 19:15:52 +08:00
}
},
2024-03-25 19:46:07 +08:00
onShow() {
2025-08-19 17:02:49 +08:00
},
onLoad() {
this.pageNum = 1
2025-05-14 15:14:12 +08:00
this.getlist()
2024-01-24 11:55:35 +08:00
},
2024-01-23 19:15:52 +08:00
methods: {
2025-08-19 17:02:49 +08:00
// 点击切换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()
}
},
2025-05-14 15:14:12 +08:00
// 下拉刷新
onRefresh() {
this.isRefreshing = true
this.pageNum = 1
2025-08-19 17:02:49 +08:00
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()
}
2025-05-14 15:14:12 +08:00
setTimeout(() => {
this.isRefreshing = false
}, 1000)
2024-03-25 19:46:07 +08:00
},
2025-08-19 17:02:49 +08:00
// 获取卡劵兑换列表
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 =>{
2025-05-14 15:14:12 +08:00
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('用户点击取消')
}
}
})
}
})
2024-03-25 19:46:07 +08:00
},
2025-05-14 15:14:12 +08:00
// 上拉加载更多
handqixing(){
if(this.total > this.orderlist.length){
2025-08-19 17:02:49 +08:00
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()
}
2025-05-14 15:14:12 +08:00
}else{
console.log(11);
2024-01-27 16:37:52 +08:00
}
},
2025-05-14 15:14:12 +08:00
// 点击进入订单详情
btnxq(orderid){
uni.navigateTo({
2025-08-19 17:02:49 +08:00
url:'/pages/nearbystores/index?orderid=' + orderid + '&navindex=' + this.navindex
2025-05-14 15:14:12 +08:00
})
}
2024-01-23 19:15:52 +08:00
}
}
2023-12-05 16:45:28 +08:00
</script>
2024-01-24 11:55:35 +08:00
<style lang="scss">
page {
2025-06-23 08:56:52 +08:00
background-color: #010000;
2024-01-24 11:55:35 +08:00
}
2025-05-14 15:14:12 +08:00
.list{
width: 100%;
2025-08-19 17:02:49 +08:00
height: 83vh;
2025-05-14 15:14:12 +08:00
overflow: scroll;
2025-08-19 17:02:49 +08:00
padding-bottom: 20rpx;
box-sizing: border-box;
2025-05-14 15:14:12 +08:00
.wu{
font-size: 24rpx;
color: #808080;
width: 100%;
text-align: center;
2025-06-23 08:56:52 +08:00
margin-top: 36rpx;
2024-01-24 11:55:35 +08:00
}
2025-08-19 17:02:49 +08:00
.list_item {
2025-05-14 15:14:12 +08:00
width: 702rpx;
2025-06-23 08:56:52 +08:00
background: #211f1f;
2025-08-19 17:02:49 +08:00
border-radius: 16rpx;
2025-05-14 15:14:12 +08:00
margin: auto;
margin-top: 26rpx;
padding: 22rpx 34rpx;
box-sizing: border-box;
2025-08-19 17:02:49 +08:00
// 默认高度
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;
}
}
}
}
}
2025-05-14 15:14:12 +08:00
.bot{
2024-01-27 16:37:52 +08:00
display: flex;
justify-content: space-between;
2025-05-14 15:14:12 +08:00
padding: 0 2rpx;
box-sizing: border-box;
font-size: 26rpx;
color: #9F9F9F;
text{
font-size: 30rpx;
color: #FFFFFF;
margin-left: 28rpx;
}
}
.bd{
display: flex;
2024-01-27 16:37:52 +08:00
align-items: center;
2025-05-14 15:14:12 +08:00
margin-top: 20rpx;
.lt{
image{
width: 122rpx;
height: 122rpx;
}
margin-right: 42rpx;
2024-01-27 16:37:52 +08:00
}
2025-05-14 15:14:12 +08:00
.rt{
.bai{
font-size: 26rpx;
color: #FFFFFF;
margin-top: 6rpx;
}
.hui{
font-size: 26rpx;
color: #9F9F9F;
margin-top: 10rpx;
}
2024-01-27 16:37:52 +08:00
}
}
2025-05-14 15:14:12 +08:00
.top{
display: flex;
justify-content: space-between;
font-size: 32rpx;
color: #FFFFFF;
}
2024-01-27 16:37:52 +08:00
}
2024-01-24 11:55:35 +08:00
}
2025-08-19 17:02:49 +08:00
.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;
}
}
2025-05-14 15:14:12 +08:00
.nav{
width: 100%;
2025-08-19 17:02:49 +08:00
height: 50rpx;
2025-05-14 15:14:12 +08:00
background-color: #010000;
2025-08-19 17:02:49 +08:00
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;
}
}
}
2025-05-14 15:14:12 +08:00
}
2024-01-24 11:55:35 +08:00
</style>