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 c4c85b43da
commit 8b2e933124
8 changed files with 1015 additions and 15 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. 35
      subPageB/Homestay/homestaydetail/homestaydetail.vue
  2. 138
      subPageC/bookHomestay/bookHomestay.vue
  3. 111
      subPageC/orderHomestay/cancelStep.vue
  4. 26
      subPageC/orderHomestay/order.vue
  5. 110
      subPageC/orderHomestay/orderCancel.vue
  6. 404
      subPageC/orderHomestay/orderDetail.vue
  7. 192
      subPageC/orderHomestay/orderList.vue
  8. 14
      subPageC/orderHomestay/payResult.vue

35
subPageB/Homestay/homestaydetail/homestaydetail.vue
Unescape View File

@ -72,6 +72,8 @@
</view>
<view class="card-content m-t-24" v-html="info.hotelInfo"></view>
</view>
<f-login></f-login>
</view>
</template>
@ -170,21 +172,24 @@
});
},
bookIt(val) {
var data = {
hotelId: this.info.id,
hotelName: this.info.hotelName
};
const parame = {
...val,
...data,
...this.infoData
}
const ticket = encodeURIComponent(JSON.stringify(parame));
uni.navigateTo({
url: "/subPageC/bookHomestay/bookHomestay?ticket=" + ticket
});
bookIt(val) {
var data = {
hotelId: this.info.id,
hotelName: this.info.hotelName
};
const parame = {
...val,
...data,
...this.infoData
}
const ticket = encodeURIComponent(JSON.stringify(parame));
uni.navigateTo({
url: "/subPageC/bookHomestay/bookHomestay?ticket=" + ticket
});
// this.judgeLogin((resa) => {});
},

138
subPageC/bookHomestay/bookHomestay.vue
Unescape View File

@ -0,0 +1,138 @@
<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>
</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"
}]
};
console.log(data)
uni.navigateTo({
url: "/subPageC/orderHomestay/order?data="
});
this.$Request.post(this.$config.createHotelOrder, data, 'json', null, false, null).then((res) => {
console.log("asdf",res)
});
}
}
}
</script>
<style lang="scss" scoped>
</style>

111
subPageC/orderHomestay/cancelStep.vue
Unescape View File

@ -0,0 +1,111 @@
<template>
<view class="v-order-cancel">
<view class="v-card container-fluid">
<view>退款金额</view>
<view>退款进度</view>
<view class="v-timeline m-t-24">
<view class="v-timeline-item">
<view class="v-timeline-item__content">发起退款申请</view>
<view class="v-timeline-item__timestamp">2024-09-13 16:23:22</view>
</view>
<view class="v-timeline-item">
<view class="v-timeline-item__content">微信支付已受理</view>
<view class="v-timeline-item__timestamp">2024-09-13 16:23:22</view>
</view>
<view class="v-timeline-item active">
<view class="v-timeline-item__content">退款已到账</view>
<view class="v-timeline-item__tip">退款已原路退回！</view>
<view class="v-timeline-item__timestamp">2024-09-13 16:23:22</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
this.getInitPage()
},
methods: {
getInitPage() {}
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '../../static/common.scss';
.v-timeline {
padding:20rpx;
.v-timeline-item {
position: relative;
padding: 0 30rpx 20rpx 30rpx;
margin-bottom: 20rpx;
&:before {
content: "";
position: absolute;
left: -10rpx;
top: 10rpx;
z-index: 1;
height: 20rpx;
width: 20rpx;
border-radius: 20rpx;
background-color: #0983FF;
}
&:after {
content: "";
position: absolute;
left: 0;
top: 15rpx;
height: 100%;
width: 1rpx;
background-color: #eeeeee;
}
.v-timeline-item__content {
font-size: 28rpx;
color: #1B1B1B;
}
.v-timeline-item__tip {
margin: 8rpx 0;
font-size: 26rpx;
color: #1B1B1B;
}
.v-timeline-item__timestamp {
font-size: 24rpx;
color: #808080;
}
&.active {
.v-timeline-item__content {
color: #0983FF;
}
&:after {
display: none;
}
&:before {
width: 30rpx;
height: 30rpx;
border-radius: 30rpx;
top:0;
left: -15rpx;
}
}
}
}
</style>

26
subPageC/orderHomestay/order.vue
Unescape View File

@ -0,0 +1,26 @@
<template>
<view>
<view class="v-card small container-fluid m-t-24">
<view></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
onLoad: function(options) {
this.data = JSON.parse(decodeURIComponent(options.data));
this.detailInfo();
},
methods: {
detailInfo() {}
}
}
</script>
<style>
</style>

