列表渲染

src/app.config.js

     'pages/HuiQuanYi/index', // 荟权益
     'pages/HuiQuanYi/OwnersNews/index', // 荟权益-业主资讯
     'pages/HuiQuanYi/OwnersNews/NewsDetail/index', // 荟权益-业主资讯-详情
+    'pages/HuiQuanYi/Recommed/index', // 荟权益-一荐倾心
 
     'pages/HuiAiXin/index', // 荟爱心
     'pages/HuiAiXin/StarOwner/index', // 荟爱心-明星业主

src/app.js

               
               store.commit(
                 'user/EditUserInfo',
-                { name: 'SessionKey', value: res.data.data.person.sessionKey }
+                { name: 'SessionKey', value: res.data.data.extraInfo.sessionKey }
               )
               
               store.commit(

src/app.scss

       }
     }
   }
+
+  .MainLoading {
+    width: 100%;
+    height: 300px;
+    background: url('../src/assets/image/bars.svg') no-repeat center center;
+    background-size: 100px auto;
+  }
+  .NoData {
+    > image {
+      width: 53%;
+      margin: 172px auto 0;
+      display: block;
+    }
+    > text {
+      font-size: 28px;
+      color: #999;
+      line-height: 40px;
+      margin-top: 10px;
+      display: block;
+      text-align: center;
+    }
+  }
 }

src/assets/image/bars.svg

+<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#ccc">
+    <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="30" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="90" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+</svg>

src/components/Layout/Basic/index.vue

     <block v-if="user.PersonId">
       <slot v-bind:user="user"></slot>
     </block>
-    <Loading v-else />
+    <view class="MainLoading centerLabel" v-else></view>
   </block>
 </template>
 
     ...mapState({
       user: s => s.user.UserInfo || {}
     })
+  },
+  created () {
   }
 }
 </script>

src/pages/HuiAiXin/StarOwner/index.config.js

 export default {
-  navigationBarTitleText: '明星业主'
+  navigationBarTitleText: '旧衣飞行'
 }

