tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改淘宝退款详情页，变更支付宝首页布局，新增视频教程页

This commit is contained in:
tangxinyue 2026-06-09 15:48:23 +08:00
parent 4fcbc5b06f
commit 503a4e1194
12 changed files with 378 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages.json
View File

@ -467,6 +467,14 @@
"navigationBarTitleText": "呼叫和短信入口", "navigationBarTitleText": "呼叫和短信入口",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path" : "shipinjiaocheng/shipinjiaocheng",
"style" :
{
"navigationBarTitleText" : "视频教程",
"navigationStyle": "custom"
}
} }
] ]
} }

80
pages/common/shipinjiaocheng/shipinjiaocheng.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<view>
<nav-bar title="视频教程" bg-color="transparent">
<template v-slot:statusBar>
<view class="top-bg-box">
<image style="width: 100%;" src="/static/image/common/shipinjiaocheng/top-bg.png" mode="widthFix">
</image>
</view>
</template>
</nav-bar>
<view class="video-list">
<view class="video-item" v-for="item in videoHelpList" :key="item.id" @click="clickVideoHelp(item)">
<image class="video-help-img" :src="item.icon"></image>
<text class="video-help-title flex-1">{{ item.text }}</text>
<uni-icons type="forward" size="18" color="#AEAEAE"></uni-icons>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { storage } from "../../../utils/storage";
import {
util
} from '@/utils/common.js'
const videoHelpList = ref([]);
onLoad(() => {
const configData = storage.get("config")
videoHelpList.value = configData.config['client.uniapp.alipay.video_help'] || []
})
/**
* 点击视频教程
* @param item
*/
const clickVideoHelp = (item) => {
const url = item.url
util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
}
</script>
<style lang="less">
.video-list {
background-color: #FFFFFF;
border-radius: 32rpx;
margin: 0 32rpx;
.video-item {
display: flex;
align-items: center;
padding: 20rpx 32rpx;
border-bottom: 1rpx solid #E4E4E4;
&:last-child {
border-bottom: none;
}
.video-help-title {
width: 100%;
font-size: 32rpx;
color: #1A1A1A;
line-height: 42rpx;
margin-left: 16rpx;
}
}
.video-help-img {
flex-shrink: 0;
width: 72rpx;
height: 72rpx;
}
}
</style>

21
pages/index/index.nvue
View File

@ -76,7 +76,7 @@
</view> </view>
</view> </view>
<view class="group-box"> <!-- <view class="group-box">
<image class="title-img" src="/static/image/index/shipingjiaocheng.png"></image> <image class="title-img" src="/static/image/index/shipingjiaocheng.png"></image>
<view class="video-help-box"> <view class="video-help-box">
<view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }" <view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }"
@ -85,7 +85,7 @@
<text class="video-help-title">{{ item.text }}</text> <text class="video-help-title">{{ item.text }}</text>
</view> </view>
</view> </view>
</view> </view> -->
<view class="group-box"> <view class="group-box">
<image class="title-img" src="/static/image/index/monixiaobao.png"></image> <image class="title-img" src="/static/image/index/monixiaobao.png"></image>
@ -105,11 +105,11 @@
</view> </view>
</view> </view>
<!-- <view class="activity-box"> <view class="activity-box">
<image class="alipay-year-bill" :style="{ width: (windowWidth - 32) + 'px' }" <image class="alipay-year-bill" :style="{ width: (windowWidth - 32) + 'px' }"
src="/static/image/index/alipay-year-bill.png" mode="widthFix" src="/static/image/index/shipinjiaocheng-banner.png" mode="widthFix"
@click="util.goPage(`/pages/common/alipay-annual-bill/alipay-annual-bill`)"></image> @click="util.goPage(`/pages/common/shipinjiaocheng/shipinjiaocheng`)"></image>
</view> --> </view>
<view class="group-box"> <view class="group-box">
<image class="title-img" src="/static/image/index/qita.png"></image> <image class="title-img" src="/static/image/index/qita.png"></image>
@ -559,15 +559,6 @@ const openVip = () => {
goRechargePage() goRechargePage()
} }
/**
* 点击视频教程
* @param item
*/
const clickVideoHelp = (item) => {
const url = item.url
util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
}
/** /**
* 点击公告 * 点击公告
*/ */

