crmeb页面搭建之会员页面的实现

最新推荐文章于 2024-06-20 15:35:52 发布

希望至上

最新推荐文章于 2024-06-20 15:35:52 发布

阅读量694

点赞数

文章标签： vue html5

本文链接：https://blog.csdn.net/weixin_43844975/article/details/103693689

版权

会员页面的制作：

模拟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
      }
  },