jje_uniapp/orderPages/bookService/index.vue

<template>
    <view class="page">
        <view class="flex-col group">
            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务对象</text>
                </view>
                <view class="flex-row justify-between groupItemContent" @click="getServiceObject">
                    <text>{{serviceObject.nickName || '请选择对象' }}</text>
                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                </view>
            </view>

            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务类别</text>
                </view>
                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="storeServiceIndex" :range="storeServiceList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{storeServiceList[storeServiceIndex].typeName || '请选择服务类别' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>
        </view>


        <view class="flex-col group marginTop">

            <view class="flex-row ">
                <view class="hint">
                    <text>!</text>
                </view>
                <view class="hintCentent">
                    <text>需提前一天起预约，取消订单服务需服务前一天取消</text>
                </view>
            </view>

            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务日期</text>
                </view>
                <picker  @change="bindPickerChange1" mode='selector'  range-key="label" :value="periodDateIndex" :range="periodDateList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{periodDateList[periodDateIndex].label || '请选择服务日期' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>

            <view class="flex-col justify-around groupItem">

                <view class="groupItemKey">
                    <text>服务时段</text>
                </view>
                <picker  @change="bindPickerChange2" mode='selector'  range-key="label" :value="periodTimeIndex" :range="periodTimeList">
                    <view class="flex-row justify-between groupItemContent">
                        <text>{{periodTimeList[periodTimeIndex].label || '服务时段' }}</text>
                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                    </view>
                </picker>
            </view>

            <view class="flex-col justify-around groupItem">
                <view class="groupItemKey">
                    <text>服务人员</text>
                </view>
                <view class="flex-row justify-between groupItemContent" @click="chooseServiceTeacher">
                    <text>{{serviceTeacher.title || '请选择服务人员' }}</text>
                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                </view>
            </view>


        </view>
        <view class="flex-col group marginTop">
            <view class="groupItemKey">
                <text>服务定制</text>
            </view>
            <view class="textareaView">
                <textarea v-model="remark" placeholder-style="color:#999999;fontSize:28rpx" placeholder="如有其它特殊需求，请在此输入您的需求"/>
            </view>
        </view>

        <view :style="{'height':'236rpx'}"></view>

        <view class="flex-col  group2 ">
            <view class="btnTitle">
                <text>提交订单之前需支付预约服务费用</text>
            </view>
            <view class="btn flex-row justify-between">
                <view>
                    <text class="title">待支付</text>
                    <text class="num">￥{{price}}</text>
                </view>
                <view class="btnRight" @click="commitOrder">
                    <text>提交</text>
                </view>
            </view>
        </view>

        <uni-popup ref="passwordPopup">
            <view class="passwordView flex-col">
                <view class="h-pay-title flex-row justify-center">
                    <text>请输入交易密码</text>
                </view>
                <view class="h-tab-bar flex-row justify-center">
                    <u-code-input  v-model="password" mode="box" dot></u-code-input>
                </view>
                <view class="flex-row justify-center">
                    <view class="h-operate-btn flex-row justify-center" @click="balancePay">
                        <text>确定</text>
                    </view>
                </view>
            </view>
        </uni-popup>

        <uni-popup ref="popup" type="bottom">

            <view class=" payView">
                <view class="flex-row justify-between">
                    <text class="payType">请选择支付方式</text>
                    <image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
                </view>
                <view class="payTitle">
                    <text>选择微信支付或余额支付</text>
                </view>


                <view class="payItem flex-row justify-between" @click="payItem(1)">
                    <view class="flex-row">
                        <u-icon name="/static/me/u701.png" color="#38db38" size="36"></u-icon>
                        <view class="payName flex-col justify-center">
                            <text>余额支付</text>
                            <text class="balance">可以余额￥{{userInfo.balance || 0}}</text>
                        </view>
                    </view>

                    <view class="flex-col justify-center">
                        <view v-if="curServiceTab === 1" >
                            <u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
                        </view>
                        <view v-else>
                            <u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
                        </view>
                    </view>

                </view>

                <view class="payItem flex-row justify-between" @click="payItem(2)">
                    <view class="flex-row">
                        <u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
                        <view class="payName flex-col justify-center">
                            <text>微信支付</text>
                        </view>
                    </view>
                    <view class="flex-col justify-center">
                        <view v-if="curServiceTab === 2" >
                            <u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
                        </view>
                        <view v-else>
                            <u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
                        </view>
                    </view>
                </view>

                <view class="commitBtn" @click="commonGeneralOrder">
                    <text>确定</text>
                </view>

            </view>

        </uni-popup>

    </view>