src/pages/HuiAiXin/StarOwner/index.vue

   },
   computed: {
     ...mapIndexState({
-      MingXingYeZhuList: x => x.MingXingYeZhuList // 明星业主列表
+      MingXingYeZhuList: x => x.MingXingYeZhuList // 旧衣飞行列表
     })
   },
   components: {
       'EditUserInfo' // 编辑用户信息
     ]),
     ...mapIndexActions([
-      'GetMingXingYeZhuList' // 获取明星业主列表
+      'GetMingXingYeZhuList' // 获取旧衣飞行列表
     ]),
     ...mapIndexMutations([
-      'EmptyMingXingYeZhuList' // 清空明星业主列表
+      'EmptyMingXingYeZhuList' // 清空旧衣飞行列表
     ]),
     Init () { // 初始化
       this.PageData.pageNum = 1
       this.HasNextPage = true
-      this.EmptyMingXingYeZhuList() // 清空明星业主列表
+      this.EmptyMingXingYeZhuList() // 清空旧衣飞行列表
       this.PageList = []
       this.ToGetPageList() // 获取列表
     },
     ToGetPageList () { // 获取列表
-      this.GetMingXingYeZhuList({ queryData: { ...this.PageData, typeId: 2 } }).then((res) => { // 获取明星业主列表
+      this.GetMingXingYeZhuList({ queryData: { ...this.PageData, typeId: 5 } }).then((res) => { // 获取旧衣飞行列表
         this.PageList = [...this.MingXingYeZhuList]
         this.HasNextPage = res.data.data.current < res.data.data.pages
         this.DataLock = false

src/pages/HuiQuanYi/OwnersNews/NewsDetail/index.vue

       <!-- <towxml :nodes="nodes" /> -->
       <Markdown :value="(Info || {}).content" />
     </view>
+
+    <!-- 授权头像获取弹窗 -->
+    <GetUserIcon></GetUserIcon>
   </view>
 </template>
 
 <script>
+import GetUserIcon from '../../../../components/GetUserIcon/index'
 import { getCurrentInstance } from "@tarojs/taro"
 import { createNamespacedHelpers } from "vuex"
 const { mapActions: mapIndexActions } = createNamespacedHelpers("index")
       Info: null
     }
   },
+  components: {
+    GetUserIcon
+  },
   computed: {},
   created() {
     this.CurrnetId = getCurrentInstance().router.params.id

src/pages/HuiQuanYi/Recommed/index.config.js

+export default {
+  navigationBarTitleText: '一荐倾心计划'
+}

src/pages/HuiQuanYi/Recommed/index.vue

+<template>
+  <view class="page YiJianQingXin">
+    <view class="Form">
+      <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/yijianqingxinjihua.png"></image>
+      <view class="flex-h">
+        <text>姓名</text>
+        <view class="flex-item">
+          <input type="text" v-model="Name" placeholder="请输入" />
+        </view>
+      </view>
+      <view class="flex-h">
+        <text>性别</text>
+        <view class="flex-item">
+          <picker @change="SexChange" :range="SexList" range-key="name">
+            <view class="picker">{{SexName || '请选择'}}</view>
+          </picker>
+        </view>
+      </view>
+      <view class="flex-h">
+        <text>电话</text>
+        <view class="flex-item">
+          <input type="number" v-model="Phone" placeholder="请输入" />
+        </view>
+      </view>
+      <view class="flex-h" style="border-bottom: none;">
+        <text>备注</text>
+      </view>
+      <view class="textarea">
+        <textarea v-model="Remark" placeholder="请输入" @input="Remark = Remark.substring(0, 100)"></textarea>
+        <text>{{Remark.length}}/100</text>
+      </view>
+    </view>
+
+    <text @tap="ToPostRecommed">提交</text>
+  </view>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+export default {
+  name: 'YiJianQingXin',
+  data () {
+    return {
+      DataLock: false,
+      Name: '',
+      Sex: '',
+      Phone: '',
+      Remark: '',
+      SexName: '',
+      SexList: [
+        { name: '男', id: '1' },
+        { name: '女', id: '2' }
+      ]
+    }
+  },
+  computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
+  },
+  components: {
+  },
+  created () {
+    this.$authed(() => {
+      this.Init()
+    })
+  },
+  methods: {
+    ...mapUserActions([
+      'PostRecommed'
+    ]),
+    Init () { // 初始化
+    },
+    ToPostRecommed () {
+      if (this.DataLock) return
+      if (this.Name === '') {
+        wx.showToast({
+          title: '姓名不能为空',
+          icon: 'none',
+          duration: 2000
+        })
+        return
+      }
+      if (this.Sex === '') {
+        wx.showToast({
+          title: '性别不能为空',
+          icon: 'none',
+          duration: 2000
+        })
+        return
+      }
+      if (this.Phone === '') {
+        wx.showToast({
+          title: '电话不能为空',
+          icon: 'none',
+          duration: 2000
+        })
+        return
+      }
+      this.DataLock = true
+      this.PostRecommed({
+        data: { data: { name: this.Name, phone: this.Phone, sex: this.Sex, remark: this.Remark } }
+      }).then((res) => {
+        wx.showToast({
+          title: '推荐成功',
+          icon: 'none',
+          duration: 2000
+        })
+        this.DataLock = false
+      }).catch((res) => {
+        wx.showToast({
+          title: res.data.data.message,
+          icon: 'none',
+          duration: 2000
+        })
+        this.DataLock = false
+      })
+    },
+    SexChange (e) {
+      this.Sex = this.SexList[e.detail.value].id
+      this.SexName = this.SexList[e.detail.value].name
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/pages/HuiQuanYi/Recommed/page.scss

+.page.YiJianQingXin {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  overflow-y: scroll;
+  > .Form {
+    padding: 0 20px;
+    > image {
+      height: 50px;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+    > view.flex-h {
+      padding: 30px 0;
+      border-bottom: 2px solid #f5f5f5;
+      align-items: center;
+      > text {
+        font-size: 28px;
+        line-height: 40px;
+      }
+      > view {
+        > input {
+          width: 100%;
+          display: block;
+          border: none;
+          text-align: right;
+          width: 100%;
+          font-size: 28px;
+          color: #999;
+          line-height: 40px;
+        }
+        > picker {
+          text-align: right;
+          font-size: 28px;
+        }
+      }
+    }
+    > view.textarea {
+      border: 2px solid #f5f5f5;
+      box-sizing: border-box;
+      border-radius: 16px;
+      padding: 20px;
+      > textarea {
+        display: block;
+        font-size: 28px;
+        line-height: 40px;
+        width: 100%;
+      }
+      > text {
+        display: block;
+        font-size: 28px;
+        text-align: right;
+        color: #999;
+        line-height: 40px;
+      }
+    }
+  }
+  > text {
+    width: 620px;
+    font-size: 40px;
+    display: block;
+    font-weight: bold;
+    line-height: 100px;
+    border-radius: 100px;
+    background: #fddd39;
+    margin: 60px auto 0;
+    text-align: center;
+    box-shadow: 0 5px 10px 5px rgba(253, 221, 57, 0.3);
+  }
+}

src/pages/HuiShengHuo/ActivityList/ActivityDetail/JoinIn/index.vue

       if (this.DataLock) return
       this.DataLock = true
       this.PostActivityJoin({
-        urlData: { id: this.ActivityInfo.activityId },
+        urlData: { id: this.CurrnetId },
         data: { data: { enrollName: this.Name, enrollPhone: this.Phone, enrollNum: this.Num } }
       }).then((res) => {
         this.DataLock = false

src/pages/HuiShengHuo/ActivityList/ActivityDetail/index.vue

       <view class="flex-item" @tap="LinkTo('../../index')">
         <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huishenghuo.png"></image>
       </view>
-      <view class="flex-item">
+      <view class="flex-item" @tap="ToShare">
         <image class="centerLabel" mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/fenxiang.png"></image>
       </view>
+      <button open-type="share" class="ShareBottomBtn" :class="{'active': IsEnroll}">分享</button>
       <image mode="heightFix" v-if="IsEnroll" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/lijibaomingbtn.png" @tap="ToJoin"></image>
       <button open-type="getPhoneNumber" class="GetPhoneBottomBtn" v-if="!DataLock && ShowGetPhoneBtn && IsEnroll" @getphonenumber="GetPhoneNumber">授权手机号</button>
     </view>
 
+    <!-- 授权头像获取弹窗 -->
+    <GetUserIcon></GetUserIcon>
+
   </view>
 </template>
 
 <script>
+import GetUserIcon from '../../../../components/GetUserIcon/index'
 import { getCurrentInstance } from '@tarojs/taro'
 import { createNamespacedHelpers } from 'vuex'
 const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
     })
   },
   components: {
+    GetUserIcon
   },
   onShareAppMessage () {
     return {
     }
   },
   created () {
-    wx.showShareMenu({
-      withShareTicket: true,
-      menus: ['shareAppMessage', 'shareTimeline']
-    })
     this.CurrnetId = getCurrentInstance().router.params.id
     this.$authed(() => {
       this.Init()
           this.VoteList = this.ActivityInfo.voteItemList.slice(0)
         }
         this.IsVote = this.ActivityInfo.isVote
-        wx.ShareAppMessage({
-          title: this.ActivityInfo.shareTitle,
-          imageUrl: this.ActivityInfo.shareImg
-        })
+      })
+    },
+    ToShare () {
+      wx.showShareMenu({
+        withShareTicket: true,
+        menus: ['shareAppMessage', 'shareTimeline']
       })
     },
     LinkTo (url) {

src/pages/HuiShengHuo/ActivityList/ActivityDetail/page.scss

     > image {
       height: 90px;
     }
+    > .ShareBottomBtn {
+      height: 90px;
+      width: 50%;
+      display: block;
+      position: absolute;
+      right: 0;
+      top: 0;
+      opacity: 0;
+      &.active {
+        width: 188px;
+        right: 380px;
+      }
+    }
     > .GetPhoneBottomBtn {
       height: 90px;
       width: 380px;

src/pages/HuiShengHuo/ActivityList/page.scss

   > .flex-item {
     .ActivityList {
       background: #fff;
-      > .NoData {
-        > image {
-          width: 53%;
-          margin: 172px auto 0;
-          display: block;
-        }
-        > text {
-          font-size: 28px;
-          color: #999;
-          line-height: 40px;
-          margin-top: 10px;
-          display: block;
-          text-align: center;
-        }
-      }
       > .List {
         position: relative;
         overflow: hidden;

src/pages/HuiShengHuo/PhotoList/index.vue

       this.GetPhotoList({ queryData: { ...this.PageData } }).then((res) => { // 获取照片墙列表
         let Arr = []
         this.PhotoList.map((item) => {
-          let Year = new Date(item.createDate).getFullYear()
-          let Month = new Date(item.createDate).getMonth() + 1
-          Month = Month > 9 ? Month : `0${Month}`
-          if (Arr.length && `${Year}-${Month}` === Arr[Arr.length - 1].Month) {
+          if (Arr.length && item.typeId === Arr[Arr.length - 1].Month) {
             Arr[Arr.length - 1].List.push({ ...item })
           } else {
-            Arr.push({ Month: `${Year}-${Month}`, List: [{ ...item} ] })
+            Arr.push({ Month: item.typeId, List: [{ ...item} ] })
           }
         })
         this.PageList = Arr

src/pages/HuiShengHuo/index.vue

       }).catch(() => {
         this.CheckRequestNum(3) // 判断请求接口个数
       })
-      this.GetActivityList({ queryData: { pageNum: 1, pageSize: 10, typeId: 2 } }).then(() => { // 获取活动列表
+      this.GetActivityList({ queryData: { pageNum: 1, pageSize: 10, toIndex: true } }).then(() => { // 获取活动列表
         this.PageActivityList = [...this.ActivityList]
         this.CheckRequestNum(3) // 判断请求接口个数
       }).catch(() => {

src/pages/WoDe/MyActivityList/index.vue

           <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodehuodong.png"></image>
         </view>
 
+        <view class="NoData" v-show="NoData">
+          <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/nodata.png"></image>
+          <text>暂无内容</text>
+        </view>
+
         <!-- 列表 -->
-        <view class="List" v-if="UserActivityList.length">
-          <navigator v-for="(item, index) in UserActivityList" :key="index" url="../../HuiShengHuo/ActivityList/ActivityDetail/index" hover-class="other-navigator-hover" class="Item flex-h">
+        <view class="List" v-if="PageList.length">
+          <navigator v-for="(item, index) in PageList" :key="index" :url="`../../HuiShengHuo/ActivityList/ActivityDetail/index?id=${item.activityId}`" hover-class="other-navigator-hover" class="Item flex-h">
             <view class="flex-item">
-              <text>活动标题</text>
-              <text>已报名123人</text>
-              <text>已结束</text>
+              <text>{{item.name}}</text>
+              <text>已报名{{item.enrollNum}}人</text>
+              <text v-if="new Date(item.enrollEnd).getTime() <= Date.now()">已结束</text>
             </view>
             <view class="Img">
               <view>
-                <image mode="aspectFill" class="centerLabel" :src="ToolClass.DemoImg()"></image>
+                <image mode="aspectFill" class="centerLabel" :src="item.thumb"></image>
               </view>
             </view>
           </navigator>
 <script>
 import ScrollY from '../../../components/ScrollY/index'
 import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: 'WoDeHuoDong',
   data () {
     return {
+      NoData: false,
       PageData: {
         pageNum: 1,
         pageSize: 15
       },
+      PageList: [],
       HasNextPage: true,
       IsRefreshing: false,
       DataLock: false
     }
   },
   computed: {
-    ...mapIndexState({
-      UserActivityList: x => x.UserActivityList // 我的活动列表
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
     })
   },
   components: {
     this.Init() // 初始化
   },
   methods: {
-    ...mapIndexActions([
+    ...mapUserActions([
       'GetUserActivityList' // 获取我的活动列表
     ]),
-    ...mapIndexMutations([
-      'EmptyUserActivityList' // 清空我的活动列表
-    ]),
     Init () { // 初始化
       this.PageData.pageNum = 1
       this.HasNextPage = true
-      this.EmptyUserActivityList() // 清空我的活动列表
+      this.PageList = [] // 清空我的活动列表
       this.ToGetPageList() // 获取列表
     },
     ToGetPageList () { // 获取列表
-      this.GetUserActivityList({ queryData: { accountId: 5, ...this.PageData } }).then((res) => { // 获取我的活动列表
+      this.GetUserActivityList({
+        urlData: { personId: this.UserInfo.PersonId },
+        queryData: { ...this.PageData }
+      }).then((res) => { // 获取我的活动列表
+        this.PageList = [...res.data.data.records]
+        this.NoData = !this.PageList.length
         this.HasNextPage = res.data.data.current < res.data.data.pages
         this.DataLock = false
         this.IsRefreshing = false

src/store/user/index.js

     }
   },
   actions: {
+    GetUserActivityList (context, payload) { // 获取我的活动列表
+      return new Promise((resolve, reject) => {
+        ToolClass.WxRequest({
+          url: Api.GetUserActivityList.url,
+          method: Api.GetUserActivityList.method,
+          ...payload,
+          success (res) {
+            resolve(res)
+          },
+          error (res) {
+            reject(res)
+          }
+        })
+      })
+    },
+    PostRecommed (context, payload) { // 推荐客户
+      return new Promise((resolve, reject) => {
+        ToolClass.WxRequest({
+          url: Api.PostRecommed.url,
+          method: Api.PostRecommed.method,
+          ...payload,
+          success (res) {
+            resolve(res)
+          },
+          error (res) {
+            reject(res)
+          }
+        })
+      })
+    },
     PostActivityJoin (context, payload) { // 活动报名
       payload = { ...payload, IsSigIn: true }
       return new Promise((resolve, reject) => {

src/util/Api/index.js

 const prefix = process.env.NODE_ENV === 'production' ? '' : ''
 
 const Api = {
+  PostRecommed: { // 推荐客户
+    method: 'post',
+    url: `${prefix}/recommender`
+  },
   GetNewsDetail: { // 获取资讯详情
     method: 'get',
     url: `${prefix}/news/:id`
   },
   GetUserActivityList: { // 获取我的活动列表
     method: 'get',
-    url: `${prefix}/activity`
+    url: `${prefix}/person/:personId/activity`
   }
 }
 

src/util/PublicMethod/index.js

 import qs from 'qs'
 const ToolClass = {
-  DemoImg () {
-    return 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597250549302&di=7483208ccacdeb49188263423a9c8316&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D3363001160%2C1163944807%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D830'
-  },
   DateFormat (timestamp) { // 格式化时间
     if (timestamp) {
       let YY = new Date(timestamp).getFullYear()