公司演示版e鹿悦游
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
CjyTravel/subPageC/bookTicket/bookTicket.vue

1564 lines
43 KiB

<template>
<view class="m-content">
<view class="m-card m-card-one">
<view class="m-one-first-row">
<view class="m-ticket-name">{{ ticket.ticketname }}</view>
<view class="m-ticket-use-time" v-if="ticket && ticket.datesettings == 1">
<view class="m-ticket-use-time-label">
<img class="m-img" src="/static/animg/index/predetermine_time1.svg" alt="" />
使用有效期:
</view>
<view class="m-ticket-use-time-value"
>{{ parseArrTime(ticket.usevalidityStart) }}至{{
parseArrTime(ticket.usevalidityEnd)
}}</view
>
</view>
<view class="m-ticket-use-time" v-if="ticket && ticket.datesettings == 1">
<view class="m-ticket-use-time-label">
<img class="m-img" src="/static/animg/index/predetermine_time2.svg" alt="" />
使用时间段:
</view>
<view class="m-ticket-use-time-value">全天</view>
</view>
<view class="m-ticket-use-time" v-if="ticket && ticket.datesettings == 3">
<view class="m-ticket-use-time-label">
<img class="m-img" src="/static/animg/index/predetermine_time2.svg" alt="" />
使用时间段:
</view>
<view class="m-ticket-use-time-value"
>{{ ticket.usertimeslotStart }}-{{ ticket.usertimeslotEnd }}
</view>
</view>
</view>
<view class="m-one-second-row">
<view class="m-row-title">选择日期</view>
<view class="m-date-pick-box">
<view class="scroll-view1">
<view
v-for="(date, index) in dates"
:key="index"
class="date-item"
@click="chooseDate(index, date.fullData)"
>
<view :class="['date-box', { active: index === nowIndex }]">
<text class="date-label">{{ date.label }}</text>
<text class="date-date">{{ date.date }}</text>
<text class="date-price">{{ date.price }}</text>
</view>
</view>
</view>
<view class="m-more-date" @click.stop="openCalendar">
<span>更多日期</span>
<uni-icons type="right" size="18"></uni-icons>
</view>
</view>
</view>
<view class="m-one-third-row">
<view class="m-ticket-count">
<view class="m-ticket-count-label">购票数量</view>
<view class="m-ticket-count-value">
<uni-number-box
v-if="maxNum == -1"
:min="1"
v-model="ticket.num"
@change="changeCount($event, ticket)"
/>
<uni-number-box
v-else
:min="1"
:max="maxNum"
v-model="ticket.num"
@change="changeCount($event, ticket)"
/>
</view>
</view>
</view>
<view class="m-one-fourth-row">
<view class="m-ticket-count">
<view class="m-ticket-count-label">成人票</view>
<view class="m-ticket-count-value" @click.stop="openPop(1)">
<span>购买须知</span>
<uni-icons type="right" size="16"></uni-icons>
</view>
</view>
</view>
</view>
<view class="m-card m-card-two" v-if="ticket && ticket.touristInformation != 1">
<view class="m-card-title">
<view class="m-title">游客信息</view>
<view class="m-title-tips"
>需填 {{ ticket.touristInformation == 2 ? 1 : peopleNums() }} 位</view
>
</view>
<view class="m-two-first-row">
<view
class="m-user-list"
:class="item.selected ? 'active' : ''"
v-for="item in navUserList"
@click="selectUser(item)"
>
{{ item.name }}
</view>
<view class="m-user-list m-more-user" @click="openAddress">
<span class="m-span">
新增
<br />
更改
</span>
<uni-icons type="right" size="18"></uni-icons>
</view>
</view>
<view class="m-two-second-row">
<view class="m-user-list">
<view class="m-user-list-item" v-for="(item, index) in selectUserList">
<view class="m-list-left">
<img
class="m-img"
src="/static/animg/index/predetermine_tourist.svg"
alt=""
/>
<span class="m-span">游客{{ index + 1 }}</span>
</view>
<view class="m-list-middle">
<view class="m-middle-user-name">
{{ item.name }}
</view>
<view class="m-middle-user-idCode m-gray m-m-font"
>身份证 {{ item.idCard }}</view
>
<!-- <view class="m-middle-user-tel m-gray m-m-font">手机号 {{ item.tel }}</view> -->
</view>
<!-- <view class="m-list-right">
<uni-icons type="compose" size="24"></uni-icons>
<uni-icons type="trash" size="24"></uni-icons>
</view> -->
</view>
</view>
</view>
</view>
<view class="m-feet-box">
<view class="m-feet-left">
<view class="m-price">
总价
<span class="m-red">
¥
<span class="m-red m-xxl-font">{{ sumPrice }}</span>
</span>
</view>
<view class="m-nums">
<span class="m-red">{{ ticket.num ? ticket.num : 0 }}</span>
张门票
</view>
</view>
<view class="m-feet-right">
<!-- <button class="m-prime-red" @click.stop="isPayPopup = true">支付</button> -->
<button class="m-prime-red" @click.stop="checkOrder">支付</button>
</view>
</view>
<!-- 人员 -->
<liu-select
:multiple="fasle"
ref="scroll"
:list="dataList"
@change="chooseSuccess"
@edit="edit"
@add="addPerson"
></liu-select>
<!-- 日历 -->
<wu-calendar
ref="calendar"
@monthSwitch="changeMonth"
:startDate="startDate"
:selected="selected"
:confirmFullDate="true"
@confirm="calendarConfirm"
:insert="false"
></wu-calendar>
<!-- 重复订单提醒 -->
<uni-popup class="m-pop-bg" ref="warningPop" type="center" border-radius="20rpx">
<view class="m-green-bg"></view>
<view class="m-red-bg"></view>
<view class="m-notice-popuo">
<view class="m-notice-ico">
<img class="m-img" src="" alt="" />
</view>
<view class="m-notice-text">您有一笔相同门票的待支付订单,请优 先处理!</view>
<view class="m-pop-feet">
<button
class="m-prime-line-unset m-size-middle"
@click="continueOrder"
size="mini"
>
继续下单
</button>
<button class="m-prime m-size-middle" size="mini" @click="goOrderList">
前往处理
</button>
</view>
</view>
</uni-popup>
<!-- 支付 -->
<u-popup :show="isPayPopup" mode="bottom" @close="isPayPopup = false" round="10">
<f-pay
:show-title="false"
:show="isPayPopup"
:payMoney="orderInfo.orderInfo.orderAmount"
:tradeNo="orderInfo.orderInfo.orderNumber"
:order="orderInfo"
@payResult="payResult"
></f-pay>
</u-popup>
<!-- 须知 -->
<uni-popup
:maskShow="true"
ref="mPurchaseNotice"
border-radius="10px 10px 0 0"
:safe-area="false"
@maskClick="maskClick"
>
<view class="m-purchase-notice m-pop-bg">
<view class="m-green-bg"></view>
<view class="m-red-bg"></view>
<view class="m-pop-title">预定须知</view>
<view class="m-contents">
<view class="m-title">购买须知</view>
<view class="m-notice-box">
<view class="m-notice-row">
<view class="m-tag m-tag-blue">退票规则</view>
<view class="m-notice-row-content">{{ ticketInfos.refundRules }}</view>
</view>
<view class="m-notice-row">
<view class="m-tag m-tag-blue">使用次数</view>
<view class="m-notice-row-content">{{ ticketInfos.ticketchecksNum }}</view>
</view>
<view class="m-notice-row">
<view class="m-tag m-tag-red">购票限制</view>
<view class="m-notice-row-content">{{
ticketInfos.ticketlimitnum == null
? ticketInfos.buyticketlimit
: "每人限购" + ticketInfos.ticketlimitnum + "张"
}}</view>
</view>
<view class="m-notice-row">
<view class="m-tag m-tag-blue">使用时段</view>
<view class="m-notice-row-content">{{
ticketInfos.usertimeslotStart == ticketInfos.usertimeslotEnd
? "全天"
: ticketInfos.usertimeslotStart + "至" + ticketInfos.usertimeslotEnd
}}</view>
</view>
</view>
<view class="m-driver"></view>
<view class="m-title">费用说明</view>
<view class="m-notice-table">
<view class="m-table-head">费用包含</view>
<view class="m-table-th">
<view class="m-table-td">门票</view>
<view class="m-table-td">{{ ticketInfos.ticketname || "-" }}</view>
</view>
</view>
<view class="m-driver"></view>
<view class="m-title">使用说明</view>
<view class="m-notice-table no-border">
<view class="m-table-th">
<view class="m-table-td">
<img
class="m-table-inside-ico"
src="/static/animg/index/notice_time.svg"
alt=""
/>
开放时间
</view>
<view class="m-table-td">
<view class="m-ul">
<view class="m-li">{{ ticketInfos.openTime }}</view>
</view>
</view>
</view>
<view class="m-table-th">
<view class="m-table-td">
<img
class="m-table-inside-ico"
src="/static/animg/index/notice_notice.svg"
alt=""
/>
购票须知
</view>
<view class="m-table-td">
<view class="m-ul">
<view class="m-li">{{ ticketInfos.ticketInfo }}</view>
</view>
</view>
</view>
<view class="m-table-th">
<view class="m-table-td">
<img
class="m-table-inside-ico"
src="/static/animg/index/notice_address.svg"
alt=""
/>
景区地址
</view>
<view class="m-table-td">
<view class="m-ul">
<view class="m-li">{{ ticketInfos.addressInfo }}</view>
</view>
</view>
</view>
</view>
<!-- <view class="m-driver"></view>
<view class="m-title">其他说明</view>
<view class="m-notice-table no-border">
<view class="m-table-th">
<view class="m-table-td m-no-bg">发票说明</view>
<view class="m-table-td m-no-bg">如需发票、请在付款完成后,在已核订 单中,申请电子发票。</view>
</view>
</view> -->
</view>
</view>
</uni-popup>
<!-- 新增 -->
<uni-popup
ref="mAddPerson"
type="bottom"
border-radius="10px 10px 0 0"
:safe-area="false"
>
<view class="m-purchase-notice m-pop-bg">
<view class="m-green-bg"></view>
<view class="m-red-bg"></view>
<view class="m-pop-title">{{ titleName }}游客</view>
<view class="m-form-box">
<uni-forms class="m-form" ref="peopleForm" :modelValue="baseFormData">
<uni-row class="m-row">
<uni-col class="m-col" :span="ticket.ischeckedIdcard == 1 ? 18 : 24">
<uni-forms-item class="m-form-item" label="姓 名" required name="name">
<uni-easyinput
:inputBorder="false"
v-model="baseFormData.name"
placeholder="请输入姓名"
/>
</uni-forms-item>
<uni-forms-item
v-if="ticket.ischeckedIdcard == 1"
class="m-form-item"
label="身份证"
required
name="idCard"
>
<uni-easyinput
:inputBorder="false"
v-model="baseFormData.idCard"
placeholder="请输入身份证号"
/>
</uni-forms-item>
</uni-col>
<uni-col
v-if="ticket.ischeckedIdcard == 1"
class="m-col"
span="5"
offset="1"
>
<!-- ocr -->
<lzcOCR :dataObj="dataObj" @start="start" @end="end" />
</uni-col>
</uni-row>
<uni-forms-item
v-if="ticket.ischeckedMobile == 1"
class="m-form-item"
label="手机号"
required
name="tel"
>
<uni-easyinput
:inputBorder="false"
v-model="baseFormData.tel"
placeholder="请输入手机号"
/>
</uni-forms-item>
</uni-forms>
</view>
<button class="m-prime m-size-middle m-custom-margin" @click="finishPeople">
完成
</button>
</view>
</uni-popup>
</view>
</template>
<script>
import fPay from "../components/f-pay/f-pay";
import lzcOCR from "../components/lzc-OCR/lzc-OCR.vue";
import { parseTime } from "@/common/util";
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import uPopup from "@/uni_modules/uview-ui/components/u-popup/u-popup.vue";
export default {
components: {
fPay,
lzcOCR,
uniPopup,
uPopup,
},
data() {
return {
maxNum: -1,
tentId: null,
selected: null, //门票日历
startDate: parseTime(new Date()),
//门票须知
ticketInfos: null,
//生成订单信息
orderInfo: null,
//总价
sumPrice: 0,
ticket: null,
ticketInfo: null,
nowIndex: 0,
titleName: "新增",
isPayPopup: false,
dates: [],
numberValue: 1,
tradeNo: "16fw61cqew6464wdc", //支付单号
dataObj: {
client_id: "qs5EQSE0neZZDh5sA7FmHnUL",
client_secret: "w92jiLCNSVecfRdyBbjhcOGEQoezaC1B",
},
baseFormData: {
name: null,
idCard: null,
tel: null,
id: null,
selected: false,
},
dataList: [], //数据源
navUserList: [],
selectUserList: [],
rules: {
name: {
rules: [
{
required: true,
errorMessage: "请输入姓名",
},
],
},
idCard: {
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 (!value) {
callback("身份证号码不能为空");
} else if (!reg.test(value)) {
callback("请输入正确的身份证号码");
} else {
callback();
}
},
},
],
},
tel: {
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 (!value) {
callback("手机号码不能为空");
} else if (!reg.test(value)) {
callback("请输入正确的手机号码");
} else {
callback();
}
},
},
],
},
},
};
},
watch: {
ticket: {
handler(val) {
console.log(val, "-----");
if (!val.num) {
val.num = 1;
}
this.sumPrice = val.settlementPrice * val.num;
},
deep: true,
},
},
onReady() {
this.$refs.peopleForm.setRules(this.rules);
},
onLoad(options) {
console.log(options);
this.ticket = JSON.parse(decodeURIComponent(options.ticket));
if (options.maxNum) {
this.maxNum = options.maxNum;
} else {
this.maxNum = -1;
}
this.tentId = options.tentId;
this.getTicketInfo(this.ticket.id);
},
mounted() {
for (let i = 0; i < 7; i++) {
this.dates.push({
label: this.getLabel(i),
date: this.getFormattedDate(i),
fullData: this.getFullDate(i),
price: "¥" + this.ticket.settlementPrice,
});
}
this.ticket.date = this.dates[0].fullData;
let that = this;
if (this.ticket.datesettings == 2 || this.ticket.datesettings == 3) {
//使用日期和使用小时模式:单日,这里使用日期设置不论星期还是多日都不影响返回的日期了
//不限库存/总库存
if (this.ticket.inventorySettings == 1 || this.ticket.inventorySettings == 2) {
const params = {
ticketId: that.ticket.id,
date: that.parseTime(new Date()),
};
that.$Request
.get(that.$config.getTicketDateInventory, params, null, null, false, true)
.then((res) => {
that.selected = [];
res.data.forEach((items) => {
const obj = {
date: items.date,
info: "库存:" + that.ticket.currentinventory,
infoColor: "#666",
topInfo: "",
topInfoColor: "",
badgeColor: "",
disable: !items.isAvailable, // 禁用
};
that.selected.push(obj);
});
})
.catch((err) => {
console.log(err);
});
}
//日库存
if (that.ticket.inventorySettings == 3) {
const params = {
ticketId: that.ticket.id,
date: that.parseTime(new Date()),
};
that.$Request
.get(that.$config.getTicketDateInventory, params, null, null, false, true)
.then((res) => {
that.selected = [];
res.data.forEach((items) => {
const obj = {
date: items.date,
info: "库存:" + items.inventory,
infoColor: "#666",
topInfo: "",
topInfoColor: "",
badgeColor: "",
disable: !items.isAvailable || items.inventory == 0, // 禁用
};
that.selected.push(obj);
});
})
.catch((err) => {
console.log(err);
});
}
}
},
methods: {
maskClick() {
this.$refs.mPurchaseNotice.close();
},
//切换月份
changeMonth(e) {
console.log(e);
let that = this;
let fullDate = e.fullDate + "-01";
if (fullDate < that.parseTime(new Date())) {
fullDate = that.parseTime(new Date());
}
if (that.ticket.inventorySettings == 1 || that.ticket.inventorySettings == 2) {
const params = {
ticketId: that.ticket.id,
date: fullDate,
};
that.$Request
.get(that.$config.getTicketDateInventory, params, null, null, false, true)
.then((res) => {
that.selected = [];
res.data.forEach((items) => {
const obj = {
date: items.date,
info: "库存:" + that.ticket.currentinventory,
infoColor: "#666",
topInfo: "",
topInfoColor: "",
badgeColor: "",
disable: !items.isAvailable, // 禁用
};
that.selected.push(obj);
});
that.$forceUpdate();
console.log(that.selected);
})
.catch((err) => {
console.log(err);
});
}
//日库存
if (that.ticket.inventorySettings == 3) {
const params = {
ticketId: that.ticket.id,
date: fullDate,
};
that.$Request
.get(that.$config.getTicketDateInventory, params, null, null, false, true)
.then((res) => {
that.selected = [];
res.data.forEach((items) => {
const obj = {
date: items.date,
info: "库存:" + items.inventory,
infoColor: "#666",
topInfo: "",
topInfoColor: "",
badgeColor: "",
disable: !items.isAvailable || items.inventory == 0, // 禁用
};
that.selected.push(obj);
});
that.$forceUpdate();
console.log(that.selected);
})
.catch((err) => {
console.log(err);
});
}
},
peopleNums() {
return Number(this.ticket.usersNumber) * Number(this.ticket.num);
},
payResult(data) {
console.log(data);
if (data.payStatus == 1) {
uni.showToast({ title: "支付成功", icon: "none" });
this.isPayPopup = false;
setTimeout(() => {
uni.switchTab({ url: "/pages/order/order" });
}, 1000);
} else {
uni.showToast({ title: "支付失败", icon: "none" });
}
//uni.showToast({title: data.detail.errMsg,icon:'none'});
},
//继续下单
continueOrder() {
this.$refs.warningPop.close();
let that = this;
const userInfo = uni.getStorageSync("userInfo");
const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
let appId = extConfig.app_id;
if (that.ticket.touristInformation == 1) {
const httpData = {
openid: userInfo.openid,
appid: appId,
mobile: userInfo.phone,
settlementAmount: that.sumPrice,
orderPrice: that.sumPrice,
ticketInfo: {
ticketId: that.ticket.id,
ticketName: that.ticket.ticketname,
num: that.ticket.num,
ticketPrice: that.ticket.settlementPrice,
date: that.ticket.date,
visitorInfoList: [],
},
};
uni.$u.http
.post(URL.addOrder, httpData)
.then((res) => {
that.orderInfo = res.data;
that.isPayPopup = true;
})
.catch((err) => {
console.log(err);
});
} else {
const httpData = {
openid: userInfo.openid,
appid: appId,
mobile: userInfo.phone,
settlementAmount: that.sumPrice,
orderPrice: that.sumPrice,
ticketInfo: {
ticketId: that.ticket.id,
ticketName: that.ticket.ticketname,
num: that.ticket.num,
ticketPrice: that.ticket.settlementPrice,
date: that.ticket.date,
visitorInfoList:
that.ticket.touristInformation == 1
? []
: [{ name: "田华", idCardNumber: "13062619890707166X" }],
},
};
uni.$u.http
.post(URL.addOrder, httpData)
.then((res) => {
that.orderInfo = res.data;
that.isPayPopup = true;
})
.catch((err) => {
console.log(err);
});
}
},
//重复订单跳订单页面
goOrderList() {
uni.switchTab({ url: "/pages/order/order" });
},
//门票信息
getTicketInfo(id) {
this.$Request
.get(
this.$config.getScencAndTicketInfo,
{ ticketId: id, tenantId: this.tentId },
null,
null,
false,
true
)
.then((res) => {
console.log(res);
this.ticketInfos = res.data;
})
.catch((err) => {
console.log(err);
});
},
parseArrTime(val) {
return val.join("-");
},
parseTime(val) {
return parseTime(val, "{y}-{m}-{d}");
},
chooseDate(index, date) {
this.nowIndex = index;
console.log(date);
this.ticket.date = date;
},
//修改编辑游客信息
finishPeople(form) {
debugger;
let that = this;
this.$refs.peopleForm
.validate()
.then((res) => {
debugger;
that.baseFormData.id = that.dataList.length + 1;
that.baseFormData.selected = false;
this.$nextTick(() => {
if (that.dataList.length > 0) {
const index = that.dataList.findIndex(
(item) => item.id == that.baseFormData.id
);
if (index != -1) {
that.$set(that.dataList, index, that.baseFormData);
} else {
that.dataList.push(that.baseFormData);
}
} else {
that.dataList.push(that.baseFormData);
}
});
that.selectUserList = that.dataList;
this.$forceUpdate();
console.log("表单数据信息:", that.dataList);
that.$refs.mAddPerson.close();
})
.catch((err) => {
console.log("表单错误信息:", err);
});
},
//ocr开始
start(e) {
console.log(e);
},
end(e) {
console.log(e);
},
//ocr结束
//新增
addPerson() {
this.$refs.mAddPerson.open();
this.$refs.scroll.close();
this.titleName = "新增";
},
//编辑游客信息
edit(val) {
console.log(val);
this.$refs.scroll.close();
this.$refs.mAddPerson.open();
this.titleName = "编辑";
this.baseFormData = val;
},
//打开选择器
openAddress() {
this.$refs.scroll.open();
},
//选择成功
chooseSuccess(e) {
console.log("所选择的信息:", e);
},
//提示已有订单
checkOrder() {
// if (this.ticket.touristInformation == 2) {
// if (!this.ticket.visitorInfoList || this.ticket.visitorInfoList.length < 1) {
// uni.showToast({ title: '暂无游客信息', icon: 'none' });
// return
// }
// }
// if (this.ticket.touristInformation == 3) {
// if (!this.ticket.visitorInfoList || this.ticket.visitorInfoList.length < Number(this.ticket.usersNumber) * Number(this.ticket.num)) {
// uni.showToast({ title: '请填写全部游客信息', icon: 'none' });
// return
// }
// }
let that = this;
const userInfo = uni.getStorageSync("userInfo");
const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
let appId = extConfig.app_id;
const params = {
openid: userInfo.openid,
appid: appId,
};
uni.$u.http
.get(URL.searchWaitOrder, { params: params, custom: { load: false } })
.then((res) => {
console.log(res);
if (res.data != 0) {
this.$refs.warningPop.open();
} else {
if (that.ticket.touristInformation == 1) {
const httpData = {
openid: userInfo.openid,
appid: appId,
mobile: userInfo.phone,
settlementAmount: that.sumPrice,
orderPrice: that.sumPrice,
ticketInfo: {
ticketId: that.ticket.id,
ticketName: that.ticket.ticketname,
num: that.ticket.num,
ticketPrice: that.ticket.settlementPrice,
date: that.ticket.date,
visitorInfoList: [],
},
};
uni.$u.http
.post(URL.addOrder, httpData)
.then((res) => {
that.orderInfo = res.data;
that.isPayPopup = true;
})
.catch((err) => {
console.log(err);
});
} else {
const httpData = {
openid: userInfo.openid,
appid: appId,
mobile: userInfo.phone,
settlementAmount: that.sumPrice,
orderPrice: that.sumPrice,
ticketInfo: {
ticketId: that.ticket.id,
ticketName: that.ticket.ticketname,
num: that.ticket.num,
ticketPrice: that.ticket.settlementPrice,
date: that.ticket.date,
visitorInfoList:
that.ticket.touristInformation == 1
? []
: [{ name: "田华", idCardNumber: "13062619890707166X" }],
},
};
uni.$u.http
.post(URL.addOrder, httpData)
.then((res) => {
that.orderInfo = res.data;
that.isPayPopup = true;
})
.catch((err) => {
console.log(err);
});
}
}
})
.catch((err) => {
console.log(err);
});
},
// 打开日历
openCalendar() {
this.$refs.calendar.open();
},
//选择日历
calendarConfirm(e) {
console.log(e);
this.ticket.date = e.fullData;
},
//须知
openPop(val) {
switch (val) {
case 1:
this.$refs.mPurchaseNotice.open("bottom");
break;
default:
break;
}
},
//购票数量
changeCount(val, ticket) {
console.log(val);
this.ticket.num = val;
this.sumPrice = ticket.settlementPrice * val;
},
//选择游客
selectUser(val) {
let this_ = this;
if (val.selected == false) {
val.selected = true;
this_.selectUserList.push(val);
} else {
val.selected = false;
this_.selectUserList = this_.selectUserList.filter((user) => !user.selected);
}
},
change(value) {
this.numberValue = value;
},
// 日历
getFormattedDate(offset) {
const date = new Date();
date.setDate(date.getDate() + offset);
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${month}-${day}`;
},
getFullDate(offset) {
const date = new Date();
date.setDate(date.getDate() + offset);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${year}-${month}-${day}`;
},
getLabel(offset) {
const dayIndex = (new Date().getDay() + offset) % 7;
switch (offset) {
case 0:
return "今天";
case 1:
return "明天";
case 2:
return "后天";
default:
return `${"日一二三四五六"[dayIndex]}`;
}
},
},
};
</script>
<style lang="scss" scoped>
.m-content {
background: linear-gradient(
180deg,
rgba(9, 131, 255, 0.8) 0%,
rgba(9, 131, 255, 0) 100%
);
overflow: scroll;
padding-bottom: 200rpx;
.m-card {
background: #ffffff;
border-radius: 20rpx;
margin: 25rpx;
overflow: hidden;
padding: 25rpx;
}
.m-card-one {
.m-one-first-row {
padding-bottom: 20rpx;
border-bottom: solid 1rpx #ddd;
.m-ticket-name {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #1b1b1b;
margin-top: 10rpx;
margin-bottom: 15rpx;
}
.m-ticket-use-time {
display: flex;
justify-content: start;
.m-ticket-use-time-label {
display: flex;
align-items: center;
color: #666666;
.m-img {
width: 25rpx;
height: 25rpx;
margin-right: 10rpx;
}
}
}
}
.m-one-second-row {
padding: 20rpx 0;
border-bottom: solid 1rpx #ddd;
.m-row-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #1b1b1b;
margin-bottom: 20rpx;
}
.m-date-pick-box {
display: flex;
justify-content: center;
align-items: center;
.scroll-view1 {
display: flex;
flex-direction: row;
width: 100%;
height: 200rpx;
overflow-x: scroll;
.date-item {
flex-shrink: 0;
width: 160rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10rpx;
.date-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
border-radius: 12rpx;
// padding: 20rpx;
position: relative;
}
.date-box.active {
background: #ebf5ff;
}
.date-box.active::after {
content: "";
width: 22rpx;
height: 22rpx;
position: absolute;
right: 0;
bottom: 0;
background-color: #0983ff;
background-image: url("/static/animg/index/duigou.png");
background-repeat: no-repeat;
background-size: 70%;
background-position: center;
border-radius: 12rpx 0rpx 12rpx 0rpx;
}
}
}
}
.m-more-date {
display: flex;
margin-left: 20rpx;
align-items: center;
box-shadow: -6px 0px 8px 0px #e8e8e8;
padding: 8rpx 0 8rpx 14rpx;
border-radius: 10rpx;
}
}
.m-one-third-row {
.m-ticket-count {
display: flex;
width: 100%;
justify-content: space-between;
border-bottom: solid 1rpx #ddd;
padding: 20rpx 0;
.m-ticket-count-label {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #1b1b1b;
}
::v-deep .m-ticket-count-value {
.uni-numbox-btns {
border-radius: 50%;
.uni-numbox--text {
background: #ebf5ff;
color: #0983ff !important;
}
.uni-numbox--disabled {
color: #333 !important;
}
}
.uni-numbox__value {
background-color: #fff !important;
font-size: 32rpx !important;
}
}
}
}
.m-one-fourth-row {
.m-ticket-count {
display: flex;
justify-content: space-between;
padding: 20rpx 0;
::v-deep .m-ticket-count-value {
color: #0983ff;
.uni-icons {
color: #0983ff !important;
}
}
}
}
}
.m-card-two {
.m-card-title {
display: flex;
padding: 10rpx 0 10rpx;
align-items: baseline;
.m-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #1b1b1b;
}
.m-title-tips {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #0983ff;
margin-left: 20rpx;
}
}
.m-two-first-row {
display: flex;
align-items: center;
justify-content: space-around;
margin: 20rpx 0;
.m-user-list {
padding: 20rpx 40rpx;
border-radius: 12rpx;
border: solid 1rpx #ddd;
position: relative;
}
.m-user-list.active {
background: #ebf5ff;
border-radius: 12rpx;
border: 1px solid #0983ff;
}
.m-user-list.active::after {
content: "";
width: 22rpx;
height: 22rpx;
position: absolute;
right: 0;
bottom: 0;
background-color: #0983ff;
background-image: url("/static/animg/index/duigou.png");
background-repeat: no-repeat;
background-size: 70%;
background-position: center;
border-radius: 12rpx 0rpx 12rpx 0rpx;
}
.m-more-user {
padding: 20rpx 10rpx 20rpx 20rpx;
display: flex;
align-items: center;
margin-left: auto;
.m-span {
margin-right: 10rpx;
}
}
}
.m-two-second-row {
.m-user-list {
.m-user-list-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.m-list-left {
width: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
.m-img {
width: 50rpx;
height: 50rpx;
margin-bottom: 5rpx;
}
.m-span {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
.m-list-middle {
flex: 1;
margin: 0 25rpx;
.m-middle-user-name {
font-size: 32rpx;
font-weight: 500;
}
}
.m-list-right {
width: 100rpx;
display: flex;
justify-content: space-around;
}
}
}
}
}
.m-feet-box {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
padding: 20rpx 0 60rpx;
background: #fff;
bottom: 0;
align-items: center;
.m-feet-left {
margin-left: 40rpx;
}
.m-feet-right {
width: 200rpx;
background-color: #fe2b54;
border-radius: 20rpx;
height: fit-content;
margin-right: 40rpx;
.m-prime-red {
background-color: #fe2b54;
color: #fff;
}
}
}
}
.date-label,
.date-date,
.date-price {
// margin: 5px 0;
}
.m-pop-bg {
position: relative;
.m-green-bg,
.m-red-bg {
position: absolute;
width: 50%;
height: 200rpx;
}
.m-green-bg {
left: 0;
top: 0;
background: radial-gradient(circle, #00ffa4 0%, rgba(0, 255, 164, 0) 100%);
border-radius: 20rpx 20rpx 0rpx 0rpx;
opacity: 0.1;
}
.m-red-bg {
right: 0;
top: 0;
background: radial-gradient(circle, #ff5500 0%, rgba(255, 85, 0, 0) 100%);
border-radius: 20rpx 20rpx 0rpx 0rpx;
opacity: 0.1;
}
}
.m-purchase-notice {
width: 100vw;
height: 90vh;
margin-top: 10vh;
background-color: #f5f6f8;
border-radius: 20rpx 20rpx 0 0;
position: relative;
overflow: scroll;
.m-green-bg,
.m-red-bg {
position: absolute;
width: 50%;
height: 200rpx;
}
.m-green-bg {
left: 0;
top: 0;
background: radial-gradient(circle, #00ffa4 0%, rgba(0, 255, 164, 0) 100%);
border-radius: 20rpx 20rpx 0rpx 0rpx;
opacity: 0.1;
}
.m-red-bg {
right: 0;
top: 0;
background: radial-gradient(circle, #ff5500 0%, rgba(255, 85, 0, 0) 100%);
border-radius: 20rpx 20rpx 0rpx 0rpx;
opacity: 0.1;
}
.m-pop-title {
font-family: PingFang SC;
font-weight: 500;
font-size: 34rpx;
color: #000000;
text-align: center;
position: relative;
margin: 35rpx 0;
}
.m-pop-title::after {
content: "";
width: 20%;
height: 16rpx;
background: linear-gradient(90deg, #0983ff 0%, rgba(9, 131, 255, 0) 100%);
border-radius: 8rpx;
opacity: 0.3;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.m-contents {
background-color: #fff;
margin: 0 24rpx;
border-radius: 20rpx;
height: fit-content;
position: relative;
padding: 25rpx;
.m-notice-box {
background: linear-gradient(
-90deg,
rgba(9, 131, 255, 0.07) 0%,
rgba(9, 131, 255, 0.04) 100%
);
border-radius: 12rpx;
padding: 20rpx;
.m-notice-row {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 20rpx;
}
.m-tag {
margin-right: 20rpx;
}
.m-notice-row-content {
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #1b1b1b;
}
}
}
.m-notice-table {
margin: 25rpx 0;
.m-table-head {
background: #f7f8fc;
border-radius: 12rpx 12rpx 0rpx 0rpx;
border: 1px solid #e0e5eb;
line-height: 84rpx;
padding: 0 25rpx;
}
.m-table-th {
display: flex;
border-bottom: 1px solid #e0e5eb;
border-left: 1px solid #e0e5eb;
border-right: 1px solid #e0e5eb;
&:last-child {
border-radius: 0 0 12rpx 12rpx;
}
.m-table-td {
padding: 0 40rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:last-child {
flex: 1;
border-left: 1px solid #e0e5eb;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
align-items: flex-start;
}
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #1b1b1b;
line-height: 84rpx;
.m-table-inside-ico {
width: 32rpx;
height: 32rpx;
margin-top: 20rpx;
}
.m-ul {
.m-li {
line-height: 35rpx;
}
}
}
}
}
.no-border {
.m-table-th {
border: none !important;
.m-table-td {
background: #f7f8fc;
border: none !important;
margin-bottom: 6rpx;
&:last-child {
margin-left: 6rpx;
}
}
}
}
}
}
.m-notice-popuo {
position: relative;
.m-notice-ico {
width: 247rpx;
height: 181rpx;
margin: 0 auto;
// background-color: #00ffa4;
background-color: transparent;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -30%;
.m-img {
width: 100%;
height: auto;
}
}
.m-notice-text {
margin-top: 90rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 26rpx;
color: #1b1b1b;
line-height: 39rpx;
padding: 0 20rpx;
}
.m-pop-feet {
display: flex;
width: 100%;
justify-content: space-around;
margin: 40rpx 0;
}
}
.m-form-box {
position: relative;
}
</style>