nbjk-xcx-sp/src/pages/carVideo/components/tabCenter.vue

<template>
  <view class="center">
    <view
      @click="goPath(item, index)"
      class="center-item"
      v-for="(item, index) in centerList"
      :key="index"
    >
      <div :style="{'background':index==0?'#8AE6C7':'#B1CEFF'}" class="center-circle">
        <image class="center-img" :src="item.img"></image>
        
        <view style="width: 100%;"
          ><text style="color:#0A6345" v-if="index == 0">{{ "精选考题 \n500题" }}</text
          ><text style="color:#174087" v-if="index == 1">{{ "模拟考试 \n仿真题目" }}</text></view
        >
      </div>
    </view>
  </view>
</template>

<script>
import utils from "@/utils/index";
export default {
  data() {
    //exercise
    return {};
  },
  computed: {
    isVip() {
      return this.$store.getters.isVip;
    },
  },
  methods: {
    goPath(item, index) {
      let query = Object.assign({}, this.query);
      query.title = item.text;
      if (this.needVipList.includes(index) && !this.isVip) {
        uni.showModal({
          title: "提示",
          content: "需要vip才能使用这个功能",
          confirmText: "购买vip",
          cancelText: "取消",
          success(res) {
            console.log(res);
            if (res.confirm) {
              uni.navigateTo({
                url: "/otherPages/buyVip/index",
              });
            }
          },
        });

        return;
      }
      if (item.path) {
        let str = utils.mapToUrlQuery(query);
        console.log(item.path + "?" + str, "str");
        uni.navigateTo({
          url: item.path + "?" + str,
        });
      }
    },
  },
  props: {
    needVipList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    query: {
      type: Object,
      default: () => {
        return {};
      },
    },
    centerList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;
  width: 300rpx;
  margin-top: 80rpx;
  .center-circle {
    width: 240rpx;
    height: 240rpx;
    border-radius: 50%;

    font-size: 28rpx;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  .center-item {
    position: relative;
    margin-bottom: 100rpx;
    color: #fff;
    
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .center-img {
    width: 74rpx;
    height: 82rpx;
  }
  .center-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    font-size: $uni-app-fontsize-paragraph;
  }
}
</style>