pages/businessCard/buyCard.vue

<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"
                                    :max="cardNum" 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">温馨提示</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: '',
    }
  },
  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
  },
  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,
        totalPrice: this.needPay,
        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
      }
      // 首页信息获取 接口
      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
        })
      })
    },
    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>