</template>

<script>

export default {

    data() {
        return {
            password:'',
            remark:'',
            userInfo:{},
            curServiceTab:1,
            //服务门店
            store:{},
            //服务对象
            serviceObject:{},
            //服务技师
            serviceTeacher:{},
            //服务类型
            storeServiceList:[],
            storeServiceIndex:0,
            //服务时间
            periodDateList:[],
            periodDateIndex:0,
            //服务时段
            periodTimeList:[],
            periodTimeIndex:0,
            //预约费用
            price:'0',
            //订单编号
            orderNo:'',
            subOrderNo:''

        }
    },
    onLoad() {
        this.listServiceObject()
        this.store = uni.getStorageSync('storeInfo')
        this.userInfo = uni.getStorageSync('userInfo')
        // this.storeAllServiceList()
        this.category()
        this.selectDate()
    },

    onShow(){
        // 服务对象
        uni.$off()
        uni.$on('selectedServiceObject', this.selectedServiceObject);
        uni.$on('selectedServiceTeacher', this.selectedServiceTeacher);

    },

    methods: {

        payItem(num){
            if (this.userInfo.balance < this.price){
                return
            }
            this.curServiceTab = num
        },

        //提交订单
        commitOrder(){

            if (!this.serviceTeacher.id){
                uni.$u.toast('请选择服务人员')
                return
            }
            if (this.price > 0){
                this.$refs.popup.open()
                if (this.userInfo.balance < this.price){
                    this.curServiceTab=2
                }
            }else {
                this.commonGeneralOrder()
            }

        },

        closePayPopup(){
            this.$refs.popup.close()
        },

        wechatPay(){
            let that = this;
            // 发起微信支付
            this.$api.wechatPay({
                orderNo:this.subOrderNo
            }).then((res)=>{
                var param = res.data.data;
                uni.requestPayment({
                    appId: param.appid,
                    timeStamp: param.timestamp+"",
                    nonceStr: param.noncestr,
                    package: "prepay_id="+param.prepayid,
                    signType: "RSA",
                    paySign: param.sign,
                    success: res => {
                        uni.showToast({
                            title: '支付成功!'
                        });
                        uni.switchTab({
                            url:'/pages/order/index'
                        })
                    },
                    fail: res => {
                        console.log(res)
                        uni.showModal({
                            content: '支付失败',
                            showCancel: false
                        });
                        uni.switchTab({
                            url:'/pages/order/index'
                        })
                    }
                });
            }).catch(() =>{
                uni.showToast({
                    title: "操作失败"
                })
            });
        },

        //余额支付
        balancePay(){

            let that = this;
            if(this.password.length< 6 ){
                uni.showToast({
                    title: "交易密码不能小于6位"
                })
                return ;
            }
            this.$refs.passwordPopup.close()
            // 用户信息
            this.$api.balancePay({
                orderNo: this.subOrderNo,
                password: this.password
            }).then((res)=>{
                uni.switchTab({
                    url:'/pages/order/index'
                })
                this.getUserInfo()
            }).catch(() =>{
                uni.showToast({
                    title: "操作失败"
                })
            });

        },

        getUserInfo(){
            this.$api.getUserInfo().then(res=>{
                console.log('++++++++++++获取用户信息++++++++++++++++++',res)
                uni.setStorageSync('userInfo',res.data.data)
                this.userInfo = res.data.data
            })

        },

        commonGeneralOrder(){
            this.$refs.popup.close()
          this.$api.commonGeneralOrder({
              orderType: 1,
              serviceObjectId: this.serviceObject.id,
              serviceAttribute: 2,
              serviceStoreId: this.store.storeId,
              serviceTypeId:this.storeServiceList[this.storeServiceIndex].id,
              serviceDate:this.periodDateList[this.periodDateIndex].label,
              serviceUserId:this.serviceTeacher.id,
              serviceStartTime:this.periodTimeList[this.periodTimeIndex].label,
              timeRangeId:this.serviceTeacher.id,
              remark:this.remark
          }).then(res=>{
              this.orderNo=res.data.data.orderNo
              this.subOrderNo=res.data.data.subOrderNo
              if (res.data.data.subOrderNo === null){
                    uni.switchTab({
                        url:'/pages/order/index'
                    })
              }else{
                  if (this.curServiceTab === 1){
                      //开启余额支付密码框
                    this.$refs.passwordPopup.open()

                  }
                  if (this.curServiceTab === 2){
                      //调微信支付
                      this.wechatPay()
                  }
              }

          })
        },




        //获取预约费用
        getAppointmentPrice(){
            this.$api.getAppointmentPrice({
                auth: true,
                storeId: this.store.storeId,
                date: this.periodDateList[this.periodDateIndex].label,
                timeRangeId: this.periodTimeList[this.periodTimeIndex].value,
                servicePersonId:  this.serviceTeacher.id,
                serviceProjectId:this.storeServiceList[this.storeServiceIndex].id
            }).then(res=>{
                this.price= res.data.data.price
            })
        },

        //选择服务人员
        chooseServiceTeacher(){

            if (this.periodDateList.length <=0 || this.periodTimeList.length<=0){
                uni.$u.toast('请选择服务时间')
            }
            uni.navigateTo({
                url: '/orderPages/serviceTeacher/index?organization='+this.store.storeId + '&schedulingDate=' +this.periodDateList[this.periodTimeIndex].label + '&periodId='+this.periodTimeList[this.periodTimeIndex].value
            })
        },

        //获取排班日期
        selectDate(){
            console.log(this.store)
            this.$api.selectDate({
                organization:this.store.storeId
            }).then(res =>{
                this.periodDateList = res.data.data
                this.selectPeriodByDate(res.data.data[0].label)
            })
        },

        //获取门店排班时段
        selectPeriodByDate(date){
            this.$api.selectPeriodByDate({
                organization:this.store.storeId,
                schedulingDate:date
            }).then(res =>{
                this.periodTimeList = res.data.data
                if (this.periodTimeList.length===0){
                    uni.$u.toast('暂无排班时段')
                }
            })
        },

        // 查询服务对像信息列表
        listServiceObject(){
            this.$api.listServiceObject(this.reqParm).then((res)=>{
                this.serviceObject = res.data.data[0]
            }).catch((err) =>{
                uni.showToast({
                    title: "操作失败"
                })
            });
        },

        getServiceObject(){
            uni.navigateTo({
                url:'/orderPages/serviceObject/index'
            })
        },
        selectedServiceObject(e){
            this.serviceObject = e
        },

        selectedServiceTeacher(e){
            this.serviceTeacher = e
            this.getAppointmentPrice()
        },

        bindPickerChange(e){
            this.storeServiceIndex= e.detail.value
            console.log(e)
        },
        bindPickerChange1(e){
            this.periodDateIndex= e.detail.value
            this.selectPeriodByDate(this.periodDateList[e.detail.value].label)
            console.log(e)
        },
        bindPickerChange2(e){
            this.periodTimeIndex= e.detail.value
            console.log(e)
        },

        category(){
            this.$api.category({storeId:this.store.storeId}).then(res=>{
                this.storeServiceList= res.data.data
            })

        },

    }
}
</script>

<style scoped lang="scss">
    @import '/common/css/common.css';
    @import './index.rpx.scss';
</style>