BJ_web_developers / jy_parkingOS

  <template>
      <view>
  

          <uni-section :title="`${cardRuleName}(${cardTypeName})`" type="line">

              <uni-card padding="0" spacing="0">

                  <uni-list>

                      <uni-list-item title="适应车场" :rightText="plName">

                          <text></text>
                      </uni-list-item>

                      <uni-list-item :title="`价格：¥${$common.moneyFormat(price)}/张`" :rightText="`商户库存：${cardNum}张`"></uni-list-item>

                  </uni-list>

              </uni-card>
          </uni-section>
  
  

          <uni-list>
              <uni-list-item title="购买数量">

                  <template v-slot:footer>

                      <uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue"

                                      min="1"/>

                  </template>
              </uni-list-item>

              <uni-list-item title="应付金额">

                  <template v-slot:footer>

                      <text style="color: red">¥{{ $common.moneyFormat(needPay)}}元</text>

                  </template>
              </uni-list-item>

              <uni-list-item title="支付方式" rightText="商户余额"/>

              <uni-list-item note="核对购买信息,卡券概不支持退款">

                  <template v-slot:header>

                      <text style="color: red;padding-right: 10px">温馨提示</text>

                  </template>
              </uni-list-item>
          </uni-list>

          <view class="uni-padding-wrap uni-common-mt">

              <button type="primary" @click="dialogToggle()">立即购买</button>

          </view>

          <view>
              <!-- 提示窗示例 -->
              <uni-popup ref="alertDialog" type="dialog">

                  <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" :content="`确定购买${cardRuleName}(${cardTypeName})${vModelValue}张\\n共支付${$common.moneyFormat(needPay)}元`"
                                    @confirm="dialogConfirm"

                                    @close="dialogClose"></uni-popup-dialog>
              </uni-popup>
          </view>

          <!--<view class="formWrap">-->
              <!--<uni-forms ref="baseForm" :modelValue="baseFormData">-->
                  <!--<uni-forms-item label="车牌号码" required>-->
                      <!--<uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号码"/>-->
                  <!--</uni-forms-item>-->

                  <!--<uni-forms-item label="生效时间">-->
                      <!--<uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp"-->
                                           <!--v-model="baseFormData.datetimesingle"/>-->
                  <!--</uni-forms-item>-->
                  <!--<uni-forms-item label="失效时间">-->
                      <!--<uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp"-->
                                           <!--v-model="baseFormData.datetimesingle"/>-->
                  <!--</uni-forms-item>-->
              <!--</uni-forms>-->
          <!--</view>-->

          <!--<uni-section title="24小时(包天券)" type="line" >-->
          <!--<uni-card padding="0" spacing="0">-->

          <!--<uni-list>-->
          <!--<uni-list-item title="适应车场"   rightText="万达商业广场"  >-->
          <!--<text></text>-->
          <!--</uni-list-item>-->
          <!--<uni-list-item title="价格：¥5/张" rightText="商户库存：0张"></uni-list-item>-->
          <!--</uni-list>-->

          <!--</uni-card>-->
          <!--</uni-section>-->

          <!--<uni-list >-->
          <!--<uni-list-item  title="购买数量" >-->
          <!--<template v-slot:footer>-->
          <!--<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />-->
          <!--</template>-->
          <!--</uni-list-item>-->
          <!--<uni-list-item  title="应付金额"  >-->
          <!--<template v-slot:footer>-->
          <!--<text style="color: red">¥25.00元</text>-->
          <!--</template>-->
          <!--</uni-list-item>-->
          <!--<uni-list-item  title="支付方式" rightText="商户余额" />-->
          <!--<uni-list-item  note="请认真核对购买信息,卡券一经购买概不支持退款" >-->
          <!--<template v-slot:header>-->
          <!--<text style="color: red">温馨提示</text>-->
          <!--</template>-->
          <!--</uni-list-item>-->
          <!--</uni-list>-->

          <!--<view class="uni-padding-wrap uni-common-mt">-->
          <!--<button type="primary" @click="dialogToggle('warn')">立即购买</button>-->
          <!--</view>-->

  
      </view>
  </template>
  
  <script>

  export default {
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {

        vModelValue: 1,

        benginDate: currentDate,
        overDate: currentDate,

        iconType: 'auto', // 图标样式

        datetimesingle: '',
        // 基础表单数据
        baseFormData: {
          name: '',
          datetimesingle: 1627529992399
        },
        // 校验规则
        rules: {
          name: {
            rules: [{
              required: true,
              errorMessage: '车牌号码不能为空'
            }]
          }
        },

        cardTypeName: '',// 卡类型名称
        cardRuleName: '',// 卡名称
        plName: '', // 停车场
        price: '', // 卡价格
        cardNum: '', // 库存
        needPay: 0, // 应付
        cardRuleNo: '',

        plNo:''

      }
    },
    onLoad(params) {
      wx.showShareMenu({
        withShareTicket: true
      })

      let option = JSON.parse(params.optionData)
      console.log(option)
      this.cardRelParkNo = option.cardRelParkNo
      this.cardRuleNo = option.cardRuleNo
      this.cardTypeName = option.cardTypeName
      this.cardRuleName = option.cardRuleName
      this.plName = option.plName
      this.price = option.value
      this.cardNum = option.cardNum
      this.needPay = this.price * this.vModelValue

      console.log(option.plNo)
      this.plNo =  JSON.parse(option.plNo)[0]
      console.log(this.plNo)

    },
    onShow() {
      var me = this;

    },

    mounted() {
      setTimeout(() => {

        this.baseFormData.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
        this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
      }, 500)

    },

    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    methods: {

      tobuy() {
        let that = this
        let paramsData = {

          buyNum: this.vModelValue.toString(),

          totalPrice: this.needPay.toString(),

          cardRelParkNo: this.cardRelParkNo,
          cardRuleNo: this.cardRuleNo
        }
        // 首页信息获取 接口
        that.$myRequest({
          url: that.$common.createCouponOrder,
          method: 'POST',
          data: that.$common.requestSign(paramsData)
        }).then(res => {
          console.log(res)
          let orderId = res.data.orderId
          this.accountPay(orderId)
        })
      },
      accountPay(orderId){
        let that = this
        let paramsData = {
          payType: '35', // '35' 商户余额支付
          paySrcType: '501', // '101' : 停车付款单, '501': '商户优惠券购买'
          orderId: orderId,

          payFee: this.needPay.toString(),
          plNo:this.plNo

        }
        // 首页信息获取 接口
        that.$myRequest({
          url: that.$common.accountPay,
          method: 'POST',
          data: that.$common.requestSign(paramsData)
        }).then(res => {
          console.log(res)
          uni.showToast({
            title: '购买成功',
            icon: 'success',
            duration: 1000
          })

          setTimeout(()=>{

            let pages = getCurrentPages(); // 当前页面
            let beforePage = pages[pages.length - 2]; // 上一页
            beforePage.data.refreshIfNeeded = true;
            // 返回上一页 delta返回的页面数 如果delta大于现有页面数，则返回首页
            uni.navigateBack({ delta: 1 });

          },1000)

  
        })
      },

      changeLog(e) {
        console.log('change事件:', e);
      },

      dialogClose() {
        console.log('点击关闭')
      },
      dialogConfirm() {
        console.log('点击确认')

        this.tobuy()

      },
      dialogToggle(type) {

        this.$refs.alertDialog.open()
      },

      changeValue(value) {
        console.log('返回数值：', value);

        this.vModelValue = value
        this.needPay = this.price * this.vModelValue

      },
      blur(e) {
        console.log('blur:', e);
      },
      focus(e) {
        console.log('focus:', e);
      },

      actionsClick(text) {

        uni.showToast({

          title: text,
          icon: 'none'

        })
      },
      bindPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.index = e.detail.value
      },
      bindPickerChangeWay: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.indexWay = e.detail.value
      },
      bindStartDateChange: function (e) {
        this.benginDate = e.detail.value
      },
      bindEndDateChange: function (e) {
        this.overDate = e.detail.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>

      .formWrap {

          padding: 15px;
          background-color: #fff;
      }
  

      /deep/ .uni-section {

          padding-bottom: 10px;
      }

      /deep/ .uni-dialog-content-text{
          text-align: center;
      }

  </style>