【生活美好】youya-vue

这是一个比较大的项目哦
先放上作者的github地址
https://github.com/z8985561/youya-vue
然后我们来大体看看有什么效果

接下来我们一起来分析项目啦
首先是main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from "axios";
import VueAxios from "vue-axios";
// 适配方案
import 'lib-flexible/flexible.js';

// 公共样式
import './assets/css/common.css';

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// 引入 vant-ui
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

Vue.config.productionTip = false

const IS_TEST = true;

// Axios 请求
Axios.defaults.timeout = 30000;
Axios.defaults.withCredentials = true;
Axios.interceptors.response.use(response => {
  if (response.status === 200) {
    if (!IS_TEST && response.data.code == 401) {
      window.console.log(response.data.code);
      window.location.href = `http://youya.chuncom.com/user/authorization?url=${encodeURIComponent(
              window.location.href
            )}`;
      return;
    }
    return Promise.resolve(response.data);
  } else {
    return Promise.reject(response.data);
  }
}, error => {
  if (error.response.status) {
    console.log(error)
    // switch (error.response.status) {
    //   case 401:
    //     router.replace({
    //       path: '/',
    //       query: {
    //         redirect: router.currentRoute.fullPath
    //       }
    //     });
    //     break;
    //   default:
    //     console.log(123)
    // }
    return Promise.reject(error.response);
  }
})
window.axios = Axios;

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
    // console.log(store)
  }
  next()
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

接下来就是router.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from './views/Index.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
    // 首页
    path: '/',
    name: 'index',
    component: Index,
    meta: {
      title: "首页",
      keepAlive: true
    }
  },
  {
    // 课程
    path: '/video',
    name: 'video',
    component: () => import( /* webpackChunkName: "about" */ './views/Video.vue'),
    meta: {
      title: "课程",
      keepAlive: true
    }
  },
  {
    // 视频课程详情
    path: '/video_detail',
    name: 'video_detail',
    component: () => import( /* webpackChunkName: "about" */ './views/VideoDetail.vue'),
    meta: {
      title: "课程详情"
    }
  },
  // SharePosters.vue
  {
    // 分享海报
    path: '/share_posters/:id',
    name: 'share_posters',
    component: () => import( /* webpackChunkName: "about" */ './views/SharePosters.vue'),
    meta: {
      title: "课程详情"
    }
  },
  // ToolDetail.vue
  {
    // 功能单页面详情
    path: '/tool_detail/:id',
    name: 'tool_detail',
    component: () => import('./views/ToolDetail.vue'),
    meta: {
      title: "",
      keepAlive: true
    }
  },
  {
    // 文章
    path: '/article',
    name: 'article',
    component: () => import('./views/Article.vue'),
    meta: {
      title: "文章",
      keepAlive: true
    }
  },
  {
    // 体验课程
    path: '/experience/:id',
    name: 'experience',
    component: () => import('./views/Experience.vue'),
    meta: {
      title: "体验课程",
      keepAlive: true
    }
  },
  // ArticleList.vue
  {
    // 优雅美文
    path: '/article_list',
    name: 'article_list',
    component: () => import('./views/ArticleList.vue'),
    meta: {
      title: "优雅美文",
      keepAlive: true
    }
  },
  // CreateOrder.vue
  {
    // 确认购买
    path: '/create_order',
    name: 'create_order',
    component: () => import('./views/CreateOrder.vue'),
    meta: {
      title: "确认购买"
    }
  },
  // Feedback.vue
  {
    // 确认购买
    path: '/feedback',
    name: 'video_feedback',
    component: () => import('./views/Feedback.vue'),
    meta: {
      title: "确认购买"
    }
  },
  // SubscribeList.vue
  {
    // 预约
    path: '/subscribe_list',
    name: 'subscribe_list',
    component: () => import('./views/SubscribeList.vue'),
    meta: {
      title: "预约",
      keepAlive: true
    }
  },
  // SubscribeDetail
  {
    // 预约
    path: '/subscribe_detail/:id',
    name: 'subscribe_detail',
    component: () => import('./views/SubscribeDetail.vue'),
    meta: {
      title: "预约详情"
    }
  },
  // SubscribeAuth.vue
  {
    // 预约
    path: '/subscribe_auth/:course_id',
    name: 'subscribe_auth',
    component: () => import('./views/SubscribeAuth.vue'),
    meta: {
      title: "预约详情"
    }
  },
  // BindingInformation.vue
  {
    // 用户手机绑定
    path: '/binding_information',
    name: 'binding_information',
    component: () => import('./views/BindingInformation.vue'),
    meta: {
      title: "用户手机绑定"
    }
  },
  // Authentication
  {
    // 身份验证
    path: '/authentication',
    name: 'authentication',
    component: () => import('./views/Authentication.vue'),
    meta: {
      title: "身份验证"
    }
  },
  // Authentication
  {
    // 个人中心
    path: '/member',
    name: 'member_index',
    component: () => import('./views/member/Index.vue'),
    meta: {
      title: "个人中心",
      keepAlive: true
    }
  },
  // PackageGift.vue
  {
    // 提现
    path: '/member/package_gift',
    name: 'member_package_gift',
    component: () => import('./views/member/PackageGift.vue'),
    meta: {
      title: " 转赠课程"
    }
  },
  // Withdraw.vue
  {
    // 提现
    path: '/member/withdraw',
    name: 'member_withdraw',
    component: () => import('./views/member/Withdraw.vue'),
    meta: {
      title: "提现"
    }
  },
  // MyCoursesList.vue
  {
    // 我的课次
    path: '/member/my_courses_list',
    name: 'my_courses_list',
    component: () => import('./views/member/MyCoursesList.vue'),
    meta: {
      title: "我的课次"
    }
  },
  // DonationCourses.vue
  {
    // 转赠课程
    path: '/member/donation_courses',
    name: 'donation_courses',
    component: () => import('./views/member/DonationCourses.vue'),
    meta: {
      title: "转赠课程"
    }
  },
  // MyReservation.vue
  {
    // 我的预约
    path: '/member/my_reservation_list',
    name: 'my_reservation_list',
    component: () => import('./views/member/MyReservationList.vue'),
    meta: {
      title: "我的预约"
    }
  },
  // MyVideoList.vue
  {
    // 我的视频
    path: '/member/my_video_list',
    name: 'my_video_list',
    component: () => import('./views/member/MyVideoList.vue'),
    meta: {
      title: "我的视频"
    }
  },
  // MyRedeemCode.vue
  {
    // 我的兑换码
    path: '/member/produce_code',
    name: 'produce_code',
    component: () => import('./views/member/ProduceCode.vue'),
    meta: {
      title: "我的兑换码"
    }
  },
  // MyRedeemCode.vue
  {
    // 我的兑换码
    path: '/member/my_redeem_code',
    name: 'my_redeem_code',
    component: () => import('./views/member/MyRedeemCode.vue'),
    meta: {
      title: "我的兑换码"
    }
  },
  //WithdrawRecord.vue
  {
    // 提现记录
    path: '/member/withdraw_record',
    name: 'withdraw_record',
    component: () => import('./views/member/WithdrawRecord.vue'),
    meta: {
      title: "提现记录"
    }
  },
  //EarningsRecord.vue
  {
    // 收益记录
    path: '/member/earnings_record',
    name: 'earnings_record',
    component: () => import('./views/member/EarningsRecord.vue'),
    meta: {
      title: "收益记录"
    }
  },
  //EarningsRecord.vue
  {
    // 收益记录
    path: '/member/earnings_record2',
    name: 'earnings_record2',
    component: () => import('./views/member/EarningsRecord2.vue'),
    meta: {
      title: "收益记录"
    }
  },
  // PersonalInfo.vue
  {
    // 个人资料
    path: '/member/personal_info',
    name: 'personal_info',
    component: () => import('./views/member/PersonalInfo.vue'),
    meta: {
      title: "个人资料"
    }
  },
  // AddressList.vue
  {
    // 地址管理
    path: '/member/address_list',
    name: 'address_list',
    component: () => import('./views/member/AddressList.vue'),
    meta: {
      title: "地址管理"
    }
  },
  // AddressEdit.vue
  {
    // 地址编辑
    path: '/member/address_edit',
    name: 'address_edit',
    component: () => import('./views/member/AddressEdit.vue'),
    meta: {
      title: "地址编辑"
    }
  },
  // MyCart.vue
  {
    // 我的购物车
    path: '/member/my_cart',
    name: 'my_cart',
    component: () => import('./views/member/MyCart.vue'),
    meta: {
      title: "我的购物车"
    }
  },
  {
    // 核销单首页
    path: '/verification/index',
    name: 'verification_index',
    component: () => import('./views/verification/Index.vue'),
    meta: {
      title: "香港皇家优雅女子学堂"
    }
  },
  // OrderManage.vue
  {
    // 订单管理
    path: '/verification/order_manage',
    name: 'order_manage',
    component: () => import('./views/verification/OrderManage.vue'),
    meta: {
      title: "订单管理"
    }
  },
  // OrderDetail.vue
  {
    // 订单核销
    path: '/verification/order_detail',
    name: 'verification_order_detail',
    component: () => import('./views/verification/OrderDetail.vue'),
    meta: {
      title: "订单核销"
    }
  },

  {
    // 转赠课程包管理页面
    path: '/reservation/order_manage',
    name: 'reservation_order_manage',
    component: () => import('./views/reservation/OrderManage.vue'),
    meta: {
      title: "转赠课程管理"
    }
  },
  {
    // 转赠课程包详情核销
    path: '/reservation/order_detail',
    name: 'reservation_order_detail',
    component: () => import('./views/reservation/OrderDetail.vue'),
    meta: {
      title: "转赠课程核销"
    }
  },
  // Feedback.vue
  {
    // 反馈页面
    path: '/verification/feedback',
    name: 'feedback',
    component: () => import('./views/verification/Feedback.vue'),
    meta: {
      title: "反馈页面"
    }
  },
  // 产品列表
  {
    // 产品列表
    path: '/goods/index',
    name: 'goods_index',
    component: () => import('./views/goods/Index.vue'),
    meta: {
      title: "商品列表"
    }
  },
  // 产品列表
  {
    // 产品列表
    path: '/goods/index2',
    name: 'goods_index2',
    component: () => import('./views/goods/Index2.vue'),
    meta: {
      title: "商品列表"
    }
  },
  // 产品详情
  {
    // 产品详情
    path: '/goods_detail',
    name: 'goods_detail',
    component: () => import('./views/goods/Detail.vue'),
    meta: {
      title: "商品详情"
    }
  },
  // 商品创建订单 CreateOrder.vue
  {
    // 确认订单
    path: '/goods_create_order',
    name: 'goods_create_order',
    component: () => import('./views/goods/CreateOrder.vue'),
    meta: {
      title: "确认订单"
    }
  },
  // 订单支付反馈页面
  {
    // 订单支付反馈页面
    path: '/goods/pay_feedback',
    name: 'goods_pay_feedback',
    component: () => import('./views/goods/Feedback.vue'),
    meta: {
      title: ""
    }
  },
  // BranchList.vue
  {
    // 全国分院列表
    path: '/branch',
    name: 'branch_list',
    component: () => import('./views/branch/BranchList.vue'),
    meta: {
      title: "全国分院列表",
      keepAlive: true
    }
  },
  // BranchDetail.vue
  {
    // 分院详情
    path: '/branch/detail',
    name: 'branch_detail',
    component: () => import('./views/branch/BranchDetail.vue'),
    meta: {
      title: "分院详情"
    }
  },
  // 订单列表
  // OrderList.vue.vue
  {
    // 订单列表
    path: '/order_list',
    name: 'order_list',
    component: () => import('./views/order/OrderList.vue'),
    meta: {
      title: "订单列表"
    }
  },
  {
    // 订单详情
    path: '/order_detail',
    name: 'order_detail',
    component: () => import('./views/order/OrderDetail.vue'),
    meta: {
      title: "订单详情"
    }
  },
  {
    // 申请退款
    path: '/order/refund/:id',
    name: 'order_refund',
    component: () => import('./views/order/Refund.vue'),
    meta: {
      title: "申请退款"
    }
  },
  // RefundDetail.vue
  {
    // 退款详情
    path: '/order/refund_detail/:id',
    name: 'order_refund_detail',
    component: () => import('./views/order/RefundDetail.vue'),
    meta: {
      title: "退款详情"
    }
  },
  {
    // 梦想导师团
    path: '/tutor/index',
    name: 'tutor_index',
    component: () => import('./views/tutor/Index.vue'),
    meta: {
      title: "梦想导师团",
      keepAlive: true
    }
  },
  {
    // 梦想导师团
    path: '/tutor/detail',
    name: 'tutor_detail',
    component: () => import('./views/tutor/Detail.vue'),
    meta: {
      title: "梦想导师团"
    }
  },
  // 二期新增
  {
    // 服务对象ServiceObject.vue
    path: '/member/service_object',
    name: 'service_object',
    component: () => import('./views/member/ServiceObject.vue'),
    meta: {
      title: "服务对象"
    }
  },
  {
    // 服务对象ServiceObject.vue
    path: '/member/service_object2',
    name: 'service_object2',
    component: () => import('./views/member/ServiceObject2.vue'),
    meta: {
      title: "大使服务对象"
    }
  },
  {
    // 服务对象ServiceObject.vue
    path: '/member/my_ambassador',
    name: 'my_ambassador',
    component: () => import('./views/member/MyAmbassador.vue'),
    meta: {
      title: "我的传播大使"
    }
  },
  {
    // 业绩排行榜
    path: '/member/rank_list',
    name: 'rank_list',
    component: () => import('./views/member/RankList.vue'),
    meta: {
      title: "业绩排行榜"
    }
  },
  {
    // 课程列表
    path: '/live_list',
    name: 'live_list',
    component: () => import('./views/live/LiveList.vue'),
    meta: {
      title: "课程列表"
    }
  },
  {
    // 课程详情
    path: '/live_detail',
    name: 'live_detail',
    component: () => import('./views/live/LiveDetail.vue'),
    meta: {
      title: "课程详情"
    }
  },
  {
    // 直播课程
    path: '/live/my_live',
    name: 'my_live',
    component: () => import('./views/live/MyLive.vue'),
    meta: {
      title: "直播课程"
    }
  },
  {
    // 直播课程
    path: '/live/my_live_detail',
    name: 'my_live_detail',
    component: () => import('./views/live/MyLiveDetail.vue'),
    meta: {
      title: "直播课程"
    }
  },
  {
    // 直播课程
    path: '/live/feedback',
    name: 'live_feedback',
    component: () => import('./views/live/Feedback.vue'),
    meta: {
      title: "直播课程"
    }
  },
  {
    // 确认购买
    path: '/live_create',
    name: 'live_create',
    component: () => import('./views/live/Create.vue'),
    meta: {
      title: "确认购买"
    }
  },
  {
    // 确认购买
    path: '/upgrade',
    name: 'upgrade',
    component: () => import('./views/upgrade/Upgrade.vue'),
    meta: {
      title: ""
    }
  },
  {
    // 升级课程详情
    path: '/upgrade_detail',
    name: 'upgrade_detail',
    component: () => import('./views/upgrade/UpgradeDetail.vue'),
    meta: {
      title: "课程详情"
    }
  },
  {
    // 升级课程下单
    path: '/upgrade_create',
    name: 'upgrade_create',
    component: () => import('./views/upgrade/Create.vue'),
    meta: {
      title: "课程详情"
    }
  },
  {
    // 升级课程支付反馈
    path: '/upgrade_feedback',
    name: 'upgrade_feedback',
    component: () => import('./views/upgrade/Feedback.vue'),
    meta: {
      title: ""
    }
  },
  {
    // 升级课程支付反馈
    path: '/upgrade_order',
    name: 'upgrade_order',
    component: () => import('./views/upgrade/Detail.vue'),
    meta: {
      title: ""
    }
  }
  ]
})

接下来是App.vue

<template>
  <div id="app">
    <router-view>
    </router-view>
    <keep-alive>
      <!-- 底部菜单 -->
      <FooterNav v-if="$route.meta.keepAlive" />
      <!-- 底部菜单 -->
    </keep-alive>
  </div>
</template>
<script>
  import FooterNav from "./components/FooterNav"
  export default {
    components: {
      FooterNav
    },
    mounted() {
      window.addEventListener('focusout', function() {
        document.body.scrollTop = document.body.scrollHeight;
      })
    },
  }
</script>
<style lang="less">
  #app {
    padding-bottom: 60px;
    background-color: #fff;
  }
</style>

然后是footer组件

<template>
  <div>
    <van-tabbar v-model="index" active-color="#8DB9DF"
  inactive-color="#999999">
      <van-tabbar-item replace to="/">
        <span>首页</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icons[0].active : icons[0].normal"
        >
      </van-tabbar-item>
      <van-tabbar-item replace to="/video">
        <span>视频</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icons[1].active : icons[1].normal"
        >
      </van-tabbar-item>
      <van-tabbar-item replace to="/subscribe_list">
        <span>预约</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icons[2].active : icons[2].normal"
        >
      </van-tabbar-item>
      <van-tabbar-item replace to="/member">
        <span>我的</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icons[3].active : icons[3].normal"
        >
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: ["active"],
  data(){
    return{
      index:0,
      icons:[{
        normal: 'http://youya.chuncom.com/youya-h5/img/home-normal.png',
        active: 'http://youya.chuncom.com/youya-h5/img/home-active.png'
      },{
        normal: 'http://youya.chuncom.com/youya-h5/img/video-normal.png',
        active: 'http://youya.chuncom.com/youya-h5/img/video-active.png'
      },{
        normal: 'http://youya.chuncom.com/youya-h5/img/clock-normal.png',
        active: 'http://youya.chuncom.com/youya-h5/img/clock-active.png'
      },{
        normal: 'http://youya.chuncom.com/youya-h5/img/user-normal.png',
        active: 'http://youya.chuncom.com/youya-h5/img/user-active.png'
      }]
    }
  },
  mounted() {
    this.index = this.active || 0 ;
    console.log(this.$router.currentRoute.name)
  },
}
</script>
<style lang="less">
  .van-tabbar-item__icon img{
     24px;
    height: 24px !important;
  }
</style>

接下来我们看首页的写法

<template>
  <div class="plr-15 pt-10">
    <!-- 轮播图 -->
    <div class="mb-10">
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <!-- <router-link :to="item.url">
            <img :src="item.image" width="100%" alt="">
          </router-link>-->
          <a :href="item.url">
            <img :src="item.image" width="100%" alt />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 -->
    <!-- banner -->
    <div class="flex flex-jus">
      <div v-for="item in ad" :key="item.id" class="banner2">
        <!-- <router-link :to="item.url">
          <img :src="item.image" width="100%" alt="">
        </router-link>-->
        <a :href="item.url">
          <img :src="item.image" width="100%" alt />
        </a>
      </div>
      <!-- <div class="banner2">
        <router-link to="/goods/index">
          <img src="/img/banner2-02.png" width="100%" alt="">
        </router-link>
      </div>-->
    </div>
    <!-- banner -->
    <!-- 菜单 -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item v-for="item in tool" :icon="item.image" :text="item.title" :to="{ name: 'tool_detail', params: { id: item.id }}" />
    </van-grid>
    <!-- 菜单 -->

    <!-- 升级课程 -->
    <div class="flex flex-wrap flex-jus mb-10">
      <div v-for="(item,index) in upgradeInfo" :key="index" class="course-item">
        <router-link :to="{name:'upgrade_detail',query:{id:item.id}}">
          <img v-lazy="item.image" width="100%" alt />
        </router-link>
      </div>
    </div>


    <!-- 升级课程 -->


    <!-- 课程推荐 -->
    <div class="flex flex-wrap flex-jus mb-10">
      <div class="course-item">
        <router-link to="/video">
          <img v-lazy="tool_parameter.HOME_SOURSE_IMAGE" width="100%" alt />
        </router-link>
      </div>
      <div class="course-item">
        <router-link to="/subscribe_list">
          <img v-lazy="tool_parameter.HOME_BOOKING_IMAGE" width="100%" alt />
        </router-link>
      </div>
      <div class="course-item">
        <router-link to="/article_list">
          <img v-lazy="tool_parameter.HOME_ARTICLE_IMAGE" width="100%" alt />
        </router-link>
      </div>
      <div class="course-item">
        <router-link to="/goods/index">
          <img v-lazy="tool_parameter.HOME_OFFSOURSE_IMAGE" width="100%" alt />
        </router-link>
      </div>
    </div>
    <!-- 课程推荐 -->
    <!-- 视频列表 -->
    <h2 class="fz-16 c3 mb-10 flex flex-jus flex-align-center">
      <div>直播课程</div>
      <router-link :to="{name:'live_list'}">
        <span class="fz-11 c9">查看跟多</span>
        <van-icon name="arrow" size="11" color="#999" />
      </router-link>
      </rou>
    </h2>
    <!-- <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="(item ,index) in liveList" :key="index" :to="{name:'live_list',query:{id:item.id}}">
        <div class="live-item">
          <div>{{ item.name }}</div>
        </div>
      </van-grid-item>
    </van-grid> -->
    <div class="video-list mb-10">
      <div class="video-item" v-for="(item,index) in liveList" :key="index">
        <router-link :to="{name:'live_detail',query:{id:item.id}}">
          <div class="video-img">
            <img :src="item.image" width="100%" alt />
          </div>
        </router-link>
      </div>
    </div>
    <!-- 视频列表 -->

    <!-- 视频列表 -->
    <h2 class="fz-16 c3 mb-10">热门课程</h2>
    <div class="video-list mb-10">
      <div class="video-item" v-for="(item,index) in CourseHot" :key="index">
        <router-link :to="{ name: 'video_detail', query: { id: item.id }}">
          <div class="video-img">
            <img :src="item.image" width="100%" alt />
            <div class="sets">更新至{{item.period}}集</div>
          </div>
          <div class="fz-14 c3 text-hide">{{item.name}}</div>
          <div class="fz-14 text-price">¥{{item.price}}</div>
        </router-link>
      </div>
    </div>
    <!-- 视频列表 -->

    <!-- banner3 -->
    <div class="mb-10">
      <router-link :to="{name:'experience',params:{id:1}}">
        <img v-lazy="tool_parameter.HOME_EXPERIENCE_IMAGE" width="100%" alt />
      </router-link>
    </div>
    <div class="mb-10">
      <router-link to="/branch">
        <img v-lazy="tool_parameter.HOME_BRANCH_IMAGE" width="100%" alt />
      </router-link>
    </div>
    <div v-if="ad_foot.length" class="mb-10">
      <router-link to="/tutor/index">
        <img v-lazy="ad_foot[0].image" width="100%" alt />
      </router-link>
    </div>
    <div v-if="ad_foot.length" class="mb-10" style="margin-bottom:2.666667rem;">
      <router-link to="/goods/index2">
        <img v-lazy="ad_foot[1].image" width="100%" alt />
      </router-link>
    </div>
    <!-- banner3 -->
    <!-- banner -->
    <!-- <div v-if="ad_foot.length" class="flex flex-jus" style="margin-bottom:2.666667rem;">
      <div v-for="(item,index) in ad_foot" v-if="index !=0" :key="item.id" class="banner2">
        <a :href="item.url">
          <img :src="item.image" width="100%" alt="">
        </a>
      </div>
    </div>-->
    <!-- banner -->
    <!-- 联系我们 -->
    <div class="contact-us">
      <div class="logo">
        <img src="img/logo.png" alt />
      </div>
      <div v-html="tool_parameter.HOME_BOTTOM_TEXT"></div>
      <!-- <p>欢迎您的加入！</p>
      <p>香港皇家优雅女子学堂提供的不仅是一个课程，也是一种优雅的生活方式更是一个精神的殿堂！</p>
      <p>联系方式：020-38868921 · 020-38847236</p>
      <p>中国总部：广州市天河区体育东路108号创展中心</p>
      <p>（万凌汇旁）西座三楼</p>-->
    </div>
    <!-- 联系我们 -->
  </div>
