feat: 更新

components.d.ts

@@ -12,6 +12,6 @@ declare module '@vue/runtime-core' {
     IconAndText: typeof import('./src/components/abnormal/iconAndText.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    VanButton: typeof import('vant/es')['Button']
+    VanSearch: typeof import('vant/es')['Search']
   }
 }

index.html

@@ -10,7 +10,7 @@
   .xtbg-loading:after {content:" ";display:block;width:80px;height:80px;box-sizing:border-box;border-radius:50%;border:4px solid #ffef30;border-color:#ffef30  transparent #ffef30 transparent;animation:xtbg-loading 1.3s linear infinite;}
   @keyframes xtbg-loading {0% {transform:rotate(0deg);}
   100% {transform:rotate(360deg);}
-  }body {background-color: #fffdf4;};</style>
+  }body {background-color: #fff;};</style>
   <script>window.info = {};window.getMessage = function(key, value) {window.info[key] = value;};</script>
   </head>
   <body>

proxy.config.ts

@@ -1,26 +1,18 @@
-import { proxyTarget } from "./config"
+import { proxyTarget } from "./config";
 
-let proxyTable = {
+const proxyTable = {
-  "/zuul": {
+  "/chargeprod": {
     target: proxyTarget,
     changeOrigin: true
   },
-  "/media/": {
+  "/user": {
     target: proxyTarget,
     changeOrigin: true
   },
-  "/zwwxgzt": {
+  "/wx": {
     target: proxyTarget,
     changeOrigin: true
-  },
+  }
-  "/midjs": {
-    target: proxyTarget,
-    changeOrigin: true
-  },
-  "/irc": {
-    target: proxyTarget,
-    changeOrigin: true
-  },
 };
 
 export default proxyTable;

src/pages/Home.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" name="Home">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import pinia from "../store/pinia";
 import { pay } from "../store";
 import { getQueryString } from "@/lib/util";
@@ -14,7 +14,11 @@ payStore.channel = channel || "";
 
 const searchKeyword = ref<string>("");
 
+payStore.getChargeprod();
 
+const prizeList = computed(() => {
+  return payStore.prizeList;
+});
 
 onMounted(() => {
   // init();
@@ -23,8 +27,29 @@ onMounted(() => {
 
 <template>
   <div class="wechat-home">
-    <div>
+    <div class="wechat-home-search">
-      <van-search v-model="searchKeyword" placeholder="请输入手机号或者用户ID" />
+      <van-search
+        v-model="searchKeyword"
+        class="wechat-home-search-input"
+        placeholder="请输入手机号或者用户ID"
+        shape="round"
+      />
+    </div>
+    <div class="wechat-home-prize">
+      <h3>选择充值金额</h3>
+      <div class="wechat-home-prize-list">
+        <div
+          v-for="item in prizeList"
+          :key="`prize-${item.channel}`"
+          class="prize-item"
+        >
+          <p class="prize-item-line1">
+            <i></i>
+            <span>{{ item.prodName }}</span>
+          </p>
+          <p class="prize-item-line2">¥ {{ item.money }}元</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,6 +59,97 @@ onMounted(() => {
   height: 100%;
   width: 100%;
   overflow: auto;
+  padding: 0 15px;
+  box-sizing: border-box;
+
+  &-search {
+    padding-top: 20px;
+
+    &-input {
+      height: 50px;
+      padding: 0;
+      --van-search-input-height: 50px;
+      // padding-left: 0;
+      // padding-right: 0;
+    }
   }
 
+  &-prize {
+    margin-top: 20px;
+
+    &>h3 {
+      font-size: 18px;
+      font-family: PingFang SC-Medium, PingFang SC;
+      font-weight: 400;
+      color: #222222;
+      line-height: 46px;
+    }
+
+    &-list {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  }
+}
+
+.prize-item {
+  width: 105px;
+  height: 80px;
+  background: #FFFFFF;
+  border-radius: 20px;
+  border: 2px solid #DCDCDC;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  // margin: 10px;
+
+  &-line1 {
+    display: flex;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+
+    &>i {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      background-image: url(../assets/images/jinbi.png);
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+
+    &>span {
+      font-family: PingFang SC-Medium, PingFang SC;
+      font-weight: 400;
+      color: #222222;
+      line-height: 20px;
+      padding-left: 3px;
+    }
+  }
+
+  &-line2 {
+    color: #666666;
+    text-align: center;
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.prize-item-active {
+  background: #FFF6DC;
+  border: 2px solid #FFAC39;
+
+  .prize-item-line1 {
+    &>span {
+      color: #FFAC39;
+    }
+  }
+
+  .prize-item-line2 {
+    color: #FFAC39;
+  }
+}
 </style>

src/routes/routes.ts

@@ -1,7 +1,7 @@
 const routes = [
   { path: "/", name: "root", redirect: "/home" },
   { path: "/home", name: "home", meta: { power: true }, component: () => import("../pages/Home.vue") },
-  { path: "/loginfo", name: "loginfo", component: () => import("../pages/Login.vue") },
+  // { path: "/loginfo", name: "loginfo", component: () => import("../pages/Login.vue") },
   { path: "/nonetwork:text?", name: "nonetwork", props: true, component: () => import("../pages/error/NoNetwork.vue") },
   { path: "/noaccess/:text?", name: "noaccess", props: true, component: () => import("../pages/error/NoAccess.vue") },
   { path: "/empty/:text?", name: "empty", props: true, component: () => import("../pages/error/NoData.vue") },

src/store/pay.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 import { showFailToast } from "vant";
 import { chargeprodList, chargeUser } from "@/api/index";
@@ -50,7 +50,12 @@ const pay = defineStore("pay", () => {
     });
   };
 
-  return { openId, dataId, channel, getChargeprod, getChargeUser };
+  
+  const prizeList = computed(() => {
+    return payLsit.value;
+  });
+
+  return { openId, dataId, channel, getChargeprod, getChargeUser, prizeList };
 });
 
 export default pay;

vite.config.ts

@@ -83,8 +83,7 @@ export default (opt: any) => {
       postcss: {
         plugins: [
           postcsspxtoviewport({
-            viewportWidth: 375,
+            viewportWidth: 375
-            selectorBlackList: [""]
           })
         ]
       }