food_wechat/pages/order/refund.vue

<template>
	<view>
		<!-- topbar -->
		<u-navbar title="申请退款" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- 申请订单 -->
		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
			<view class="m-b-24 borderBDas flex msb mub">
				<view class="fb fz36 l-h-18">申请订单</view>
				<view class="fcb fz24 l-h-12">订单号：{{order_sn}}</view>
			</view>
			<view class="m-t-24 flex msb">
				<view class="flex3 ofh">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll-view-item_H m-r-12" v-for="(ps,index) in order.product_snapshot"
							:key="index">
							<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
						</view>
					</scroll-view>
				</view>
				<view class="flex1 fcb fz24 flex mr md">
					共{{order.total_num}}件
				</view>
			</view>
			<view class="fz28 borderBDas p-b-12 p-t-12" v-if="order!==null">
				<view class="flex msb l-h-18">
					<view>商品小计</view>
					<view>¥{{order.total_price | formatPrice}}</view>
				</view>
				<view class="flex msb l-h-18">
					<view>外送费</view>
					<view>¥{{order.transport_price | formatPrice}}</view>
				</view>
				<view class="flex msb l-h-18">
					<view>打包服务费</view>
					<view>¥{{order.pack_price | formatPrice}}</view>
				</view>
			</view>
			<view class="flex mr mac l-h-18 m-t-24">
				<view class="fcb fz24">合计</view>
				<view class="m-l-12 fz36 fb" v-if="fullPrice!==null">¥{{fullPrice | formatPrice}}</view>
			</view>
		</view>
		<!-- 退款金额cell -->
		<cell cellTit="申请退款金额" :required="true" @click="handledrRefund_priceShow" conClass="fcm"
			:cellCon="requestRefund_price?'¥'+ requestRefund_price:''"></cell>
		<!-- 退款说明cell -->
		<cell cellTit="退款说明" :required="true" :cellCon="refund_remarkDescription | truncate(8)"
			@click="handledrRefund_remarkShow"></cell>
		<!-- 退款金额折叠层 -->
		<u-popup :show="refund_priceShow" round="10" mode="bottom" @close="closeRefund_price" zIndex="10080"
			:closeable="true">
			<view class="p-24">
				<!-- title -->
				<view class="flex mc md">
					<view class="fz32">申请金额</view>
				</view>
				<!-- form -->
				<view class="ofa m-t-24 m-b-12 flex mub borderBDas" style="max-height: 60vh;">
					<view class="fb fz32">¥</view>
					<u-input placeholder="请输入金额" v-model="requestRefund_price" @blur="onRefundPriceBlur" type="digit"
						border="false" />
				</view>
				<!-- 占位 -->
				<view class="extra-space1"></view>
			</view>
		</u-popup>
		<!-- 退款说明折叠层 -->
		<u-popup :show="refund_remarkShow" round="10" mode="bottom" @close="closeRefund_remark" zIndex="10080"
			:closeable="true">
			<view class="p-24">
				<!-- title -->
				<view class="flex mc md">
					<view class="fz32">退款说明</view>
				</view>
				<!-- list -->
				<view class="ofa m-t-24 m-b-12 flex column" style="max-height: 60vh;">
					<view v-for="(item,index) in refund_remark_presup" :key='index' @click="currentRemark=index"
						class="flex mac msb fz28 borderBDas m-t-12" style="height: 60rpx;">
						<view>{{item}}</view>
						<view class="border rad-c radioBox" :class="currentRemark===index?'border-m bg-m':''">
							<u-icon name="checkbox-mark" size="40rpx" color="#fff"
								v-if="currentRemark===index"></u-icon>
						</view>
					</view>
					<view class="flex mac msb fz28 m-t-12" style="height: 60rpx;"
						@click="currentRemark=refund_remark_presup.length+1">
						<view class="flex mub">
							<view>其他说明</view>
							<view class="fz24 fcb m-l-12" v-if="currentRemark===refund_remark_presup.length+1">
								{{ refund_remarkValue.length }}/{{ txtmaxlength }}
							</view>
						</view>
						<view class="border rad-c radioBox"
							:class="currentRemark===refund_remark_presup.length+1?'border-m bg-m':''">
							<u-icon name="checkbox-mark" size="40rpx" color="#fff"
								v-if="currentRemark===refund_remark_presup.length+1"></u-icon>
						</view>
					</view>
					<view @click="currentRemark=refund_remark_presup.length+1">
						<u-input class="border" v-model="refund_remarkValue" type="textarea" placeholder="请填写您的退款说明"
							:maxlength="txtmaxlength" :border="false" :auto-height="true" />
					</view>
				</view>
				<!-- 占位 -->
				<view class="extra-space1"></view>
			</view>
		</u-popup>
		<!-- 按钮 -->
		<view class="m-l-24 m-r-24 m-t-24 flex mr">
			<view class="nullBut border fcb rad8 fz28 flex mac mc" @click="callPhone(shopCon.tel)">
				联系客服
			</view>
			<view class="numberBut fci rad8 fz28 fb flex mac mc m-l-24" @click="handleSubmit"
				:class="isPressed?'bg-g':'bg-m'">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime,
		formatPrice,
		truncate,
		callPhone
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				order_sn: '', //订单号
				refund_priceShow: false, //退款金额弹出层
				requestRefund_price: null, //申请退款金额

				refund_remark: '', //退款说明 提交时候的值
				refund_remarkShow: false, //退款说明弹出层
				currentRemark: -1, // 当前选中的退款有缘索引
				refund_remarkValue: '', // 退款说明 其他输入的内容
				txtmaxlength: 30, //退款说明 其他文本框最多字数限制

				isPressed: false, //提交按钮是否锁定

			}
		},
		onLoad(options) {
			this.order_sn = options.order_sn // 从提交订单页面传递过来的订单号
			this.requestRefund_price = this.fullPrice //默认申请退款金额 为订单的总金额
		},
		methods: {
			callPhone, //拨打电话
			formatPrice, //格式化价格
			handledrRefund_priceShow() {
				if (!this.requestRefund_price) {
					this.requestRefund_price = this.fullPrice
				}
				this.refund_priceShow = true
			},
			closeRefund_price() {
				this.refund_priceShow = false
			},
			handledrRefund_remarkShow() {
				this.refund_remarkShow = true
			},
			closeRefund_remark() {
				this.refund_remarkShow = false
			},
			// 处理退款金额失焦
			onRefundPriceBlur() {
				// 使用 formatPrice 格式化输入的金额
				this.requestRefund_price = this.formatPrice(this.requestRefund_price)

				// 检查金额是否超过订单总金额
				if (Number(this.requestRefund_price) > Number(this.fullPrice)) {
					this.requestRefund_price = Number(this.fullPrice)
				}
			},
			//提交订单
			handleSubmit() {
				if (this.isPressed) { //防止提交订单按钮重复点击
					return
				}

				this.isPressed = true

				//提交前检查
				if (!this.refund_remarkDescription) {
					uni.showToast({
						title: '请填写退款说明',
						icon: 'error'
					})
					this.isPressed = false
					return
				}
				if (Number(this.requestRefund_price) === 0) {
					uni.showToast({
						title: '请填写退款额',
						icon: 'error'
					})
					this.isPressed = false
					return
				}

				//提交
				uni.$u.http.post('/Api/Check/refundOrder', {
					order_sn: this.order_sn, //订单号
					shop_id: this.$store.state.shop_id, //商铺id
					apply_price: Number(this.requestRefund_price), //申请价格
					refund_remark: this.refund_remarkDescription //退款说明
				}, {
					header: {
						'Token': this.$store.state.userInfo.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					//成功申请退款
					if (res.data.status === 1) {
						//跳转到订单 退款tab页面
						uni.navigateTo({
							url: `/pages/order/index`
						})
					} else if (res.data.status === -1) {
						uni.removeStorage({ //清除用户信息 跳转首页
							key: 'userInfo',
							success: (res) => {
								this.$store.commit('clearUserInfo')
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
						this.isPressed = false
					}
				})
			}
		},
		filters: {
			parseTime, //日期 格式化
			formatPrice, //价格 格式化
			truncate
		},
		watch: {},
		computed: {
			//未付款订单
			order() {
				if (this.order_sn) {
					return this.$store.state.orderList.find(item => item.order_sn === this.order_sn)
				} else {
					return null
				}
			},
			//订单总价格
			fullPrice() {
				if (this.order) {
					return this.formatPrice(Number(this.order.transport_price) + Number(this.order.pack_price) + Number(
						this
						.order.total_price))
				} else {
					return 0
				}

			},
			//商铺信息
			shopCon() {
				return this.$store.state.shopCon
			},
			//退款说明预设列表
			refund_remark_presup() {
				if (this.shopCon !== null && this.shopCon.refund_remark_presup !== '[]') {
					return JSON.parse(this.shopCon.refund_remark_presup)
				} else {
					return []
				}
			},
			//退款说明缩略显示
			refund_remarkDescription() {
				if (this.currentRemark !== -1) {
					if (this.currentRemark === this.refund_remark_presup.length + 1) {
						if (this.refund_remarkValue) {
							return this.refund_remarkValue
						}
					} else {
						return this.refund_remark_presup[this.currentRemark]
					}
				}
				return ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		height: 110rpx;
		line-height: 110rpx;
	}

	.radioBox {
		width: 40rpx;
		height: 40rpx;
	}
</style>