PunchSettle-MiniProgram/src/pages/rewardMarket.vue

<template>
  <view class="account basic-account" v-if="basicAccount">
    <span class="account-name">{{ basicAccount.accountName }}</span>
    <span class="account-points">{{ basicAccount.points }}</span>
  </view>

  <scroll-view class="scroll-view" scroll-x v-if="generalAccountList && generalAccountList.length > 0">
    <view class="account general-account" v-for="(account, index) in generalAccountList" :key="account.id">
      <span>{{ account.accountName }}</span>
      <span>{{ account.points }}</span>
    </view>
  </scroll-view>

  <view class="reward-box">
    <uni-grid :column="2" :highlight="false" :showBorder="false" :square="false">
      <uni-grid-item v-for="(reward, index) in rewardList" :key="reward.id">
        <view class="reward-item">
          <view class="reward-item-title">{{ reward.rewardName }}</view>
          <view class="reward-item-points">{{ reward.exchangePoints }}积分</view>
          <view class="reward-item-btn">
            <view class="reward-exchange-btn" @click="exchnageReward(reward.id)">立即兑换</view>
          </view>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>

  <!-- 兑换弹出框 -->
  <uni-popup ref="exchangeDialog" type="dialog" :is-mask-click="false">
    <uni-popup-dialog mode="input" :before-close="true" title="兑换奖励" confirmText="兑换" @confirm="exchangeFormConfirm"
      @close="exchangeFormClose">
      <uni-forms ref="exchangeForm" :modelValue="exchangeFormData" :label-width="250" label-position="top"
        :rules="exchangeFormRules">
        <uni-forms-item label="待兑换的奖励" required name="rewardId">
          <uni-data-select :localdata="rewardSelectedData" v-model="exchangeFormData.rewardId"></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="兑换使用的积分账户" required name="accountId">
          <uni-data-select :localdata="accountSelectedData" v-model="exchangeFormData.accountId"></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="待兑换数量" required name="exchangeCount">
          <uni-easyinput v-model="exchangeFormData.exchangeCount" placeholder="1" type="digit" />
        </uni-forms-item>
      </uni-forms>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app';
import { accountApi, rewardApi } from '@/apis/apis';

// 组件
/**
 * 兑换弹出框
 */
const exchangeDialog = ref(null);

/**
* 兑换表单
*/
const exchangeForm = ref(null);

// 属性
/**
 * 基本户
 */
const basicAccount = ref(null);

/**
 * 通用账户
 */
const generalAccountList = ref([]);

/**
 * 奖励列表
 */
const rewardList = ref([]);

/**
 * 兑换表单数据
 */
const exchangeFormData = ref({});

/**
 * 兑换表单规则
 */
const exchangeFormRules = ref({
  rewardId: {
    rules: [{
      required: true,
      errorMessage: "待兑换的奖励不能为空"
    }]
  },
  accountId: {
    rules: [{
      required: true,
      errorMessage: "兑换使用的积分账户不能为空"
    }]
  },
  exchangeCount: {
    rules: [{
      required: true,
      errorMessage: '待兑换数量不能为空'
    }, {
      format: 'number',
      errorMessage: "请输入有效数字"
    }, {
      minimum: 1,
      errorMessage: "最小值{minimum}"
    }]
  }
});

/**
 * 奖励 下拉框数据
 */
const rewardSelectedData = ref([]);

/**
* 账户 下拉框数据
*/
const accountSelectedData = ref([]);

// 方法
/**
 * 拉取账户信息
 */
const loadAccountInfoData = async () => {
  let res = await accountApi.queryAccountInfo();
  if (!res) {
    basicAccount.value = null;
    generalAccountList.value = [];
    return;
  }
  basicAccount.value = res.basicAccount;
  generalAccountList.value = res.generalAccountList;
};

/**
 * 拉取账户数据
 */
const loadAccountData = async () => {
  let res = await accountApi.queryAccountList();
  if (!res) {
    accountSelectedData.value = [];
    return;
  }
  accountSelectedData.value = res.map(item => {
    let text = `${item.accountName}（${item.points}积分）`;
    return {
      text,
      value: item.id
    }
  });
}

/**
 * 拉取奖励数据
 */
const loadRewardData = async () => {
  let res = await rewardApi.queryRewardList();
  rewardList.value = res;
  if (!res) {
    rewardList.value = [];
    rewardSelectedData.value = [];
    return;
  }

  rewardList.value = res;
  rewardSelectedData.value = res.map(item => {
    let text = `${item.rewardName}（${item.exchangePoints}积分）`;
    return {
      text,
      value: item.id
    }
  });
};

/**
 * 拉取数据
 */
const loadData = async () => {
  loadAccountInfoData();
  loadAccountData();
  loadRewardData();
};

/**
 * 兑换奖励
 */
const exchnageReward = (id) => {
  exchangeFormData.value.rewardId = id;
  if (accountSelectedData.value.length > 0) {
    exchangeFormData.value.accountId = accountSelectedData.value[0].value;
  }
  exchangeDialog.value.open();
};

/**
 * 计时表单提交
 */
const exchangeFormConfirm = async () => {
  if (!exchangeFormData.value.exchangeCount) {
    exchangeFormData.value.exchangeCount = 1;
  }
  exchangeForm.value.validate().then(data => {
    return rewardApi.exchangeReward(exchangeFormData.value);
  }).then(e => {
    exchangeFormData.value = {};
    exchangeDialog.value.close();
    loadData();
  });
}

/**
 * 计时表单取消
 */
const exchangeFormClose = async () => {
  exchangeFormData.value = {};
  exchangeDialog.value.close();
}

// 生命周期
onShow(() => {
  loadData();
});

onPullDownRefresh(() => {
  loadData();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
.account {
  background-color: #2879ED;
  border-radius: 16rpx;
  height: 125rpx;

  font-size: 40rpx;
  font-weight: 400;
  letter-spacing: 0rpx;
  line-height: 57.92rpx;
  color: #ffffff;

  display: flex;
  justify-content: space-between;
  /* 子元素内容垂直居中 */
  align-items: center;
  padding: 0 24rpx;
}

.basic-account {
  margin: 16rpx 32rpx;
}

.scroll-view {
  margin: 0rpx 32rpx 0rpx 32rpx;
  white-space: nowrap;

  .general-account {
    display: inline-flex;
    width: 312rpx;
  }

  .general-account:not(:last-child) {
    margin-right: 16rpx;
  }
}

.reward-box {
  margin: 16rpx;

  .reward-item {
    margin: 16rpx 24rpx;
    height: 320rpx;
    opacity: 1;
    border-radius: 16rpx;
    background-color: #E5E5E5;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .reward-item-title,
    .reward-item-points,
    .reward-item-btn {
      flex: 1;
      width: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .reward-item-title {
      font-size: 30rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 43.44rpx;
      color: #000000;
    }

    .reward-item-points {
      font-size: 30rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 43.44rpx;
      color: #000000;
    }

    .reward-exchange-btn {
      width: 190.74rpx;
      height: 46.9rpx;
      opacity: 1;
      border-radius: 24rpx;
      background: #CCCCCC;

      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 34.75rpx;
      color: #000000;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>