XLJK-web/xinlijiankang-uniapp-main/pages/user/wdhd-tc.vue

<template>
	<view class="ayuu">
 
		<view class="hdtgyyqb">

			<view class="flztoa hdtcuur"  @click="chooseType">
                <view class="fzctob">
                    <view class="hdtcuutxt"><text>申请退出</text></view>
                    <view class=""><text>{{type==1?'我要退出退款':'我要请假'}}</text></view>
                </view>
				<image src="/static/user/hdr1.png" style="width: 48rpx;min-width: 48rpx;height: 48rpx;" mode=""></image>
			</view>
			
			<view class="flztoa hdtcuur" @click="chooseliyou">
				<view class="fzctob">
					<view class="hdtcuutxt"><text>申请原因</text></view>
					<view class="hdtcuutxta"><text>{{liyou[curliyou]}}</text></view>
				</view>
				<image src="/static/user/hdr1.png" style="width: 48rpx;min-width: 48rpx;height: 48rpx;" mode=""></image>
			</view>
		</view>
		
		<view class="flztoa hdtcjr">
			<view class="fsxto">
				<view class="hdtcjra"><text>申请金额</text></view>
				<view class="hdtcjrb"><text>¥{{price}}</text></view>
			</view>
			 
			<!-- <view class="hdtcjrc"><text>修改金额</text></view> -->
			 
		</view>
		
		<view class="hdtcjr">
			<view class="hdtcjra"><text>申请说明</text></view>
			 
			 <view class="hdtcwenh">
				<textarea v-model="content" placeholder-style="color:#999999;font-size: 28rpx;" placeholder="请详细填写申请说明"/>
			 </view>
			 
		</view>
		
		<view class="fzctob hdtcjr">
			<view class="hdtcjra" style="width: 160rpx;"><text>联系电话</text></view>
			<view class="hdtcjra">
                <input type="number" v-model="phone" maxlength="11" placeholder="请输入联系电话">
            </view>
		</view>
		
		<view class="fzddrew fknbee" >
			<view class="fzddrew fkdibr" @click="Refund">
				<text>提交申请</text>
			</view>
		</view>
        <!-- 弹窗  -->
        <u-popup v-model="show" mode="bottom" :mask-close-able="false" safe-area-inset-bottom border-radius="20" >
            <view v-if="picIndex==0">
                <view class="t-title">请选择申请类型</view>
                <view :class="type==1?'apply-item-act':'apply-item'" @click="type=1">
                    我要退出退款
                </view>
                <view :class="type==2?'apply-item-act':'apply-item'" @click="type=2">
                    我要请假
                </view>
            </view>
            <view v-if="picIndex==1">
                <view class="t-title">请选择申请原因</view>
                <view v-for="(item,index) in liyou" :key="index" @click="curliyou = index" :class="index==curliyou?'apply-item-act':'apply-item'">
                    {{item}}
                </view>
            </view>
            <view class="fzddrew fkdibr" @click="show=false" style="margin: auto; margin-top: 300rpx;">
            	<text>确定</text>
            </view>
        </u-popup>
	</view>
</template>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<script>
	export default {
		data() {
			return {
                show:false,
                type:1,    // 退款类型:1=退出退款 2=我要请假
                liyou:[],
                picIndex:0,
                curliyou:0,
                order_id:0,    // 活动订单id
                price:0,       // 订单价格
                content:'',
                phone:''
			}
		},
        onLoad(e) {
            this.order_id = e.order_id
            this.price = e.price
            this.getliyou()
        },
        methods:{
            // 退款类型
            chooseType(){
               this.picIndex = 0
               this.show = true
            },
            // 退款理由
            chooseliyou(){
                this.picIndex = 1
                this.show = true
            },
            // 获取理由
            getliyou(){
                this.$post({
                    data:{
                        do:'RefundInfo'
                    }
                }).then(res=>{
                    console.log(res)
                    this.liyou = res.data
                })
            },
            // 请假 退出
            Refund(){
                if(!this.content){
                    return uni.showToast({
                        title:'请输入退款说明',
                        icon:'none'
                    })
                }
                if(!this.phone){
                    return uni.showToast({
                        title:'请输入联系电话',
                        icon:'none'
                    })
                }
                this.$post({
                    data:{
                        do:'Refund',
                        data:{
                            order_id:this.order_id,
                            type:this.type,
                            reason:this.liyou[this.curliyou],
                            user_id:uni.getStorageSync('id'),
                            content:this.content,
                            phone:this.phone,
                            price:this.price
                        }
                    }
                }).then(res=>{
                    uni.showToast({
                        title:res.message || '申请成功',
                        icon:'none'
                    })
                    setTimeout(()=>{
                        uni.navigateBack()
                    },1500)
                })
            }
        }


	}
</script>
<style scoped>
    .t-title{
        padding: 30rpx 0;
        font-size: 28rpx;
        color: #373737;
        text-align: center;
    }
    .apply-item{
        padding: 20rpx 22rpx;
        border-top: 2rpx solid #F4F4F4;
        font-size: 28rpx;
        color: #333333;
    }
    .apply-item-act{
        padding: 20rpx 22rpx;
        border-top: 2rpx solid #F4F4F4;
        font-size: 28rpx;
        color: #EE3437;
    }
    .apply-item:last-of-type{
        border-bottom: 2rpx solid #F4F4F4;
    }
    .apply-item-act:last-of-type{
        border-bottom: 2rpx solid #F4F4F4;
    }
    
</style>
<style lang="scss" scoped>
	 
</style>