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

4
.env.development
View File

@ -1,7 +1,7 @@
VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d' VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
VUE_APP_BASE_API='http://game2006api-test.kingsome.cn' VUE_APP_BASE_API='http://game2006api-test.kingsome.cn'
VUE_APP_CHAIN_ID=1338 VUE_APP_CHAIN_ID=97
VUE_APP_CHAIN_RPC='http://192.168.100.22:8545' VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
VUE_APP_CHAIN_NAME='Smart Chain - Testnet' 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_NAME='name'

6
.env.production
View File

@ -1,7 +1,7 @@
VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d' VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
VUE_APP_BASE_API='http://192.168.100.21:81' VUE_APP_BASE_API='https://market.cebg.games'
VUE_APP_CHAIN_ID=1338 VUE_APP_CHAIN_ID=97
VUE_APP_CHAIN_RPC='http://192.168.100.22:8545' VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
VUE_APP_CHAIN_NAME='Smart Chain - Testnet' 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_NAME='name'

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=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <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 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,maximum-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0">--> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script src="/assets/libs/spine-webgl.js"></script> <script src="assets/libs/spine-webgl.js"></script>
<style> <style>
@font-face { @font-face {
font-family: title; font-family: title;
src: url('/assets/fonts/title.ttf'); src: url('assets/fonts/title.ttf');
} }
@font-face { @font-face {
font-family: zitic; 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 { .video-js .vjs-big-play-button {
top: 0; top: 0;

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

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

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

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

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

@ -4,14 +4,14 @@
<img src="@/assets/main/p1/icon_logo_t.png"> <img src="@/assets/main/p1/icon_logo_t.png">
</div> </div>
<div class="centerPart link-list"> <div class="centerPart link-list">
<a href="">Home</a> <a href="https://www.cebg.games">Home</a>
<a href="">Instruction</a> <a href="#">Instruction</a>
<a href="">About</a> <a href="#">About</a>
<a href="">Marketplace</a> <a href="#">Marketplace</a>
<a href="">Contact us</a> <a href="#">Contact us</a>
<a href="">Blog</a> <a href="#">Blog</a>
<a href="">Policy</a> <a href="#">Policy</a>
<a href="">Whitepaper</a> <a href="https://whitepaper.cebg.games">Whitepaper</a>
</div> </div>
<div class="rightPart"> <div class="rightPart">
<span class="community-title">JOIN OUR COMMUNITY</span> <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'}"> <li data-menuanchor="nft" @click="changeSection" :class="{'active': currentSection === 'nft'}">
<a href="#nft_section">Pre-sale</a> <a href="#nft_section">Pre-sale</a>
</li> </li>
<li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}"> <!-- <li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}">-->
<a href="#chip_section">Chip</a> <!-- <a href="#chip_section">Chip</a>-->
</li> <!-- </li>-->
<li v-if="accountId"> <li v-if="accountId">
<a href="mynft" >Mine</a> <a href="mynft" >Mine</a>
</li> </li>
@ -46,9 +46,9 @@
<li data-menuanchor="nft" @click="changeSection" :class="{'active': currentSection === 'nft'}"> <li data-menuanchor="nft" @click="changeSection" :class="{'active': currentSection === 'nft'}">
<a href="#nft_section">Pre-sale</a> <a href="#nft_section">Pre-sale</a>
</li> </li>
<li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}"> <!-- <li data-menuanchor="chip" @click="changeSection" :class="{'active': currentSection === 'chip'}">-->
<a href="#chip_section">CHIP</a> <!-- <a href="#chip_section">CHIP</a>-->
</li> <!-- </li>-->
<li v-if="accountId"> <li v-if="accountId">
<a href="mynft" >Mine</a> <a href="mynft" >Mine</a>
</li> </li>
@ -220,7 +220,7 @@ export default class extends Vue {
top: 40px; top: 40px;
right: 0; right: 0;
width: 50vw; width: 50vw;
background-image: url('../../assets/main/p1/bg_header.png'); background-color: #282828d9;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
justify-content: flex-start; 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] const priceData: any = data.currency_list[0]
heroData.discount = priceData.discount_rate heroData.discount = priceData.discount_rate
heroData.price = priceData.original_price heroData.price = priceData.original_price
heroData.decimals = priceData.decimals || 0
heroData.priceDiscount = priceData.discount_price heroData.priceDiscount = priceData.discount_price
heroData.currency = priceData.name heroData.currency = priceData.name
heroData.coinAddress = priceData.contract_address 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}"> <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=""/> <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>
<div class="price-label"> <div class="price-label">
<span :class="{'price': data.price !== data.priceDiscount}">{{data.priceDiscount || 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">{{data.price}} {{data.currency}}</span> <span v-if="data.price!==data.priceDiscount" class="price-old">{{priceShow}} {{data.currency}}</span>
</div> </div>
</div> </div>
<div class="class-div"> <div class="class-div">
@ -46,6 +46,16 @@ export default class extends Vue {
return AppModule.walletConnected 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() { get accountId() {
return AppModule.accountId return AppModule.accountId
} }
@ -71,20 +81,22 @@ export default class extends Vue {
EventBus.$emit(PRESALE_BEGIN) EventBus.$emit(PRESALE_BEGIN)
const account = AppModule.accountId const account = AppModule.accountId
try { try {
const price = this.bc.parsePrice(this.data.priceDiscount!, this.data.decimals!)
const { nonce, signature } = await this.bc.signPresale({ const { nonce, signature } = await this.bc.signPresale({
type: this.data.recordId!, type: this.data.recordId!,
paymentTokenAddress: this.data.coinAddress!, paymentTokenAddress: this.data.coinAddress!,
price: this.data.priceDiscount!, price,
buyerAddress: account buyerAddress: account
}) })
const buyData = { const buyData = {
buyer_address: AppModule.accountId, buyer_address: AppModule.accountId,
type: this.data.recordId, type: this.data.recordId,
price: this.data.priceDiscount, price,
payment_token_address: this.data.coinAddress, payment_token_address: this.data.coinAddress,
nonce, nonce,
signature signature
} }
await this.bc.increaseAllowance(this.data.coinAddress!, price)
const res: any = await buyBox(buyData) const res: any = await buyBox(buyData)
const orderId = res.order_id const orderId = res.order_id
localStorage.setItem('tmp_presale_order_id', orderId) localStorage.setItem('tmp_presale_order_id', orderId)

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

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

1
src/utils/SpineRender.ts
View File

@ -26,6 +26,7 @@ export interface ISpineData {
discount?: number discount?: number
recordId?: number recordId?: number
coinAddress?: string coinAddress?: string
decimals?: number
directBuy?: boolean directBuy?: boolean
showBuy?: boolean showBuy?: boolean
stopBuy?: 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 { AppModule } from '@/store/modules/app'
import Web3 from 'web3' import Web3 from 'web3'
import { MessageBox } from 'element-ui' import { MessageBox } from 'element-ui'
import { ERC20ABI, MALL_ADDRESS } from '@/utils/config_chain'
@singleton @singleton
export class BlockChain { export class BlockChain {
provider:any provider:any
web3: Web3 web3: Web3
web3Modal: Web3Modal web3Modal: Web3Modal
coinInstanceMap: Map<string, any>
constructor() { constructor() {
const chainId = parseInt(process.env.VUE_APP_CHAIN_ID!) const chainId = parseInt(process.env.VUE_APP_CHAIN_ID!)
this.coinInstanceMap = new Map()
AppModule.updateChainID(chainId) AppModule.updateChainID(chainId)
const rpc: any = { } const rpc: any = { }
rpc[chainId] = process.env.VUE_APP_CHAIN_RPC! 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() { get isWalletConnect() {
return !!this.web3Modal.cachedProvider return !!this.web3Modal.cachedProvider
} }
@ -75,11 +83,30 @@ export class BlockChain {
if (accounts && accounts.length > 0) { if (accounts && accounts.length > 0) {
AppModule.updateAccount(accounts[0]) AppModule.updateAccount(accounts[0])
} }
AppModule.updateWalletStatus(true) AppModule.updateWalletStatus(true)
} catch (err) { } 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() { public async disconnect() {
try { try {
await this.provider?.disconnect() await this.provider?.disconnect()
@ -163,7 +190,7 @@ export class BlockChain {
public async signPresale({ type, paymentTokenAddress, price, buyerAddress }: public async signPresale({ type, paymentTokenAddress, price, buyerAddress }:
{type: number {type: number
paymentTokenAddress: string paymentTokenAddress: string
price: number price: any
buyerAddress: string buyerAddress: string
}) { }) {
const nonce = Math.random() * 100000 | 0 const nonce = Math.random() * 100000 | 0
@ -175,4 +202,15 @@ export class BlockChain {
signature = signature.replace(/00$/, '1b').replace(/01$/, '1c') signature = signature.replace(/00$/, '1b').replace(/01$/, '1c')
return { nonce, signature } 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> <video-section></video-section>
<game-play-section></game-play-section> <game-play-section></game-play-section>
<nft-section></nft-section> <nft-section></nft-section>
<chip-section></chip-section>
<main-footer></main-footer> <main-footer></main-footer>
</main> </main>
</div> </div>
@ -22,13 +21,11 @@ import HomeSection from '@/components/main/HomeSection.vue'
import VideoSection from '@/components/main/VideoSection.vue' import VideoSection from '@/components/main/VideoSection.vue'
import GamePlaySection from '@/components/main/GamePlaySection.vue' import GamePlaySection from '@/components/main/GamePlaySection.vue'
import NftSection from '@/components/main/NftSection.vue' import NftSection from '@/components/main/NftSection.vue'
import ChipSection from '@/components/main/ChipSection.vue'
import MainFooter from '@/components/main/MainFooter.vue' import MainFooter from '@/components/main/MainFooter.vue'
@Component({ @Component({
name: 'Index', name: 'Index',
components: { components: {
MainFooter, MainFooter,
ChipSection,
NftSection, NftSection,
GamePlaySection, GamePlaySection,
VideoSection, VideoSection,