商城 兑换记录 UI

src/views/ShopView.vue

@@ -18,7 +18,11 @@
         兑换记录
       </button>
     </menu>
-    <ul class="prize-list">
+
+    <ul
+      v-show="tabIdx === 0"
+      class="prize-list"
+    >
       <li
         v-for="prizeItem in prizeList"
         :key="prizeItem.id"
@@ -62,7 +66,49 @@
         > -->
       </li>
     </ul>
-    <button class="next-page" />
+    <button
+      v-show="tabIdx === 0"
+      class="next-page"
+    />
+
+    <div
+      v-show="tabIdx === 1"
+      class="redeem-record-content"
+    >
+      <p class="tip">
+        如有疑问，请咨询
+      </p>
+      <div class="table">
+        <div class="row-header">
+          <div>时间</div>
+          <div>类型</div>
+          <div>爱心币</div>
+          <div>说明</div>
+        </div>
+        <div class="splitter" />
+        <div class="table-content">
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="row-data"
+          >
+            <div>
+              {{ item.time }}
+            </div>
+            <div>
+              {{ item.type }}
+            </div>
+            <div>
+              {{ item.coin }}
+            </div>
+            <div>
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="coin-number">
       <img
         class="icon"
@@ -87,6 +133,7 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import PrizeRedeem from '@/components/PrizeRedeem.vue'
 
+
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
@@ -163,6 +210,68 @@ function onClickPrizeItem(prizeItem) {
   redeemPrizeData.value = prizeItem
   isShowRedeem.value = true
 }
+
+const items = ref([
+  {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '+4',
+    desc: '士大夫士大夫'
+  },
+  {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  },
+  {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  }, {
+    time: '2024-03-30 15:19:01',
+    type: '爱心林场',
+    coin: '-4',
+    desc: '士大夫士大夫'
+  },
+])
+
 </script>
 
 <style lang="less" scoped>
@@ -175,6 +284,7 @@ function onClickPrizeItem(prizeItem) {
   display: flex;
   align-items: center;
   >menu{
+    flex: 0 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -298,6 +408,79 @@ function onClickPrizeItem(prizeItem) {
     background-repeat: no-repeat;
     background-position: center center;
   }
+  >.redeem-record-content{
+    flex: 1 0 1px;
+    height: 100%;
+    margin: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    >p.tip{
+      margin: 23px;
+      margin-bottom: 14px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #589498;
+      line-height: 19px;
+    }
+    >.table{
+      flex: 1 0 1px;
+      width: 100%;
+      margin-bottom: 43px;
+      background: linear-gradient( 180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
+      box-shadow: 15px 15px 38px 0px rgba(255,255,255,0.5);
+      border-radius: 8px 8px 8px 8px;
+      display: flex;
+      flex-direction: column;
+      >.row-header{
+        flex: 0 0 auto;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        margin-right: 16px;
+        >div{
+          display: inline-block;
+          width: 25%;
+          text-align: center;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: bold;
+          font-size: 20px;
+          color: #424A4A;
+          line-height: 23px;
+        }
+      }
+      >.splitter{
+        width: calc(100% - 30px * 2);
+        height: 1px;
+        background-color: #B5C2B9;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      >.table-content{
+        flex: 1 0 1px;
+        overflow: auto;
+        margin-right: 10px;
+        margin-bottom: 20px;
+        >.row-data{
+          height: 68px;
+          display: flex;
+          align-items: center;
+          >div{
+            display: inline-block;
+            width: 25%;
+            text-align: center;
+            font-family: Source Han Sans CN, Source Han Sans CN;
+            font-weight: 400;
+            font-size: 20px;
+            color: #424A4A;
+            line-height: 23px;
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+  }
   >.coin-number{
     position: absolute;
     left: 0;
@@ -311,15 +494,16 @@ function onClickPrizeItem(prizeItem) {
     >img.icon{
       width: 59px;
       height: 59px;
-      margin-bottom: 12px;
+      margin-bottom: 15px;
       margin-right: 20px;
     }
     >.value{
       font-family: Source Han Sans CN, Source Han Sans CN;
       font-weight: bold;
       font-size: 28px;
-      color: #FFFFFF;
       line-height: 33px;
+      color: #fff;
+      margin-bottom: 10px;
       text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
     }
   }