crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改界面, 修改购买流程, 修改字体

Browse Source
This commit is contained in:
zhl 2022-01-29 13:50:09 +08:00
parent eaa6292208
commit 867efa6759
16 changed files with 388 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env.development
View File

@ -1,9 +1,9 @@
VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
VUE_APP_BASE_API='http://game2006api-test.kingsome.cn'
VUE_APP_CHAIN_ID=1338
VUE_APP_CHAIN_RPC='http://192.168.100.22:8545'
VUE_APP_CHAIN_ID=97
VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
VUE_APP_CHAIN_NAME='Smart Chain - Testnet'
VUE_APP_CHAIN_EXPLORERURL = 'https://testnet.bscscan.com'
VUE_APP_CHAIN_EXPLORERURL='https://testnet.bscscan.com'
VUE_APP_CHAIN_CURRENCY_NAME='name'
VUE_APP_CHAIN_CURRENCY_SYMBOL='BNB'
VUE_APP_CHAIN_CURRENCY_DECIMALS=18

8
.env.production
View File

@ -1,9 +1,9 @@
VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
VUE_APP_BASE_API='http://192.168.100.21:81'
VUE_APP_CHAIN_ID=1338
VUE_APP_CHAIN_RPC='http://192.168.100.22:8545'
VUE_APP_BASE_API='https://market.cebg.games'
VUE_APP_CHAIN_ID=97
VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
VUE_APP_CHAIN_NAME='Smart Chain - Testnet'
VUE_APP_CHAIN_EXPLORERURL = 'https://testnet.bscscan.com'
VUE_APP_CHAIN_EXPLORERURL='https://testnet.bscscan.com'
VUE_APP_CHAIN_CURRENCY_NAME='name'
VUE_APP_CHAIN_CURRENCY_SYMBOL='BNB'
VUE_APP_CHAIN_CURRENCY_DECIMALS=18

BIN
public/assets/fonts/zitic.ttf
View File

Binary file not shown.

BIN
public/assets/fonts/zitic_b.ttf Executable file
View File

Binary file not shown.

12
public/index.html
View File

