|
@@ -0,0 +1,524 @@
|
|
|
+<template>
|
|
|
+ <view class="main">
|
|
|
+ <view class="info">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="one">
|
|
|
+ <view class="one_1">
|
|
|
+ <text>{{info.name||'暂无'}}</text>
|
|
|
+ <text @tap='toInfo(info)'>购买须知<text class="iconfont icon-dayuhao"></text></text>
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <view class="time time_1" v-if="date">{{date}}</view>
|
|
|
+ <view class="time_2" v-else>请选择时间!</view>
|
|
|
+ <button type="button" @click="open">选择日期</button>
|
|
|
+ </view>
|
|
|
+ <view class="one_3">
|
|
|
+ <view class="left">选择数量</view>
|
|
|
+ <view class="right">
|
|
|
+ <uni-number-box :min="1" :max="99" v-model="num" @change="changeNum" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="one_4" v-if="couponList.length>0">
|
|
|
+ <view class="left">优惠</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <text class="text_1">游客信息</text>
|
|
|
+ <text class="text_2">需填<text class="num">{{num}}</text>位,用于入园身份验证</text>
|
|
|
+ </view>
|
|
|
+ <view class="two_2" v-for="(item, index) in identityList" :key="index">
|
|
|
+ <view class="list_1">
|
|
|
+ <text>游客{{index+1}}</text>
|
|
|
+ <text v-if="item.name||item.card||item.phone" @tap="toDel(item,index)"
|
|
|
+ class="iconfont icon-shanchu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="list_2">
|
|
|
+ <view v-if="item.name||item.card||item.phone" class="form_1">
|
|
|
+ <view class="form_1_1">
|
|
|
+ <text v-if="item.name">{{item.name}}</text>
|
|
|
+ <text style="color: red;" v-else>缺少姓名信息 请填写补充!</text>
|
|
|
+ </view>
|
|
|
+ <view class="form_1_1">
|
|
|
+ <text v-if="item.card">{{item.card}}</text>
|
|
|
+ <text style="color: red;" v-else>缺少证件号信息 请填写补充!</text>
|
|
|
+ </view>
|
|
|
+ <view class="form_1_1">
|
|
|
+ <text v-if="item.phone">{{item.phone}}</text>
|
|
|
+ <text style="color: red;" v-else>缺少手机号信息 请填写补充!</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="form_2" @tap="toWrite(item,index)">点击填写游客信息</view>
|
|
|
+ </view>
|
|
|
+ <view class="list_3" @tap="toWrite(item,index)">编辑</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="foot">
|
|
|
+ <view class="money">
|
|
|
+ <text>¥{{info.original_price||'暂无'}}</text>
|
|
|
+ <text>¥{{info.money||'暂无'}}起</text>
|
|
|
+ </view>
|
|
|
+ <view class="button">
|
|
|
+ <button type="warn" @tap.stop="toOrder()">提交订单</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-calendar ref="calendar" :clear-date="true" :date="date" :insert="false" :lunar="true"
|
|
|
+ :startDate="startDate" :endDate="endDate" :range="false" @confirm="confirm" />
|
|
|
+ <uni-popup ref="popup" background-color="#fff" type="bottom" :is-mask-click="false">
|
|
|
+ <view class="popup">
|
|
|
+ <view class="close">
|
|
|
+ <text>新增游客信息</text>
|
|
|
+ <text @click="toClose" class="iconfont icon-shanchu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="info_1">
|
|
|
+ <uni-forms ref="form" :rules="rules" :modelValue="form" :label-width="80">
|
|
|
+ <uni-forms-item label="证件类型">
|
|
|
+ <uni-easyinput disabled v-model="type" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="姓名" required name="name">
|
|
|
+ <uni-easyinput v-model="form.name" placeholder="必填,请输入证件上的姓名" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="证件号" required name="card">
|
|
|
+ <uni-easyinput v-model="form.card" maxlength="18" placeholder="必填,请输入证件号" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="手机号" required name="phone">
|
|
|
+ <uni-easyinput v-model="form.phone" maxlength="11" placeholder="必填,请输入联系人手机号" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <button class="button" type="primary" @click="submit('form')">登录</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ user: {},
|
|
|
+ info: {
|
|
|
+ file: []
|
|
|
+ },
|
|
|
+ // 身份信息
|
|
|
+ identityList: [{
|
|
|
+ id: 0,
|
|
|
+ }],
|
|
|
+ // 优惠卷
|
|
|
+ couponList: [],
|
|
|
+ // 数量
|
|
|
+ num: 1,
|
|
|
+ // 日期
|
|
|
+ date: '',
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ // 游客信息
|
|
|
+ form: {},
|
|
|
+ type: '身份证',
|
|
|
+ // 校验规则
|
|
|
+ rules: {
|
|
|
+ name: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请填写姓名'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ phone: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请填写手机号码',
|
|
|
+ }, {
|
|
|
+ validateFunction: function(rule, value, data, callback) {
|
|
|
+ let iphoneReg = (
|
|
|
+ /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
|
|
|
+ ); //手机号码
|
|
|
+ if (!iphoneReg.test(value)) {
|
|
|
+ callback('手机号码格式不正确,请重新填写')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ card: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请填写证件号',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validateFunction: function(rule, value, data, callback) {
|
|
|
+ let iphoneReg =
|
|
|
+ /^[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-9]||[Xx]$/
|
|
|
+ if (!iphoneReg.test(value)) {
|
|
|
+ callback('身份证号格式不正确,请重新填写')
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: async function(e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `id`, e && e.id || '');
|
|
|
+ that.searchToken();
|
|
|
+ that.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ searchToken() {
|
|
|
+ const that = this;
|
|
|
+ try {
|
|
|
+ const res = uni.getStorageSync('token');
|
|
|
+ if (res) {
|
|
|
+ that.$set(that, `user`, res);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ uni.showToast({
|
|
|
+ title: err.errmsg,
|
|
|
+ icon: 'error',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async search() {
|
|
|
+ const that = this;
|
|
|
+ if (that.id) {
|
|
|
+ const res = await that.$api(`/ticket/${that.id}`, 'GET', {})
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ if (res.data.date) {
|
|
|
+ that.$set(that, `startDate`, res.data.date[0])
|
|
|
+ that.$set(that, `endDate`, res.data.date[1])
|
|
|
+ }
|
|
|
+ that.$set(that, `info`, res.data)
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 详情
|
|
|
+ toInfo(e) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pagesHome/ticket/info?id=${e.id||e._id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //日期弹窗
|
|
|
+ open() {
|
|
|
+ const that = this;
|
|
|
+ that.$refs.calendar.open()
|
|
|
+ },
|
|
|
+ // 选择日期
|
|
|
+ confirm(e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `date`, e.fulldate)
|
|
|
+ },
|
|
|
+ // 数字选择器
|
|
|
+ changeNum(value) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `num`, value)
|
|
|
+ const data = []
|
|
|
+ const identity = []
|
|
|
+ identity.length = value;
|
|
|
+ // 处理数量+1 游客信息+1
|
|
|
+ for (let [index, val] of identity.entries()) {
|
|
|
+ data.push({
|
|
|
+ id: index
|
|
|
+ })
|
|
|
+ }
|
|
|
+ that.$set(that, `identityList`, data)
|
|
|
+ },
|
|
|
+ // 删除用户信息
|
|
|
+ toDel(item, index) {
|
|
|
+ console.log(item, index);
|
|
|
+ },
|
|
|
+ // 编辑游客信息
|
|
|
+ toWrite(item, index) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `form`, item)
|
|
|
+ that.$refs.popup.open()
|
|
|
+ },
|
|
|
+ // 登录
|
|
|
+ submit(ref) {
|
|
|
+ const that = this;
|
|
|
+ that.$refs[ref].validate().then(async form => {
|
|
|
+ // 根据id 寻找添加的游客信息
|
|
|
+ for (let val of that.identityList) {
|
|
|
+ if (val.id == that.form.id) {
|
|
|
+ form.id = that.form.id
|
|
|
+ val = form
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.toClose()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ toClose() {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `form`, {});
|
|
|
+ that.$refs.popup.close();
|
|
|
+ },
|
|
|
+ // 提交订单
|
|
|
+ async toOrder() {
|
|
|
+ const that = this;
|
|
|
+ if (!that.date) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择日期!',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 判断每个游客信息是否都填写
|
|
|
+ const name = that.identityList.every(function(item) {
|
|
|
+ return item.name;
|
|
|
+ })
|
|
|
+ if (name) {
|
|
|
+ console.log('提交订单');
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '未填写游客信息!',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ background-image: linear-gradient(to top, rgba(249, 249, 249, 0), rgba(249, 249, 249, 0), rgba(0, 0, 255, 1));
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .one {
|
|
|
+ margin: 2vw;
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--f3CColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .time {
|
|
|
+ text-align: center;
|
|
|
+ padding: 2vw;
|
|
|
+ margin: 2vw;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time_1 {
|
|
|
+ color: var(--f3CColor);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time_2 {
|
|
|
+ padding: 2vw;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--fF0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_3 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 4vw 2vw;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .left {
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_4 {
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ margin: 0 2vw;
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .text_1 {
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text_2 {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ padding: 0 2px;
|
|
|
+ color: var(--fF0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 2vw;
|
|
|
+ border-bottom: 1px solid var(--f9Color);
|
|
|
+
|
|
|
+ .list_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 2px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_2 {
|
|
|
+ .form_1 {
|
|
|
+ width: 55vw;
|
|
|
+ padding: 0 2px;
|
|
|
+
|
|
|
+ .form_1_1 {
|
|
|
+ padding: 3px 0;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form_2 {
|
|
|
+ color: var(--f3CColor);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_3 {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 2vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .money {
|
|
|
+ text-align: right;
|
|
|
+ color: var(--fF0Color);
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: var(--f69Color);
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ button {
|
|
|
+ width: 30vw;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ border-radius: 40px;
|
|
|
+ background: linear-gradient(to right, #00BFFF, #007AFF);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-popup {
|
|
|
+ z-index: 9999 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 60vh;
|
|
|
+
|
|
|
+ .close {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 54vh;
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ button {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ background: linear-gradient(to right, #00BFFF, #007AFF);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|