shangmenanmo/user/pages/order/refund.vue

<template>
	<view class="user-order-refund" v-if="detail.id">
		<view class="item-child mt-md ml-lg mr-lg pd-lg fill-base radius-16">
			<view class="flex-between pb-lg b-1px-b">
				<view class="f-paragraph c-title max-380 ellipsis">订单号：{{detail.order_code}}</view>
				<view class="f-caption text-bold"
					:style="{color:detail.pay_type==2?primaryColor: detail.pay_type<6?subColor: detail.pay_type == 6 ? '#11C95E' : '#333'}">
					{{statusType[detail.pay_type]}}
				</view>
			</view>
			<block v-for="(item,index) in detail.order_goods" :key="index">
				<view @tap="handerRadioChange(index)" class="item-child flex-center mt-lg"
					v-if="item.can_refund_num > 0">
					<i class="iconfont mr-md" :class="[{'icon-xuanze':!item.checked},{'icon-xuanze-fill':item.checked}]"
						:style="{color:item.checked ? primaryColor : ''}"></i>
					<view class="flex-1">
						<view class="flex-warp">
							<!-- #ifdef H5 -->
							<view class="goods-img radius-16">
								<view class="h5-image goods-img radius-16"
									:style="{ backgroundImage : `url('${item.goods_cover}')`}">
								</view>
							</view>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<image mode="aspectFill" class="goods-img radius-16" :src="item.goods_cover"></image>
							<!-- #endif -->

							<view class="flex-1 ml-md max-380">
								<view class="f-title c-title text-bold max-450 ellipsis">{{item.goods_name}}</view>
								<view class="f-caption c-caption">
									服务{{$t('action.attendantName')}}：{{detail.coach_info ? detail.coach_info.coach_name : '-'}}
								</view>
								<view class="f-caption c-caption">{{detail.start_time}}</view>
								<view class="f-caption c-caption" v-if="item.material_price*1>0">
									物料费：¥{{item.material_price}}
								</view>
								<view class="flex-between">
									<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title text-bold">
											{{item.true_price}}
										</view>
									</view>
									<view class="flex-warp" v-if="item.can_refund_num > 1">
										<button @tap.stop="changeNum(index,-1)" class="reduce"
											:style="{borderColor:primaryColor,color:primaryColor}"><i
												class="iconfont icon-jian-bold"></i></button>
										<button class="addreduce clear-btn">{{item.apply_num}}</button>
										<button @tap.stop="changeNum(index,1)" class="add"
											:style="{background:primaryColor,borderColor:primaryColor}"><i
												class="iconfont icon-jia-bold"></i></button>
									</view>
									<view class="c-paragraph" v-else>x{{item.apply_num}}</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="mt-lg pt-lg pb-lg f-paragraph c-title b-1px-t"
				v-if="detail.can_refund_material_price || (detail.can_refund_car_price &&  detail.car_price*1>0)">
				<view class="flex-between">
					<view>服务金额</view>
					<view>¥{{detail.can_refund_price}}</view>
				</view>
				<view class="flex-between mt-sm" v-if="detail.can_refund_material_price">
					<view>物料费</view>
					<view>¥{{detail.can_refund_material_price}}</view>
				</view>
				<view class="flex-between mt-sm" v-if="detail.can_refund_car_price &&  detail.car_price*1>0">
					<view class="flex-y-baseline">车费<view class="f-icontext c-warning ml-sm">
							{{$t('action.attendantName')}}出发前全部服务退款将退还
						</view>
					</view>
					<view>¥{{detail.car_price}}</view>
				</view>
			</view>
			<view class="pt-lg f-paragraph c-title flex-between b-1px-t">
				<view>合计</view>
				<view class="f-title c-warning text-bold">
					{{`${can_refund_price}元`}}
				</view>
			</view>
		</view>
		<view class="item-child mt-md ml-lg mr-lg pd-lg fill-base radius-16">
			<view class="flex-between pb-lg f-title c-title text-bold">退款原因</view>
			<view class="textarea-info f-caption c-caption radius-16">
				<textarea v-model="form.text" class="input-textarea f-paragraph pd-lg" placeholder-class="f-paragraph"
					maxlength="300" placeholder="输入退款原因" />
				<view class="text-right pb-lg pr-lg">{{form.text.length>300?300:form.text.length}}/300</view>
			</view>
		</view>
		<view class="item-child mt-md ml-lg mr-lg pt-lg pl-lg pr-lg fill-base radius-16">
			<view class="flex-between pb-sm f-title c-title text-bold">上传图片</view>
			<view class="flex-between pt-sm">
				<upload @del="imgDel" @upload="imgUpload" :imagelist="form.imgs" imgtype="imgs" imgclass="mini"
					text="添加照片" :imgsize="5"></upload>
			</view>
			<view class="space-lg" v-if="form.imgs.length == 0"></view>
			<view class="space-sm" v-else></view>
		</view>

		<view class="space-max-footer"></view>

		<view class="refund-bottom-info fill-base fix pl-lg pr-lg">
			<view class="flex-between">
				<view @tap="selectAllItem" class="flex-y-center"><i class="iconfont mr-sm"
						:class="[{'icon-xuanze':!selectAll},{'icon-xuanze-fill':selectAll}]"
						:style="{color:selectAll? primaryColor : ''}"></i>
					全选
				</view>
				<view class="text-right flex-center">
					<view class="flex-y-center">
						<view class="f-caption c-caption mr-sm">共{{total_refund_num}}件</view>
						退款金额<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title text-bold">
								{{total_refund_price}}
							</view>
						</view>
					</view>
					<button @tap.stop="toSubmit" class="clear-btn order"
						:style="{color:'#fff',background:primaryColor,borderColor:primaryColor}">提交申请</button>
				</view>
			</view>
			<view class="space-safe"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				detail: {},
				statusType: {
					'-1': '已取消',
					1: '待支付',
					2: '待服务',
					3: this.$t('action.attendantName') + '接单',
					4: this.$t('action.attendantName') + '出发',
					5: this.$t('action.attendantName') + '到达',
					6: '服务中',
					7: '已完成',
					8: '已评价',
				},
				total_refund_num: 0,
				total_refund_price: 0,
				can_refund_num: 0,
				can_refund_price: 0,
				selectAll: false,
				selectAdd: false,
				form: {
					text: '',
					imgs: []
				},
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				let {
					id
				} = this.options
				let data = await this.$api.order.orderInfo({
					id
				})
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})

				let {
					car_price,
					can_refund_car_price = 0
				} = data

				let num = 0
				let can_refund_price = 0
				let can_refund_material_price = 0
				data.order_goods.map(item => {
					num += item.can_refund_num
					item.apply_num = item.can_refund_num
					item.checked = item.can_refund_num < 1
					if (item.apply_num > 0) {
						can_refund_price += item.true_price * item.apply_num
						can_refund_material_price += item.material_price * item.apply_num
					}
				})
				let total_price = (can_refund_price * 1).toFixed(2)
				let material_price = (can_refund_material_price * 1).toFixed(2)
				data.can_refund_price = total_price
				data.can_refund_material_price = material_price
				this.detail = data
				this.can_refund_num = num
				let car_total_price = can_refund_car_price ? car_price : 0
				this.can_refund_price = (total_price * 1 + material_price * 1 + car_total_price * 1).toFixed(2)
			},
			initRefresh() {
				this.initIndex(true)
			},
			imgDel(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			handerRadioChange(index) {
				let item = this.detail.order_goods[index];
				if (item.can_refund_num < 1) return
				let newChecked = !item.checked;
				this.detail.order_goods[index].checked = newChecked;
				this.checkIsSelectAll();
			},
			handerAddRadioChange() {
				let {
					add_price
				} = this.detail
				if (!add_price * 1) return
				this.selectAdd = !this.selectAdd
				this.checkIsSelectAll()
			},
			async changeNum(index, mod) {
				let item = this.detail.order_goods[index];
				let num = item.apply_num + mod;
				if (num < 1) {
					this.$util.showToast({
						title: `此商品最少可退1件`
					})
					return;
				}
				if (num > item.can_refund_num) {
					this.$util.showToast({
						title: `此商品最多可退${item.can_refund_num}件`
					})
					return;
				}
				this.detail.order_goods[index].apply_num = num;
				this.countPrice();
			},
			selectAllItem() {
				this.detail.order_goods.map((item) => {
					if (item.can_refund_num < 1) return
					item.checked = !this.selectAll
				})
				this.checkIsSelectAll();
			},
			checkIsSelectAll() {
				let list = []
				this.detail.order_goods.map(item => {
					if (item.can_refund_num < 1) return
					list.push(item)
				})
				this.selectAll = list.every((item) => {
					return item.checked
				})
				this.countPrice();
			},
			countPrice() {
				let {
					can_refund_num
				} = this
				let {
					car_price,
					can_refund_car_price = 0
				} = this.detail
				let price = 0
				let num = 0
				let list = []
				this.detail.order_goods.forEach(item => {
					if (item.can_refund_num < 1) return
					list.push(item)
				})
				list.forEach((item, index) => {
					if (item.checked) {
						price += parseFloat(item.true_price * 1 + item.material_price * 1) * item.apply_num;
						num += item.apply_num
					}
				})
				let total_price = price.toFixed(2) * 1
				this.total_refund_num = num
				this.total_refund_price = can_refund_car_price && can_refund_num == num ? (total_price +
					car_price * 1).toFixed(2) : total_price
			},
			// 提交申请
			async toSubmit() {
				let {
					id: order_id,
					order_goods,
				} = this.detail
				let list = []
				order_goods.filter(item => {
					if (item.checked) {
						if (item.apply_num < 1) return
						list.push({
							id: item.id,
							num: item.apply_num
						})
					}
				})
				if (list.length < 1) {
					this.$util.showToast({
						title: `请选择商品`,
					});
					return
				}
				let param = this.$util.deepCopy(this.form)
				if (!param.text) {
					this.$util.showToast({
						title: `请输入退款原因`,
					});
					return
				}
				param.imgs = param.imgs.length > 0 ? param.imgs.map(item => {
					return item.path
				}) : []
				param = Object.assign({}, param, {
					order_id,
					list
				})

				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.order.applyOrder(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`,
					});
					this.lockTap = false
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		}
	}
</script>


<style lang="scss">
	.user-order-refund {


		.item-child {

			.icon-xuanze,
			.icon-xuanze-fill {
				font-size: 38rpx;
			}

			.goods-img {
				width: 172rpx;
				height: 172rpx;
			}

			.goods-spe {
				height: 44rpx;
				line-height: 44rpx;
				background: #F7F7F7;
			}

			.goods-num {
				width: 200rpx;
			}


			.textarea-info {
				background: #F7F7F7;

				.input-textarea {
					width: 570rpx;
					height: 300rpx;
				}
			}


		}

		.refund-bottom-info {
			bottom: 0;

			.iconfont {
				font-size: 38rpx;
			}

			.text-right {
				height: 110rpx;

				.order {
					margin-top: 0;
					border-radius: 30rpx;
				}
			}

		}
	}
</style>