0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
pages/order/my/aftersale/apply.vue Normal file
View File

@@ -0,0 +1,333 @@
<!-- 售后申请 -->
<template>
<s-layout title="取消订单">
<!-- 售后商品 -->
<view class="goods-box">
<s-goods-item
:img="state.item.picUrl"
:title="state.item.spuName"
:skuText="state.item.properties?.map((property) => property.valueName).join(' ')"
:price="state.item.price"
:num="state.item.count"
/>
</view>
<uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
<!-- 退款金额 -->
<view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
<text class="item-title">退回余额</text>
<view class="ss-flex refund-cause ss-col-center">
<text class="ss-m-r-20">￥{{ fen2yuan(state.item.payPrice) }}</text>
</view>
</view>
<!-- 申请原因 -->
<!-- <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
<text class="item-title">取消原因</text>
<view class="ss-flex refund-cause ss-col-center">
<text class="ss-m-r-20" v-if="formData.applyReason">{{ formData.applyReason }}</text>
<text class="ss-m-r-20" v-else>请选择取消原因~</text>
<text class="cicon-forward" style="height: 28rpx"></text>
</view>
</view> -->
<!-- 留言 -->
<view class="refund-item">
<view class="item-title ss-m-b-20">取消原因</view>
<view class="describe-box">
<uni-easyinput
:inputBorder="false"
class="describe-content"
type="textarea"
maxlength="120"
autoHeight
v-model="formData.applyDescription"
placeholder="客官~请描述您遇到的问题，建议上传照片"
/>
<!-- TODO 芋艿：上传的测试 -->
<view class="upload-img">
<s-uploader
v-model:url="formData.images"
fileMediatype="image"
limit="9"
mode="grid"
:imageStyles="{ width: '168rpx', height: '168rpx' }"
/>
</view>
</view>
</view>
</uni-forms>
<!-- 底部按钮 -->
<su-fixed bottom placeholder>
<view class="foot-wrap">
<view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
<button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">
联系客服
</button>
<button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
</view>
</view>
</su-fixed>
<!-- 申请原因弹窗 -->
<su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
<view class="modal-box page_box">
<view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">
取消原因
</view>
<view class="modal-content content_box">
<radio-group @change="onChange">
<label class="radio ss-flex ss-col-center" v-for="item in state.reasonList" :key="item">
<view class="ss-flex-1 ss-p-20">{{ item }}</view>
<radio
:value="item"
color="var(--ui-BG-Main)"
:checked="item === state.currentValue"
/>
</label>
</radio-group>
</view>
<view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
<button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">
确定
</button>
</view>
</view>
</su-popup>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import OrderApi from '@/sheep/api/trade/order';
import TradeConfigApi from '@/sheep/api/trade/config';
import { fen2yuan } from '@/sheep/hooks/useGoods';
import AfterSaleApi from '@/sheep/api/trade/afterSale';
import { WxaSubscribeTemplate } from '@/sheep/util/const';
const form = ref(null);
const state = reactive({
orderId: 0, // 订单编号
itemId: 0, // 订单项编号
order: {}, // 订单
item: {}, // 订单项
config: {}, // 交易配置
// 售后类型
wayList: [
{
text: '仅退款',
value: '10',
},
{
text: '退款退货',
value: '20',
},
],
reasonList: [], // 可选的申请原因数组
showModal: false, // 是否显示申请原因弹窗
currentValue: '', // 当前选择的售后原因
});
let formData = reactive({
way: '',
applyReason: '',
applyDescription: '',
images: [],
});
const rules = reactive({});
// 提交表单
async function submit() {
let data = {
orderItemId: state.itemId,
refundPrice: state.item.payPrice,
...formData,
};
const { code } = await AfterSaleApi.createAfterSale(data);
if (code === 0) {
uni.showToast({
title: '取消成功',
});
sheep.$router.go('/pages/order/my/list');
}
}
// 选择售后类型
function onRefundChange(e) {
formData.way = e;
// 清理理由
state.reasonList =
formData.way === '10'
? state.config.afterSaleRefundReasons || []
: state.config.afterSaleReturnReasons || [];
formData.applyReason = '';
state.currentValue = '';
}
// 选择申请原因
function onChange(e) {
state.currentValue = e.detail.value;
}
// 确定
function onReason() {
formData.applyReason = state.currentValue;
state.showModal = false;
}
onLoad(async (options) => {
// 解析参数
if (!options.orderId || !options.itemId) {
sheep.$helper.toast(`缺少订单信息，请检查`);
return;
}
state.orderId = options.orderId;
state.itemId = parseInt(options.itemId);
// 读取订单信息
const { code, data } = await OrderApi.getOrder(state.orderId);
if (code !== 0) {
return;
}
state.order = data;
state.item = data.items.find((item) => item.id === state.itemId) || {};
// 设置选项
if (state.order.status === 10) {
state.wayList.splice(1, 1);
}
// 读取配置
state.config = (await TradeConfigApi.getTradeConfig()).data;
onRefundChange("10");
});
</script>
<style lang="scss" scoped>
.item-title {
font-size: 30rpx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
// margin-bottom: 20rpx;
}
// 售后项目
.refund-item {
background-color: #fff;
border-bottom: 1rpx solid #f5f5f5;
padding: 30rpx;
&:last-child {
border: none;
}
// 留言
.describe-box {
width: 690rpx;
background: rgba(249, 250, 251, 1);
padding: 30rpx;
box-sizing: border-box;
border-radius: 20rpx;
.describe-content {
height: 200rpx;
font-size: 24rpx;
font-weight: 400;
color: #333;
}
}
// 联系方式
.input-box {
height: 84rpx;
background: rgba(249, 250, 251, 1);
border-radius: 20rpx;
}
}
.goods-box {
background: #fff;
padding: 20rpx;
margin-bottom: 20rpx;
}
.foot-wrap {
height: 100rpx;
width: 100%;
}
.foot_box {
height: 100rpx;
background-color: #fff;
.sub-btn {
width: 336rpx;
line-height: 74rpx;
border-radius: 38rpx;
color: rgba(#fff, 0.9);
font-size: 28rpx;
}
.contcat-btn {
width: 336rpx;
line-height: 74rpx;
background: rgba(238, 238, 238, 1);
border-radius: 38rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
}
.modal-box {
width: 750rpx;
// height: 680rpx;
border-radius: 30rpx 30rpx 0 0;
background: #fff;
.modal-head {
height: 100rpx;
font-size: 30rpx;
}
.modal-content {
font-size: 28rpx;
}
.modal-foot {
.close-btn {
width: 710rpx;
line-height: 80rpx;
border-radius: 40rpx;
color: rgba(#fff, 0.9);
}
}
}
.success-box {
width: 600rpx;
padding: 90rpx 0 64rpx 0;
.cicon-check-round {
font-size: 96rpx;
color: #04b750;
}
.success-title {
font-weight: 500;
color: #333333;
font-size: 32rpx;
}
.success-btn {
width: 492rpx;
height: 70rpx;
background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
border-radius: 35rpx;
}
}
</style>

184
pages/order/my/aftersale/list.vue Normal file
View File

@@ -0,0 +1,184 @@
<!-- 售后列表 -->
<template>
<s-layout title="退款列表">
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
<!-- 列表 -->
<view v-if="state.pagination.total > 0">
<view
class="list-box ss-m-y-20"
v-for="order in state.pagination.list"
:key="order.id"
@tap="sheep.$router.go('/pages/clerk/detail/index', { id: order.spuId })"
>
<view class="order-head ss-flex ss-col-center ss-row-between">
<text class="no">服务单号：{{ order.no }}</text>
<text class="state">{{ formatAfterSaleStatus(order) }}</text>
</view>
<s-goods-item
:img="order.picUrl"
:title="order.spuName"
:skuText="order.properties.map((property) => property.valueName).join(' ')"
:price="order.refundPrice"
/>
</view>
</view>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadMore"
/>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import _ from 'lodash-es';
import {
formatAfterSaleStatus,
formatAfterSaleStatusDescription,
handleAfterSaleButtons,
} from '@/sheep/hooks/useGoods';
import AfterSaleApi from '@/sheep/api/trade/afterSale';
import { resetPagination } from '@/sheep/util';
const state = reactive({
currentTab: 0,
showApply: false,
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 10,
},
loadStatus: '',
});
// TODO 芋艿：优化点，增加筛选
const tabMaps = [
{
name: '全部',
value: 'all',
},
// {
// name: '申请中',
// value: 'nooper',
// },
// {
// name: '处理中',
// value: 'ing',
// },
// {
// name: '已完成',
// value: 'completed',
// },
// {
// name: '已拒绝',
// value: 'refuse',
// },
];
// 切换选项卡
function onTabsChange(e) {
resetPagination(state.pagination);
state.currentTab = e.index;
getOrderList();
}
// 获取售后列表
async function getOrderList() {
state.loadStatus = 'loading';
let { data, code } = await AfterSaleApi.getAfterSalePage({
// type: tabMaps[state.currentTab].value,
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
if (code !== 0) {
return;
}
data.list.forEach((order) => handleAfterSaleButtons(order));
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
function onApply(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消此申请吗？',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await AfterSaleApi.cancelAfterSale(orderId);
if (code === 0) {
resetPagination(state.pagination);
await getOrderList();
}
},
});
}
onLoad(async (options) => {
if (options.type) {
state.currentTab = options.type;
}
await getOrderList();
});
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getOrderList();
}
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
</script>
<style lang="scss" scoped>
.list-box {
background-color: #fff;
.order-head {
padding: 0 25rpx;
height: 77rpx;
}
.apply-box {
height: 82rpx;
.title {
font-size: 24rpx;
}
.value {
font-size: 22rpx;
color: $dark-6;
}
}
.tool-btn-box {
height: 100rpx;
.tool-btn {
width: 160rpx;
height: 60rpx;
background: #f6f6f6;
border-radius: 30rpx;
font-size: 26rpx;
font-weight: 400;
}
}
}
</style>

130
pages/order/my/components/layout.vue Normal file
View File

@@ -0,0 +1,130 @@
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
<template>
<view class="content">
<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
<z-paging ref="paging" :auto="false" use-virtual-list :force-close-inner-list="true" :paging-style="{ paddingTop: 0 + 'px', paddingBottom: paddingBottom + 'rpx' }" cell-height-mode="dynamic" @scroll="scroll" @virtualListChange="virtualListChange" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
<template #top>
<su-navbar :title="title" statusBar></su-navbar>
<tab-box :tabList="tabList" :currentValue="currentIndex" @change="tabChange"></tab-box>
</template>
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
<order-list @onCancel="onCancel" :virtualList="virtualList"></order-list>
</z-paging>
</view>
</template>
<script>
import TabBox from '@/pages/order/my/components/tabBox.vue';
import OrderList from '@/pages/order/my/components/orderList.vue';
import OrderApi from '@/sheep/api/trade/order';
import {
formatMyOrderStatus,
handleMyOrderButtons,
fen2yuan,
} from '@/sheep/hooks/useGoods';
export default {
components: {
TabBox,
OrderList,
},
props: {
title: {
type: String,
default: '我的订单',
},
},
data() {
return {
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
virtualList: [],
scrollTop: 0,
paddingTop: 0,
paddingBottom: 0,
height: 0,
tabList: [{
name: '全部',
}, {
name: '待付款',
value: 0,
}, {
name: '待服务',
value: 10,
}, {
name: '服务中',
value: 20,
}, {
name: '待评价',
value: 30,
}],
currentIndex: 0,
}
},
methods: {
scroll(e) {
this.scrollTop = e.detail.scrollTop;
},
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
virtualListChange(vList) {
this.virtualList = vList;
},
queryList(pageNo, pageSize) {
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
const params = {
pageNo: pageNo,
pageSize: pageSize,
status: this.tabList[this.currentIndex].value,
commentStatus: this.tabList[this.currentIndex].value === 30 ? false : null,
}
OrderApi.getOrderPage(params).then(res => {
// 将请求的结果数组传递给z-paging
res.data.list.forEach((order) => handleMyOrderButtons(order));
res.data.list.forEach((order) => formatMyOrderStatus(order));
res.data.list.forEach((order) => order.payPrice = fen2yuan(order.payPrice));
this.$refs.paging.complete(res.data.list);
}).catch(res => {
// 如果请求失败写this.$refs.paging.complete(false);
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
})
},
tabChange(e) {
this.currentIndex = e;
this.$refs.paging.reload();
},
// 取消订单
async onCancel(orderId) {
var that = this;
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await OrderApi.cancelOrder(orderId);
if (code === 0) {
that.$refs.paging.reload();
}
},
});
}
}
}
</script>
<style lang="scss" scoped>
</style>

