ali_ai_learn_web/src/pages/Personal/Wallet.vue

<template>
  <div class="wallet-page">
    <ul class="wallet-list flex-between">
      <li class="gradient flex-center-between" v-for="(item, index) in 2" :key="index">
        <div class="wallet-list-li-left">
          <div class="">{{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }}{{ $t('personalCenter.yue') }}</div>
          <div class="">{{ index == 0 ? userInfo.pointsBalance || 0 || 0 : userInfo.baoMiBalance || 0 }}</div>
        </div>
        <div class="wallet-list-li-right flex-align-center">
          <div class="flex-align-center btn" v-if="index == 1">
            <img src="/src/assets/imgs/my/tixian@2x.png" alt="">
            <div class="">{{ $t('personalCenter.shenqingtixian') }}</div>
          </div>
          <div @click="changeTransformation(index)" class="flex-align-center btn">
            <img src="/src/assets/imgs/my/zhuanhuan@2x.png" alt="">
            <div class="">{{ index == 0 ? $t('personalCenter.zhuanhuanbaomibi') : $t('personalCenter.zhuanghuanmibi') }}
            </div>
          </div>
        </div>
      </li>
    </ul>
    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="$t(tab.label)" v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <div class="tabs flex-align-center">
          <div :class="{ active: index == 0 }" class="tab" v-for="(item, index) in 2">{{ index == 0 ? '米币' : '暴米币' }}明细
          </div>
        </div>
        <ul class="wallet-page-list">
          <li v-for="(item, index) in list" :key="index">
            <div class="title">
              <div class="">订单米币</div>
              <div class="">2024-08-24 14:11:11</div>
            </div>
            <div class="price">+1000</div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />

    <el-dialog v-model="dialogVisible"
      :title="`${transformationIndex == 0 ? $t('personalCenter.zhuanhuanbaomibi') : $t('personalCenter.zhuanghuanmibi')}`"
      width="523" :before-close="handleClose">
      <el-form :model="walletForm" label-width="auto" label-position="top">
        <el-row :gutter="16" v-if="transformationIndex">
          <el-col :span="24">
            <el-form-item :label="$t('common.baomibi')">
              
              <el-input-number v-model="walletForm.orderAmt" :min="1" controls-position="right" size="large"
                @change="handleChange" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('common.mibi')">
              <el-input v-model="walletForm.targetAmount" placeholder="请输入" readonly disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手续费率">
              <el-input v-model="walletForm.feeRate" placeholder="请输入" readonly disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16" v-else>
          <el-col :span="12">
            <el-form-item :label="$t('common.mibi')">
              <el-input-number v-model="walletForm.orderAmt" :min="configTxt.configValue" :step="configTxt.configValue" controls-position="right" size="large"
                @change="handleChange" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('common.baomibi')">
              <el-input v-model="walletForm.targetAmount" placeholder="请输入" readonly disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="">{{ configTxt.configName }}{{ configTxt.configValue }}</div>
      </el-form>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click="confirmTransformation">
            {{ $t('common.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import type { TabsPaneContext } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
import { getUserInfo } from '@/api/auth'

import { payConfigDearch, calRate } from '@/api/order'
import { createOrder } from '@/api/order.js'

import { useAppStore } from '@/pinia/appStore'

import DGTMessage from '@/utils/message'

import { useI18n } from 'vue-i18n' 

const { t } = useI18n() 

const appStore = useAppStore();

const tabs = ref([
  { label: 'personalCenter.incomeDetails', name: 0 },
  { label: 'personalCenter.usageRecord', name: 1 }
])
const list = ref([])
const form = ref({
  activeName: 0,
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const walletForm = ref({
  payMethod: '',
  orderType: '',
  productId: '',
  orderNum: null,
  orderAmt: 1,
  feeRate: 0,
  targetAmount:0
})
const configTxt = ref({})

const userInfo = ref({})//用户信息

const dialogVisible = ref(false);
const transformationIndex = ref(0)

// 确认转换
const confirmTransformation = async () =>{
  let res = await createOrder({
    payMethod: walletForm.value.payMethod,
    orderType: walletForm.value.orderType,
    productId: '',
    orderNum: walletForm.value.targetAmount,
    orderAmt: walletForm.value.orderAmt
  })
  console.log(res);
  if (res.code === 200) {
    if (res.data.paySuccess) {
      dialogVisible.value = false;
      appStore.USERINFO();
      DGTMessage.success(`  ${ transformationIndex.value ? t('common.zhuanhuanbaomibi') : t('common.zhuanghuanmibi')}${t('common.success')}`)
    }
  }
}

// 米币暴米币转换
const changeTransformation = async (index:any) => {
  transformationIndex.value = index;
  walletForm.value.payMethod = index ? 'BMI' : 'MI';
  walletForm.value.orderType = index ? 'exchange_mi' : 'exchange_bmi';
  let { data } = await payConfigDearch({ id: '03' });

  let result = data.filter((item:any) => item.configCode == 'bmb_to_mb_rate')
  if (result.length) {
    configTxt.value = result[0]
  }
  walletForm.value.orderAmt = index == 0 ?  configTxt.value.configValue : 1 
  handleChange()
  dialogVisible.value = true;
}

const handleChange = async () => {
  let res = await calRate({
    orderType:walletForm.value.orderType,
    orderNum:walletForm.value.orderAmt
  });
  walletForm.value.feeRate = res.data.feeRate
  walletForm.value.targetAmount = res.data.targetAmount
  
  console.log(res);
}

const handleClick = (tab: TabsPaneContext) => {
  list.value = []
  form.value.pageNum = 1;
  form.value.activeName = tab.props.name;
  getList()
}
const getList = async () => {

}

const handlePageChange = (newPage: number) => {
  list.value = []
  form.value.pageNum = page;
  getList()
}
// 获取用户信息
const getInfo = async () => {
  let res = await getUserInfo();
  userInfo.value = res.user;

}

onMounted(() => {
  getInfo()
  getList()
})
</script>
<style scoped lang="scss">
.wallet-page {

  padding-bottom: 16px;

  .tabs {
    .tab {
      cursor: pointer;
      color: #2D71FF;
      padding: 0 12px;
      line-height: 30px;
      font-size: 14px;
      background: #EAF0FF;
      border-radius: 4px;
      margin-right: 16px;
    }

    .active {
      color: #FFFFFF;
      background: linear-gradient(90deg, #0055FE 0%, #C832FA 100%);
    }
  }

  .wallet-list {
    gap: 16px;
    padding: 16px;

    li {
      flex: 1;
      padding: 16px;
      border-radius: 16px;

      .wallet-list-li-left {

        div {
          color: #FFFFFF;
          font-size: 14px;
          line-height: 1;

          &:last-child {
            margin-top: 8px;
            font-size: 32px;
            font-weight: bold;
          }
        }
      }

      .wallet-list-li-right {
        .btn {
          cursor: pointer;
          margin-left: 8px;
          color: #2D71FF;
          font-size: 14px;
          padding: 0 20px;
          height: 40px;
          background: #FFFFFF;
          border-radius: 10px;

          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

.wallet-page-list {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 16px;
    background: #F5F7FA;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    .title {
      div {
        font-size: 16px;
        line-height: 1;

        &:last-child {
          margin-top: 8px;
          color: #666666;
          font-size: 14px;
        }
      }
    }

    .price {
      font-size: 16px;
      font-weight: bold;
      color: #F52929;
    }
  }
}
</style>