Skip to content

G
groupPurchase-miniapp
Commit ef33666a authored by 蔡亮华（贵阳日报）'s avatar 蔡亮华（贵阳日报）
Browse files
Options

增加申请售后

parent 572c51ae
Hide whitespace changes
Inline Side-by-side
Showing with 677 additions and 0 deletions
src/pages.json
View file @ ef33666a
......@@ -257,6 +257,12 @@
"navigationBarTitleText": "商品详情页"
}
},
{
"path": "pages/assistingAgriculture/order/refund",
"style": {
"navigationBarTitleText": "申请售后"
}
},
{
"path": "pages/assistingAgriculture/detail/comment",
"style": {
......
src/pages/assistingAgriculture/order/refund.vue 0 → 100644
View file @ ef33666a
<template>
<view class="container">
<Search title="申请售后" backgroundBox="white" :showTitle="true"></Search>
<view class="content">
<view class="content-box">
<view class="content-item1">
<text class="title">退款商品</text>
</view>
<view class="content-item">
<view class="item-top">
<image
class="item-img"
mode="aspectFill"
src="https://img2.baidu.com/it/u=1028011339,1319212411&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"
></image>
<view class="item-info">
<text class="text1">
商品名称商品名称商品名称商品名 商品名称商品名称商品名称商品名 商品名称商品名称
</text>
<text class="num">x1</text>
<text class="text2">
商品简介商品简介商品简介商品简介 商品简介商品简介商品简介商品简介
</text>
</view>
</view>
<view class="item-buttom1">
<img class="presale" src="/static/assistingAgriculture/order/icon1.png" />
<text>请与商家协商，确认达成一致后填写协商好的退款金额</text>
</view>
</view>
</view>
<view class="content-box">
<view class="content-item1">
<text class="title">退款信息</text>
</view>
<view class="content-between" @tap="showGoodPop = true">
<text>
货物状态
<text class="icon1">*</text>
</text>
<view class="rightbox">
<text v-if="selectType1">{{ goodsList[selectType1].name }}</text>
<text v-else>请选择货物状态</text>
<wd-icon name="arrow-right" size="22px"></wd-icon>
</view>
</view>
<view class="content-between" @tap="showSalePop = true">
<text>
售后类型
<text class="icon1">*</text>
</text>
<view class="rightbox">
<text v-if="selectType2">{{ salesList[selectType2].name }}</text>
<text v-else>请选择售后类型</text>
<wd-icon name="arrow-right" size="22px"></wd-icon>
</view>
</view>
<!-- <view class="content-between">
<text>退款金额</text>
<text class="price">￥{{ orderDetail.baseOrder.actualTotal }}</text>
</view> -->
<!-- <view class="content-between">
<text>相关图片</text>
<wd-upload
:file-list="fileList"
image-mode="aspectFill"
:action="action"
@change="handleChange"
:header="headers"
accept="image"
></wd-upload>
</view> -->
<view class="content-between" @tap="showPop = true">
<text>
售后原因
<text class="icon1">*</text>
</text>
<view class="rightbox">
<text v-if="selectType">{{ reasonList[selectType].name }}</text>
<text v-else>请选择售后原因</text>
<wd-icon name="arrow-right" size="22px"></wd-icon>
</view>
</view>
<view class="content-between" style="border-bottom: none">
<text>
退款金额
<text class="icon1">*</text>
</text>
<text class="price2">
<wd-input type="text" no-border custom-input-class="text-align:right" v-model="value" />
</text>
</view>
<view class="tishi">可修改，最多商品￥198</view>
</view>
<view class="content-box">
<view class="content-item1">
<text class="title">申请说明和凭证</text>
</view>
<view class="content-item">
<wd-cell-group border>
<textarea
placeholder="必填，请您详细填写申请说明"
placeholder-style="font-size:28rpx;color:#000;"
></textarea>
</wd-cell-group>
<view style="margin-top: 20rpx">
<wd-upload
:file-list="fileList"
image-mode="aspectFill"
:action="action"
@change="handleChange"
:header="headers"
accept="image"
></wd-upload>
</view>
</view>
</view>
<view class="btn" @tap="submit">提交</view>
</view>
</view>
<wd-popup
v-model="showGoodPop"
position="bottom"
:safe-area-inset-bottom="true"
custom-style="border-radius: 16rpx 16rpx 0 0"
@close="showGoodPop = false"
lockScroll
>
<view class="pop-content">
<view class="header">
<view class="title">货物状态</view>
<wd-icon name="close" size="20" color="#999" @tap="showGoodPop = false"></wd-icon>
</view>
<radio-group style="width: 100%" @change="radioChange1">
<view class="resaon" v-for="(item, index) in goodsList" :key="index">
<view class="resaon-item">
<text>{{ item.name }}</text>
<radio
class="radio"
color="#f62828"
:value="item.id"
:checked="item.id == selectType1"
/>
</view>
</view>
</radio-group>
<view class="btn" @tap="chooseGoodsReason">确认</view>
</view>
</wd-popup>
<wd-popup
v-model="showSalePop"
position="bottom"
:safe-area-inset-bottom="true"
custom-style="border-radius: 16rpx 16rpx 0 0"
@close="showSalePop = false"
lockScroll
>
<view class="pop-content">
<view class="header">
<view class="title">售后类型</view>
<wd-icon name="close" size="20" color="#999" @tap="showSalePop = false"></wd-icon>
</view>
<radio-group style="width: 100%" @change="radioChange2">
<view class="resaon" v-for="(item, index) in salesList" :key="index">
<view class="resaon-item">
<text>{{ item.name }}</text>
<radio
class="radio"
color="#f62828"
:value="item.id"
:checked="item.id == selectType2"
/>
</view>
</view>
</radio-group>
<view class="btn" @tap="chooseSalessReason">确认</view>
</view>
</wd-popup>
<wd-popup
v-model="showPop"
position="bottom"
:safe-area-inset-bottom="true"
custom-style="border-radius: 16rpx 16rpx 0 0"
@close="showPop = false"
lockScroll
>
<view class="pop-content">
<view class="header">
<view class="title">售后原因</view>
<wd-icon name="close" size="20" color="#999" @tap="showPop = false"></wd-icon>
</view>
<radio-group style="width: 100%" @change="radioChange">
<view class="resaon" v-for="(item, index) in reasonList" :key="index">
<view class="resaon-item">
<text>{{ item.name }}</text>
<radio
class="radio"
color="#f62828"
:value="item.id"
:checked="item.id == selectType"
/>
</view>
</view>
</radio-group>
<view class="btn" @tap="chooseReason">确认</view>
</view>
</wd-popup>
</template>
<script setup>
import { applyForARefundApi, getOrderDetail } from '@/api/order';
import { getToken } from '@/utils/auth';
const fileDomain = import.meta.env.VITE_APP_IMG_URL;
const token = getToken();
const value = ref('198.00');
// 上传图片地址
const action = ref(import.meta.env.VITE_APP_BASE_URL + '/sgyrdd/file/update');
const headers = ref('');
// 订单号
const orderNumber = ref('');
onLoad((options) => {
orderNumber.value = options.orderNumber;
headers.value = { Authorization: 'Bearer ' + token };
getDetail();
});
/**
* 获取订单详情
*/
const orderDetail = ref();
const getDetail = async () => {
const res = await getOrderDetail({ orderNumber: orderNumber.value });
orderDetail.value = res.data;
};
/**
* 获取图片列表
*/
// 上传文件地址
const fileList = ref([]);
function handleChange({ fileList: files }) {
fileList.value = files;
console.log(fileList.value);
}
const showPop = ref(false);
const showGoodPop = ref(false);
const showSalePop = ref(false);
const selectType1 = ref(null);
const selectType2 = ref(null);
const selectType = ref(null);
const goodsList = ref([
{
id: '0',
name: '已收到货',
},
{
id: '1',
name: '未收到货',
},
]);
const salesList = ref([
{
id: '0',
name: '仅退款',
},
{
id: '1',
name: '退货退款',
},
]);
const reasonList = ref([
{
id: '0',
name: '与商家协商一致退货退款',
},
{
id: '1',
name: '生产日期/保质期与描述不符',
},
{
id: '2',
name: '版本/批次/颜色/容量等与描述不符',
},
{
id: '3',
name: '做工粗糙/有瑕疵',
},
{
id: '4',
name: '少件（缺少配件）',
},
{
id: '5',
name: '变质/发霉/有异物',
},
{
id: '6',
name: '包装/商品破损',
},
{
id: '7',
name: '7天无理由退货',
},
]);
const otherReason = ref('');
function radioChange1(evt) {
const { value } = evt.detail;
selectType1.value = value;
}
function radioChange2(evt) {
const { value } = evt.detail;
selectType2.value = value;
}
function radioChange(evt) {
const { value } = evt.detail;
selectType.value = value;
}
/**
* 提交申请
*/
const submit = async () => {
if (!selectType.value) {
return xma.showToast({
title: '请选择退款原因',
icon: 'none',
});
}
if (selectType.value === '4' && !otherReason.value) {
return xma.showToast({
title: '请输入其他原因',
icon: 'none',
});
}
xma.showLoading({
title: '提交中',
mask: true,
});
await applyForARefundApi({
orderNumber: orderNumber.value,
refundMemo:
selectType.value === '4' ? otherReason.value : reasonList.value[selectType.value].name,
imgs: processingImageAddresses(),
});
setTimeout(() => {
xma.hideLoading();
setTimeout(() => {
xma.showToast({
title: '提交成功',
icon: 'success',
});
}, 500);
xma.redirectTo({
url: `/pages/order/order?status=after_sales`,
});
}, 1500);
};
/**
* 图片地址处理
*/
const processingImageAddresses = () => {
const data = fileList.value.map((item) => {
return JSON.parse(item.response).data.url;
});
return data.join(',');
};
/**
* 选择货物状态
*/
const chooseGoodsReason = () => {
if (!selectType1.value) {
return xma.showToast({
title: '请选择货物状态',
icon: 'none',
});
}
showGoodPop.value = false;
};
/**
* 选择售后
*/
const chooseSalessReason = () => {
if (!selectType2.value) {
return xma.showToast({
title: '请选择售后类型',
icon: 'none',
});
}
showGoodPop.value = false;
};
/**
* 请选择退款原因
*/
const chooseReason = () => {
if (!selectType.value) {
return xma.showToast({
title: '请选择售后原因',
icon: 'none',
});
}
showPop.value = false;
};
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
:deep(.uni-input-input) {
text-align: right;
font-weight: 700;
font-size: 28rpx;
color: #fa5151;
}
:deep(uni-textarea) {
width: 100%;
background: #f0f0f0;
}
:deep(.uni-textarea-textarea) {
border-radius: 6rpx 6rpx 6rpx 6rpx;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
.content {
padding: 20rpx 10rpx 0;
display: flex;
flex-direction: column;
gap: 20rpx;
.content-box {
background-color: #fff;
border-radius: 8rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
.content-item1 {
.title {
font-weight: 700;
font-size: 36rpx;
color: #3d3d3d;
line-height: 48rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.content-item {
padding: 20rpx 0 44rpx;
.title {
font-size: 28rpx;
color: #333;
}
.item-top {
display: flex;
gap: 20rpx;
.item-img {
width: 216rpx;
height: 216rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.item-info {
display: flex;
flex-direction: column;
width: 420rpx;
font-weight: 400;
line-height: 36rpx;
text-align: left;
font-style: normal;
text-transform: none;
.text1 {
font-size: 28rpx;
color: #3d3d3d;
height: 108rpx;
overflow: hidden;
display: -webkit-box;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.text2 {
height: 64rpx;
overflow: hidden;
font-weight: 400;
font-size: 24rpx;
color: #abaaaa;
line-height: 32rpx;
margin-top: 10rpx;
}
.num {
margin-top: 5rpx;
text-align: right;
color: #abaaaa;
}
}
}
.item-buttom1 {
margin-top: 42rpx;
height: 37rpx;
display: flex;
align-items: center;
.presale {
width: 37rpx;
height: 37rpx;
margin-right: 20rpx;
}
text {
width: 576rpx;
height: 37rpx;
font-weight: 400;
font-size: 24rpx;
color: #fa5151;
line-height: 37rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.item-buttom {
display: flex;
justify-content: flex-end;
align-items: baseline;
text {
font-size: 24rpx;
color: #b5b5b5;
}
.icon {
color: #606060;
}
.price {
font-size: 30rpx;
color: #606060;
}
}
}
.tishi {
font-weight: 400;
font-size: 22rpx;
color: #abaaaa;
line-height: 30rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.content-between {
border-bottom: 1rpx solid #f3f3f3;
padding: 20rpx 0;
display: flex;
margin-top: 40rpx;
justify-content: space-between;
.icon1 {
color: #fa5151;
}
text {
color: #747474;
font-size: 28rpx;
}
.price2 {
font-weight: 700;
font-size: 28rpx;
color: #fa5151;
}
.rightbox {
display: flex;
font-size: 30rpx;
color: #b4b4b4;
}
}
}
}
.btn {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
width: 100%;
background-color: #f8446b;
color: #fff;
font-size: 30rpx;
border-radius: 8rpx;
}
}
.pop-content {
display: flex;
flex-direction: column;
padding: 20rpx;
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 30rpx;
.title {
font-size: 28rpx;
color: #333;
font-weight: bold;
text-align: center;
width: 100%;
}
}
textarea {
width: 100%;
height: 200rpx;
border: 1rpx solid #e0e0e0;
padding: 20rpx;
border-radius: 8rpx;
box-sizing: border-box;
margin-top: 20rpx;
font-size: 28rpx;
}
.resaon {
display: flex;
flex-direction: column;
gap: 20rpx;
.resaon-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10rpx 0;
border-bottom: 1rpx solid #f3f3f3;
text {
font-size: 28rpx;
color: #333;
}
radio {
transform: scale(0.8);
}
}
}
.btn {
margin-top: 100rpx;
display: flex;
align-items: center;
justify-content: center;
height: 58rpx;
color: #fff;
font-size: 28rpx;
background-color: #f62828;
border-radius: 36rpx;
width: 100%;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment