|
@@ -0,0 +1,152 @@
|
|
|
+<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="50" 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">
|
|
|
+ <u-cell size="mini" :border="false" icon="red-packet" title="发帖" isLink url="" />
|
|
|
+ <u-cell size="mini" :border="false" icon="red-packet" title="消费" isLink url="" />
|
|
|
+ <u-cell size="mini" :border="false" icon="red-packet" title="点评" isLink url="" />
|
|
|
+ <u-cell size="mini" :border="false" icon="red-packet" title="分享" isLink url="" />
|
|
|
+ <u-cell size="mini" :border="false" icon="red-packet" title="回帖" isLink url="" />
|
|
|
+ <u-cell size="mini" :border="false" icon="red-packet" title="广告" isLink url="" />
|
|
|
+ </u-cell-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list1: [
|
|
|
+ { name: 'photo', title: '积分说明' },
|
|
|
+ { name: 'lock', title: '积分明细' },
|
|
|
+ { name: 'star', title: '积分提现' },
|
|
|
+ { name: 'hourglass', title: '积分活动' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.myPoints {
|
|
|
+ /* 签到获取积分 */
|
|
|
+ .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>
|