</template>
<script>
  import wx from "weixin-js-sdk";
  export default {
    data() {
      return {
        active: 1,
        images: [
          "../assets/img/index-banner-01.png",
          "../assets/img/index-banner-01.png"
        ],
        ad: "",
        ad_foot: [],
        banner: "",
        tool: "",
        tool_parameter: "",
        CourseHot: [],
        liveList: [],
        upgradeInfo: []
      };
    },
    created() {
      this.activity_id = this.$route.query.activity_id;
      this.share_id = this.$route.query.share_id;
      this.getContactImg();
      if (this.$route.query.type) {
        this.jumpPage();
      } else {
        this.checkLogin();
      }
      this.getSDK();
      this.getLive();
      this.getUpgradeInfo();
    },
    methods: {
      async getUpgradeInfo() {
        let {
          code,
          data,
          message
        } = await window.axios.get("/home/upgrade-info");
        if (code == 0) {
          window.console.log(data);
          this.upgradeInfo = data;
        } else {
          window.console.error(message);
        }
      },
      async getLive() {
        let {
          code,
          data,
          message
        } = await window.axios.get("/home/live");
        if (code == 0) {
          // window.console.log(data);
          this.liveList = data;
        } else {
          window.console.error(message);
        }
      },
      async getContactImg() {
        let {
          code,
          data,
          message
        } = await window.axios.get("/config/detail", {
          params: {
            key: "CUSTOMER_CONTACT"
          }
        });
        if (code == 0) {
          this.$store.dispatch("setContact", data.value);
        } else {
          window.console.error(message);
        }
      },
      // 根据type跳转到不同的页面
      jumpPage() {
        let type = this.$route.query.type;
        switch (type) {
          case "1":
            this.$router.push({
              name: "article",
              query: {
                id: this.$route.query.id,
                share_id: this.$route.query.share_id
              }
            });
            break;
          case "2":
            this.$router.push({
              name: "video_detail",
              query: {
                id: this.$route.query.id,
                share_id: this.$route.query.share_id
              }
            });
            break;
          case "3":
            this.$router.push({
              name: "goods_detail",
              query: {
                id: this.$route.query.id,
                share_id: this.$route.query.share_id
              }
            });
            break;
          case "4":
            this.$router.push({
              name: "subscribe_detail",
              params: {
                id: this.$route.query.id
              }
            });
            break;
          case "5":
            this.$router.push({
              name: "live_detail",
              query: {
                id: this.$route.query.id,
                share_id: this.$route.query.share_id
              }
            });
            break;
          case "6":
            this.$router.push({
              name: "upgrade_detail",
              query: {
                id: this.$route.query.id,
                share_id: this.$route.query.share_id
              }
            });
            break;
          default:
            this.checkLogin();
            break;
        }
      },
      async login() {
        let {
          code,
          data,
          message
        } = await window.axios.get("/user/login?id=1");
        if (code == 0) {
          this.getData();
          this.getCourseHot();
          data = JSON.stringify(data);
          localStorage.setItem("userinfo", data);
        }
      },
      async checkLogin() {
        this.$toast.loading({
          message: "加载中..."
        });
        let {
          data,
          code
        } = await window.axios.get("/user");
        this.$toast.clear();
        if (code == 0) {
          data = JSON.stringify(data);
          localStorage.setItem("userinfo", data);
          this.getData();
          this.getCourseHot();
        } else if (code == 401) {
          this.login();
          // let href = encodeURIComponent(window.location.href);
          // window.location.href =
          //   "http://youya.chuncom.com/user/authorization?url=" + href;
        }
      },
      async getSDK() {
        // alert(location.href)
        let href = encodeURIComponent(window.location.href);
        let {
          data,
          code,
          message
        } = await window.axios.get(
          "/config/jsjdk?url=" + href
        );
        if (code == 0) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: Number(data.timestamp), // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
              "chooseWXPay",
              "onMenuShareTimeline",
              "onMenuShareAppMessage", //1.0分享到朋友圈
              "updateAppMessageShareData", //1.4 分享到朋友
              "updateTimelineShareData",
              "openAddress"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        } else {
          // $weui.topTips(message, 3000);
        }
      },
      async getData() {
        this.$toast.loading({
          message: "加载中..."
        });
        let {
          code,
          data,
          message
        } = await window.axios.get("/home");
        if (code == 0) {
          this.$toast.clear();
          this.ad = data.ad;
          this.banner = data.banner;
          this.tool = data.tool;
          this.tool_parameter = data.tool_parameter;
          this.ad_foot = data.ad_foot;
        } else {
          this.$toast.fail(message);
        }
      },
      async getCourseHot() {
        let {
          code,
          data,
          message
        } = await window.axios.get("/home/course-hot");
        if (code == 0) {
          this.CourseHot = data;
        } else {
          this.$toast.fail(message);
        }
      }
    }
  };
