web-store-retail-h5/pages/bonus/menu.vue

<template>
  <view class="content">
    <view
      @click="goRouter(item.path)"
      class="kuaibox"
      v-for="(item, index) in selfServiceList"
      :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/bonus-record.svg',
          path: '/pages/bonus/real-time',
        },
        {
          name: '奖金明细',
          url: '../../static/images/mark2.png',
          path: '/pages/bonus/index',
        },
      ],
      userInfo: '',
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('User')
  },
  methods: {
    goRouter(path) {
      uni.navigateTo({
        url: path,
      })
    },
  },
}
</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>