root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单详情页面优化。分类页面优化。订单详情下单成功页面优化。

Browse Source
This commit is contained in:
77 2024-10-25 18:00:36 +08:00
parent 954275129d
commit df5dddb424
5 changed files with 917 additions and 859 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages/goods/comment/add.vue
View File

@ -80,7 +80,8 @@
await OrderApi.createOrderItemComment(comment); await OrderApi.createOrderItemComment(comment);
} }
// 都评论好，返回 // 都评论好，返回
sheep.$router.back(); // sheep.$router.back();
sheep.$router.redirect('/pages/order/list');
} }
onLoad(async (options) => { onLoad(async (options) => {

26
pages/index/category.vue
View File

@ -150,7 +150,7 @@
.side-menu-wrap { .side-menu-wrap {
width: 200rpx; width: 200rpx;
height: 100%; height: 100%;
padding-left: 12rpx; // padding-left: 12rpx;
background-color: #f6f6f6; background-color: #f6f6f6;
.menu-item { .menu-item {
@ -161,7 +161,7 @@
.menu-title { .menu-title {
line-height: 32rpx; line-height: 32rpx;
font-size: 30rpx; font-size: 23rpx;
font-weight: 400; font-weight: 400;
color: #333; color: #333;
margin-left: 28rpx; margin-left: 28rpx;
@ -187,16 +187,16 @@
&.menu-item-active { &.menu-item-active {
background-color: #fff; background-color: #fff;
border-radius: 20rpx 0 0 20rpx; // border-radius: 20rpx 0 0 20rpx;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
right: 0; left: 0;
bottom: -20rpx; bottom: 0;
width: 20rpx; width: 2px;
height: 20rpx; height: 100%;
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0); // background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
background: rgba(236,72,29);
} }
&::after { &::after {
@ -211,10 +211,10 @@
.menu-title { .menu-title {
font-weight: 600; font-weight: 600;
color:rgba(236,72,29);
&::before { // &::before {
left: 0; // left: 0;
} // }
} }
} }
} }

1194
pages/order/detail.vue
View File

File diff suppressed because it is too large Load Diff

524
pages/pay/result.vue
View File

@ -1,287 +1,287 @@
<!-- 支付结果页面 --> <!-- 支付结果页面 -->
<template> <template>
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }"> <s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
<view class="pay-result-box ss-flex-col ss-row-center ss-col-center"> <view class="main">
<!-- 信息展示 --> <image
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" /> src="https://zysc.fjptzykj.com:3000/shangcheng/7bab925772a5b878b75dcc35e5ebd1d6e6c2e776752554526a71ecd1371c24db.png"
<image class="img" mode=""></image>
class="pay-img ss-m-b-30" <view class="title" v-if="payResult === 'success'">订单支付成功</view>
v-if="payResult === 'success'" <view class="title" v-if="payResult === 'failed'">支付失败</view>
:src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')" <view class="title" v-if="payResult === 'closed'">该订单已关闭</view>
/> <view class="title" v-if="payResult === 'waiting'">检测支付结果...</view>
<image <!-- <view class="title">订单支付成功</view> -->
class="pay-img ss-m-b-30" <view class="fgx"></view>
v-if="['failed', 'closed'].includes(payResult)" <view class="ddxx">
:src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')" <view class="l">
/> 订单号
<view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</view> </view>
<view class="tip-text ss-m-b-30" v-if="payResult === 'failed'">支付失败</view> <view class="r">
<view class="tip-text ss-m-b-30" v-if="payResult === 'closed'">该订单已关闭</view> {{ state.orderInfo.no }}
<view class="tip-text ss-m-b-30" v-if="payResult === 'waiting'">检测支付结果...</view> </view>
<view class="pay-total-num ss-flex" v-if="payResult === 'success'"> </view>
<view>￥{{ fen2yuan(state.orderInfo.price) }}</view> <view class="ddxx">
</view> <view class="l">
下单时间
<!-- 操作区 --> </view>
<view class="btn-box ss-flex ss-row-center ss-m-t-50"> <view class="r">
<button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')"> {{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
返回首页 </view>
</button> </view>
<button <view class="ddxx">
class="check-btn ss-reset-button" <view class="l">
v-if="payResult === 'failed'" 支付方式
@tap=" </view>
sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType }) <view class="r">
" 支付余额
> </view>
重新支付 </view>
</button> <view class="ddxx">
<button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder"> <view class="l">
查看订单 支付余额
</button> </view>
<!-- TODO 芋艿：拼团接入 --> <view class="r">
<button ￥{{ fen2yuan(state.orderInfo.price) }}
class="check-btn ss-reset-button" </view>
v-if="payResult === 'success' && state.tradeOrder.type === 3" </view>
@tap="sheep.$router.redirect('/pages/activity/groupon/order')" <view class="fgx"></view>
> <view class="ck-detail" v-if="payResult === 'failed'" @tap="sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })">
我的拼团 重新支付
</button> </view>
</view> <view class="ck-detail" v-if="payResult === 'success' && state.tradeOrder.type === 3" @tap="sheep.$router.redirect('/pages/activity/groupon/order')">
我的拼团
<!-- TODO 芋艿：订阅 --> </view>
<!-- #ifdef MP --> <view class="ck-detail" v-if="payResult === 'success'" @tap="onOrder">
<view class="subscribe-box ss-flex ss-m-t-44"> 查看订单
<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" /> </view>
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view> <view class="bk-home" @click="sheep.$router.go('/pages/index/index');">
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view> 返回首页
</view> </view>
<!-- #endif -->
</view> <!-- TODO 芋艿：订阅 -->
</s-layout> <!-- #ifdef MP -->
<view class="subscribe-box ss-flex ss-m-t-44">
<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
</view>
<!-- #endif -->
</view>
</s-layout>
</template> </template>
<script setup> <script setup>
import { onLoad, onHide, onShow } from '@dcloudio/uni-app'; import {
import { reactive, computed } from 'vue'; onLoad,
import { isEmpty } from 'lodash'; onHide,
import sheep from '@/sheep'; onShow
import PayOrderApi from '@/sheep/api/pay/order'; } from '@dcloudio/uni-app';
import { fen2yuan } from '../../sheep/hooks/useGoods'; import {
import OrderApi from '@/sheep/api/trade/order'; reactive,
computed
} from 'vue';
import {
isEmpty
} from 'lodash';
import sheep from '@/sheep';
import PayOrderApi from '@/sheep/api/pay/order';
import {
fen2yuan
} from '../../sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
const state = reactive({ const state = reactive({
id: 0, // 支付单号 id: 0, // 支付单号
orderType: 'goods', // 订单类型 orderType: 'goods', // 订单类型
result: 'unpaid', // 支付状态 result: 'unpaid', // 支付状态
orderInfo: {}, // 支付订单信息 orderInfo: {}, // 支付订单信息
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示 tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
counter: 0, // 获取结果次数 counter: 0, // 获取结果次数
}); });
// 支付结果 result => payResult // 支付结果 result => payResult
const payResult = computed(() => { const payResult = computed(() => {
if (state.result === 'unpaid') { if (state.result === 'unpaid') {
return 'waiting'; return 'waiting';
} }
if (state.result === 'paid') { if (state.result === 'paid') {
return 'success'; return 'success';
} }
if (state.result === 'failed') { if (state.result === 'failed') {
return 'failed'; return 'failed';
} }
if (state.result === 'closed') { if (state.result === 'closed') {
return 'closed'; return 'closed';
} }
}); });
// 获得订单信息 // 获得订单信息
async function getOrderInfo(id) { async function getOrderInfo(id) {
state.counter++; state.counter++;
// 1. 加载订单信息 // 1. 加载订单信息
const { data, code } = await PayOrderApi.getOrder(id); const {
if (code === 0) { data,
state.orderInfo = data; code
if (!state.orderInfo || state.orderInfo.status === 30) { } = await PayOrderApi.getOrder(id);
// 支付关闭 if (code === 0) {
state.result = 'closed'; state.orderInfo = data;
return; if (!state.orderInfo || state.orderInfo.status === 30) {
} // 支付关闭
if (state.orderInfo.status !== 0) { state.result = 'closed';
// 非待支付，可能是已支付，可能是已退款 return;
state.result = 'paid'; }
// #ifdef MP if (state.orderInfo.status !== 0) {
subscribeMessage(); // 非待支付，可能是已支付，可能是已退款
// #endif state.result = 'paid';
// 特殊：获得商品订单信息 // #ifdef MP
if (state.orderType === 'goods') { subscribeMessage();
const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId); // #endif
if (code === 0) { // 特殊：获得商品订单信息
state.tradeOrder = data; if (state.orderType === 'goods') {
} const {
} data,
return; code
} } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
} if (code === 0) {
// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询 state.tradeOrder = data;
if (state.counter < 3 && state.result === 'unpaid') { }
setTimeout(() => { }
getOrderInfo(id); return;
}, 1500); }
} }
// 2.2 情况二：超过三次检测才判断为支付失败 // 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
if (state.counter >= 3) { if (state.counter < 3 && state.result === 'unpaid') {
state.result = 'failed'; setTimeout(() => {
} getOrderInfo(id);
} }, 1500);
}
// 2.2 情况二：超过三次检测才判断为支付失败
if (state.counter >= 3) {
state.result = 'failed';
}
}
function onOrder() { function onOrder() {
// TODO 芋艿：待测试 // TODO 芋艿：待测试
if (state.orderType === 'recharge') { if (state.orderType === 'recharge') {
sheep.$router.redirect('/pages/pay/recharge-log'); sheep.$router.redirect('/pages/pay/recharge-log');
} else { } else {
sheep.$router.redirect('/pages/order/list'); sheep.$router.redirect('/pages/order/list');
} }
} }
// TODO 芋艿：待测试 // TODO 芋艿：待测试
// #ifdef MP // #ifdef MP
function subscribeMessage() { function subscribeMessage() {
let event = ['order_dispatched']; let event = ['order_dispatched'];
if (state.tradeOrder.type === 3) { if (state.tradeOrder.type === 3) {
event.push('groupon_finish'); event.push('groupon_finish');
event.push('groupon_fail'); event.push('groupon_fail');
} }
sheep.$platform.useProvider('wechat').subscribeMessage(event); sheep.$platform.useProvider('wechat').subscribeMessage(event);
} }
// #endif // #endif
onLoad(async (options) => { onLoad(async (options) => {
// 支付订单号 // 支付订单号
if (options.id) { if (options.id) {
state.id = options.id; state.id = options.id;
} }
// 订单类型 // 订单类型
if (options.orderType) { if (options.orderType) {
state.orderType = options.orderType; state.orderType = options.orderType;
} }
// 支付结果传值过来是失败，则直接显示失败界面 // 支付结果传值过来是失败，则直接显示失败界面
if (options.payState === 'fail') { if (options.payState === 'fail') {
state.result = 'failed'; state.result = 'failed';
} else { } else {
// 轮询三次检测订单支付结果 // 轮询三次检测订单支付结果
await getOrderInfo(state.id); await getOrderInfo(state.id);
} }
}); });
onShow(() => { onShow(() => {
if (isEmpty(state.orderInfo)) { if (isEmpty(state.orderInfo)) {
return; return;
} }
getOrderInfo(state.id); getOrderInfo(state.id);
}); });
onHide(() => { onHide(() => {
state.result = 'unpaid'; state.result = 'unpaid';
state.counter = 0; state.counter = 0;
}); });
</script> </script>
<style lang="scss" scope>
.main {
background: white;
width: 85%;
padding: 15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
<style lang="scss" scoped> .img {
@keyframes rotation { width: 80px;
0% { height: 80px;
transform: rotate(0deg); display: block;
} margin: 0 auto;
margin-top: -52px;
}
100% { .title {
transform: rotate(360deg); text-align: center;
} font-size: 18px;
} margin: 15px 0;
font-weight: 700;
}
.score-img { .ddxx {
width: 36rpx; display: flex;
height: 36rpx; justify-content: space-between;
margin: 0 4rpx; margin: 10px 0;
}
.pay-result-box { .l {
padding: 60rpx 0; font-size: 17px;
}
.pay-waiting { .r {
margin-top: 20rpx; font-size: 16px;
width: 60rpx; color: rbga(102, 102, 102);
height: 60rpx; }
border: 10rpx solid rgb(233, 231, 231); }
border-bottom-color: rgb(204, 204, 204);
border-radius: 50%;
display: inline-block;
// -webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.pay-img { .fgx {
width: 130rpx; margin: 20px 0;
height: 130rpx; height: 1px;
} width: 100%;
background: rgba(239, 239, 239);
}
.tip-text { .ck-detail {
font-size: 30rpx; // background: rgba(254,92,45);
font-weight: bold; background: rgba(230, 50, 34);
color: #333333; padding: 10px 0;
} color: white;
font-size: 19px;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 31px;
}
.pay-total-num { .bk-home {
font-size: 36rpx; border: 1px solid rgba(230, 50, 34);
font-weight: 500; padding: 10px 0;
color: #333333; color: rgba(230, 50, 34);
font-family: OPPOSANS; font-size: 19px;
} text-align: center;
width: 100%;
border-radius: 31px;
}
.btn-box { }
width: 100%;
.back-btn {
width: 190rpx;
height: 70rpx;
font-size: 28rpx;
border: 2rpx solid #dfdfdf;
border-radius: 35rpx;
font-weight: 400;
color: #595959;
}
.check-btn {
width: 190rpx;
height: 70rpx;
font-size: 28rpx;
border: 2rpx solid #dfdfdf;
border-radius: 35rpx;
font-weight: 400;
color: #595959;
margin-left: 32rpx;
}
}
.subscribe-box {
.subscribe-img {
width: 44rpx;
height: 44rpx;
}
.subscribe-title {
font-weight: 500;
font-size: 32rpx;
line-height: 36rpx;
color: #434343;
}
.subscribe-start {
color: var(--ui-BG-Main);
font-weight: 700;
font-size: 32rpx;
line-height: 36rpx;
}
}
}
</style> </style>

