Tuzki
/
CjyTravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

门票详情

Browse Source
lu_quan_dev
han 11 months ago
parent 40386ba91d
commit e3d16f2325
1 changed files with 278 additions and 140 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 418
      subPageC/bookHomestay/bookHomestay.vue

418
subPageC/bookHomestay/bookHomestay.vue
Unescape View File

@ -1,148 +1,286 @@
<template>
<view class="v-pages-bg bgcolor p-b-24">
<form @submit="formSubmit" @reset="formReset">
<view class="v-card small container-fluid m-t-24">
{{orderInfo.startDate1}}{{orderInfo.dayNum}}晚{{orderInfo.endDate1}}
<view class="card-form">
{{orderInfo.houseName}}
</view>
</view>
<view class="v-card small container-fluid m-t-24">
<view class="card-title">
<view class="text"><text>入住信息</text></view>
</view>
<uni-row>
<uni-col :span="6">
<view class="content-box-label">房间数量</view>
</uni-col>
<uni-col class="content-box-col" :span="18">
<uni-easyinput :inputBorder="false" v-model="formData.roomNumber" placeholder="请输入房间数量" />
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="6">
<view class="content-box-label">入住人</view>
</uni-col>
<uni-col class="content-box-col" :span="18">
<uni-easyinput :inputBorder="false" v-model="formData.phoneNumber" placeholder="请输入入住人姓名" />
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="6">
<view class="content-box-label">身份证</view>
</uni-col>
<uni-col class="content-box-col" :span="18">
<uni-easyinput :inputBorder="false" v-model="formData.idtype" placeholder="请输入身份证号码" />
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="6">
<view class="content-box-label">联系手机</view>
</uni-col>
<uni-col class="content-box-col" :span="18">
<uni-easyinput :inputBorder="false" v-model="formData.idCardNumber" placeholder="请输入手机号码" />
</uni-col>
</uni-row>
</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-40 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-40 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>
</form>
</view>
<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: undefined,
phoneNumber: undefined,
idtype: undefined,
idCardNumber: undefined,
}
}
},
onLoad(options) {
const ticket = JSON.parse(decodeURIComponent(options.ticket));
this.orderInfo = ticket
},
methods: {
orderSubmit() {
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": [{
"name": "入住人1",
"phoneNumber": "15512225258",
"idtype": "1",
"idCardNumber": "130682991"
}]
};
this.$Request.post(this.$config.createHotelOrder, data, 'json', null, false, null).then((res) => {
console.log("asdf",res)
if(res.code ==0){
uni.navigateTo({
url: "/subPageC/orderHomestay/orderDetail?id="+res.data.id
});
}else if(res.code == 500){
uni.showToast({
title: res.data,
icon: 'none',
duration: 2000
})
}else{
}
});
}
}
}
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;
}
</style>
&::after {
right: -20rpx;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save