hlm_pl_mall_h5/pages/member/index/Index.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="true"><view class="div container">
  <title-header />
    <view class="div top-wrapper">
        <view class="nav-bg">
            <image mode="aspectFit" src="../../../static/image/member/bg_wode_com.png" class="img nav-bg-img"></image>
        </view>
      <view class="div nav-item left-nav-item" @click="goSetting()">
        <image mode="aspectFit" src="../../../static/image/member/icon_setting_nor.png" class="img nav-icon">
      </view>
      <view class="div nav-item right-nav-item" @click="goNews()">
        <image mode="aspectFit" src="../../../static/image/member/icon_news_nor.png" class="img nav-icon">
        <text class="span" v-if="0"></text>
      </view>
      <view class="div top-info-wrapper">
        <view class="div avatar-wrapper" @click="goProfileInfo">
          <image mode="aspectFit"
            class="img avatar"
            v-bind:src="user.member_avatar+'?'+time"
            v-if="isOnline && user && user.member_avatar"
          />
        </view>
        <view
           class="p nickname"

          @click="goProfileInfo"
          >{{ nickname }}</view
        >
        <view class="p level_name_wrapper" >
			<view class='level_name'><image mode="aspectFit" src="../../../static/image/member/usertopicon.png" class="img levelname-icon">{{ getlevelname }}</view>
		</view>
      </view>
      <view class="div info-wrapper">
        <view class="div info-item" @click="goPredeposit">
          <view class="div item">预存款</view>
          <view class="div item price">￥{{ getAvailablePredeposit }}</view>
        </view>
        <view class="div info-item" @click="goScoreList">
          <view class="div item">积分</view>
          <view class="div item price">{{ getScore }}</view>
        </view>
      </view>
    </view>
    <flex-line class="order-header" :is-link="true" style="padding-top:2.5rem;margin-top:0;" @click.native="goOrder">
      <text class="span">我的订单</text>
      <text class="span" slot="right">查看全部订单</text>
    </flex-line>
    <view class="div order-wrapper">
      <index-order-item
        class="order-item"
        testAttr="/pages/member/order/OrderList"
        state="state_new"
        :src="require('../../../static/image/member/icon_pay_nor.png')"
        title="待付款"
        :orderNumber="user.order_nopay_count"
      >
      </index-order-item>
      <index-order-item
        class="order-item"
        testAttr="/pages/member/order/OrderList"
        state="state_pay"
        :src="require('../../../static/image/member/icon_goods_nor.png')"
        title="待发货"
        :orderNumber="user.order_noship_count"
      >
      </index-order-item>
      <index-order-item
        class="order-item"
        testAttr="/pages/member/order/OrderList"
        state="state_send"
        :src="require('../../../static/image/member/icon_consignee_nor.png')"
        title="待收货"
        :orderNumber="user.order_noreceipt_count"
      >
      </index-order-item>
      <index-order-item
        class="order-item"
        testAttr="/pages/member/order/OrderList"
        state="state_noeval"
        :src="require('../../../static/image/member/icon_prices_nor.png')"
        title="待评价"
        :orderNumber="user.order_noeval_count"
      >
      </index-order-item>
    </view>

    <flex-line class="order-header">
      <text class="span">常用工具</text>
    </flex-line>
    <view class="div manage-wrapper">
      <index-manage-item
        v-on:onclick="goAccount"
        :src="require('../../../static/image/member/icon_purse_pre.png')"
        title="我的钱包"
      >
      </index-manage-item>
      <index-manage-item
        v-on:onclick="goVrOrder"
        :src="require('../../../static/image/member/icon_order_pre.png')"
        title="虚拟订单"
      >
      </index-manage-item>
      <index-manage-item
        v-on:onclick="goReturn"
        :src="require('../../../static/image/member/icon_refund_pre.png')"
        title="退款管理"
      >
      </index-manage-item>
      <index-manage-item
        v-on:onclick="goFriendList"
        :src="require('../../../static/image/member/icon_friend_pre.png')"
        title="我的好友"
      >
      </index-manage-item>

      <index-manage-item
        v-if="config && config.instant_message_open == '1' && config.instant_message_gateway_url"
        v-on:onclick="goMemberChatList"
        :src="require('../../../static/image/member/icon_list_pre.png')"
        title="聊天列表"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goNavigate('/pages/member/auth/Auth')"
              :src="require('../../../static/image/member/icon_testimony_pre.png')"
              title="实名认证"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goFavourite()"
              :src="require('../../../static/image/member/icon_collect_pre.png')"
              title="我的收藏"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goNavigate('/pages/member/consult/ConsultList')"
              :src="require('../../../static/image/member/icon_consult_pre.png')"
              title="咨询管理"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goNavigate('/pages/member/inform/InformList')"
              :src="require('../../../static/image/member/icon_offence_pre.png')"
              title="举报管理"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goNavigate('/pages/member/complaint/ComplaintList')"
              :src="require('../../../static/image/member/icon_propose_pre.png')"
              title="投诉管理"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goInvoice"
              :src="require('../../../static/image/member/icon_invoice_pre.png')"
              title="发票管理"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goAddress"
              :src="require('../../../static/image/member/icon_address_pre.png')"
              title="收货地址"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goEvaluateList()"
              :src="require('../../../static/image/member/icon_judgea_pre.png')"
              title="我的评价"
      >
      </index-manage-item>

      <index-manage-item
              v-on:onclick="goArrivalnotice()"
              :src="require('../../../static/image/member/icon_notify_pre.png')"
              title="到货通知"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goBrowse()"
              :src="require('../../../static/image/member/icon_footprint_pre.png')"
              title="浏览记录"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="goMemberFeedback()"
              :src="require('../../../static/image/member/icon_feedback_pre.png')"
              title="反馈意见"
      >
      </index-manage-item>
    </view>

    <flex-line class="order-header">
      <text class="span">我的活动</text>
    </flex-line>
    <view class="div manage-wrapper">
      <index-manage-item
              v-on:onclick="goMarketmanagelog()"
              :src="require('../../../static/image/member/icon_exercise_pre.png')"
              title="活动记录"
      >
      </index-manage-item>
      <index-manage-item
              v-on:onclick="gBargain()"
              :src="require('../../../static/image/member/icon_bargain_pre.png')"
              title="砍价活动"
      >
      </index-manage-item>
      <index-manage-item
              v-if="config.points_isuse === '1' && config.points_signin_isuse === '1'"
              v-on:onclick="goNavigate('/pages/member/point/PointSignin')"
              :src="require('../../../static/image/member/icon_signin_pre.png')"
              title="我要签到"
      >
      </index-manage-item>
    </view>

    <view class="div bottom-wrapper" v-if="!user.store_id && config && config.store_joinin_open!=0">
	  <flex-line
        @click.native="goSellerJoinin"
        :is-link="true"
      >
        <image mode="aspectFit" class="img item-icon" src="../../../static/image/member/icon_shop_seller_nor.png" />
        <text class="span">商家入驻</text>
      </flex-line>
    </view>
    <view class="block-wrapper">
      <guess-like></guess-like>
    </view>
  </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import IndexOrderItem from './IndexOrderItem'
