warm_man/pages/Index/components/HomePage/index.vue

<template>
  <view class="wallpaper-body">
    <view class="head-background">
      <image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/>
    </view>
    <!--  轮播开始-->
    <u-row :custom-style="{padding:'0 26rpx'}">
      <u-col :span="12">
        <u-swiper
            @click="bannerClick"
            :list="indexBanner"
            height="300"
            radius="20"
        ></u-swiper>
      </u-col>
    </u-row>
    <!--  轮播结束-->
    <!--  最新资讯开始-->
    <u-cell-group :border="false">
      <u-cell
          :rightIconStyle="{
            fontSize:'28rpx'
          }"
          :center="true"
          :border="false"
          title="会员等级"
          value="查看更多"
          :clickable="false"
          :isLink="true"
          url="/pages/News/index"
      >
        <template v-slot:title>
          <view class="cell-container row">
            <view class="cell-title">
              最新资讯
            </view>
            <view class="cell-border"></view>
            <view class="cell-title-desc col">
              <u-notice-bar direction="column" custom-style="padding:0;" :text="newsLists" icon="" color="#333333" font-size="28" bg-color="transparent"></u-notice-bar>
            </view>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
    <!--  最新资讯结束-->
    <!--  五个按钮组开始-->
    <u-row :custom-style="{padding:'0 26rpx'}">
      <view class="index-five-button row" :style="{backgroundImage:'url('+staticImage.fiveBackground+')'}">

        <view class="index-five-col col" v-for="item in staticImage.indexButtonGroup" @click="fiveButtonClick(item)">
          <view class="button-img">
            <u-image :src="item.image" width="75" height="75" :lazy-load="true"  mode="heightFix"></u-image>
          </view>
          <view class="button-title">{{ item.title }}</view>
        </view>
      </view>
    </u-row>
    <!--  五个按钮组结束-->
    <!--  广告图开始-->
    <view class="index-ad-img" @click="navTo('/pages/Authentication/guide')">
      <u-image class="img" width="100%" height="160" :src="staticImage.wallpaperBgImage" radius="20" mode="aspectFill"/>
    </view>
    <view class="index-ad-img" v-if="tips">
      <view class="index-ad-desc row" style="justify-content: space-between;">
        <view class="label">
          <u-text text="温馨提示：" color="#AFB5BE" size="24"></u-text>
        </view>
        <view class="bar col" style="max-width:80%;">
          <u-notice-bar
              custom-style="padding:0;"
              speed="50"
              :text="tips"
              icon=""
              color="#AFB5BE" font-size="24" bg-color="transparent"></u-notice-bar>
        </view>
      </view>
    </view>
    <!--  广告图结束-->
    <!--  关于我们开始-->
    <u-cell-group :border="false" :custom-style="{
    marginTop:'48rpx'
    }">
      <u-cell
          :rightIconStyle="{
            fontSize:'28rpx'
          }"
          :center="true"
          :border="false"
          value="查看更多"
          :clickable="false"
          :isLink="true"
          @click="navTo('/pages/About/index')"
      >
        <template v-slot:title>
          <view class="cell-two-container row">
            <view class="cell-border"></view>
            <view class="cell-title">
              关于我们
            </view>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
    <u-row :custom-style="{padding:'0 26rpx'}">
      <u-col :span="12">
        <view class="about-us-content">
          {{aboutUsDesc}}
        </view>
      </u-col>
    </u-row>
    <!--关于我们结束-->
    <!--暖新行动开始-->
    <u-cell-group :border="false" :custom-style="{
    marginTop:'48rpx'
  }">
      <u-cell
          :rightIconStyle="{
            fontSize:'28rpx'
          }"
          :center="true"
          :border="false"
          value="查看更多"
          :clickable="false"
          :isLink="true"
          @click="activityMore"
      >
        <template v-slot:title>
          <view class="cell-two-container row">
            <view class="cell-border"></view>
            <view class="cell-title">
              暖新活动
            </view>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
    <u-row :custom-style="{padding:'0 26rpx',marginBottom:'16rpx'}" v-for="item in activity">
      <u-col :span="12">
        <view class="image-container" @click="navTo('/pages/Activity/index?id='+item.id)">
          <u-image :src="item.cover" :lazy-load="true" width="100%" height="180"></u-image>
          <view class="img-title">
            <u-text :lines="1" :text="item.title" size="28" color="#FFFFFF" class="img-title"></u-text>
          </view>
        </view>
      </u-col>
    </u-row>
    <!--  暖新行动结束-->
    <!--  暖新项目开始-->
    <u-cell-group :border="false" :custom-style="{
    marginTop:'48rpx'
  }">
      <u-cell
          :rightIconStyle="{
            fontSize:'28rpx'
          }"
          :center="true"
          :border="false"
          title="会员等级"
          value="查看更多"
          :clickable="false"
          :isLink="true"
          @click="projectMore"
      >
        <template v-slot:title>
          <view class="cell-two-container row">
            <view class="cell-border"></view>
            <view class="cell-title">
              暖新项目
            </view>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
    <u-row :custom-style="{padding:'0 26rpx',marginBottom:'16rpx'}" v-for="item in project">
      <u-col :span="12">
        <view class="image-container" @click="navTo('/pages/Project/index?id='+item.id)">
          <u-image :src="item.cover" :lazy-load="true" width="100%" height="180"></u-image>
          <view class="img-title">
            <u-text :lines="1" :text="item.title" size="28" color="#FFFFFF" class="img-title"></u-text>
          </view>
        </view>
      </u-col>
    </u-row>

    <!--  暖新项目结束-->
    <!--  最新兑换开始-->
    <u-cell-group :border="false" :custom-style="{
    marginTop:'48rpx'
  }">
      <u-cell
          :rightIconStyle="{
            fontSize:'28rpx'
          }"
          :center="true"
          :border="false"
          title="会员等级"
          value="查看更多"
          :clickable="false"
          :isLink="true"
          @click="shopMore"
      >
        <template v-slot:title>
          <view class="cell-two-container row">
            <view class="cell-border"></view>
            <view class="cell-title">
              最新兑换
            </view>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
    <view class="border-box" :style="{padding:'0 26rpx',position:'relative',backgroundColor:'#f5f5f6',zIndex:1}">
      <view class="shop-more"></view>
      <u-row gutter="20" :custom-style="{
      // background:'linear-gradient(180deg, rgba(245, 245, 246, .5) 30%, rgba(245, 245, 246, 1) 100%);',
      flexWrap:'wrap',
      paddingBottom:'20rpx',
      position:'relative',
      zIndex:'3',
      backgroundColor:'transparent'
    }">
        <u-col :span="6" v-for="(item,index) in goodsList" :custom-style="{marginBottom:'20rpx'}" @click="navTo('/pages/Goods/index?id='+item.id)">
          <MzCard
              :title="item.name"
              :ext="item.coin_number+'币'"
              :is-content="false"
              :cover="item.cover"
          >
            <template #title>
              <u-text :text="item.name" color="#020B18" size="28" line-height="40" :lines="2"></u-text>
            </template>
          </MzCard>
        </u-col>

      </u-row>
    </view>
  </view>
  <u-notify ref="uNotify" message="Hi uview-plus"></u-notify>
<!--  最新兑换结束-->
  <u-modal :show="modalShow" :content="modalContent" @confirm="modalShow = false"></u-modal>
  <uv-popup ref="notDone" round="20" :safeAreaInsetBottom="false">
    <view class="not-done-container" style="padding:0 100rpx;position: relative;">
      <view class="not-done-icon">
        <u-image mode="widthFix" height="400" width="400" :src="staticImage.popIcon"></u-image>
      </view>
      <view class="not-done-title" style="margin-bottom:74rpx;">
        <u-text :text="modalContent" align="center" color="#020B18" size="28"></u-text>
      </view>
      <view class="not-done-btn" style="margin-bottom:60rpx;">
        <u-button
            text="确定"
            color="#FF9545"
            shape="circle"
            custom-style="color:#020B18;font-size:36rpx;height:80rpx;max-width:320rpx;"
            @click="this.$refs.notDone.close();"
        ></u-button>
      </view>
    </view>
  </uv-popup>

</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import MzCard from "@/components/MzCard/index.vue";
import {banner, indexGoods} from "@/api";
import {newInfo, systemConfig, webConfig} from "@/api/other";
import {projectList} from "@/api/project";
import {activityList} from "@/api/activity";


export default {
  components:{
    MzCard
  },
  data: {
    modalShow:false,
    modalContent:'',
    title: '暖新人',
    loading: true,
    staticImage: {
      hiImage: imghost + '/index-user-title-hi.png',
      dogImage: imghost + '/index-user-title-dog.png',
      couponsImage: imghost + '/index-user-coupons-background.png',
      indexButtonGroup: [{
          image: imghost + '/index-five-1.png',
          url: '/pages/Authentication/index',
          title:'丰行侠认证',
          disabled:false
        },{
          image: imghost + '/index-five-3.png',
          url: '/pages/Line/index',
          title:'线索上传',
          disabled:false
        },{
        image: imghost + '/index-five-2.png',
        url: '/pages/Consultant/index',
        title:'顾问认证',
        disabled:false
      },{
          image: imghost + '/index-five-4.png',
          url: '/pages/ConsultantLib/index',
          title:'社区顾问库',
          disabled:false
        },{
          image: imghost + '/index-five-5.png',
          url: '/pages/Service/index',
          title:'暖新服务',
          disabled:false
        },
      ],
      wallpaperBgImage: imghost+'/fxx-tip1.png',
      bg: imghost + '/BG.png',
      fiveBackground: imghost + '/five-button-background.png',
      popIcon:imghost+ '/not-done-icon.png',
    },
    indexBanner: [],
    goodsList: [],
    user: {
      avatar: imghost + '/banner.png',
      nickname: '风',
      coupons: 221,
      id: 88685
    },
    isTop: false,
    pagePadding: 100,
    userInfo: {},
    userExtends: {},
    marginTop: 0,
    newsLists:['暖新人平台正式上线啦！','暖新人平台正式上线啦！'],
    aboutUsDesc:'',
    tips:'',
    activity:[],
    project:[],
  },
  onLoad() {

  },
  methods: {
    bannerClick(){
      this.navTo('/pages/Pages/plan');
    },
    getNotify(){
      this.modalContent = '暂未开启,敬请期待';
      this.modalShow = true;
    },
    fiveButtonClick(item){
      if(item.disabled){
        this.modalContent = '暂未开启,敬请期待';
        this.$refs.notDone.open('center');
      }else{
        if(!uni.getStorageSync('token')){
          uni.navigateTo({
            url: '/pages/Login/index'
          })
          return false;
        }
        if(item.title === '丰行侠认证'){
          if(this.userInfo.fxx.id){
            this.modalContent = '您已经是丰行侠了,不用再认证了';
            this.$refs.notDone.open('center');
            return false;

          }
        }
        if(item.title === '顾问认证'){
          if(this.userInfo.advisor.id){
            this.modalContent = '您已经是顾问了,不用再认证了';
            this.$refs.notDone.open('center');
            return false;

          }
        }
        this.navTo(item.url,true)
      }
    },
    shopMore(){
      uni.redirectTo({
        url:'/pages/Index/index?footCheck=shop&tabCheck=item'
      })
    },
    activityMore(){
      uni.redirectTo({
        url:'/pages/Index/index?footCheck=activity&tabCheck=activity'
      })
    },
    projectMore(){
      uni.redirectTo({
        url:'/pages/Index/index?footCheck=activity&tabCheck=project'
      })
    },
    navTo(url,token = false) {
      if(token){
        if(uni.getStorageSync('token')){
          uni.navigateTo({
            url: url
          })
        }else{
          uni.navigateTo({
            url: '/pages/Login/index'
          })
        }
      }else{
        uni.navigateTo({
          url: url
        })
      }
    },
    updateUserInfo() {
      if (this.userInfo) {
        this.user.id = this.userInfo.id
        this.user.nickname = this.userInfo.name
        this.user.avatar = this.userInfo.avatar
      }
      if (this.userExtends) {
        this.user.coupons = this.userExtends.coupon_count
      }
    },
    getBanner(){
      return banner({}).then(res => {
        this.indexBanner = res.data.banner;
      })
    },
    getGoods(){
      return indexGoods({
        page:1,
        limit:4
      }).then(res => {
        this.goodsList = res.data;
      })
    },
    getWebConfig(){
      webConfig({
        type:'about_us_title'
      }).then(res => {
        this.aboutUsDesc = res.data.about_us_title;
      });
      webConfig({
        type:'tip'
      }).then(res => {
        this.tips = res.data.tip;
      });

      return newInfo({}).then(res => {
        this.newsLists = res.data.title_list;
      })
    },
    openNotDone(){
      this.modalContent = '暂未开启,敬请期待';
      this.$refs.notDone.open('center');
    },
    getActivity(){
      activityList({page:1,limit:2}).then(res => {
        this.activity = res.data;
      });
    },
    getProject(){
      projectList({page:1,limit:2}).then(res => {
        this.project = res.data;
      });
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  created() {
    this.pagePadding = (api.navHeight().navPaddingTop +
        api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
      this.getBanner();
      this.getGoods();
      this.getWebConfig();
      this.getActivity()
      this.getProject()
  },
  updated() {

  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
        this.updateUserInfo();
      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
        this.updateUserInfo();
      }
    }
  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>