219
pages/order/my/components/orderList.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<view @click="onOrderDetail(order.id)" :id="`zp-id-${order.zp_index}`" :key="order.zp_index" v-for="(order,index) in orderList" class="order-card">
<view class="no-box">
<view class="order-no">
<u-icon name="order"></u-icon>
<text class="number">{{ order.no }}</text>
</view>
<view class="status">{{order.statusStr}}</view>
</view>
<view class="main-box" v-for="item in order.items" :key="item.id">
<view @tap.stop="onBuy(item.spuId)">
<u-avatar size="100" :src="item.avatar"></u-avatar>
</view>
<view class="right-box">
<view class="nickname-box">
<view class="nickname" v-if="item.nickname">{{item.nickname}}</view>
<view class="nickname" v-else>待接单..</view>
<view class="info">订单时间：{{order.createTimeStr}}</view>
<view class="info">服务内容：{{item.spuName}} {{item.properties.map((property) => property.valueName).join(' ')}}×{{item.count}}</view>
<view class="info">开始服务时间：{{order.deliveryTimeStr}}</view>
<view class="info">
<text>剩余时间：</text>
<view v-if="order.receiveTime">
<text v-if="order.end">已结束</text>
<view v-else>
<u-count-down :timestamp="order.timestamp" format="DD天HH时mm分ss秒" @end="order.end = true"></u-count-down>
</view>
</view>
<text v-else>暂未接单</text>
</view>
<view class="info" v-if="order.status == 40">取消原因：{{order.cancelReason}}</view>
</view>
<view class="price-box">
<text class="price">{{order.payPrice}}</text>
<text>/钻</text>
</view>
</view>
</view>
<view class="bottom-box">
<view class="btn-box">
<view v-if="order.buttons.includes('detail')" @tap.stop="onOrderDetail(order.id)" class="btn">查看详情</view>
<view v-if="order.buttons.includes('unpay')" @tap.stop="onOrderDetail(order.id)" class="btn">取消订单</view>
<view v-if="order.buttons.includes('cancel')" @tap.stop="onCancel(order.id)" class="btn">取消订单</view>
<view v-if="order.buttons.includes('buy') && order.items[0].spuId" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">再来一单</view>
<view v-if="order.buttons.includes('comment')" @tap.stop="onComment(order.id)" class="btn active">评价</view>
<view v-if="order.buttons.includes('pay')" @tap.stop="onPay(order.payOrderId)" class="btn active">继续支付</view>
</view>
</view>
</view>
</template>
<script>
import sheep from '@/sheep';
import dayjs from 'dayjs';
export default {
components: {
},
props: {
virtualList: {
type: Array,
default: [],
},
},
emits: ["onCancel"],
data() {
return {
}
},
computed: {
orderList() {
this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss'));
this.virtualList.forEach((order) => order.deliveryTimeStr = order.deliveryTime ? sheep.$helper.timeFormat(order.deliveryTime, 'yyyy-mm-dd hh:MM:ss') : '');
this.virtualList.forEach((order) => order.timestamp = order.receiveTime ? sheep.$helper.parseTimeData(order.receiveTime) : 0);
return this.virtualList;
},
},
methods: {
// 订单详情
onOrderDetail(id) {
sheep.$router.go('/pages/order/my/detail', {
id,
});
},
onCancel(orderId) {
this.$emit('onCancel', orderId);
},
onBuy(id) {
if(id){
sheep.$router.go('/pages/clerk/detail/index', {
id,
});
}
},
// 评价
onComment(id) {
sheep.$router.go('/pages/goods/comment/worker/add', {
id,
});
},
// 继续支付
onPay(payOrderId) {
sheep.$router.go('/pages/pay/worker/index', {
id: payOrderId,
});
}
}
}
</script>
<style lang="scss" scoped>
.order-card {
padding: 10px;
margin-top: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 1;
.no-box {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
padding-bottom: 10px;
color: rgb(100, 101, 102);
.order-no {
.number {
margin-left: 5px;
font-size: 22rpx;
}
}
.status {
font-size: 22rpx;
}
}
.main-box {
display: flex;
padding: 10px 0;
border-top: 1px solid #fbf0f0;
border-bottom: 1px solid #fbf0f0;
margin-bottom: 10px;
.right-box {
display: flex;
justify-content: space-between;
flex: 1;
align-items: center;
margin-left: 10px;
.nickname {
font-size: 12px;
font-weight: bold;
margin-bottom: 10px;
}
.info {
font-size: 22rpx;
color: rgb(100, 101, 102);
line-height: 22rpx;
margin-bottom: 5px;
display: flex;
align-items: center;
.weixin {
margin-right: 5px;
}
}
.price-box {
font-size: 22rpx;
color: rgb(100, 101, 102);
.price {
font-size: 34rpx;
font-weight: bold;
color: var(--ui-BG-Main);
}
}
}
}
.bottom-box {
display: flex;
justify-content: flex-end;
.btn-box {
display: flex;
align-items: center;
}
.btn {
background-color: #ddd;
color: rgb(100, 101, 102);
font-size: 22rpx;
border-radius: 40px;
padding: 5px 10px;
margin-left: 10px;
min-width: 140rpx;
display: flex;
justify-content: center;
}
.active {
background-color: var(--ui-BG-Main);
color: #fff;
}
}
}
</style>