import IndexManageItem from './IndexManageItem'
import flexLine from '../../flexLine'
import GuessLike from '../../GuessLike'
import { mapState, mapActions , mapMutations} from 'vuex'
import { getMemberIndex } from '../../../api/member'
import { checkInviter } from '../../../api/memberInviter'
export default {
  name:'MemberIndex',
  data () {
    return {
      user: {},
      time: '',
      orderCount: {},
      isShow: true
    }
  },
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    IndexOrderItem,
    IndexManageItem,
    GuessLike
  },
  created: function () {
    this.time = new Date().getTime()
    this.fetchConfig({}).then(
      response => {
      },
      error => {
        uni.showToast({icon:'none',title: error.message})
      }
    )
    if (this.isOnline) {
      getMemberIndex().then(
        response => {
          if (response && response.result.member_info) {
            this.user = response.result.member_info
			// 更新用户信息缓存
			this.memberUpdate({info:response.result.member_info})
          }
        },
        error => {}
      )
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      isOnline: state => state.member.isOnline,
      config: state => state.config.config
    }),

    nickname () {
      let title = '登录/注册'
      if (this.isOnline) {
        if (
          this.user &&
          typeof this.user !== 'undefined' &&
          JSON.stringify(this.user) !== '{}'
        ) {
          title = this.user.member_nickname
        }
      }
      return title
    },
    getScore () {
      let score = '0'
      if (this.isOnline && this.user.member_points) {
        score = this.user.member_points
      }
      return score
    },
    // 预存款可用金额 通过store 进行获取
    getAvailablePredeposit () {
      let availablePredeposit = '0.00'
      if (this.isOnline && this.user.available_predeposit) {
        availablePredeposit = this.user.available_predeposit
      }
      return availablePredeposit
    },
    getlevelname () {
      let levelname  = ''
      if (this.isOnline && this.user.level_name) {
        levelname = this.user.level_name
      }
      return levelname
    }
  },
  methods:{
	  ...mapMutations({
	     memberUpdate: 'memberUpdate',
	  }),
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },

    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    showLogin () {
      uni.navigateTo({ url: '/pages/home/memberlogin/Login' })
    },
    goScoreList () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/point/PointList'+'?'+urlencode( { index: 0 } )})
      } else {
        this.showLogin()
      }
    },
    goOrder () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/order/OrderList'
        })
      } else {
        this.showLogin()
      }
    },
    goProfileInfo () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/profile/ProfileSet' })
      } else {
        this.showLogin()
      }
    },
    goSetting () {
      uni.navigateTo({ url: '/pages/member/setting/AccountSet' })
    },
    // 消息通知
    goNews () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/notice/NoticeList' })
      } else {
        this.showLogin()
      }
    },
    // 我的关注
    goFavourite () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/favorite/Favorite' })
      } else {
        this.showLogin()
      }
    },
    // 我的地址
    goAddress () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/address/AddressList' })
      } else {
        this.showLogin()
      }
    },
    // 我的退款
    goReturn () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/orderreturn/Orderreturn' })
      } else {
        this.showLogin()
      }
    },
    goAccount () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/account/Account' })
      } else {
        this.showLogin()
      }
    },
    goPredeposit () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/predeposit/PredepositList' })
      } else {
        this.showLogin()
      }
    },
    // 我的好友列表
    goFriendList () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/friend/FriendList' })
      } else {
        this.showLogin()
      }
    },
    // 商家入驻
    goSellerJoinin () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/sellerjoinin/Step1' })
      } else {
        this.showLogin()
      }
    },
    // 聊天列表
    goMemberChatList () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/chat/ChatList' })
      } else {
        this.showLogin()
      }
    },
    // 我的订单评价
    goEvaluateList () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/evaluate/EvaluateList' })
      } else {
        this.showLogin()
      }
    },
    // 发票管理
    goInvoice () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/invoice/InvoiceList' })
      } else {
        this.showLogin()
      }
    },
    // 跳转卖家管理中心
    goSellerInfo () {
      if (this.isOnline) {
        uni.navigateTo({ url: 'SellerIndex' })
      } else {
        this.showLogin()
      }
    },
    // 分销管理中心
    goMemberInviterManage () {
      if (this.isOnline) {
        checkInviter().then(res => {
          uni.navigateTo({ url: '/pages/member/inviter/InviterManage' })
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
      } else {
        this.showLogin()
      }
    },
    // 意见反馈
    goMemberFeedback () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/feedback/Feedback' })
      } else {
        this.showLogin()
      }
    },
    // 虚拟订单
    goVrOrder () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/vrorder/OrderList' })
      } else {
        this.showLogin()
      }
    },
    // 活动记录
    goMarketmanagelog () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/marketmanagelog/Marketmanagelog' })
      } else {
        this.showLogin()
      }
    },
    // 砍价活动
    gBargain () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/bargain/Bargainlist' })
      } else {
        this.showLogin()
      }
    },
    // 到货通知
    goArrivalnotice () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/arrivalnotice/Arrivalnotice' })
      } else {
        this.showLogin()
      }
    },
    // 浏览历史
    goBrowse () {
      if (this.isOnline) {
        uni.navigateTo({ url: '/pages/member/browse/BrowseList' })
      } else {
        this.showLogin()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background-color: #f0f2f5;
  .top-wrapper {
    position:relative;
    height: 11.5rem;
    .nav-bg{
        width: 100%;
        height: 11.5rem;
        position: absolute;
        overflow: hidden;
        .nav-bg-img{
            width: 100%;
            height: 14.3rem;
        }
    }
    .top-info-wrapper {
      flex: 1;
      width: 100%;
      text-align: center;
    }
  }
  .nav-item {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top:0.5rem;
    .span {
      width: 0.4rem;
      height: 0.4rem;
      background-color: #f0f2f5;
      border-radius: 50%;
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
    }
  }
  .left-nav-item {
    left: 0.5rem;
  }
  .right-nav-item {
    right: 0.5rem;
  }
  .nav-icon {
    width: 1.3rem;
    height: 1.3rem;
    text-align: center;
    color: #fff;
  }
  .avatar-wrapper {
    position:relative;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background-color: #fff;
    margin:0 auto;
    margin-top: 1rem;
    .avatar {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      position:absolute;
      top:.2rem;
      left:.2rem;
    }
  }
  .nickname {
    width: 100%;
    margin-top: 0.75rem;
    font-size: $subFontSize;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
  .level_name_wrapper{
    font-size: .6rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    border-radius: .2rem;
    border: 1px solid #fff;
    display: inline-block;
	padding: 0.1rem .2rem;
  }
  .level_name{
	display: flex;
	align-items: center;
  }
  .levelname-icon{
	width: 1rem;
	height: .6rem;
	padding-right: .2rem;
  }
  .info-wrapper {
    position: absolute;
    bottom:-2rem;
    left:1.5rem;
    right:1.5rem;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: stretch;
    background-color: #fff;
    border-radius: .4rem;
    box-shadow: 0px 4px 4px #f7f7f7;
    z-index: 2;
  }
  .info-item {
    flex: 1;
    text-align: center;
    font-size: $h2;
    color:$formInputColor;
    position: relative;
    &:first-child::after{content:'';position: absolute;top:.5rem;bottom:.5rem;right:0;border-right: 1px dashed #eee;}
    .item{padding-top:.5rem;}
    .price{color:$primaryColor;padding-bottom:.5rem;font-size: 1.1rem;}
  }
  .order-header {
    background-color: #fff;
    padding:0 $pageSpace;
    margin-top:$modelSpace;
  }

  .item-title {
    font-size: $subFontSize;
    color: $formInputColor;
    font-weight:700;
  }

  .order-subtitle {
    font-size: $fontSize;
    color: $descTextColor;
  }
  .order-wrapper {
    height: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    background-color: #fff;
  }
  .order-item {
    flex: 1;
  }
  .block-wrapper{
    margin-top:$modelSpace;
  }
  .bottom-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-top:$modelSpace;
    background: #fff;
    padding:0 $pageSpace;
    .item-icon{
      width:1.2rem;
      height:1.2rem;
      margin-right: .4rem;
    }
  }
  .manage-wrapper {
    background: #fff;
  }
}
</style>