frontend-app/pages/mine_package/mine_purse/mine_purse.vue

<template>
  <view class="purse_warp">
    <header-component :leftTitle="$t('purse.title')" left-path-type="switchTab" left-path="/pages/mine/mine" />
    <view class="purse_content_warp">
      <view v-for="(item, vIndex) in balanceList" :key="item.id" class="purse_warp_item" @click="jumpBonus(item)">
        <view class="purse_item_title">
          <view class="purse_item_title-left">
            <up-image :src="`https://static.tbmall.xin/static/mine-purse/${item.categoty}.png`" width="22" height="22"
              bgColor="#f1f6ff00" class="purse_amount"></up-image>
            <view class="title">{{ item.name }}</view>
            <up-image src="/static/common/right_soild.png" width="10" height="10" bgColor="#fff"
              class="right_soild"></up-image>
          </view>

          <view class="purse_item_title-right">
            <!-- <view class="button exchange_button" @click.stop="jumpInfo(item, 'withdraw')" v-if="vIndex == 4">
							提现
						</view> -->
            <view v-for="(btn, index) in getOperationButtons(item)" :key="index" :type="btn.code"
              class="button exchange_button" @click.stop="jumpInfo(item, btn.code)">{{ btn.memo }}</view>
          </view>
        </view>

        <!-- 下 -->
        <view class="purse_item_bottom">
          <view class="bottom_item">
            <view class="bottom_item_amount">{{ item.curAmount || 0 }}</view>
            <view class="bottom_item_title">{{
              item.categoty === "raffle" ? "可用次数" : "可用余额"
            }}</view>
          </view>

          <view class="bottom_item" v-if="item.categoty == 'vcoin'">
            <view class="bottom_item_amount">{{ item.bonusAmount || 0 }}</view>
            <view class="bottom_item_title">消费者权益</view>
          </view>

          <view class="bottom_item" @click.stop="onTip(vIndex)">
            <view class="bottom_item_lock">{{ item.lockAmount || 0 }}</view>
            <view class="bottom_item_title">{{ item.categoty === "raffle" ? "不可用次数" : "不可用余额" }}
              <up-image src="/pages/rwa_package/static/tips.png" width="12" height="12" bgColor="#fff"
                style="margin-left: 8rpx; margin-top: 4rpx" v-if="item.categoty == 'balance'" />
            </view>
          </view>
        </view>

        <view class="bottom_item_tip" v-if="item.categoty == 'balance' && activeTip == vIndex">抽奖7天后释放到可用余额中</view>
      </view>
    </view>
    <!-- 归集弹窗 -->
    <up-popup :show="collectShow" @close="closeCollect" position="bottom" :round="24">
      <view class="popup_content">
        <view class="popup_header">
          <view class="popup_title">归集数字积分</view>
          <view class="popup_close" @click="closeCollect">
             <u-icon name="close" style="margin-left:32rpx" size="24"></u-icon>
          </view>
        </view>
        <!-- 表单界面 -->
        <view class="popup_form" v-if="!collectSuccess">
          <view class="form_item">
            <view class="form_icon">
              <up-image src="/static/common/phone-1.png" width="24" height="24"  />
            </view>
            <input class="form_input" v-model="collectForm.mobile" placeholder="请输入省代理手机号" type="number" />
          </view>
          <view class="form_item">
            <view class="form_icon">
               <up-image src="/static/common/amount-1.png" width="24" height="24"  />
            </view>
            <input class="form_input" v-model="collectForm.amount" placeholder="请输入数量" type="digit" />
            <view class="form_all" @click="fillAllAmount">全部</view>
          </view>
          <view class="form_tip">可用数量：{{ availableAmount }}</view>
          <view class="form_item">
            <view class="form_icon">
               <up-image src="/static/common/password-1.png" width="24" height="24"  />
            </view>
            <input class="form_input" v-model="collectForm.password" placeholder="请输入支付密码"
              :type="collectForm.showPassword ? 'text' : 'password'" />
            <view class="form_eye" @click="togglePassword">
              <up-image :src="collectForm.showPassword ? '/pages/login_package/static/login/show.png' : '/pages/login_package/static/login/hidden.png'"
                width="24" height="24"  />
            </view>
          </view>
          <view class="popup_confirm" @click="collectConfirm">确定归集</view>
        </view>
        <!-- 成功界面 -->
        <view class="popup_success" v-else>
          <view class="success_icon">
            <up-image src="/static/common/success-1.png" width="64" height="64" bgColor="#fff" />
          </view>
          <view class="success_title">归集成功</view>
          <view class="success_amount">{{ collectForm.amount }}</view>
          <view class="popup_confirm" @click="closeCollect">好的</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script>
