|
|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <view class="pages">
|
|
|
+ <view class="" :style="{height: navHeight+'px' }"></view>
|
|
|
+ <view class="navbar-box">
|
|
|
+ <u-navbar title="选择区域" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
|
|
|
+ </view>
|
|
|
+ <view class="page-wrap">
|
|
|
+ <view class="base-info">
|
|
|
+ <view class="name">{{params.performName}}</view>
|
|
|
+ <view class="time u-flex">
|
|
|
+ <view class="title">{{params.day|checkDate}}</view>
|
|
|
+ <text>{{params.day}} {{params.time}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="position-wrap u-flex u-row-center">
|
|
|
+ <view class="u-flex item" :class="{active:positionIndex==index}" @click="positionClick(index)" v-for="(item,index) in positionArr" :key="index">
|
|
|
+ <image class="icon" :src="item.icon" ></image>
|
|
|
+ <text>¥{{item.price}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="position-img" :src="staticUrl+'/img/position-img.png'" mode="widthFix"></image>
|
|
|
+ <view class="btn" @click="book">确定区域</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { systemInfo } from "@/mixin.js";
|
|
|
+ export default {
|
|
|
+ mixins: [systemInfo],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ staticUrl:this.$commonConfig.staticUrl,
|
|
|
+ params:{
|
|
|
+ day:'',
|
|
|
+ goodsId:'',
|
|
|
+ performId:'',
|
|
|
+ performName:'',
|
|
|
+ time:'',
|
|
|
+ },
|
|
|
+ positionArr:[
|
|
|
+ {price:120,icon:this.$commonConfig.staticUrl+'/img/position-1.png'},
|
|
|
+ {price:360,icon:this.$commonConfig.staticUrl+'/img/position-2.png'},
|
|
|
+ {price:240,icon:this.$commonConfig.staticUrl+'/img/position-3.png'}
|
|
|
+ ],
|
|
|
+ positionIndex:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ onLoad(page) {
|
|
|
+ console.log('page',page);
|
|
|
+ this.params.day = page.day;
|
|
|
+ this.params.goodsId = page.goodsId;
|
|
|
+ this.params.performId = page.performId;
|
|
|
+ this.params.performName = page.performName;
|
|
|
+ this.params.time = page.time;
|
|
|
+ this.getSystemInfo();
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ leftClick(e){
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ if(pages.length==1){
|
|
|
+ uni.$u.route('/pages/index/index')
|
|
|
+ }else{
|
|
|
+ uni.navigateBack()
|
|
|
+ };
|
|
|
+ },
|
|
|
+ book(){
|
|
|
+ this.params.price = this.positionArr[this.positionIndex].price;
|
|
|
+ uni.$u.route('pages/bookticket',this.params)
|
|
|
+ },
|
|
|
+ positionClick(index){
|
|
|
+ this.positionIndex = index;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+page{
|
|
|
+ background-color: #F7F7F9;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-wrap{
|
|
|
+ padding-top: 36rpx;
|
|
|
+}
|
|
|
+.base-info{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(221,221,221,0.4);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 38rpx 28rpx;
|
|
|
+ margin-bottom: 54rpx;
|
|
|
+ .name{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2D2D2D;
|
|
|
+ line-height: 42rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #7F7F7F;
|
|
|
+ .title{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #F01414;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.position-wrap{
|
|
|
+ margin-bottom: 80rpx;
|
|
|
+ .item{
|
|
|
+ padding: 20rpx 24rpx 14rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx solid #D9D9D9;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EF1D1E;
|
|
|
+ .icon{
|
|
|
+ display: block;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ border-color: #EF1D1E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.position-img{
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+}
|
|
|
+.btn{
|
|
|
+ height: 92rpx;
|
|
|
+ line-height: 92rpx;
|
|
|
+ background: linear-gradient(90deg, #FF7878 0%, #ED0000 100%);
|
|
|
+ border-radius: 46rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+</style>
|
