i

2023-08-13 14:45:19 +08:00
commit 433a4d8f3d
31 changed files with 15340 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/taroApp.iml" filepath="$PROJECT_DIR$/.idea/taroApp.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/taroApp.iml
+++ b/.idea/taroApp.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'vue3',
+      ts: true
+    }]
+  ]
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,25 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
+    NutButton: typeof import('@nutui/nutui-taro')['Button']
+    NutCategory: typeof import('@nutui/nutui-taro')['Category']
+    NutCategoryPane: typeof import('@nutui/nutui-taro')['CategoryPane']
+    NutCell: typeof import('@nutui/nutui-taro')['Cell']
+    NutIcon: typeof import('@nutui/nutui-taro')['Icon']
+    NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
+    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']
+    NutToast: typeof import('@nutui/nutui-taro')['Toast']
+  }
+}
--- a/config/dev.ts
+++ b/config/dev.ts
@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}
--- a/config/index.ts
+++ b/config/index.ts
@@ -0,0 +1,100 @@
+import Components from 'unplugin-vue-components/webpack';
+import NutUIResolver from '@nutui/nutui-taro/dist/resolver';
+
+const config = {
+  projectName: 'taroApp',
+  date: '2023-8-13',
+  designWidth (input: { file: string; }) {
+    if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
+      return 375
+    }
+    return 750
+  },
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2,
+    375: 2
+  },
+  sourceRoot: 'src',
+  outputRoot: 'dist',
+  plugins: ['@tarojs/plugin-html'],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'vue3',
+  compiler: {
+    type: 'webpack5',
+    prebundle: { enable: false }
+  }, 
+  cache: {
+    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+  },
+  sass:{
+    data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
+  },
+  mini: {
+    webpackChain(chain) {
+      chain.plugin('unplugin-vue-components').use(Components({
+        resolvers: [NutUIResolver({taro: true})]
+      }))
+    },
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+          // selectorBlackList: ['nut-']
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    webpackChain(chain) {
+      chain.plugin('unplugin-vue-components').use(Components({
+        resolvers: [NutUIResolver({taro: true})]
+      }))
+    },
+    publicPath: '/',
+    staticDirectory: 'static',
+    esnextModules: ['nutui-taro', 'icons-vue-taro'],
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}
--- a/config/prod.ts
+++ b/config/prod.ts
@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,81 @@
+{
+  "name": "taroApp",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "templateInfo": {
+    "name": "vue3-NutUI4",
+    "typescript": true,
+    "css": "sass"
+  },
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "build:qq": "taro build --type qq",
+    "build:jd": "taro build --type jd",
+    "build:quickapp": "taro build --type quickapp",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "dev:qq": "npm run build:qq -- --watch",
+    "dev:jd": "npm run build:jd -- --watch",
+    "dev:quickapp": "npm run build:quickapp -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/components": "3.6.11",
+    "@tarojs/helper": "3.6.11",
+    "@tarojs/plugin-platform-weapp": "3.6.11",
+    "@tarojs/plugin-platform-alipay": "3.6.11",
+    "@tarojs/plugin-platform-tt": "3.6.11",
+    "@tarojs/plugin-platform-swan": "3.6.11",
+    "@tarojs/plugin-platform-jd": "3.6.11",
+    "@tarojs/plugin-platform-qq": "3.6.11",
+    "@tarojs/plugin-platform-h5": "3.6.11",
+    "@tarojs/runtime": "3.6.11",
+    "@tarojs/shared": "3.6.11",
+    "@tarojs/taro": "3.6.11",
+    "@tarojs/plugin-html": "3.6.11",
+    "@tarojs/plugin-framework-vue3": "3.6.11",
+    "vue": "^3.2.40",
+    "@nutui/nutui-taro": "^4.0.4",
+    "@nutui/icons-vue-taro": "^0.0.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@types/webpack-env": "^1.13.6",
+    "webpack": "^5.78.0",
+    "@tarojs/taro-loader": "3.6.11",
+    "@tarojs/webpack5-runner": "3.6.11",
+    "@tarojs/cli": "3.6.11",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/compiler-sfc": "^3.2.40",
+    "babel-preset-taro": "3.6.11",
+    "css-loader": "3.4.2",
+    "eslint-plugin-vue": "^8.0.0",
+    "eslint-config-taro": "3.6.11",
+    "eslint": "^8.12.0",
+    "stylelint": "9.3.0",
+    "style-loader": "1.3.0",
+    "vue-loader": "^17.0.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "typescript": "^4.1.0",
+    "unplugin-vue-components": "^0.23.0",
+    "ts-node": "^10.9.1",
+    "@types/node": "^18.15.11"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/project.config.json
+++ b/project.config.json
@@ -0,0 +1,15 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "taroApp",
+  "description": "",
+  "appid": "wx3d814a9b985f6cab",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}
--- a/project.tt.json
+++ b/project.tt.json
@@ -0,0 +1,13 @@
+{
+  "miniprogramRoot": "./",
+  "projectname": "taroApp",
+  "description": "",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -0,0 +1,34 @@
+export default defineAppConfig({
+    pages: [
+        'pages/index/index',
+        'pages/category/index',
+        'pages/cart/index',
+        'pages/user/index'
+    ],
+    window: {
+        backgroundTextStyle: 'light',
+        navigationBarBackgroundColor: '#fff',
+        navigationBarTitleText: 'WeChat',
+        navigationBarTextStyle: 'black'
+    },
+    tabBar: {
+        color: "#666666",
+        selectedColor: "#ff0000",
+        backgroundColor: "#ffffff",
+        borderStyle: 'white',
+        list: [{
+            pagePath: 'pages/index/index',
+            text: '首页',
+        }, {
+            pagePath: 'pages/category/index',
+            text: '分类',
+        }, {
+            pagePath: 'pages/cart/index',
+            text: '购物车',
+
+        }, {
+            pagePath: 'pages/user/index',
+            text: '我的',
+        }]
+    }
+})
--- a/src/app.scss
+++ b/src/app.scss
--- a/src/app.ts
+++ b/src/app.ts
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import './app.scss'
+
+const App = createApp({
+  onShow (options) {},
+  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
+})
+
+export default App
--- a/src/components/Tabbar.vue
+++ b/src/components/Tabbar.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import {Cart, Category, Home, My} from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+import {computed} from "vue";
+
+const prop = defineProps({
+  value: {
+    type: String,
+    default: "1"
+  },
+})
+
+let tabIndex = computed({
+  get() {
+    return prop.value
+  },
+  set(val) {
+    console.log(val)
+    // prop.value = val
+  }
+})
+
+const tabSwitch = (e) => {
+  console.log(e)
+  Taro.switchTab({
+    url: e.href
+  })
+}
+</script>
+
+<template>
+  <view>
+    <nut-tabbar bottom placeholder safe-area-inset-bottom @tab-switch="tabSwitch" v-model="tabIndex">
+      <nut-tabbar-item tab-title="首页" :icon="Home" name="1" href="/pages/index/index"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" :icon="Category" name="2" href="/pages/category/index"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" :icon="Cart" name="3" href="/pages/cart/index"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" :icon="My" name="4" href="/pages/user/index"></nut-tabbar-item>
+    </nut-tabbar>
+  </view>
+</template>
+
+<style lang="scss">
+
+</style>
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>taroApp</title>
+  <script><%= htmlWebpackPlugin.options.script %></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
--- a/src/pages/cart/index.config.ts
+++ b/src/pages/cart/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})
--- a/src/pages/cart/index.vue
+++ b/src/pages/cart/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <view class="index">
+    <view>
+      <img src="" alt="">
+    </view>
+    {{ msg }} <Dongdong />
+    <view class="btn">
+      <nut-button type="primary" @click="handleClick('text', msg2, true)">点我</nut-button>
+    </view>
+    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover"/>
+  </view>
+</template>
+
+<script>
+import { reactive, toRefs } from 'vue';
+import { Dongdong } from '@nutui/icons-vue-taro';
+export default {
+  name: 'Index',
+  components: {
+    Dongdong
+  },
+  setup() {
+    const state = reactive({
+      msg: '欢迎使用 NutUI4.0 开发小程序',
+      msg2: '你成功了～',
+      type: 'text',
+      show: false,
+      cover: false
+    });
+
+    const handleClick = (type, msg, cover = false) => {
+      state.show = true;
+      state.msg2 = msg;
+      state.type = type;
+      state.cover = cover;
+    };
+
+    return {
+      ...toRefs(state),
+      handleClick
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.index {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+</style>
--- a/src/pages/category/index.config.ts
+++ b/src/pages/category/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '分类'
+})
--- a/src/pages/category/index.vue
+++ b/src/pages/category/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <view class="app">
+    <nut-tabs style="height:100vh" v-model="val" title-scroll name="tab4value"  direction="vertical">
+      <nut-tab-pane  v-for="item in 10"  :pane-key="item" :title="'Tab '+ item"> Tab {{item}} </nut-tab-pane>
+    </nut-tabs>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted} from 'vue';
+
+const val = ref('0')
+
+const category = ref([
+  {
+    catId: 1,
+    catName: '手机',
+  },
+  {
+    catId: 2,
+    catName: '电脑',
+  },
+  {
+    catId: 3,
+    catName: '家电',
+  },
+  {
+    catId: 4,
+    catName: '生活',
+  },
+  {
+    catId: 5,
+    catName: '服饰',
+  }
+])
+
+const categoryChild = ref([
+  {
+    catId: 1,
+    catName: '休闲零食',
+  },
+  {}
+])
+
+const change = (e: any) => {
+  console.log(e)
+}
+
+const onChange = (e) => {
+  console.log(e)
+}
+
+</script>
+
+<style lang="scss">
+.app {
+  height: 100vh;
+}
+</style>
--- a/src/pages/index/index.config.ts
+++ b/src/pages/index/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <view class="app">
+    <nut-searchbar v-model="searchValue" placeholder="要搜索点什么？"></nut-searchbar>
+    <nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+      <nut-swiper-item v-for="(itm,idx) in swiperList" :key="idx">
+        <img :src="itm.url" :alt="itm.id"/>
+      </nut-swiper-item>
+    </nut-swiper>
+    <!--    <nut-tabs v-model="tabvalue" background="#fff" title-scroll title-gutter="10" name="0" :auto-height="true">-->
+    <!--      <nut-tab-pane title="精选推荐">-->
+
+    <!--      </nut-tab-pane>-->
+    <!--      <nut-tab-pane title="夏日防嗮"></nut-tab-pane>-->
+    <!--      <nut-tab-pane title="人气热榜"></nut-tab-pane>-->
+    <!--    </nut-tabs>-->
+    <view class="goodBox">
+      <view class="good" v-for="item in 5">
+        <image
+            src="https://cdn-we-retail.ym.tencent.com/tsr/goods/nz-09a.png?imageMogr2/thumbnail/564x564/quality/70/strip/format/webp"
+        />
+        <view class="good-text-box">
+          <text class="good-text">白色短袖连衣裙荷叶边裙摆宽松韩版休闲纯白清爽优雅连衣裙</text>
+          <view class="good-price-box">
+            <text class="good-text-price"><text style="font-size: 20px">188</text>积分</text>
+            <Cart size="20" color="#ff0000" @click="addCart()"/>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue';
+import {Cart} from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+
+const searchValue = ref("")
+const tabvalue = ref("0")
+
+const swiperList = ref([
+  {
+    id: 1,
+    url: "https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
+  },
+  {
+    id: 2,
+    url: "https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg"
+  },
+  {
+    id: 3,
+    url: "https://storage.360buyimg.com/jdc-article/welcomenutui.jpg"
+  },
+  {
+    id: 4,
+    url: "https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
+  }])
+
+const addCart = () => {
+  Taro.showToast({
+    title: '加入购物车成功',
+    icon: 'success',
+    duration: 2000
+  })
+}
+</script>
+
+<style lang="scss">
+.app {
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+}
+
+.nut-swiper-item {
+  //line-height: 150px;
+ //padding: 20px;
+}
+
+.nut-swiper-item img {
+  width: 100%;
+  height: 350px;
+  //border-radius: 10px;
+}
+
+.goodBox {
+  //width: 100%;
+  //height: 100%;
+  margin-top: 5px;
+  display: flex;
+  padding: 20px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .good {
+    width: 340px;
+    //height: 540px;
+    background-color: #fff;
+    margin-bottom: 10px;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+
+    image {
+      width: 100%;
+      height: 350px;
+    }
+
+    .good-text-box {
+      padding: 10px;
+
+      .good-text {
+        flex-shrink: 0;
+        font-size: 28px;
+        color: #333;
+        font-weight: 400;
+        display: -webkit-box;
+        height: 72px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        word-break: break-word;
+        line-height: 36px;
+      }
+
+      .good-price-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+
+        .good-text-price {
+          font-size: 28px;
+          font-weight: bold;
+          color: #ff0000;
+          //font-weight: 400;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          overflow: hidden;
+        }
+      }
+    }
+
+  }
+}
+</style>
--- a/src/pages/user/index.config.ts
+++ b/src/pages/user/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '个人中心',
+  navigationStyle: 'custom',
+})
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <view class="app">
+    <view class="user-center-card__header__transparent">
+      <view class="user-center-card__header__avatar">
+        <nut-avatar size="large">
+          <img
+              src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
+        </nut-avatar>
+      </view>
+      <view class="user-center-card__header__info">
+        <view class="user-center-card__header__info__name">小明</view>
+        <view class="user-center-card__header__info__desc">这个人很懒，什么都没有留下</view>
+      </view>
+    </view>
+    <!--我的订单-->
+    <view class="cell-card">
+      <view class="top">
+        <view>我的订单</view>
+        <view class="sub">
+          <view>全部订单</view>
+          <ArrowRight/>
+        </view>
+      </view>
+      <view class="center">
+        <view class="center-t">
+          <Order size="25px"/>
+          <view class="center-text">待付款</view>
+        </view>
+        <view class="center-t">
+          <Clock size="25px"/>
+          <view class="center-text">待使用</view>
+        </view>
+        <view class="center-t">
+          <Shop size="25px"/>
+          <view class="center-text">已使用</view>
+        </view>
+        <view class="center-t">
+          <Del size="25px"/>
+          <view class="center-text">已失效</view>
+        </view>
+      </view>
+    </view>
+
+    <!--  我的服务  -->
+
+    <view class="user-center">
+      <view>我的服务</view>
+      <view class="box">
+        <view class="box-mini" v-for="item in 10">
+          <image src="http://jdt168.com/uploads/def/20230612/890553361077384e0c1b1d9e164e2feb.png"/>
+          <view>我的账户</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {reactive, toRefs} from 'vue';
+import {ArrowRight, Order, Del, Clock, Shop} from '@nutui/icons-vue-taro';
+
+</script>
+
+<style lang="scss">
+.app {
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+  height: 100vh;
+  background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png');
+  background-size: auto 40%;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.user-center-card__header__transparent {
+  position: absolute;
+  left: 30px;
+  top: 200px;
+  background-color: transparent;
+  //height: 100%;
+  width: 100%;
+  display: flex;
+  //flex-direction: row;
+  align-items: center;
+
+  .user-center-card__header__info {
+    margin-left: 20px;
+    color: #333;
+    font-weight: bolder;
+  }
+}
+
+.cell-card {
+  box-sizing: border-box;
+  position: absolute;
+  top: 350px;
+  background-color: #fff;
+  border-radius: 20px;
+  margin: 20px;
+  padding: 30px;
+  width: 710px;
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .sub {
+      display: flex;
+      color: #c9c9c9;
+      align-items: center;
+    }
+  }
+
+  .center {
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+
+    .center-t {
+      margin-top: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+
+      .center-text {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+
+.user-center {
+  box-sizing: border-box;
+  position: absolute;
+  top: 640px;
+  background-color: #fff;
+  border-radius: 20px;
+  margin: 20px;
+  padding: 30px;
+  width: 710px;
+
+  .box {
+    box-sizing: border-box;
+    margin-top: 20px;
+    display: flex;
+    //justify-content: space-between;
+    flex-wrap: wrap;
+
+    .box-mini {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 150px;
+      margin-bottom: 20px;
+      margin-right: 13px;
+
+      image {
+        width: 80px;
+        height: 80px;
+      }
+    }
+
+  }
+}
+</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "lib",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "jsx": "preserve",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "include": ["./src", "./types", "components.d.ts"],
+  "compileOnSave": false
+}
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -0,0 +1,22 @@
+/// <reference types="@tarojs/taro" />
+
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.styl';
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+
+declare module '@tarojs/components' {
+  export * from '@tarojs/components/types/index.vue3'
+}
--- a/types/vue.d.ts
+++ b/types/vue.d.ts
@@ -0,0 +1,10 @@
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents extends JSX.IntrinsicElements {
+    /** Note: Vue 在 runtime 中将 JSX.IntrinsicElements 通过 index signature 重复声明标签
+     * 这会导致插件无法正常跳转类型，可以手动覆盖声明标签活得更好的体验，参考如下：
+     * 'scroll-view': JSX.IntrinsicElements['scroll-view']
+     */
+  }
+}