import CryptoJS from 'crypto-js';
import Header from "@/components/header.vue";
import { getAcctBalance, collectQuery } from "@/api/finance.js";
import { getValue } from "@/utils/enumUtils.js";
import { formatDate, handleAmount } from "@/utils/index.js";

export default {
  components: { headerComponent: Header },
  data() {
    return {
      balanceLoading: false,
      balanceList: [],
      activeTip: -1,
      collectShow: false,
      collectSuccess: false,
      availableAmount: 0,
      collectForm: {
        mobile: "",
        amount: "",
        password: "",
        showPassword: false,
      },
    };
  },
  onLoad() {
    this.getAcctBalance();
  },
  methods: {
    getValue,
    formatDate,
    handleAmount,
    getOperationButtons(item) {
      // return [
      // { type: 'recharge', text: '充值', show: item.isRecharge },
      // { type: "withdraw", text: "提现", show: item.isWithdrawal },
      //{ type: "exchange", text: "兑换", show: item.isExchange },
      //].filter((btn) => btn.show);
      let buttons = [];
      const functionConfig = JSON.parse(item.functionConfig);
      console.log("functionConfig---", functionConfig);
      if (functionConfig && functionConfig.length > 0) {
        buttons = functionConfig.filter((btn) => btn.status);
      }
      return buttons
    },
    // 跳转到详情
    jumpBonus(item) {
      uni.navigateTo({
        url:
          "/pages/mine_package/mine_purse_log/mine_purse_log?category=" +
          item.categoty +
          "&lockId=" +
          item.lockId +
          "&curId=" +
          item.curId +
          "&preId=" +
          item.preId + "&bonusId=" + item.bonusId,
      });
    },
    // 查询余额
    async getAcctBalance() {
      this.balanceLoading = true;
      const resp = await getAcctBalance();
      let data = [];
      if (resp && resp.bizcode === 100) {
        data = resp.data || [];
      }
      this.balanceList = data;
      this.balanceLoading = false;
    },
    // 提现
    jumpInfo(row, type) {
      console.log("row", row, type);
      if (type === "withdraw") {
        // 提现
        // uni.navigateTo({
        // 	url: "/pages/mine_package/mine_purse_bonus_withdraw/mine_purse_bonus_withdraw?amount=" + row.curAmount + "&category=" + row.categoty,

        // })
        uni.navigateTo({
          url: "/pages/rwa_package/account/withdraw?type=0",
        });
      } else if (type === "recharge") {
        // 充值
        uni.navigateTo({
          url: "/pages/rwa_package/account/withdraw?type=1",
        });
        // uni.navigateTo({
        // 	url: "/pages/mine_package/mine_purse_recharge/mine_purse_recharge?amount=" + row.curAmount + "&category=" + row.categoty,
        // })
      } else if (type === "exchange") {
        // 兑换
        // uni.navigateTo({
        // 	url: "/pages/mine_package/mine_purse_exchange/mine_purse_exchange?amount=" + row.curAmount + "&category=" + row.categoty,
        // })
        uni.navigateTo({
          url: "/pages/rwa_package/shop/points-shop",
        });
      } else if (type === "transfer") {
        console.log("transfer转出...");
      } else if (type === "collect") {
        // 归集
        console.log("collect归集...");
        this.availableAmount = row ? (row.curAmount || 0) : 0;
        this.collectSuccess = false;
        this.collectShow = true;
      }else if (type === "deduction") {
        // 兑换
        uni.navigateTo({
          url: "/pages/rwa_package/shop/points-shop",
        });
      }
    },
    onTip(index) {
      if (index == this.activeTip) {
        this.activeTip = -1;
        return;
      }
      this.activeTip = index;
    },
    // 填充全部数量
    fillAllAmount() {
      this.collectForm.amount = String(this.availableAmount);
    },
    // 切换密码显示
    togglePassword() {
      this.collectForm.showPassword = !this.collectForm.showPassword;
    },
    // 关闭弹窗
    closeCollect() {
      this.collectShow = false;
      this.collectSuccess = false;
      this.collectForm = { mobile: "", amount: "", password: "", showPassword: false };
    },
    // 归集确认
    async collectConfirm() {
      const { mobile, amount, password } = this.collectForm;
      if (!mobile) {
        uni.showToast({ title: '请输入省代理手机号', icon: 'none' });
        return;
      }
      if (!/^1[3-9]\d{9}$/.test(mobile)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }
      if (!amount || parseFloat(amount) <= 0) {
        uni.showToast({ title: '请输入有效数量', icon: 'none' });
        return;
      }
      if (parseFloat(amount) > parseFloat(this.availableAmount)) {
        uni.showToast({ title: '数量不能超过可用数量', icon: 'none' });
        return;
      }
      if (!password) {
        uni.showToast({ title: '请输入支付密码', icon: 'none' });
        return;
      }
      // 调用归集接口
      const resp = await collectQuery({ mobile, amount, password: CryptoJS.MD5(password).toString() });
      if (resp && resp.bizcode === 100) {
        uni.showToast({ title: '归集成功', icon: 'success' });
        this.collectSuccess = true;
        this.getAcctBalance();
      } else {
        uni.showToast({ title: resp.msg || '归集失败', icon: 'none' });
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.purse_warp {
  height: 100%;
  overflow-y: hidden;
  background-color: $app-bj;

  .purse_content_warp {
    padding: 30rpx 30rpx 10rpx;
    height: calc(100vh - 218rpx);
    overflow-y: auto;
  }

  .purse_warp_item {
    margin-bottom: 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;

    .purse_item_title {
      display: flex;
      justify-content: space-between;

      .purse_item_title-left {
        display: flex;
        align-items: center;

        .title {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          margin: 0 15rpx;
        }

        ::v-deep(.purse_amount) {
          margin-right: 15rpx;
          margin-top: 6rpx;
          display: flex;
          justify-content: center;

         .u-image__image{
            margin-top: 5rpx;
          }
        }

        .right_soild {
          margin-left: 12rpx;
        }
      }

      .purse_item_title-right {
        display: flex;
        flex-direction: row;
        align-items: center;

        .button {
          border-radius: 12rpx;
          width: 120rpx;
          height: 60rpx;
          font-weight: 500;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .exchange_button {
          background: #ffffff;
          color: #7934f6;
          border: 2rpx solid #7934f6;
        }

        .recharge_button {
          background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
          color: #fff;
        }
      }
    }

    .purse_item_bottom {
      display: flex;
      justify-content: space-between;

      .bottom_item {
        margin-top: 16rpx;

        .bottom_item_amount {
          font-weight: bold;
          font-size: 36rpx;
          color: #333333;
        }

        .bottom_item_lock {
          font-weight: bold;
          font-size: 36rpx;
          color: #999999;
          text-align: end;
        }

        .bottom_item_title {
          margin-top: 16rpx;
          font-size: 20rpx;
          color: #999999;
          display: flex;
          align-items: center;
          ::v-deep(.bottom_item_tip_title) {
            .u-image__image{
              margin-top: 8rpx;
              margin-left: 8rpx;
            }
            
          }
        }
      }
    }

    .bottom_item_tip {
      font-size: 20rpx;
      color: #999999;
      text-align: end;
      margin-top: 5rpx;
    }
  }

  .popup_content {
    background: #ffffff;
    border-radius: 48rpx 48rpx 0 0;
    padding: 30rpx 32rpx;
    padding-bottom: calc(60rpx + env(safe-area-inset-bottom));

    .popup_header {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-bottom: 48rpx;

      .popup_title {
        font-weight: 600;
        font-size: 28rpx;
        color: #71737C;
      }

      .popup_close {
        position: absolute;
        right: 0;
        width: 48rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .popup_form {
      .form_item {
        display: flex;
        align-items: center;
        background: #f7f7f7;
        border-radius: 20rpx;
        padding: 0 28rpx;
        height: 100rpx;
        margin-bottom: 28rpx;

        .form_icon {
          width: 48rpx;
          height: 48rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
        }

        .form_input {
          flex: 1;
          font-size: 30rpx;
          color: #333333;
        }

        .form_all {
          font-size: 28rpx;
          color: #7934f6;
          margin-left: 20rpx;
          font-weight: 500;
        }

        .form_eye {
          width: 48rpx;
          height: 48rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20rpx;
        }
      }

      .form_tip {
        font-size: 26rpx;
        color: #999999;
        text-align: right;
        margin-bottom: 28rpx;
      }

      .popup_confirm {
        margin-top: 20rpx;
        background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
        border-radius: 20rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
      }
    }

    .popup_success {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60rpx 0;

      .success_icon {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 32rpx;
      }

      .success_title {
        font-weight: 600;
        font-size: 36rpx;
        color: #333333;
        margin-bottom: 16rpx;
      }

      .success_amount {
        font-weight: bold;
        font-size: 48rpx;
        color: #333333;
        margin-bottom: 48rpx;
      }

      .popup_confirm {
        width: 100%;
        background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
        border-radius: 20rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
      }
    }
  }
}
</style>