543 lines
14 KiB
Vue
543 lines
14 KiB
Vue
<template>
|
||
<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">
|
||
<!-- 'pending'：待发货,'paid','shipped'：已发货,'delivered','cancelled'：已取消,'pre_order'：预订单状态（未选择地址和支付方式）,'completed'：已收货 -->
|
||
<view class="menu-item" :class="currentMenu==''?'active':''" @click="handleChangeMenu('')">全部订单</view>
|
||
<view class="menu-item" :class="currentMenu=='pending'?'active':''"
|
||
@click="handleChangeMenu('pending')">待发货</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>
|
||
|
||
<scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
|
||
<template v-if="currentTab==0">
|
||
111
|
||
</template>
|
||
<template v-if="currentTab==1">
|
||
<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>
|
||
</template>
|
||
<template v-if="currentTab==2">
|
||
222
|
||
</template>
|
||
</scroll-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> -->
|
||
<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>
|
||
{{detailInfo.total_rongdou}}
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="info-name">实付</view>
|
||
<view class="info-value" v-if="detailInfo.real_rongdou">
|
||
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||
{{detailInfo.real_rongdou}}
|
||
</view>
|
||
<view class="info-value" v-else-if="detailInfo.real_points">
|
||
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
|
||
{{detailInfo.real_points}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<!-- 消息提示 -->
|
||
<u-toast ref="msgRef" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
getCurrentInstance,
|
||
computed,
|
||
watch
|
||
} 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 = () => {
|
||
msgRef.value.show({
|
||
title: '暂无功能，请期待~'
|
||
})
|
||
}
|
||
|
||
const tabList = ref([{
|
||
name: '项目订单'
|
||
}, {
|
||
name: '商品订单'
|
||
}, {
|
||
name: '理财产品',
|
||
}])
|
||
const currentTab = ref(1)
|
||
const currentMenu = ref(0)
|
||
|
||
watch(currentTab, (val) => {
|
||
if (val == 0 || val === 2) {
|
||
msgRef.value.show({
|
||
title: '暂无功能，请期待~'
|
||
})
|
||
currentTab.value = 1
|
||
return
|
||
}
|
||
loadData()
|
||
})
|
||
|
||
const handleChangeMenu = (val) => {
|
||
currentMenu.value = val
|
||
clearData()
|
||
params.value.status = val
|
||
loadData()
|
||
}
|
||
|
||
// 取消订单
|
||
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: '',
|
||
status: ''
|
||
})
|
||
const loadStatus = ref('loadmore')
|
||
const maxPage = ref(1)
|
||
const orderList = ref([])
|
||
|
||
const loadData = () => {
|
||
if (currentTab.value == 0) {
|
||
// 项目订单
|
||
} else if (currentTab.value == 1) {
|
||
// 商品订单
|
||
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++
|
||
if (maxPage.value < params.value.page) {
|
||
loadStatus.value = 'nomore'
|
||
}
|
||
console.log(orderList.value);
|
||
})
|
||
} else if (currentTab.value == 2) {
|
||
// 理财产品
|
||
}
|
||
|
||
}
|
||
|
||
const clearData = () => {
|
||
loadStatus.value = 'loadmore'
|
||
params.value.page = 1
|
||
params.value.search = ''
|
||
orderList.value = []
|
||
}
|
||
|
||
onShow(() => {
|
||
clearData()
|
||
loadData()
|
||
})
|
||
|
||
onMounted(() => {
|
||
loadHeight()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-container {
|
||
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%;
|
||
padding: 20rpx 20rpx;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
|
||
.menu-item {
|
||
background: #DFDFDF;
|
||
border-radius: 12rpx;
|
||
padding: 12rpx 20rpx;
|
||
color: #676767;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.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> |