我的页面新增样式结构

hookehuyr
Commit e2ad0f648588b0f76cf6ad20b3bf663ca5014a3b e2ad0f64 1 parent 96e47fdb
Showing 10 changed files with 190 additions and 95 deletions
components.d.ts
config/index.js
package.json
src/app.js
src/pages/book/index.less
src/pages/book/index.vue
src/pages/confirm/index.vue
src/pages/my/index.less
src/pages/my/index.vue
yarn.lock
--- a/components.d.ts
View file @e2ad0f6
+++ b/components.d.ts
View file @e2ad0f6
@@ -12,11 +12,10 @@ declare module '@vue/runtime-core' {
     CalendarSelect: typeof import('./src/components/calendarSelect.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
     NavBar: typeof import('./src/components/navBar.vue')['default']
+    NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
     NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
     NutCol: typeof import('@nutui/nutui-taro')['Col']
     NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
-    NutForm: typeof import('@nutui/nutui-taro')['Form']
-    NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
     NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
@@ -25,8 +24,6 @@ declare module '@vue/runtime-core' {
     NutRow: typeof import('@nutui/nutui-taro')['Row']
     NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
     NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
-    NutTabbar: typeof import('@nutui/nutui-taro')['Tabbar']
-    NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem']
     NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
     NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
     NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
--- a/config/index.js
View file @e2ad0f6
+++ b/config/index.js
View file @e2ad0f6
@@ -48,6 +48,9 @@ const config = {
     data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
   },
   mini: {
+    miniCssExtractPluginOption: {
+      ignoreOrder: true,
+    },
     webpackChain(chain) {
       chain.plugin('unplugin-vue-components').use(Components({
         resolvers: [NutUIResolver({taro: true})]
--- a/package.json
View file @e2ad0f6
+++ b/package.json
View file @e2ad0f6
 {
-  "name": "meihuaApp",
+	"name": "meihuaApp",
-  "version": "1.0.0",
+	"version": "1.0.0",
-  "private": true,
+	"private": true,
-  "description": "梅花岛小程序",
+	"description": "梅花岛小程序",
-  "templateInfo": {
+	"templateInfo": {
-    "name": "vue3-NutUI4",
+		"name": "vue3-NutUI4",
-    "typescript": false,
+		"typescript": false,
-    "css": "less"
+		"css": "less"
-  },
+	},
-  "scripts": {
+	"scripts": {
-    "build:weapp": "taro build --type weapp",
+		"build:weapp": "taro build --type weapp",
-    "build:swan": "taro build --type swan",
+		"build:swan": "taro build --type swan",
-    "build:alipay": "taro build --type alipay",
+		"build:alipay": "taro build --type alipay",
-    "build:tt": "taro build --type tt",
+		"build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
+		"build:h5": "taro build --type h5",
-    "build:rn": "taro build --type rn",
+		"build:rn": "taro build --type rn",
-    "build:qq": "taro build --type qq",
+		"build:qq": "taro build --type qq",
-    "build:jd": "taro build --type jd",
+		"build:jd": "taro build --type jd",
-    "build:quickapp": "taro build --type quickapp",
+		"build:quickapp": "taro build --type quickapp",
-    "dev:weapp": "npm run build:weapp -- --watch",
+		"dev:weapp": "npm run build:weapp -- --watch",
-    "dev:swan": "npm run build:swan -- --watch",
+		"dev:swan": "npm run build:swan -- --watch",
-    "dev:alipay": "npm run build:alipay -- --watch",
+		"dev:alipay": "npm run build:alipay -- --watch",
-    "dev:tt": "npm run build:tt -- --watch",
+		"dev:tt": "npm run build:tt -- --watch",
-    "dev:h5": "npm run build:h5 -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch",
-    "dev:rn": "npm run build:rn -- --watch",
+		"dev:rn": "npm run build:rn -- --watch",
-    "dev:qq": "npm run build:qq -- --watch",
+		"dev:qq": "npm run build:qq -- --watch",
-    "dev:jd": "npm run build:jd -- --watch",
+		"dev:jd": "npm run build:jd -- --watch",
-    "dev:quickapp": "npm run build:quickapp -- --watch"
+		"dev:quickapp": "npm run build:quickapp -- --watch"
-  },
+	},
-  "browserslist": [
+	"browserslist": [
-    "last 3 versions",
+		"last 3 versions",
-    "Android >= 4.1",
+		"Android >= 4.1",
-    "ios >= 8"
+		"ios >= 8"
-  ],
+	],
-  "author": "",
+	"author": "",
-  "dependencies": {
+	"dependencies": {
-    "@babel/runtime": "^7.7.7",
+		"@babel/runtime": "^7.7.7",
-    "@nutui/icons-vue-taro": "^0.0.9",
+		"@nutui/icons-vue-taro": "^0.0.9",
-    "@nutui/nutui-taro": "^4.0.4",
+		"@nutui/nutui-taro": "^4.0.4",
-    "@tarojs/components": "3.6.5",
+		"@tarojs/components": "3.6.20",
-    "@tarojs/extend": "^3.6.20",
+		"@tarojs/extend": "3.6.20",
-    "@tarojs/helper": "3.6.5",
+		"@tarojs/helper": "3.6.20",
-    "@tarojs/plugin-framework-react": "^3.6.20",
+		"@tarojs/plugin-framework-react": "3.6.20",
-    "@tarojs/plugin-framework-vue3": "3.6.5",
+		"@tarojs/plugin-framework-vue3": "3.6.20",
-    "@tarojs/plugin-html": "3.6.5",
+		"@tarojs/plugin-html": "3.6.20",
-    "@tarojs/plugin-platform-alipay": "3.6.5",
+		"@tarojs/plugin-platform-alipay": "3.6.20",
-    "@tarojs/plugin-platform-h5": "3.6.5",
+		"@tarojs/plugin-platform-h5": "3.6.20",
-    "@tarojs/plugin-platform-jd": "3.6.5",
+		"@tarojs/plugin-platform-jd": "3.6.20",
-    "@tarojs/plugin-platform-qq": "3.6.5",
+		"@tarojs/plugin-platform-qq": "3.6.20",
-    "@tarojs/plugin-platform-swan": "3.6.5",
+		"@tarojs/plugin-platform-swan": "3.6.20",
-    "@tarojs/plugin-platform-tt": "3.6.5",
+		"@tarojs/plugin-platform-tt": "3.6.20",
-    "@tarojs/plugin-platform-weapp": "3.6.5",
+		"@tarojs/plugin-platform-weapp": "3.6.20",
-    "@tarojs/runtime": "3.6.5",
+		"@tarojs/runtime": "3.6.20",
-    "@tarojs/shared": "3.6.5",
+		"@tarojs/shared": "3.6.20",
-    "@tarojs/taro": "3.6.5",
+		"@tarojs/taro": "3.6.20",
-    "axios-miniprogram": "^2.7.0",
+		"axios-miniprogram": "^2.7.0",
-    "pinia": "^2.1.7",
+		"pinia": "^2.1.7",
-    "qs": "^6.11.2",
+		"qs": "^6.11.2",
-    "taro-plugin-pinia": "^1.0.0",
+		"taro-plugin-pinia": "^1.0.0",
-    "vue": "^3.2.40"
+		"vue": "^3.2.40"
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "@babel/core": "^7.8.0",
+		"@babel/core": "^7.8.0",
-    "@tarojs/cli": "3.6.5",
+		"@tarojs/cli": "3.6.20",
-    "@tarojs/taro-loader": "3.6.5",
+		"@tarojs/taro-loader": "3.6.20",
-    "@tarojs/webpack5-runner": "3.6.5",
+		"@tarojs/webpack5-runner": "3.6.20",
-    "@types/node": "^18.15.11",
+		"@types/node": "^18.15.11",
-    "@types/webpack-env": "^1.13.6",
+		"@types/webpack-env": "^1.13.6",
-    "@vue/babel-plugin-jsx": "^1.0.6",
+		"@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "^3.2.40",
+		"@vue/compiler-sfc": "^3.2.40",
-    "babel-preset-taro": "3.6.5",
+		"babel-preset-taro": "3.6.20",
-    "css-loader": "3.4.2",
+		"css-loader": "3.4.2",
-    "eslint": "^8.12.0",
+		"eslint": "^8.12.0",
-    "eslint-config-taro": "3.6.5",
+		"eslint-config-taro": "3.6.20",
-    "eslint-plugin-vue": "^8.0.0",
+		"eslint-plugin-vue": "^8.0.0",
-    "style-loader": "1.3.0",
+		"style-loader": "1.3.0",
-    "stylelint": "9.3.0",
+		"stylelint": "9.3.0",
-    "ts-node": "^10.9.1",
+		"ts-node": "^10.9.1",
-    "typescript": "^4.1.0",
+		"typescript": "^4.1.0",
-    "unplugin-vue-components": "^0.23.0",
+		"unplugin-vue-components": "^0.23.0",
-    "vue-loader": "^17.0.0",
+		"vue-loader": "^17.0.0",
-    "webpack": "^5.78.0"
+		"webpack": "^5.78.0"
-  }
+	}
 }
--- a/src/app.js
View file @e2ad0f6
+++ b/src/app.js
View file @e2ad0f6
 /*
  * @Date: 2023-12-14 17:45:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-14 17:59:42
+ * @LastEditTime: 2023-12-16 15:03:36
  * @FilePath: /meihuaApp/src/app.js
  * @Description: 文件描述
  */
--- a/src/pages/book/index.less
View file @e2ad0f6
+++ b/src/pages/book/index.less
View file @e2ad0f6
@@ -24,3 +24,8 @@
 .nut-tab-pane {
   padding: 0;
 }
+
+:root,
+page {
+  --nut-tabs-titles-item-active-color: #6A4925;
+}
--- a/src/pages/book/index.vue
View file @e2ad0f6
+++ b/src/pages/book/index.vue
View file @e2ad0f6
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-15 13:32:01
+ * @LastEditTime: 2023-12-18 10:16:03
  * @FilePath: /meihuaApp/src/pages/book/index.vue
  * @Description: 文件描述
 -->
--- a/src/pages/confirm/index.vue
View file @e2ad0f6
+++ b/src/pages/confirm/index.vue
View file @e2ad0f6
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-15 17:10:25
+ * @LastEditTime: 2023-12-16 08:29:08
  * @FilePath: /meihuaApp/src/pages/confirm/index.vue
  * @Description: 文件描述
 -->
--- a/src/pages/my/index.less
View file @e2ad0f6
+++ b/src/pages/my/index.less
View file @e2ad0f6
-.red {
+.nut-tab-pane {
-  color: red;
+  padding: 0;
+}
+
+:root,
+page {
+  --nut-tabs-titles-item-active-color: #6A4925;
 }
--- a/src/pages/my/index.vue
View file @e2ad0f6
+++ b/src/pages/my/index.vue
View file @e2ad0f6
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-15 13:26:42
+ * @LastEditTime: 2023-12-18 10:26:00
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div>
+  <view>
+    <view id="avator" style="position: relative; display: flex; align-items: center; background-color: #3A2013; color: #FFF; padding: 40rpx 0 40rpx 25rpx;">
+      <view style="flex: 6; display: flex; align-items: center;">
+        <nut-avatar size="60" style="border: 1px solid #fff;">
+          <img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
+        </nut-avatar>
+        <text style="margin-left: 30rpx;">阿忆妞妞</text>
+      </view>
+      <view style="flex: 1;">
+        <IconFont name="edit"></IconFont>
+      </view>
+      <view style="position: absolute; left: 0%; right: 0%; bottom: 0%; height: 20rpx; width: 100%; background-color: #FFF; border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></view>
+    </view>
+    <view>
+      <view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view>
+      <view>
+        <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
+          <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
+            <view class="book-list">
+              <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
+                <view v-for="(item, index) in 10" :key="index">
+                  <room-card :key="index"></room-card>
+                  <view v-if="index === 9" style="height: 2rem;"></view>
+                </view>
+              </scroll-view>
+            </view>
+          </nut-tab-pane>
+        </nut-tabs>
+      </view>
+    </view>
     <nav-bar activated="my" />
-  </div>
+  </view>
 </template>
 <script setup>
 import Taro from '@tarojs/taro'
 import { ref } from "vue";
+import { IconFont } from '@nutui/icons-vue-taro';
 import navBar from '@/components/navBar.vue'
+import roomCard from '@/components/roomCard.vue'
+
+const value = ref('0');
+const tabList = ref([{
+  title: '全部订单',
+  key: '0',
+}, {
+  title: '待入住',
+  key: '1',
+}, {
+  title: '待支付',
+  key: '2',
+}, {
+  title: '已取消',
+  key: '3',
+}])
 </script>
 <script>
 import "./index.less";
+import { $ } from '@tarojs/extend'
 export default {
   name: "myPage",
+  computed: {
+    scrollStyle() {
+      return {
+        height: this.indexCoverHeight + 'px',
+        // paddingBottom: 50 + 'px',
+      };
+    },
+  },
+  mounted () {
+    // 设置首页封面高度
+    const windowHeight = wx.getSystemInfoSync().windowHeight;
+    // 处理切换显示白屏问题
+    setTimeout(() => {
+      this.showContent = true;
+    }, 100);
+    setTimeout(async () => {
+      const navHeight = await $('#navbar-page').height();
+      const avatorHeight = await $('#avator').height();
+      const titleHeight = await $('#title').height();
+      this.indexCoverHeight = windowHeight - navHeight - avatorHeight - titleHeight - 50;
+    }, 500);
+  },
+  data() {
+    return {
+      showContent: false,
+      indexCoverHeight: 0,
+    };
+  },
+  methods: {
+    onScrollToLower () {
+      // if(!this.flag){
+      //   return
+      // }
+      // this.flag = false;
+      // this.getList();
+      console.warn('onScrollToLower');
+    },
+  }
 };
 </script>
--- a/yarn.lock
View file @e2ad0f6
+++ b/yarn.lock
View file @e2ad0f6