mplace_source/pages/order/refund.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack title="申请退款">
			<block slot="content">申请退款</block>
		</bar-title>
		
		<view class="cu-form-group margin-top">
			<view class="title">申请类型</view>
			<picker @change="typePickerChange" :value="typeIndex" :range="type" range-key="name">
				<view class="picker">
					{{type[typeIndex] && type[typeIndex].name}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">申请原因</view>
			<picker @change="descPickerChange" :value="descIndex" :range="desc_type" range-key="name">
				<view class="picker">
					{{desc_type[descIndex] && desc_type[descIndex].name}}
				</view>
			</picker>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">退货数量</view>
			<input placeholder="请输入新昵称" v-model="name"></input>
		</view> -->
		<view class="cu-form-group">
			<view class="title">申请金额</view>
			￥<input placeholder="请输入退款金额" v-model="cash"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">申请说明</view>
		</view>
		<view class="cu-form-group" style="position: relative;">
			<textarea v-model="desc" placeholder="优秀的用户会这么写。例如:我是XX熊，最爱收集各种闲置物品，交朋友。在架的宝贝都可以交易，快来联系我吧!"/>
			<text class="text-gray font-num-view">0 / 300</text>
		</view>
		
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" style="padding: 20upx;">
			<view class="flex flex-direction">
				<button class="cu-btn bg-red" @click="submit">提交</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle
		},
		data() {
			return {
				id: '',
				info: {},
				desc_type: [],
				type: [],
				typeIndex: 0,
				descIndex: 0, 
				name: '',
				cash: '',
				desc: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.loadInfo()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			typePickerChange(e) {
				this.typeIndex = e.detail.value
			},
			descPickerChange(e) {
				this.descIndex = e.detail.value
			},
			loadInfo() {
				this.reqByuser({
					url: '?l=resource.applyRefund', 
					data: {
						type: 3,
						id: this.id
					},
					success: res => {
						if(res.data.status == 1) {
							this.info = res.data.data.detail;
							this.type = res.data.data.type;
							this.desc_type = res.data.data.desc_type;
							this.cash = res.data.data.cash;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			submit() {
				uni.showModal({
					title: '提示',
					content: '确定要退款吗？',
					success: res => {
						if (res.confirm) {
							this.reqByuser({
								url: '?l=resource.applyRefundAct', 
								data: {
									type: 3,
									id: this.id,
									cash: this.cash,
									apply_type: this.type[this.typeIndex].id,
									desc_type: this.desc_type[this.descIndex].id,
									desc: this.desc
								},
								success: res => {
									if(res.data.status == 1) {
										console.log(res.data.data)
									}else {
										uni.showToast({
											icon: 'error',
											title: res.data.msg
										})
									}
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	.cu-form-group {
		textarea {
			height: 8.6em;
		}
		.font-num-view {
		    position: absolute;
		    bottom: 9.09upx;
		    right: 27.27upx;	
		}
	}
</style>