@ -2,22 +2,24 @@
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Oxanium">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/assets/libs/spine-webgl.js"></script>
<script src="assets/libs/spine-webgl.js"></script>
<style>
@font-face {
font-family: title;
src: url('/assets/fonts/title.ttf');
src: url('assets/fonts/title.ttf');
}
@font-face {
font-family: zitic;
src: url('/assets/fonts/zitic.ttf');
src: url('assets/fonts/zitic.ttf');
}
html *
{
font-family: zitic,serif;
}
.video-js .vjs-big-play-button {
top: 0;

17
src/components/main/GamePlaySection.vue
View File

@ -157,13 +157,13 @@ export default class extends Vue {
width: 600px;
height: 800px;
position: absolute;
left: 100px;
left: 1px;
bottom: 10px;
}
.hero-anim-img {
width: 600px;
position: absolute;
left: 100px;
left: 1px;
bottom: 10px;
}
.bottom-cover{
@ -203,6 +203,7 @@ export default class extends Vue {
@media (max-width: 767px) {
.title {
top: 60px;
width: 90vw;
}
.title img {
width: 100%;
@ -210,11 +211,11 @@ export default class extends Vue {
.hero-anim{
width: 450px;
height: 600px;
left: 10px;
left: 1px;
}
.hero-anim-img{
width: 50vw;
left: 10px;
left: 1px;
height: auto;
bottom: 20vh;
}
@ -277,7 +278,13 @@ export default class extends Vue {
.hero-anim{
width: 200px;
height: 500px;
left: 10px;
left: 1px;
}
.hero-anim-img{
width: 50vw;
left: 1px;
height: auto;
bottom: 20vh;
}
.color-content {
width: 70%;

1
src/components/main/HomeHero.vue
View File

@ -14,7 +14,6 @@ declare module 'vue/types/vue' {
data: ISpineData
}
}
// TODO:: 光效果显示一段时间后, 在显示英雄
@Component({
name: 'HomeHero',
props: ['data'],

16
src/components/main/MainFooter.vue
View File

@ -4,14 +4,14 @@
<img src="@/assets/main/p1/icon_logo_t.png">
</div>
<div class="centerPart link-list">
<a href="">Home</a>
<a href="">Instruction</a>
<a href="">About</a>
<a href="">Marketplace</a>
<a href="">Contact us</a>
<a href="">Blog</a>
<a href="">Policy</a>
<a href="">Whitepaper</a>
<a href="https://www.cebg.games">Home</a>
<a href="#">Instruction</a>
<a href="#">About</a>
<a href="#">Marketplace</a>
<a href="#">Contact us</a>
<a href="#">Blog</a>
<a href="#">Policy</a>
<a href="https://whitepaper.cebg.games">Whitepaper</a>
</div>
<div class="rightPart">
<span class="community-title">JOIN OUR COMMUNITY</span>

14
src/components/main/MainHeader.vue
View File

@ -21,9 +21,9 @@
<li data-menuanchor="nft" @click="changeSection" :class="{'active': currentSection === 'nft'}">
<a href="#nft_section">Pre-sale</a>
</li>
<li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}">
<a href="#chip_section">Chip</a>
</li>
<!-- <li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}">-->
<!-- <a href="#chip_section">Chip</a>-->
<!-- </li>-->
<li v-if="accountId">
<a href="mynft" >Mine</a>
</li>
@ -46,9 +46,9 @@
<li data-menuanchor="nft" @click="changeSection" :class="{'active': currentSection === 'nft'}">
<a href="#nft_section">Pre-sale</a>
</li>
<li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}">
<a href="#chip_section">CHIP</a>
</li>
<!-- <li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}">-->
<!-- <a href="#chip_section">CHIP</a>-->
<!-- </li>-->
<li v-if="accountId">
<a href="mynft" >Mine</a>
</li>
@ -220,7 +220,7 @@ export default class extends Vue {
top: 40px;
right: 0;
width: 50vw;
background-image: url('../../assets/main/p1/bg_header.png');
background-color: #282828d9;
background-repeat: no-repeat;
background-size: 100% 100%;
justify-content: flex-start;

1
src/components/main/NftSection.vue
View File

@ -205,6 +205,7 @@ export default class extends Vue {
const priceData: any = data.currency_list[0]
heroData.discount = priceData.discount_rate
heroData.price = priceData.original_price
heroData.decimals = priceData.decimals || 0
heroData.priceDiscount = priceData.discount_price
heroData.currency = priceData.name
heroData.coinAddress = priceData.contract_address

20
src/components/market/NftItem.vue
View File

@ -7,8 +7,8 @@
<div class="info-div" v-if="data.showBuy" @click="buyItem" :class="{'gray': data.stopBuy}">
<img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>
<div class="price-label">
<span :class="{'price': data.price !== data.priceDiscount}">{{data.priceDiscount || data.price}} {{data.currency}}</span>
<span v-if="data.price!==data.priceDiscount" class="price-old">{{data.price}} {{data.currency}}</span>
<span :class="{'price': data.price !== data.priceDiscount}">{{priceDiscountShow}} {{data.currency}}</span>
<span v-if="data.price!==data.priceDiscount" class="price-old">{{priceShow}} {{data.currency}}</span>
</div>
</div>
<div class="class-div">
@ -46,6 +46,16 @@ export default class extends Vue {
return AppModule.walletConnected
}
get priceDiscountShow() {
const v = Math.pow(10, this.data.decimals!)
return (this.data.priceDiscount! / v).toFixed(3)
}
get priceShow() {
const v = Math.pow(10, this.data.decimals!)
return (this.data.price! / v).toFixed(3)
}
get accountId() {
return AppModule.accountId
}
@ -71,20 +81,22 @@ export default class extends Vue {
EventBus.$emit(PRESALE_BEGIN)
const account = AppModule.accountId
try {
const price = this.bc.parsePrice(this.data.priceDiscount!, this.data.decimals!)
const { nonce, signature } = await this.bc.signPresale({
type: this.data.recordId!,
paymentTokenAddress: this.data.coinAddress!,
price: this.data.priceDiscount!,
price,
buyerAddress: account
})
const buyData = {
buyer_address: AppModule.accountId,
type: this.data.recordId,
price: this.data.priceDiscount,
price,
payment_token_address: this.data.coinAddress,
nonce,
signature
}
await this.bc.increaseAllowance(this.data.coinAddress!, price)
const res: any = await buyBox(buyData)
const orderId = res.order_id
localStorage.setItem('tmp_presale_order_id', orderId)

1
src/decorators/singleton.decorator.ts
View File

@ -2,7 +2,6 @@
* @singleton
* class Test {}
* new Test() === new Test() // returns `true`
* 也可以不使用 decorator
* const TestSingleton = singleton(Test)
* new TestSingleton() === new TestSingleton() //returns 'true'
*/

1
src/utils/SpineRender.ts
View File

@ -26,6 +26,7 @@ export interface ISpineData {
discount?: number
recordId?: number
coinAddress?: string
decimals?: number
directBuy?: boolean
showBuy?: boolean
stopBuy?: boolean

40
src/utils/blockchain.ts
View File

@ -4,15 +4,18 @@ import Web3Modal, { isMobile } from 'web3modal'
import { AppModule } from '@/store/modules/app'
import Web3 from 'web3'
import { MessageBox } from 'element-ui'
import { ERC20ABI, MALL_ADDRESS } from '@/utils/config_chain'
@singleton
export class BlockChain {
provider:any
web3: Web3
web3Modal: Web3Modal
coinInstanceMap: Map<string, any>
constructor() {
const chainId = parseInt(process.env.VUE_APP_CHAIN_ID!)
this.coinInstanceMap = new Map()
AppModule.updateChainID(chainId)
const rpc: any = { }
rpc[chainId] = process.env.VUE_APP_CHAIN_RPC!
@ -41,6 +44,11 @@ export class BlockChain {
}
}
loadJson(url: string) {
return fetch(url)
.then(response => response.json())
}
get isWalletConnect() {
return !!this.web3Modal.cachedProvider
}
@ -75,11 +83,30 @@ export class BlockChain {
if (accounts && accounts.length > 0) {
AppModule.updateAccount(accounts[0])
}
AppModule.updateWalletStatus(true)
} catch (err) {
}
}
private async initInstance(abi: any, address: string, account: string) {
return new this.web3.eth.Contract(
abi,
address,
{ from: account }
)
}
private async getCoinInstance(address: string) {
if (this.coinInstanceMap.has(address)) {
return this.coinInstanceMap.get(address)
} else {
const coinInstance = await this.initInstance(ERC20ABI, address, AppModule.accountId)
this.coinInstanceMap.set(address, coinInstance)
return coinInstance
}
}
public async disconnect() {
try {
await this.provider?.disconnect()
@ -163,7 +190,7 @@ export class BlockChain {
public async signPresale({ type, paymentTokenAddress, price, buyerAddress }:
{type: number
paymentTokenAddress: string
price: number
price: any
buyerAddress: string
}) {
const nonce = Math.random() * 100000 | 0
@ -175,4 +202,15 @@ export class BlockChain {
signature = signature.replace(/00$/, '1b').replace(/01$/, '1c')
return { nonce, signature }
}
public async increaseAllowance(address: string, price: string) {
const coinInstance: any = await this.getCoinInstance(address)
await coinInstance.methods.increaseAllowance(MALL_ADDRESS, price).send({ gas: 1000000 })
}
public parsePrice(price: number, decimals: number) {
const v = Math.pow(10, decimals)
const priceStr = (price / v) + ''
return this.web3.utils.toWei(priceStr)
}
}

290
src/utils/config_chain.ts Normal file
View File

@ -0,0 +1,290 @@
export const ERC20ABI = [
{
inputs: [
{
internalType: 'string',
name: 'name_',
type: 'string'
},
{
internalType: 'string',
name: 'symbol_',
type: 'string'
}
],
stateMutability: 'nonpayable',
type: 'constructor'
},
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: 'address',
name: 'owner',
type: 'address'
},
{
indexed: true,
internalType: 'address',
name: 'spender',
type: 'address'
},
{
indexed: false,
internalType: 'uint256',
name: 'value',
type: 'uint256'
}
],
name: 'Approval',
type: 'event'
},
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: 'address',
name: 'from',
type: 'address'
},
{
indexed: true,
internalType: 'address',
name: 'to',
type: 'address'
},
{
indexed: false,
internalType: 'uint256',
name: 'value',
type: 'uint256'
}
],
name: 'Transfer',
type: 'event'
},
{
inputs: [],
name: 'name',
outputs: [
{
internalType: 'string',
name: '',
type: 'string'
}
],
stateMutability: 'view',
type: 'function'
},
{
inputs: [],
name: 'symbol',
outputs: [
{
internalType: 'string',
name: '',
type: 'string'
}
],
stateMutability: 'view',
type: 'function'
},
{
inputs: [],
name: 'decimals',
outputs: [
{
internalType: 'uint8',
name: '',
type: 'uint8'
}
],
stateMutability: 'view',
type: 'function'
},
{
inputs: [],
name: 'totalSupply',
outputs: [
{
internalType: 'uint256',
name: '',
type: 'uint256'
}
],
stateMutability: 'view',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'account',
type: 'address'
}
],
name: 'balanceOf',
outputs: [
{
internalType: 'uint256',
name: '',
type: 'uint256'
}
],
stateMutability: 'view',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'recipient',
type: 'address'
},
{
internalType: 'uint256',
name: 'amount',
type: 'uint256'
}
],
name: 'transfer',
outputs: [
{
internalType: 'bool',
name: '',
type: 'bool'
}
],
stateMutability: 'nonpayable',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'owner',
type: 'address'
},
{
internalType: 'address',
name: 'spender',
type: 'address'
}
],
name: 'allowance',
outputs: [
{
internalType: 'uint256',
name: '',
type: 'uint256'
}
],
stateMutability: 'view',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'spender',
type: 'address'
},
{
internalType: 'uint256',
name: 'amount',
type: 'uint256'
}
],
name: 'approve',
outputs: [
{
internalType: 'bool',
name: '',
type: 'bool'
}
],
stateMutability: 'nonpayable',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'sender',
type: 'address'
},
{
internalType: 'address',
name: 'recipient',
type: 'address'
},
{
internalType: 'uint256',
name: 'amount',
type: 'uint256'
}
],
name: 'transferFrom',
outputs: [
{
internalType: 'bool',
name: '',
type: 'bool'
}
],
stateMutability: 'nonpayable',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'spender',
type: 'address'
},
{
internalType: 'uint256',
name: 'addedValue',
type: 'uint256'
}
],
name: 'increaseAllowance',
outputs: [
{
internalType: 'bool',
name: '',
type: 'bool'
}
],
stateMutability: 'nonpayable',
type: 'function'
},
{
inputs: [
{
internalType: 'address',
name: 'spender',
type: 'address'
},
{
internalType: 'uint256',
name: 'subtractedValue',
type: 'uint256'
}
],
name: 'decreaseAllowance',
outputs: [
{
internalType: 'bool',
name: '',
type: 'bool'
}
],
stateMutability: 'nonpayable',
type: 'function'
}
]
export const MALL_ADDRESS = '0x31F29C9A3D0c1c13C825475aebF0d964b5B47c45'

3
src/views/Main.vue
View File

@ -9,7 +9,6 @@
<video-section></video-section>
<game-play-section></game-play-section>
<nft-section></nft-section>
<chip-section></chip-section>
<main-footer></main-footer>
</main>
</div>
@ -22,13 +21,11 @@ import HomeSection from '@/components/main/HomeSection.vue'
import VideoSection from '@/components/main/VideoSection.vue'
import GamePlaySection from '@/components/main/GamePlaySection.vue'
import NftSection from '@/components/main/NftSection.vue'
import ChipSection from '@/components/main/ChipSection.vue'
import MainFooter from '@/components/main/MainFooter.vue'
@Component({
name: 'Index',
components: {
MainFooter,
ChipSection,
NftSection,
GamePlaySection,
VideoSection,