</script>
<style lang="less">
  .van-uploader__input {
    right: 0;
    left: -40vw !important;
     60vw !important;
  }

  .van-icon__image {
     45px !important;
    height: 45px !important;
  }

  .van-grid-item__text {
    color: #999 !important;
  }

  .course-item {
    margin-bottom: 10px;
     168px;

    img {
       100%;
      vertical-align: bottom;
    }
  }

  .banner2 {
     168px;

    img {
       100%;
      vertical-align: bottom;
    }
  }

  .video-list {
     100%;
    overflow-x: scroll;
    white-space: nowrap;

    .video-item {
      display: inline-block;
      margin-right: 10px;
       168px;

      .video-img {
        position: relative;
        margin-bottom: 5px;

        .sets {
          position: absolute;
          right: 7px;
          bottom: 2px;
          font-size: 11px;
          color: #fff;
        }
      }
    }
  }

  .contact-us {
    position: relative;
    border-top: 4px dotted #eee;
    border-bottom: 4px dotted #eee;
    padding: 46px 0 17px;

    .logo {
      position: absolute;
      background-color: #fff;
      padding: 0 24px;
      left: 50%;
      top: 0;
      transform: translate(-50%, -60%);

      img {
         90px;
      }
    }

    p {
      color: #bcbcbc;
      font-size: 12px;
      text-align: center;
    }
  }

  .live-item {
     100%;
    height: 40px;
    line-height: 40px;
    background: rgba(255, 255, 255, 1);
    border-radius: 20px;
    border: 1px solid rgba(236, 236, 236, 1);
    color: #333;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

看着内容挺多的，然后其实用了van这个Ui组件之后，再加上异步的渲染，其实很简洁很高效
接下来看品牌故事页面

<template>
  <div>
    <div v-html="content"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      content:""
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getData(){
      this.$toast.loading({messages:"加载中..."})
      let {code,data,messages} = await axios.get(`/home/tool-detail?id=${this.$route.params.id}`);
      if(code==0){
          this.$toast.clear();
          this.content = data.detail;
          document.title = data.title
        }else{
          this.$toast.fail(messege)
        }
    },
    async getAbout(){
      this.$toast.loading({messages:"加载中..."})
      let {code,data,messages} = await axios.get(`/config/detail?key=ABOUT_US`);
      if(code==0){
        this.$toast.clear();
        this.content = data.value;
        document.title = data.tip;
      }else{
        this.$toast.fail(messege)
      }
    }
  },
  created() {
    if(this.$route.query.key){
      this.getAbout()
    }else{
      this.getData()
    }

  },
  mounted() {}
};
</script>
<style lang="less" scoped>
</style>

这个content不知道是哪里来的
打印结果，居然是H5的切片，有意思极了
接下来我们看

