chelvc-custom/src/pages/points/myPoints/index.vue

<template>
  <view class="myPoints">
    <!-- 积分和积分签到 -->
    <view class="signIn">
      <view>20000</view>
      <view
        class="signIn-item"
        @tap="$Router.push('/pages/points/checkIn/index')"
      >
        <text>签到获取积分</text>
        <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
      </view>
    </view>
    <!-- 积分列表 -->
    <view class="integral">
      <u-grid :border="false" col="4">
        <u-grid-item
          v-for="(listItem, listIndex) in list1"
          :key="listIndex"
          @tap="$Router.push(listItem.url)"
        >
          <u-icon :name="listItem.name" :size="40" color="#347caf" />
          <text class="integral-text">{{ listItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>

    <!-- 邀请好友 -->
    <view class="invite">
      <view class="invite-item">
        <view class="invite-text">
          <u-icon name="red-packet" color="#f9cf99" size="28" />
          <text class="friends">邀请好友</text>
        </view>
        <view class="gotoInvite">去邀请</view>
      </view>
      <view class="inviteFriends">
        <view class="flex-invite">
          <u-icon name="scan" color="#f9cf99" size="20" />
          <text class="scan-text">当面扫描</text>
        </view>
        <text>|</text>
        <view class="flex-invite">
          <u-icon name="weixin-fill" color="#28c445" size="20" />
          <text class="scan-text">微信邀请</text>
        </view>
      </view>
    </view>

    <!-- 获取积分方式 -->
    <view class="method">
      <u-cell-group :border="false" v-for="(item, index) in list2" :key="index">
        <u-cell
          size="mini"
          :border="false"
          :icon="item.icon"
          :title="item.title"
          isLink
          :url="item.url"
        />
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        {
          name: 'photo',
          title: '积分说明',
          url: '/pages/points/instructions/index',
        },
        {
          name: 'lock',
          title: '积分明细',
          url: '/pages/points/detail/index',
        },
        {
          name: 'star',
          title: '积分提现',
          url: '/pages/points/withdraw/index',
        },
        {
          name: 'hourglass',
          title: '积分活动',
          url: '/pages/points/activity/index',
        },
      ],
      list2: [
        {
          icon: 'red-packet',
          title: '发帖',
          url: '/pages/pointMethod/foren/index',
        },
        {
          icon: 'red-packet',
          title: '消费',
          url: '/pages/pointMethod/consume/index',
        },
        {
          icon: 'red-packet',
          title: '点评',
          url: '/pages/pointMethod/comment/index',
        },
        {
          icon: 'red-packet',
          title: '分享',
          url: '/pages/pointMethod/share/index',
        },
        {
          icon: 'red-packet',
          title: '回帖',
          url: '/pages/pointMethod/recover/index',
        },
        {
          icon: 'red-packet',
          title: '广告',
          url: '/pages/pointMethod/advertise/index',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.myPoints {
  /* 签到获取积分 */
  height: 100vh;
  margin-bottom: 50rpx;
  background-color: #efefef;

  .signIn {
    height: 300rpx;
    font-size: 35px;
    color: #fff;
    padding-top: 40px;
    text-align: center;
    background-color: #347caf;

    .signIn-item {
      display: flex;
      font-size: 16px;
      justify-content: center;
    }
  }

  /* 积分列表 */
  .integral {
    height: 220rpx;
    padding-top: 20px;
    box-sizing: border-box;
    border-radius: 20rpx;
    background-color: #fff;
    margin: -100rpx 20rpx 30rpx 20rpx;
  }

  /* 邀请好友 */
  .invite {
    margin: 0 20rpx;
    padding: 10px;
    height: 220rpx;
    background-color: #fff;

    .invite-item {
      display: flex;
      justify-content: space-between;

      .invite-text {
        display: flex;
      }

      .gotoInvite {
        width: 60px;
        height: 30px;
        color: #fff;
        line-height: 30px;
        border-radius: 15px;
        text-align: center;
        background-color: #347caf;
      }

      .friends {
        margin-top: 5px;
      }
    }

    .inviteFriends {
      width: 500rpx;
      height: 90rpx;
      display: flex;
      border-radius: 45rpx;
      margin: 50rpx 0 0 80rpx;
      padding: 25rpx 30rpx;
      box-sizing: border-box;
      background-color: #e6f5fd;
      justify-content: space-between;

      .flex-invite {
        display: flex;
      }

      .scan-text {
        margin-top: 2px;
        color: #626c79;
      }
    }
  }

  /* 获取积分的方式 */
  .method {
    height: 460rpx;
    background-color: #fff;
    margin: 40rpx 20rpx 100rpx 20rpx;
  }
}
</style>