2025-10-24
我的订单
This commit is contained in:
@@ -9,8 +9,6 @@ export const mallAPI = {
|
|||||||
getCategory: () => http.get(baseUrl + '/api/category'),
|
getCategory: () => http.get(baseUrl + '/api/category'),
|
||||||
getMallDetail: (id) => http.get(baseUrl + '/api/products/' + id),
|
getMallDetail: (id) => http.get(baseUrl + '/api/products/' + id),
|
||||||
getRecommended: (id) => http.get(baseUrl + `/api/products/${id}/recommended`), // 推荐商品
|
getRecommended: (id) => http.get(baseUrl + `/api/products/${id}/recommended`), // 推荐商品
|
||||||
createOrder: (data) => http.post(baseUrl + `/api/orders/create-from-cart`, data), // 创建订单
|
|
||||||
getOrder: (orderId) => http.get(baseUrl + `/api/orders/pending-payment/${orderId}`), // 获取订单
|
|
||||||
payment: (data) => http.post(baseUrl + "/api/orders/confirm-payment", data), // 支付订单
|
payment: (data) => http.post(baseUrl + "/api/orders/confirm-payment", data), // 支付订单
|
||||||
getCouponList: (uid) => http.get(baseUrl + `/api/coupon/user/${uid}`), // 获取优惠券列表
|
getCouponList: (uid) => http.get(baseUrl + `/api/coupon/user/${uid}`), // 获取优惠券列表
|
||||||
|
|
||||||
@@ -19,6 +17,12 @@ export const mallAPI = {
|
|||||||
addCart: (data) => http.post(baseUrl + "/api/cart/add", data), // 添加购物车
|
addCart: (data) => http.post(baseUrl + "/api/cart/add", data), // 添加购物车
|
||||||
editCartQuantity: (item) => http.put(baseUrl + `/api/cart/${item.id}`, {quantity: item.quantity}), // 修改数量
|
editCartQuantity: (item) => http.put(baseUrl + `/api/cart/${item.id}`, {quantity: item.quantity}), // 修改数量
|
||||||
deleteCart: (id) => http.delete(baseUrl + `/api/cart/${id}`), // 删除
|
deleteCart: (id) => http.delete(baseUrl + `/api/cart/${id}`), // 删除
|
||||||
|
|
||||||
|
getOrderList: (params) => http.get(baseUrl + "/api/orders", params), // 获取订单列表
|
||||||
|
createOrder: (data) => http.post(baseUrl + `/api/orders/create-from-cart`, data), // 创建订单
|
||||||
|
getOrder: (orderId) => http.get(baseUrl + `/api/orders/pending-payment/${orderId}`), // 获取订单
|
||||||
|
cancelOrder: (orderId) => http.put(baseUrl + `/api/orders/${orderId}/cancel`), // 取消订单
|
||||||
|
confirmOrder: (orderId) => http.put(baseUrl + `/orders/${orderId}/confirm`), // 收货
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
10
pages.json
10
pages.json
@@ -76,13 +76,6 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/mall/mall",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "商城",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/message/chat",
|
"path": "pages/message/chat",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -148,7 +141,8 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/my/order",
|
"path": "pages/my/order",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的订单"
|
"navigationBarTitleText": "我的订单",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -118,11 +118,11 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-popup v-model="showSure" mode="bottom" length="70%" :closeable="true" blur="90%">
|
<u-popup v-model="showSure" mode="bottom" length="70%" :closeable="true">
|
||||||
<scroll-view scroll-y="true" style="height: 100%;">
|
<scroll-view scroll-y="true" style="height: 100%;">
|
||||||
<view class="sure-popup">
|
<view class="sure-popup">
|
||||||
<view class="title">{{popTitle}}</view>
|
<view class="title">{{popTitle}}</view>
|
||||||
<view class="address">
|
<!-- <view class="address">
|
||||||
<view class="text">
|
<view class="text">
|
||||||
<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
|
<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
|
||||||
<view class="u-m-l-10">张三 | </view>
|
<view class="u-m-l-10">张三 | </view>
|
||||||
@@ -132,7 +132,7 @@
|
|||||||
<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
|
<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="count-select u-p-l-10 u-p-r-10">
|
<view class="count-select u-p-l-10 u-p-r-10">
|
||||||
<view class="pre-view">
|
<view class="pre-view">
|
||||||
<u-image :src="getImageUrl(dataInfo.image_url)" height="100%" width="100%">
|
<u-image :src="getImageUrl(dataInfo.image_url)" height="100%" width="100%">
|
||||||
@@ -167,15 +167,15 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="spec-option">
|
<!-- <view class="spec-option">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
订单备注
|
订单备注
|
||||||
</view>
|
</view>
|
||||||
<view class="">
|
<view class="">
|
||||||
<u-input type="textarea" :border="true" :height="100" v-model="order.orderNote"></u-input>
|
<u-input type="textarea" :border="true" :height="100" v-model="order.orderNote"></u-input>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="spec-option">
|
<view class="submit-btn">
|
||||||
<u-button @click="handleSubmit">{{popTitle}}</u-button>
|
<u-button @click="handleSubmit">{{popTitle}}</u-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -199,7 +199,8 @@
|
|||||||
mallAPI
|
mallAPI
|
||||||
} from '../../api/mall';
|
} from '../../api/mall';
|
||||||
import {
|
import {
|
||||||
getImageUrl, arrayContainsAll
|
getImageUrl,
|
||||||
|
arrayContainsAll
|
||||||
} from '../../util/common.js';
|
} from '../../util/common.js';
|
||||||
|
|
||||||
const instance = getCurrentInstance();
|
const instance = getCurrentInstance();
|
||||||
@@ -679,6 +680,7 @@
|
|||||||
.sure-popup {
|
.sure-popup {
|
||||||
background: #F5F8FF;
|
background: #F5F8FF;
|
||||||
padding-bottom: 20rpx;
|
padding-bottom: 20rpx;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: 274;
|
font-weight: 274;
|
||||||
@@ -763,5 +765,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,336 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="mall-container">
|
|
||||||
<u-navbar :is-fixed="false" title="商城好物" :background="{background: 'transparent' }" :border-bottom="false"
|
|
||||||
back-icon-color="#fff" title-color="#fff">
|
|
||||||
<template v-slot:right>
|
|
||||||
<image src="/static/icon/zhu.png" style="width: 50rpx;height: 50rpx;margin-right: 24rpx;" mode=""></image>
|
|
||||||
</template>
|
|
||||||
</u-navbar>
|
|
||||||
|
|
||||||
<view class="search">
|
|
||||||
<u-search @search="reloadMallData" placeholder="点击查询商品" v-model="params.keyword" :show-action="false"
|
|
||||||
bg-color="#FEEFCE" </u-search>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="menu-list">
|
|
||||||
<view class="menu-item" v-for="(item, index) in menuList" @click="handleMenuChange(index)">
|
|
||||||
<view class="img-box">
|
|
||||||
<image class="img" :src="'/static/mall/'+(index+1)+'.png'" mode=""></image>
|
|
||||||
</view>
|
|
||||||
<view class="menu-text" :class="currentMenu==index?'menu-text-actice':''">
|
|
||||||
<view class="text" :class="currentMenu==index?'text-actice':''">
|
|
||||||
{{item}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="mall-list">
|
|
||||||
<u-waterfall v-model="mallList" ref="mallListRef">
|
|
||||||
<template v-slot:left="{leftList}">
|
|
||||||
<view class="mall-item u-m-r-10" v-for="(item, index) in leftList" :key="index">
|
|
||||||
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
|
|
||||||
:index="index"></u-lazy-load>
|
|
||||||
<view class="mall-title u-m-l-5 u-m-r-5">
|
|
||||||
{{item.name}}
|
|
||||||
</view>
|
|
||||||
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
|
|
||||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
|
|
||||||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
|
||||||
{{item.rongdou_price}}
|
|
||||||
</view>
|
|
||||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
|
|
||||||
<u-icon name="integral"></u-icon>
|
|
||||||
{{item.points_price}}
|
|
||||||
</view>
|
|
||||||
<view class="mall-tag u-m-l-5 u-m-r-5">
|
|
||||||
<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
|
|
||||||
融豆
|
|
||||||
</view>
|
|
||||||
<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
|
|
||||||
积分
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="mall-shop u-m-l-5 u-m-r-5">
|
|
||||||
{{item.category}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<template v-slot:right="{rightList}">
|
|
||||||
<view class="mall-item u-m-l-10" v-for="(item, index) in rightList" :key="index">
|
|
||||||
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
|
|
||||||
:index="index"></u-lazy-load>
|
|
||||||
<view class="mall-title u-m-l-5 u-m-r-5">
|
|
||||||
{{item.name}}
|
|
||||||
</view>
|
|
||||||
<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
|
|
||||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
|
|
||||||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
|
||||||
{{item.rongdou_price}}
|
|
||||||
</view>
|
|
||||||
<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
|
|
||||||
<u-icon name="integral"></u-icon>
|
|
||||||
{{item.points_price}}
|
|
||||||
</view>
|
|
||||||
<view class="mall-tag u-m-l-5 u-m-r-5">
|
|
||||||
<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
|
|
||||||
融豆
|
|
||||||
</view>
|
|
||||||
<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
|
|
||||||
积分
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="mall-shop u-m-l-5 u-m-r-5">
|
|
||||||
{{item.category}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</u-waterfall>
|
|
||||||
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, computed } from 'vue';
|
|
||||||
import { onReachBottom } from '@dcloudio/uni-app'
|
|
||||||
import { mallAPI } from '../../api/mall';
|
|
||||||
import { getImageUrl } from '../../util/common';
|
|
||||||
|
|
||||||
const params = ref({
|
|
||||||
keyword: '',
|
|
||||||
page: 1,
|
|
||||||
size: 5,
|
|
||||||
category: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const mallList = ref([])
|
|
||||||
const mallListRef = ref()
|
|
||||||
|
|
||||||
const loadStatus = ref('loadmore') // nomore
|
|
||||||
const maxPage = ref(1)
|
|
||||||
|
|
||||||
// 积分兑换
|
|
||||||
const pointsType = (val : any) => {
|
|
||||||
if (val && val.indexOf("points") >= 0) return true
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
// 融豆兑换
|
|
||||||
const RDType = (val : any) => {
|
|
||||||
if (val && val.indexOf("rongdou") >= 0) return true
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载数据
|
|
||||||
const loadMallData = () => {
|
|
||||||
if (loadStatus.value == 'nomore') return
|
|
||||||
mallAPI.getMallList(params.value).then((res) => {
|
|
||||||
mallList.value = mallList.value.concat(res.data.products)
|
|
||||||
maxPage.value = res.data.pagination.pages
|
|
||||||
params.value.page++
|
|
||||||
if (maxPage.value < params.value.page) {
|
|
||||||
loadStatus.value = 'nomore'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空选项
|
|
||||||
const clearData = () => {
|
|
||||||
params.value = {
|
|
||||||
keyword: params.value.keyword,
|
|
||||||
page: 1,
|
|
||||||
size: 5,
|
|
||||||
category: ''
|
|
||||||
}
|
|
||||||
menuCategoryMap(currentMenu.value)
|
|
||||||
maxPage.value = 1
|
|
||||||
mallList.value = []
|
|
||||||
mallListRef.value.clear()
|
|
||||||
loadStatus.value = 'loadmore'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重新加载
|
|
||||||
const reloadMallData = () => {
|
|
||||||
clearData()
|
|
||||||
loadMallData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 菜单映射
|
|
||||||
const menuCategoryMap = (val) => {
|
|
||||||
switch (val) {
|
|
||||||
case 0:
|
|
||||||
params.value.category = ''
|
|
||||||
break
|
|
||||||
case 1:
|
|
||||||
params.value.category = '服装配饰'
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
params.value.category = '日用百货'
|
|
||||||
break
|
|
||||||
case 3:
|
|
||||||
params.value.category = '数码产品'
|
|
||||||
break
|
|
||||||
case 4:
|
|
||||||
params.value.category = '美妆饰品'
|
|
||||||
break
|
|
||||||
case 5:
|
|
||||||
params.value.category = '食品饮料'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 菜单
|
|
||||||
const menuList = ["全部商品", "精美服饰", "日用百货", "电子数码", "美妆饰品", "食物饮品"]
|
|
||||||
const currentMenu = ref(0)
|
|
||||||
const handleMenuChange = (val : number) => {
|
|
||||||
currentMenu.value = val
|
|
||||||
menuCategoryMap(val)
|
|
||||||
reloadMallData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 上拉刷新
|
|
||||||
onReachBottom(() => {
|
|
||||||
loadMallData()
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loadMallData()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.mall-container {
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(180deg, #FFAE00 0%, #FFF0D0 40.87%, #FFFFFF 58.17%);
|
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
.search {
|
|
||||||
padding: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 菜单
|
|
||||||
.menu-list {
|
|
||||||
display: flex;
|
|
||||||
margin: 0 30rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-x: scroll;
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-right: 30rpx;
|
|
||||||
// border: 1px solid #FFAE00;
|
|
||||||
|
|
||||||
.img-box {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.img {
|
|
||||||
width: 66rpx;
|
|
||||||
height: 66rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-text {
|
|
||||||
font-family: Work Sans;
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: Bold;
|
|
||||||
font-size: 26rpx;
|
|
||||||
leading-trim: NONE;
|
|
||||||
line-height: 100%;
|
|
||||||
letter-spacing: -2%;
|
|
||||||
text-align: center;
|
|
||||||
color: #F7F7EF;
|
|
||||||
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-text-actice {
|
|
||||||
margin-top: 5rpx;
|
|
||||||
padding: 4rpx 10rpx 0;
|
|
||||||
color: #FA941F;
|
|
||||||
background-color: #fee9bb;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-actice {
|
|
||||||
padding: 2rpx 0rpx;
|
|
||||||
border-bottom: 4rpx solid #FA941F;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商城列表
|
|
||||||
.mall-list {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
padding: 0 32rpx 20rpx;
|
|
||||||
|
|
||||||
.mall-item {
|
|
||||||
border-radius: 16rpx;
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
box-shadow: 0px 4px 4px 0px #00000040;
|
|
||||||
padding-bottom: 10rpx;
|
|
||||||
|
|
||||||
.mall-title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
color: $u-main-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mall-price {
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: $u-type-error;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: 30rpx;
|
|
||||||
width: 30rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.mall-tag {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
.mall-tag-owner {
|
|
||||||
background-color: $u-type-error;
|
|
||||||
color: #FFFFFF;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4rpx 14rpx;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
font-size: 20rpx;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mall-tag-text {
|
|
||||||
margin-right: 10px;
|
|
||||||
border: 1px solid $u-type-primary;
|
|
||||||
color: $u-type-primary;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 4rpx 14rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.mall-shop {
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: $u-tips-color;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -80,7 +80,8 @@
|
|||||||
} from '../../api/mall.js';
|
} from '../../api/mall.js';
|
||||||
import {
|
import {
|
||||||
getImageUrl
|
getImageUrl
|
||||||
} from '../../util/common.js'
|
} from '../../util/common.js';
|
||||||
|
import {onShow} from '@dcloudio/uni-app'
|
||||||
|
|
||||||
const msgRef = ref()
|
const msgRef = ref()
|
||||||
|
|
||||||
@@ -199,10 +200,13 @@
|
|||||||
cartList.value.forEach(item => item.isCheck = false)
|
cartList.value.forEach(item => item.isCheck = false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onShow(()=>{
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadHeight()
|
loadHeight()
|
||||||
loadData()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -123,7 +123,7 @@
|
|||||||
收货地址
|
收货地址
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item">
|
<view class="menu-item" @click="handleOrder">
|
||||||
<u-image src="/static/my/07.png" width="40%" mode="widthFix"></u-image>
|
<u-image src="/static/my/07.png" width="40%" mode="widthFix"></u-image>
|
||||||
<view class="menu-text">
|
<view class="menu-text">
|
||||||
我的订单
|
我的订单
|
||||||
@@ -163,6 +163,12 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleOrder = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/my/order'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const loadData = () => {
|
const loadData = () => {
|
||||||
authAPI.me().then(res => {
|
authAPI.me().then(res => {
|
||||||
user.value = res.user
|
user.value = res.user
|
||||||
@@ -182,17 +188,17 @@
|
|||||||
url: '/pages/login/login'
|
url: '/pages/login/login'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const navigatorSrc = ()=>{
|
const navigatorSrc = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/my/getCoupons'
|
url: '/pages/my/getCoupons'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//购物车跳转
|
//购物车跳转
|
||||||
const shop_car = ()=>{
|
const shop_car = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/my/car'
|
url: '/pages/my/car'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -1,13 +1,497 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="order-container">
|
||||||
|
<u-navbar id="navBar" title="" :border-bottom="false" :background="{ background: '#F5F8FF' }">
|
||||||
|
<view class="slot-wrap">
|
||||||
|
<u-search :show-action="false" placeholder="搜索订单" v-model="params.search" bgColor="#CADBFF"
|
||||||
|
@search="handleSearch"></u-search>
|
||||||
|
</view>
|
||||||
|
<template v-slot:right>
|
||||||
|
<u-icon class="more-dot-fill" name="more-dot-fill"></u-icon>
|
||||||
|
</template>
|
||||||
|
</u-navbar>
|
||||||
|
|
||||||
|
<view class="box-tabs" id="tabsId">
|
||||||
|
<u-tabs bg-color="#F5F8FF" :show-bar="false" :list="tabList" :is-scroll="false"
|
||||||
|
v-model="currentTab"></u-tabs>
|
||||||
|
<view class="menu-list">
|
||||||
|
<view class="menu-item" :class="currentMenu==0?'active':''" @click="handleChangeMenu(0)">全部订单</view>
|
||||||
|
<view class="menu-item" :class="currentMenu==1?'active':''" @click="handleChangeMenu(1)">待付款</view>
|
||||||
|
<view class="menu-item" :class="currentMenu==2?'active':''" @click="handleChangeMenu(2)">待发货</view>
|
||||||
|
<view class="menu-item" :class="currentMenu==3?'active':''" @click="handleChangeMenu(3)">待收货</view>
|
||||||
|
<view class="menu-item" :class="currentMenu==4?'active':''" @click="handleChangeMenu(4)">退款/售后</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
|
||||||
|
<view class="order-list" v-for="orderItem in orderList">
|
||||||
|
<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 class="operate-btns">
|
||||||
|
<!-- 待发货 -->
|
||||||
|
<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"
|
||||||
|
@click="handleOrderDetail(orderItem)">查看详情</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
|
||||||
|
<view class="box-view"></view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 取消订单提示 -->
|
||||||
|
<u-modal @confirm="confirmCancel" v-model="showCancel" content="是否取消订单" :show-cancel-button="true"></u-modal>
|
||||||
|
<!-- 收货提示 -->
|
||||||
|
<u-modal @confirm="confirmReceive" v-model="showReceive" content="是否确认收到商品" :show-cancel-button="true"></u-modal>
|
||||||
|
<!-- 详情 -->
|
||||||
|
<u-modal v-model="showDetail" title="订单详情">
|
||||||
|
<view class="slot-content">
|
||||||
|
<view class="info-title">
|
||||||
|
订单信息
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">订单号</view>
|
||||||
|
<view class="info-value">{{detailInfo.order_no}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">用户名</view>
|
||||||
|
<view class="info-value">{{detailInfo.username}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">下单时间</view>
|
||||||
|
<view class="info-value">{{detailInfo.created_at}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">更新时间</view>
|
||||||
|
<view class="info-value">{{detailInfo.updated_at}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">订单状态</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=='shipped'" text="已发货"></u-tag>
|
||||||
|
<u-tag v-if="detailInfo.status=='cancelled'" text="已取消"></u-tag>
|
||||||
|
<u-tag v-if="detailInfo.status=='pre_order'" text="预订单"></u-tag>
|
||||||
|
<u-tag v-if="detailInfo.status=='completed'" text="已收货"></u-tag>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="detailInfo.address">
|
||||||
|
<view class="info-name">收货信息</view>
|
||||||
|
<view class="info-value">
|
||||||
|
{{detailInfo.address.recipient_name + " " + detailInfo.address.detail_address}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-title">
|
||||||
|
商品信息
|
||||||
|
</view>
|
||||||
|
<view class="order-item" v-for="item in detailInfo.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 class="info-title">
|
||||||
|
费用明细
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">商品总计</view>
|
||||||
|
<view class="info-value">
|
||||||
|
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||||||
|
{{allPay}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<view class="info-name">实付</view>
|
||||||
|
<view class="info-value">
|
||||||
|
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||||||
|
{{detailInfo.total_rongdou}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-modal>
|
||||||
|
<!-- 消息提示 -->
|
||||||
|
<u-toast ref="msgRef" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onMounted,
|
||||||
|
getCurrentInstance,
|
||||||
|
computed
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onLoad,
|
||||||
|
onShow
|
||||||
|
} from '@dcloudio/uni-app'
|
||||||
|
import {
|
||||||
|
mallAPI
|
||||||
|
} from '../../api/mall';
|
||||||
|
import {
|
||||||
|
getImageUrl
|
||||||
|
} from '../../util/common.js'
|
||||||
|
|
||||||
|
const msgRef = ref()
|
||||||
|
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
const scrollHeight = ref(0)
|
||||||
|
const loadHeight = () => {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success(res) {
|
||||||
|
let screenHeight = res.screenHeight
|
||||||
|
uni.createSelectorQuery().in(instance.proxy).select("#navBar").boundingClientRect((data) => {
|
||||||
|
scrollHeight.value = screenHeight - data.height
|
||||||
|
}).exec()
|
||||||
|
uni.createSelectorQuery().in(instance.proxy).select("#tabsId").boundingClientRect((
|
||||||
|
data) => {
|
||||||
|
scrollHeight.value = scrollHeight.value - data.height
|
||||||
|
}).exec()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const navBarTitle = {
|
||||||
|
fontWeight: '510',
|
||||||
|
fontStyle: 'Medium',
|
||||||
|
fontSize: '40rpx',
|
||||||
|
lineHeight: '52px'
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabList = ref([{
|
||||||
|
name: '项目订单'
|
||||||
|
}, {
|
||||||
|
name: '商品订单'
|
||||||
|
}, {
|
||||||
|
name: '理财产品',
|
||||||
|
}])
|
||||||
|
const currentTab = ref(0)
|
||||||
|
const currentMenu = ref(0)
|
||||||
|
|
||||||
|
const handleChangeMenu = (val) => {
|
||||||
|
currentMenu.value = val
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消订单
|
||||||
|
const showCancel = ref(false)
|
||||||
|
const cancelId = ref()
|
||||||
|
|
||||||
|
const handelCancel = (item) => {
|
||||||
|
showCancel.value = true
|
||||||
|
cancelId.value = item.id
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmCancel = () => {
|
||||||
|
mallAPI.cancelOrder(cancelId.value).then(res => {
|
||||||
|
msgRef.value.show({
|
||||||
|
title: '取消成功',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
clearData()
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收货
|
||||||
|
const showReceive = ref(false)
|
||||||
|
const receiveId = ref()
|
||||||
|
const handleReceive = (item) => {
|
||||||
|
showReceive.value = true
|
||||||
|
receiveId.value = item.id
|
||||||
|
}
|
||||||
|
const confirmReceive = () => {
|
||||||
|
mallAPI.confirmOrder(receiveId.value).then(res => {
|
||||||
|
msgRef.value.show({
|
||||||
|
title: '收货成功',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
clearData()
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 进入支付页面
|
||||||
|
const handlePay = (item) => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/home/pay?preOrderId=' + item.id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 详情
|
||||||
|
const showDetail = ref(false)
|
||||||
|
const detailInfo = ref({})
|
||||||
|
const allPay = computed(()=>{
|
||||||
|
let data = 0
|
||||||
|
detailInfo.value.items.forEach(item=>{
|
||||||
|
data += item.rongdou_price * item.quantity
|
||||||
|
})
|
||||||
|
return data
|
||||||
|
})
|
||||||
|
// 查看详情
|
||||||
|
const handleOrderDetail = (item) => {
|
||||||
|
showDetail.value = true
|
||||||
|
detailInfo.value = item
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const params = ref({
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
search: '',
|
||||||
|
})
|
||||||
|
const loadStatus = ref('loadmore')
|
||||||
|
const maxPage = ref(1)
|
||||||
|
const orderList = ref([])
|
||||||
|
|
||||||
|
const loadData = () => {
|
||||||
|
if (loadStatus.value == 'nomore') return
|
||||||
|
mallAPI.getOrderList(params.value).then(res => {
|
||||||
|
orderList.value = orderList.value.concat(res.data.orders)
|
||||||
|
maxPage.value = res.data.pagination.pages
|
||||||
|
params.value.page++
|
||||||
|
console.log(orderList.value);
|
||||||
|
if (maxPage.value < params.value.page) {
|
||||||
|
loadStatus.value = 'nomore'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearData = () => {
|
||||||
|
loadStatus.value = 'loadmore'
|
||||||
|
params.value.page = 1
|
||||||
|
params.value.search = ''
|
||||||
|
orderList.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
clearData()
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadHeight()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
|
.order-container {
|
||||||
</style>
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--Color, #E4ECFF);
|
||||||
|
background-blend-mode: lighten;
|
||||||
|
|
||||||
|
.more-dot-fill {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-tabs {
|
||||||
|
background: #F5F8FF;
|
||||||
|
|
||||||
|
.menu-list {
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
background: #DFDFDF;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 12rpx 20rpx;
|
||||||
|
color: #676767;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #93B2FF80;
|
||||||
|
color: #305DEF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scroll-view {
|
||||||
|
|
||||||
|
.order-list {
|
||||||
|
background: #F5F8FF;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.order-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.item-left {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-right {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate-btns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.operate-btn {
|
||||||
|
margin: 10rpx;
|
||||||
|
width: 136rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
background: #D4D9EA;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-view {
|
||||||
|
height: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-content {
|
||||||
|
padding: 10rpx 20rpx 20rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
margin: 30prx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
|
||||||
|
.info-name {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
max-width: 50%;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.order-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.item-left {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-right {
|
||||||
|
flex: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user