fix
This commit is contained in:
commit
dddfeb947c
76
src/components/display-box/index.vue
Normal file
76
src/components/display-box/index.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="content2">
|
||||
<div class="wrap1" v-for="item in result">
|
||||
<div class="wrap1_1">
|
||||
<slot :name="Object.keys(item).find(x=>x.includes('l'))"></slot>
|
||||
</div>
|
||||
<div class="wrap1_2">
|
||||
<slot :name="Object.keys(item).find(x=>x.includes('r'))"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup >
|
||||
import {useSlots,ref} from 'vue'
|
||||
const slots = useSlots();
|
||||
const groupObjectsByNumberKeys=(obj)=> {
|
||||
const grouped = {};
|
||||
for (const key in obj) {
|
||||
const numericPart = key.slice(1);
|
||||
if (!grouped[numericPart]) {
|
||||
grouped[numericPart] = {};
|
||||
}
|
||||
grouped[numericPart][key] = obj[key];
|
||||
}
|
||||
return Object.values(grouped);
|
||||
}
|
||||
const result = ref(groupObjectsByNumberKeys(slots))
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content2{
|
||||
margin-top: 38rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding-left: 18rpx;
|
||||
padding-right: 32rpx;
|
||||
.wrap1{
|
||||
padding-left: 14rpx;
|
||||
padding-top: 26rpx;
|
||||
padding-bottom: 22rpx;
|
||||
border-bottom: 1rpx solid #E4EAF1;;
|
||||
display: flex;
|
||||
.wrap1_2{
|
||||
padding-left: 36rpx;
|
||||
font-size: 24rpx;
|
||||
color: #939393;
|
||||
}
|
||||
.wrap1_1{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 192rpx;
|
||||
border-right: 1rpx solid #E4EAF1;
|
||||
.wrap1_1_1{
|
||||
font-size: 24rpx;
|
||||
color: #626262;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.wrap1_1_2{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16rpx;
|
||||
color: #fff;
|
||||
width: 80rpx;
|
||||
height: 28rpx;
|
||||
background-color:#FFCD5C ;
|
||||
border-radius: 24rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
import {uniFetch} from "@/http/main";
|
||||
|
||||
const fetch = new uniFetch({
|
||||
baseUrl: 'https://warehouse.szjixun.cn',
|
||||
interceptors: {
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import {config} from "@/tmui/components/tm-message/interface";
|
||||
|
||||
type HttpMethod =
|
||||
| "GET"
|
||||
| 'get'
|
||||
@ -84,7 +82,6 @@ class uniFetch {
|
||||
}
|
||||
|
||||
private handleResponse(response: any): any {
|
||||
// 执行响应拦截器（如果有）
|
||||
if (this.interceptors.response) {
|
||||
response = this.interceptors.response(response);
|
||||
}
|
||||
|
||||
90
src/pages/ticket-details/index.vue
Normal file
90
src/pages/ticket-details/index.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="large-container">
|
||||
<div class="content1">
|
||||
<div class="wrap1">
|
||||
<image src="../../static/zu1053@3x.png"></image>
|
||||
</div>
|
||||
<div class="wrap2">门票系统的某个场馆</div>
|
||||
</div>
|
||||
<div class="content2">
|
||||
<image
|
||||
src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
|
||||
</div>
|
||||
<display-box>
|
||||
<template #l1>
|
||||
<div class="box-left">
|
||||
门票名称
|
||||
</div>
|
||||
</template>
|
||||
<template #r1>
|
||||
<div class="box-right">
|
||||
首都博物馆门票
|
||||
</div>
|
||||
</template>
|
||||
<template #l2>
|
||||
<div class="box-left">
|
||||
预留手机号(+86)
|
||||
</div>
|
||||
</template>
|
||||
<template #r2>
|
||||
<div class="box-right">
|
||||
192119280121
|
||||
</div>
|
||||
</template>
|
||||
</display-box>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import displayBox from '../../components/display-box/index.vue'
|
||||
const list = [{}]
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box-left{
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
.box-right{
|
||||
font-size: 24rpx;
|
||||
color: #72665F;
|
||||
}
|
||||
.large-container {
|
||||
flex-grow: 1;
|
||||
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
||||
background-size: 100%;
|
||||
padding: 32rpx 42rpx 0 42rpx;
|
||||
|
||||
.content2 {
|
||||
margin-top: 12rpx;
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 354rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/72db012a-0443-4977-956a-f9b20c6faa29.png");
|
||||
background-size: 100%;
|
||||
|
||||
.wrap2 {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap1 {
|
||||
margin-right: 10rpx;
|
||||
margin-left: 18rpx;
|
||||
|
||||
image {
|
||||
width: 21.18rpx;
|
||||
height: 29rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-item">
|
||||
<div class="card-name">
|
||||
姓名
|
||||
</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="text" v-model="visitors.name" />
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="card-name">
|
||||
<div class="card-name">身份证号</div>
|
||||
<div>
|
||||
<input v-model="visitors.id" type="idcard" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
let visitorsList = ref([])
|
||||
let visitors = reactive({
|
||||
name: '',
|
||||
id: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
margin-top: 20rpx;
|
||||
width: 690rpx;
|
||||
height: 190rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
width: 200rpx;
|
||||
border-right: 1rpx solid #BBC5E0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -47,8 +47,8 @@
|
||||
<div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">选择时间</div>
|
||||
<div class="time">
|
||||
<span style="width: 300rpx;">2023年12月16日</span>
|
||||
<div style="display: flex;align-items: center;">
|
||||
选择
|
||||
<div style="display: flex;align-items: center;" @click="showHandle">
|
||||
<span>选择</span>
|
||||
<tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,13 +59,29 @@
|
||||
<div style="margin-left: 20rpx;" class="stepper">
|
||||
<div style="color: #B29E92;font-size: 24rpx">*单次最多可预约10人</div>
|
||||
<div>
|
||||
<tm-stepper v-model="reactive.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
|
||||
:max="10" :height="40" :width="160" class="itme-stepper"></tm-stepper>
|
||||
<tm-stepper v-model="formData.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
|
||||
:max="10" :height="40" :width="160" @change="changeNum"></tm-stepper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Card></Card>
|
||||
<div v-for="(item, index) in visitorsList" class="card" :key="index">
|
||||
<div class="card-item">
|
||||
<div class="name">姓名</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="text" v-model="item.name" />
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="card-item">
|
||||
<div class="name">身份证号</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="idcard" v-model="item.idCard" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
|
||||
<select-day :show.sync="show"></select-day>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -73,18 +89,22 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive, watch } from "vue";
|
||||
import { useTimer } from '@/tmui/tool/useFun/useTimer'
|
||||
import Card from "./card/index"
|
||||
import selectDay from './select-day/index'
|
||||
const { start, stop, formattedTime, status, restart, timeObj, times, change } = useTimer({
|
||||
totalTime: 10, unit: 'ss', format: 'ss秒'
|
||||
});
|
||||
let height = ref(0)
|
||||
let code = ref('获取验证码')
|
||||
let isCode = ref(true)
|
||||
let show = ref(false)
|
||||
const formData = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
num: 0
|
||||
})
|
||||
let visitorsList = ref([])
|
||||
const msg = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
|
||||
let res = uni.getSystemInfoSync();
|
||||
@ -99,15 +119,49 @@ const sendCode = () => {
|
||||
}
|
||||
}
|
||||
watch(times, (newValue) => {
|
||||
console.log(newValue)
|
||||
if (newValue === 0) {
|
||||
code.value = '重新获取';
|
||||
isCode.value = true;
|
||||
stop()
|
||||
}
|
||||
})
|
||||
const changeNum = (value) => {
|
||||
formData.num = value
|
||||
}
|
||||
watch(() => formData.num, (newValue, oldValue) => {
|
||||
console.log(newValue, oldValue)
|
||||
if (newValue > oldValue) {
|
||||
for (let i = 0; i < newValue - oldValue; i++) {
|
||||
visitorsList.value.push({
|
||||
name: '',
|
||||
idCard: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
if (newValue < oldValue) {
|
||||
visitorsList.value.splice(-(oldValue - newValue))
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const reservation = () => {
|
||||
console.log(visitorsList.value)
|
||||
const result = visitorsList.value.filter((item) => item.name && item.idCard)
|
||||
if (result.map((item) => item.idCard).some((n, index, arr) => arr.indexOf(n) !== index)) {
|
||||
return uni.showToast({
|
||||
title: '身份证不能重复',
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
if (Object.values(formData).some((item) => !item)) {
|
||||
return uni.showToast({
|
||||
title: '信息填写完整',
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
const showHandle = () => {
|
||||
show.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -142,6 +196,30 @@ watch(times, (newValue) => {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 200rpx;
|
||||
border-right: 1rpx solid #BBC5E0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title-detail {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
|
||||
25
src/pages/ticket/select-day/index.vue
Normal file
25
src/pages/ticket/select-day/index.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<tm-drawer placement="bottom" okText='确认' v-model:show="show" @close="close">
|
||||
</tm-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted, defineEmits, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(["update:show"]);
|
||||
|
||||
|
||||
const close = () => {
|
||||
emits("update:show", false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
BIN
src/static/zu1053@3x.png
Normal file
BIN
src/static/zu1053@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in New Issue
Block a user