admin/jurong_circle_front_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025-10-24

Browse Source 
我的订单修改
This commit is contained in:
Sun_sun
2025-10-24 15:56:41 +08:00
parent 81dba82be3
commit 5769349d08
1 changed files with 131 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
pages/my/order.vue
View File

@@ -14,77 +14,93 @@
<u-tabs bg-color="#F5F8FF" :show-bar="false" :list="tabList" :is-scroll="false" <u-tabs bg-color="#F5F8FF" :show-bar="false" :list="tabList" :is-scroll="false"
v-model="currentTab"></u-tabs> v-model="currentTab"></u-tabs>
<view class="menu-list"> <view class="menu-list">
<view class="menu-item" :class="currentMenu==0?'active':''" @click="handleChangeMenu(0)">全部订单</view> <!-- 'pending'：待发货,'paid','shipped'：已发货,'delivered','cancelled'：已取消,'pre_order'：预订单状态（未选择地址和支付方式）,'completed'：已收货 -->
<view class="menu-item" :class="currentMenu==1?'active':''" @click="handleChangeMenu(1)">待付款</view> <view class="menu-item" :class="currentMenu==''?'active':''" @click="handleChangeMenu('')">全部订单</view>
<view class="menu-item" :class="currentMenu==2?'active':''" @click="handleChangeMenu(2)">待发货</view> <view class="menu-item" :class="currentMenu=='pending'?'active':''"
<view class="menu-item" :class="currentMenu==3?'active':''" @click="handleChangeMenu(3)">待收货</view> @click="handleChangeMenu('pending')">待发货</view>
<view class="menu-item" :class="currentMenu==4?'active':''" @click="handleChangeMenu(4)">退款/售后</view> <view class="menu-item" :class="currentMenu=='pre_order'?'active':''"
@click="handleChangeMenu('pre_order')">待支付</view>
<view class="menu-item" :class="currentMenu=='shipped'?'active':''"
@click="handleChangeMenu('shipped')">已发货</view>
<view class="menu-item" :class="currentMenu=='completed'?'active':''"
@click="handleChangeMenu('completed')">已完成</view>
<view class="menu-item" :class="currentMenu=='cancelled'?'active':''"
@click="handleChangeMenu('cancelled')">已取消</view>
</view> </view>
</view> </view>
<scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData"> <scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
<view class="order-list" v-for="orderItem in orderList"> <template v-if="currentTab==0">
<view class="u-m-l-20">订单号：{{orderItem.order_no}}</view> 111
<view class="order-item" v-for="item in orderItem.items"> </template>
<view class="item-left"> <template v-if="currentTab==1">
<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode=""> <view class="order-list" v-for="orderItem in orderList">
</image> <view class="u-m-l-20">订单号：{{orderItem.order_no}}</view>
<view class="order-item" v-for="item in orderItem.items">
<view class="item-left">
<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
</image>
</view>
<view class="item-right">
<u-row>
<u-col :span="10">
<view>{{item.product_name}}</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{item.rongdou_price}}
</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{item.points_price}}
</view>
</u-col>
<u-col :span="2" text-align="right">
<view>X{{item.quantity}}</view>
</u-col>
</u-row>
</view>
</view> </view>
<view class="item-right">
<u-row>
<u-col :span="10">
<view>{{item.product_name}}</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{item.rongdou_price}}
</view>
<view style="display: flex;align-items: center;">
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{item.points_price}}
</view>
</u-col>
<u-col :span="2" text-align="right">
<view>X{{item.quantity}}</view>
</u-col>
</u-row>
</view>
</view>
<view class="operate-btns"> <view class="operate-btns">
<!-- 待发货 --> <!-- 待发货 -->
<template v-if="orderItem.status=='pending'"> <template v-if="orderItem.status=='pending'">
<u-button hover-class="none" class="operate-btn"
@click="handelCancel(orderItem)">取消订单</u-button>
</template>
<!-- 已支付 -->
<!-- <template v-if="orderItem.status=='paid'">
<u-button hover-class="none" class="operate-btn">取消订单</u-button>
</template> -->
<!-- 已发货 -->
<template v-if="orderItem.status=='shipped'">
<u-button hover-class="none" class="operate-btn"
@click="handleReceive(orderItem)">确认收货</u-button>
</template>
<!-- 已取消 -->
<!-- <template v-if="orderItem.status=='cancelled'">
<u-button hover-class="none" class="operate-btn">查看详情</u-button>
</template> -->
<!-- 待支付 -->
<template v-if="orderItem.status=='pre_order'">
<u-button hover-class="none" class="operate-btn"
@click="handelCancel(orderItem)">取消订单</u-button>
<u-button hover-class="none" class="operate-btn"
@click="handlePay(orderItem)">立即支付</u-button>
</template>
<!-- 完成 -->
<!-- <template v-if="orderItem.status=='completed'">
<u-button hover-class="none" class="operate-btn">评价</u-button>
</template> -->
<u-button hover-class="none" class="operate-btn" <u-button hover-class="none" class="operate-btn"
@click="handelCancel(orderItem)">取消订单</u-button> @click="handleOrderDetail(orderItem)">查看详情</u-button>
</template> </view>
<!-- 已支付 -->
<!-- <template v-if="orderItem.status=='paid'">
<u-button hover-class="none" class="operate-btn">取消订单</u-button>
</template> -->
<!-- 已发货 -->
<template v-if="orderItem.status=='shipped'">
<u-button hover-class="none" class="operate-btn"
@click="handleReceive(orderItem)">确认收货</u-button>
</template>
<!-- 已取消 -->
<!-- <template v-if="orderItem.status=='cancelled'">
<u-button hover-class="none" class="operate-btn">查看详情</u-button>
</template> -->
<!-- 待支付 -->
<template v-if="orderItem.status=='pre_order'">
<u-button hover-class="none" class="operate-btn"
@click="handelCancel(orderItem)">取消订单</u-button>
<u-button hover-class="none" class="operate-btn" @click="handlePay(orderItem)">立即支付</u-button>
</template>
<!-- 完成 -->
<!-- <template v-if="orderItem.status=='completed'">
<u-button hover-class="none" class="operate-btn">评价</u-button>
</template> -->
<u-button hover-class="none" class="operate-btn"
@click="handleOrderDetail(orderItem)">查看详情</u-button>
</view> </view>
</view> <u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore> <view class="box-view"></view>
<view class="box-view"></view> </template>
<template v-if="currentTab==2">
222
</template>
</scroll-view> </scroll-view>
</view> </view>
@@ -117,7 +133,6 @@
<view class="info-item"> <view class="info-item">
<view class="info-name">订单状态</view> <view class="info-name">订单状态</view>
<!-- <view class="info-value">{{detailInfo.status}}</view> --> <!-- <view class="info-value">{{detailInfo.status}}</view> -->
<!-- 'pending'：待发货,'paid','shipped'：已发货,'delivered','cancelled'：已取消,'pre_order'：预订单状态（未选择地址和支付方式）,'completed'：已收货 -->
<u-tag v-if="detailInfo.status=='pending'" text="待发货"></u-tag> <u-tag v-if="detailInfo.status=='pending'" text="待发货"></u-tag>
<u-tag v-if="detailInfo.status=='shipped'" text="已发货"></u-tag> <u-tag v-if="detailInfo.status=='shipped'" text="已发货"></u-tag>
<u-tag v-if="detailInfo.status=='cancelled'" text="已取消"></u-tag> <u-tag v-if="detailInfo.status=='cancelled'" text="已取消"></u-tag>
@@ -164,14 +179,18 @@
<view class="info-name">商品总计</view> <view class="info-name">商品总计</view>
<view class="info-value"> <view class="info-value">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image> <image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{allPay}} {{detailInfo.total_rongdou}}
</view> </view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-name">实付</view> <view class="info-name">实付</view>
<view class="info-value"> <view class="info-value" v-if="detailInfo.real_rongdou">
<image class="icon" src="/static/icon/rongdou.png" mode=""></image> <image class="icon" src="/static/icon/rongdou.png" mode=""></image>
{{detailInfo.total_rongdou}} {{detailInfo.real_rongdou}}
</view>
<view class="info-value" v-if="detailInfo.real_points">
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
{{detailInfo.real_points}}
</view> </view>
</view> </view>
</view> </view>
@@ -185,7 +204,8 @@
ref, ref,
onMounted, onMounted,
getCurrentInstance, getCurrentInstance,
computed computed,
watch
} from 'vue'; } from 'vue';
import { import {
onLoad, onLoad,
@@ -225,7 +245,9 @@
} }
const handleSearch = () => { const handleSearch = () => {
msgRef.value.show({
title: '暂无功能，请期待~'
})
} }
const tabList = ref([{ const tabList = ref([{
@@ -235,11 +257,25 @@
}, { }, {
name: '理财产品', name: '理财产品',
}]) }])
const currentTab = ref(0) const currentTab = ref(1)
const currentMenu = ref(0) const currentMenu = ref(0)
watch(currentTab, (val) => {
if (val == 0 || val === 2) {
msgRef.value.show({
title: '暂无功能，请期待~'
})
currentTab.value = 1
return
}
loadData()
})
const handleChangeMenu = (val) => { const handleChangeMenu = (val) => {
currentMenu.value = val currentMenu.value = val
clearData()
params.value.status = val
loadData()
} }
// 取消订单 // 取消订单
@@ -290,9 +326,9 @@
// 详情 // 详情
const showDetail = ref(false) const showDetail = ref(false)
const detailInfo = ref({}) const detailInfo = ref({})
const allPay = computed(()=>{ const allPay = computed(() => {
let data = 0 let data = 0
detailInfo.value.items.forEach(item=>{ detailInfo.value.items.forEach(item => {
data += item.rongdou_price * item.quantity data += item.rongdou_price * item.quantity
}) })
return data return data
@@ -308,22 +344,30 @@
page: 1, page: 1,
limit: 10, limit: 10,
search: '', search: '',
status: ''
}) })
const loadStatus = ref('loadmore') const loadStatus = ref('loadmore')
const maxPage = ref(1) const maxPage = ref(1)
const orderList = ref([]) const orderList = ref([])
const loadData = () => { const loadData = () => {
if (loadStatus.value == 'nomore') return if (currentTab.value == 0) {
mallAPI.getOrderList(params.value).then(res => { // 项目订单
orderList.value = orderList.value.concat(res.data.orders) } else if (currentTab.value == 1) {
maxPage.value = res.data.pagination.pages // 商品订单
params.value.page++ if (loadStatus.value == 'nomore') return
console.log(orderList.value); mallAPI.getOrderList(params.value).then(res => {
if (maxPage.value < params.value.page) { orderList.value = orderList.value.concat(res.data.orders)
loadStatus.value = 'nomore' maxPage.value = res.data.pagination.pages
} params.value.page++
}) if (maxPage.value < params.value.page) {
loadStatus.value = 'nomore'
}
})
} else if (currentTab.value == 2) {
// 理财产品
}
} }
const clearData = () => { const clearData = () => {
@@ -364,15 +408,16 @@
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
line-height: 100%; line-height: 100%;
justify-content: space-between;
padding: 20rpx 20rpx; padding: 20rpx 20rpx;
overflow-x: auto;
white-space: nowrap;
.menu-item { .menu-item {
background: #DFDFDF; background: #DFDFDF;
border-radius: 12rpx; border-radius: 12rpx;
padding: 12rpx 20rpx; padding: 12rpx 20rpx;
color: #676767; color: #676767;
margin: 0 10rpx;
} }
.active { .active {
@@ -469,7 +514,7 @@
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
line-height: 100%; line-height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }