833 lines
20 KiB
Vue
833 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<navBar
|
|||
|
|
:navTitle="collectionsDetail.Name"
|
|||
|
|
:stickyShow="stickyShow"
|
|||
|
|
:color="'#000000'"
|
|||
|
|
:backBackGroundColor="'#699A70'"
|
|||
|
|
v-if="!isActive"
|
|||
|
|
:sfBack="true"
|
|||
|
|
@triggerSfBack="back"
|
|||
|
|
></navBar>
|
|||
|
|
<view
|
|||
|
|
class="fixed-box"
|
|||
|
|
:style="{ background: !isActive ? '#FFFFFF' : '#000000' }"
|
|||
|
|
>
|
|||
|
|
<view class="btn" v-if="!isActive">
|
|||
|
|
<u-button
|
|||
|
|
type="primary"
|
|||
|
|
:text="$t('navbar.back')"
|
|||
|
|
class="back"
|
|||
|
|
@click="back"
|
|||
|
|
></u-button>
|
|||
|
|
<u-button
|
|||
|
|
v-if="this.collectionsDetail.CurrencyType === 'point'"
|
|||
|
|
type="success"
|
|||
|
|
:text="'积分制尚未开通'"
|
|||
|
|
class="buyer"
|
|||
|
|
></u-button>
|
|||
|
|
|
|||
|
|
<u-button
|
|||
|
|
v-if="this.collectionsDetail.CurrencyType === 'normal'"
|
|||
|
|
type="success"
|
|||
|
|
:text="
|
|||
|
|
this.collectionsDetail.SaleType === 'draw'
|
|||
|
|
? '领取'
|
|||
|
|
: this.collectionsDetail.SaleType === 'normal'
|
|||
|
|
? '￥' + price + $t('collection.buy')
|
|||
|
|
: '仅限渠道购买'
|
|||
|
|
"
|
|||
|
|
class="buyer"
|
|||
|
|
@click="buy"
|
|||
|
|
></u-button>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" v-else>
|
|||
|
|
<u-button
|
|||
|
|
type="primary"
|
|||
|
|
:text="$t('navbar.back')"
|
|||
|
|
class="back-active"
|
|||
|
|
@click="back"
|
|||
|
|
></u-button>
|
|||
|
|
<u-button type="success" :text="'售罄'" class="sell-out"></u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="!isActive">
|
|||
|
|
<view class="top-img">
|
|||
|
|
<!-- @click="open3D"-->
|
|||
|
|
<image
|
|||
|
|
:src="this.collectionsDetail.CollectionImg"
|
|||
|
|
mode="widthFix"
|
|||
|
|
></image>
|
|||
|
|
<!-- <text class="price" v-if="this.collectionsDetail.Price != 0">￥{{ this.collectionsDetail.Price }}</text> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="title-t">{{ collectionsDetail.Price != 0 ? $t('letter.all') : $t('letter.you') }}</view> -->
|
|||
|
|
<!-- <view class="info-box" style="padding: 28rpx 32rpx">
|
|||
|
|
<image src="@/static/image/home/to1.png" class="title-img" v-if="collectionsDetail.Price != 0"></image>
|
|||
|
|
<image src="@/static/image/home/to.png" class="title-img" v-else></image>
|
|||
|
|
<image src="@/static/image/home/333.png" class="content-img" mode="widthFix"
|
|||
|
|
v-if="collectionsDetail.Price != 0"></image>
|
|||
|
|
<image src="@/static/image/home/222.png" class="content-img" mode="widthFix" v-else></image>
|
|||
|
|
<view style="text-align: right;">
|
|||
|
|
<image src="@/static/image/home/from.png" class="from-img"></image>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view
|
|||
|
|
class="title-t"
|
|||
|
|
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
|||
|
|
>{{ $t("collection.info") }}
|
|||
|
|
</view>
|
|||
|
|
<view class="info-box" style="padding: 28rpx 32rpx; background: #ffffff">
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.name") }}</text>
|
|||
|
|
<text class="value">{{ this.collectionsDetail.Name || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.type") }}</text>
|
|||
|
|
<text class="value">{{
|
|||
|
|
this.collectionsDetail.CollectionType || "-"
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.size") }}</text>
|
|||
|
|
<text class="value">{{ this.collectionsDetail.Size || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.specs") }}</text>
|
|||
|
|
<text class="value">{{ this.collectionsDetail.Specs || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.address") }}</text>
|
|||
|
|
<text class="value">{{ this.collectionsDetail.Address || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.intro") }}</text>
|
|||
|
|
<view class="des">{{ this.collectionsDetail.Intro || "-" }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="title-t"
|
|||
|
|
:style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
|
|||
|
|
>{{ $t("collection.detail") }}
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-info">
|
|||
|
|
<!-- <view class="title-t">{{$t('collection.sell')}}</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<image v-for="item in sellPoint" :key="item" :src="item" mode="widthFix" class="img"></image>
|
|||
|
|
</view> -->
|
|||
|
|
<view
|
|||
|
|
v-if="
|
|||
|
|
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
|||
|
|
collDetails.length > 0
|
|||
|
|
"
|
|||
|
|
class="title-t"
|
|||
|
|
>{{ $t("collection.sellDec") }}</view
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-if="
|
|||
|
|
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
|||
|
|
collDetails.length > 0
|
|||
|
|
"
|
|||
|
|
class="box"
|
|||
|
|
>
|
|||
|
|
<image
|
|||
|
|
v-for="item in collDetails"
|
|||
|
|
:src="item"
|
|||
|
|
:key="item"
|
|||
|
|
mode="widthFix"
|
|||
|
|
class="img"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="
|
|||
|
|
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
|||
|
|
companyInfo.length > 0
|
|||
|
|
"
|
|||
|
|
class="title-t"
|
|||
|
|
>{{ $t("collection.company") }}</view
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-if="
|
|||
|
|
this.CollectionUID !== '372afbef-4d3c-4e06-8fae-2ef1068b0a89' &&
|
|||
|
|
companyInfo.length > 0
|
|||
|
|
"
|
|||
|
|
class="box"
|
|||
|
|
>
|
|||
|
|
<image
|
|||
|
|
v-for="item in companyInfo"
|
|||
|
|
:src="item"
|
|||
|
|
:key="item"
|
|||
|
|
mode="widthFix"
|
|||
|
|
class="img"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="copyright.length > 0" class="title-t">{{
|
|||
|
|
$t("collection.copyight")
|
|||
|
|
}}</view>
|
|||
|
|
<view v-if="copyright.length > 0" lass="box">
|
|||
|
|
<image
|
|||
|
|
v-for="item in copyright"
|
|||
|
|
:src="item"
|
|||
|
|
:key="item"
|
|||
|
|
mode="widthFix"
|
|||
|
|
class="img"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="Blockchain.length > 0" class="title-t">{{
|
|||
|
|
$t("collection.blockchain")
|
|||
|
|
}}</view>
|
|||
|
|
<view v-if="Blockchain.length > 0" class="box">
|
|||
|
|
<image
|
|||
|
|
v-for="item in Blockchain"
|
|||
|
|
:src="item"
|
|||
|
|
:key="item"
|
|||
|
|
mode="widthFix"
|
|||
|
|
class="img"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="" style="text-align: center; margin-top: 30rpx">
|
|||
|
|
<image
|
|||
|
|
src="@/static/image/home/fontree.png"
|
|||
|
|
mode=""
|
|||
|
|
class="logo"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="active">
|
|||
|
|
<view class="head">
|
|||
|
|
<u-button class="back" @click="back"> 返回 </u-button>
|
|||
|
|
<view>泰丰十周年纪念徽章</view>
|
|||
|
|
</view>
|
|||
|
|
<image
|
|||
|
|
src="@/static/image/home/drawing-board.png"
|
|||
|
|
mode="scaleToFill"
|
|||
|
|
class="drawing-board"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view style="height: 180rpx"></view>
|
|||
|
|
<u-popup
|
|||
|
|
:show="showVerfy"
|
|||
|
|
mode="center"
|
|||
|
|
@close="closeVerfy"
|
|||
|
|
bgColor="transparent"
|
|||
|
|
>
|
|||
|
|
<view class="popup-box">
|
|||
|
|
<view class="title">{{ $t("buyVerfy.title") }}</view>
|
|||
|
|
<view class="">
|
|||
|
|
<view class="input-box">
|
|||
|
|
<view class="label">{{ $t("buyVerfy.username") }}：</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<u--input
|
|||
|
|
border="none"
|
|||
|
|
shape="circle"
|
|||
|
|
v-model="realName"
|
|||
|
|
@focus="verfFocus"
|
|||
|
|
></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="input-box">
|
|||
|
|
<view class="label">{{ $t("buyVerfy.idNum") }}：</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<u--input
|
|||
|
|
border="none"
|
|||
|
|
shape="circle"
|
|||
|
|
v-model="idNum"
|
|||
|
|
@focus="verfFocus"
|
|||
|
|
></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-end">
|
|||
|
|
<view class="fl-e" v-if="succes">
|
|||
|
|
<image
|
|||
|
|
src="../../../static/image/home/true.png"
|
|||
|
|
mode=""
|
|||
|
|
style="width: 30rpx; height: 30rpx; margin-right: 5px"
|
|||
|
|
></image>
|
|||
|
|
<text style="color: #ffffff; font-size: 24rpx">{{
|
|||
|
|
$t("buyVerfy.suss")
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="fl-e" v-if="err">
|
|||
|
|
<image
|
|||
|
|
src="../../../static/image/home/false.png"
|
|||
|
|
mode=""
|
|||
|
|
style="width: 30rpx; height: 30rpx; margin-right: 5px"
|
|||
|
|
></image>
|
|||
|
|
<text style="color: #fd343c; font-size: 24rpx">{{
|
|||
|
|
$t("buyVerfy.error")
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-button
|
|||
|
|
:text="$t('buyVerfy.done')"
|
|||
|
|
color="#699A70"
|
|||
|
|
@click="verifyName"
|
|||
|
|
style="
|
|||
|
|
'width: 622rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
margin-top: 114rpx;'
|
|||
|
|
"
|
|||
|
|
></u-button>
|
|||
|
|
<view @click="closeVerfy" class="cancel">{{
|
|||
|
|
$t("buyVerfy.cancel")
|
|||
|
|
}}</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
stickyShow: false,
|
|||
|
|
showVerfy: false,
|
|||
|
|
CollectionUID: "",
|
|||
|
|
collectionsDetail: {},
|
|||
|
|
sellPoint: [],
|
|||
|
|
collDetails: [],
|
|||
|
|
companyInfo: [],
|
|||
|
|
copyright: [],
|
|||
|
|
Blockchain: [],
|
|||
|
|
realName: "",
|
|||
|
|
idNum: "",
|
|||
|
|
err: false,
|
|||
|
|
succes: false,
|
|||
|
|
SeriesName: "",
|
|||
|
|
isHave: false,
|
|||
|
|
AirdorpUid: "",
|
|||
|
|
price: "",
|
|||
|
|
isActive: false,
|
|||
|
|
currencyType: "",
|
|||
|
|
pageParams: {},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
this.stickyShow = e.scrollTop > 5 ? true : false;
|
|||
|
|
},
|
|||
|
|
onLoad: function (option) {
|
|||
|
|
this.pageParams = option;
|
|||
|
|
this.CollectionUID = option.CollectionUID;
|
|||
|
|
this.SeriesName = option.SeriesName;
|
|||
|
|
this.price = option.Price;
|
|||
|
|
this.isActive = !Object.keys(option).length;
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getCollectionDetail();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
calcRouteParams(obj) {
|
|||
|
|
if (obj && JSON.stringify(obj) !== "{}") {
|
|||
|
|
let str = "?";
|
|||
|
|
for (let key in obj) {
|
|||
|
|
str += key + "=" + obj[key] + "&";
|
|||
|
|
}
|
|||
|
|
return str.slice(0, -1);
|
|||
|
|
}
|
|||
|
|
return "";
|
|||
|
|
},
|
|||
|
|
open3D() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/index/detail/open3D/open3D",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
back() {
|
|||
|
|
let routesRecord = getCurrentPages();
|
|||
|
|
if (routesRecord.length > 1) {
|
|||
|
|
this.$common.navigateBack();
|
|||
|
|
} else {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: "/pages/index/index",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getCollectionDetail() {
|
|||
|
|
if (this.isActive) return;
|
|||
|
|
let data = {
|
|||
|
|
CollectionsUID: this.CollectionUID,
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.series.collectionsInfo(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
// await this.getPick(res.data.CollectionUID);
|
|||
|
|
this.collectionsDetail = res.data;
|
|||
|
|
(this.AllImgList = res.data.CutImg ? JSON.parse(res.data.CutImg) : []),
|
|||
|
|
this.cutImg();
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(this.$t("load.failed"));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getPick(uid) {
|
|||
|
|
if (this.isActive) return;
|
|||
|
|
let parmas = {
|
|||
|
|
uuid: uid,
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.series.userHaveDropNo(parmas);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
console.log(res.data.Hava);
|
|||
|
|
this.isHave = res.data.Have != 0 ? false : true;
|
|||
|
|
this.AirdorpUid = res.data.UserAirdorpUid;
|
|||
|
|
} else {
|
|||
|
|
this.isHave = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cutImg() {
|
|||
|
|
this.AllImgList.forEach((v) => {
|
|||
|
|
if (Array.isArray(v.imgs)) {
|
|||
|
|
v.imgs = v.imgs.filter((img) => {
|
|||
|
|
if (img) {
|
|||
|
|
return img;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
switch (v.label) {
|
|||
|
|
case "卖点":
|
|||
|
|
this.sellPoint = v.imgs;
|
|||
|
|
break;
|
|||
|
|
case "藏品细节":
|
|||
|
|
this.collDetails = v.imgs;
|
|||
|
|
break;
|
|||
|
|
case "工艺/公司介绍":
|
|||
|
|
this.companyInfo = v.imgs;
|
|||
|
|
break;
|
|||
|
|
case "版权声明":
|
|||
|
|
this.copyright = v.imgs;
|
|||
|
|
break;
|
|||
|
|
case "区块链说明":
|
|||
|
|
this.Blockchain = v.imgs;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
buy() {
|
|||
|
|
// 只有领取和普通购买 才执行下去
|
|||
|
|
if (
|
|||
|
|
this.collectionsDetail.CurrencyType === "normal" &&
|
|||
|
|
["normal", "draw"].includes(this.collectionsDetail.SaleType)
|
|||
|
|
) {
|
|||
|
|
let token = uni.getStorageSync("mall_token");
|
|||
|
|
let realName = uni.getStorageSync("mall-user-info")
|
|||
|
|
? uni.getStorageSync("mall-user-info").realName
|
|||
|
|
: "";
|
|||
|
|
if (!token) {
|
|||
|
|
uni.$u.toast(this.$t("login.pls"));
|
|||
|
|
uni.setStorageSync(
|
|||
|
|
"login-redirect",
|
|||
|
|
"/pages/index/detail/detail" + this.calcRouteParams(this.pageParams)
|
|||
|
|
);
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/login/login",
|
|||
|
|
});
|
|||
|
|
} else if (!realName) {
|
|||
|
|
this.showVerfy = true;
|
|||
|
|
} else {
|
|||
|
|
if (this.collectionsDetail.SaleType === "draw") {
|
|||
|
|
this.directGet();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:
|
|||
|
|
"/pages/index/comfirm/comfirm?Collection=" +
|
|||
|
|
encodeURIComponent(JSON.stringify(this.collectionsDetail)),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async directGet() {
|
|||
|
|
let data = {
|
|||
|
|
CollectionsUID: this.collectionsDetail.CollectionUID,
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.airdrop.directGet(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
uni.$u.toast("领取成功！");
|
|||
|
|
this.getCollectionDetail();
|
|||
|
|
|
|||
|
|
let routesRecord = getCurrentPages();
|
|||
|
|
if (routesRecord.length > 1) {
|
|||
|
|
let that = this;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.$common.navigateBack();
|
|||
|
|
}, 1000);
|
|||
|
|
} else {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: "/pages/index/index",
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async pickUp() {
|
|||
|
|
let data = {
|
|||
|
|
UserId: uni.getStorageSync("mall-user-info").ID,
|
|||
|
|
Uuid: this.AirdorpUid,
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.airdrop.getCollection(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
this.recive();
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async recive() {
|
|||
|
|
let data = {
|
|||
|
|
collectionsUID: this.CollectionUID,
|
|||
|
|
userAirdropUuid: this.AirdorpUid,
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.airdrop.getCollectionStepTwo(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/index/payment/reciveOK",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async verifyName() {
|
|||
|
|
let data = {
|
|||
|
|
idNum: this.idNum,
|
|||
|
|
realName: this.realName,
|
|||
|
|
};
|
|||
|
|
if (!data.idNum || !data.realName) {
|
|||
|
|
return uni.$u.toast("姓名和身份证号不能为空");
|
|||
|
|
}
|
|||
|
|
if (!uni.$u.test.idCard(data.idNum)) {
|
|||
|
|
return uni.$u.toast("身份证号不正确");
|
|||
|
|
}
|
|||
|
|
let res = await this.$api.mine.update(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
this.succes = true;
|
|||
|
|
uni.setStorageSync("mall-user-info", res.data);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.idNum = "";
|
|||
|
|
this.realName = "";
|
|||
|
|
this.showVerfy = false;
|
|||
|
|
this.err = false;
|
|||
|
|
this.succes = false;
|
|||
|
|
}, 1000);
|
|||
|
|
} else {
|
|||
|
|
this.err = true;
|
|||
|
|
this.succes = false;
|
|||
|
|
uni.$u.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
verfFocus() {
|
|||
|
|
this.err = false;
|
|||
|
|
this.succes = false;
|
|||
|
|
},
|
|||
|
|
doneVerfy() {
|
|||
|
|
this.showVerfy = false;
|
|||
|
|
},
|
|||
|
|
closeVerfy() {
|
|||
|
|
this.showVerfy = false;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: url("@/static/image/home/new_bg.png?x-oss-process=image/resize,w_750,h_1580")
|
|||
|
|
no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-attachment: fixed;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.head {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
left: 26rpx;
|
|||
|
|
display: flex;
|
|||
|
|
height: 110rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
.back {
|
|||
|
|
width: 128rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
line-height: 56rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.4);
|
|||
|
|
margin-right: 78rpx;
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drawing-board {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 6986rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fixed-box {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 172rpx;
|
|||
|
|
// background: #3e3e3e;
|
|||
|
|
background: #ffffff;
|
|||
|
|
z-index: 10;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 42rpx 38rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back {
|
|||
|
|
width: 172rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
// background: #efba42;
|
|||
|
|
background: #efba42;
|
|||
|
|
border-color: aliceblue;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-active {
|
|||
|
|
width: 172rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
// background: #efba42;
|
|||
|
|
background: rgba(255, 255, 255, 0.4);
|
|||
|
|
border-color: aliceblue;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buyer {
|
|||
|
|
width: 484rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
// background: #558bf2;
|
|||
|
|
background: #699a70;
|
|||
|
|
border-color: aliceblue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sell-out {
|
|||
|
|
width: 484rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
// background: #558bf2;
|
|||
|
|
background: #fc4947;
|
|||
|
|
border-color: #fc4947;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.disBtn {
|
|||
|
|
width: 484rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
line-height: 56upx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
background: rgba(65, 0, 0, 1);
|
|||
|
|
border: 1upx #fff solid;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-img {
|
|||
|
|
background-size: contain;
|
|||
|
|
width: 660rpx;
|
|||
|
|
height: 660rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin: 44rpx 44rpx 32rpx 46rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 10rpx;
|
|||
|
|
right: 30upx;
|
|||
|
|
// left: 50%;
|
|||
|
|
// transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* .box-item {
|
|||
|
|
// background: rgba(255, 255, 255, 0.3);
|
|||
|
|
// background: rgba(11, 0, 0, 0.4);
|
|||
|
|
// margin: 0 44rpx 0 46rpx;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
// height: 198rpx;
|
|||
|
|
}
|
|||
|
|
} */
|
|||
|
|
|
|||
|
|
.detail-info {
|
|||
|
|
// background: rgba(0, 0, 0, 0.8);
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin: 30rpx;
|
|||
|
|
padding: 23rpx;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
// margin: 0 44rpx 0 46rpx;
|
|||
|
|
margin-bottom: 46rpx;
|
|||
|
|
// background: url('@/static/image/home/bg-info.png') no-repeat; // rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
// padding: 38rpx 32rpx;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-t {
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 40rpx 0 30rpx 0;
|
|||
|
|
color: #494949;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box {
|
|||
|
|
margin: 0 44rpx 0 46rpx;
|
|||
|
|
margin-bottom: 46rpx;
|
|||
|
|
// background: rgba(255, 255, 255, 0.3);
|
|||
|
|
background: rgba(11, 0, 0, 0.3);
|
|||
|
|
// background: url('@/static/image/home/bg-info.png') no-repeat;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
// padding: 38rpx 32rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.title-img {
|
|||
|
|
width: 300upx;
|
|||
|
|
height: 50upx;
|
|||
|
|
margin-bottom: 32upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-img {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.from-img {
|
|||
|
|
width: 356upx;
|
|||
|
|
height: 44upx;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
padding-right: 40rpx;
|
|||
|
|
width: 130rpx;
|
|||
|
|
color: #434343;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
color: #878787;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.des {
|
|||
|
|
width: 450rpx;
|
|||
|
|
/* display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
overflow: hidden; */
|
|||
|
|
word-break: break-all;
|
|||
|
|
white-space: normal;
|
|||
|
|
color: #878787;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
width: 202rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-box {
|
|||
|
|
background: #ffffff;
|
|||
|
|
height: 842rpx;
|
|||
|
|
width: 698rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 30rpx 38rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 96rpx;
|
|||
|
|
margin-bottom: 152rpx;
|
|||
|
|
color: #434343;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: 34rpx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #699a70;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
background-color: rgba(135, 135, 135, 0.5);
|
|||
|
|
width: 515rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
/deep/ .input-placeholder {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .uni-input-input {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-end {
|
|||
|
|
padding: 0 34rpx 34rpx 38rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
.fl-e {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel {
|
|||
|
|
color: #878787;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|