47
pages/order/my/components/tabBox.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<view>
<u-tabs :list="tabList" bg-color="#fff" font-size="28" active-color="var(--ui-BG-Main)" :is-scroll="false" v-model="current" @change="change"></u-tabs>
</view>
</template>
<script>
export default {
components: {
},
props: {
currentValue: 0,
tabList: {
type: Array,
default: [],
},
},
data() {
return {
}
},
computed: {
current: {
get() {
return this.currentValue;
},
set(newValue) {
}
},
},
methods: {
change(index) {
this.$emit('change', index);
},
}
}
</script>
<style lang="scss" scoped>
.tab-box {
background-color: #fff;
padding: 5px 0;
}
</style>

426
pages/order/my/confirm.vue Normal file
View File

@@ -0,0 +1,426 @@
<template>
<s-layout title="确认订单">
<!-- 商品信息 -->
<view class="order-card-box ss-m-b-14">
<s-goods-item
v-for="item in state.orderInfo.items"
:key="item.skuId"
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
marginBottom="10"
/>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="请输入备注内容"
v-model="state.orderPayload.remark"
:inputBorder="false"
:clearable="false"
/>
</view>
</view>
</view>
<!-- 价格信息 -->
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
<view class="total-box-content border-bottom">
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">商品金额</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">
￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
</text>
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 5"
>
<view class="item-title">积分抵扣</view>
<view class="ss-flex ss-col-center">
{{ state.pointStatus ? '剩余积分' : '当前积分' }}
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
/>
<text class="item-value ss-m-r-24">
{{ state.pointStatus ? state.orderInfo.totalPoint - state.orderInfo.usePoint : (state.orderInfo.totalPoint || 0) }}
</text>
<checkbox-group @change="changeIntegral">
<checkbox :checked='state.pointStatus' :disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
</checkbox-group>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">你的微信号</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="请输入正确的微信号"
v-model="addressState.receiverName"
:inputBorder="false"
:clearable="false"
/>
</view>
</view>
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0"
>
<view class="item-title">优惠券</view>
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
<text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
</text>
<text
class="item-value"
:class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'"
v-else
>
{{
state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券'
}}
</text>
<text class="_icon-forward item-icon" />
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.discountPrice > 0"
>
<view class="item-title">活动优惠</view>
<view class="ss-flex ss-col-center">
<!-- @tap="state.showDiscount = true" TODO puhui999：【折扣】后续要把优惠信息打进去 -->
<text class="item-value text-red">
-￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
</text>
<text class="_icon-forward item-icon" />
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.vipPrice > 0"
>
<view class="item-title">会员优惠</view>
<view class="ss-flex ss-col-center">
<text class="item-value text-red">
-￥{{ fen2yuan(state.orderInfo.price.vipPrice) }}
</text>
</view>
</view>
</view>
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
<view class="total-num ss-m-r-20">
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
</view>
<view>合计：</view>
<view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}</view>
</view>
</view>
<!-- 选择优惠券弹框 -->
<s-coupon-select
v-model="state.couponInfo"
:show="state.showCoupon"
@confirm="onSelectCoupon"
@close="state.showCoupon = false"
/>
<!-- 满额折扣弹框 TODO @puhui999：【折扣】后续要把优惠信息打进去 -->
<s-discount-list
v-model="state.orderInfo"
:show="state.showDiscount"
@close="state.showDiscount = false"
/>
<!-- 底部 -->
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
<view class="total-box-footer ss-flex ss-col-center">
<view class="total-num ss-font-30 text-red">
￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
</view>
</view>
<button
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
@tap="onConfirm"
>
提交订单
</button>
</view>
</su-fixed>
</s-layout>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import AddressSelection from '@/pages/order/addressSelection.vue';
import sheep from '@/sheep';
import OrderApi from '@/sheep/api/trade/order';
import CouponApi from '@/sheep/api/promotion/coupon';
import { fen2yuan } from '@/sheep/hooks/useGoods';
const state = reactive({
orderPayload: {},
orderInfo: {
items: [], // 商品项列表
price: {}, // 价格信息
},
showCoupon: false, // 是否展示优惠劵
couponInfo: [], // 优惠劵列表
showDiscount: false, // 是否展示营销活动
// ========== 积分 ==========
pointStatus: false, //是否使用积分
});
const addressState = ref({
addressInfo: {}, // 选择的收货地址
deliveryType: 1, // 收货方式：1-快递配送，2-门店自提
isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入
pickUpInfo: {}, // 选择的自提门店信息
receiverName: '', // 收件人名称
receiverMobile: '', // 收件人手机
});
// ========== 积分 ==========
/**
* 使用积分抵扣
*/
const changeIntegral = async () => {
state.pointStatus = !state.pointStatus;
await getOrderInfo();
};
// 选择优惠券
async function onSelectCoupon(couponId) {
state.orderPayload.couponId = couponId;
await getOrderInfo();
state.showCoupon = false;
}
// 提交订单
function onConfirm() {
if (addressState.value.receiverName === '') {
sheep.$helper.toast('请填写正确的微信号');
return;
}
submitOrder();
}
// 创建订单&跳转
async function submitOrder() {
const { code, data } = await OrderApi.createWorkerOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
remark: state.orderPayload.remark,
deliveryType: addressState.value.deliveryType,
addressId: addressState.value.addressInfo.id, // 收件地址编号
pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
pointStatus: state.pointStatus,
combinationActivityId: state.orderPayload.combinationActivityId,
combinationHeadId: state.orderPayload.combinationHeadId,
seckillActivityId: state.orderPayload.seckillActivityId,
clerkId: state.orderPayload.clerkId,
});
if (code !== 0) {
return;
}
// 更新购物车列表，如果来自购物车
if (state.orderPayload.items[0].cartId > 0) {
sheep.$store('cart').getList();
}
// 跳转到支付页面
sheep.$router.redirect('/pages/pay/index', {
id: data.payOrderId,
});
}
// 检查库存 & 计算订单价格
async function getOrderInfo() {
// 计算价格
const { data, code } = await OrderApi.clerkOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
deliveryType: addressState.value.deliveryType,
addressId: addressState.value.addressInfo.id, // 收件地址编号
pickUpStoreId: addressState.value.pickUpInfo.id,//自提门店编号
receiverName: addressState.value.receiverName,// 选择门店自提时，该字段为联系人名
receiverMobile: addressState.value.receiverMobile,// 选择门店自提时，该字段为联系人手机
pointStatus: state.pointStatus,
combinationActivityId: state.orderPayload.combinationActivityId,
combinationHeadId: state.orderPayload.combinationHeadId,
seckillActivityId: state.orderPayload.seckillActivityId,
clerkId: state.orderPayload.clerkId,
});
if (code !== 0) {
return;
}
state.orderInfo = data;
// 设置收货地址
if (state.orderInfo.address) {
addressState.value.addressInfo = state.orderInfo.address;
}
}
// 获取可用优惠券
async function getCoupons() {
const { code, data } = await CouponApi.getMatchCouponList(
state.orderInfo.price.payPrice,
state.orderInfo.items.map((item) => item.spuId),
state.orderPayload.items.map((item) => item.skuId),
state.orderPayload.items.map((item) => item.categoryId),
);
if (code === 0) {
state.couponInfo = data;
}
}
onLoad(async (options) => {
if (!options.data) {
sheep.$helper.toast('参数不正确，请检查！');
return;
}
state.orderPayload = JSON.parse(options.data);
await getOrderInfo();
await getCoupons();
});
// 使用 watch 监听地址和配送方式的变化
watch(addressState, async (newAddress, oldAddress) => {
// 如果收货地址或配送方式有变化，则重新计算价格
if (newAddress.addressInfo.id !== oldAddress.addressInfo.id || newAddress.deliveryType !== oldAddress.deliveryType) {
await getOrderInfo();
}
});
</script>
<style lang="scss" scoped>
:deep() {
.uni-input-wrapper {
width: 320rpx;
}
.uni-easyinput__content-input {
font-size: 28rpx;
height: 72rpx;
text-align: right !important;
padding-right: 0 !important;
.uni-input-input {
font-weight: 500;
color: #333333;
font-size: 26rpx;
height: 32rpx;
margin-top: 4rpx;
}
}
.uni-easyinput__content {
display: flex !important;
align-items: center !important;
justify-content: right !important;
}
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.order-item {
height: 80rpx;
.item-title {
font-size: 28rpx;
font-weight: 400;
}
.item-value {
font-size: 28rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.text-disabled {
color: #bbbbbb;
}
.item-icon {
color: $dark-9;
}
.remark-input {
text-align: right;
}
.item-placeholder {
color: $dark-9;
font-size: 26rpx;
text-align: right;
}
}
.total-box-footer {
height: 90rpx;
.total-num {
color: #333333;
font-family: OPPOSANS;
}
}
.footer-box {
height: 100rpx;
.submit-btn {
width: 240rpx;
height: 70rpx;
font-size: 28rpx;
font-weight: 500;
.goto-pay-text {
line-height: 28rpx;
}
}
.cancel-btn {
width: 240rpx;
height: 80rpx;
font-size: 26rpx;
background-color: #e5e5e5;
color: $dark-9;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.subtitle {
font-size: 28rpx;
color: #999999;
}
.cicon-checkbox {
font-size: 36rpx;
color: var(--ui-BG-Main);
}
.cicon-box {
font-size: 36rpx;
color: #999999;
}
</style>

580
pages/order/my/detail.vue Normal file
View File

@@ -0,0 +1,580 @@
<!-- 订单详情 -->
<template>
<s-layout title="订单详情" class="index-wrap" navbar="inner">
<!-- 订单状态 TODO -->
<view
class="state-box ss-flex-col ss-col-center ss-row-right"
:style="[
{
marginTop: '-' + Number(statusBarHeight + 88 + 22) + 'rpx',
paddingTop: Number(statusBarHeight + 88 + 22) + 'rpx',
},
]"
>
<view class="ss-flex ss-m-t-32 ss-m-b-20">
<image
v-if="
state.orderInfo.status_code == 'unpaid' ||
state.orderInfo.status === 10 || // 待发货
state.orderInfo.status_code == 'nocomment'
"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
>
</image>
<image
v-if="
state.orderInfo.status_code == 'completed' ||
state.orderInfo.status_code == 'refund_agree'
"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_success.png')"
>
</image>
<image
v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_close.png')"
>
</image>
<image
v-if="state.orderInfo.status_code == 'noget'"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_express.png')"
>
</image>
<view class="ss-font-30">{{ formatWorkerOrderStatus(state.orderInfo) }}</view>
</view>
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">
{{ formatMyOrderStatusDescription(state.orderInfo) }}
</view>
</view>
<!-- 收货地址 -->
<view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
<view class="ss-flex ss-col-center">
<text class="address-username">
{{ state.orderInfo.receiverName }}
</text>
<text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
</view>
<view class="address-detail">
{{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
</view>
</view>
<view
class="detail-goods"
:style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]"
>
<!-- 订单信 -->
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
<view class="order-card">
<s-goods-item
@tap="onGoodsDetail(item.spuId)"
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
>
<template #tool>
<view class="ss-flex">
<button
class="ss-reset-button apply-btn"
v-if="[10].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
@tap.stop="
sheep.$router.go('/pages/order/my/aftersale/apply', {
orderId: state.orderInfo.id,
itemId: item.id,
})
"
>
确认取消
</button>
</view>
</template>
<template #priceSuffix>
<button class="ss-reset-button tag-btn" v-if="item.status_text">
{{ item.status_text }}
</button>
</template>
</s-goods-item>
</view>
</view>
</view>
<!-- 自提核销 -->
<PickUpVerify :order-info="state.orderInfo" :systemStore="systemStore" ref="pickUpVerifyRef"></PickUpVerify>
<!-- 订单信息 -->
<view class="notice-box">
<view class="notice-box__content">
<view class="notice-item--center">
<view class="ss-flex ss-flex-1">
<text class="title">订单编号：</text>
<text class="detail">{{ state.orderInfo.no }}</text>
</view>
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
</view>
<view class="notice-item">
<text class="title">下单时间：</text>
<text class="detail">
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
<view class="notice-item" v-if="state.orderInfo.payTime">
<text class="title">支付时间：</text>
<text class="detail">
{{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
<view class="notice-item">
<text class="title">支付方式：</text>
<text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
</view>
</view>
</view>
<!-- 价格信息 -->
<view class="order-price-box">
<view class="notice-item ss-flex ss-row-between">
<text class="title">订单总额</text>
<view class="ss-flex">
<text class="detail">￥{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
</view>
</view>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
<text class="title">优惠劵金额</text>
<text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
</view>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.pointPrice > 0">
<text class="title">积分抵扣</text>
<text class="detail">-¥{{ fen2yuan(state.orderInfo.pointPrice) }}</text>
</view>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
<text class="title">活动优惠</text>
<text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
</view>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.vipPrice > 0">
<text class="title">会员优惠</text>
<text class="detail">-¥{{ fen2yuan(state.orderInfo.vipPrice) }}</text>
</view>
<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
<text class="title">{{ state.orderInfo.payStatus ? '实付款' : '需付款' }}</text>
<text class="detail all-price">￥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
</view>
<view
class="notice-item all-rpice-item ss-flex ss-m-t-20"
v-if="state.orderInfo.refundPrice > 0"
>
<text class="title">已退款</text>
<text class="detail all-price">￥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
</view>
</view>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { isEmpty } from 'lodash-es';
import {
fen2yuan,
formatWorkerOrderStatus,
formatMyOrderStatusDescription,
handleOrderButtons,
} from '@/sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
import DeliveryApi from '@/sheep/api/trade/delivery';
import PickUpVerify from '@/pages/order/pickUpVerify.vue';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
const state = reactive({
orderInfo: {},
merchantTradeNo: '', // 商户订单号
comeinType: '', // 进入订单详情的来源类型
});
// ========== 门店自提（核销） ==========
const systemStore = ref({}); // 门店信息
// 复制
const onCopy = () => {
sheep.$helper.copyText(state.orderInfo.no);
};
// 去支付
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/index', {
id: payOrderId,
});
}
// 查看商品
function onGoodsDetail(id) {
if(id) {
sheep.$router.go('/pages/clerk/detail/index', {
id,
});
}
}
// 取消订单
async function onCancel(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function(res) {
if (!res.confirm) {
return;
}
const { code } = await OrderApi.cancelOrder(orderId);
if (code === 0) {
await getOrderDetail(orderId);
}
},
});
}
// 查看物流
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
});
}
// 确认收货
async function onConfirm(orderId, ignore = false) {
// 需开启确认收货组件
// todo: 芋艿：待接入微信
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true;
if (
sheep.$platform.name === 'WechatMiniProgram' &&
!isEmpty(state.orderInfo.wechat_extra_data) &&
isOpenBusinessView &&
!ignore
) {
mpConfirm(orderId);
return;
}
// 正常的确认收货流程
const { code } = await OrderApi.receiveOrder(orderId);
if (code === 0) {
await getOrderDetail(orderId);
}
}
// #ifdef MP-WEIXIN
// 小程序确认收货组件
function mpConfirm(orderId) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`);
return;
}
wx.openBusinessView({
businessType: 'weappOrderConfirm',
extraData: {
merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
},
success(response) {
console.log('success:', response);
if (response.errMsg === 'openBusinessView:ok') {
if (response.extraData.status === 'success') {
onConfirm(orderId, true);
}
}
},
fail(error) {
console.log('error:', error);
},
complete(result) {
console.log('result:', result);
},
});
}
// #endif
// 评价
function onComment(id) {
sheep.$router.go('/pages/goods/comment/add', {
id,
});
}
const pickUpVerifyRef = ref();
async function getOrderDetail(id) {
// 对详情数据进行适配
let res;
if (state.comeinType === 'wechat') {
// TODO 芋艿：微信场景下
res = await OrderApi.getOrder(id, {
merchant_trade_no: state.merchantTradeNo,
});
} else {
res = await OrderApi.getOrder(id);
}
if (res.code === 0) {
state.orderInfo = res.data;
handleOrderButtons(state.orderInfo);
// 配送方式：门店自提
if (res.data.pickUpStoreId) {
const { data } = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
systemStore.value = data || {};
}
if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
}
} else {
sheep.$router.back();
}
}
onLoad(async (options) => {
let id = 0;
if (options.id) {
id = options.id;
}
// TODO 芋艿：下面两个变量，后续接入
state.comeinType = options.comein_type;
if (state.comeinType === 'wechat') {
state.merchantTradeNo = options.merchant_trade_no;
}
await getOrderDetail(id);
});
</script>
<style lang="scss" scoped>
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.apply-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
font-size: 24rpx;
border: 2rpx solid #dcdcdc;
line-height: normal;
margin-left: 16rpx;
}
.state-box {
color: rgba(#fff, 0.9);
width: 100%;
background: v-bind(headerBg) no-repeat,
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
background-size: 750rpx 100%;
box-sizing: border-box;
.state-img {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
}
.order-address-box {
background-color: #fff;
border-radius: 10rpx;
margin: -50rpx 20rpx 16rpx 20rpx;
padding: 44rpx 34rpx 42rpx 20rpx;
font-size: 30rpx;
box-sizing: border-box;
font-weight: 500;
color: rgba(51, 51, 51, 1);
.address-username {
margin-right: 20rpx;
}
.address-detail {
font-size: 26rpx;
font-weight: 500;
color: rgba(153, 153, 153, 1);
margin-top: 20rpx;
}
}
.detail-goods {
border-radius: 10rpx;
margin: 0 20rpx 20rpx 20rpx;
.order-list {
margin-bottom: 20rpx;
background-color: #fff;
.order-card {
padding: 20rpx 0;
.order-sku {
font-size: 24rpx;
font-weight: 400;
color: rgba(153, 153, 153, 1);
width: 450rpx;
margin-bottom: 20rpx;
.order-num {
margin-right: 10rpx;
}
}
.tag-btn {
margin-left: 16rpx;
font-size: 24rpx;
height: 36rpx;
color: var(--ui-BG-Main);
border: 2rpx solid var(--ui-BG-Main);
border-radius: 14rpx;
padding: 0 4rpx;
}
}
}
}
// 订单信息。
.notice-box {
background: #fff;
border-radius: 10rpx;
margin: 0 20rpx 20rpx 20rpx;
.notice-box__head {
font-size: 30rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 80rpx;
border-bottom: 1rpx solid #dfdfdf;
padding: 0 25rpx;
}
.notice-box__content {
padding: 20rpx;
.self-pickup-box {
width: 100%;
.self-pickup--img {
width: 200rpx;
height: 200rpx;
margin: 40rpx 0;
}
}
}
.notice-item,
.notice-item--center {
display: flex;
align-items: center;
line-height: normal;
margin-bottom: 24rpx;
.title {
font-size: 28rpx;
color: #999;
}
.detail {
font-size: 28rpx;
color: #333;
flex: 1;
}
}
}
.copy-btn {
width: 100rpx;
line-height: 50rpx;
border-radius: 25rpx;
padding: 0;
background: rgba(238, 238, 238, 1);
font-size: 22rpx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
// 订单价格信息
.order-price-box {
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
margin: 0 20rpx 20rpx 20rpx;
.notice-item {
line-height: 70rpx;
.title {
font-size: 28rpx;
color: #999;
}
.detail {
font-size: 28rpx;
color: #333;
font-family: OPPOSANS;
}
}
.all-rpice-item {
justify-content: flex-end;
align-items: center;
.title {
font-size: 26rpx;
font-weight: 500;
color: #333333;
line-height: normal;
}
.all-price {
font-size: 26rpx;
font-family: OPPOSANS;
line-height: normal;
color: $red;
}
}
}
// 底部
.footer-box {
height: 100rpx;
width: 100%;
box-sizing: border-box;
border-radius: 10rpx;
padding-right: 20rpx;
.cancel-btn {
width: 160rpx;
height: 60rpx;
background: #eeeeee;
border-radius: 30rpx;
margin-right: 20rpx;
font-size: 26rpx;
font-weight: 400;
color: #333333;
}
.pay-btn {
width: 160rpx;
height: 60rpx;
font-size: 26rpx;
border-radius: 30rpx;
font-weight: 500;
color: #fff;
}
}
</style>

39
pages/order/my/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<view class="page-app theme-light main-green font-1">
<layout></layout>
<s-menu-tools />
</view>
</template>
<script>
import layout from '@/pages/order/my/components/layout.vue';
export default {
components: {
layout,
},
props: {
},
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fafafa;
padding-bottom: 140rpx;
height: calc(100vh);
padding-bottom: env(safe-area-inset-bottom);
}
</style>

514
pages/order/my/list - 副本.vue Normal file
View File

@@ -0,0 +1,514 @@
<!-- 订单列表 -->
<template>
<s-layout title="我的订单">
<su-sticky bgColor="#fff">
<su-tabs
:list="tabMaps"
:scrollable="false"
@change="onTabsChange"
:current="state.currentTab"
/>
</su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0">
<view
class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
v-for="order in state.pagination.list"
:key="order.id"
>
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
{{ formatWorkerOrderStatus(order) }}
</view>
</view>
<view @tap.stop="onBuy(order.items[0].spuId)" class="border-bottom" v-for="item in order.items" :key="item.id">
<s-worker-item
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
/>
</view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<view class="ss-flex ss-col-center">
<view class="discounts-title pay-color"
>共 {{ order.productCount }} 件商品,总金额:</view
>
<view class="discounts-money pay-color"> ￥{{ fen2yuan(order.payPrice) }} </view>
</view>
</view>
<view
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
>
<view class="ss-flex ss-col-center">
<button
v-if="order.buttons.includes('combination')"
class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)"
>
拼团详情
</button>
<button
v-if="order.buttons.includes('detail')"
class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)"
>
查看详情
</button>
<button
v-if="order.buttons.includes('confirm')"
class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)"
>
确认收货
</button>
<button
v-if="order.buttons.includes('express')"
class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)"
>
查看物流
</button>
<button
v-if="order.buttons.includes('cancel')"
class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)"
>
取消订单
</button>
<button
v-if="order.buttons.includes('unpay')"
class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)"
>
取消订单
</button>
<button
v-if="order.buttons.includes('comment')"
class="tool-btn ss-reset-button"
@tap.stop="onComment(order.id)"
>
评价
</button>
<button
v-if="order.buttons.includes('delete')"
class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)"
>
删除订单
</button>
<button
v-if="order.buttons.includes('pay')"
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.payOrderId)"
>
继续支付
</button>
<button
v-if="order.buttons.includes('buy')"
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onBuy(order.items[0].spuId)"
>
再来一单
</button>
</view>
</view>
</view>
</view>
<!-- 加载更多 -->
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadMore"
/>
</s-layout>
</template>
<script setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import {
fen2yuan,
formatOrderColor,
formatWorkerOrderStatus,
handleMyOrderButtons,
} from '@/sheep/hooks/useGoods';
import sheep from '@/sheep';
import _ from 'lodash-es';
import { isEmpty } from 'lodash-es';
import OrderApi from '@/sheep/api/trade/order';
import { resetPagination } from '@/sheep/util';
// 数据
const state = reactive({
currentTab: 0, // 选中的 tabMaps 下标
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 5,
},
loadStatus: '',
});
const tabMaps = [
{
name: '全部',
},
{
name: '待付款',
value: 0,
},
{
name: '待服务',
value: 10,
},
{
name: '服务中',
value: 20,
},
{
name: '待评价',
value: 30,
},
];
// 切换选项卡
function onTabsChange(e) {
if (state.currentTab === e.index) {
return;
}
// 重头加载代码
resetPagination(state.pagination);
state.currentTab = e.index;
getOrderList();
}
// 订单详情
function onOrderDetail(id) {
sheep.$router.go('/pages/order/my/detail', {
id,
});
}
function onBuy(id) {
sheep.$router.go('/pages/clerk/detail/index', {
id,
});
}
// 跳转拼团记录的详情
function onOrderGroupon(order) {
sheep.$router.go('/pages/activity/groupon/detail', {
id: order.combinationRecordId,
});
}
// 继续支付
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/worker/index', {
id: payOrderId,
});
}
// 评价
function onComment(id) {
sheep.$router.go('/pages/goods/comment/worker/add', {
id,
});
}
// 确认收货 TODO 芋艿：待测试
async function onConfirm(order, ignore = false) {
// 需开启确认收货组件
// todo: 芋艿：需要后续接入微信收货组件
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true;
if (
sheep.$platform.name === 'WechatMiniProgram' &&
!isEmpty(order.wechat_extra_data) &&
isOpenBusinessView &&
!ignore
) {
mpConfirm(order);
return;
}
// 正常的确认收货流程
const { code } = await OrderApi.receiveOrder(order.id);
if (code === 0) {
resetPagination(state.pagination);
await getOrderList();
}
}
// #ifdef MP-WEIXIN
// 小程序确认收货组件 TODO 芋艿：后续再接入
function mpConfirm(order) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`);
return;
}
wx.openBusinessView({
businessType: 'weappOrderConfirm',
extraData: {
merchant_id: '1481069012',
merchant_trade_no: order.wechat_extra_data.merchant_trade_no,
transaction_id: order.wechat_extra_data.transaction_id,
},
success(response) {
console.log('success:', response);
if (response.errMsg === 'openBusinessView:ok') {
if (response.extraData.status === 'success') {
onConfirm(order, true);
}
}
},
fail(error) {
console.log('error:', error);
},
complete(result) {
console.log('result:', result);
},
});
}
// #endif
// 查看物流
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
});
}
// 取消订单
async function onCancel(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await OrderApi.cancelOrder(orderId);
if (code === 0) {
// 修改数据的状态
let index = state.pagination.list.findIndex((order) => order.id === orderId);
const orderInfo = state.pagination.list[index];
orderInfo.status = 40;
handleMyOrderButtons(orderInfo);
}
},
});
}
// 删除订单
function onDelete(orderId) {
uni.showModal({
title: '提示',
content: '确定要删除订单吗?',
success: async function (res) {
if (res.confirm) {
const { code } = await OrderApi.deleteOrder(orderId);
if (code === 0) {
// 删除数据
let index = state.pagination.list.findIndex((order) => order.id === orderId);
state.pagination.list.splice(index, 1);
}
}
},
});
}
// 获取订单列表
async function getOrderList() {
state.loadStatus = 'loading';
let { code, data } = await OrderApi.getOrderPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
status: tabMaps[state.currentTab].value,
commentStatus: tabMaps[state.currentTab].value === 30 ? false : null,
});
if (code !== 0) {
return;
}
data.list.forEach((order) => handleMyOrderButtons(order));
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
onLoad(async (options) => {
if (options.type) {
state.currentTab = options.type;
}
await getOrderList();
});
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getOrderList();
}
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
// 下拉刷新
onPullDownRefresh(() => {
resetPagination(state.pagination);
getOrderList();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 800);
});
</script>
<style lang="scss" scoped>
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.tool-btn {
width: 160rpx;
height: 60rpx;
background: #f6f6f6;
font-size: 26rpx;
border-radius: 30rpx;
margin-right: 10rpx;
&:last-of-type {
margin-right: 0;
}
}
.delete-btn {
width: 160rpx;
height: 56rpx;
color: #ff3000;
background: #fee;
border-radius: 28rpx;
font-size: 26rpx;
margin-right: 10rpx;
line-height: normal;
&:last-of-type {
margin-right: 0;
}
}
.apply-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
font-size: 24rpx;
border: 2rpx solid #dcdcdc;
line-height: normal;
margin-left: 16rpx;
}
.swiper-box {
flex: 1;
.swiper-item {
height: 100%;
width: 100%;
}
}
.order-list-card-box {
.order-card-header {
height: 80rpx;
.order-no {
font-size: 26rpx;
font-weight: 500;
}
.order-state {
}
}
.pay-box {
.discounts-title {
font-size: 24rpx;
line-height: normal;
color: #999999;
}
.discounts-money {
font-size: 24rpx;
line-height: normal;
color: #999;
font-family: OPPOSANS;
}
.pay-color {
color: #333;
}
}
.order-card-footer {
height: 100rpx;
.more-item-box {
padding: 20rpx;
.more-item {
height: 60rpx;
.title {
font-size: 26rpx;
}
}
}
.more-btn {
color: $dark-9;
font-size: 24rpx;
}
.content {
width: 154rpx;
color: #333333;
font-size: 26rpx;
font-weight: 500;
}
}
}
:deep(.uni-tooltip-popup) {
background: var(--ui-BG);
}
.warning-color {
color: #faad14;
}
.danger-color {
color: #ff3000;
}
.success-color {
color: #52c41a;
}
.info-color {
color: #999999;
}
</style>

45
pages/order/my/list.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<view class="page-app theme-light main-green font-1">
<layout ref="order"></layout>
<s-menu-tools />
<s-auth-modal />
</view>
</template>
<script>
import layout from '@/pages/order/my/components/layout.vue';
export default {
components: {
layout,
},
props: {
},
data() {
return {
currentIndex: 0,
}
},
onLoad(options) {
if (options.type) {
this.currentIndex = options.type;
}
this.$nextTick(() => {
this.$refs.order.tabChange(this.currentIndex);
});
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fafafa;
padding-bottom: 140rpx;
height: calc(100vh);
padding-bottom: env(safe-area-inset-bottom);
}
</style>