wzj-boot/mini-app/src/components/mall/tab/mall-home.wpy

<style lang="less">


.header-image {
  width: 100%;
  height: 200px;
  z-index: -1;
  position: absolute;
  top: 0;

}

.user-banner {
  margin-top: 180px;
  border-top: 1px solid #F2F3F5;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  text-align: left;
  background-color: #eeeeee;
  height: 20px;
  width: 100%;
  z-index: 1;
}

.menu-desc {
  border: #cccccc 1px solid;
  border-radius: 20px;
  width: 250rpx;
  height: 60px;
  box-shadow: 4px 4px 10px #cccccc;
  background-image: url("https://img.yzcdn.cn/vant/cat.jpeg");
  padding: 15px;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.menu-desc-text {
  margin-top: 5px;
  font-size: 14px;
  color: coral;

}

.grid-item {
  background-color: #eeeeee;
}

.column-record-item {
  border: transparent 1px solid;
  border-radius: 20px;
  box-shadow: 4px 4px 10px #cccccc;

  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.column-record-item-text {
  font-size: 20px;

  margin: 10px;
  display: flex;
  flex-direction: column;
}


</style>
<template>

  <div>
    <image class="header-image" :src="imageDefine.HOME_TITLE_IMAGE" />
    <div class="user-banner" />

    <view style="margin: 10px;display: flex;flex-direction: column;">
      <van-row>
        <van-col offset="1" span="4">
          <van-image round width="80rpx" height="80rpx" :src="user.userInfo.avatar" />
        </van-col>
        <van-col offset="1" span="10">
          <div class="fxc" style="display: flex;flex-direction: column;">
            <span>{{user.userInfo.nickName}}</span>
            <span>{{user.company}}</span>
          </div>
        </van-col>
        <van-col offset="1" span="6">
          <van-button round type="info">查看会籍</van-button>
        </van-col>
      </van-row>


      <van-row style="margin-top: 20px;">
        <van-col offset="1" span="11">
          <div class="menu-desc fxc">
            <span>润德庄园</span>
            <span class="menu-desc-text">万亩有机生态园</span>
          </div>
        </van-col>
        <van-col offset="1" span="11">
          <div class="menu-desc fxc">
            <span>了解产品</span>
            <span class="menu-desc-text">新年有机新品</span>
          </div>
        </van-col>
      </van-row>


      <van-grid column-num="4" border="{{ false }}" style="margin-top: 15px;">
        <van-grid-item use-slot v-for=" (item, index) in navDefine.HOME_MENU_LIST">

          <van-image round width="120rpx" height="120rpx" :src="item.icon" />
          <span>{{item.name}} </span>
        </van-grid-item>
      </van-grid>


      <van-image width="100%" height="60px" :src="navDefine.HOME_BANNER.image" style="margin-top: 15px;" />

      <span v-if="columnRecord.length > 0" style="margin:15px 0;font-weight: bold;">热门专题</span>

      <div class="column-record-item" v-for="(item, index) in columnRecord">
        <van-image width="100%" height="60px" :src="item.image" />
        <div class="column-record-item-text">
          <span>{{item.title}} </span>
          <span style="font-size: 12px;font-weight: normal;">{{item.createTime}} </span>
        </div>

      </div>
    </view>

  </div>

</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import { mapActions, mapState } from '@wepy/x'

wepy.component({
  store,
  hooks: {},
  data: {
    columnRecord: [
      {
        title: '标题标题标题标题标题',
        createTime: '2000-11-11',
        image: 'https://www.xiao4r.com/xiao4rstatic/img/doctor.png'
      }
    ]

  },
  computed: {
    ...mapState({
      'imageDefine': state => state.imageDefine,
      'user': state => state.user,
      'navDefine': state => state.navDefine
    })
  },

  methods: {},

  ready() {

  }
})
</script>
<config>
{
navigationBarTitleText: ''
}
</config>