e

components/MobileBuyNft.vue

@@ -1,142 +1,108 @@
 <template>
-    <div class="page">
-        <template v-if="data === null">
-            <img class="loading" src="../static/svg/icon-loading.svg" />
-        </template>
-        <template v-else>
-            <div class="swipe" v-if="curItem">
-                <div class="show">
-                    <img :src="curItem.imagePath" />
-                </div>
-                <div class="list">
-                    <div
-                        class="item"
-                        :class="{ on: curItem.nftItemId === item.nftItemId }"
-                        :key="index"
-                        @click="select(item)"
-                        v-for="(item, index) in listData">
-                        <img :src="item.imagePath" />
-                    </div>
-                </div>
-            </div>
-            <div class="desc line" v-if="nftMetaData.description">
-                <div class="title">Description</div>
-                <div class="desc-content" v-html="nftMetaData.description"></div>
-            </div>
-            <div class="prop line" v-if="nftMetaData.properties && nftMetaData.properties.length">
-                <div class="title">Properties</div>
-                <div class="prop-content">
-                    <div
-                        class="prop-item"
-                        v-for="(filedValueItem, filedValueIndex) in nftMetaData.properties"
-                        :key="filedValueIndex"
-                    >
-                        {{ filedValueItem.name }}
-                        <div class="prop-name">
-                            {{ filedValueItem.value }}
-                        </div>
-                        {{ filedValueItem.description }}
-                    </div>
-                </div>
-            </div>
-            <div class="about line" v-if="nftMetaData.about">
-                <div class="title">About</div>
-                <div class="about-content" v-html="nftMetaData.about"></div>
-            </div>
-            <div style="height:150px"></div>
-            <div class="buy">
-                <div class="random">
-                    <img src="../static/img/icon_nft_random.png" />
-                    <span>Randomly Get Different Styles of NFTs</span>
-                </div>
-                <template v-if="data.salePlans.length">
-                    <div v-for="(item, index) in data.salePlans" :key="index">
-                        <template v-if="item.itemCount == 1">
-                            <template v-if="purchaseStatus !== 0">
-                                <div
-                                    class="btn"
-                                    :class="{ disable: !((data.perUserBuyLimit - data.userBuyCount) >= 1 && (data.itemTotalCount - data.itemSoldCount) >= 1) }"
-                                    @click="goBuy(((data.perUserBuyLimit - data.userBuyCount) >= 1 && (data.itemTotalCount - data.itemSoldCount) >= 1))">
-                                    <div class="l">BUY {{item.itemCount}}</div>
-                                    <FontZoom width="210">
-                                        <template v-if="item.currencyCode !== 'USD'">
-                                            <template v-if="item.price.length + item.currencyInfo.tokenSymbol.length >= 30">
-                                                <div class="tr">
-                                                    <div><img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price | floatPrice(4) }}</div>
-                                                    <div>{{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice | floatPrice(2)}})</div>
-                                                </div>
-                                            </template>
-                                            <template v-else>
-                                                <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price | floatPrice(4) }} {{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice | floatPrice(2)}})
-                                            </template>
-                                        </template>
-                                        <template v-else>
-                                            ${{item.usdPrice | floatPrice(2)}}
-                                        </template>
-                                    </FontZoom>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <div
-                                    class="btn disable">
-                                    <div class="l">BUY {{item.itemCount}}</div>
-                                    <FontZoom width="210">
-                                        <template v-if="item.currencyCode !== 'USD'">
-                                            <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price | floatPrice(4) }} {{ item.currencyInfo.tokenSymbol }} (${{item.usdPrice | floatPrice(2)}})
-                                        </template>
-                                        <template v-else>
-                                            ${{item.usdPrice | floatPrice(2)}}
-                                        </template>
-                                    </FontZoom>
-                                </div>
-                            </template>
-                        </template>
-                    </div>
-                </template>
-                <template v-else>
-                    <template v-if="purchaseStatus !== 0">
-                        <div
-                            class="btn"
-                            @click="goBuy()">
-                            BUY 1
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div
-                            class="btn disable">
-                            BUY 1
-                        </div>
-                    </template>
-                </template>
-                <div class="sale">
-                    <div class="l">SOLD: {{ data.itemSoldCount || 0 }}/{{ data.itemTotalCount }}</div>
-                    <div class="r" v-if="data.perUserBuyLimit < data.itemTotalCount">Buy Limit: {{ data.userBuyCount || 0 }}/{{ data.perUserBuyLimit }}</div>
-                </div>
-            </div>
-        </template>
+	<div class="page">
+		<template v-if="data === null">
+			<img class="loading" src="../static/svg/icon-loading.svg" />
+		</template>
+		<template v-else>
+			<div class="swipe" v-if="curItem">
+				<div class="show">
+					<img :src="curItem.imagePath" />
+				</div>
+				<div class="list">
+					<div class="item" :class="{ on: curItem.nftItemId === item.nftItemId }" :key="index" @click="select(item)" v-for="(item, index) in listData">
+						<img :src="item.imagePath" />
+					</div>
+				</div>
+			</div>
+			<div class="desc line" v-if="nftMetaData.description">
+				<div class="title">Description</div>
+				<div class="desc-content" v-html="nftMetaData.description"></div>
+			</div>
+			<div class="prop line" v-if="nftMetaData.properties && nftMetaData.properties.length">
+				<div class="title">Properties</div>
+				<div class="prop-content">
+					<div class="prop-item" v-for="(filedValueItem, filedValueIndex) in nftMetaData.properties" :key="filedValueIndex">
+						{{ filedValueItem.name }}
+						<div class="prop-name">
+							{{ filedValueItem.value }}
+						</div>
+						{{ filedValueItem.description }}
+					</div>
+				</div>
+			</div>
+			<div class="about line" v-if="nftMetaData.about">
+				<div class="title">About</div>
+				<div class="about-content" v-html="nftMetaData.about"></div>
+			</div>
+			<div style="height: 150px"></div>
+			<div class="buy">
+				<div class="random">
+					<img src="../static/img/icon_nft_random.png" />
+					<span>Randomly Get Different Styles of NFTs</span>
+				</div>
+				<template v-if="data.salePlans.length">
+					<div v-for="(item, index) in data.salePlans" :key="index">
+						<template v-if="item.itemCount == 1">
+							<template v-if="purchaseStatus !== 0">
+								<div class="btn" :class="{ disable: !(data.perUserBuyLimit - data.userBuyCount >= 1 && data.itemTotalCount - data.itemSoldCount >= 1) }" @click="goBuy(data.perUserBuyLimit - data.userBuyCount >= 1 && data.itemTotalCount - data.itemSoldCount >= 1)">
+									<div class="l">BUY {{ item.itemCount }}</div>
+									<FontZoom width="210">
+										<template v-if="item.currencyCode !== 'USD'">
+											<template v-if="item.price.length + item.currencyInfo.tokenSymbol.length >= 30">
+												<div class="tr">
+													<div><img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price | floatPrice(4) }}</div>
+													<div>{{ item.currencyInfo.tokenSymbol }} (${{ item.usdPrice | floatPrice(2) }})</div>
+												</div>
+											</template>
+											<template v-else> <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price | floatPrice(4) }} {{ item.currencyInfo.tokenSymbol }} (${{ item.usdPrice | floatPrice(2) }}) </template>
+										</template>
+										<template v-else> ${{ item.usdPrice | floatPrice(2) }} </template>
+									</FontZoom>
+								</div>
+							</template>
+							<template v-else>
+								<div class="btn disable">
+									<div class="l">BUY {{ item.itemCount }}</div>
+									<FontZoom width="210">
+										<template v-if="item.currencyCode !== 'USD'"> <img class="icon" :src="item.currencyInfo.iconPath" /> {{ item.price | floatPrice(4) }} {{ item.currencyInfo.tokenSymbol }} (${{ item.usdPrice | floatPrice(2) }}) </template>
+										<template v-else> ${{ item.usdPrice | floatPrice(2) }} </template>
+									</FontZoom>
+								</div>
+							</template>
+						</template>
+					</div>
+				</template>
+				<template v-else>
+					<template v-if="purchaseStatus !== 0">
+						<div class="btn" @click="goBuy()">BUY 1</div>
+					</template>
+					<template v-else>
+						<div class="btn disable">BUY 1</div>
+					</template>
+				</template>
+				<div class="sale">
+					<div class="l">SOLD: {{ data.itemSoldCount || 0 }}/{{ data.itemTotalCount }}</div>
+					<div class="r" v-if="data.perUserBuyLimit < data.itemTotalCount">Buy Limit: {{ data.userBuyCount || 0 }}/{{ data.perUserBuyLimit }}</div>
+				</div>
+			</div>
+		</template>
 
