售后提交

App.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2019-04-01 01:47:12
  * @LastEditors: ch
- * @LastEditTime: 2022-04-13 14:07:10
+ * @LastEditTime: 2022-04-15 10:44:33
  * @Description: file content
 -->
 <script>
@@ -24,7 +24,7 @@
 <style lang="scss">
 	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 	@import "uview-ui/index.scss";
-	view,text,textarea{
+	view,text,textarea,input{
 		-webkit-box-sizing: border-box;
 		box-sizing: border-box;
 		font-size: $font-size-base;

common/api/order.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-03-29 17:38:17
  * @LastEditors: ch
- * @LastEditTime: 2022-04-14 16:40:46
+ * @LastEditTime: 2022-04-15 11:09:37
  * @Description: file content
  */
 import {ToAsyncAwait, MsbRequestTk} from '@/common/utils';
@@ -88,3 +88,15 @@ export const ApiGetSaleAfterOrderList = (params) =>
  */
 export const ApiGetSaleAfterOrderDetail = (params) => 
 	ToAsyncAwait(MsbRequestTk.get(`${BASE_URL}/app/refundOrder/${params.refundId}`));
+/**
+ * 售后物流公司
+ * @param {*} data 
+ */
+export const ApiGetLogisticsCompanylist = (params) => 
+	ToAsyncAwait(MsbRequestTk.get(`${BASE_URL}/app/refundOrder/logisticsCompany`));
+/**
+ * 售后提交物流信息
+ * @param {*} data 
+ */
+export const ApiPutLogisticsInfo = (data) => 
+	ToAsyncAwait(MsbRequestTk.put(`${BASE_URL}/app/refundOrder/completeRefund`, data));

pages/order/saleAfter/saleAfterDetail/components/LogisticsInfo.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-04-14 14:19:41
  * @LastEditors: ch
- * @LastEditTime: 2022-04-14 14:38:30
+ * @LastEditTime: 2022-04-15 11:17:27
  * @Description: file content
 -->
 <template>
@@ -12,21 +12,21 @@
 			<view class="info--cell">
 				<text class="info--cell-label">收货信息：</text>
 				<view class="info--cell-value">
-					<view>马士兵严选 18911536782</view>
+					<view>{{data.recipientName}} {{data.recipientPhone}}</view>
-					<view>湖南省湖南省湖南省湖南省湖南省</view>
+					<view>{{data.recipientAddress}}</view>
 				</view>
 			</view>
 			<view class="info--cell">
 				<text class="info--cell-label">物流公司：</text>
-				<view class="info--cell-value">￥{{data.refundAmount}}</view>
+				<view class="info--cell-value">{{data.companyName}}</view>
 			</view>
 			<view class="info--cell">
 				<text class="info--cell-label">物流单号：</text>
-				<view class="info--cell-value">{{data.refundNo}}件</view>
+				<view class="info--cell-value">{{data.trackingNo}}</view>
 			</view>
 			<view class="info--cell">
 				<text class="info--cell-label">备注说明：</text>
-				<view class="info--cell-value">{{data.applyTime}}</view>
+				<view class="info--cell-value">{{data.completeReturnRemark}}</view>
 			</view>
 		</view>
 	</UiWhiteBox>

pages/order/saleAfter/saleAfterDetail/components/SubmitLogistics.vue

@@ -2,16 +2,20 @@
  * @Author: ch
  * @Date: 2022-04-14 13:44:30
  * @LastEditors: ch
- * @LastEditTime: 2022-04-14 19:25:37
+ * @LastEditTime: 2022-04-15 11:08:54
  * @Description: file content
 -->
 <template>
 	<view>
 		<UiWhiteBox>
 			<view class="title">商家已同意退货申请，请尽早退货。</view>
+			<u-cell class="address" :title="data.refundLogistics.recipientAddress" :label="`收货人：${data.refundLogistics.recipientName} ${data.refundLogistics.recipientPhone}`" 
+				:border="false">
+				<image class="address--icon" slot="icon" src="@/static/order/dw.png" />
+			</u-cell>
 		</UiWhiteBox>
 		<UiWhiteBox>
-			<view class="title">退货说明：拒收到付</view>
+			<view class="title title__normal">退货说明：拒收到付</view>
 			<view class="content">
 				<view>•未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物</view>
 				<view>•请填写真实退货物流信息，逾期未填写，退货申请将关闭</view>
@@ -21,21 +25,19 @@
 			</view>
 		</UiWhiteBox>
 		<UiWhiteBox class="box">
-			<UiCell title="物流公司" ></UiCell>
+			<UiCell title="物流公司" @click="logisticsShow = true">
-			<UiCell title="物流单号" >
+				<input class="cell-input" v-model="params.companyName" placeholder="请选择物流公司" slot="value" />
-				<input class="input" slot="value" />
 			</UiCell>
-			<UiCell title="退款金额" :rightIcon="false">
+			<UiCell title="物流单号" :rightIcon="false">
-				<text class="price" slot="value">￥36.3</text>
+				<input class="cell-input" v-model="params.trackingNo" placeholder="请填写物流单号" slot="value" />
 			</UiCell>
 			<view class="cell-title">
 				<view>
-					<text>问题描述</text>
+					<text>备注说明</text>
-					<text class="cell-title--min">（选填）</text>
 				</view>
-				<text class="cell-title--min">10/45</text>
+				<text class="cell-title--min">{{params.remark.length}}/45</text>
 			</view>
-			<textarea class="cell-textarea" maxlength="45" placeholder="请输入您申请退款的问题"></textarea>
+			<textarea class="cell-textarea" v-model="params.remark" maxlength="45" placeholder="请输入您申请退款的问题"></textarea>
 		</UiWhiteBox>
 		<UiWhiteBox class="box">
 			<view class="cell-title">
@@ -43,14 +45,16 @@
 				<text class="cell-title--min">（0/9）</text>
 			</view>
 			<u-upload
+				:fileList="fileList"
+				@afterRead="upload"
+				@delete="delImage"
 				multiple
 				:maxCount="9"
 				:previewFullImage="true"
 			></u-upload>
 		</UiWhiteBox>
-
+		<UiButton class="submit-btn" size="max" type="gradual" @click="submit">确认提交</UiButton>
-		<UiButton class="submit-btn" size="max" type="gradual">确认提交</UiButton>
+		<u-picker :show="logisticsShow" :columns="company" keyName="companyName" @confirm="confirmCompany" @cancel="logisticsShow = false"></u-picker>
-
 		<u-modal :show="cancelShow" @confirm="cancelSaleAfter" showCancelButton @cancel="cancelShow = false" 
 			content="你将撤销本次申请，撤销后，保障期内你可以再次申请售后服务" cancelText="我再想想"></u-modal>
 	</view>
@@ -59,18 +63,33 @@
 import UiButton from '../../../../../components/UiButton.vue'
 import UiCell from '../../../../../components/UiCell.vue'
 import UiWhiteBox from '../../../../../components/UiWhiteBox.vue'
-import {ApiPostCancelSaleAfter} from '@/common/api/order.js';
+import {ApiPostCancelSaleAfter, ApiPutLogisticsInfo} from '@/common/api/order.js';
+import {ApiPostGetOssConfig} from '@/common/api/oss.js';
 export default {
 	components: { UiWhiteBox, UiButton, UiCell },
 	props:{
 		data : {
 			type : Object,
 			default : ()=>({})
+		},
+		company : {
+			type : Array,
+			default : ()=>([])
 		}
 	},
 	data(){
 		return {
-			cancelShow : false
+			cancelShow : false,
+			logisticsShow : false,
+			fileList : [],
+			params : {
+				companyCode : '',
+				companyName : '',
+				logisticsImages : [],
+				refundId : this.$Route.query.id,
+				remark : '',
+				trackingNo : ''
+			}
 		}
 	},
 	methods:{
@@ -83,6 +102,61 @@ export default {
 			this.$emit('reload');
 			this.cancelShow = false;
 		},
+		confirmCompany(val){
+			this.params = {...this.params, ...val.value[0]}
+			this.logisticsShow = false;
+		},
+		async getOssCon(){
+			const {error, result} = await ApiPostGetOssConfig({
+				configId : 'refund-evidence/',
+				serviceName : 'mall-trade'
+			});
+			if(error){
+				uni.$u.toast(error.message);
+				return false
+			}
+			return result;
+		},
+		async upload(val){
+			const file = val.file[0];
+			const oss = await this.getOssCon();
+			if(!oss) {
+				return false
+			}
+			uni.uploadFile({
+				name : 'file',
+				filePath : file.url,
+				url : oss.host,
+				formData : {
+					name : file.name,
+					key : `${oss.dir}${'${filename}'}`,
+					policy : oss.policy,
+					OSSAccessKeyId : oss.accessId,
+					success_action_status : 200,
+					signature : oss.signature
+				},
+				success:(res)=>{
+					this.fileList.push({
+						url : `${oss.host}/${oss.dir}${file.name}`
+					})
+				}
+			})
+		},
+		/**
+		 * 删除凭证图片
+		 */
+		delImage(val){
+			this.fileList.splice(val.index , 1);
+		},
+		async submit(){
+			this.params.logisticsImages = this.fileList.map(i => i.url);
+			const {error, result} = await ApiPutLogisticsInfo(this.params);
+			if(error){
+				uni.$u.toast(error.message);
+				return false;
+			}
+			this.$emit('reload');
+		}
 	}
 }
 </script>
@@ -90,12 +164,20 @@ export default {
 .box{
 	padding: 0 30rpx;
 }
+.address--icon{
+	width: 40rpx;
+	height: 48rpx;
+	margin-right: 10rpx;
+}
 .title{
 	height: 98rpx;
 	line-height: 98rpx;
 	padding-left: 30rpx;
 	border-bottom: 2rpx solid $color-grey2;
 	color: $color-yellow3;
+	&__normal{
+		color: $color-grey6;
+	}
 }
 .content{
 	padding: 30rpx 30rpx 0;
@@ -123,6 +205,10 @@ export default {
 		color: $color-grey4;
 	}
 }
+.cell-input{
+	text-align: right;
+	flex: 1;
+}
 .cell-textarea{
 	height: 100rpx;
 }

pages/order/saleAfter/saleAfterDetail/index.vue

@@ -2,23 +2,32 @@
  * @Author: ch
  * @Date: 2022-03-31 14:26:09
  * @LastEditors: ch
- * @LastEditTime: 2022-04-14 19:18:28
+ * @LastEditTime: 2022-04-15 11:17:04
  * @Description: file content
 -->
 <template>
 	<view>
-		<StatusTips :data="orderInfo"></StatusTips>
+		<!-- 头部状态信息 -->
-		<AwaitExamine :data="orderInfo" v-if="orderInfo.refundStatus == 1" @reload="getOrderInfo"></AwaitExamine>
+		<StatusTips :data="orderInfo"/>
-		<SubmitLogistics :data="orderInfo" v-if="orderInfo.refundStatus == 3"></SubmitLogistics>
+
-		<LogisticsInfo :data="orderInfo" v-if="[4,5,6].includes(orderInfo.refundStatus)"></LogisticsInfo>
+		<!-- 等待商家通过审核时显示 -->
-		<GoodsInfo :data="orderInfo"></GoodsInfo>
+		<AwaitExamine :data="orderInfo" v-if="orderInfo.refundStatus == 1" @reload="getOrderInfo" />
+
+		<!-- 商家通过，但需要填写物流信息时显示 -->
+		<SubmitLogistics :data="orderInfo" v-if="orderInfo.refundStatus == 3" :company="logisticsCompany" @reload="getOrderInfo" />
+		
+		<!-- 退款完成时显示 -->
+		<LogisticsInfo :data="orderInfo.refundLogistics" v-if="[4,5,6].includes(orderInfo.refundStatus)"/>
+
+		<!-- 退款订单信息 -->
+		<GoodsInfo :data="orderInfo"/>
 	</view>
 </template>
 <script>
+import {ApiGetSaleAfterOrderDetail, ApiGetLogisticsCompanylist} from '@/common/api/order'
 import UiPageHeader from '@/components/UiPageHeader.vue'
 import UiGoodsInfo from '@/components/UiGoodsInfo.vue'
 import UiWhiteBox from '@/components/UiWhiteBox.vue'
-import {ApiGetSaleAfterOrderDetail} from '@/common/api/order'
 import UiButton from '@/components/UiButton.vue'
 import StatusTips from './components/StatusTips.vue'
 import UiCell from '@/components/UiCell.vue'
@@ -33,7 +42,8 @@ export default {
 			orderInfo : {
 				refundProduct:{}
 				
-			}
+			},
+			logisticsCompany : []
 		}
 	},
 	onLoad(){
@@ -49,7 +59,23 @@ export default {
 				uni.$u.toast(error.message);
 				return false;
 			}
-			this.orderInfo = {...result, refundStatus : 3};
+			if(result.refundLogistics){
+				result.refundLogistics.completeReturnRemark = result.completeReturnRemark;
+			}
+			this.orderInfo = {...result};
+
+			// 需要填写物流信息是查询物流公司列表
+			if(result.refundStatus == 3){
+				this.getLogisticsCompanyList()
+			}
+		},
+		async getLogisticsCompanyList(){
+			const {error, result} = await ApiGetLogisticsCompanylist();
+			if(error){
+				uni.$u.toast(error.message);
+				return false;
+			}
+			this.logisticsCompany = [result]
 		}
 		
 	}