CjyTravel/subPageC/bookHomestay/bookHomestay.vue

<template>
  <view class="v-pages-bg bgcolor p-b-24">
    <view class="v-card small container-fluid m-t-24">
      <view class="v-form-date row flex-align-center">
        <view class="start"><text class="date">{{orderInfo.startDate1}}</text></view>
        <text class="mid">{{orderInfo.dayNum}}晚</text>
        <view class="end"><text class="date">{{orderInfo.endDate1}}</text></view>
      </view>
      <view class="card-form-title">
        {{orderInfo.houseName}}
      </view>
      <view class="v-form-tip">
        <!-- <text
          v-if="orderInfo.bedNum">{{orderInfo.bedNum}}张床{{orderInfo.bedWide}}米宽{{orderInfo.houseNam}}</text> -->
        <text v-if="orderInfo.guest">{{orderInfo.guest}}人入住</text> <text
          v-if="orderInfo.houseArea">{{orderInfo.houseArea}}㎡</text>
      </view>
    </view>

    <view class="v-card small container-fluid m-t-24">
      <view class="card-title m-b-24">
        <view class="text"><text>入住信息</text></view>
      </view>
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <!-- 整套民宿预定，暂时不显示房间数量 -->
        <!-- <uni-forms-item label="房间数量" name="roomNumber">
          <uni-easyinput class="v-input" type="number" :inputBorder="false" v-model="formData.roomNumber"
            placeholder="请输入房间数量" />
        </uni-forms-item> -->
        <uni-forms-item label="入住人" name="phoneNumber">
          <uni-easyinput class="v-input" :inputBorder="false" v-model="formData.phoneNumber"
                         placeholder="请输入入住人姓名" />
        </uni-forms-item>
        <uni-forms-item label="身份证" name="idtype">
          <uni-easyinput class="v-input" :inputBorder="false" v-model="formData.idtype"
                         placeholder="请输入身份证号码" />
        </uni-forms-item>
        <uni-forms-item label="联系手机" type="number" name="idCardNumber">
          <uni-easyinput class="v-input" :inputBorder="false" v-model="formData.idCardNumber"
                         placeholder="请输入手机号码" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="v-card small container-fluid m-t-24">
      <view class="card-title">
        <view class="text"><text>发票服务</text></view>
      </view>
      <view class="m-t-24 v-form-content">如需发票，请向民宿前台索取。</view>
    </view>
    <view class="v-card small container-fluid m-t-24">
      <view class="card-title">
        <view class="text"><text>下单说明</text></view>
      </view>
      <view class="m-t-24 v-form-content">订单需等待商家确认后才生效，订单确认结果以平台订单信息为准。</view>
    </view>
    <view class="v-order-submit row flex-align-center">
      <view class="col price">
        <text class="pre">总价</text>
        <text class="text">&yen;</text>
        <text class="number">{{orderInfo.housePrice}}</text>
      </view>
      <view class="btn" @click="orderSubmit">提交订单</view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {},
      formData: {
        roomNumber: 1, //整套逻辑，暂定房间数为1
        phoneNumber: undefined,
        idtype: undefined,
        idCardNumber: undefined,
      },
      rules: {
        // 对name字段进行必填验证
        roomNumber: {
          rules: [{
            required: true,
            errorMessage: '房间数量不能为空！',
          }]
        },
        // 对email字段进行必填验证
        phoneNumber: {
          rules: [{
            required: true,
            errorMessage: '入住人姓名不能为空！',
          }]
        },
        // 对email字段进行必填验证
        idtype: {
          rules: [{
            required: true,
            errorMessage: '身份证号码不能为空！',
          },
            {
              validateFunction: function(rule, value, data, callback) {
                const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
                if (reg.test(value) == false) {
                  callback('请输入正确的身份证号码！')
                }
                return true
              }
            }
          ]
        },
        // 对email字段进行必填验证
        idCardNumber: {
          rules: [{
            required: true,
            errorMessage: '联系手机不能为空！',
          },
            {
              validateFunction: function(rule, value, data, callback) {
                const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
                if (reg.test(value) == false) {
                  callback('请输入正确的手机号码！')
                }
                return true
              }
            }]
        }
      }
    }
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.form.setRules(this.rules)
  },
  onLoad(options) {
    const ticket = JSON.parse(decodeURIComponent(options.ticket));
    this.orderInfo = ticket
    console.log("===", this.orderInfo)
  },
  methods: {
    orderSubmit() {
      this.$refs.form.validate().then(res => {

        const userInfo = uni.getStorageSync("userInfo");
        const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
        let appId = extConfig.app_id

        const params = {
          openid: userInfo.openid,
          appid: appId,
          tenantId: this.tentId,
        };

        var data = {
          "hotelId": this.orderInfo.hotelId,
          "hotelName": this.orderInfo.hotelName,
          "orderAmount": this.orderInfo.housePrice,
          "checkTime": this.orderInfo.startDate,
          "checkOutTime": this.orderInfo.endDate,
          "bedId": this.orderInfo.id,
          "roomsNums": Number(this.formData.roomNumber),

          "mobile": "15512225250",
          "openid": "111",
          "appid": "2",
          "tenantId": "1",

          "checkInPersonInfoDTOList": this.formData
        };


        uni.navigateTo({
          url: "/subPageC/orderHomestay/order?data="
        });

        this.$Request.post(this.$config.createHotelOrder, data, 'json', null, false, null).then((res) => {
          console.log("asdf", res)
        });

      }).catch(err => {
        console.log('表单错误信息：', err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.uni-forms-item {
  margin-bottom: 10rpx;
}

::v-deep .uni-forms-item__error {
  left: 20rpx;
  top: 68% !important;
}

.v-input {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;

  .uni-easyinput__placeholder-class {
    font-size: 28rpx;
  }
}

.v-form-content {
  color: #333333;
  font-size: 28rpx;
}

.card-form-title {
  font-size: 30rpx;
  font-weight: bold;
}

.content-box-label {
  width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #808080;
}

.v-form-tip {
  text {
    font-size: 24rpx;
    margin-right: 16rpx;
    color: #808080;
  }
}

.v-form-date {
  .start .date {
    font-size: 34rpx;
    font-weight: bold;
  }

  .start .text {
    font-size: 24rpx;
    color: #666666;
  }

  .end .date {
    font-size: 34rpx;
    font-weight: bold;
  }

  .end .text {
    font-size: 24rpx;
    color: #666666;
  }

  .mid {
    position: relative;
    border: 1rpx solid #0983FF;
    padding: 0 8rpx;
    height: 30rpx;
    line-height: 30rpx;
    border-radius: 30rpx;
    margin: 0 30rpx;
    font-size: 20rpx;
    color: #0983FF;

    &::before,
    &::after {
      content: "";
      position: absolute;

      top: 50%;
      transform: translate(0, -50%);
      width: 20rpx;
      height: 1rpx;
      background-color: #0983FF;
    }

    &::before {
      left: -20rpx;
    }

    &::after {
      right: -20rpx;
    }
  }
}
</style>