hlm_pl_mall_h5/pages/member/index/IndexOrderItem.vue

<template>
  <view class="div order-item" @click="onclick()">
    <view>
      <image mode="aspectFit" class="img order-item-icon" :src="src" />
    </view>
    <label class="item-title order-item-title">{{title}}</label>
    <text class="span number" v-if="orderNumber == 0 ? '': orderNumber && isEmpty == false ? '': orderNumber">{{ orderNumber }}</text>
  </view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'

export default {
  props: {
    src: {
      type: String
    },
    title: {
      type: String
    },
    testAttr: {
      type: String
    },
    state: {
      default: ''
    },
    orderNumber: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isEmpty: false
    }
  },
  computed: mapState({
    isOnline: state => state.member.isOnline
  }),
  created () {
    this.isSignin()
  },
  methods: {
    ...mapMutations({
      changeStatus: 'changeStatus'
    }),
    onclick () {
      if (this.isOnline) {
        uni.navigateTo({ url: this.testAttr+'?'+urlencode( { state: this.state } )})
      } else {
        uni.navigateTo({ url: 'signin' })
      }
    },
    // 是否登录
    isSignin () {
      if (this.isOnline) {
        this.isEmpty = true
      } else {
        this.isEmpty = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.item-title {
  font-size: $fontSize;
  color: $descTextColor;
}
.order-item-icon {
  width: 1.4rem;
  height: 1.4rem;
  font-size:1.3rem;
  margin-top:0.8rem;
}
.order-item-title {
  margin-top:0.4rem;
}
.span.number {
  width:0.8rem;
  height:0.8rem;
  line-height:0.8rem;
  margin-top:-3rem;
  margin-left:1rem;
  background: $primaryColor;
  border-radius:50%;
  font-size:$h6;
  text-align: center;
  color: RGBA(255, 255, 255, 1);
  font-weight: normal;
  position: relative;
  z-index: 2;
}
</style>