menduner-uniapp/pages/index/welfare.vue

<template>
  <layout-page>
		<view class="box defaultBgc">
      <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore">
        <view class="content">
          <!-- 钱包 -->
          <view class="wallet">
            <view class="wallet-content">
              <view class="wallet-content-member">
                <view class="iconBox">
                  <view class="iconBox-line">
                    <uni-icons type="vip-filled" size="20" color="#ffbc00"></uni-icons>
                  </view>
                </view>
                <view class="name">
                  <text v-if="useUserStore.isLogin" @tap="toInfo" class="active">
                    {{ useUserStore?.baseInfo?.name || useUserStore?.userInfo?.phone }}
                  </text>
                  <text v-else @tap="handleLogin">点击登录</text>
                </view>
                </view>
              <view class="wallet-content-integral wallet-content-item" @tap="handleTo('integral')">
                <text>{{ balance.point || 0 }}</text>
                <text class="title">积分</text>
              </view>
              <view class="wallet-content-cash wallet-content-item" @tap="handleTo('balance')">
                <text>{{ balance.balance > 0 ? (balance?.balance / 100.0).toFixed(2) : 0 }}</text>
                <text class="title">余额</text>
              </view>
              <view class="wallet-content-coupon wallet-content-item" @tap="handleTo('coupon')">
                <text>{{ myCoupon }}</text>
                <text class="title">优惠券</text>
              </view>
            </view>
          </view>
          <!-- 签到 -->
          <view class="signIn">
            <view class="signIn-content">
              <view class="signIn-content-items">
                <view class="item" v-for="(sign, i) in SignItems" :key="sign.day">
                  <view class="box" :class="{ active: i < continuousDay }">
                    <uni-icons type="vip" size="30" color="#ffbc00" style="text-align: center;"></uni-icons>
                    <text class="text">+{{ sign.point }}</text>
                  </view>
                  <view class="day">
                    <text>{{ i === todayNumber ? '今' : '第' + sign.day }}天</text>
                  </view>
                </view>
              </view>
              <view class="tips">
                <button
                  :disabled="todaySignIn"
                  :class="{ disabled: todaySignIn }"
                  @tap="handleSignIn"
                >
                  {{ todaySignIn ? '已签到' : '签到'}}
                </button>
              </view>
            </view>
          </view>
          <!-- 福利 -->
          <view class="welfare">
            <view
              v-for="item in items"
              :key="item.id"
              class="item"
              :class="{ disabled: !item.canTake }"
              @tap="onGetCoupon(item.id, item.canTake)"
            >
              <view class="img">
                <image
                  src="/static/img/ticket.png"
                  mode="scaleToFill"
                />
              </view>
              <text>{{ item.name }}</text>
            </view>
          </view>
          <uni-load-more :status="more" />
        </view>
      </scroll-view>
		</view>
	</layout-page>
</template>

<script setup>
import { ref, watch } from 'vue'
import layoutPage from '@/layout'
import {
	getRewardSignInConfigList,
	getRewardSignInRecordSummary,
  createRewardSignInRecord,
  getAccountBalance,
  getUserAccount,
  getDiyTemplateUsed,
  getDiyTemplate,
  getCouponTemplatePage,
  takeCoupon,
  getCouponPage
} from '@/api/sign'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { userStore } from '@/store/user'
import { showAuthModal } from '@/hooks/useModal'

const useUserStore = userStore()
// 设置自定义tabBar选中值

const SignItems = ref([])

// 连续签到天数
const continuousDay = ref(0)
// 今天有无签到
const todaySignIn = ref(false)

// 今天
const todayNumber = ref()

const balance = ref({})

const pageInfo = ref({
  pageNo: 1,
  pageSize: 20
})
const total = ref(0)
const items = ref([])
const more = ref('more')

const myCoupon = ref(0)

// watch(() => useUserStore.isLogin, () => {
//   if (useUserStore.isLogin) {
//     init()
//   }
// })

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

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

function init () {
  // 获取签到列表
  getSignIn()
  // 获取签到信息
  getSummary()
  // 获取余额积分
  getBalance()
  // 获取优惠券列表
  initCoupon()
  // 获取我的优惠券总数
  getMyCoupon()

}

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


// 获取个人签到统计
async function getSummary() {
  const { data } = await getRewardSignInRecordSummary()
  if (!data) return
  continuousDay.value = data.continuousDay // 连续签到第n天
  todaySignIn.value = data.todaySignIn // 今天有无签到
  todayNumber.value = todaySignIn.value ? continuousDay.value - 1 : continuousDay.value
}
// 获取签到列表
async function getSignIn () {
  try {
    const { data } = await getRewardSignInConfigList()
    SignItems.value = data
  } catch (error) {
    
  }
}
// 签到
async function handleSignIn () {
  uni.showLoading({
    title: '正在签到'
  })
  try {
    const { code } = await createRewardSignInRecord()
    if (code !== 0) {
      return
    }
    setTimeout(async () => {
      const { code: _code } = await getSummary()
      if (_code !== 0) {
        return
      }
      uni.showToast({
        title: '签到成功',
        icon: 'success',
        mask: true
      })
      // 更新积分
      getBalance()
    }, 1000)
  } catch (error) {
    
  } finally {
    uni.hideLoading()
  }
}


