crmeb頁面搭建之 會員頁面的實現

會員頁面的製作：

• 模擬axios請求

• 靜態頁面搭建

• 實現數據切換

• 首先，頁面如下

動態效果展示如下

滑動前

滑動後

• 本地mockdata,axios請求

  • 主要思路：
    • mounted中動態獲取數據 vipInfoList
    • 圖片的輪播： :src=“item.url”
    • 下方會員升級條件相應的文字切換 handleChange中通過切換activeDom進 行

//圖片部分
<mt-swipe :auto="4000" class="swipe-wrap" :continuous="true" @change="handleChange">
            <mt-swipe-item  " v-for="(item,index) in vipInfoList" :key="index">
              <img :src="item.imgUrl || null">
              <div class="desc">
                <div class="name">{{item.name}}</div>
                <div class="account">可享受商品折扣{{item.account}}折</div>
              </div>
            </mt-swipe-item>
 </mt-swipe>

//文字部分 的部分代碼 
<div class="up-content">
              <div class="up-level-condition">
                <span class="desc">滿足積分{{activeDom.condition.score}}分</span>
                <span class="flag-con">未滿足條件</span>
              </div>
              <div class="split-line"></div>
              <div class="no-level-condition">
                <span class="require">
                  還需要{{activeDom.condition.score}}積分
                </span>
                <span class="status">
                  <i class="yes">0</i>
                  /
                  <i class="no">{{activeDom.condition.score}}</i>
                </span>
              </div>
            </div>

//activeDom初始值爲vipInfoList[0]，handleChange時進行切換
mounted() {
      api.getVipInfo().then((res) => {
        this.vipInfoList = res.data.vipInfoList;
        this.activeDom = this.vipInfoList[0];
        // console.log(res)
      }, (err) => {
        console.log(err)
      })
    },
    methods: {
      handleChange(index) {
        this.activeIndex = index;
        this.activeDom = this.vipInfoList[index];
        // console.log(index)
      }
    }

---

但是出現一個文字，就是數據還沒獲取到模板就會被渲染，所以我們初始給activeDom賦個值，問題得到解決

activeDom: {
          'level': 0,
          'name': '普通會員',
          'account': 0.99,
          'imgUrl': '',
          'conditionNum': 1,
          'condition': {
            'score': 100,
          }
        }

另外，vipInfoList的數據結構如下：

{
  "vipInfoList": [{
    "level": 0,
    "name": "普通會員",
    "account": 0.99,
    "imgUrl": "../static/img/pthy.jpg",
    "conditionNum": 1,
    "condition": {
      "score": 100
      }
  },{
    "level": 1,
    "name": "青銅會員",
    "account": 0.95,
    "imgUrl": "../static/img/qthy.jpg",
    "conditionNum": 3,
    "condition": {
      "score": 300,
      "experience": 500,
      "costs": 20
      }
  },

• 再說一個本地，本地模擬數據的時候，假如用到了圖片必須放在static目錄下，我的目錄結構如下