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">
|
<div class="tab-index">
|
||||||
<custom-title class="title-block" :title="accTitleList.find(x=>x.value===acc).title" :isBack="false">
|
<custom-title class="title-block" :title="accTitleList.find(x=>x.value===acc).title" :isBack="false">
|
||||||
</custom-title>
|
</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>
|
<div v-show="acc===1" class="ld ld-float-rtl-in"><mine /></div>
|
||||||
<self-tabbar v-model="acc"></self-tabbar>
|
<self-tabbar v-model="acc"></self-tabbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import home from '../home/index.vue'
|
import home1 from '../home1/index.vue'
|
||||||
import mine from '../mine/index.vue'
|
import mine from '../mine/index.vue'
|
||||||
import selfTabbar from '../../components/self-tabbar/index.vue'
|
import selfTabbar from '../../components/self-tabbar/index.vue'
|
||||||
import {ref} from "vue";
|
import {ref} from "vue";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user