feat: vip

package.json

@@ -101,6 +101,7 @@
     "@vue/cli-plugin-typescript": "~5.0.8",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/runtime-dom": "^3.2.45",
     "babel-loader": "^9.1.2",
     "babel-plugin-import": "^1.11.0",
     "copy-webpack-plugin": "^5.1.2",

src/lib/api/vpi.js → src/lib/api/vip.js

@@ -12,4 +12,4 @@ export const getVipList = () => request.get("/weapp/legals/list");
  *
  * [api](https://console-docs.apipost.cn/preview/888dcf083e39e4e4/ae9a5ffd745e57d1?target_id=6deab440-b9f9-44ca-b0f9-1e06be8156cb)
  */
-export const getVipDetail = () => request.get("/weapp/legals/list");
+export const getVipDetail = (id) => request.get(`/weapp/legals/${id}`);

src/pages/vip/detail.vue

@@ -1,15 +1,69 @@
 <template>
-  <view class="content"></view>
+  <view class="page">
+    <view class="title">
+      <view class="name">{{ data.name }}</view>
+      <image :src="data.logo" class="logo"></image>
+    </view>
+    <view class="content">
+      <view class="content-title">权益介绍</view>
+      <view v-html="data.intro" />
+    </view>
+  </view>
 </template>
 
 <script>
+import { getVipDetail } from "@/lib/api/vip";
+
 export default {
   name: "VipDetail",
   data() {
-    return {};
+    return {
+      id: 0,
+      data: null,
+    };
+  },
+  onLoad(data) {
+    this.id = data.id;
+    this.getVipDetail();
+  },
+  methods: {
+    async getVipDetail() {
+      const data = await getVipDetail(this.id);
+      this.data = data.data;
+    },
   },
-  methods: {},
 };
 </script>
 
-<style></style>
+<style lang="scss">
+page {
+  background: #f5f5f5;
+}
+.title {
+  display: flex;
+  align-items: center;
+  margin: 40rpx;
+  padding: 40rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+  .name {
+    flex: 1;
+    font-weight: bold;
+  }
+  .logo {
+    display: block;
+    width: 160rpx;
+    height: 160rpx;
+  }
+}
+.content {
+  padding: 30rpx 40rpx;
+  font-size: 28rpx;
+  line-height: 1.5;
+  background-color: #fff;
+  .content-title {
+    margin-bottom: 20rpx;
+    font-size: 36rpx;
+  }
+}
+</style>

src/pages/vip/index.vue

@@ -21,7 +21,7 @@
         class="item"
         v-for="item in c.list"
         :key="item.id"
-        :url="`pages/vip/detail?id=${item.id}`"
+        :url="`./detail?id=${item.id}`"
       >
         <image class="icon" :src="item.logo"></image>
         {{ item.name }}
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { getVipList } from "@/lib/api/vpi";
+import { getVipList } from "@/lib/api/vip";
 
 export default {
   name: "VipDetail",

tsconfig.json

@@ -19,11 +19,15 @@
       "miniprogram-api-typings",
       "mini-types"
     ],
-    "typeRoots": ["./node_modules/@types","./types"],
+    "typeRoots": ["./node_modules/@types", "./types"],
     "paths": {
       "@/*": ["./src/*"]
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "exclude": ["node_modules", "unpackage", "dist", "src/**/*.nvue"]
+  "exclude": ["node_modules", "unpackage", "dist", "src/**/*.nvue"],
+  "extensions": [".vue"],
+  "vueCompilerOptions": {
+    "target": 2
+  }
 }

yarn.lock

@@ -2966,12 +2966,36 @@
   dependencies:
     "@vue/shared" "3.0.5"
 
+"@vue/reactivity@3.2.45":
+  version "3.2.45"
+  resolved "https://npm.pri.ibanyu.com/@vue%2freactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0"
+  integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==
+  dependencies:
+    "@vue/shared" "3.2.45"
+
+"@vue/runtime-core@3.2.45":
+  version "3.2.45"
+  resolved "https://npm.pri.ibanyu.com/@vue%2fruntime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f"
+  integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==
+  dependencies:
+    "@vue/reactivity" "3.2.45"
+    "@vue/shared" "3.2.45"
+
+"@vue/runtime-dom@^3.2.45":
+  version "3.2.45"
+  resolved "https://npm.pri.ibanyu.com/@vue%2fruntime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59"
+  integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==
+  dependencies:
+    "@vue/runtime-core" "3.2.45"
+    "@vue/shared" "3.2.45"
+    csstype "^2.6.8"
+
 "@vue/shared@3.0.5":
   version "3.0.5"
   resolved "https://npm.pri.ibanyu.com/@vue%2fshared/-/shared-3.0.5.tgz#c131d88bd6713cc4d93b3bb1372edb1983225ff0"
   integrity sha1-wTHYi9ZxPMTZOzuxNy7bGYMiX/A=
 
-"@vue/shared@^3.0.0":
+"@vue/shared@3.2.45", "@vue/shared@^3.0.0":
   version "3.2.45"
   resolved "https://npm.pri.ibanyu.com/@vue%2fshared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
   integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
@@ -5964,6 +5988,11 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.6.8:
+  version "2.6.21"
+  resolved "https://npm.pri.ibanyu.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://npm.pri.ibanyu.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"