增加一个选择代币数量的控件

.env.development

@@ -1,5 +1,5 @@
 VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
-VUE_APP_BASE_API='https://market.cebg.games'
+VUE_APP_BASE_API='https://game2006api-test.kingsome.cn'
 VUE_APP_CHAIN_ID=322
 VUE_APP_CHAIN_RPC='https://rpc-testnet.kcc.network'
 VUE_APP_CHAIN_NAME='KCC-TESTNET'

src/api/Market.ts

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+/**
+ * @param data {account: string, page: number, sort: string}
+ */
+export const queryShopList = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=BcShop&a=search',
+    method: 'get',
+    params: data
+  })
+
+export const buyShopBox = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=BcShop&a=buy',
+    method: 'get',
+    params: data
+  })
+
+/**
+ * @param data {account: string, token: string, order_id: string}
+ */
+export const queryShopOrder = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=BcShop&a=queryOrder',
+    method: 'get',
+    params: data
+  })
+
+export const queryRechargeResult = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Wallet&a=queryRechargeResult',
+    method: 'get',
+    params: data
+  })
+
+export const queryWithdrawalResult = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Wallet&a=queryWithdrawalResult',
+    method: 'get',
+    params: data
+  })
+
+export const withdrawal = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Wallet&a=withdrawal',
+    method: 'get',
+    params: data
+  })

src/api/User.ts

@@ -20,10 +20,14 @@ export const defaultUser: IUser = {
   avatar: '',
   account: ''
 }
+/**
+ * 获取用户信息
+ * @param data {account: string, token: string}
+ */
 export const getUserInfo = (data: any) =>
   request({
-    url: '/api/user/info',
+    url: '/webapp/index.php?c=BcUser&a=login',
-    method: 'post',
+    method: 'get',
     data
   })
 

