feat: 更新

src/pages/Home.vue

@@ -1,20 +1,24 @@
 <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";
 
 const payStore = pay(pinia);
 const locateObj = getQueryString();
-const {openId, data, channel} = locateObj;
+const { openId, data, channel } = locateObj;
 
 payStore.openId = openId || "";
 payStore.dataId = data || "";
 payStore.channel = channel || "";
 
-const searchKeyword =  ref<string>("");
+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>
-      <van-search v-model="searchKeyword" placeholder="请输入手机号或者用户ID" />
+    <div class="wechat-home-search">
+      <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>