194 lines
4.6 KiB
Vue
194 lines
4.6 KiB
Vue
<template>
|
||
<s-layout title="退货物流">
|
||
<view>
|
||
<form @submit="subRefund" report-submit='true'>
|
||
<view class='apply-return'>
|
||
<view class='list borRadius14'>
|
||
<view class='item acea-row row-between-wrapper' style="display: flex;align-items: center;">
|
||
<view>物流公司</view>
|
||
<picker mode='selector' class='num' @change="bindPickerChange" :value="state.expressIndex"
|
||
:range="state.expresses" range-key="name">
|
||
<view class="picker acea-row row-between-wrapper">
|
||
<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
|
||
<!-- TODO 芋艿:这里样式有问题,少了 > 按钮 -->
|
||
<text class='iconfont icon-jiantou' />
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class='item textarea acea-row row-between' style="display: flex;align-items: center;">
|
||
<view>物流单号</view>
|
||
<input placeholder='请填写物流单号' class='num' name="logisticsNo"
|
||
placeholder-class='placeholder' />
|
||
</view>
|
||
<button class='returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn'
|
||
form-type="submit"
|
||
style="background: linear-gradient(90deg,var(--ui-BG-Main),var(--ui-BG-Main-gradient))!important">提交</button>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { reactive } from 'vue';
|
||
import sheep from '@/sheep';
|
||
import AfterSaleApi from '@/api/trade/afterSale';
|
||
import DeliveryApi from '@/api/trade/delivery';
|
||
|
||
const state = reactive({
|
||
id: 0, // 售后编号
|
||
expressIndex: 0, // 选中的 expresses 下标
|
||
expresses: [], // 可选的快递列表
|
||
})
|
||
|
||
function bindPickerChange(e) {
|
||
state.expressIndex = e.detail.value;
|
||
}
|
||
|
||
async function subRefund(e) {
|
||
let data = {
|
||
id: state.id,
|
||
logisticsId: state.expresses[state.expressIndex].id,
|
||
logisticsNo: e.detail.value.logisticsNo,
|
||
};
|
||
const { code } = await AfterSaleApi.deliveryAfterSale(data);
|
||
if (code !== 0) {
|
||
return;
|
||
}
|
||
uni.showToast({
|
||
title: '填写退货成功',
|
||
});
|
||
sheep.$router.go('/pages/order/aftersale/detail', { id: state.id });
|
||
}
|
||
|
||
// 获得快递物流列表
|
||
async function getExpressList() {
|
||
const { code, data } = await DeliveryApi.getDeliveryExpressList();
|
||
if (code !== 0) {
|
||
return;
|
||
}
|
||
state.expresses = data;
|
||
}
|
||
|
||
onLoad(options => {
|
||
if (!options.id) {
|
||
sheep.$helper.toast(`缺少订单信息,请检查`);
|
||
return
|
||
}
|
||
state.id = options.id;
|
||
// 获得快递物流列表
|
||
getExpressList();
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.apply-return {
|
||
padding: 20rpx 30rpx 70rpx 30rpx;
|
||
}
|
||
|
||
.apply-return .list {
|
||
background-color: #fff;
|
||
margin-top: 18rpx;
|
||
padding: 0 24rpx 70rpx 24rpx;
|
||
}
|
||
|
||
.apply-return .list .item {
|
||
min-height: 90rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.apply-return .list .item .num {
|
||
color: #282828;
|
||
margin-left: 27rpx;
|
||
// width: 227rpx;
|
||
// text-align: right;
|
||
}
|
||
|
||
.apply-return .list .item .num .picker .reason {
|
||
width: 385rpx;
|
||
}
|
||
|
||
.apply-return .list .item .num .picker .iconfont {
|
||
color: #666;
|
||
font-size: 30rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.apply-return .list .item.textarea {
|
||
padding: 24rpx 0;
|
||
}
|
||
|
||
.apply-return .list .item textarea {
|
||
height: 100rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.apply-return .list .item .placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
.apply-return .list .item .title {
|
||
height: 95rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.apply-return .list .item .title .tip {
|
||
font-size: 30rpx;
|
||
color: #bbb;
|
||
}
|
||
|
||
.apply-return .list .item .upload {
|
||
padding-bottom: 36rpx;
|
||
}
|
||
|
||
.apply-return .list .item .upload .pictrue {
|
||
border-radius: 14rpx;
|
||
margin: 22rpx 23rpx 0 0;
|
||
width: 156rpx;
|
||
height: 156rpx;
|
||
position: relative;
|
||
font-size: 24rpx;
|
||
color: #bbb;
|
||
}
|
||
|
||
.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.apply-return .list .item .upload .pictrue image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 14rpx;
|
||
}
|
||
|
||
.apply-return .list .item .upload .pictrue .icon-guanbi1 {
|
||
position: absolute;
|
||
font-size: 45rpx;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
}
|
||
|
||
.apply-return .list .item .upload .pictrue .icon-icon25201 {
|
||
color: #bfbfbf;
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.apply-return .list .item .upload .pictrue:nth-last-child(1) {
|
||
border: 1rpx solid #ddd;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.apply-return .returnBnt {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
width: 100%;
|
||
height: 86rpx;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 86rpx;
|
||
margin: 43rpx auto;
|
||
}
|
||
</style> |