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

submit

Browse Source
This commit is contained in:
xingyy 2023-12-15 19:02:04 +08:00
parent 3d280f21cf
commit 621f1d2f40
11 changed files with 222 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/custom-title/index.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="content2" :style="{height: `${menuButtonTop}px`}">
<div class="wrap2" v-if="isBack" @click="goBack">
<image src="../../static/tbys@3x.png"></image>
</div>
<div class="wrap1" :style="{marginTop: `${titleTop}px`,height:`${titleHeight}px`}">{{title}}</div>
</div>
</template>
@ -13,6 +16,11 @@ const rpxToPx=(rpx)=>{
}
const titleTop=ref(0)
const titleHeight=ref(0)
const goBack=()=>{
uni.navigateBack({
delta: 1
});
}
const getMenuButtonBoundingClientRect=()=> {
// #ifdef MP-WEIXIN
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
@ -49,6 +57,17 @@ const back = () => {
overflow: hidden;
width:100vw;
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/6f9f30f6-9383-4ae6-872c-4e6795eaa25f.png");
.wrap2{
left: 42rpx;
bottom: 26rpx;
position: absolute;
width: 18rpx;
height: 34rpx;
image{
width: 100%;
height: 100%;
}
}
.wrap1{
font-size: 34rpx;
color: #fff;

8
src/main.ts
View File

@ -1,18 +1,18 @@
import { createSSRApp } from "vue";
import * as Pinia from "pinia";
import tmui from "./tmui";
import App from "./App.vue";
import { createPinia } from 'pinia'
import customTitle from "./components/custom-title/index.vue";
import uniTransition from "@/components/uni-transition/uni-transition.vue";
export function createApp() {
const app = createSSRApp(App);
const pinia = createPinia()
app.use(pinia)
app.component("customTitle", customTitle);
app.component("uniTransition", uniTransition);
app.use(tmui, { shareDisable: false } as Tmui.tmuiConfig);
return {
app,
Pinia,
pinia
};
}

12
src/pages.json
View File

@ -18,6 +18,18 @@
}
}
},
{
"path": "pages/blind-box/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/home/index",
"style": {

108
src/pages/blind-box/index.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div class="container">
<custom-title class="title-block" title="博物馆盲盒">
</custom-title>
<div class="main">
<div class="content1">
<div class="wrap1">
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/78a61919-6e1e-4b5d-96cc-1ecd94c00236.png"></image>
</div>
<div class="wrap2">博物馆开馆纪念盲盒</div>
</div>
<div class="content2">
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/76216159-e5a9-49ef-a6b3-6043924243e7.png"></image>
</div>
<div class="content3">领取兑换</div>
<div class="content4"></div>
<div class="content5">
<div class="wrap1" v-for="item in imgList" :key="item.url">
<image :src="item.url"></image>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
const imgList=ref([{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'},{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'}])
</script>
<style scoped lang="scss">
.container{
display: flex;
flex-direction: column;
height: 100vh;
.main{
overflow-y: auto;
box-sizing: border-box;
padding: 32rpx 42rpx 0 42rpx;
width: 100vw;
flex: 1;
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%;
.content5{
margin-bottom: 90rpx;
margin-top: 20rpx;
width: 100%;
.wrap1{
margin-bottom: 20rpx;
width: 100%;
height:454rpx;
image{
width: 100%;
height: 100%;
}
}
}
.content4 {
margin-top: 42rpx;
height: 1rpx;
width: 100%;
background-image: url("../../static/zx303@3x.png");
background-size: 100%;
}
.content3{
margin-top: 20rpx;
font-size: 24rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 24rpx;
background-color: #B1292E;
width: 100%;
height: 82rpx;
}
.content2{
margin-top: 12rpx;
width: 100%;
image{
width: 100%;
}
}
.content1{
box-sizing: border-box;
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/793bc6e0-ba68-4085-b3e3-cbc8890c07af.png");
width: 100%;
height: 60rpx;
background-size: 100%;
display: flex;
align-items: center;
padding-left: 20rpx;
.wrap2{
font-size: 32rpx;
color: #fff;
}
.wrap1{
margin-right: 12rpx;
width: 39.75rpx;
height: 39.75rpx;
image{
width: 100%;
height: 100%;
}
}
}
}
}
</style>

74
src/pages/home/index.vue
View File

@ -1,6 +1,15 @@
<template>
<div class="main">
<div class="content3">
<div class="wrap1">
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/1d693295-c16b-4845-a02b-c052d9cf847a.png" /></div>
<div class="wrap2" @click="viewBlindBoxDetail">
<div class="wrap2_1">博物馆开馆纪念盲盒</div>
<div class="wrap2_2">剩余 23/20000</div>
<div class="wrap2_3">查看详情</div>
</div>
</div>
<div class="content1">
<div class="wrap1">门票名称</div>
<div class="wrap2">剩余数量</div>
@ -11,14 +20,14 @@
<image :src="'../../static/112121@3x.png'"></image>
</div>
<div class="wrap1_2">首都博物馆门票</div>
<div class="wrap1_3">1023/20000</div>
<div class="wrap1_3">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
<div class="wrap1_4">预约</div>
</div>
<div class="wrap2">
<image src="../../static/zu758@3x.png"></image>
</div>
</div>
<div class="attention" v-if="isShow">
<div class="attention" v-if="store.isShow">
<div>
注：港澳台游客请至现场办理门票业务！
</div>
@ -27,8 +36,12 @@
</div>
</template>
<script setup>
/* 导入区*/
import { ref } from "vue";
import {ticketlist} from "@/http/apis";
import {useMainStore} from "@/store";
/**/
const store=useMainStore()
let height = ref('')
let isShow = ref(true)
const tableData=ref([])
@ -46,9 +59,14 @@ const getData=async ()=>{
tableData.value=res.data.data
}
}
const viewBlindBoxDetail=()=>{
uni.navigateTo({
url: '/pages/blind-box/index'
})
}
getData()
const handleTips = () => {
isShow.value = false
store.isShow=false
}
</script>
<style scoped lang="scss">
@ -60,6 +78,51 @@ const handleTips = () => {
display: flex;
flex-direction: column;
box-sizing: border-box;
.content3{
border-radius: 20rpx;
margin-bottom: 30rpx;
margin-top: 40rpx;
overflow: hidden;
display: flex;
.wrap2{
background-color: #fff;
width: 350rpx;
height: 214rpx;
display: flex;
flex-direction: column;
align-items: center;
.wrap2_1{
margin-top: 40rpx;
font-size: 28rpx;
color: #000;
}
.wrap2_2{
margin-top: 8rpx;
font-size: 24rpx;
color: #F7963B;
}
.wrap2_3{
margin-top: 20rpx;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
width: 240rpx;
height: 56rpx;
color: #fff;
background-color: #F7963B;
}
}
.wrap1{
width: 350rpx;
height: 214rpx;
image{
width: 100%;
height: 100%;
}
}
}
.content2{
flex: 1;
overflow-y: scroll;
@ -122,7 +185,7 @@ const handleTips = () => {
}
.content1 {
box-sizing: border-box;
margin-top: 20rpx;
width: 100%;
background: #AB2F23;
height: 70rpx;
@ -148,7 +211,6 @@ const handleTips = () => {
color: #FFFFFF;
}
}
.container {
overflow-y: auto;
height: 1120rpx;
@ -185,7 +247,7 @@ const handleTips = () => {
background: #761C1F;
height: 68rpx;
color: #FFFFFF;
bottom: 150rpx;
bottom: 50rpx;
padding: 16rpx 40rpx;
box-sizing: border-box;
border-radius: 24rpx;

4
src/pages/mine/index.vue
View File

@ -171,10 +171,9 @@ const goSetUp = () => {
margin-top: 38rpx;
height: 1rpx;
width: 100%;
background-image: url("../../static/zx303@3x (1).png");
background-image: url("../../static/zx303@3x.png");
background-size: 100%;
}
.content2 {
margin-top: 34rpx;
width: 686rpx;
@ -183,7 +182,6 @@ const goSetUp = () => {
background-color: #fff;
border-radius: 40rpx;
align-items: center;
.wrap1 {
border-radius: 30rpx;
margin-left: 28rpx;

BIN
src/static/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 MiB

BIN
src/static/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/static/tbys@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 B

0
src/static/zx303@3x (1).png → src/static/zx303@3x.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 209 B

After

Width:  |  Height:  |  Size: 209 B

10
src/store/index.js Normal file
View File

@ -0,0 +1,10 @@
import {defineStore} from 'pinia'
import {ref} from 'vue'
export const useMainStore = defineStore('main', () => {
const titleHeight = ref('')
const tabHeight = ref('')
const isShow = ref(true)
return {titleHeight, tabHeight, isShow}
}
)