// 获取优惠券分页
async function getAllCouponPage () {
  try {
    const { data } = await getCouponTemplatePage({ ...pageInfo.value })
    // console.log(data)
    if (!data || !data.list || !data.list.length) {
      if (pageInfo.value.pageNo === 1) {
        more.value = 'more'
        return
      }
      pageInfo.value.pageNo--
      more.value = 'more'
      return
    }
    items.value.push(...data.list)
    total.value = +data.total
    more.value = total.value === items.value.length ? 'noMore' : 'more'
  } catch (error) {
    if (pageInfo.value.pageNo === 1) {
      more.value = 'more'
      return
    }
    pageInfo.value.pageNo--
    more.value = 'more'
  }
}

async function getMyCoupon () {
  const { data } = await getCouponPage({ pageNo:1, pageSize: 1, status: 1 })
  if (data) {
    myCoupon.value = +data.total
  }
}

// 优惠券列表
// async function handleGetTmpUsed () {
//   try {
//     const { data } = await getDiyTemplateUsed()
//     if (!data?.home?.components) {
//       uni.showToast({
//         title: '暂无优惠券',
//         icon: 'none',
//         mask: true
//       })
//       return
//     }
//     const idsItem = data.home.components.find(e => e.id === 'CouponCard')
//     if (!idsItem) {
//       uni.showToast({
//         title: '暂无优惠券',
//         icon: 'none',
//         mask: true
//       })
//       return
//     }
//     const ids = idsItem?.property?.couponIds
//     if (!ids) {
//       uni.showToast({
//         title: '暂无优惠券',
//         icon: 'none',
//         mask: true
//       })
//       return
//     }
//     const { data: _data } = await getDiyTemplate(ids.join(','))
//     items.value = _data
//     more.value = 'noMore'
//   } catch (error) {
    
//   }
// }

async function loadingMore () {
  if (more.value === 'noMore') {
    return
  }
  more.value = 'loading'
  pageInfo.value.pageNo++
  getAllCouponPage()
}

function initCoupon () {
  pageInfo.value.pageNo = 1
  items.value = []
  getAllCouponPage()
}

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

function toInfo () {
  uni.navigateTo({
		url: '/pagesA/info/index'
	})
}

async function onGetCoupon(id, canTake) {
  if (!canTake) {
    return
  }
  uni.showLoading({
    title: '领取中'
  })
  try {
    const {
			code,
			msg
		} = await takeCoupon(id)
    if (code !== 0) {
      uni.showToast({
        title: msg,
        icon: 'none'
      })
      return
    }
    uni.showToast({
      title: '领取成功',
      icon: 'success'
    })
    getMyCoupon()
    initCoupon()
  } catch (error) {
    
  } finally {
    uni.hideLoading()
  }
}

function handleTo (page) {
  if (!useUserStore.isLogin) {
		showAuthModal()
		return
  }
  uni.navigateTo({
    url: `/pagesA/${page}/index`
  })
}
</script>

<style scoped lang="scss">
$px: 20rpx;
.box {
  overflow: hidden;
  height: 100vh;
  padding: $px 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 {
    // padding: 0 $px;
    box-sizing: border-box;
    height: 200rpx;
    margin-bottom: 20rpx;
    &-content {
      display: flex;
      height: 100%;
      // border: 2rpx solid #E5E5E5;
      border-radius: 10rpx;
      background: #FFF;
      
      &-member {
        width: 50%;
        display: flex;
        align-items: center;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          width: 4rpx;
          height: 30%;
          right: 0;
          top: 35%;
          background: #00897B;
        }
        .iconBox {
          width: 100rpx;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          &-line {
            border: 4rpx solid #ffbc00;
            border-radius: 180rpx;
            padding: 10rpx;
          }
        }
        .name {
          flex: 1;
          .actvie {
            color: #ffbc00;
          }
          
        }
      }
      &-item {
        width: 16.6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .title {
          font-size: .85em;
        }
      }
      &-integral {
      }
      &-cash {
        
      }
    }
  }
  .signIn {
    // padding: 0 $px;
    box-sizing: border-box;
    &-content {
      border-radius: 10rpx;
      background: #FFF;
      &-items {
        padding: 20rpx $px;
        display: flex;
        height: 220rpx;
        box-sizing: border-box;
        .item {
          height: 140rpx;
          width: 100%;
          align-items: center;
          justify-content: center;
          padding: 0 10rpx;
          .box {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            background: #f2f4f7;
            border-radius: 10rpx;
            &.active {
              background: rgba(16,137,123, .66);
            }
            .text {
              font-size: .75em;
              text-align: center;
            }
          }
          .day {
            margin-top: 10rpx;
            height: 60rpx;
            text-align: center;
            font-size: .5em;
          }
        }
      }
      .tips {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 80rpx;
        font-size: .75em;
        color: #999;
        &-light {
          color: #00897B;
          padding: 0 10rpx;
        }
        button {
          width: 180rpx;
          height: 60rpx;
          font-size: 24rpx;
          margin: 0 10rpx;
          border: unset;
          background-color: #00897B;
          color: #FFF;
          &.disabled {
            background-color: #a7a7a7 !important;
          }
        }
      }
      
    }
  }
  .welfare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20rpx;
    padding: 20rpx $px;
    .item {
      text-align: center;
      background: #FFF;
      padding: $px;
      font-size: .85em;
      &.disabled {
        position: relative;
        &::after {
          content: '已领取';
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255,255,255,.75);
        }
      }
      .img {
        image {
          width: 128rpx;
          height: 128rpx;
        }
      }
    }
  }
}
</style>