jje_uniapp/orderPages/bookService/index.vue

<template>
  <view class="page">
    <view class="flex-col group">
      <view class="flex-col justify-around groupItem1">
        <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>
        <text class="text_5">娇宝，此排队提交后只针对一个服务对象，服务对象指接受娇骄儿理发服务的儿童</text>
      </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>娇宝，提前10分钟到哟，一人一号过号需要重新取号排队！等你哟</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.personName || '请选择服务人员' }}</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 flex-row">
        <u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18" @click="selectChange"></u-icon>
        <u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
        <text :style="{'margin-left':'10rpx'}">请阅读并同意</text>
        <text :style="{'color':'red'}" @click="goTermsOfService">《预约需知》</text>
      </view>
<!--      <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: '',
      selectIcon:true
    }
  },
  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: {

    goTermsOfService(){
      uni.navigateTo({
          url:'/myPages/TermsOfService/index?name='+'预约需知'+'&type=' + 5
      })
    },

    selectChange(){
        this.selectIcon = !this.selectIcon
    },

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

    //提交订单
    commitOrder() {

      if(!this.selectIcon){
        uni.$u.toast('请阅读并同意《预约需知》')
        return;
      }

      if (!this.serviceObject) {
        uni.$u.toast('请选择服务对象')
        return
      }

      if (!this.serviceTeacher.personId) {
        uni.$u.toast('请选择服务人员')
        return
      }
      if (this.price*1 > 0) {
        this.$refs.popup.open()
        if (this.userInfo.balance*1 < this.price*1) {
          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: '支付成功!'
            });
            setTimeout(res => {
              uni.switchTab({
                url: '/pages/order/index'
              })
            }, 1000)
          },
          fail: res => {
            console.log(res)
            uni.showModal({
              content: '支付失败',
              showCancel: false
            });

            setTimeout(res => {
              uni.switchTab({
                url: '/pages/order/index'
              })
            }, 1000)

          }
        });
      }).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: ''
      }).then((res) => {
        that.$refs.popup.close()
        uni.showToast({
          title: '支付成功!'
        });

        setTimeout(res => {
          uni.switchTab({
            url: '/pages/order/index'
          })
        }, 1000)


        this.getUserInfo()
      }).catch((res) => {
        console.log(res)
        that.$refs.popup.close()
        let msg = res.data.msg || '操作失败';
        uni.showToast({
          title: msg,
          icon: 'error'
        })

        // setTimeout(res=>{
        //     uni.switchTab({
        //         url:'/pages/order/index'
        //     })
        // },1000)
      });

    },

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

    },

    commonGeneralOrder() {
      if(this.requestStatus){
        return;
      }
      this.requestStatus=true
      this.$refs.popup.close()
      this.requestStatus=false
      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.personId,
        serviceStartTime: this.periodTimeList[this.periodTimeIndex].label,
        timeRangeId: this.serviceTeacher.crewPeriodId,
        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()

            this.balancePay()

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

      })
    },


    //获取预约费用
    getAppointmentPrice() {
      this.$api.getAppointmentPrice({
        storeId: this.store.storeId,
        date: this.periodDateList[this.periodDateIndex].label,
        timeRangeId: this.serviceTeacher.crewPeriodId,
        servicePersonId: this.serviceTeacher.personId,
        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('请选择服务时间')
      }
      console.log("a->", this.periodTimeIndex)
      console.log("b->", this.periodTimeList)
      uni.navigateTo({
        url: '/orderPages/serviceTeacher/index?organization=' + this.store.storeId
                + '&schedulingDate=' + this.periodDateList[this.periodDateIndex].label
                + '&time=' + this.periodTimeList[this.periodTimeIndex].value
                + '&serviceTypeId=' + this.storeServiceList[this.storeServiceIndex].id
      })
    },

    //获取排班日期
    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)
        this.getServiceTime(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('暂无排班时段')
    //         }
    //     })
    // },

    //获取门店排班时段
    getServiceTime(date) {
      this.$api.getServiceTime({
        storeId: this.store.storeId,
        date: date,
        serviceTypeId:this.storeServiceList[this.storeServiceIndex].id
      }).then(res => {
        this.periodTimeList = res.data.data
        if (this.periodTimeList.length === 0) {
          uni.$u.toast('暂无排班时段')
        }
      })
    },

    // 查询服务对像信息列表
    listServiceObject() {
      this.$api.listServiceObject({}).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.serviceTeacher = {}
      this.storeServiceIndex = e.detail.value
      console.log(e)
      this.selectDate()
    },
    //服务日期发生改变
    bindPickerChange1(e) {
      this.periodDateIndex = e.detail.value
      this.getServiceTime(this.periodDateList[e.detail.value].label)
      this.serviceTeacher = {};
      console.log(e)
    },

    //服务时段发生改变
    bindPickerChange2(e) {
      this.periodTimeIndex = e.detail.value
      this.serviceTeacher = {}
      console.log(e)
    },

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

    },

  }
}
</script>

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