<template>
  <z-paging
    ref="pagingRef"
    v-model="prodList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="暂时没有活动哦"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetProdList"
  >
    <view class="Mall4j page-integral-mall">
      <view class="integral-box">
        <view class="bg">
          <image src="@/package-activities/static/images/integral-mall.png" />
        </view>
        <view class="des">
          当前可用积分
        </view>
        <view class="number">
          {{ userInfo.score || 0 }}
        </view>
      </view>

      <!-- 快捷入口 -->
      <view class="actions">
        <view
          class="item"
          @tap="onToSignIn"
        >
          <view class="img">
            <image src="@/package-activities/static/images/integral-mall02.png" />
          </view>
          <view class="text">
            积分获取
          </view>
        </view>
        <view
          class="item"
          @tap="onToIntegralRecord"
        >
          <view class="img">
            <image src="@/package-activities/static/images/integral-mall03.png" />
          </view>
          <view class="text">
            兑换记录
          </view>
        </view>
      </view>

      <!-- 商品兑换 -->
      <view class="guess-like">
        <view class="tit">
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
          <view class="text">
            商品兑换
          </view>
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
        </view>
        <view class="prods">
          <block
            v-for="prodItem in prodList"
            :key="prodItem.spuId"
          >
            <view
              class="item"
              @tap="onToProdDetailPage(prodItem.spuId)"
            >
              <view class="img">
                <img-show
                  :src="prodItem.mainImgUrl"
                  img-mode="aspectFit"
                />
              </view>
              <view class="text-box">
                <view class="name">
                  {{ prodItem.spuName }}
                </view>
                <view class="sku">
                  已兑换{{ prodItem.saleNum }}件
                </view>
                <view class="price-box">
                  <view class="price">
                    <view class="integral-icon">
                      <image src="@/package-activities/static/images/integral-icon.png" />
                    </view>
                    <view class="symbol">
                      {{ prodItem.scoreFee }}积分
                    </view>
                    <view
                      v-if="prodItem.priceFee"
                      class="add"
                    >
                      +
                    </view>
                    <view
                      v-if="prodItem.priceFee"
                      class="symbol"
                    >
                      {{ wxs.parsePrice(prodItem.priceFee)[0] }}.{{ wxs.parsePrice(prodItem.priceFee)[1] }}元
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
const wxs = number()

onLoad(() => {
  onQueryUserInfo()
})

/**
 * 用户点击右上角分享(勿删)
 */
onShareAppMessage(() => {})

// 去签到页
const onToSignIn = () => {
  uni.navigateTo({
    url: '/package-activities/pages/sign-in/sign-in'
  })
}

// 去兑换记录
const onToIntegralRecord = () => {
  uni.navigateTo({
    url: '/package-activities/pages/integral-record/integral-record'
  })
}
// 获取商品列表
const pagingRef = ref(null)
const prodList = ref([])
const onGetProdList = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_search/ua/search/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      spuType: 3
    }
  }).then(res => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list[0].spus)
  })
}
/**
 * 获取用户信息栏数据
 */
const userInfo = ref({})
const onQueryUserInfo = () => {
  http.request({
    url: '/tmerclub_user/user/user_info',
    method: 'GET'
  }).then(res => {
    userInfo.value = res
  })
}
// 跳转到商品详情页
const onToProdDetailPage = (id) => {
  uni.navigateTo({
    url: '/package-activities/pages/score-prod-detail/score-prod-detail?spuId=' + id
  })
}

</script>

<style lang="scss" scoped>
@use "./integral-mall.scss";
</style>
