zh_order_food_xcx/pages-buy/group-refund.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav title="申请退款" leftIconColor="#333" titleColor="#333" bgckgroundBox='transparent'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css p-24 box-border-box" @scrolltolower="scrolltolower">
			<view class="b-rad-20 bgc-f p-24 box-border-box">
				<view class="align-items-center p-b-20 mb-20 b-b-F9F9F9">
					<image :src="goods_info.goods_img" mode="scaleToFill" class="goods-img mr-24"></image>
					<view class="fs-28 fc-3 fw-500">
						{{goods_info.goods_name}}
					</view>
				</view>
				<view class="align-items-center flex-justify-space p-b-20 mb-20 b-b-F9F9F9">
					<view class="">
						<view class="mb-8 fs-30 fc-3 fw-b">
							退款数量
						</view>
						<view class="fs-24 fc-9">
							最多可退 {{(Number(this.goods_info.goods_number) - Number(this.goods_info.finish_number))}} 张
						</view>
					</view>
					<view class="align-items-center">
						<image src="@/static/img/takeout/j.png" mode="" class="j" @click="setNum(1)"></image>
						<input type="number" v-model="fromData.number" class="input" @blur='blur' />
						<image src="@/static/img/takeout/add.png" mode="" class="j" @click="setNum(2)"></image>
					</view>
				</view>
				<view class="p-b-20 mb-20 b-b-F9F9F9">
					<view class="align-items-center flex-justify-space mb-8">
						<view class="fs-30 fc-3 fw-b">
							退款金额
						</view>
						<view class="fs-20 fw-600 fc-41ABF5">
							¥<span
								class="fs-34 fw-600 fc-41ABF5">{{(Number(goods_info.goods_price) * Number(fromData.number)).toFixed(2)}}</span>
						</view>
					</view>
					<view class="fs-22 fc-9">
						1-3 个工作日退还至原支付方，以实际退款金额为准
					</view>
				</view>
				<view class="align-items-center flex-justify-space">
					<view class="fs-30 fc-3 fw-b flex-shrink0">
						退款原因
					</view>
					<view class="align-items-center flex-justify-end flex-1" @click="openPop">
						<view class="fs-26 fc-3 mr-8">
							{{refund_id != 0?fromData.refund_msg:'请选择'}}
						</view>
						<uni-icons type="right" size="13" color='#333'></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bgc-f p-24 box-border-box align-items-flex-end flex-justify-space">
			<view class="fs-34 fw-600 fc-41ABF5">
				<span class="fs-24 fc-41ABF5 fw-400 mr-12">退款金额</span>
				<span class="fs-20 fw-600 fc-41ABF5">￥</span>
				{{(Number(goods_info.goods_price) * Number(fromData.number)).toFixed(2)}}
			</view>
			<view class="but bgc-41ABF5 fc-f b-rad-200 text-align-center fs-34" @click="groupOrderRefund">
				提交
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color='#fff'>
			<view class="pop-box p-24 box-border-box">
				<view class="fs-30 fc-3 fw-b mb-20 text-align-center">
					退款原因
				</view>
				<uni-icons class="pop-gb" type="closeempty" size="20"></uni-icons>
				<view class="scroll-view-css">
					<view class="align-items-center flex-justify-space p-24 box-border-box"
						v-for="(item,index) in refund_reason" :key="index" @click="popSelect(item.id,index)">
						<view class="fs-30" :class="refund_id == item.id?'fc-41ABF5':'fc-3'">
							{{item.refund_msg}}
						</view>
						<uni-icons color='#41ABF5' v-if="refund_id == item.id" type="checkbox-filled"
							size="20"></uni-icons>
						<uni-icons color='#333' v-else type="circle" size="20"></uni-icons>
					</view>
				</view>
				<view class="align-items-center p-24 box-border-box">
					<view class="pop-b flex-1 mr-16 text-align-center fs-30 fc-3 b-rad-200 bgc-E6E6E6" @click="popOn">
						取消
					</view>
					<view class="pop-b flex-1 text-align-center fs-30 fc-f b-rad-200 bgc-41ABF5" @click="popOk">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		groupOrderInfo,
		groupOrderRefund
	} from "@/api/groupOrder.js"
	import {
		commonRefundReason
	} from "@/api/common.js"
	import tools from "@/service/tools";
	export default {
		components: {},
		data() {
			return {
				fromData: {
					order_id: 0,
					number: 1,
					refund_msg: '请选择'
				},
				refund_id: 0,
				refund_index: 0,
				refund_reason: [],
				goods_info: {},
				is_ajax: false
			};
		},
		onLoad(data) {
			if (data) {
				this.fromData.order_id = data.order_id
				this.groupOrderInfo()
				this.commonRefundReason()
			}
		},
		mounted() {},
		methods: {
			groupOrderRefund() {
				if (this.refund_id === 0) {
					tools.error('请选择退款原因')
					return
				}
				if (this.is_ajax) {
					return
				}
				this.is_ajax = true
				groupOrderRefund(this.fromData).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg)
						this.is_ajax = false
						setTimeout(() => {
							uni.$emit('groupRefund', this.fromData.order_id)
							tools.leftClick()
						}, 1000)
					} else {
						tools.error(res.msg)
						this.is_ajax = false
					}
				})
			},
			popOk() {
				this.$refs.popup.close()
				this.fromData.refund_msg = this.refund_reason[this.refund_index].refund_msg
			},
			popSelect(id, index) {
				this.refund_id = id
				this.refund_index = index
			},
			commonRefundReason() {
				commonRefundReason().then((res) => {
					if (res.code === 1) {
						this.refund_reason = res.data
					}
				})
			},
			openPop() {
				this.$refs.popup.open()
			},
			popOn() {
				this.$refs.popup.close()
			},
			blur() {
				if (this.fromData.number >= (Number(this.goods_info.goods_number) - Number(this.goods_info
						.finish_number))) {
					tools.error('退款数量最大为' + (Number(this.goods_info.goods_number) - Number(this.goods_info.finish_number)))
					this.fromData.number = (Number(this.goods_info.goods_number) - Number(this.goods_info.finish_number))
				} else if (this.fromData.number <= 0) {
					tools.error('退款数量最少为1')
					this.fromData.number = 1
				}
			},
			setNum(num) {
				if (num === 1) {
					// 减
					if (this.fromData.number <= 1) {
						tools.error('退款数量最少为1')
						return
					}
					--this.fromData.number
				} else {
					// 加
					if (this.fromData.number >= (Number(this.goods_info.goods_number) - Number(this.goods_info
							.finish_number))) {
						tools.error('退款数量已是最大值')
						return
					}
					++this.fromData.number
				}
			},
			scrolltolower() {
				console.log('触底');
			},
			groupOrderInfo() {
				groupOrderInfo({
					order_id: this.fromData.order_id
				}).then((res) => {
					if (res.code === 1) {
						this.goods_info = res.data
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pop-b {
		height: 60rpx;
		line-height: 60rpx;
	}

	.pop-box {
		max-height: 60vh;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.pop-gb {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}

	.but {
		width: 40%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.goods-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
	}

	.j {
		width: 40rpx;
		height: 40rpx;
	}

	.input {
		max-width: 50rpx;
		margin: 0 10rpx;
		text-align: center;
	}
</style>