//UpgradeDetail
<template>
  <div>
    <img :src="detail.image" class="live-banner" alt />
    <!-- 课程信息 -->
    <div class="p-15 flex mb-10">
      <div class="course-info">
        <h2 class="fz-17 c3 mb-5">{{detail.name}}</h2>
        <!-- <div class="fz-12 c9 mb-5">全部{{catalogue.length || 0}}集</div> -->
        <div>
          <span class="fz-15 text-price">¥{{detail.bug_info.price}} </span>
          <span class="fz-12 c9 text-line">原价¥{{detail.bug_info.original_price}}</span>
        </div>
      </div>
      <div v-if="detail.is_share" @click="isShowPoster = true" class="course-share flex flex-align-start">
        <div class="flex flex-column flex-jus flex-align-center">
          <img src="@/assets/img/icon-wallet.png" alt />
          <div class="fz-11 c9">分享获得</div>
        </div>
        <div class="award-tips">{{parseInt(detail.share_amount||0)}}元奖励</div>
      </div>
    </div>
    <!-- 课程信息 -->
    <div class="bar-10"></div>
    <!-- 课程详情和目录 -->
    <van-tabs v-model="active" title-active-color="#8DB9DF" title-inactive-color="#999999" color="#8DB9DF">
      <van-tab title="课程详情">
        <div class="p-15" v-html="detail.detail"></div>
      </van-tab>
      <van-tab title disabled></van-tab>
    </van-tabs>
    <!-- 课程详情和目录 -->

    <!-- footer -->
    <div class="footer-bar plr-15 flex flex-align-center">
      <router-link to="/">
        <div class="back-home">
          <img src="@/assets/img/icon-home.png" alt />
          <div class="fz-11 c9">首页</div>
        </div>
      </router-link>
      <div v-if="detail.is_bug == 0" class="btn-youya" @click="buying">购买课程</div>
      <div v-else class="btn-youya disable">已购买</div>
    </div>
    <!-- footer -->
    <!-- 侧边客服购物车按钮 -->
    <div class="side-btn">
      <img @click="showContact" src="@/assets/img/btn-service.png" alt />
    </div>
    <van-popup v-model="isShowContact">
      <img style="70vw;" :src="this.$store.getters.getContact" alt />
    </van-popup>
    <!-- 侧边客服购物车按钮 -->

    <van-popup v-model="isShowPoster">
      <img :src="imgUrl || this.detail.share_info.share_qr" class="poster" alt />
    </van-popup>

  </div>
</template>

<script>
  import MCanvas from "mcanvas";
  // require styles
  import wx from "weixin-js-sdk";
  export default {
    props: {},
    data() {
      return {
        show: false,
        flag: false,
        isShowPoster: false,
        active: 0,
        isShowContact: false,
        showVideo: false,
        // 是否购买该教程
        isbought: false,
        catalogue: [],
        detail: "",
        userinfo: {},
        imgUrl: ""
      };
    },
    watch: {},
    computed: {},
    methods: {
      async add() {
        if (!this.$route.query.share_id) {
          return;
        }
        let {
          code
        } = await window.axios.post("/user/superior/add", {
          superior_id: this.$route.query.share_id
        });
        if (code == 0) {
          window.console.log("绑定成功");
        }
      },
      showContact() {
        this.isShowContact = true;
      },
      async getSDK() {
        // alert(location.href)
        let href = encodeURIComponent(window.location.href);
        let {
          data,
          code,
          message
        } = await window.axios.get(
          "/config/jsjdk?url=" + href
        );
        if (code == 0) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: Number(data.timestamp), // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
              "onMenuShareTimeline",
              "onMenuShareAppMessage", //1.0分享到朋友圈
              "updateAppMessageShareData", //1.4 分享到朋友
              "updateTimelineShareData"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
        } else {
          this.$toast(message);
        }
      },
      wxShare() {
        wx.ready(() => {
          let shareData = {
            title: this.detail.share_title,
            desc: this.detail.share_subtitle, //这里请特别注意是要去除html
            link: this.detail.share_info.share_url,
            imgUrl: this.detail.share_image ||
              "http://youya.chuncom.com/youya-h5/img/logo.png"
          };
          if (wx.onMenuShareAppMessage) {
            //微信文档中提到这两个接口即将弃用，故判断
            wx.onMenuShareAppMessage(shareData); //1.0 分享到朋友
            wx.onMenuShareTimeline(shareData); //1.0分享到朋友圈
          } else {
            wx.updateAppMessageShareData(shareData); //1.4 分享到朋友
            wx.updateTimelineShareData(shareData); //1.4分享到朋友圈
          }
          wx.error(function(res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            // alert("errorMSG:" + res)
            window.console.log("errorMSG:" + res);
          });
        });
      },
      // 购买事件
      async buying() {
        let {
          code,
          data,
          message
        } = await window.axios.get("/user");
        if (code == 0) {
          this.userInfo = data;
          if (data.is_bind == 0) {
            this.$dialog
              .confirm({
                title: "提示",
                message: "您还未绑定手机号，是否前往绑定？"
              })
              .then(() => {
                this.$router.push({
                  name: "binding_information"
                });
              })
              .catch(e => {
                window.console.log(e);
              });
            return;
          } else {
            this.$router.push({
              name: "upgrade_create",
              query: {
                id: this.$route.query.id,
                share_id: this.$route.query.share_id || ""
              }
            });
          }
        } else if (code == 401) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "您还未授权登录，无法进行购买，是否前往授权？"
            })
            .then(() => {
              window.location.href = `http://youya.chuncom.com/user/authorization?url=${encodeURIComponent(
              window.location.href
            )}`;
            })
            .catch(e => {
              window.console.log(e);
            });
        }
      },
      async getData() {
        this.$toast.loading({
          message: "加载中..."
        });
        let {
          code,
          data,
          message
        } = await window.axios.get(
          "/user/upgrade/info", {
            params: {
              info_id: this.$route.query.id
            }
          }
        );
        if (code == 0) {
          this.$toast.clear();
          this.detail = data;
          this.compoundImg();
          this.wxShare();
        } else {
          this.$toast.fail(message);
          // this.$router.push({ path: "/" });
        }
      },
      async compoundImg() {
        let {
          poster,
          image,
          share_info,
          name
        } = this.detail;
        // window.console.log(poster, image, share_info);
        let mc = new MCanvas({
           750,
          height: 1334,
          backgroundColor: "white"
        });
        // 海报背景图 this.list[this.active].image ../img/poster-psd.jpg
        mc.background(poster, {
            left: 0,
            top: 0,
            color: "#000000",
            type: "crop"
          })
          // 模板背景图连接
          // .add("../img/poster-bg.pn
          // hg",{
          //     610,
          //     height:642,
          //     pos:{
          //         x:70,
          //         y:160,
          //         scale:1
          //     },
          // })
          // 二维码连接 this.createShareImage.share_qr ../img/erweima.png
          .add(share_info.share_qr, {
             126,
            height: 126,
            pos: {
              x: 110,
              y: 635,
              scale: 1
            }
          })
          // 产品图连接 this.detail.image ../img/banner2-01.png
          .add(image, {
             570,
            height: 321,
            pos: {
              x: 90,
              y: 180,
              scale: 1
            }
          })
          .add("/youya-h5/img/logo.png", {
             162,
            height: 168,
            pos: {
              x: 487,
              y: 620,
              scale: 1
            }
          })
          // text 添加文字数据基础函数；
          .text(name, {
             530,
            align: "left",
            normalStyle: {
              font: `30px Microsoft YaHei,sans-serif`,
              lineHeight: 32
            },
            pos: {
              x: 110,
              y: 525
            }
          })
          // text 添加文字数据基础函数；
          .text("加入学习", {
             96,
            align: "left",
            normalStyle: {
              font: `24px Microsoft YaHei,sans-serif`,
              lineHeight: 28,
              color: "#999"
            },
            pos: {
              x: 254,
              y: 660
            }
          })
          // text 添加文字数据基础函数；
          .text("长按识别二维码", {
             168,
            align: "left",
            normalStyle: {
              font: `24px Microsoft YaHei,sans-serif`,
              lineHeight: 28,
              color: "#999"
            },
            pos: {
              x: 254,
              y: 708
            }
          })
          .draw(b64 => {
            window.console.log(b64);
            this.imgUrl = b64;
          });
      }
    },
    created() {
      this.add();
      this.getData();
      this.getSDK();
    },
    mounted() {}
  };
