fix
This commit is contained in:
parent
02ba264934
commit
f42b479c0b
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -3,5 +3,6 @@
|
||||
"src/tmui/locale",
|
||||
"src/tmui/tool/dayjs/locale",
|
||||
"src/tmui/tool/dayjs/esm/locale"
|
||||
]
|
||||
],
|
||||
"vue-i18n.i18nPaths": "src\\tmui\\locale,src\\tmui\\tool\\dayjs\\locale,src\\tmui\\tool\\dayjs\\esm\\locale"
|
||||
}
|
||||
61
src/components/title/index.vue
Normal file
61
src/components/title/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="content1" :style="{ marginTop: `${statusBarHeight}px` }">
|
||||
<div class="wrap1" v-if="isBack">
|
||||
<tm-icon name="tmicon-angle-left" color="#FFFFFF" @click="back"></tm-icon>
|
||||
</div>
|
||||
<div class="wrap2">{{ title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref } from 'vue'
|
||||
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight + 5)
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const back = () => {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content1 {
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.wrap1 {
|
||||
flex-basis: 0;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wrap3 {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.wrap2 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -4,9 +4,11 @@ import tmui from "./tmui";
|
||||
import App from "./App.vue";
|
||||
// @ts-ignore
|
||||
import api from "@/http";
|
||||
import title from "./components/title/index.vue";
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App);
|
||||
app.config.globalProperties.$api = api;
|
||||
app.component("title", title);
|
||||
app.use(tmui, { shareDisable: false } as Tmui.tmuiConfig);
|
||||
return {
|
||||
app,
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
@ -26,6 +27,27 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/home/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"titleNView": false // 禁用原生导航
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
},
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/fankui/index",
|
||||
"style": {
|
||||
|
||||
@ -1,15 +1,71 @@
|
||||
<template>
|
||||
<div>home
|
||||
<div>
|
||||
<tm-button>13212121212</tm-button>
|
||||
</div>
|
||||
homehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehome
|
||||
homehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehomehome
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div>门票名称</div>
|
||||
<div>剩余数量</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="item">
|
||||
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
|
||||
<div class="detail">
|
||||
<div style="width: 140rpx;">首都博物馆门票</div>
|
||||
<div>1023/20000</div>
|
||||
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
||||
background-size: 100%;
|
||||
padding: 38rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #AB2F23;
|
||||
height: 70rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 2rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.detail {
|
||||
flex: 1;
|
||||
margin-left: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
211
src/pages/ticket/index.vue
Normal file
211
src/pages/ticket/index.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<title class="title-block" title="门票系统的某个场馆">
|
||||
</title>
|
||||
<div :style="height + 'px'" class="container">
|
||||
<div class="title">
|
||||
<tm-icon name="tmicon-position" color="#fff" :fontSize="40"></tm-icon>
|
||||
<div style="margin-left: 10rpx;">门票系统的某个场馆</div>
|
||||
</div>
|
||||
<div>
|
||||
<image src="../../static/logo.png" mode="scaleToFill"
|
||||
style="width: 664rpx;height:354rpx;margin-top: 20rpx;display: ;" />
|
||||
</div>
|
||||
<div class="title-detail">
|
||||
<div class="item">
|
||||
<div class="name">门票名称</div>
|
||||
<div style="margin-left: 20rpx;">首都博物馆门票</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="item">
|
||||
<div class="name">剩余数量</div>
|
||||
<div style="margin-left: 20rpx;">1023/20000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="title-detail" style="background: #fff;">
|
||||
<div class="item">
|
||||
<div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">预留手机号
|
||||
<span style="font-size: 20rpx;"> (+86)</span>
|
||||
</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="text" v-model="formData.phone" @input="changePhone" />
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="item">
|
||||
<div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">验证码</div>
|
||||
<div class="code">
|
||||
<input type="text" v-model="formData.code" @input="changePhone" class="inputCode" />
|
||||
<div style="color:#B1292E" @click="sendCode" v-if="isCode">{{ code }}</div>
|
||||
<div v-else style="color:#B1292E">{{ formattedTime() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-detail" style="background: #fff; color: #000000">
|
||||
<div class="item">
|
||||
<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;">
|
||||
选择
|
||||
<tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="item">
|
||||
<div class="name" style=" color: #000000;border-right:1rpx solid #BBC5E0;">选择人数</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive, watch } from "vue";
|
||||
import { useTimer } from '@/tmui/tool/useFun/useTimer'
|
||||
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)
|
||||
const formData = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
num: 0
|
||||
})
|
||||
onMounted(() => {
|
||||
uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
|
||||
let res = uni.getSystemInfoSync();
|
||||
height = res.windowHeight - data.bottom;
|
||||
}).exec()
|
||||
})
|
||||
const sendCode = () => {
|
||||
restart()
|
||||
isCode.value = false;
|
||||
if (status.value == -1 || status.value == 0) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
watch(times, (newValue) => {
|
||||
console.log(newValue)
|
||||
if (newValue === 0) {
|
||||
code.value = '重新获取';
|
||||
isCode.value = true;
|
||||
stop()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
||||
background-size: 100%;
|
||||
padding: 0 32rpx 38rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
background: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/f4eff459-319c-4588-8efe-8638b5c66a4f.png") no-repeat;
|
||||
background-size: cover;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title-detail {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
background-color: #B1292E;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
|
||||
.name {
|
||||
width: 200rpx;
|
||||
border-right: 1rpx solid #fff;
|
||||
}
|
||||
|
||||
.code {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.inputCode {
|
||||
width: 250rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-left: 20rpx;
|
||||
color: #000000;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
border-bottom: 1rpx #BBC5E0 dashed;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.stepper--flex) {
|
||||
width: 130rpx !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
src/static/line.png
Normal file
BIN
src/static/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in New Issue
Block a user