xingyy
/
uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
xingyy
Aiden 10 months ago
parent 02ba264934
commit f42b479c0b
7 changed files with 362 additions and 9 deletions
Show Stats Download Patch File Download Diff File

3
.vscode/settings.json vendored
Unescape Escape View File

@ -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
Unescape Escape View 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>

2
src/main.ts
Unescape Escape View File

@ -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,

22
src/pages.json
Unescape Escape View File

@ -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": {

72
src/pages/home/index.vue
Unescape Escape View File

@ -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
Unescape Escape View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

Write Preview
Loading…
Cancel
Save