</script>
<style lang="less">
  .live-banner {
     100%;
  }

  .course-info {
    flex: 1;
  }

  .course-share {
    position: relative;
     84px;
    padding-top: 10px;

    img {
       24px;
      height: 24px;
    }

    .award-tips {
      position: absolute;
      top: 0;
      right: -5px;
      padding: 2px 4px;
      font-size: 10px;
      color: #fff;
      background: linear-gradient(141deg,
          rgba(252, 186, 133, 1) 0%,
          rgba(255, 169, 117, 1) 100%);
      border-radius: 11px 11px 11px 0;
    }
  }

  .footer-bar {
    box-shadow: 0px 0px 5px 0px rgba(238, 238, 238, 1);
  }

  .btn-youya {
     260px;
    height: 40px;
    line-height: 40px;
    background: linear-gradient(143deg,
        rgba(157, 195, 230, 1) 0%,
        rgba(131, 179, 219, 1) 100%);
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    box-shadow: 1px 5px 6px rgba(131, 179, 219, 0.2);

    &.disable {
      background: #cccccc;
      box-shadow: none;
    }
  }

  .back-home {
     90px;
    text-align: center;

    img {
      display: inline-block;
       24px;
      height: 24px;
    }
  }

  .catalogue-list {
    padding: 15px;

    .catalogue-item {
      display: flex;
      margin-bottom: 15px;
      align-items: center;

      .thumb {
        position: relative;
         90px;
        height: 50px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 5px;

        .duration {
          position: absolute;
          right: 7px;
          bottom: 2px;
          font-size: 11px;
          color: #fff;
        }
      }

      .tilte {
        margin-left: 10px;
        flex: 1;
      }
    }
  }

  .side-btn {
    position: fixed;
    top: 60%;
    right: 5px;

    img {
       45px;
      height: 45px;
    }
  }

  .poster {
     80vw;
  }

  .xieyi-box {
    padding: 0 20px;
     310px;
    height: 395px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    box-sizing: border-box;

    .title {
      padding: 25px 0;
      font-size: 18px;
      color: #333;
      text-align: center;
    }

    .content-box {
      margin-bottom: 10px;
      height: 260px;
      overflow-y: scroll;
    }

    .btns {
      display: flex;
      justify-content: space-around;

      .btn {
         105px;
        height: 35px;
        line-height: 35px;
        background: linear-gradient(143deg,
            rgba(157, 195, 230, 1) 0%,
            rgba(131, 179, 219, 1) 100%);
        border-radius: 18px;
        text-align: center;
        font-size: 13px;
        color: #fff;

        &.disable {
          opacity: 0.5;
        }
      }

      .btn-o {
         105px;
        height: 35px;
        line-height: 35px;
        border-radius: 18px;
        border: 1px solid rgba(204, 204, 204, 1);
        text-align: center;
        font-size: 13px;
        color: #999999;
      }
    }
  }

  .checked {
    position: relative;
    margin-right: 10px;
     15px;
    height: 15px;
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 50%;

    &.on {
      border-color: #8db9df;
    }

    &.on::after {
      content: " ";
      position: absolute;
      left: 50%;
      top: 50%;
       10px;
      height: 10px;
      background-color: #8db9df;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>

后记东西太多了