fix pageheader

components/fl-page-header/fl-page-header.vue

@@ -68,6 +68,6 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep .u-navbar__content {
-  background: none !important;
+  background: #efefef !important;
 }
 </style>

components/price-picker/price-picker.vue

@@ -0,0 +1,135 @@
+<template>
+    <u-picker :show="show" :columns="priceColumns" keyName="price" title="请选择价位" @cancel="cancel" @confirm="confirm"
+        @change="change" :defaultIndex="defaultIndex">
+        <view slot="header">
+            <view class="header">价位/人</view>
+        </view>
+        <view slot="footer">
+            <u-transition :show="chooseText === '其他'" mode="fade" duration="900">
+                <view class="other">
+                    <view class="left">*已选择其他</view>
+                    <view class="right">
+                        <text>请填需求价位：</text>
+                        <u--input type="number" class="input" v-model="value"></u--input>
+                        <text>/人</text>
+                    </view>
+                </view>
+            </u-transition>
+        </view>
+    </u-picker>
+</template>
+  
+<script>
+export default {
+    data() {
+        return {
+            priceColumns: [],
+            chooseUuid: '',
+            chooseText: '',
+            value: null,
+            defaultIndex: [],
+            priceClass: 0
+        }
+    },
+    props: ['show', 'priceList', 'choosePriceClass'],
+    watch: {
+        priceList: {
+            immediate: true,
+            handler(newValue) {
+                this.priceColumns = [[...newValue, ...[{ uuid: newValue[0]?.uuid, price: '其他', priceClass: 0 }]]]
+                // console.log('priceColumns', this.priceColumns)
+            },
+        },
+        chooseText: {
+            // immediate: true,
+            handler(newValue) {
+                this.chooseText = newValue
+
+            },
+        },
+        // 用来拿到PriceClass的值
+        choosePriceClass: {
+            handler(newValue) {
+                this.priceClass = newValue.split('@')[0]
+                const choose = this.priceColumns[0].find((item) => item.priceClass === +this.priceClass)
+                console.log(choose)
+                this.$emit("onConfirm", { value: this.value, uuid: choose.uuid, price: choose.price, priceClass: choose.priceClass });
+            },
+        }
+    },
+    methods: {
+        cancel() {
+            this.chooseText = '';
+            this.defaultIndex = [];
+            this.$emit("update:show", false);
+        },
+        confirm(item) {
+            this.defaultIndex = [this.priceColumns[0]?.findIndex((n) => n.price === item.value[0].price)]
+            if (this.chooseText === '其他') {
+                this.$emit("onConfirm", { value: this.value, uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
+                this.$emit("update:show", false);
+            } else {
+                this.value = null
+                this.$emit("onConfirm", { uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
+                this.$emit("update:show", false);
+            }
+
+        },
+        change(item) {
+            if (item.value[0].price === '其他') {
+                this.chooseText = item.value[0].price;
+                this.chooseUuid = item.value[0].uuid
+            } else {
+                this.chooseText = ''
+            }
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+.header {
+    text-align: center;
+    border-bottom: 1rpx solid #868686;
+    border-top: 1rpx solid #868686;
+    font-size: 36rpx;
+    font-weight: 600;
+    padding: 10rpx 0;
+    width: 90%;
+    margin: auto;
+    color: #1936C9;
+}
+
+.other {
+    box-sizing: border-box;
+    border: 1px solid #1936C9;
+    width: 90%;
+    padding: 20rpx 30rpx;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 20rpx;
+    margin-bottom: 20rpx;
+
+    .left {
+        color: #1936C9;
+        font-weight: 600;
+    }
+
+    .right {
+        width: 380rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        font-size: 24rpx;
+
+        .input {
+            width: 50rpx;
+        }
+
+    }
+}
+</style>

components/w-picker/w-picker.vue

@@ -1,19 +1,9 @@
 <template name="w-picker">
   <view class="w-picker" :key="createKey" :data-key="createKey">
-    <view
-      class="mask"
-      :class="{ visible: visible }"
-      @tap="onCancel"
-      @touchmove.stop.prevent
-      catchtouchmove="true"
-    ></view>
+    <view class="mask" :class="{ visible: visible }" @tap="onCancel" @touchmove.stop.prevent catchtouchmove="true"></view>
     <view class="w-picker-cnt" :class="{ visible: visible }">
-      <view
-        class="w-picker-header"
-        @touchmove.stop.prevent
-        catchtouchmove="true"
-      >
-        <text style="font-size: 18px">请选择参观时间</text>
+      <view class="w-picker-header" @touchmove.stop.prevent catchtouchmove="true">
+        <text style="font-size: 18px">请选择时间</text>
         <text @tap.stop.prevent="onCancel">
           <u-icon name="close-circle" size="26"></u-icon>
         </text>
@@ -22,62 +12,27 @@
           >确定</text
         > -->
       </view>
-      <date-picker
-        v-if="mode == 'date'"
-        class="w-picker-wrapper"
-        :startYear="startYear"
-        :endYear="endYear"
-        :value="value"
-        :fields="fields"
-        :item-height="itemHeight"
-        :current="current"
-        :disabled-after="disabledAfter"
-        @change="handlerChange"
-        @touchstart="touchStart"
-        @touchend="touchEnd"
-      >
+      <date-picker v-if="mode == 'date'" class="w-picker-wrapper" :startYear="startYear" :endYear="endYear" :value="value"
+        :fields="fields" :item-height="itemHeight" :current="current" :disabled-after="disabledAfter"
+        :disabledBefore="disabledBefore"
+        @change="handlerChange" @touchstart="touchStart" @touchend="touchEnd">
       </date-picker>
 
-      <range-picker
-        v-if="mode == 'range'"
-        class="w-picker-wrapper"
-        :startYear="startYear"
-        :endYear="endYear"
-        :value="value"
-        :item-height="itemHeight"
-        :current="current"
-        @change="handlerChange"
-        @touchstart="touchStart"
-        @touchend="touchEnd"
-      >
+      <range-picker v-if="mode == 'range'" class="w-picker-wrapper" :startYear="startYear" :endYear="endYear"
+        :value="value" :item-height="itemHeight" :current="current" @change="handlerChange" @touchstart="touchStart"
+        @touchend="touchEnd">
       </range-picker>
 
-      <half-picker
-        v-if="mode == 'half'"
-        class="w-picker-wrapper"
-        :startYear="startYear"
-        :endYear="endYear"
-        :value="value"
-        :item-height="itemHeight"
-        :current="current"
-        :disabled-after="disabledAfter"
-        @change="handlerChange"
-        @touchstart="touchStart"
-        @touchend="touchEnd"
-      >
+      <half-picker v-if="mode == 'half'" class="w-picker-wrapper" :startYear="startYear" :endYear="endYear" :value="value"
+        :item-height="itemHeight" :current="current" :disabled-after="disabledAfter" @change="handlerChange"
+        @touchstart="touchStart" @touchend="touchEnd">
       </half-picker>
       <view style="margin-bottom: 10px">
-        <u-button
-          width=""
-          text="确定"
-          shape="circle"
-          :style="{
-            color: '#fff',
-            width: '500upx',
-            backgroundColor: '#1936C9',
-          }"
-          @click="pickerConfirm"
-        ></u-button>
+        <u-button width="" text="确定" shape="circle" :style="{
+          color: '#fff',
+          width: '500upx',
+          backgroundColor: '#1936C9',
+        }" @click="pickerConfirm"></u-button>
       </view>
     </view>
   </view>
@@ -184,9 +139,21 @@ export default {
       default: false,
     },
     //不是插件自带为了组件复用故意传参数
-    timeType:{
+    timeType: {
       type: String,
-      default: "half",
+      default: "",
+    },
+    // disabledMonth: {
+    //   type: Number,
+    //   default: 0,
+    // },
+    // disabledRange: {
+    //   type: Array,
+    //   default: ''
+    // },
+    disabledBefore: {
+      type: Boolean,
+      default: false,
     }
   },
   created() {
@@ -214,7 +181,7 @@ export default {
     },
     handlerChange(res) {
       let _this = this;
-      this.result = {...res };
+      this.result = { ...res };
     },
     show() {
       this.$emit("update:visible", true);
@@ -230,7 +197,7 @@ export default {
       if (!this.confirmFlag) {
         return;
       }
-      this.$emit("confirm", {timeType:this.timeType,...this.result});
+      this.$emit("confirm", { timeType: this.timeType, ...this.result });
       this.$emit("update:visible", false);
     },
   },
@@ -247,8 +214,10 @@ export default {
   white-space: nowrap;
   font-size: 30upx;
 }
+
 .w-picker {
   z-index: 888;
+
   .mask {
     position: fixed;
     z-index: 1000;
@@ -261,10 +230,12 @@ export default {
     opacity: 0;
     transition: all 0.3s ease;
   }
+
   .mask.visible {
     visibility: visible;
     opacity: 1;
   }
+
   .w-picker-cnt {
     position: fixed;
     bottom: 0;
@@ -275,9 +246,11 @@ export default {
     z-index: 3000;
     background-color: #fff;
   }
+
   .w-picker-cnt.visible {
     transform: translateY(0);
   }
+
   .w-picker-header {
     display: flex;
     align-items: center;
@@ -290,6 +263,7 @@ export default {
     justify-content: space-between;
     border-bottom: solid 1px #eee;
     border-radius: 10upx 0;
+
     .w-picker-btn {
       font-size: 30upx;
     }

pages/ticket/reserve.vue

@@ -118,6 +118,18 @@
                          width="64rpx"
                          height="34rpx"
                          @click="dateShow = true"></u-image>
+
+                <!-- <w-picker :visible.sync="dateShow"
+                          :mode="'date'"
+                          :current="true"
+                          @confirm="(e) => handleDateSelectConfirm(e, 'time')"
+                          @cancel="handleDateSelectCancel"
+                          disabledBefore
+                          :disabled-after="false"
+                          :ref="'date'"
+                          :second="false"
+                          fields="minute"></w-picker> -->
+
                 <u-datetime-picker :show="dateShow"
                                    mode="datetime"
                                    :minDate="Date.now()"
@@ -130,7 +142,7 @@
       </view>
 
       <view class="row justify-center"
-            style="margin-top:182rpx">
+            style="margin-top:182rpx;margin-bottom:60rpx">
         <u-button text="预约"
                   style="
             background-color: #40BE94;
@@ -221,6 +233,7 @@ export default {
       this.typeShow = false;
     },
     handleDateSelectConfirm (e, field) {
+      // this.formData[field] = e.result;
       this.formData[field] = getTheDate(e.value);
       this.dateShow = false;
     },

unpackage/dist/index.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>uni-admission-fee</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.97465e7b.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.dbfdf2e8.js></script><script src=/static/js/index.4d896bd5.js></script></body></html>

unpackage/dist/static/js/pages-start.98cee474.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["pages-start"],{"13a4":function(n,r,t){"use strict";t.r(r);var e=t("895f"),a=t("e309");for(var u in a)["default"].indexOf(u)<0&&function(n){t.d(r,n,(function(){return a[n]}))}(u);t("9f3f");var o,i=t("f0c5"),c=Object(i["a"])(a["default"],e["b"],e["c"],!1,null,"148a4902",null,!1,e["a"],o);r["default"]=c.exports},"1f9e":function(n,r,t){n.exports=t.p+"static/img/bg-start.302a4216.png"},3254:function(n,r,t){var e=t("24fb"),a=t("1de5"),u=t("1f9e");r=e(!1);var o=a(u);r.push([n.i,'@charset "UTF-8";\r\n/**\r\n * 这里是uni-app内置的常用样式变量\r\n *\r\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\r\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\r\n *\r\n */\r\n/**\r\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\r\n *\r\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\r\n */\r\n/* 颜色变量 */\r\n/* 行为相关颜色 */\r\n/* 文字基本颜色 */\r\n/* 背景颜色 */\r\n/* 边框颜色 */\r\n/* 尺寸变量 */\r\n/* 文字尺寸 */\r\n/* 图片尺寸 */\r\n/* Border Radius */\r\n/* 水平间距 */\r\n/* 垂直间距 */\r\n/* 透明度 */\r\n/* 文章场景相关 */uni-page-body[data-v-148a4902]{background:url('+o+") no-repeat;background-size:100% 100%;background-attachment:fixed;height:100vh;box-sizing:border-box}body.?%PAGE?%[data-v-148a4902]{background:url("+o+") no-repeat;background-size:100% 100%;background-attachment:fixed}",""]),n.exports=r},"4f45":function(n,r,t){"use strict";t("7a82"),Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var e={components:{},data:function(){return{}},onLoad:function(){setTimeout((function(){uni.reLaunch({url:"/pages/ticket/index"})}),1e3)},onShow:function(){},methods:{}};r.default=e},"895f":function(n,r,t){"use strict";var e;t.d(r,"b",(function(){return a})),t.d(r,"c",(function(){return u})),t.d(r,"a",(function(){return e}));var a=function(){var n=this,r=n.$createElement,t=n._self._c||r;return t("v-uni-view")},u=[]},"9f3f":function(n,r,t){"use strict";var e=t("f554"),a=t.n(e);a.a},e309:function(n,r,t){"use strict";t.r(r);var e=t("4f45"),a=t.n(e);for(var u in e)["default"].indexOf(u)<0&&function(n){t.d(r,n,(function(){return e[n]}))}(u);r["default"]=a.a},f554:function(n,r,t){var e=t("3254");e.__esModule&&(e=e.default),"string"===typeof e&&(e=[[n.i,e,""]]),e.locals&&(n.exports=e.locals);var a=t("4f06").default;a("12b14150",e,!0,{sourceMap:!1,shadowMode:!1})}}]);

unpackage/dist/static/pageData.json

@@ -0,0 +1,156 @@
+{
+  "ticketData": [
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "3"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "3"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    },
+    {
+      "name": "门票系统的某个场馆",
+      "typeNum": "0"
+    }
+  ],
+  "elector": [
+    {
+      "url": "../../static/elector-1.png",
+      "name": "首都博物馆门票",
+      "canReserve": "1023",
+      "total": "20000"
+    },
+    {
+      "url": "../../static/elector-1.png",
+      "name": "首都博物馆节假日门票",
+      "canReserve": "11123",
+      "total": "20000"
+    },
+    {
+      "url": "../../static/elector-1.png",
+      "name": "首都博物馆工作日门票",
+      "canReserve": "0",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    },
+    {
+      "url": "../../static/elector-2.png",
+      "name": "首都博物馆元旦门票",
+      "canReserve": "23",
+      "total": "2000"
+    }
+  ]
+}