hlm_pl_mall_h5/pages/home/pointsgoods/IndexHeader.vue

<template>
<view class="div main-content">
    <view class="div head-wrap color-base-bg">
        <view class="div img-content" style="height: 134px;">
            <image mode="aspectFit" class="img" :src="pointbg" />
            <view class="div">
                <view class="div">
                    <view class="div"></view>
                </view>
                <view class="div">
                    <view class="div"></view>
                </view>
            </view>
        </view>
        <view class="div wrap" v-if="isOnline">
            <view class="div member-wrap">
                <view class="div headimg">
                    <view class="div img-content">
                        <image mode="aspectFit" class="img" :src="user.member_avatar" />
                    </view>
                </view>
                <view class="div text-content point">
                    <text class="span">{{user.member_points}}</text>
                </view>
                <view class="div text-content point-name">
                    <text class="span">积分</text>
                </view>
                <view class="div rule" @click="showPopup('shareVisible')">
                    <text class="span text-content iconfont iconwenhao">
                        <text class="span">&#xe674;</text>
                    </text>
                    <text class="span text-content font-size-tag">
                        <text class="span">兑换规则</text>
                    </text>
                </view>
            </view>
            <view class="div action-wrap">
                <view class="div view-content" @click="goScoreList">
                    积分明细
                    <text class="span text-content iconfont iconright">
                        <text class="span">&#xe650;</text>
                    </text>
                </view>
                <view class="div view-content split"></view>
                <view class="div view-content" @click="goOrder">
                    兑换记录
                    <text class="span text-content iconfont iconright">
                        <text class="span">&#xe650;</text>
                    </text>
                </view>
            </view>
        </view>
        <view class="div wrap no-login" v-else>
            <view class="div">
                <view class="div lineheight-clear">
                    <view class="div text-content font-size-toolbar login-btn" @click="showLogin">
                        <text class="span">立即登录</text>
                    </view>
                </view>
                <view class="div lineheight-clear">
                    <view class="div text-content font-size-tag">
                        <text class="span">登录后查看我的积分</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <uni-popup background-color="#fff" ref="shareVisible" type="bottom">
        <view class="div tips-layer">
            <view class="div head">
                <view class="div title">
                    积分说明
                </view>
                <view class="div iconfont iconclose" @click="hidePopup('shareVisible')">
                    <text class="span">&#xe65a;</text>
                </view>
            </view>
            <view class="div body">
                <view class="div detail">
                    <view class="div tip">
                        积分的获取
                    </view>
                    <view class="div font-size-base">
                        1、积分可在注册、签到、消费时获得。
                    </view>
                    <view class="div font-size-base">
                        2、在购买商品时可获得积分。
                    </view>
                    <view class="div tip">
                        积分的使用
                    </view>
                    <view class="div font-size-base">
                        1、积分可用于兑换积分中心的商品。
                    </view>
                    <view class="div font-size-base">
                        2、积分可在参与某些活动时使用。
                    </view>
                    <view class="div font-size-base">
                        3、积分不得转让，出售，不设有效期。
                    </view>
                    <view class="div tip">
                        积分的查询
                    </view>
                    <view class="div font-size-base">
                        1、积分可在会员中心中查询具体数额以及明细。
                    </view>
                </view>
            </view>
        </view>
    </uni-popup>

</view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState } from 'vuex'
import { getMemberIndex } from '../../../api/member'
import { env } from '../../../static/config'
export default {
  name: 'index',
  data () {
    return {
      user: {},
	  pointbg: env.SITE_URL+'/uploads/home/h5/home/point_bg.png'
    }
  },
  components: {
  },
  created: function () {
    if (this.isOnline) {
      getMemberIndex().then(
        response => {
          if (response && response.result.member_info) {
            this.user = response.result.member_info
          }
        },
        error => {}
      )
    }
  },
  computed: {
    ...mapState({
      isOnline: state => state.member.isOnline
    })
  },
  methods:{
      showPopup(id){
        this.$refs[id].open()
      },
      hidePopup(id){
        this.$refs[id].close()
      },
      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/pointsorder/OrderList'+'?'+urlencode( { index: 0 } )})
          } else {
              this.showLogin()
          }
      }
  }
}
</script>

<style scoped lang="scss">
    .font-size-activity-tag {font-size:$h6!important;}
    .color-tip { color: #909399!important; }
    .color-base-text {color: #ff4544!important;}
    .img-content >img{width: 100%;height: 100%;}
    .tips-layer .head {position: relative;}
    .tips-layer .title {height: 40px;line-height: 40px;text-align: center;font-size:$h2;font-weight: 700;}
    .tips-layer .iconclose{position: absolute;top: 4px;right: 22px;font-size:$h2;font-weight: 500;}
    .tips-layer .body .detail {padding: 10px;margin-bottom:10px}
    .margin-bottom {margin-bottom: 10px!important;}
    .tips-layer .body .detail .font-size-base {margin-bottom: 5px;}
    .main-content{font-size:$subFontSize;line-height: 1.8;}
    .font-size-tag {font-size:$fontSize!important;}
    .color-base-bg {background-color: #ff4544!important;}
    .head-wrap {width: 100vw;line-height: 1;position: relative;height: 135px}
    .head-wrap > .img-content {width: 100%}
    .head-wrap .wrap {width: 100%;height: 100%;position: absolute;z-index: 5;top: 0;left: 0}
    .head-wrap .member-wrap {height: 95px;padding: 25px 15px 15px 15px;display: flex;align-items: center;box-sizing: border-box}
    .head-wrap .member-wrap .headimg {width: 50px;height: 50px;background: #fff;border: 2px solid #fff;border-radius: 50%;overflow: hidden}
    .head-wrap .member-wrap .headimg .img-content {width: 100%;height: 100%}
    .head-wrap .member-wrap .point {margin-left: 15px;color: #fff;font-size:$h1}
    .head-wrap .member-wrap .point-name {font-size:$fontSize;color: #fff;margin-left: 2px;margin-top: 2px}
    .head-wrap .member-wrap .iconjifen1 {color: #fff;margin-left: 4px}
    .head-wrap .member-wrap .rule {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;text-align: right;color: #fff}
    .head-wrap .member-wrap .iconwenhao {font-size:$fontSize;color: #fff;margin-right: 3px}
    .head-wrap .action-wrap {display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;align-items: center;height: 40px;background-color: hsla(0,0%,100%,.1)}
    .head-wrap .action-wrap .view-content {line-height: 1;text-align: center;width: calc((100vw - 0.5px) / 2);color: #fff}
    .head-wrap .action-wrap .view-content .text-content {font-size:$fontSize;margin-left: 4px}
    .head-wrap .action-wrap .view-content.split {width: 0.5px;height: 25px;background-color: hsla(0,0%,93.3%,.3);-webkit-flex-shrink: 0;flex-shrink: 0}
    .head-wrap .action-wrap .view-content .img-content {width: 100%}
    .head-wrap .no-login {display: flex;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;text-align: center}
    .head-wrap .no-login .text-content {color: #fff}
    .head-wrap .no-login .login-btn {display: inline-block;height: 35px;line-height: 35px;width: 100px;border: 1px solid #fff;border-radius: 35px;margin-bottom: 10px}

</style>