29
pages/user/wallet/score.vue
View File

@ -33,12 +33,12 @@
<view class="new-point"> <view class="new-point">
<view class="l"> <view class="l">
<view class="b">1000</view> <view class="b">{{state.pointData.addUp}}</view>
<view class="c">累计积分（带对接接口）</view> <view class="c">累计积分</view>
</view> </view>
<view class="l"> <view class="l">
<view class="b">1000</view> <view class="b">{{state.pointData.reduce}}</view>
<view class="c">累计消费（带对接接口）</view> <view class="c">累计消费</view>
</view> </view>
<view class="l"> <view class="l">
<view class="b">0</view> <view class="b">0</view>
@ -115,6 +115,11 @@
</template> </template>
<script setup> <script setup>
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import {
onLoad, onLoad,
@ -146,7 +151,8 @@
loadStatus: '', loadStatus: '',
date: [], date: [],
today: '', today: '',
isShow: 1 isShow: 1,
pointData:[]
}); });
const tabMaps = [{ const tabMaps = [{
@ -170,6 +176,18 @@
return state.date.join('~'); return state.date.join('~');
} }
}); });
//
//
function brandlists3() {
request({
url: `${baseUrl}${apiPath}/member/point/record/getPointInfo`,
method: 'GET',
}).then((res) => {
console.log(res, "------brandList3---------");
state.pointData = res.data;
});
}
async function getLogList() { async function getLogList() {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
@ -195,6 +213,7 @@
state.today = dayjs().format('YYYY-MM-DD'); state.today = dayjs().format('YYYY-MM-DD');
state.date = [state.today, state.today]; state.date = [state.today, state.today];
getLogList(); getLogList();
brandlists3();
}); });
function onChange(e) { function onChange(e) {