submit
This commit is contained in:
parent
a30b63dd36
commit
de3915db25
350
src/pages/home1/index.vue
Normal file
350
src/pages/home1/index.vue
Normal file
@ -0,0 +1,350 @@
|
||||
<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">剩余 {{allRemainingQty}}/{{allIssueQty}}</div>
|
||||
<div class="wrap2_3">查看详情</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content1">
|
||||
<div class="wrap1">门票名称</div>
|
||||
<div class="wrap2">剩余数量</div>
|
||||
</div>
|
||||
<div class="content2">
|
||||
<div class="wrap1" v-for="(item,index) in [...tableData,...tableData]" :key="item.id">
|
||||
<div @click="viewImg(item)" class="wrap1_1">
|
||||
<image :src="item.ticketImage"></image>
|
||||
</div>
|
||||
<div class="wrap1_2">{{item.ticketName}}</div>
|
||||
<div class="wrap1_3" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
|
||||
<div class="wrap1_4" @click="goBooking(item)" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
|
||||
</div>
|
||||
<div class="wrap2">
|
||||
<image src="../../static/zu758@3x.png"></image>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="content4">
|
||||
<div class="wrap1">
|
||||
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/13e8a0db-9dca-4bdf-89d5-5868ec7c96e0.png"></image>
|
||||
</div>
|
||||
<div class="wrap2" @click="viewBlindBoxDetail">
|
||||
<div class="wrap2_1">
|
||||
<div class="wrap2_1_1">博物馆开馆纪念盲盒</div>
|
||||
<div class="wrap2_1_2">剩余 {{allRemainingQty}}/{{allIssueQty}}</div>
|
||||
</div>
|
||||
<div class="wrap2_2">查看详情</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attention" v-if="store.isShow">
|
||||
<div>
|
||||
注：港澳台游客请至现场办理门票业务！
|
||||
</div>
|
||||
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
|
||||
</div>
|
||||
</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([])
|
||||
const page=ref(1)
|
||||
const pageSize=ref(9999)
|
||||
const viewImg=(item)=>{
|
||||
uni.previewImage({
|
||||
urls:[item.ticketImage],
|
||||
indicator:'none'
|
||||
})
|
||||
}
|
||||
const allIssueQty=ref(0)
|
||||
const allRemainingQty=ref(0)
|
||||
const getData=async ()=>{
|
||||
const data={
|
||||
"keyword": "",
|
||||
"isMobile": 1,
|
||||
"page": page.value,
|
||||
"pageSize": pageSize.value
|
||||
}
|
||||
const res=await ticketlist(data)
|
||||
if (res.code===200){
|
||||
allIssueQty.value=res.data.allIssueQty
|
||||
allRemainingQty.value=res.data.allRemainingQty
|
||||
tableData.value=res.data.data
|
||||
}
|
||||
}
|
||||
const goBooking=(item)=>{
|
||||
if (item.remainingQuantity!==0){
|
||||
uni.navigateTo({
|
||||
url: '/pages/ticket/index'
|
||||
})
|
||||
}else {
|
||||
uni.showToast({
|
||||
title: '该门票已售罄',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
}
|
||||
uni.setStorageSync('currentBooking',item)
|
||||
store.currentBooking=item
|
||||
}
|
||||
const viewBlindBoxDetail=()=>{
|
||||
uni.navigateTo({
|
||||
url: '/pages/blind-box/index'
|
||||
|
||||
})
|
||||
}
|
||||
getData()
|
||||
const handleTips = () => {
|
||||
store.isShow=false
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
background-size: 100%;
|
||||
padding: 0 32rpx 38rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
.content4{
|
||||
margin-top: 40rpx;
|
||||
width: 700rpx;
|
||||
height: 576rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.wrap2{
|
||||
box-sizing: border-box;
|
||||
padding-right: 48rpx;
|
||||
padding-left: 48rpx;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 700rpx;
|
||||
height: 120rpx;
|
||||
.wrap2_2{
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 240rpx;
|
||||
height: 56rpx;
|
||||
background-color: #F7963B;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.wrap2_1{
|
||||
.wrap2_1_2{
|
||||
font-size: 20rpx;
|
||||
color: #F7963B;
|
||||
}
|
||||
.wrap2_1_1{
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.wrap1{
|
||||
width: 700rpx;
|
||||
height: 456rpx;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
margin-top: 22rpx;
|
||||
.wrap2{
|
||||
margin-bottom: 68rpx;
|
||||
margin-top: 68rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 587.8rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
}
|
||||
.wrap1{
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
height: 108rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
.wrap1_1{
|
||||
box-sizing: border-box;
|
||||
padding: 5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 165rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
.wrap1_4{
|
||||
width: 108rpx;
|
||||
height: 56rpx;
|
||||
background-color: #F7963B;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.sold_out{
|
||||
background-color: #AFAFAF;
|
||||
}
|
||||
}
|
||||
.wrap1_3{
|
||||
color: #F7963B;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 224rpx;
|
||||
&.sold_out{
|
||||
color: #AFAFAF;
|
||||
}
|
||||
}
|
||||
.wrap1_2{
|
||||
width: 140rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content1 {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
background: #AB2F23;
|
||||
height: 70rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
.wrap1 {
|
||||
padding-right: 36rpx;
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
flex-shrink: 1;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
.wrap2 {
|
||||
padding-left: 36rpx;
|
||||
width: 50%;
|
||||
flex-shrink: 1;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
overflow-y: auto;
|
||||
height: 1120rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 2rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.item {
|
||||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.attention {
|
||||
width: 664rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
background: #761C1F;
|
||||
height: 68rpx;
|
||||
color: #FFFFFF;
|
||||
bottom: 50rpx;
|
||||
padding: 16rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,13 +2,13 @@
|
||||
<div class="tab-index">
|
||||
<custom-title class="title-block" :title="accTitleList.find(x=>x.value===acc).title" :isBack="false">
|
||||
</custom-title>
|
||||
<div class="ld ld-float-ltr-in" v-show="acc===0"><home /></div>
|
||||
<div class="ld ld-float-ltr-in" v-show="acc===0"><home1 /></div>
|
||||
<div v-show="acc===1" class="ld ld-float-rtl-in"><mine /></div>
|
||||
<self-tabbar v-model="acc"></self-tabbar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import home from '../home/index.vue'
|
||||
import home1 from '../home1/index.vue'
|
||||
import mine from '../mine/index.vue'
|
||||
import selfTabbar from '../../components/self-tabbar/index.vue'
|
||||
import {ref} from "vue";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user