123
pages/shopping/taobao/add-shopping-order/add-shopping-order.vue
View File

@ -237,20 +237,14 @@
<view class="order-info card"> <view class="order-info card">
<view class="info-box"> <view class="info-box">
<view v-for="item in order.orderInfo" :key="item.key" <view v-for="item in order.orderInfo" :key="item.key"
class="flex-justify-between flex-align-center item" @click="onClickItemInfo(item)"> class="flex-justify-between item" style="align-items: flex-start;" @click="onClickItemInfo(item)">
<view class="lable"> <view class="lable" style="flex-shrink: 0; margin-top: 4rpx;">
<text style="white-space: nowrap;">{{ item.label }}</text> <text style="white-space: nowrap;">{{ item.label }}</text>
</view> </view>
<view class="flex-1 flex-align-center" <view class="flex-1 flex-align-center"
style="justify-content: flex-end;margin-left: 20rpx;width: 100px;"> style="justify-content: flex-end;margin-left: 20rpx;width: 100px;">
<text v-if="item.key == 'shippingInfo'" class="value" <auto-width-input class="value" v-model="item.value" fontSize="26rpx"
style="text-align: right;line-height: 34rpx;">{{ color="#7C8495" :type="(item.type == 'address' || item.key == 'shippingInfo') ? 'textarea' : (item.type ? item.type : 'text')" show-edit
order.userName + ' ' +
"86-" + order.phone + '，' +
order.address
}}</text>
<auto-width-input v-else class="value" v-model="item.value" fontSize="26rpx"
color="#7C8495" :type="item.type ? item.type : 'text'" show-edit
style="text-align: right;" style="text-align: right;"
:disabled="item.type == 'time' || item.type == 'timeRange'" /> :disabled="item.type == 'time' || item.type == 'timeRange'" />
</view> </view>
@ -268,6 +262,28 @@
</view> </view>
</view> </view>
<view class="" v-else> <view class="" v-else>
<!-- 退款类型的收货信息编辑区域 -->
<view class="address-box flex" style="margin-top: 16rpx; border-radius: 24rpx; margin-bottom: 20rpx;">
<image class="icon" src="/static/image/shopping/taobao/detail/location.png" mode="aspectFit">
</image>
<view class="content flex-1">
<view class="up animate-scale">
<auto-width-input v-model="order.address" fontSize="30rpx" fontWeight="500"
placeholder="收货地址" type="textarea" show-edit />
</view>
<view class="down flex-align-center">
<view class="animate-scale">
<auto-width-input v-model="order.userName" fontSize="26rpx" color="#7C8495"
placeholder="姓名" show-edit />
</view>
<view class="animate-scale" style="margin-left: 8rpx;">
<auto-width-input v-model="order.phone" fontSize="26rpx" color="#7C8495"
placeholder="电话" show-edit />
</view>
</view>
</view>
</view>
<view class="card refund-box"> <view class="card refund-box">
<view class="card flex-column flex-align-center"> <view class="card flex-column flex-align-center">
<view class="main-text animate-scale"> <view class="main-text animate-scale">
@ -308,6 +324,18 @@
</view> </view>
</view> </view>
<view class="card refund-product-card"> <view class="card refund-product-card">
<view class="shop-name-box flex-align-center" style="margin-bottom: 20rpx;">
<view v-if="!order.shopImg" class="upload-avatar flex-center" @click="chooseShopImg">
<text style="font-size: 40rpx;line-height: 40rpx;color: #FF7824;">+</text>
</view>
<image v-else style="width: 70rpx;height: 70rpx;border-radius: 8rpx;margin-right: 12rpx;"
:src="order.shopImg" mode="aspectFill" @click="chooseShopImg">
</image>
<view class="animate-scale flex-1">
<auto-width-input v-model="order.shopName" fontSize="28rpx" fontWeight="600" color="#00032A"
placeholder="店铺名称" show-edit />
</view>
</view>
<view class="product-info flex-align-center" v-for="(goods, index) in order.goodsList" :key="index"> <view class="product-info flex-align-center" v-for="(goods, index) in order.goodsList" :key="index">
<image <image
style="width: 140rpx;height: 140rpx;margin-right: 24rpx;flex-shrink: 0;border-radius: 12rpx;" style="width: 140rpx;height: 140rpx;margin-right: 24rpx;flex-shrink: 0;border-radius: 12rpx;"
@ -338,15 +366,26 @@
<text class="value" style="color: #1A1A1A;">查看</text> <text class="value" style="color: #1A1A1A;">查看</text>
</view> </view>
<view v-show="!isFoldRefundOrderInfoCard || item.key == 'refunTime'" <view v-show="!isFoldRefundOrderInfoCard || item.key == 'refunTime'"
class="item flex-justify-between flex-align-center" v-for="item in order.orderInfo" class="item flex-justify-between" style="align-items: flex-start;" v-for="item in order.orderInfo"
:key="item.key" @click="onClickItemInfo(item)"> :key="item.key" @click="onClickItemInfo(item)">
<text class="label">{{ item.label }}</text> <text class="label" style="flex-shrink: 0; white-space: nowrap; margin-top: 4rpx;">{{ item.label }}</text>
<view class="flex-align-center"> <view class="flex-align-center flex-1" style="justify-content: flex-end; margin-left: 20rpx;">
<auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#7C8495" <auto-width-input class="value" v-model="item.value" fontSize="26rpx" color="#7C8495"
:type="item.type ? item.type : 'text'" show-edit :type="(item.type == 'address' || item.key == 'shippingInfo') ? 'textarea' : (item.type ? item.type : 'text')" show-edit
style="text-align: right;"
:disabled="item.type == 'time' || item.type == 'timeRange'" /> :disabled="item.type == 'time' || item.type == 'timeRange'" />
</view> </view>
</view> </view>
<view class="order-ID flex-justify-between flex-align-center">
<text class="lable flex-align-center"
@click="isFoldOrderInfoCard = !isFoldOrderInfoCard">订单信息
<uni-icons :type="isFoldOrderInfoCard ? 'up' : 'down'" size="16"
color="#7C8495"></uni-icons></text>
<view class="value flex-align-center animate-scale">
<auto-width-input v-model="order.orderId" fontSize="26rpx" color="#7C8495"
placeholder="订单号" show-edit />
</view>
</view>
</view> </view>
</view> </view>
<text style="margin: 0 8rpx;display: block;font-size: 20rpx;color: #7C8495;">*点击切换商品长按可上传自定义图片*</text> <text style="margin: 0 8rpx;display: block;font-size: 20rpx;color: #7C8495;">*点击切换商品长按可上传自定义图片*</text>
@ -685,6 +724,49 @@ const clickRandomDate = () => {
} }
}; };
/**
* 选择店铺头像并转换为本地持久化路径 (并清理旧图)
*/
const chooseShopImg = () => {
// 记录旧图路径用于清理
const oldImagePath = order.value.shopImg;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0];
uni.showLoading({ title: '处理图片中...' });
// 将新图保存为持久化文件
uni.saveFile({
tempFilePath: tempFilePath,
success: (saveRes) => {
// 1. 设置新图片路径
order.value.shopImg = saveRes.savedFilePath;
// 2. 如果旧图是本地持久化文件，则物理删除它
if (oldImagePath && (oldImagePath.includes('_doc') || oldImagePath.includes('store_') || oldImagePath.includes('at_'))) {
uni.removeSavedFile({
filePath: oldImagePath,
success: () => console.log('旧店铺头像已清理:', oldImagePath),
fail: (err) => console.error('旧店铺头像清理失败:', err)
});
}
},
fail: (err) => {
console.error('保存头像失败:', err);
order.value.shopImg = tempFilePath;
},
complete: () => {
uni.hideLoading();
}
});
}
});
}
/** /**
* 选择图片并转换为本地持久化路径 (并清理旧图) * 选择图片并转换为本地持久化路径 (并清理旧图)
*/ */
@ -1306,11 +1388,24 @@ watch(() => order.value?.orderInfo, (newInfo) => {
} }
} }
.upload-avatar {
width: 70rpx;
height: 70rpx;
border-radius: 8rpx;
margin-right: 12rpx;
background-color: #D8D8D8;
display: flex;
align-items: center;
justify-content: center;
}
&.product-card { &.product-card {
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 32rpx; padding: 32rpx;
.shop-name-box { .shop-name-box {
.shop-name { .shop-name {
font-size: 28rpx; font-size: 28rpx;
color: #00032A; color: #00032A;

59
pages/shopping/taobao/json/order.json
View File

@ -351,11 +351,15 @@
"id": "202605110007", "id": "202605110007",
"orderType": "shopping", "orderType": "shopping",
"shopName": "优衣库官方旗舰店", "shopName": "优衣库官方旗舰店",
"shopImg": "",
"statusType": "refunding", "statusType": "refunding",
"statusDesc": "平台支持退款", "statusDesc": "平台支持退款",
"shopType": "taobao", "shopType": "taobao",
"refundMoney": "199.00", "refundMoney": "199.00",
"refundIcon": 1, "refundIcon": 1,
"address": "上海市浦东新区汤臣一品",
"userName": "张三",
"phone": "13812345678",
"productImgUrl": "/static/image/shopping/taobao/detail/refund/product1.png", "productImgUrl": "/static/image/shopping/taobao/detail/refund/product1.png",
"goodsList": [ "goodsList": [
{ {
@ -375,31 +379,78 @@
"label": "退款原因", "label": "退款原因",
"key": "refundReason", "key": "refundReason",
"value": "七天无理由退货", "value": "七天无理由退货",
"type": "text" "type": "text",
"isCurrentFilter4": true
}, },
{ {
"label": "退款金额", "label": "退款金额",
"key": "refunMoney", "key": "refunMoney",
"value": "", "value": "",
"type": "digit" "type": "digit",
"isCurrentFilter4": true
}, },
{ {
"label": "退款完结", "label": "退款完结",
"key": "refunTime", "key": "refunTime",
"value": "", "value": "",
"type": "time" "type": "time",
"isCurrentFilter4": true
}, },
{ {
"label": "申请时间", "label": "申请时间",
"key": "applyTime", "key": "applyTime",
"value": "", "value": "",
"type": "time" "type": "time",
"isCurrentFilter4": true
}, },
{ {
"label": "退款编号", "label": "退款编号",
"key": "refundId", "key": "refundId",
"value": "", "value": "",
"type": "number",
"isCurrentFilter4": true
},
{
"label": "成交时间",
"key": "tradeTime",
"value": "",
"type": "time"
},
{
"label": "付款时间",
"key": "paymentTime",
"value": "",
"type": "time"
},
{
"label": "创建时间",
"key": "createTime",
"value": "",
"type": "time"
},
{
"label": "支付宝交易号",
"key": "alipayOrderId",
"value": "2026030223656325698545232",
"type": "number" "type": "number"
},
{
"label": "交易快照",
"key": "transactionSnapshot",
"value": "发生交易争议时，可作为判断依据",
"type": "text"
},
{
"label": "收货信息",
"key": "shippingInfo",
"value": "",
"type": "address"
},
{
"label": "支付方式",
"key": "paymentMethod",
"value": "支付宝支付",
"type": "text"
} }
], ],
"statusDesc1": "退回支付宝", "statusDesc1": "退回支付宝",

2
pages/shopping/taobao/list-index.vue
View File

@ -561,7 +561,7 @@ const goDetail = (item) => {
if (item.orderType === 'waimai') { if (item.orderType === 'waimai') {
util.goPage(`/pages/shopping/taobao/shangou-order-detail/shangou-order-detail?id=${item.id}`) util.goPage(`/pages/shopping/taobao/shangou-order-detail/shangou-order-detail?id=${item.id}`)
} else { } else {
util.goPage(`/pages/shopping/taobao/shopping-order-detail/shopping-order-detail?id=${item.id}`) util.goPage(`/pages/shopping/taobao/shopping-order-detail/shopping-order-detail?id=${item.id}&currentFilter=${currentFilter.value}`)
} }
} }

135
pages/shopping/taobao/shopping-order-detail/shopping-order-detail.vue
View File

@ -8,7 +8,7 @@
</template> </template>
<template v-slot:center> <template v-slot:center>
<view v-if="order" class="center-content"> <view v-if="order" class="center-content">
<view v-if="order.statusType == 'refunding'" class="refunding-title-box"> <view v-if="order.statusType == 'refunding' && currentFilter == 4" class="refunding-title-box">
<image class="icon" src="/static/image/shopping/taobao/detail/refund/finish.png"></image> <image class="icon" src="/static/image/shopping/taobao/detail/refund/finish.png"></image>
<text>商家处理</text> <text>商家处理</text>
<image class="next icon" src="/static/image/shopping/taobao/detail/refund/next.png"></image> <image class="next icon" src="/static/image/shopping/taobao/detail/refund/next.png"></image>
@ -18,7 +18,8 @@
<text>3退款结束</text> <text>3退款结束</text>
</view> </view>
<view v-else class="title-box"> <view v-else class="title-box">
<view class="title">{{ titleList[order.statusType] }}</view> <view class="title">{{ order.statusType == 'refunding' ? '交易关闭' : titleList[order.statusType] }}
</view>
<view v-if="order.statusType == 'wait_recv' && order.isSignFor" class="desc"> <view v-if="order.statusType == 'wait_recv' && order.isSignFor" class="desc">
还剩{{ order.confirmReceiptCountdown }}自动确认</view> 还剩{{ order.confirmReceiptCountdown }}自动确认</view>
</view> </view>
@ -32,13 +33,17 @@
</template> </template>
</nav-bar> </nav-bar>
<view v-if="order && order.statusType != 'refunding'"> <view v-if="order && currentFilter != 4">
<view v-if="order.statusType == 'wait_recv'" class="card status-box"> <view v-if="order.statusType == 'wait_recv' || order.statusType == 'refunding'" class="card status-box"
:style="{ 'margin-bottom': order.statusType == 'refunding' ? '16rpx' : '0' }">
<image style="width: 34rpx;height: 34rpx;flex-shrink: 0;margin-right: 8rpx;" <image style="width: 34rpx;height: 34rpx;flex-shrink: 0;margin-right: 8rpx;"
:src="`/static/image/shopping/taobao/detail/${order.statusType == 'wait_recv' && order.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`" :src="`/static/image/shopping/taobao/detail/${order.statusType == 'wait_recv' && order.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`"
mode="aspectFill"></image> mode="aspectFill"></image>
<text class="status-text">{{ order.statusType == 'wait_recv' && !order.isSignFor ? '运输中' : '已签收' }}</text> <text class="status-text">{{ order.statusType == 'wait_recv' && !order.isSignFor ? '运输中' : '已签收' }}</text>
<text class="status-desc flex-1" style="width: 100px;">{{ order.statusDesc2 }}</text> <text></text>
<text class="status-desc flex-1" style="width: 100px;">
{{ order.statusType == 'refunding' ? order.userName + ' ' + "86-" + order.phone + ' 送至 ' +
order.address : order.statusDesc2 }}</text>
<uni-icons type="right" size="12" color="#7C8495"></uni-icons> <uni-icons type="right" size="12" color="#7C8495"></uni-icons>
</view> </view>
<view v-if="order.statusType == 'closed' || order.statusType == 'success'" class="card status-box" <view v-if="order.statusType == 'closed' || order.statusType == 'success'" class="card status-box"
@ -50,7 +55,8 @@
<text class="status-desc flex-1" style="width: 100px;">{{ order.address }}</text> <text class="status-desc flex-1" style="width: 100px;">{{ order.address }}</text>
<uni-icons type="down" size="12" color="#7C8495"></uni-icons> <uni-icons type="down" size="12" color="#7C8495"></uni-icons>
</view> </view>
<view v-if="order.statusType != 'closed' && order.statusType != 'success'" class="address-box flex"> <view v-if="order.statusType != 'closed' && order.statusType != 'success' && order.statusType != 'refunding'"
class="address-box flex">
<image class="icon" src="/static/image/shopping/taobao/detail/location.png" mode="aspectFit"></image> <image class="icon" src="/static/image/shopping/taobao/detail/location.png" mode="aspectFit"></image>
<view class="content flex-1"> <view class="content flex-1">
<view class="up">{{ order.address }}</view> <view class="up">{{ order.address }}</view>
@ -65,7 +71,7 @@
<uni-icons type="right" size="14" color="#FF7824"></uni-icons> <uni-icons type="right" size="14" color="#FF7824"></uni-icons>
</view> </view>
</view> </view>
<view v-if="order.statusType != 'closed' && order.statusType != 'success'" <view v-if="order.statusType != 'closed' && order.statusType != 'success' && order.statusType != 'refunding'"
class="card status-desc flex-align-center"> class="card status-desc flex-align-center">
<image style="width: 34rpx;height: 34rpx;margin-right: 8rpx;" <image style="width: 34rpx;height: 34rpx;margin-right: 8rpx;"
src="/static/image/shopping/taobao/detail/shandian.png"></image> src="/static/image/shopping/taobao/detail/shandian.png"></image>
@ -82,7 +88,21 @@
<!-- 商品卡片 --> <!-- 商品卡片 -->
<view class="card product-card"> <view class="card product-card">
<!-- 商店名称 --> <!-- 商店名称 -->
<view class="shop-name-box flex-align-center"> <view class="shop-name-box flex-align-center flex-justify-between refunding-style"
v-if="order.statusType == 'refunding'">
<image v-if="order.shopImg" class="refund-shop" style="height: 70rpx;width: 70rpx;margin-right: 18rpx;"
:src="order.shopImg">
</image>
<view class="flex-1">
<text class="shop-name">{{ order.shopName }}</text>
</view>
<view class="flex-align-center">
<text style="font-size: 26rpx;color: #7C8495;line-height: 26rpx;">进店逛逛</text>
<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
</view>
</view>
<!-- 商店名称 -->
<view class="shop-name-box flex-align-center" v-if="order.statusType != 'refunding'">
<image style="height: 28rpx;" :src="`/static/image/shopping/taobao/${order.shopType}.png`" <image style="height: 28rpx;" :src="`/static/image/shopping/taobao/${order.shopType}.png`"
mode="heightFix"> mode="heightFix">
</image> </image>
@ -90,7 +110,8 @@
<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons> <uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view class="goods-list flex-align-center" v-for="(item, index) in order.goodsList" :key="index"> <view class="goods-list flex" :class="{ 'flex-align-center': order.statusType != 'refunding' }"
v-for="(item, index) in order.goodsList" :key="index">
<image class="goods-img" :src="item.image" mode="aspectFill"></image> <image class="goods-img" :src="item.image" mode="aspectFill"></image>
<view class="goods-info flex-1"> <view class="goods-info flex-1">
<view class="goods-title flex-justify-between flex-align-center"> <view class="goods-title flex-justify-between flex-align-center">
@ -125,6 +146,13 @@
</text> </text>
<text>x{{ item?.count }}</text> <text>x{{ item?.count }}</text>
</view> </view>
<view class="refunding-desc">
<view class="flex-align-center">
<text class="label">退款成功</text>
<text class="value">{{ order.statusDesc }}</text>
</view>
<uni-icons color="#D8D8D8" type="right" size="12"></uni-icons>
</view>
</view> </view>
</view> </view>
@ -135,7 +163,8 @@
}} }}
</view> </view>
</view> </view>
<view v-if="!isFoldProductCard" class="total-price-box flex-justify-between flex-align-center"> <view v-if="!isFoldProductCard && order.statusType != 'refunding'"
class="total-price-box flex-justify-between flex-align-center">
<view class="flex-align-center"> <view class="flex-align-center">
<text class="title">商品总价</text> <text class="title">商品总价</text>
<text class="count">共{{ getGoodsTotalCount(order.goodsList) }}件</text> <text class="count">共{{ getGoodsTotalCount(order.goodsList) }}件</text>
@ -146,7 +175,7 @@
<text style="font-size: 30rpx;">{{ getGoodsTotalPrice(order.goodsList).split('.')[1] }}</text> <text style="font-size: 30rpx;">{{ getGoodsTotalPrice(order.goodsList).split('.')[1] }}</text>
</view> </view>
</view> </view>
<view v-if="!isFoldProductCard" class="discount-box"> <view v-if="!isFoldProductCard && order.statusType != 'refunding'" class="discount-box">
<view v-if="order.platformDiscount && Number(order.platformDiscount) > 0" <view v-if="order.platformDiscount && Number(order.platformDiscount) > 0"
class="flex-justify-between flex-align-center item"> class="flex-justify-between flex-align-center item">
<view class="flex-align-center"> <view class="flex-align-center">
@ -180,7 +209,8 @@
<text style="font-size: 40rpx;">￥</text> <text style="font-size: 40rpx;">￥</text>
<text style="font-size: 44rpx;">{{ Number(order.totalPrice).toFixed(2).split('.')[0] }}.</text> <text style="font-size: 44rpx;">{{ Number(order.totalPrice).toFixed(2).split('.')[0] }}.</text>
<text style="font-size: 32rpx;">{{ Number(order.totalPrice).toFixed(2).split('.')[1] }}</text> <text style="font-size: 32rpx;">{{ Number(order.totalPrice).toFixed(2).split('.')[1] }}</text>
<uni-icons style="margin-left: 6rpx;" :type="isFoldProductCard ? 'down' : 'up'" size="14" <uni-icons style="margin-left: 6rpx;"
:type="isFoldProductCard && order.statusType != 'refunding' ? 'down' : 'up'" size="14"
color="#D8D8D8" @click="isFoldProductCard = !isFoldProductCard"></uni-icons> color="#D8D8D8" @click="isFoldProductCard = !isFoldProductCard"></uni-icons>
</view> </view>
</view> </view>
@ -188,6 +218,7 @@
<view class="order-info card"> <view class="order-info card">
<view v-if="!isFoldOrderInfoCard" class="info-box"> <view v-if="!isFoldOrderInfoCard" class="info-box">
<view v-for="item in order.orderInfo" :key="item.key" <view v-for="item in order.orderInfo" :key="item.key"
v-show="order.statusType == 'refunding' ? !item.isCurrentFilter4 : true"
class="flex-justify-between flex-align-center item"> class="flex-justify-between flex-align-center item">
<view class="lable"> <view class="lable">
<text style="white-space: nowrap;">{{ item.label }}</text> <text style="white-space: nowrap;">{{ item.label }}</text>
@ -228,7 +259,7 @@
<image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image> <image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image>
</view> </view>
</view> </view>
<view v-else-if="order.statusType == 'refunding'"> <view v-else-if="order.statusType == 'refunding' && currentFilter == 4">
<view class="card refund-box"> <view class="card refund-box">
<view class="card flex-column flex-align-center"> <view class="card flex-column flex-align-center">
<view class="main-text">退款成功</view> <view class="main-text">退款成功</view>
@ -255,6 +286,7 @@
</view> </view>
</view> </view>
<view class="card refund-product-card"> <view class="card refund-product-card">
<template></template>
<view class="product-info flex-align-center" v-for="goods in order.goodsList" :key="goods.name"> <view class="product-info flex-align-center" v-for="goods in order.goodsList" :key="goods.name">
<image style="width: 140rpx;height: 140rpx;margin-right: 24rpx;flex-shrink: 0;" :src="goods.image"> <image style="width: 140rpx;height: 140rpx;margin-right: 24rpx;flex-shrink: 0;" :src="goods.image">
</image> </image>
@ -271,7 +303,7 @@
<text class="label">协商历史</text> <text class="label">协商历史</text>
<text class="value" style="color: #1A1A1A;">查看</text> <text class="value" style="color: #1A1A1A;">查看</text>
</view> </view>
<view v-show="!isFoldRefundOrderInfoCard || item.key == 'refunTime'" <view v-show="(!isFoldRefundOrderInfoCard || item.key == 'refunTime') && item.isCurrentFilter4"
class="item flex-justify-between flex-align-center" v-for="item in order.orderInfo" :key="item.key"> class="item flex-justify-between flex-align-center" v-for="item in order.orderInfo" :key="item.key">
<text class="label">{{ item.label }}</text> <text class="label">{{ item.label }}</text>
<text class="value">{{ item.value }} <text style="color: #1A1A1A;" <text class="value">{{ item.value }} <text style="color: #1A1A1A;"
@ -322,8 +354,8 @@
</view> </view>
</view> </view>
<view v-if="order.statusType != 'wait_pay'" class="right-btns flex-align-center"> <view v-if="order.statusType != 'wait_pay'" class="right-btns flex-align-center">
<view class="btn" v-for="btn in bottomBtnList[order.statusType].btns" :key="btn.name" <view class="btn" v-for="btn in bottomBtnList[currentFilter == 4 ? 'refunding2' : order.statusType].btns"
:class="{ primary: btn.isPrimary }">{{ btn.name }} :key="btn.name" :class="{ primary: btn.isPrimary }">{{ btn.name }}
</view> </view>
</view> </view>
<view v-else class="right-btns flex-align-center wait_pay"> <view v-else class="right-btns flex-align-center wait_pay">
@ -436,6 +468,15 @@ const btnList = {
name: "加入购物车", name: "加入购物车",
isPrimary: false isPrimary: false
} }
],
"refunding": [
{
name: "申请售后",
isPrimary: false
}, {
name: "加入购物车",
isPrimary: true
}
] ]
} }
@ -553,6 +594,28 @@ const bottomBtnList = {
] ]
}, },
"refunding": { "refunding": {
icons: [
{
icon: 'kefu',
name: '卖家'
},
],
btns: [
{
name: '删除订单',
isPrimary: false
},
{
name: '加入购物车',
isPrimary: false
},
{
name: '钱款去向',
isPrimary: true
}
]
},
"refunding2": {
icons: [ icons: [
{ {
icon: 'kefu', icon: 'kefu',
@ -596,6 +659,7 @@ let order = ref(null)
const currentId = ref(null); const currentId = ref(null);
let countdownTimer = null; let countdownTimer = null;
const currentFilter = ref(-1)
const loadOrderDetail = () => { const loadOrderDetail = () => {
if (!currentId.value) return; if (!currentId.value) return;
@ -674,6 +738,7 @@ const initCountdown = () => {
onLoad((options) => { onLoad((options) => {
if (options?.id) { if (options?.id) {
currentId.value = options.id; currentId.value = options.id;
currentFilter.value = options.currentFilter
} }
}) })
@ -835,6 +900,16 @@ onUnmounted(() => {
font-weight: 600; font-weight: 600;
margin: 0 4rpx; margin: 0 4rpx;
} }
&.refunding-style {
padding-bottom: 24rpx;
border-bottom: 0.5px solid #D8D8D8 !important;
.refund-shop {
background-color: #D8D8D8;
border-radius: 8rpx;
}
}
} }
.goods-list { .goods-list {
@ -1350,6 +1425,34 @@ onUnmounted(() => {
line-height: 28rpx; line-height: 28rpx;
} }
} }
.refunding-desc {
display: flex;
align-items: center;
justify-content: space-between;
height: 64rpx;
background-color: #F4F5F7;
line-height: 64rpx;
padding: 0 12rpx;
border-radius: 12rpx;
margin-bottom: 6rpx;
margin-top: 16rpx;
.label {
font-weight: 500;
font-size: 26rpx;
color: #1A1A1A;
line-height: 24rpx;
}
.value {
font-size: 26rpx;
color: #7C8495;
line-height: 24rpx;
margin-left: 6rpx;
}
}
</style> </style>
<style> <style>
@import '@/common/main.css'; @import '@/common/main.css';

BIN
static/image/common/shipinjiaocheng/top-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
static/image/index/shipinjiaocheng-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/image/other/game/wangzhe/avatar-frame-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 278 KiB

After

Width:  |  Height:  |  Size: 268 KiB

BIN
static/image/other/game/wangzhe/avatar-frame-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 KiB

After

Width:  |  Height:  |  Size: 278 KiB

BIN
static/image/other/game/wangzhe/avatar-frame-3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 262 KiB