src/components/market/PricePickerModal.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="chain-price-modal" v-if="modalShow">
+    <div class="modal-bg" @click="cancelSelect"></div>
+    <div class="modal-content">
+      <div class="modal-title">
+        Please input or drag amount to deposit
+      </div>
+      <div class="modal-body">
+        <el-slider
+          v-model="value"
+          :min="min"
+          :max="max"
+          show-input>
+        </el-slider>
+      </div>
+      <div class="modal-footer">
+        <button class="general-btn btn cancel-btn" @click="cancelSelect">取 消</button>
+        <button class="general-btn btn confirm-btn"  @click="confirmSelect">确 定</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { EventBus } from '@/utils/event-bus'
+
+export const ON_AMOUNT_SELECT = 'on-amount-select'
+export const ON_AMOUNT_CANCEL = 'on-amount-cancel'
+export const SHOW_AMOUNT_MODAL = 'show_amount_modal'
+@Component({
+  name: 'PricePickerModal',
+  components: {
+  }
+})
+export default class PricePickerModal extends Vue {
+  value = 0
+  min = 1
+  max = 100
+  title = 'Please input or drag amount to deposit'
+
+  modalShow = false
+  confirmFun: (id: number) => void
+  cancelFun: (reason: any) => void
+
+  mounted() {
+    EventBus.$on(SHOW_AMOUNT_MODAL, this.showModal.bind(this))
+  }
+
+  unmounted() {
+    EventBus.$off(SHOW_AMOUNT_MODAL, this.showModal.bind(this))
+  }
+
+  showModal({ max, min, current, title, confirmFun, cancelFun }:
+              {
+                max: number
+                min: number
+                current: number
+                title: string
+                confirmFun: (val: number)=>void
+                cancelFun?: (val: number)=>void
+              }) {
+    this.value = current | 0
+    this.min = min | 0
+    this.max = max | 0
+    this.title = title
+    this.confirmFun = confirmFun
+    this.cancelFun = cancelFun || this.cancelFun
+    this.modalShow = true
+  }
+
+  cancelSelect() {
+    this.$emit(ON_AMOUNT_CANCEL, this.value)
+    this.cancelFun && this.cancelFun(this.value)
+    this.hideModal()
+  }
+
+  confirmSelect() {
+    this.$emit(ON_AMOUNT_SELECT, this.value)
+    this.confirmFun && this.confirmFun(this.value)
+    this.hideModal()
+  }
+
+  hideModal() {
+    this.modalShow = false
+    this.confirmFun = (id: number) => { console.log(id) }
+    this.cancelFun = (reason: any) => { console.log(reason) }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.chain-price-modal{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  box-sizing: border-box;
+  .modal-bg{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+    background-color: #000000a3;
+  }
+  .modal-content{
+    width: 500px;
+    background-color: #291a61;
+    max-height: 400px;
+    position: relative;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 15vh auto 0;
+    display: flex;
+    flex-direction: column;
+    border-radius: 12px;
+    .modal-title{
+      color: white;
+      padding: 15px 20px;
+      border-bottom: 1px solid rgba(195, 195, 195, 0.14);
+    }
+    .modal-body {
+      padding: 46px 20px 20px;;
+    }
+    .modal-footer {
+      width: 100%;
+      text-align: right;
+      padding: 10px 20px 20px;
+      box-sizing: border-box;
+      display: flex;
+      gap: 20px;
+      justify-content: flex-end;
+      .btn {
+        padding: 0 30px;
+        height: 45px;
+        &.cancel-btn{
+          background-color: gray;
+        }
+        &.confirm-btn {
+          background-color: #009c4a;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.el-slider {
+  height: 62px;
+  .el-slider__runway{
+    background-color: #161C48;
+    .el-slider__bar{
+      background-color: #46E0F4;
+    }
+    .el-slider__stop{
+      background-color: #46E0F4;
+    }
+    .el-slider__button-wrapper{
+      .el-slider__button{
+        background-color: #46E0F4;
+        border: none;
+      }
+    }
+  }
+  .el-slider__input {
+    .el-input .el-input__inner{
+      border: 0.0625em solid #51529D;
+    }
+  }
+}
+</style>

src/components/market/wallet/CoinCard.vue

@@ -26,6 +26,7 @@ export interface ICoinData{
   type: number
   name: string
   symbol: string
+  id: string
   amount: number | string
   icon: any
   price: string|number

src/components/market/wallet/WalletPanel.vue

@@ -42,6 +42,7 @@
         @coin-card-clicked = "onGameCardClicked"
         :key="d.symbol"></coin-card>
     </div>
+    <price-picker-modal></price-picker-modal>
   </div>
 </template>
 <script lang="ts">
@@ -54,10 +55,14 @@ import PlaceholderPanel from '@/components/market/wallet/PlaceholderPanel.vue'
 import ChainManager from '@/chain/ChainManager'
 import { CONTRACT_ADDRESS } from '@/configs/config_chain'
 import { formatPrice } from '@/utils/chain.util'
+import { getUserInfo } from '@/api/User'
+import PricePickerModal, { SHOW_AMOUNT_MODAL } from '@/components/market/PricePickerModal.vue'
+import { EventBus, SHOW_CHAIN_MODAL } from '@/utils/event-bus'
 
 @Component({
   name: 'WalletPanel',
   components: {
+    PricePickerModal,
     PlaceholderPanel,
     GameCoinCard,
     CoinCard,
@@ -80,6 +85,7 @@ export default class WalletPanel extends Vue {
   private accountChange() {
     this.changeNet(this.nets[0].id)
     this.updateCurrencies()
+    this.updateGameCoins()
   }
 
   private currencies: ICurrentData[] = []
@@ -88,6 +94,7 @@ export default class WalletPanel extends Vue {
     {
       name: 'CEBG Coin',
       type: 0,
+      id: 'cec',
       symbol: 'cec',
       amount: '-',
       icon: require('@/assets/market/cec.png'),
@@ -98,6 +105,7 @@ export default class WalletPanel extends Vue {
     {
       name: 'CEBG Gem',
       type: 0,
+      id: 'ceg',
       symbol: 'ceg',
       amount: '-',
       icon: require('@/assets/market/ceg.png'),
@@ -111,6 +119,7 @@ export default class WalletPanel extends Vue {
     {
       name: 'CEBG Coin',
       type: 1,
+      id: 'diamond',
       symbol: 'gCEC',
       amount: '-',
       icon: require('@/assets/market/cec.png'),
@@ -121,6 +130,7 @@ export default class WalletPanel extends Vue {
     {
       name: 'CEBG Gem',
       type: 1,
+      id: 'gold',
       symbol: 'gCEG',
       amount: '-',
       icon: require('@/assets/market/ceg.png'),
@@ -213,23 +223,13 @@ export default class WalletPanel extends Vue {
 
   async onCardClicked(data: ICoinData) {
     console.log('on coin card clicked: ', data)
-    let value
+    let value = 0
     try {
-      const msgData: any = await this.$prompt('Please input amount to deposit', 'Info', {
+      value = await this.pickAmount({
-        confirmButtonText: 'CONFIRM',
+        min: 1,
-        cancelButtonText: 'CANCEL',
+        max: data.amount,
-        inputPattern: /\d/,
+        title: 'Please input amount to deposit'
-        inputErrorMessage: 'coin amount',
-        inputValidator: (val: any) => {
-          if (isNaN(val)) {
-            return 'amount should be number'
-          } else if (parseInt(val) > parseInt(data.amount + '')) {
-            return `amount must lower than ${data.amount}`
-          }
-          return true
-        }
       })
-      value = msgData.value
     } catch (err) {
       this.$message({
         type: 'info',
@@ -241,7 +241,9 @@ export default class WalletPanel extends Vue {
     }
 
     try {
-      await this.beginTransfer(data, parseInt(value))
+      const res = await this.beginTransfer(data, value)
+      console.log(res)
+      const txHash = res.transactionHash
     } catch (err) {
       console.log(err)
       this.$message({
@@ -252,17 +254,70 @@ export default class WalletPanel extends Vue {
   }
 
   async beginTransfer(data: ICoinData, amount: number) {
-    const res = await this.chainManager.transferToAccount({
+    return this.chainManager.transferToAccount({
       to: '0x42448C6a38c08637218D8327b748F213fC2c0231',
       amount: amount,
       chainId: data.chain!,
       address: data.address!
     })
-    console.log(res)
   }
 
   async onGameCardClicked(data: ICoinData) {
     console.log('on game card clicked: ', data)
+    let value = 0
+    try {
+      value = await this.pickAmount({
+        min: 1,
+        max: data.amount,
+        title: 'Please input amount to claim'
+      })
+    } catch (err) {
+      this.$message({
+        type: 'info',
+        message: 'User cancel'
+      })
+    }
+    if (!value) {
+      return
+    }
+    console.log('begin claim')
+  }
+
+  async updateGameCoins() {
+    const data = { account: AppModule.accountId }
+    // const res: any = await getUserInfo(data)
+    const res: any = {
+      errcode: 0, // 错误码
+      errmsg: '', // 错误描述
+      info: { // struct BcUserInfo, 用户信息
+        account: '', // 账号
+        gold: 1000, // 金币
+        diamond: 2000 // 钻石
+      }
+    }
+    if (res.info) {
+      const info = res.info
+      for (let i = 0, l = this.gameCoinList.length; i < l; i++) {
+        const data = this.gameCoinList[i]
+        data.amount = info[data.id] || 0
+        data.btnDisable = data.amount === 0
+        this.$set(this.gameCoinList, i, data)
+      }
+    }
+  }
+
+  pickAmount(data: any) {
+    return new Promise<number>((resolve, reject) => {
+      data.current = data.current || data.min
+      data.confirmFun = (val: number) => {
+        resolve && resolve(val)
+      }
+      data.cancelFun = () => {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        reject && reject('cancel select')
+      }
+      EventBus.$emit(SHOW_AMOUNT_MODAL, data)
+    })
   }
 }
 </script>

src/main.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import '@/styles/index.scss'
 
 import App from './App.vue'
-import { Loading, Message, MessageBox, Notification, Slider, Tooltip } from 'element-ui'
+import { Loading, Message, MessageBox, Notification, Button, Slider, Tooltip } from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
@@ -13,6 +13,7 @@ import VueClipboard from 'vue-clipboard2'
 Vue.use(Loading.directive)
 Vue.use(Slider)
 Vue.use(Tooltip)
+Vue.use(Button)
 Vue.use(SvgIcon, {
   tagName: 'svg-icon'
 })