submit

src/App.vue

@@ -1,6 +1,21 @@
 <template>
 </template>
-<script  lang="ts" setup></script>
+<script   setup>
+import {onLaunch} from "@dcloudio/uni-app";
+
+onLaunch(()=>{
+  console.log('onLaunch')
+/*  if (uni.getStorageSync('token')){
+    uni.navigateTo({
+      url: '/pages/index/index'
+    })
+  }else {
+    uni.navigateTo({
+      url: '/pages/login/index'
+    })
+  }*/
+})
+</script>
 <style>
 	/* #ifdef APP-PLUS-NVUE */
 	@import './tmui/scss/nvue.css';
@@ -8,10 +23,7 @@
 	/* #ifndef APP-PLUS-NVUE */
 	@import './tmui/scss/noNvue.css';
 	/* #endif */
-
+  page{
-page{
+    display: flex;
-  display: flex;
+  }
-
-}
-
 </style>

src/components/custom-title/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="content2" :style="{height: `${menuButtonTop}px`}">
+    <div class="wrap1" :style="{marginTop: `${titleTop}px`,height:`${titleHeight}px`}">{{title}}</div>
+  </div>
+</template>
+<script setup >
+import { ref } from 'vue'
+const menuButtonTop=ref(0)
+const rpxToPx=(rpx)=>{
+  const systemInfo = uni.getSystemInfoSync();
+  const screenWidth = systemInfo.windowWidth;
+  return rpx * screenWidth / 750;
+}
+const titleTop=ref(0)
+const titleHeight=ref(0)
+const   getMenuButtonBoundingClientRect=()=> {
+  // #ifdef MP-WEIXIN
+  const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+  if (menuButtonInfo) {
+    titleTop.value=menuButtonInfo.top
+    titleHeight.value=menuButtonInfo.height
+    menuButtonTop.value = menuButtonInfo.top + menuButtonInfo.height+rpxToPx(12);
+  }
+}
+getMenuButtonBoundingClientRect()
+defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    isBack: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const back = () => {
+    uni.navigateBack({
+        delta: 2
+    });
+}
+</script>
+<style scoped lang="scss">
+.content2{
+  top: 0;
+  position: relative;
+  overflow: hidden;
+  width:100vw;
+  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/6f9f30f6-9383-4ae6-872c-4e6795eaa25f.png");
+  .wrap1{
+    font-size: 34rpx;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/components/self-tabbar/index.vue

@@ -23,7 +23,7 @@
 <script  setup>
 import {ref, defineEmits, watch,} from 'vue'
 const emit=defineEmits(['update:modelValue'])
-const acc = ref(1)
+const acc = ref(0)
 watch(acc,()=>{
   emit('update:modelValue',acc.value)
 })

src/components/title/index.vue

@@ -1,60 +0,0 @@
-<template>
-    <div class="content1" :style="{ marginTop: `${statusBarHeight}px` }">
-        <div class="wrap1" v-if="isBack">
-            <tm-icon name="tmicon-angle-left" color="#FFFFFF" @click="back"></tm-icon>
-        </div>
-        <div class="wrap2">{{ title }}</div>
-    </div>
-</template>
-<script setup >
-import { ref } from 'vue'
-const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight + 5)
-defineProps({
-    title: {
-        type: String,
-        default: ''
-    },
-    isBack: {
-        type: Boolean,
-        default: true
-    }
-})
-const back = () => {
-    uni.navigateBack({
-        delta: 2
-    });
-}
-</script>
-
-<style scoped lang="scss">
-.content1 {
-    height: 60rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .wrap1 {
-        flex-basis: 0;
-        width: 34rpx;
-        height: 34rpx;
-        display: flex;
-    }
-
-    .wrap3 {
-        flex-grow: 1;
-        flex-basis: 0;
-    }
-
-    .wrap2 {
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-grow: 1;
-        flex-basis: 0;
-        color: #FFFFFF;
-        font-size: 32rpx;
-    }
-
-}
-</style>

src/http/apis.js

@@ -0,0 +1,18 @@
+import uniReq from '@/http/init'
+export const login=(data)=> {
+  return uniReq.post({
+      url: '/api/user/login/wx/telnum',
+      data
+  })
+}
+export const getInfo=()=> {
+    return uniReq.post({
+        url: '/api/user/info'
+    })
+}
+export const ticketlist=(data)=> {
+    return uniReq.post({
+        url: '/ticket/ticketList',
+        data
+    })
+}

src/http/deposit.js

@@ -1,12 +0,0 @@
-import http from "./interface";
-
-// 地点
-export const address = () => {
-  return http.request({
-    url: "/api/warehouse/address",
-    method: "POST",
-  });
-};
-export default {
-  address,
-};

src/http/index.js

@@ -1,6 +0,0 @@
-import deposit from "./deposit";
-import login from "./login";
-export default {
-  deposit,
-  login,
-};

src/http/init.js

@@ -0,0 +1,25 @@
+import {uniRequest} from "@/http/main";
+
+export default uniRequest.created({
+    //baseUrl: 'http://172.16.100.93:9052',
+     baseUrl: 'http://192.168.88.122:9021',
+    header: {
+        Authorization: uni.getStorageSync('token') ?? ''
+    },
+    interceptor: {
+        request(config){
+            uni.showLoading({
+                title: '加载中...',
+                mask: true
+            })
+            setTimeout(()=>{
+                uni.hideLoading()
+            },5000)
+            return config
+        },
+        response(response) {
+            uni.hideLoading()
+            return response.data
+        }
+    }
+})

src/http/init.ts

@@ -1,20 +0,0 @@
-import {uniFetch} from "@/http/main";
-const fetch = new uniFetch({
-    baseUrl: 'https://warehouse.szjixun.cn',
-    requestInterceptor:(config)=>{
-        return config
-    },
-    responseInterceptor:(response)=>{
-        if (response.data?.status === 401) {
-            let curPage = getCurrentPages();
-            let route = curPage[curPage.length - 1].route; //获取当前页面的路由
-            if (route !== "pages/login/index") {
-                uni.navigateTo({
-                    url: "/pages/login/index",
-                });
-            }
-        }
-        return response
-    }
-})
-export default fetch

src/http/login.js

@@ -1,57 +0,0 @@
-
-import fetch from "@/http/init";
-// openId
-export const login = (data) => {
-  return fetch.request({
-    url: "/api/wxuser/openid",
-    method: "POST",
-    data,
-  });
-};
-// 获取手机号
-export const getTel = (data) => {
-  return fetch.request({
-    url: "/api/wxuser/get/telnum",
-    method: "POST",
-    data,
-  });
-};
-// 注册
-export const register = (data) => {
-  return fetch.request({
-    url: "/api/wxuser/register",
-    method: "POST",
-    data,
-  });
-};
-// 身份验证
-export const chenckId = (data) => {
-  return fetch.request({
-    url: "/api/wxuser/ocr",
-    method: "POST",
-    data,
-  });
-};
-// 法大大
-export const fddRealName = (data) => {
-  return fetch.request({
-    url: "/api/wxuser/bind/fdd",
-    method: "POST",
-    data,
-  });
-};
-//法大大是否验证
-export const checkFdd = () => {
-  return fetch.request({
-    url: "/api/wxuser/fdd/check",
-    method: "POST",
-  });
-};
-export default {
-  login,
-  getTel,
-  register,
-  chenckId,
-  fddRealName,
-  checkFdd,
-};

src/http/main.ts

@@ -16,7 +16,7 @@ type HttpMethod =
 
 interface RequestOptions {
     baseUrl?: string;
-    url: string;
+    url?: string;
     data?: Record<string, any>;
     method?: HttpMethod;
     header?: Record<string, string>;
@@ -37,30 +37,26 @@ interface RequestOptions {
     enableCookie?: boolean,
     cloudCache?: object | boolean,
     defer?: boolean,
-    requestInterceptor?: RequestInterceptor,
+    interceptor?:{
-    responseInterceptor?: ResponseInterceptor
+        request?: RequestInterceptor,
+        response?: ResponseInterceptor
+    }
 }
-
-type instantiationParameters = Omit<Omit<RequestOptions, 'baseUrl'>, 'url'> & {
-    baseUrl: string;
-};
 type RequestInterceptor = (config: RequestOptions) => RequestOptions;
 type ResponseInterceptor = (response: any) => any;
 
-class uniFetch {
+class uniRequest {
-    baseUrl: string;
+    baseUrl?: string;
     defaultHeader: Record<string, string>;
-    interceptors: { request: RequestInterceptor | undefined; response: ResponseInterceptor | undefined };
+    interceptors: { request?: RequestInterceptor; response?: ResponseInterceptor };
-
+    constructor(request: RequestOptions) {
-    constructor(request: instantiationParameters) {
         this.baseUrl = request.baseUrl;
         this.defaultHeader = {
             "Content-Type": "application/json;charset=UTF-8",
             ...request.header,
         };
-        this.interceptors = {request: request.requestInterceptor, response: request.responseInterceptor};
+        this.interceptors = {request: request.interceptor?.request, response: request.interceptor?.response};
     }
-
     setBaseUrl(baseUrl: string): void {
         this.baseUrl = baseUrl;
     }
@@ -68,18 +64,20 @@ class uniFetch {
     setDefaultHeader(header: Record<string, string>): void {
         this.defaultHeader = header;
     }
-
+   static created(options: RequestOptions){
+        return new uniRequest(options);
+    }
     request(options: RequestOptions): Promise<any> {
         options = this.buildRequestOptions(options)
         options = options || {};
         options.baseUrl = options.baseUrl || this.baseUrl;
-        options.url = options.baseUrl + options.url;
+        options.url = `${options.baseUrl}${options.url}`;
         options.data = options.data || {};
         options.method = (options.method?.toUpperCase() || "GET") as HttpMethod;
         options.header = options.header || this.defaultHeader;
-        if (typeof options.requestInterceptor === 'function') {
+        if (typeof options.interceptor?.request === 'function') {
-            options = options.requestInterceptor(options);
+            options = options.interceptor.request(options);
-        } else if (typeof this.interceptors.request === 'function') {
+        } else if (typeof this.interceptors?.request === 'function') {
             options = this.interceptors.request(options);
         }
         return new Promise((resolve, reject) => {
@@ -87,7 +85,7 @@ class uniFetch {
             uni.request({
                 ...options,
                 success: (res) => {
-                    const response = this.handleResponse(res);
+                    const response = this.handleResponse(res,options);
                     resolve(response);
                 },
                 fail: (err) => {
@@ -98,16 +96,13 @@ class uniFetch {
         });
     }
 
-    private handleResponse(response: any): any {
+    private handleResponse(response: any,options:RequestOptions): any {
-        if (this.interceptors.response) {
+        if (options.interceptor?.response){
-            response = this.interceptors.response(response);
+            response = options.interceptor?.response(response);
-        }
+        }else if (this.interceptors?.response) {
-        const statusCode = response.statusCode;
+            response = this.interceptors?.response(response);
-        if (statusCode === 200) {
-            return response.data;
-        } else {
-            throw response;
         }
+      return response
     }
 
     private handleError(error: any): any {
@@ -158,4 +153,4 @@ class uniFetch {
     }
 }
 
-export {uniFetch}
+export {uniRequest}

src/main.ts

@@ -2,13 +2,12 @@ import { createSSRApp } from "vue";
 import * as Pinia from "pinia";
 import tmui from "./tmui";
 import App from "./App.vue";
-// @ts-ignore
+
-import api from "@/http";
+import customTitle from "./components/custom-title/index.vue";
-import title from "./components/Title/index.vue";
 export function createApp() {
   const app = createSSRApp(App);
-  app.config.globalProperties.$api = api;
+
-  app.component("title", title);
+  app.component("customTitle", customTitle);
   app.use(tmui, { shareDisable: false } as Tmui.tmuiConfig);
   return {
     app,

src/manifest.json

@@ -97,7 +97,7 @@
     },
     "quickapp": {},
     "mp-weixin": {
-        "appid": "",
+        "appid": "wx7da502ffb626aa8a",
         "darkmode": false,
         "setting": {
             "urlCheck": false,
@@ -193,4 +193,4 @@
             "enable": false
         }
     }
-}
+}

src/pages.json

@@ -28,7 +28,6 @@
 			}
 		}
 	},
-
     {
       "path": "pages/ticket/index",
       "style": {
@@ -43,6 +42,7 @@
     {
       "path": "pages/login/index",
       "style": {
+        "navigationStyle": "custom",
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false,
         "app-plus": {

src/pages/home/index.vue

@@ -1,93 +1,22 @@
 <template>
+  <custom-title class="title-block" title="首都博物馆东馆" :isBack="false">
+  </custom-title>
   <div class="main">
-    <title class="title-block" title="首都博物馆东馆" :isBack="false">
+    <div class="content1">
-    </title>
+      <div class="wrap1">门票名称</div>
-
+      <div class="wrap2">剩余数量</div>
-    <div class="header">
-      <div>门票名称</div>
-      <div>剩余数量</div>
     </div>
-    <div class="container">
+    <div class="content2">
-      <div class="item">
+      <div class="wrap1" v-for="(item,index) in [...tableData,...tableData]" :key="item.id">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
+        <div class="wrap1_1">
-        <div class="detail">
+          <image :src="'../../static/112121@3x.png'"></image>
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
         </div>
+        <div class="wrap1_2">首都博物馆门票</div>
+        <div class="wrap1_3">1023/20000</div>
+        <div class="wrap1_4">预约</div>
       </div>
-
+      <div class="wrap2">
-      <div class="item">
+        <image src="../../static/zu758@3x.png"></image>
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
-      </div>
-      <div class="item">
-        <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
-        <div class="detail">
-          <div style="width: 140rpx;">首都博物馆门票</div>
-          <div>1023/20000</div>
-          <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
-        </div>
       </div>
     </div>
     <div class="attention" v-if="isShow">
@@ -99,17 +28,33 @@
   </div>
 </template>
 <script setup>
-import { onMounted, ref } from "vue";
+import {  ref } from "vue";
+import {ticketlist} from "@/http/apis";
 let height = ref('')
 let isShow = ref(true)
-
+const tableData=ref([])
+const page=ref(1)
+const pageSize=ref(9999)
+const getData=async ()=>{
+  const data={
+    "keyword": "",
+    "isMobile": 1,
+    "page": page.value,
+    "pageSize": pageSize.value
+  }
+  const res=await ticketlist(data)
+  if (res.code===0){
+    tableData.value=res.data.data
+  }
+}
+getData()
 const handleTips = () => {
   isShow.value = false
 }
 </script>
 <style scoped lang="scss">
 .main {
-  height: 100vh;
+  height: 80vh;
   width: 100%;
   background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
   background-size: 100%;
@@ -117,20 +62,93 @@ const handleTips = () => {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  .content2{
+    height: 2000rpx;
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 22rpx;
+    .wrap2{
+      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;
+      }
+      .wrap1_3{
+        color: #F7963B;
+        font-size: 24rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 224rpx;
 
-
+      }
-
+      .wrap1_2{
-  .header {
+        width: 140rpx;
+        height: 76rpx;
+      }
+    }
+  }
+  .content1 {
+    box-sizing: border-box;
     margin-top: 20rpx;
     width: 100%;
     background: #AB2F23;
     height: 70rpx;
     border-radius: 20rpx;
     display: flex;
-    justify-content: space-around;
     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 {
@@ -144,6 +162,7 @@ const handleTips = () => {
     margin-bottom: 20rpx;
 
     .item {
+      overflow: hidden;
       display: flex;
       align-items: center;
       background: #FFFFFF;
@@ -159,7 +178,6 @@ const handleTips = () => {
       }
     }
   }
-
   .attention {
     width: 664rpx;
     display: flex;

src/pages/index/index.vue

@@ -1,6 +1,5 @@
 <template>
  <div>
-<!--   <div :style="{height:`${ztHehight}px`}"></div>-->
    <home v-if="acc===0"/>
    <mine v-if="acc===1"/>
    <self-tabbar v-model="acc"></self-tabbar>
@@ -11,6 +10,12 @@ import home from '../home/index.vue'
 import mine from '../mine/index.vue'
 import selfTabbar from '../../components/self-tabbar/index.vue'
 import {ref} from "vue";
-const acc=ref(1)
+import {onLoad} from "@dcloudio/uni-app";
-const ztHehight=uni.getSystemInfoSync().statusBarHeight
+onLoad((option)=>{
+  if (typeof option.acc==='string'){
+    acc.value=Number(option.acc)
+  }
+})
+const acc=ref(0)
+
 </script>

src/pages/login/index.vue

@@ -9,13 +9,26 @@
 
 <script setup >
 import { ref, getCurrentInstance } from "vue";
-const currentInstance = getCurrentInstance();
+import {login,getInfo} from "@/http/apis";
-const { $api } = currentInstance.appContext.config.globalProperties;
 let isShow = ref(true);
-const getPhoneNumber = () => {
+const getPhoneNumber =async (data) => {
-    console.log(123)
+const res=await login({
+code:data.detail.code
+  })
+  if (res.code===200){
+    uni.setStorageSync('token',res.data.token);
+    getUserInfo()
+  }
+}
+const getUserInfo = async () => {
+const res=await getInfo()
+  if (res.code===200){
+    uni.setStorageSync('userInfo',res.data);
+    uni.navigateTo({
+      url: '/pages/index/index?acc=0'
+    })
+  }
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -40,4 +53,4 @@ const getPhoneNumber = () => {
         animation: jump 1s ease-in-out infinite alternate;
     }
 }
-</style>
+</style>

src/pages/mine/index.vue

@@ -1,7 +1,7 @@
 <template>
+  <custom-title class="title-block" title="智慧门票" :isBack="false">
+  </custom-title>
 <div class="large-container">
-  <title class="title-block" title="智慧门票" :isBack="false">
-  </title>
   <div class="content1">
     <div class="wrap1">
       <div class="wrap1_1">

vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import uni from "@dcloudio/vite-plugin-uni";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import { resolve } from "path"
+
 // import Components from 'unplugin-vue-components/vite'
 // https://vitejs.dev/config/
 export default defineConfig({