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

<template>
  <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
          :list="list1"
          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">
            暖新人平台正式上线啦！
          </view>
        </view>
      </template>
    </u-cell>
  </u-cell-group>
<!--  最新资讯结束-->
<!--  五个按钮组开始-->
  <u-row :custom-style="{padding:'0 26rpx'}">
    <view class="index-five-button row">
      <view class="index-five-col col" v-for="item in staticImage.indexButtonGroup" @click="navTo(item.url)">
        <view class="button-img">
          <image class="img" mode="heightFix" :src="item.image"/>
        </view>
        <view class="button-title">{{ item.title }}</view>
      </view>
    </view>
  </u-row>
<!--  五个按钮组结束-->
<!--  广告图开始-->
  <view class="index-ad-img">
    <image class="img" :src="staticImage.wallpaperBgImage" mode="aspectFill"/>
  </view>
  <view class="index-ad-img">
    <view class="index-ad-desc">
      温馨提示：请丰行侠在本月25日之前进行暖新币兑换哟！
    </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">
        欢迎来到新都区暖新人平台！打造新都人民共建共护之家，这里是摘要。
      </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"
    >
      <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'}">
    <u-col :span="12">
      <view class="image-container">
        <u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%" height="180"></u-image>
        <view class="img-title">
          <u--text :lines="1" text="社区活动 | 大丰街道大运会志愿活动报名啦！" size="28" color="#FFFFFF" class="img-title"></u--text>
        </view>
      </view>
    </u-col>
  </u-row>
  <u-row :custom-style="{padding:'0 26rpx'}">
    <u-col :span="12">
      <view class="image-container">
        <u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%" height="180"></u-image>
        <view class="img-title">
          <u--text :lines="1" text="社区活动 | 大丰街道大运会志愿活动报名啦！" 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"
    >
      <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'}">
    <u-col :span="12">
      <view class="image-container">
        <u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%" height="180"></u-image>
        <view class="img-title">
          <u--text :lines="1" text="社区活动 | 大丰街道大运会志愿活动报名啦！" size="28" color="#FFFFFF" class="img-title"></u--text>
        </view>
      </view>
    </u-col>
  </u-row>
  <u-row  :custom-style="{padding:'0 26rpx',marginBottom:'16rpx'}">
    <u-col :span="12">
      <view class="image-container">
        <u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true" width="100%" height="180"></u-image>
        <view class="img-title">
          <u--text :lines="1" text="社区活动 | 大丰街道大运会志愿活动报名啦！" 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"
    >
      <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'}">
    <u-row gutter="20" :custom-style="{
      background:'linear-gradient(180deg, rgba(245, 245, 246, .5) 30%, rgba(245, 245, 246, 1) 100%);',
      flexWrap:'wrap',
      marginBottom:'20rpx'
    }">
      <u-col :span="6" v-for="index of 4" :custom-style="{marginBottom:'20rpx'}">
        <MzCard
            :title="'九阳料理机 家用多功能榨汁机 婴儿辅食机'+index"
            ext="300币"
            :is-content="false"
        ></MzCard>
      </u-col>

    </u-row>
  </view>

<!--  最新兑换结束-->
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import MzCard from "@/components/MzCard/index.vue";


export default {
  components:{
    MzCard
  },
  data: {
    list1: [
      'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      'https://cdn.uviewui.com/uview/swiper/swiper2.png',
      'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    ],
    title: '暖新人',
    loading: true,
    staticImage: {
      hiImage: imghost + '/static/image/index-user-title-hi.png',
      dogImage: imghost + '/static/image/index-user-title-dog.png',
      couponsImage: imghost + '/static/image/index-user-coupons-background.png',
      indexButtonGroup: [{
          image: imghost + '/static/image/index-five-1.png',
          url: '/pages/Authentication/index',
          title:'丰行侠认证'
        },{
          image: imghost + '/static/image/index-five-2.png',
          url: '/pages/Index/index',
          title:'顾问认证'
        },{
          image: imghost + '/static/image/index-five-3.png',
          url: '/pages/Index/index',
          title:'线索上传'
        },{
          image: imghost + '/static/image/index-five-4.png',
          url: '/pages/Index/index',
          title:'社区顾问库'
        },{
          image: imghost + '/static/image/index-five-5.png',
          url: '/pages/Index/index',
          title:'暖新服务'
        },
      ],
      wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      bg: imghost + '/static/image/BG.png',
    },
    indexBanner: [
      {
        image: imghost + '/static/image/banner.png',
        url: '',
      }
    ],
    user: {
      avatar: imghost + '/static/image/banner.png',
      nickname: '清晨的风',
      coupons: 221,
      id: 88685
    },
    isTop: false,
    pagePadding: 100,
    userInfo: {},
    userExtends: {},
  },
  onLoad() {

  },
  methods: {
    userCouponsPage() {
      wx.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    navTo(url) {
      wx.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
      }
    }
  },
  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() {

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