-        <van-popup
-            round
-            v-model="loginLayer"
-            position="bottom">
-            <div class="login">
-                <div class="title">In order to purchase the NFT, you need to</div>
-                <div class="btn" @click="login">
-                    <button-login
-                        @success="loginSuccess"
-                        @error="loginError">
-                    </button-login>
-                    <div class="text">Login Twitter</div>
-                </div>
-            </div>
-        </van-popup>
+		<van-popup round v-model="loginLayer" position="bottom">
+			<div class="login">
+				<div class="title">In order to purchase the NFT, you need to</div>
+				<div class="btn" @click="login">
+					<button-login @success="loginSuccess" @error="loginError"> </button-login>
+					<div class="text">Login Twitter</div>
+				</div>
+			</div>
+		</van-popup>
 
-        <!-- loading -->
-        <div class="loginLoading" v-if="loading">
-            <van-loading color="#1D9BF0"></van-loading>
-        </div>
-        <div class="loginLoadingBg" v-if="loading"></div>
-    </div>
+		<!-- loading -->
+		<div class="loginLoading" v-if="loading">
+			<van-loading color="#1D9BF0"></van-loading>
+		</div>
+		<div class="loginLoadingBg" v-if="loading"></div>
+	</div>
 </template>
 
 <script>
@@ -149,405 +115,405 @@ import { postRequest } from '../http';
 import { getStorage, storageKey } from '../utils/help';
 
 export default {
-    name: 'mobileBuyNft',
-    components: {
-        FontZoom,
-        ButtonLogin,
-    },
-    data() {
-        return {
-            data: null,
-            curItem: null,
-            listData: [],
-            nftMetaData: {},
-            loading: false,
-            loginLayer: false,
-        }
-    },
-    props: {
-        purchaseStatus: {
-            type: Number,
-            default: 0
-        }
-    },
-    filters: {
-        floatPrice(price, num) {
-            if (price.indexOf('.') >= 0) {
-                let reg = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${num}})?).*$`, "g");
-                price = price.replace(reg, '$1');
-            }
-            return price;
-        }
-    },
-    created() {
-        this.getSaleInfo()
-        // report
-        Report.log({
-            pageSource: Report.pageSource.nftPurchasePage,
-            params: {
-                eventData: {
-                    businessType: Report.businessType.pageView,
-                },
-                extParams: {
-                    userAgent: window.navigator.userAgent,
-                }
-            }
-        })
-    },
-    methods: {
-        select(item) {
-            this.curItem = item;
-            this.nftMetaData = JSON.parse(item['metadata']);
-        },
-        getSaleInfo() {
-            postRequest(Api.getNftMysteryBoxSaleInfo, {
-                params: {
-                    nftProjectId: this.$route.params.id
-                },
-            }).then(res => {
-                let { code, data } = res;
-                if (code === 0) {
-                    this.data = data;
-                    this.listData = data.showItems;
-                    this.curItem = data.showItems[0];
-                    this.nftMetaData = JSON.parse(data.showItems[0]['metadata']);
-                    // set title
-                    document.title = data['nftProjectName'] + ` NFT`;
-                }
-            })
-        },
-        goBuy(isNext = true) {
-            if (isNext === false) return;
+	name: 'mobileBuyNft',
+	components: {
+		FontZoom,
+		ButtonLogin,
+	},
+	data() {
+		return {
+			data: null,
+			curItem: null,
+			listData: [],
+			nftMetaData: {},
+			loading: false,
+			loginLayer: false,
+		};
+	},
+	props: {
+		purchaseStatus: {
+			type: Number,
+			default: 0,
+		},
+	},
+	filters: {
+		floatPrice(price, num) {
+			if (price.indexOf('.') >= 0) {
+				let reg = new RegExp(`^\\D*(\\d*(?:\\.\\d{0,${num}})?).*$`, 'g');
+				price = price.replace(reg, '$1');
+			}
+			return price;
+		},
+	},
+	created() {
+		this.getSaleInfo();
+		// report
+		Report.log({
+			pageSource: Report.pageSource.nftPurchasePage,
+			params: {
+				eventData: {
+					businessType: Report.businessType.pageView,
+				},
+				extParams: {
+					userAgent: window.navigator.userAgent,
+				},
+			},
+		});
+	},
+	methods: {
+		select(item) {
+			this.curItem = item;
+			this.nftMetaData = JSON.parse(item['metadata']);
+		},
+		getSaleInfo() {
+			postRequest(Api.getNftMysteryBoxSaleInfo, {
+				params: {
+					nftProjectId: this.$route.params.id,
+				},
+			}).then((res) => {
+				let { code, data } = res;
+				if (code === 0) {
+					this.data = data;
+					this.listData = data.showItems;
+					this.curItem = data.showItems[0];
+					this.nftMetaData = JSON.parse(data.showItems[0]['metadata']);
+					// set title
+					document.title = data['nftProjectName'] + ` NFT`;
+				}
+			});
+		},
+		goBuy(isNext = true) {
+			if (isNext === false) return;
 
-            let userInfo = getStorage(storageKey.userInfo)
-            if (!!userInfo) {
-                this.loginSuccess(userInfo, false)
-            } else {
-                this.loginLayer = true;
-                // report
-                Report.log({
-                    pageSource: Report.pageSource.nftLoginPage,
-                    params: {
-                        eventData: {
-                            businessType: Report.businessType.pageView,
-                        },
-                        extParams: {
-                            userAgent: window.navigator.userAgent,
-                        }
-                    }
-                })
-            }
+			let userInfo = getStorage(storageKey.userInfo);
+			if (userInfo) {
+				this.loginSuccess(userInfo, false);
+			} else {
+				this.loginLayer = true;
+				// report
+				Report.log({
+					pageSource: Report.pageSource.nftLoginPage,
+					params: {
+						eventData: {
+							businessType: Report.businessType.pageView,
+						},
+						extParams: {
+							userAgent: window.navigator.userAgent,
+						},
+					},
+				});
+			}
 
-            // report
-            Report.log({
-                pageSource: Report.pageSource.nftPurchasePage,
-                params: {
-                    eventData: {
-                        businessType: Report.businessType.buttonClick,
-                        objectType: Report.objectType.buyNftButton,
-                    },
-                    extParams: {
-                        userAgent: window.navigator.userAgent,
-                    }
-                }
-            })
-        },
-        login() {
-            this.loading = true;
-            Report.log({
-                pageSource: Report.pageSource.nftLoginPage,
-                params: {
-                    eventData: {
-                        businessType: Report.businessType.buttonClick,
-                        objectType: Report.objectType.loginTwitterButton,
-                    },
-                    extParams: {
-                        userAgent: window.navigator.userAgent,
-                    }
-                }
-            })
-        },
-        loginSuccess(userInfo, isReport = true) {
-            this.$router.push({
-                name: 'Payment',
-                query: {
-                    nftProjectId: this.$route.params.id,
-                    account: this.$route.params.account,
-                }
-            });
-            if (isReport) {
-                Report.log({
-                    pageSource: Report.pageSource.nftLoginPage,
-                    params: {
-                        eventData: {
-                            businessType: Report.businessType.buttonClick,
-                            objectType: Report.objectType.loginTwitterButton,
-                        },
-                        extParams: {
-                            'login-result': 'sucess',
-                            userAgent: window.navigator.userAgent,
-                        }
-                    }
-                })
-            }
-        },
-        loginError() {
-            Toast('login fail');
-            this.loading = false;
-            Report.log({
-                pageSource: Report.pageSource.nftLoginPage,
-                params: {
-                    eventData: {
-                        businessType: Report.businessType.buttonClick,
-                        objectType: Report.objectType.loginTwitterButton,
-                    },
-                    extParams: {
-                        'login-result': 'fail',
-                        userAgent: window.navigator.userAgent,
-                    }
-                }
-            })
-        }
-    }
-}
+			// report
+			Report.log({
+				pageSource: Report.pageSource.nftPurchasePage,
+				params: {
+					eventData: {
+						businessType: Report.businessType.buttonClick,
+						objectType: Report.objectType.buyNftButton,
+					},
+					extParams: {
+						userAgent: window.navigator.userAgent,
+					},
+				},
+			});
+		},
+		login() {
+			this.loading = true;
+			Report.log({
+				pageSource: Report.pageSource.nftLoginPage,
+				params: {
+					eventData: {
+						businessType: Report.businessType.buttonClick,
+						objectType: Report.objectType.loginTwitterButton,
+					},
+					extParams: {
+						userAgent: window.navigator.userAgent,
+					},
+				},
+			});
+		},
+		loginSuccess(userInfo, isReport = true) {
+			this.$router.push({
+				name: 'Payment',
+				query: {
+					nftProjectId: this.$route.params.id,
+					account: this.$route.params.account,
+				},
+			});
+			if (isReport) {
+				Report.log({
+					pageSource: Report.pageSource.nftLoginPage,
+					params: {
+						eventData: {
+							businessType: Report.businessType.buttonClick,
+							objectType: Report.objectType.loginTwitterButton,
+						},
+						extParams: {
+							'login-result': 'sucess',
+							userAgent: window.navigator.userAgent,
+						},
+					},
+				});
+			}
+		},
+		loginError() {
+			Toast('login fail');
+			this.loading = false;
+			Report.log({
+				pageSource: Report.pageSource.nftLoginPage,
+				params: {
+					eventData: {
+						businessType: Report.businessType.buttonClick,
+						objectType: Report.objectType.loginTwitterButton,
+					},
+					extParams: {
+						'login-result': 'fail',
+						userAgent: window.navigator.userAgent,
+					},
+				},
+			});
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
 .page {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    .loading {
-        position: absolute;
-        transform: translate(-50%, -50%);
-        top: 50%;
-        left: 50%;
-        margin: auto;
-        width: 40px;
-        border-radius: 50%;
-    }
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+	.loading {
+		position: absolute;
+		transform: translate(-50%, -50%);
+		top: 50%;
+		left: 50%;
+		margin: auto;
+		width: 40px;
+		border-radius: 50%;
+	}
 }
 .swipe {
-    .show {
-        overflow: hidden;
-        width: 18rem;
-        height: 18rem;
-        margin: 1rem auto;
-        border-radius: 6px;
-        background-color: #efefef;
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    .list {
-        height: 64px;
-        margin: 0 16px;
-        font-size: 0;
-        overflow-x: auto;
-        white-space: nowrap;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        .item {
-            display: inline-block;
-            overflow: hidden;
-            opacity: .2;
-            width: 58px;
-            height: 58px;
-            margin: 0 3px;
-            border-radius: 4px;
-            background-color: #efefef;
-            img {
-                width: 100%;
-                height: 100%;
-            }
-            &:first-child {
-                margin-left: 0;
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-            &.on {
-                opacity: 1;
-            }
-        }
-    }
+	.show {
+		overflow: hidden;
+		width: 18rem;
+		height: 18rem;
+		margin: 1rem auto;
+		border-radius: 6px;
+		background-color: #efefef;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.list {
+		height: 64px;
+		margin: 0 16px;
+		font-size: 0;
+		overflow-x: auto;
+		white-space: nowrap;
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		.item {
+			display: inline-block;
+			overflow: hidden;
+			opacity: 0.2;
+			width: 58px;
+			height: 58px;
+			margin: 0 3px;
+			border-radius: 4px;
+			background-color: #efefef;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+			&:first-child {
+				margin-left: 0;
+			}
+			&:last-child {
+				margin-right: 0;
+			}
+			&.on {
+				opacity: 1;
+			}
+		}
+	}
 }
 .line {
-    border: 1px solid #e3e3e3;
-    border-radius: 10px;
-    padding: 14px;
-    margin: 0 16px 12px 16px;
-    box-sizing: border-box;
+	border: 1px solid #e3e3e3;
+	border-radius: 10px;
+	padding: 14px;
+	margin: 0 16px 12px 16px;
+	box-sizing: border-box;
 
-    .title {
-        font-weight: 600;
-        font-size: 14px;
-    }
+	.title {
+		font-weight: 600;
+		font-size: 14px;
+	}
 }
 
 .desc {
-    margin-top: 10px;
-    .desc-content {
-        font-weight: 500;
-        font-size: 14px;
-        color: #929292;
+	margin-top: 10px;
+	.desc-content {
+		font-weight: 500;
+		font-size: 14px;
+		color: #929292;
 
-        span {
-            color: #1d9bf0;
-        }
-    }
+		span {
+			color: #1d9bf0;
+		}
+	}
 }
 
 .prop {
-    .prop-content {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 12px;
+	.prop-content {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 12px;
 
-        .prop-item {
-            width: 48%;
-            min-height: 88px;
-            background: #f8f8f8;
-            border-radius: 10px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding: 8px;
-            box-sizing: border-box;
-            align-items: center;
-            font-weight: 500;
-            font-size: 12px;
-            color: #929292;
-            margin-bottom: 10px;
+		.prop-item {
+			width: 48%;
+			min-height: 88px;
+			background: #f8f8f8;
+			border-radius: 10px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding: 8px;
+			box-sizing: border-box;
+			align-items: center;
+			font-weight: 500;
+			font-size: 12px;
+			color: #929292;
+			margin-bottom: 10px;
 
-            .prop-name {
-                font-weight: 700;
-                font-size: 17px;
-                margin-top: 6px;
-                margin-bottom: 8px;
-                color: #000;
-                word-break: break-all;
-            }
-        }
-        .prop-item:nth-child(odd) {
-            margin-right: 8px;
-        }
-    }
+			.prop-name {
+				font-weight: 700;
+				font-size: 17px;
+				margin-top: 6px;
+				margin-bottom: 8px;
+				color: #000;
+				word-break: break-all;
+			}
+		}
+		.prop-item:nth-child(odd) {
+			margin-right: 8px;
+		}
+	}
 }
 
 .about-content {
-    margin-top: 22px;
-    .section {
-        font-weight: 400;
-        font-size: 14px;
-        margin-bottom: 20px;
-    }
+	margin-top: 22px;
+	.section {
+		font-weight: 400;
+		font-size: 14px;
+		margin-bottom: 20px;
+	}
 }
 
 .buy {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: #fff;
-    padding: 10px 16px 25px 16px;
-    border-top: solid 1px #E3E3E3;
-    .random {
-        color: #8C7D43;
-        font-size: 14px;
-        height: 30px;
-        img {
-            width: 20px;
-            height: 20px;
-            vertical-align: middle;
-        }
-    }
-    .btn {
-        display: flex;
-        font-size: 16px;
-        color: #ffffff;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        height: 50px;
-        padding: 0 14px;
-        font-weight: 700;
-        border-radius: 50px;
-        background: #1D9BF0;
-        &.disable {
-            background: #CDCDCD;
-            cursor: not-allowed;
-        }
-        .icon {
-            width: 22px;
-            margin-right: 5px;
-        }
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	box-sizing: border-box;
+	background-color: #fff;
+	padding: 10px 16px 25px 16px;
+	border-top: solid 1px #e3e3e3;
+	.random {
+		color: #8c7d43;
+		font-size: 14px;
+		height: 30px;
+		img {
+			width: 20px;
+			height: 20px;
+			vertical-align: middle;
+		}
+	}
+	.btn {
+		display: flex;
+		font-size: 16px;
+		color: #ffffff;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 50px;
+		padding: 0 14px;
+		font-weight: 700;
+		border-radius: 50px;
+		background: #1d9bf0;
+		&.disable {
+			background: #cdcdcd;
+			cursor: not-allowed;
+		}
+		.icon {
+			width: 22px;
+			margin-right: 5px;
+		}
 
-        .l {
-            white-space: nowrap;
-        }
-    }
-    .sale {
-        display: flex;
-        justify-content: space-between;
-        color: #868686;
-        font-size: 12px;
-        line-height: 14px;
-        padding: 10px 0;
-        letter-spacing: 0.3px;
-    }
+		.l {
+			white-space: nowrap;
+		}
+	}
+	.sale {
+		display: flex;
+		justify-content: space-between;
+		color: #868686;
+		font-size: 12px;
+		line-height: 14px;
+		padding: 10px 0;
+		letter-spacing: 0.3px;
+	}
 
-    .tr {
-        text-align: right;
-    }
+	.tr {
+		text-align: right;
+	}
 }
 
 .login {
-    box-sizing: border-box;
-    padding: 38px 16px;
-    width: 100%;
-    .title {
-        font-size: 16px;
-        font-weight: 500;
-        margin-bottom: 20px;
-    }
-    .btn {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 50px;
-        border-radius: 50px;
-        background: #1D9BF0;
-        .text {
-            font-size: 18px;
-            font-weight: 700;
-            color: #ffffff;
-        }
-    }
+	box-sizing: border-box;
+	padding: 38px 16px;
+	width: 100%;
+	.title {
+		font-size: 16px;
+		font-weight: 500;
+		margin-bottom: 20px;
+	}
+	.btn {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 50px;
+		border-radius: 50px;
+		background: #1d9bf0;
+		.text {
+			font-size: 18px;
+			font-weight: 700;
+			color: #ffffff;
+		}
+	}
 }
 
 .loginLoading {
-    position: absolute;
-    z-index: 9991;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+	position: absolute;
+	z-index: 9991;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 .loginLoadingBg {
-    position: absolute;
-    z-index: 9990;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba($color: #000, $alpha: .1);
+	position: absolute;
+	z-index: 9990;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba($color: #000, $alpha: 0.1);
 }
 </style>

components/buttonLogin.vue

@@ -1,6 +1,6 @@
 <template>
-    <!-- 外层样式添加 position:relative 样式 -->
-    <div class="btnLogin" @click="login"></div>
+	<!-- 外层样式添加 position:relative 样式 -->
+	<div class="btnLogin" @click="login"></div>
 </template>
 
 <script>
@@ -8,94 +8,94 @@ import { getStorage, setStorage, removeStorage, storageKey, getOauthUrl, jumpUrl
 import { postRequest } from '../http';
 
 export default {
-    name: 'buttonLogin',
-    computed: {
-        userInfo() {
-            return getStorage(storageKey.userInfo);
-        }
-    },
-    data() {
-        return {
-            timer: null,
-        }
-    },
-    unmounted() {
-        clearInterval(this.timer);
-    },
-    methods: {
-        login() {
-            if (!!this.userInfo) {
-                // 已登录
-                this.$emit('success', this.userInfo)
-            } else {
-                // 未登录
-                this.twitterAuth()
-            }
-        },
-        async twitterAuth() {
-            let win
-            if (OSDetect() === 'ios') {
-                win = window.open();
-                win.opener = null;
-            }
+	name: 'buttonLogin',
+	computed: {
+		userInfo() {
+			return getStorage(storageKey.userInfo);
+		},
+	},
+	data() {
+		return {
+			timer: null,
+		};
+	},
+	unmounted() {
+		clearInterval(this.timer);
+	},
+	methods: {
+		login() {
+			if (this.userInfo) {
+				// 已登录
+				this.$emit('success', this.userInfo);
+			} else {
+				// 未登录
+				this.twitterAuth();
+			}
+		},
+		async twitterAuth() {
+			let win;
+			if (OSDetect() === 'ios') {
+				win = window.open();
+				win.opener = null;
+			}
 
-            postRequest(`/denet/user/twitterRequestToken`, {
-                params: {
-                    oauthCallback: `${jumpUrl}authlogin`,
-                },
-            }).then(({ code, data }) => {
-                if (code == 0) {
-                    if (OSDetect() === 'ios') {
-                        win.location.href = getOauthUrl(data.authToken);
-                    } else {
-                        win = window.open(getOauthUrl(data.authToken));
-                    }
+			postRequest(`/denet/user/twitterRequestToken`, {
+				params: {
+					oauthCallback: `${jumpUrl}authlogin`,
+				},
+			}).then(({ code, data }) => {
+				if (code == 0) {
+					if (OSDetect() === 'ios') {
+						win.location.href = getOauthUrl(data.authToken);
+					} else {
+						win = window.open(getOauthUrl(data.authToken));
+					}
 
-                    // timer
-                    this.timer = setInterval(() => {
-                        if (win && win.closed) {
-                            clearInterval(this.timer);
-                            this.twitterLogin(data);
-                        }
-                    }, 500);
-                } else {
-                    this.$emit('error')
-                }
-            })
-        },
-        twitterLogin(authData) {
-            let verifier = getStorage(storageKey.verifier);
-            if (verifier) {
-                postRequest(`/denet/user/twitterLogin`, {
-                    params: {
-                        consumerKey: authData.consumerKey,
-                        oauthToken: authData.authToken,
-                        oauthVerifier: verifier,
-                    },
-                }).then(({ code, data }) => {
-                    if (code == 0) {
-                        setStorage(storageKey.userInfo, data);
-                        removeStorage(storageKey.verifier);
-                        this.$emit('success', data)
-                    } else {
-                        this.$emit('error')
-                    }
-                });
-            } else {
-                this.$emit('error')
-            }
-        }
-    }
-}
+					// timer
+					this.timer = setInterval(() => {
+						if (win && win.closed) {
+							clearInterval(this.timer);
+							this.twitterLogin(data);
+						}
+					}, 500);
+				} else {
+					this.$emit('error');
+				}
+			});
+		},
+		twitterLogin(authData) {
+			let verifier = getStorage(storageKey.verifier);
+			if (verifier) {
+				postRequest(`/denet/user/twitterLogin`, {
+					params: {
+						consumerKey: authData.consumerKey,
+						oauthToken: authData.authToken,
+						oauthVerifier: verifier,
+					},
+				}).then(({ code, data }) => {
+					if (code == 0) {
+						setStorage(storageKey.userInfo, data);
+						removeStorage(storageKey.verifier);
+						this.$emit('success', data);
+					} else {
+						this.$emit('error');
+					}
+				});
+			} else {
+				this.$emit('error');
+			}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
 .btnLogin {
-    position: absolute;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+	position: absolute;
+	z-index: 10;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 </style>

pages/treasure/invite.vue

@@ -316,7 +316,7 @@ export default {
 				postNickName: this.detail.inviteUserInfo.nickName,
 				postId: this.detail.postId,
 				shareLinkId: this.$route.params.id,
-				channelName: this.$route.params.channel,
+				channelName: window.atob(this.$route.params.channel),
 			};
 			Cookies.set('jump_info', JSON.stringify(treasureInfo), { expires: 100 });
 		},