添加订单详情
This commit is contained in:
zpc
parent
e50f16419f
commit
245533a784
14
pages.json
14
pages.json
|
|
@ -480,6 +480,20 @@
|
|||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/other/order_list",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/other/order_info",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
|
|
|
|||
214
pages/other/order_info.vue
Normal file
214
pages/other/order_info.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<page-container title="订单详情" :showBack="true">
|
||||
<view class="order-info" v-if="orderInfo">
|
||||
<view class="info-section">
|
||||
<view class="section-title">订单信息</view>
|
||||
<view class="info-item">
|
||||
<text class="label">订单名称：</text>
|
||||
<text class="value">{{orderInfo.goods_title}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">购买数量：</text>
|
||||
<text class="value">{{orderInfo.prize_num}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">单价：</text>
|
||||
<text class="value">¥{{orderInfo.goods_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section">
|
||||
<view class="section-title">支付信息</view>
|
||||
<view class="info-item">
|
||||
<text class="label">订单原价：</text>
|
||||
<text class="value">¥{{orderInfo.order_total}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">实际支付：</text>
|
||||
<text class="value price">¥{{orderInfo.order_zhe_total}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">微信支付：</text>
|
||||
<text class="value">¥{{orderInfo.price}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">钻石支付：</text>
|
||||
<text class="value">¥{{orderInfo.use_money}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">UU币支付：</text>
|
||||
<text class="value">¥{{orderInfo.use_integral}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">达达卷支付：</text>
|
||||
<text class="value">¥{{orderInfo.use_money2}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">优惠金额：</text>
|
||||
<text class="value">¥{{orderInfo.use_coupon}}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">支付时间：</text>
|
||||
<text class="value">{{orderInfo.pay_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-section" v-if="orderInfo.goods_list && orderInfo.goods_list.length > 0">
|
||||
<view class="section-title">奖品列表</view>
|
||||
<view class="prize-list">
|
||||
<view class="prize-item" v-for="(item, index) in orderInfo.goods_list" :key="index">
|
||||
<image class="prize-image" :src="item.goodslist_imgurl" mode="aspectFill"></image>
|
||||
<view class="prize-info">
|
||||
<view class="prize-title">{{item.goodslist_title}}</view>
|
||||
<view class="prize-price">¥{{item.goodslist_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="loading" v-else-if="loading">加载中...</view>
|
||||
<view class="error" v-else>订单数据加载失败</view>
|
||||
</page-container>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageContainer from '@/components/page-container/page-container.vue'
|
||||
export default {
|
||||
components: {
|
||||
PageContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderNum: '',
|
||||
orderInfo: null,
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.order_num) {
|
||||
this.orderNum = options.order_num;
|
||||
this.load();
|
||||
} else {
|
||||
this.$c.msg('订单参数缺失');
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async load() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const { status, data, msg } = await this.$request.post('order_detail', {
|
||||
order_num: this.orderNum
|
||||
});
|
||||
|
||||
if (status !== 1) {
|
||||
this.$c.msg(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
this.orderInfo = data;
|
||||
} catch (error) {
|
||||
console.error('加载订单详情失败', error);
|
||||
this.$c.msg('加载失败，请重试');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.order-info {
|
||||
padding: 30rpx;
|
||||
|
||||
.info-section {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 24rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
width: 180rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
|
||||
&.price {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prize-list {
|
||||
.prize-item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.prize-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.prize-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.prize-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.prize-price {
|
||||
font-size: 28rpx;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
160
pages/other/order_list.vue
Normal file
160
pages/other/order_list.vue
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<page-container title="订单列表" :showBack="true">
|
||||
<scroll-view scroll-y="true"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="onLoadMore"
|
||||
class="order-list">
|
||||
<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
|
||||
<view class="corner-tag">已发放到盒柜中</view>
|
||||
<view class="order-title">{{item.goods_title}}</view>
|
||||
<view class="order-info">
|
||||
<view class="order-time">{{item.pay_time}}</view>
|
||||
<view class="order-price">¥{{item.order_zhe_total}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading" v-if="loading">加载中...</view>
|
||||
<view class="no-more" v-if="!hasMore && orderList.length > 0">没有更多数据了</view>
|
||||
<view class="empty" v-if="!loading && orderList.length === 0">暂无订单数据</view>
|
||||
</scroll-view>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageContainer from '@/components/page-container/page-container.vue'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PageContainer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderList: [],
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
hasMore: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
async load() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const { status, data, msg } = await this.$request.post('order_list', {
|
||||
page: this.page,
|
||||
page_size: this.pageSize
|
||||
});
|
||||
|
||||
if (status !== 1) {
|
||||
this.$c.msg(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.page === 1) {
|
||||
this.orderList = data.list;
|
||||
} else {
|
||||
this.orderList = [...this.orderList, ...data.list];
|
||||
}
|
||||
|
||||
this.totalPages = data.total_pages;
|
||||
this.hasMore = this.page < this.totalPages;
|
||||
} catch (error) {
|
||||
console.error('加载订单列表失败', error);
|
||||
this.$c.msg('加载失败，请重试');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.refreshing = false;
|
||||
}
|
||||
},
|
||||
|
||||
async onRefresh() {
|
||||
this.refreshing = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
await this.load();
|
||||
},
|
||||
|
||||
async onLoadMore() {
|
||||
if (!this.hasMore || this.loading) return;
|
||||
|
||||
this.page++;
|
||||
await this.load();
|
||||
},
|
||||
|
||||
goOrderDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/other/order_info?order_num=${item.order_num}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.order-list {
|
||||
height: calc(100vh - 160rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
|
||||
.order-item {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.corner-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #67c23a;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
// transform: rotate(45deg) translate(20%, -50%);
|
||||
transform-origin: center;
|
||||
width: 220rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.order-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
.order-time {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.order-price {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .no-more, .empty {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
show: true,
|
||||
title: '消费记录',
|
||||
icon: 'my/s1.png',
|
||||
path: '/pages/user/xfjl'
|
||||
path: '/pages/other/order_list'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
|
|
|
|||
|
|
@ -19,176 +19,176 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
z_imgPath: this.$z_img2 + 'mine/',
|
||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||
arr: ['全部', '充值', '消费'],
|
||||
show: 1,
|
||||
listData: [],
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
z_imgPath: this.$z_img2 + 'mine/',
|
||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||
arr: ['全部', '充值', '消费'],
|
||||
show: 1,
|
||||
listData: [],
|
||||
|
||||
// 是否显示参与
|
||||
downOption: {
|
||||
auto: false
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
// setTimeout(() => {
|
||||
// this.listData=[
|
||||
// {
|
||||
// content:'哈哈哈哈哈哈哈哈哈',
|
||||
// addtime:'2333-23-23 23:23:23',
|
||||
// change_money:233
|
||||
// }
|
||||
// ]
|
||||
// }, 1000);
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
getlist(v) {
|
||||
this.show = v
|
||||
this.loadData(1)
|
||||
},
|
||||
|
||||
/*下拉刷新的回调 */
|
||||
downCallback() {
|
||||
//联网加载数据
|
||||
this.loadData(1)
|
||||
},
|
||||
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||||
upCallback(page) {
|
||||
//联网加载数据
|
||||
this.loadData(page.num)
|
||||
},
|
||||
loadData(pageNo) {
|
||||
// 模拟接口
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'profitPay',
|
||||
Loading: true,
|
||||
data: {
|
||||
page: pageNo
|
||||
// type: that.show
|
||||
},
|
||||
success(res) {
|
||||
console.log(res)
|
||||
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||||
if (pageNo == 1) {
|
||||
that.listData = res.data.data
|
||||
} else {
|
||||
that.listData = that.listData.concat(res.data.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 是否显示参与
|
||||
downOption: {
|
||||
auto: false
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
// setTimeout(() => {
|
||||
// this.listData=[
|
||||
// {
|
||||
// content:'哈哈哈哈哈哈哈哈哈',
|
||||
// addtime:'2333-23-23 23:23:23',
|
||||
// change_money:233
|
||||
// }
|
||||
// ]
|
||||
// }, 1000);
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
getlist(v) {
|
||||
this.show = v
|
||||
this.loadData(1)
|
||||
},
|
||||
|
||||
/*下拉刷新的回调 */
|
||||
downCallback() {
|
||||
//联网加载数据
|
||||
this.loadData(1)
|
||||
},
|
||||
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||||
upCallback(page) {
|
||||
//联网加载数据
|
||||
this.loadData(page.num)
|
||||
},
|
||||
loadData(pageNo) {
|
||||
// 模拟接口
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'profitPay',
|
||||
Loading: true,
|
||||
data: {
|
||||
page: pageNo
|
||||
// type: that.show
|
||||
},
|
||||
success(res) {
|
||||
console.log(res)
|
||||
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||||
if (pageNo == 1) {
|
||||
that.listData = res.data.data
|
||||
} else {
|
||||
that.listData = that.listData.concat(res.data.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupon_r>image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 10rpx;
|
||||
.coupon_r>image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_r {
|
||||
font-size: 24rpx;
|
||||
/* font-family: 'zcq'; */
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.coupon_item_1>view:nth-of-type(2) {
|
||||
font-size: 20rpx;
|
||||
color: #676767;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_item_1>view:nth-of-type(1) {
|
||||
font-size: 24rpx;
|
||||
// font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.coupon_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
// background-color: rgba(255, 255, 255, 0.08);
|
||||
// margin-top: 20rpx;
|
||||
// border-radius: 10rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.coupon_r {
|
||||
font-size: 24rpx;
|
||||
/* font-family: 'zcq'; */
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.coupon_item_1>view:nth-of-type(2) {
|
||||
font-size: 20rpx;
|
||||
color: #676767;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.coupon_item_1>view:nth-of-type(1) {
|
||||
font-size: 24rpx;
|
||||
// font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.coupon_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
// background-color: rgba(255, 255, 255, 0.08);
|
||||
// margin-top: 20rpx;
|
||||
// border-radius: 10rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.coupon {
|
||||
width: 690rpx;
|
||||
margin: 20rpx auto;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 16rpx;
|
||||
/* background: #11141D;
|
||||
.coupon {
|
||||
width: 690rpx;
|
||||
margin: 20rpx auto;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 16rpx;
|
||||
/* background: #11141D;
|
||||
box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
|
||||
*/
|
||||
box-sizing: border-box;
|
||||
/* border-radius: 20rpx; */
|
||||
}
|
||||
box-sizing: border-box;
|
||||
/* border-radius: 20rpx; */
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
background-color: #F7F7F7;
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
background-color: #F7F7F7;
|
||||
|
||||
.head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
.head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
|
||||
.header_title {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
.header_title {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
>view:nth-of-type(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
>view:nth-of-type(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
>view:nth-of-type(2) {
|
||||
width: 520rpx;
|
||||
text-align: center;
|
||||
/* margin: auto; */
|
||||
}
|
||||
|
||||
>view:nth-of-type(2) {
|
||||
width: 520rpx;
|
||||
text-align: center;
|
||||
/* margin: auto; */
|
||||
}
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user