web-store-retail-h5/pages/selfService/index.vue

<template>
  <view class="content">
    <view
      @click="goRouter(item.path)"
      class="kuaibox"
      v-for="(item, index) in theselfHeader"
      :key="index"
    >
      <view class="">
        {{ item.name }}
      </view>
      <image class="kuaiimg" :src="item.url" mode=""></image>
    </view>
  </view>
</template>

<script>
import * as sel from '@/config/selfService.js'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['user']),
  },
  data() {
    return {
      selfServiceList: [
        {
          name: '修改地址',
          url: '../../static/images/zz_dz.png',
          path: '/pages/selfService/updateAdress/updateAdress',
          id: '1',
        },
        // {
        //   name: '订单自提',
        //   url: '../../static/images/zz_tjbb.png',
        //   path: '/pages/selfService/orderPick/orderPick',
        //   id: '2',
        // },
        {
          name: '户籍变更',
          url: '../../static/images/zz_gxbg.png',
          path: '/pages/selfService/updateDomicile/updateDomicile',
          id: '3',
        },
        // {
        //   name: '月度历史累计业绩',
        //   url: '../../static/images/zz_thhdd.png',
        //   path: '/pages/selfService/monthlyHistory/monthlyHistory',
        //   id: '7',
        // },
        {
          name: '自助撤单',
          url: '../../static/images/zz_gzs.png',
          path: '/pages/selfService/cancleOrder/index',
          id: '8',
        },
        {
          name: '实名认证',
          url: '../../static/images/zz_jxs.png',
          path: '/pages/selfService/realName/realName',
          id: '9',
        },
        {
          name: '订单退款明细',
          url: '../../static/images/refund-icon.svg',
          path: '/pages/refund/detail',
          id: '9',
          alwaysShow: true,
        },
      ],
      theselfHeader: [],
      userInfo: '',
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('User')
    this.checkIfShow()
  },
  methods: {
    goRouter(path) {
      uni.navigateTo({
        url: path,
      })
    },
    checkIfShow() {
      sel.checkIfShow().then(res => {
        this.selfServiceList.forEach(ele => {
          if (ele.id == 1) {
            ele.ifshow = res.data.existAddress
          } else if (ele.id == 2) {
            ele.ifshow = res.data.existOrderSelf
          } else if (ele.id == 3) {
            ele.ifshow = res.data.existDomicile
          } else if (ele.id == 4) {
            ele.ifshow = res.data.existBusLicense
          } else if (ele.id == 5) {
            ele.ifshow = res.data.existSuperStudio
          } else if (ele.id == 6) {
            ele.ifshow = res.data.existMakerSpace
          } else if (ele.id == 7) {
            ele.ifshow = res.data.existMemberMonth
            // existMemberMonth
          } else if (ele.id == 8) {
            ele.ifshow = res.data.selfRevokeOrder
          } else if (ele.id == 9 && this.userInfo.pkCountry == 1) {
            ele.ifshow = res.data.existRealName
          }
        })
        const theselfHeader = []
        this.selfServiceList.forEach(element => {
          if (element.ifshow == 0 || element.alwaysShow) {
            theselfHeader.push(element)
          }
        })
        this.theselfHeader = theselfHeader
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f2f2f2;
  padding: 4rpx 21rpx 500rpx 21rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .kuaibox {
    width: 40%;
    // height: 150rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60rpx 40rpx 60rpx 22rpx;
    margin: 13rpx 0rpx;
    background-color: #ffffff;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;

    .kuaiimg {
      width: 52rpx;
      height: 53rpx;
    }
  }
}
</style>