商城列表页 外观

src/App.vue

@@ -77,6 +77,10 @@
       <div class="right-button-wrap">
         <button
           class="shop"
+          :class="{
+            active: $route.meta.tabIdx === 9
+          }"
+          @click="onClickShop"
         />
         <button class="user" />
       </div>
@@ -117,11 +121,16 @@ if (store.state.loginStatus === store.getters.loginStatusEnum.notLogin && route.
 
 const isShowFeedBack = ref(false)
 function onClickFeedBack() {
-  if (store.state.loginStatus === store.getters.loginStatusEnum.wxUser) {
-    isShowFeedBack.value = true
-  } else {
-    ElMessage('需登录后才能体验')
-  }
+  // if (store.state.loginStatus === store.getters.loginStatusEnum.wxUser) {
+  isShowFeedBack.value = true
+  // } else {
+  // ElMessage('需登录后才能体验')
+  // }
+}
+
+function onClickShop() {
+  // todo: 要求登录
+  router.push({ name: 'ShopView' })
 }
 </script>
 
@@ -300,7 +309,7 @@ html, body {
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center center;
-        &:hover{
+        &:hover, &.active{
           background-image: url(@/assets/images/icon_shop-active.png);
           background-size: cover;
           background-repeat: no-repeat;

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import LoginView from "../views/LoginView.vue"
 import HomeView from '../views/HomeView.vue'
 import RelicSearch from '../views/RelicSearch.vue'
+import ShopView from '@/views/ShopView.vue'
 // import store from '@/store/index.js'
 
 const routes = [
@@ -85,6 +86,14 @@ const routes = [
   //     tabIdx: 8
   //   }
   // },
+  {
+    path: '/shop',
+    name: 'ShopView',
+    component: ShopView,
+    meta: {
+      tabIdx: 9
+    }
+  }
 ]
 
 const router = createRouter({

src/views/ShopView.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="shop-view">
+    <menu class="tab-bar">
+      <button
+        :class="{
+          active: tabIdx === 0
+        }"
+        @click="tabIdx = 0"
+      >
+        爱心币兑换
+      </button>
+      <button
+        :class="{
+          active: tabIdx === 1
+        }"
+        @click="tabIdx = 1"
+      >
+        兑换记录
+      </button>
+    </menu>
+    <ul class="prize-list">
+      <li
+        v-for="prizeItem in prizeList"
+        :key="prizeItem.id"
+        class="prize"
+        :class="{
+          disabled: prizeItem.stock === 0,
+        }"
+        @click="onClickPrizeItem(prizeItem)"
+      >
+        <img
+          class="thumb"
+          :src="prizeItem.thumb"
+          alt=""
+          draggable="false"
+        >
+        <div class="title">
+          {{ prizeItem.name }}
+        </div>
+        <div
+          class="remaining"
+        >
+          剩余：{{ prizeItem.stock }}
+        </div>
+        <div class="price">
+          <span class="number">{{ prizeItem.score }}</span>
+          <span class="unit">爱心币</span>
+        </div>
+        <img
+          v-show="prizeItem.stock > 0"
+          class="icon-enabled"
+          src="@/assets/images/icon-gift.png"
+          alt=""
+          draggable="false"
+        >
+        <!-- <img
+          v-show="prizeItem.isEnabled && prizeItem.stock === 0"
+          class="icon-no-stock"
+          src="@/assets/images/no-stock.png"
+          alt=""
+          draggable="false"
+        > -->
+      </li>
+    </ul>
+    <button class="next-page" />
+    <div class="coin-number">
+      <img
+        class="icon"
+        src="@/assets/images/icon_money.png"
+        alt=""
+        draggable="false"
+      >
+      <span class="value">4000</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 972)
+
+const tabIdx = ref(0)
+
+const prizeList = ref([
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+  {
+    id: 0,
+    stock: 10,
+    thumb: require('@/assets/images/login-page-title.png'),
+    name: 'K线上的解放了开始的',
+    score: 120,
+  },
+])
+
+function onClickPrizeItem(prizeItem) {
+
+}
+</script>
+
+<style lang="less" scoped>
+.shop-view{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  >menu{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: calc(300 / 1920 * 100%);
+    >button{
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 28px;
+      color: #424A4A;
+      line-height: 33px;
+      position: relative;
+      &.active{
+        font-weight: bold;
+        color: #589498;
+        &::after{
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 100%;
+          transform: translate(-50%);
+          width: 90px;
+          height: 9px;
+          background: #FFE794;
+          box-shadow: 0px 1px 4px 0px rgba(193,165,64,0.5);
+          border-radius: 4px;
+        }
+      }
+    }
+    >button:first-of-type{
+      margin-bottom: 38px;
+    }
+  }
+  >ul.prize-list{
+    flex: 0 0 auto;
+    width: calc(1400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >li.prize{
+      display: inline-block;
+      width: calc(322 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(393 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 100%);
+      border-radius: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      box-shadow: 0px 1px 11px 0px rgba(0,0,0,0.1);
+      position: relative;
+      margin-right: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-bottom: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      cursor: pointer;
+      >img.thumb{
+        width: calc(307 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(246 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        object-fit: cover;
+        border-radius: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >.title{
+        margin-top: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-right: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        color: #424A4A;
+        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-weight: bold;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+      }
+      >.remaining{
+        margin-top: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-right: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+      }
+      >.price{
+        margin-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >.number{
+          margin-left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: bold;
+          font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #589498;
+          line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.unit{
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #424A4A;
+          line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-left: 0.5em;
+        }
+      }
+      >img.icon-enabled{
+        position: absolute;
+        right: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >article.prize-item.disabled{
+      pointer-events: none;
+    }
+  }
+  >button.next-page{
+    position: absolute;
+    top: 50%;
+    right: calc(102 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(0, -50%);
+    width: 58px;
+    height: 58px;
+    background-image: url(@/assets/images/icon_arrow-right-round.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >.coin-number{
+    position: absolute;
+    left: 0;
+    bottom: 43px;
+    width: 266px;
+    height: 56px;
+    background: linear-gradient( 90deg, #589498 0%, rgba(88,148,152,0) 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    >img.icon{
+      width: 59px;
+      height: 59px;
+      margin-bottom: 12px;
+      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;
+      text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
+    }
+  }
+}
+</style>