|
@@ -18,12 +18,31 @@
|
|
|
<view class="reward-item-title">{{ reward.rewardName }}</view>
|
|
<view class="reward-item-title">{{ reward.rewardName }}</view>
|
|
|
<view class="reward-item-points">{{ reward.exchangePoints }}积分</view>
|
|
<view class="reward-item-points">{{ reward.exchangePoints }}积分</view>
|
|
|
<view class="reward-item-btn">
|
|
<view class="reward-item-btn">
|
|
|
- <view class="reward-exchange-btn">立即兑换</view>
|
|
|
|
|
|
|
+ <view class="reward-exchange-btn" @click="exchnageReward(reward.id)">立即兑换</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</uni-grid-item>
|
|
</uni-grid-item>
|
|
|
</uni-grid>
|
|
</uni-grid>
|
|
|
</view>
|
|
</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>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
@@ -31,6 +50,17 @@ import { ref } from 'vue';
|
|
|
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app';
|
|
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app';
|
|
|
import { accountApi, rewardApi } from '@/apis/apis';
|
|
import { accountApi, rewardApi } from '@/apis/apis';
|
|
|
|
|
|
|
|
|
|
+// 组件
|
|
|
|
|
+/**
|
|
|
|
|
+ * 兑换弹出框
|
|
|
|
|
+ */
|
|
|
|
|
+const exchangeDialog = ref(null);
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+* 兑换表单
|
|
|
|
|
+*/
|
|
|
|
|
+const exchangeForm = ref(null);
|
|
|
|
|
+
|
|
|
// 属性
|
|
// 属性
|
|
|
/**
|
|
/**
|
|
|
* 基本户
|
|
* 基本户
|
|
@@ -47,11 +77,56 @@ const generalAccountList = ref([]);
|
|
|
*/
|
|
*/
|
|
|
const rewardList = 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 loadAccountData = async () => {
|
|
|
|
|
|
|
+const loadAccountInfoData = async () => {
|
|
|
let res = await accountApi.queryAccountInfo();
|
|
let res = await accountApi.queryAccountInfo();
|
|
|
if (!res) {
|
|
if (!res) {
|
|
|
basicAccount.value = null;
|
|
basicAccount.value = null;
|
|
@@ -62,23 +137,97 @@ const loadAccountData = async () => {
|
|
|
generalAccountList.value = res.generalAccountList;
|
|
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 () => {
|
|
const loadRewardData = async () => {
|
|
|
let res = await rewardApi.queryRewardList();
|
|
let res = await rewardApi.queryRewardList();
|
|
|
rewardList.value = res;
|
|
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
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-// 生命周期
|
|
|
|
|
-onShow(() => {
|
|
|
|
|
|
|
+/**
|
|
|
|
|
+ * 拉取数据
|
|
|
|
|
+ */
|
|
|
|
|
+const loadData = async () => {
|
|
|
|
|
+ loadAccountInfoData();
|
|
|
loadAccountData();
|
|
loadAccountData();
|
|
|
loadRewardData();
|
|
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(() => {
|
|
onPullDownRefresh(() => {
|
|
|
- loadAccountData();
|
|
|
|
|
- loadRewardData();
|
|
|
|
|
|
|
+ loadData();
|
|
|
uni.stopPullDownRefresh();
|
|
uni.stopPullDownRefresh();
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|