修改淘宝退款详情页,变更支付宝首页布局,新增视频教程页
|
|
@ -467,6 +467,14 @@
|
|||
"navigationBarTitleText": "呼叫和短信入口",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "shipinjiaocheng/shipinjiaocheng",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "视频教程",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="group-box">
|
||||
<!-- <view class="group-box">
|
||||
<image class="title-img" src="/static/image/index/shipingjiaocheng.png"></image>
|
||||
<view class="video-help-box">
|
||||
<view class="video-help-item" :style="{ width: (windowWidth - 32) / 4 + 'px' }"
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
<text class="video-help-title">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="group-box">
|
||||
<image class="title-img" src="/static/image/index/monixiaobao.png"></image>
|
||||
|
|
@ -105,11 +105,11 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="activity-box">
|
||||
<view class="activity-box">
|
||||
<image class="alipay-year-bill" :style="{ width: (windowWidth - 32) + 'px' }"
|
||||
src="/static/image/index/alipay-year-bill.png" mode="widthFix"
|
||||
@click="util.goPage(`/pages/common/alipay-annual-bill/alipay-annual-bill`)"></image>
|
||||
</view> -->
|
||||
src="/static/image/index/shipinjiaocheng-banner.png" mode="widthFix"
|
||||
@click="util.goPage(`/pages/common/shipinjiaocheng/shipinjiaocheng`)"></image>
|
||||
</view>
|
||||
|
||||
<view class="group-box">
|
||||
<image class="title-img" src="/static/image/index/qita.png"></image>
|
||||
|
|
@ -559,15 +559,6 @@ const openVip = () => {
|
|||
goRechargePage()
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击视频教程
|
||||
* @param item
|
||||
*/
|
||||
const clickVideoHelp = (item) => {
|
||||
const url = item.url
|
||||
util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击公告
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -237,20 +237,14 @@
|
|||
<view class="order-info card">
|
||||
<view class="info-box">
|
||||
<view v-for="item in order.orderInfo" :key="item.key"
|
||||
class="flex-justify-between flex-align-center item" @click="onClickItemInfo(item)">
|
||||
<view class="lable">
|
||||
class="flex-justify-between item" style="align-items: flex-start;" @click="onClickItemInfo(item)">
|
||||
<view class="lable" style="flex-shrink: 0; margin-top: 4rpx;">
|
||||
<text style="white-space: nowrap;">{{ item.label }}</text>
|
||||
</view>
|
||||
<view class="flex-1 flex-align-center"
|
||||
style="justify-content: flex-end;margin-left: 20rpx;width: 100px;">
|
||||
<text v-if="item.key == 'shippingInfo'" class="value"
|
||||
style="text-align: right;line-height: 34rpx;">{{
|
||||
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
|
||||
<auto-width-input class="value" v-model="item.value" fontSize="26rpx"
|
||||
color="#7C8495" :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'" />
|
||||
</view>
|
||||
|
|
@ -268,6 +262,28 @@
|
|||
</view>
|
||||
</view>
|
||||
<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 flex-column flex-align-center">
|
||||
<view class="main-text animate-scale">
|
||||
|
|
@ -308,6 +324,18 @@
|
|||
</view>
|
||||
</view>
|
||||
<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">
|
||||
<image
|
||||
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>
|
||||
</view>
|
||||
<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)">
|
||||
<text class="label">{{ item.label }}</text>
|
||||
<view class="flex-align-center">
|
||||
<text class="label" style="flex-shrink: 0; white-space: nowrap; margin-top: 4rpx;">{{ item.label }}</text>
|
||||
<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"
|
||||
: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'" />
|
||||
</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>
|
||||
<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 {
|
||||
background-color: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
|
||||
.shop-name-box {
|
||||
|
||||
|
||||
.shop-name {
|
||||
font-size: 28rpx;
|
||||
color: #00032A;
|
||||
|
|
|
|||
|
|
@ -351,11 +351,15 @@
|
|||
"id": "202605110007",
|
||||
"orderType": "shopping",
|
||||
"shopName": "优衣库官方旗舰店",
|
||||
"shopImg": "",
|
||||
"statusType": "refunding",
|
||||
"statusDesc": "平台支持退款",
|
||||
"shopType": "taobao",
|
||||
"refundMoney": "199.00",
|
||||
"refundIcon": 1,
|
||||
"address": "上海市浦东新区汤臣一品",
|
||||
"userName": "张三",
|
||||
"phone": "13812345678",
|
||||
"productImgUrl": "/static/image/shopping/taobao/detail/refund/product1.png",
|
||||
"goodsList": [
|
||||
{
|
||||
|
|
@ -375,31 +379,78 @@
|
|||
"label": "退款原因",
|
||||
"key": "refundReason",
|
||||
"value": "七天无理由退货",
|
||||
"type": "text"
|
||||
"type": "text",
|
||||
"isCurrentFilter4": true
|
||||
},
|
||||
{
|
||||
"label": "退款金额",
|
||||
"key": "refunMoney",
|
||||
"value": "",
|
||||
"type": "digit"
|
||||
"type": "digit",
|
||||
"isCurrentFilter4": true
|
||||
},
|
||||
{
|
||||
"label": "退款完结",
|
||||
"key": "refunTime",
|
||||
"value": "",
|
||||
"type": "time"
|
||||
"type": "time",
|
||||
"isCurrentFilter4": true
|
||||
},
|
||||
{
|
||||
"label": "申请时间",
|
||||
"key": "applyTime",
|
||||
"value": "",
|
||||
"type": "time"
|
||||
"type": "time",
|
||||
"isCurrentFilter4": true
|
||||
},
|
||||
{
|
||||
"label": "退款编号",
|
||||
"key": "refundId",
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"label": "交易快照",
|
||||
"key": "transactionSnapshot",
|
||||
"value": "发生交易争议时,可作为判断依据",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"label": "收货信息",
|
||||
"key": "shippingInfo",
|
||||
"value": "",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"label": "支付方式",
|
||||
"key": "paymentMethod",
|
||||
"value": "支付宝支付",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"statusDesc1": "退回支付宝",
|
||||
|
|
|
|||
|
|
@ -561,7 +561,7 @@ const goDetail = (item) => {
|
|||
if (item.orderType === 'waimai') {
|
||||
util.goPage(`/pages/shopping/taobao/shangou-order-detail/shangou-order-detail?id=${item.id}`)
|
||||
} 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}¤tFilter=${currentFilter.value}`)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
<template v-slot:center>
|
||||
<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>
|
||||
<text>商家处理</text>
|
||||
<image class="next icon" src="/static/image/shopping/taobao/detail/refund/next.png"></image>
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
<text>3退款结束</text>
|
||||
</view>
|
||||
<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">
|
||||
还剩{{ order.confirmReceiptCountdown }}自动确认</view>
|
||||
</view>
|
||||
|
|
@ -32,13 +33,17 @@
|
|||
</template>
|
||||
</nav-bar>
|
||||
|
||||
<view v-if="order && order.statusType != 'refunding'">
|
||||
<view v-if="order.statusType == 'wait_recv'" class="card status-box">
|
||||
<view v-if="order && currentFilter != 4">
|
||||
<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;"
|
||||
:src="`/static/image/shopping/taobao/detail/${order.statusType == 'wait_recv' && order.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`"
|
||||
mode="aspectFill"></image>
|
||||
<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>
|
||||
</view>
|
||||
<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>
|
||||
<uni-icons type="down" size="12" color="#7C8495"></uni-icons>
|
||||
</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>
|
||||
<view class="content flex-1">
|
||||
<view class="up">{{ order.address }}</view>
|
||||
|
|
@ -65,7 +71,7 @@
|
|||
<uni-icons type="right" size="14" color="#FF7824"></uni-icons>
|
||||
</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">
|
||||
<image style="width: 34rpx;height: 34rpx;margin-right: 8rpx;"
|
||||
src="/static/image/shopping/taobao/detail/shandian.png"></image>
|
||||
|
|
@ -82,7 +88,21 @@
|
|||
<!-- 商品卡片 -->
|
||||
<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`"
|
||||
mode="heightFix">
|
||||
</image>
|
||||
|
|
@ -90,7 +110,8 @@
|
|||
<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
|
||||
</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>
|
||||
<view class="goods-info flex-1">
|
||||
<view class="goods-title flex-justify-between flex-align-center">
|
||||
|
|
@ -125,6 +146,13 @@
|
|||
</text>
|
||||
<text>x{{ item?.count }}</text>
|
||||
</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>
|
||||
|
||||
|
|
@ -135,7 +163,8 @@
|
|||
}}
|
||||
</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">
|
||||
<text class="title">商品总价</text>
|
||||
<text class="count">共{{ getGoodsTotalCount(order.goodsList) }}件</text>
|
||||
|
|
@ -146,7 +175,7 @@
|
|||
<text style="font-size: 30rpx;">{{ getGoodsTotalPrice(order.goodsList).split('.')[1] }}</text>
|
||||
</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"
|
||||
class="flex-justify-between flex-align-center item">
|
||||
<view class="flex-align-center">
|
||||
|
|
@ -180,7 +209,8 @@
|
|||
<text style="font-size: 40rpx;">¥</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>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -188,6 +218,7 @@
|
|||
<view class="order-info card">
|
||||
<view v-if="!isFoldOrderInfoCard" class="info-box">
|
||||
<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">
|
||||
<view class="lable">
|
||||
<text style="white-space: nowrap;">{{ item.label }}</text>
|
||||
|
|
@ -228,7 +259,7 @@
|
|||
<image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image>
|
||||
</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 flex-column flex-align-center">
|
||||
<view class="main-text">退款成功</view>
|
||||
|
|
@ -255,6 +286,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="card refund-product-card">
|
||||
<template></template>
|
||||
<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>
|
||||
|
|
@ -271,7 +303,7 @@
|
|||
<text class="label">协商历史</text>
|
||||
<text class="value" style="color: #1A1A1A;">查看</text>
|
||||
</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">
|
||||
<text class="label">{{ item.label }}</text>
|
||||
<text class="value">{{ item.value }} <text style="color: #1A1A1A;"
|
||||
|
|
@ -322,8 +354,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<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"
|
||||
:class="{ primary: btn.isPrimary }">{{ btn.name }}
|
||||
<view class="btn" v-for="btn in bottomBtnList[currentFilter == 4 ? 'refunding2' : order.statusType].btns"
|
||||
:key="btn.name" :class="{ primary: btn.isPrimary }">{{ btn.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="right-btns flex-align-center wait_pay">
|
||||
|
|
@ -436,6 +468,15 @@ const btnList = {
|
|||
name: "加入购物车",
|
||||
isPrimary: false
|
||||
}
|
||||
],
|
||||
"refunding": [
|
||||
{
|
||||
name: "申请售后",
|
||||
isPrimary: false
|
||||
}, {
|
||||
name: "加入购物车",
|
||||
isPrimary: true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -553,6 +594,28 @@ const bottomBtnList = {
|
|||
]
|
||||
},
|
||||
"refunding": {
|
||||
icons: [
|
||||
{
|
||||
icon: 'kefu',
|
||||
name: '卖家'
|
||||
},
|
||||
],
|
||||
btns: [
|
||||
{
|
||||
name: '删除订单',
|
||||
isPrimary: false
|
||||
},
|
||||
{
|
||||
name: '加入购物车',
|
||||
isPrimary: false
|
||||
},
|
||||
{
|
||||
name: '钱款去向',
|
||||
isPrimary: true
|
||||
}
|
||||
]
|
||||
},
|
||||
"refunding2": {
|
||||
icons: [
|
||||
{
|
||||
icon: 'kefu',
|
||||
|
|
@ -596,6 +659,7 @@ let order = ref(null)
|
|||
|
||||
const currentId = ref(null);
|
||||
let countdownTimer = null;
|
||||
const currentFilter = ref(-1)
|
||||
|
||||
const loadOrderDetail = () => {
|
||||
if (!currentId.value) return;
|
||||
|
|
@ -674,6 +738,7 @@ const initCountdown = () => {
|
|||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
currentId.value = options.id;
|
||||
currentFilter.value = options.currentFilter
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -835,6 +900,16 @@ onUnmounted(() => {
|
|||
font-weight: 600;
|
||||
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 {
|
||||
|
|
@ -1350,6 +1425,34 @@ onUnmounted(() => {
|
|||
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>
|
||||
@import '@/common/main.css';
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 290 KiB After Width: | Height: | Size: 278 KiB |
|
Before Width: | Height: | Size: 266 KiB After Width: | Height: | Size: 262 KiB |