110
subPageC/orderHomestay/orderCancel.vue
Unescape View File

@ -0,0 +1,110 @@
<template>
<view class="v-order-cancel">
<view class="v-card container-fluid">
<view class="v-order-title">取消原因<text class="text">*</text></view>
<view class="v-order-tip">请告知取消原因，我们将努力改善服务</view>
<view class="v-order-cancel-list">
<view class="list_item row" v-for="(item,index) in cancelList" :key="index">
<view class="label col">{{item.name}}</view>
<view>
<radio :value="item.value" :checked="index === current" />
</view>
</view>
</view>
</view>
<view class="v-order-bottom">
<view class="btn">确认取消订单</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cancelList: [],
current: 0
}
},
onLoad() {
this.getInitPage()
},
methods: {
getInitPage() {
this.cancelList = [{
name: "出行取消",
value: 0
}, {
name: "计划有变",
value: 1
}, {
name: "交通延误",
value: 2
}, {
name: "身体原因",
value: 3
}, {
name: "定错日期或酒店",
value: 4
}, {
name: "重复购买",
value: 5
}, ]
}
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '../../static/common.scss';
.v-order-title {
font-size: 32rpx;
.text {
color: #E02222;
margin-left: 8rpx;
}
margin-bottom: 24rpx;
font-weight: bold;
}
.v-order-tip {
font-size: 24rpx;
color: #999999;
}
.v-order-cancel-list {
padding: 2rpx 30rpx;
margin-top: 20rpx;
border-radius: 10rpx;
background: linear-gradient(to bottom, rgba(9, 131, 255, .05), transparent);
.list_item {
margin: 30rpx 0;
}
}
.v-order-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 24rpx 32rpx;
background-color: #fff;
box-sizing: border-box;
.btn {
font-size: 30rpx;
height: 88rpx;
line-height: 88rpx;
border-radius: 88rpx;
color: #fff;
text-align: center;
background: linear-gradient(to right, #0983FF, #57ABFF);
}
}
</style>

404
subPageC/orderHomestay/orderDetail.vue
Unescape View File

@ -0,0 +1,404 @@
<template>
<view class="v-order-detail">
<view class="v-order-bg"></view>
<view class="v-order-detail-state">
<view class="order-top">
<view class="state">待付款</view>
<view class="tip">酒店房间有限，请尽快支付，超时后订单将自动取消</view>
<view class="time">25:25</view>
</view>
<view class="row order-top-btn">
<view class="col-12">
<view class="pay-btn">去支付</view>
</view>
<view class="col-12">
<view class="cancel-btn">取消订单</view>
</view>
</view>
<view v-if="false">
<view class="pay-btn">再次约定</view>
</view>
<view class="row describe">
<view class="dec col">退款进度：<text>退款成功</text></view>
<view class="btn">查看详情</view>
</view>
</view>
<view class="v-card container-fluid m-t--80">
<view class="v-form-item row">
<view class="label">取消规则</view>
<view class="content">09月13日18:00前，可免费取消</view>
</view>
</view>
<view class="v-card container-fluid m-t-24">
<view class="v-form">
<view class="v-form-item row">
<view class="col row">
<view class="label">在线支付</view>
<view class="content">
<text class="price">1520.00</text>
</view>
</view>
<view class="detail-btn">详情</view>
</view>
<view class="v-form-line"></view>
<view class="v-form-item row">
<view class="label">发票报销</view>
<view class="content">如需发票，请向酒店前台索取。 </view>
</view>
</view>
</view>
<view class="v-card container-fluid m-t-24">
<view class="v-order-info row">
<view class="info-image"></view>
<view class="info-content">
<view class="title">石家庄西部长青璞祯酒店</view>
<view class="address">鹿泉区白鹿乡梁庄村西部长青休博城</view>
</view>
</view>
<view class="row v-order-info-btn">
<view class="btn col-12">地图导航</view>
<view class="btn col">咨询电话</view>
</view>
</view>
<view class="v-card container-fluid m-t-24">
<view class="v-form-date row flex-align-center">
<view class="start"><text class="date">9月12日</text></view>
<text class="mid">1晚</text>
<view class="end"><text class="date">09月12日</text></view>
</view>
<view class="v-form-name m-t-12">豪华大床房</view>
<view class="v-form-tip"><text>无早餐</text> <text>1张2米特大床</text> <text>2人入住</text> <text>45㎡</text></view>
<view class="v-form bg m-t-24">
<view class="v-form-item row">
<view class="label">入住人</view>
<view class="content">张春荣</view>
</view>
<view class="v-form-item row">
<view class="label">联系手机</view>
<view class="content">157144552</view>
</view>
</view>
</view>
<view class="v-card container-fluid m-t-24 m-b-24">
<view class="v-form-title">订单信息</view>
<view class="v-form">
<view class="v-form-item row">
<view class="label">订单号</view>
<view class="content">567389478348534</view>
</view>
<view class="v-form-item row">
<view class="label">下单时间</view>
<view class="content">2024-08-20 12:00:01</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '../../static/common.scss';
.v-order-detail {
padding-bottom: 24rpx;
}
.v-order-detail-state {
position: relative;
z-index: 9;
padding: 40rpx 0 100rpx 0;
.order-top {
position: relative;
padding: 0 40rpx;
.state {
font-size: 44rpx;
color: #fff;
font-weight: bold;
}
.tip {
margin-top: 10rpx;
font-size: 26rpx;
color: #fff;
}
.time {
position: absolute;
top: 0;
right: 0;
font-size: 32rpx;
padding: 8rpx 40rpx 8rpx 30rpx;
border-radius: 30rpx 0 0 30rpx;
color: #fff;
background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);
&:before {
content: "";
position: absolute;
top: -40rpx;
left: -50rpx;
width: 140rpx;
height: 140rpx;
border-radius: 140rpx;
background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);
}
&::after {
content: "";
position: absolute;
top: -25rpx;
left: -30rpx;
width: 110rpx;
height: 110rpx;
border-radius: 120rpx;
background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);
}
}
}
.order-top-btn {
margin: 12rpx 10rpx;
.pay-btn {
margin: 0 20rpx;
background-color: #fff;
text-align: center;
height: 64rpx;
line-height: 64rpx;
border-radius: 64rpx;
color: #0983FF;
}
.cancel-btn {
margin: 0 20rpx;
border: 1rpx solid #fff;
color: #fff;
text-align: center;
height: 64rpx;
line-height: 64rpx;
border-radius: 64rpx;
background: linear-gradient(to right, transparent, #0983FF);
}
}
.describe {
padding: 10rpx 40rpx;
background: linear-gradient(to right, rgba(255, 255, 255, .2), transparent);
.dec {
color: #fff;
font-size: 26rpx;
}
.btn {
border-radius: 40rpx;
padding: 0 20rpx;
height: 40rpx;
line-height: 40rpx;
border: 1rpx solid #fff;
color: #fff;
font-size: 26rpx;
}
}
}
.v-form-date {}
.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;
}
}
}
.v-form-title {
margin-bottom: 24rpx;
font-weight: bold;
}
.v-form-name {
margin-top: 8rpx;
font-size: 30rpx;
color: #1B1B1B;
font-weight: bold;
}
.v-form-line {
height: 1rpx;
background-color: #EEEEEE;
margin: 12rpx 0;
}
.v-form-tip {
text {
font-size: 24rpx;
margin-right: 16rpx;
color: #808080;
}
}
.v-order-info {
.info-image {
margin-left: 10rpx;
margin-right: 20rpx;
width: 180rpx;
height: 120rpx;
}
.info-content {
.title {
font-size: 30rpx;
font-weight: bold;
}
.address {
margin-top: 8rpx;
font-size: 24rpx;
color: #808080;
}
}
}
.v-order-detail {
position: relative;
}
.v-order-bg {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 600rpx;
background: linear-gradient(to bottom, #0983FF, transparent);
}
.v-order-info-btn {
margin-top: 20rpx;
margin-left: -10rpx;
.btn {
margin-left: 10rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 60rpx;
background-color: #F6F7FB;
text-align: center;
font-size: 24rpx;
color: #1B1B1B;
}
}
.v-order-detail-state {}
.v-form {
&.bg {
padding: 20rpx;
border-radius: 10rpx;
background: linear-gradient(to bottom, #F7F9FF, #fff);
}
}
.v-form-item {
&:not(:last-child) {
margin-bottom: 10rpx;
}
.detail-btn {
font-size: 24rpx;
color: #0983FF;
}
.label {
width: 160rpx;
font-size: 28rpx;
color: #808080;
}
.content {
font-size: 28rpx;
color: #1B1B1B;
}
.price {
font-size: 32rpx;
color: #E02222;
font-weight: bold;
}
}
</style>

192
subPageC/orderHomestay/orderList.vue
Unescape View File

@ -0,0 +1,192 @@
<template>
<view class="v-order-list">
<view class="v-order-list-item container-fluid m-b-24" v-for="(item,index) in orderList">
<view class="row box">
<view class="image"></view>
<view class="content col">
<view class="title">{{item.name}}</view>
<view class="date">{{item.startData}}{{item.endData}}</view>
<view class="price">总价：¥{{item.price}}</view>
<view class="bottom" v-if="item.type=='0'">
<view class="btn">去支付</view>
<view class="btn">取消订单</view>
</view>
<view class="bottom" v-if="item.type=='1'">
<view class="btn">再次预定</view>
</view>
</view>
</view>
<view class="tip-bage"></view>
<view class="tip-state" v-if="item.type=='2'">等待商家确认中，请及时关注订单状态</view>
<view class="state" :class="'type'+item.type">{{stateMessage(item.type)}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
orderList: []
}
},
onLoad() {
this.getInitPage()
},
methods: {
getInitPage() {
this.orderList = [{
name: "2间，豪华大床房",
startData: "2024-09-12",
endData: "2024-09-13",
price: 1541,
type: "0"
},
{
name: "2间，豪华大床房",
startData: "2024-09-12",
endData: "2024-09-13",
price: 1541,
type: "1"
},
{
name: "2间，豪华大床房",
startData: "2024-09-12",
endData: "2024-09-13",
price: 1541,
type: "2"
},
{
name: "2间，豪华大床房",
startData: "2024-09-12",
endData: "2024-09-13",
price: 1541,
type: "3"
}
]
},
stateMessage: function(val) {
switch (val) {
case "0":
return "待支付"
break;
case "1":
return "待确认"
break;
case "2":
return "预订成功"
break;
case "3":
return "已取消"
break;
}
}
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '../../static/common.scss';
.v-order-list {
padding: 0;
}
.v-order-list-item {
position: relative;
z-index: 9;
overflow: hidden;
background-color: #fff;
border-radius: 10rpx;
.box {
padding: 30rpx 24rpx 20rpx 24rpx;
}
.tip-bage {
position: absolute;
left: 0;
top: 20rpx;
width: 40rpx;
height: 36rpx;
background-color: #0983FF;
}
.state {
position: absolute;
right: 0;
top: 30rpx;
font-size: 26rpx;
&.type0 {
color: #FF850A;
padding: 8rpx 30rpx 8rpx 20rpx;
border-radius: 30rpx 0 0 30rpx;
background: linear-gradient(to right, rgba(255, 133, 10, .2), transparent);
}
&.type1 {
color: #0983FF;
padding: 8rpx 30rpx 8rpx 20rpx;
border-radius: 30rpx 0 0 30rpx;
background: linear-gradient(to right, rgba(9, 131, 255, .2), transparent);
}
&.type2 {
color: #07C060;
padding: 8rpx 30rpx 8rpx 20rpx;
border-radius: 30rpx 0 0 30rpx;
background: linear-gradient(to right, rgba(7, 192, 96, .2), transparent);
}
&.type3 {
color: #666666;
padding: 8rpx 30rpx 8rpx 20rpx;
border-radius: 30rpx 0 0 30rpx;
background: linear-gradient(to right, rgba(102, 102, 102, .2), transparent);
}
}
.tip-state {
color: #0983FF;
padding: 16rpx 30rpx;
font-size: 28rpx;
background: linear-gradient(to right, rgba(9, 131, 255, .15), transparent);
}
.image {
width: 180rpx;
margin-right: 20rpx;
}
.content {
.title,
.date,
.price {
margin: 8rpx;
color: #666666;
font-size: 28rpx;
}
}
.bottom {
text-align: right;
.btn {
display: inline-block;
margin: 0 10rpx;
padding: 0 20rpx;
border: 1rpx solid #CCCCCC;
color: #1B1B1B;
text-align: center;
height: 64rpx;
line-height: 64rpx;
border-radius: 64rpx;
}
}
}
</style>

14
subPageC/orderHomestay/payResult.vue
Unescape View File

@ -0,0 +1,14 @@
<template>
<view class="v-pay-result">
<view class="image"></view>
<view class="">支付成功</view>
<view class="price">1520.00</view>
<view class="btn">1520.00</view>
</view>
</template>
<script>
</script>
<style>
</style>
Write Preview
Loading…
Cancel
Save