menduner-uniapp/pages/index/welfare.vue

<template>
  <view>
    <Navbar title="会员福利" />
    <layout-page>
      <view :style="{'padding-top': navbarHeight + 'px'}">
		  <view class="commonBackground"></view>
		  <view class="box defaultBgc">
		    <scroll-view class="scrollBox" scroll-y="true">
		      <view class="content">
		        <!-- 钱包 -->
		        <view class="wallet">
		          <view class="wallet-content">
		            <view class="wallet-content-member">
		              <view class="name">
		                <view v-if="useUserStore.isLogin" style="position: relative;">
		                  <image class="enterAvatar"
		                    :src="getUserAvatar(useUserStore?.baseInfo?.avatar,  useUserStore?.baseInfo?.sex)"
		                  ></image>
		                  <view class="avatar-tips">我</view>
		                </view>
		                <text v-else class="MiSans-Semibold default-text-color" style="font-size: 38rpx;" @tap="handleLogin">点击登录</text>
		              </view>
		            </view>
		            <view class="wallet-content-integral wallet-content-item" @tap="handleTo('integral')">
		              <text class="MiSans-Semibold" style="font-size: 40rpx;">{{ balance.point || 0 }}</text>
		              <text class="title MiSans-Normal">积分</text>
		            </view>
		            <view class="septal-line"></view>
		            <view class="wallet-content-cash wallet-content-item" @tap="handleTo('balance')">
		              <text class="MiSans-Semibold" style="font-size: 40rpx;">{{ balance.balance > 0 ? (balance?.balance / 100.0).toFixed(2) : 0 }}</text>
		              <text class="title MiSans-Normal">余额</text>
		            </view>
		          </view>
		        </view>
		  
		        <!-- 积分规则 -->
		        <view class="points">
		          <view class="MiSans-Semibold default-text-color" style="font-size: 30rpx; margin-bottom: 30rpx;">积分规则</view>
		          <view v-for="(k, i) in integralRules" :key="i" class="points-item list-item-bgc default-border">
		            <view class="d-flex align-center">
		              <image class="icon-img" src="https://minio.menduner.com/dev/112bdf67dea1505a8d063f22b560a21891631dc7294526488d7f82009d716229.png"></image>
		              <text class="points-item-text">{{ k.title }}</text>
		            </view>
		            <view class="points-item-text color-primary">
		              {{ k.point }}（{{ k.complete ? '已完成' : '未完成' }}）
		            </view>
		          </view>
		        </view>
		  
		        <!-- 积分兑换 -->
		        <view class="goods">
		          <view class="MiSans-Semibold default-text-color" style="font-size: 30rpx; margin-bottom: 30rpx;">积分兑换</view>
		          <view class="goods-box">
		            <view class="goods-box-item list-item-bgc" v-for="(item,index) in goodsList" :key="index" @tap.stop="handleClickGoods">
		              <image :src="item.url" class="goods-box-item-img" mode="widthFix"></image>
		              <view class="default-border" style="border-radius: 0 0 20rpx 20rpx; border-top: none;">
                    <view class="goods-box-item-name">{{ item.name }}</view>
                    <view style="padding: 0 30rpx 20rpx 30rpx;">
                      <text class="MiSans-Normal color-666" style="font-size: 24rpx">消费积分</text>
                      <text class="goods-box-item-price">{{ item.point }}</text>
                    </view>
                  </view>
		            </view>
		          </view>
		        </view>
		      </view>
		    </scroll-view>
		  </view>
	  </view>
    </layout-page>
	
	<uni-popup ref="inputDialog" type="dialog">
	  <view class="shareQrCodePopupContent">
	    <view class="ss-m-b-10 MiSans-Normal">请前往网页版门墩儿商城兑换</view>
	    <uni-link class="MiSans-Normal" href="https://www.menduner.com/mall" text="点击复制网页地址" color="#00B760" fontSize="16" copyTips="已复制，请在电脑端打开"></uni-link>
	  </view>
	</uni-popup>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import layoutPage from '@/layout'
import Navbar from '@/components/Navbar'
import {
  getAccountBalance,
  getUserAccount,
} from '@/api/sign'
import { getTaskList } from '@/api/integral'
import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { userStore } from '@/store/user'
import { showAuthModal } from '@/hooks/useModal'
import { showNecessaryInfoPopup } from '@/utils/request'
import { getUserAvatar } from '@/utils/avatar'

const navbarHeight = ref(uni.getStorageSync('navbarHeight'))

const inputDialog = ref()
const useUserStore = userStore()

// 积分规则
const integralRules = ref([])
const getTask = async () => {
  const { data } = await getTaskList({ mark: '推荐任务', type: 0 })
  integralRules.value = data
}
// 商品列表
const goodsList = [
  { name: '房券-高端酒店房券', point: 12000, url: 'https://minio.menduner.com/dev/menduner/hotalRoomVoucher.png' },
  { name: '门墩儿酒店英语学习年卡', point: 8000, url: 'https://minio.menduner.com/dev/menduner/englishCourses.jpg' },
  { name: '红酒-经典年份葡萄酒', point: 5000, url: 'https://minio.menduner.com/dev/menduner/redWine.png' },
  { name: '瑞幸咖啡券-瑞幸咖啡精致享受券', point: 2000, url: 'https://minio.menduner.com/dev/menduner/coffee.png' },
  { name: '减压捏捏乐', point: 500, url: 'https://minio.menduner.com/dev/menduner/pinchMusic.png' }
]

onLoad(() => {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
  onShareAppMessage(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
      imageUrl: 'https://minio.menduner.com/dev/89f171b91e3056a700d80b26a9dbb4cd6e9677b3f3b4f036a2127f5d5023e9d3.jpg'
    }
  })
  onShareTimeline(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
      imageUrl: 'https://minio.menduner.com/dev/89f171b91e3056a700d80b26a9dbb4cd6e9677b3f3b4f036a2127f5d5023e9d3.jpg'
    }
  })
})

const handleClickGoods = () => {
  inputDialog.value.open()
}

const balance = ref({})

watch([() => useUserStore.refreshToken, () => useUserStore.isLogin], () => {
  if (useUserStore.isLogin) {
    getBalance()
    getTask()
  }
})

onShow(() => {
  const currentPage = getCurrentPages()[0];  // 获取当前页面实例
  const currentTabBar = currentPage?.getTabBar?.();
  // 设置当前tab页的下标index
  currentTabBar?.setData({ selected: 2 });
  init()
})

function init () {
  // 获取余额积分
  getBalance()
  // 获取积分规则列表
  getTask()
}

// 获取积分余额
async function getBalance() {
  const { data } = await getAccountBalance()
  const { data: _data } = await getUserAccount()
  balance.value = {
    ...data,
    point: _data?.point
  }
}

function handleLogin () {
  if (!useUserStore.isLogin) {
		showAuthModal()
		return
	}
}

function handleTo (page) {
  if (!useUserStore.isLogin) {
		showAuthModal()
		return
  }
  if (showNecessaryInfoPopup()) {
		uni.showToast({
			title: '请先完善基本信息',
			icon: 'none'
		})
		showAuthModal('necessaryInfo')
		return
	}
  uni.navigateTo({
    url: `/pagesA/${page}/index`
  })
}
</script>

<style scoped lang="scss">
.enterAvatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin: 0 auto;
}
.avatar-tips {
  position: absolute;
  bottom: 3rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 38rpx;
  line-height: 38rpx;
  color: #fff;
  text-align: center;
  font-family: MiSans-Medium;
  background-color: #00B760;
  border-radius: 20rpx;
}
.septal-line {
  height: 60rpx;
  border-left: 3px dashed #DDDDDD;
}
.shareQrCodePopupContent {
	width: 75vw;
	padding: 40rpx;
	margin-bottom: 20rpx;
	text-align: center;
	background-color: #fff;
  border-radius: 20rpx;
}
.box {
  height: 100vh;
  padding: 20rpx 0 0 0;
  box-sizing: border-box;
  .scrollBox{
    height: 100%;
    
    padding-bottom: 120rpx;
    box-sizing: border-box;
  }
  .content {
    padding-bottom: 24rpx;
    box-sizing: border-box;
  }
  .wallet {
    box-sizing: border-box;
    &-content {
      display: flex;
      height: 100%;
      border-radius: 10rpx;
      align-items: center;
      
      &-member {
        width: 20%;
        .name {
          margin-left: 50rpx;
        }
      }
      &-item {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .title {
          font-size: .85em;
        }
      }
    }
  }
  .points {
    height: 282rpx;
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 20rpx;
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      &:last-child {
        margin-bottom: 0;
      }
      &-text {
        font-family: MiSans-Medium;
        font-size: 28rpx;
      }
      .icon-img {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
    }
  }
  .goods {
    padding: 30rpx;
    margin: 0 30rpx 30rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .goods-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      &-item {
        width: 48%;
        margin: 10upx 0;
        box-sizing: border-box;
        border-radius: 20rpx;
		box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
        &-img {
          width: 100%;
          height: 305rpx;
          display: block;
          margin: auto;
          border-radius: 20rpx 20rpx 0 0;
        }
        &-price {
          color: #00B760;
          font-size: 26rpx;
          font-family: MiSans-Semibold;
          margin-left: 20rpx;
        }
        &-name {
          font-family: MiSans-Medium;
          font-size: 26rpx;
          padding: 20rpx 30rpx;
          height: 65rpx;
          overflow:hidden; 
          text-overflow:ellipsis;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2; 
        }
      }
    }
  }
}
</style>