1513 lines
32 KiB
Vue
1513 lines
32 KiB
Vue
<!--
|
||
盒子详情
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<view>
|
||
|
||
</view>
|
||
<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
|
||
<uni-icons type="left" color="#000000"></uni-icons>
|
||
</view>
|
||
|
||
<view class="center relative" style="z-index: 10;" :style="{top:$sys().statusBarHeight+'px'}">
|
||
<text class=""
|
||
style="padding-top: 20rpx;">{{ $c.detailPageTitle((pageData && pageData.goods) || "") }}</text>
|
||
</view>
|
||
|
||
|
||
<view class="header relative" v-if="pageData && pageData.goods"
|
||
:style="{background:'url(' + pageData.goods.imgurl_detail + ') no-repeat 0 0 / 100% 100%',}">
|
||
|
||
<view class="header-wuzhe flex" v-if="pageData.goods.is_shou_zhe == 1">
|
||
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<view class="header-goodsTitel">{{ pageData.goods.title }}</view>
|
||
|
||
<view class="header-suoxiang center" v-if="
|
||
pageData.goods.lock_is == 1 &&
|
||
pageData.lock_info.goods_lock_surplus_time > 0
|
||
">
|
||
<image :src="pageData.lock_info.goods_lock_user_headimg" mode="aspectFill"></image>
|
||
<view class="hidden ml10">{{
|
||
pageData.lock_info.goods_lock_user_nickname
|
||
}}</view>
|
||
<image class="ml20" :src="$img1('index/suoxiang.png')" mode="aspectFit"></image>
|
||
<view class="ml30">倒计时：{{ secNum }}S</view>
|
||
</view>
|
||
|
||
<view class="header-title center"
|
||
:style="{background:'url(' +$img1('common/chouTitle.png') +') no-repeat 0 0 / 100% 100%',}">
|
||
<text>
|
||
<template></template>
|
||
</text>
|
||
<text>
|
||
<template v-if="pageData.goods.type != 5">￥</template>
|
||
<template>{{ pageData.goods.price }}</template>
|
||
<template v-if="pageData.goods.type == 5">积分</template>
|
||
</text>
|
||
<text>
|
||
<template v-if="pageData.goods.type != 5">/含明信片</template>
|
||
</text>
|
||
</view>
|
||
|
||
<collect-btn v-if="pageData && pageData.goods" :goods-id="pageData.goods.id" :goods-num="pageData.goods.num"
|
||
:is-collected="pageData.goods.collection_is" @collection-changed="onCollectionChanged"></collect-btn>
|
||
|
||
<view
|
||
style="width: 100%; height: 232rpx; position: absolute; bottom: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));" />
|
||
|
||
</view>
|
||
<!--选项卡-->
|
||
<detail-toolbar :goods-type="pageData.goods.type" :current-tab="tabCur" @rule-click="handleRuleClick"
|
||
@tab-change="tabChange" @change-box="changeBox"></detail-toolbar>
|
||
<view class="spylView" v-if="tabCur == 1 && pageData">
|
||
<view class="spylView-head align-center justify-between">
|
||
<view class="column align-center" @click="prev">
|
||
<view class="center" style="width: 64rpx; height: 64rpx">
|
||
<uni-icons type="left" color="#999999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<view class="flex" style="background-color: #F5F5F5;">
|
||
<text :style="{ width: '80%' }"></text>
|
||
</view>
|
||
<view class="align-center" v-if="pageData.goods">
|
||
<view class="align-center">第 <text>{{ pageData.goods.num }}</text> /{{pageData.goods.stock}}箱
|
||
</view>
|
||
<view style="margin-left: 58rpx;">赏品余量</view>
|
||
<view class="align-center">
|
||
<text>{{ pageData.goods.goodslist_surplus_stock }}</text>/{{ pageData.goods.goodslist_stock}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="column align-center" @click="next">
|
||
<view class="center" style="width: 64rpx; height: 64rpx">
|
||
<uni-icons type="right" color="#999999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 赏品列表 -->
|
||
<view class="list">
|
||
<view class="list-item" v-for="(item, i) in pageData.goodslist" :key="i" @click="previewDetail(item)">
|
||
<view class="pic center relative">
|
||
<image class="pic-img" :src="item.imgurl" mode="aspectFit"></image>
|
||
<view class="type-tag center" :style="{
|
||
background: item.shang_info ? item.shang_info.color : '#FFFFFF',
|
||
}">
|
||
{{ item.shang_info ? item.shang_info.title : "" }}
|
||
</view>
|
||
<view class="num center bgfff">{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||
<view v-if="item.goods_type == 2" class="yu-tag ziti">预售</view>
|
||
<view v-if="item.surplus_stock <= 0" class="shadow center">
|
||
<image :src="$img1('common/sold_out.png')"></image>
|
||
</view>
|
||
</view>
|
||
<view class="title hang1">
|
||
{{ item.title }}
|
||
</view>
|
||
<view class="desc">{{ item.pro }}</view>
|
||
<view class="price">
|
||
<text>售价:￥ <text style="font-size: 24rpx">{{ item.sc_money }}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 中赏记录 -->
|
||
<template v-if="tabCur == 2">
|
||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption"
|
||
:up="upOption">
|
||
<detail-prize-log :sub-tab="subTab" :log-list="logList" :current-sub-tab="subTabCur"
|
||
@sub-tab-change="subTabChange"></detail-prize-log>
|
||
</mescroll-body>
|
||
</template>
|
||
|
||
<view v-if="pageData" class="ft-fixed justify-evenly">
|
||
<view class="btn common_bg column center" v-if="getBtnXianShi(1)"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})` }" @click="confirmSubmit([0, 1])">
|
||
</view>
|
||
<view class="btn common_bg column center" v-if="getBtnXianShi(3)"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn3.png')})` }" @click="confirmSubmit([0, 3])">
|
||
</view>
|
||
<view class="btn common_bg column center" v-if="getBtnXianShi(5)"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn5.png')})` }" @click="confirmSubmit([0, 5])">
|
||
</view>
|
||
<view class="btn common_bg column center" v-if="pageData.goods.type != 5 && getBtnXianShi(0)"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtnAll.png')})` }"
|
||
@click="confirmSubmit([0, pageData.goods.goodslist_surplus_stock])">
|
||
</view>
|
||
</view>
|
||
|
||
<order-confirm-popup ref="buyPop" v-if="orderData" :order-data="orderData" :page-data="pageData"
|
||
:use-money="useMoney" :use-money2="useMoney2" :use-integral="useIntegral" :coupon-data="couponData"
|
||
:is-agree="isAgree" :send-rule-data="sendRuleData" :buy-num="buyNum" @close="close('buyPop')"
|
||
@change-pay="changePay" @toggle-agree="isAgree = !isAgree" @to-coupon="toCoupon"
|
||
@confirm="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)"></order-confirm-popup>
|
||
|
||
<buy-notice ref="buyNotice"
|
||
@confirm="$c.noDouble(confirmSubmit, [1, buyNum, true], choujiangloading)"></buy-notice>
|
||
<!--中奖动画-->
|
||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view v-if="prizeData" class="res-pop common_bg column center">
|
||
<view class="res-pop-hd"></view>
|
||
<scroll-view class="res-pop-bd" scroll-y>
|
||
<view class="res-list">
|
||
<view class="res-item" v-for="(item, i) in prizeData.data" :key="i">
|
||
<view class="pic center">
|
||
<image :src="item.goodslist_imgurl" lazy-load></image>
|
||
<view class="type-tag center">{{ item.shang_title }}</view>
|
||
<view class="num center">{{ item.prize_num }}</view>
|
||
</view>
|
||
<view class="title hang1 flex center">
|
||
<text> {{ item.goodslist_title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="res-pop-ft mt20">
|
||
<view class="ft-btn common_bg justify-center center" :style="{
|
||
backgroundImage: `url(${$img1('common/quhegui.png')})`,
|
||
}" @click="toBag">
|
||
<text>去发货</text>
|
||
</view>
|
||
|
||
<view class="ft-btn common_bg justify-center center" :style="{
|
||
backgroundImage: `url(${$img1('common/jixuchou.png')})`,
|
||
}" @click="close('resPop')">
|
||
<text>继续抽</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<view v-if="aniShow" class="ani-pop">
|
||
<image :src="aniSrc" lazy-load></image>
|
||
</view>
|
||
<rule-pop ref="rulePop"></rule-pop>
|
||
<coupon-pop ref="couponPop"></coupon-pop>
|
||
<!-- 添加直接引用的预览组件 -->
|
||
<detail-preview-popup ref="localPreviewPopup"></detail-preview-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
|
||
|
||
export default {
|
||
components: {
|
||
OrderConfirmPopup
|
||
},
|
||
data() {
|
||
return {
|
||
optData: "",
|
||
boxNum: "",
|
||
buyNum: 0,
|
||
|
||
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
||
downOption: {
|
||
auto: false,
|
||
},
|
||
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
||
upOption: {
|
||
auto: true,
|
||
page: {
|
||
size: 15, // 每页数据的数量,默认10
|
||
},
|
||
},
|
||
tabList: {
|
||
1: {
|
||
title: "商品预览",
|
||
},
|
||
2: {
|
||
title: "中赏记录",
|
||
},
|
||
},
|
||
tabCur: 1,
|
||
subTab: [],
|
||
subTabCur: 0,
|
||
payType: {
|
||
1: {
|
||
title: "吧唧币",
|
||
icon: "/static/img/pay_type1.png",
|
||
},
|
||
2: {
|
||
title: "星钻",
|
||
icon: "/static/img/pay_type2.png",
|
||
},
|
||
},
|
||
payTypeCur: 1,
|
||
isAgree: true,
|
||
pageData: "",
|
||
couponData: "",
|
||
orderData: "",
|
||
prizeData: "",
|
||
secTimer: null,
|
||
secNum: 0,
|
||
aniSrc: "",
|
||
aniShow: false,
|
||
|
||
logList: [],
|
||
sendRuleData: "",
|
||
choujiangloading: false,
|
||
useMoney: true,
|
||
useIntegral: true,
|
||
useMoney2: true,
|
||
};
|
||
},
|
||
created() {
|
||
|
||
},
|
||
computed: {},
|
||
onShareAppMessage() {
|
||
if (this.$refs["couponPop"] != null) {
|
||
var co = this.$refs["couponPop"].getfengxiaodata();
|
||
if (co != null) {
|
||
console.log(co);
|
||
return co;
|
||
}
|
||
}
|
||
return {
|
||
title: this.$config.getAppSetting("app_name") +
|
||
`${this.pageData.goods.title}系列 第${this.pageData.goods.num}套`,
|
||
imageUrl: this.pageData.goods.imgurl_detail,
|
||
path: "/pages/shouye/detail" +
|
||
this.$c.qs({
|
||
goods_id: this.pageData.goods.id,
|
||
goods_num: this.pageData.goods.num,
|
||
pid: uni.getStorageSync("userinfo").ID,
|
||
}),
|
||
};
|
||
},
|
||
|
||
onLoad(options) {
|
||
console.log(options);
|
||
this.optData = options;
|
||
|
||
this.tabChange(this.tabCur);
|
||
|
||
uni.$on("chooseCoupon", (data) => {
|
||
// console.log('data', data)
|
||
|
||
this.couponData = data;
|
||
this.confirmSubmit([0, this.buyNum]);
|
||
});
|
||
|
||
// uni.getImageInfo({
|
||
// src: this.$img('/static/img/animation.png'),
|
||
// success: ({ path }) => {
|
||
// this.aniSrc = path
|
||
// }
|
||
// })
|
||
|
||
this.$c.getRule(10).then((res) => {
|
||
if (res.status == 1) {
|
||
this.sendRuleData = res.data;
|
||
}
|
||
});
|
||
},
|
||
|
||
onReady() {
|
||
// this.open('dPop')
|
||
// this.open('buyPop')
|
||
// this.open('buyNotice')
|
||
// this.open('resPop')
|
||
},
|
||
|
||
onUnload() {
|
||
uni.$off("chooseCoupon");
|
||
},
|
||
|
||
methods: {
|
||
previewDetail(item) {
|
||
console.log(item,this.pageData);
|
||
// 使用全局方法调用预览弹窗
|
||
this.$preview({
|
||
title: item.title,
|
||
imgUrl: item.imgurl,
|
||
tipTitle: item.shang_info ? item.shang_info.title : '',
|
||
productType: this.optData.type_text,
|
||
probability: item.pro,
|
||
dataItem: item,
|
||
goods: this.pageData.goods
|
||
}).then(() => {
|
||
console.log('预览弹窗打开成功');
|
||
});
|
||
},
|
||
|
||
resetSec() {
|
||
clearInterval(this.secTimer);
|
||
this.secTimer = null;
|
||
this.secNum = 0;
|
||
},
|
||
|
||
runSec(time) {
|
||
const nowTime = Math.floor(Date.now() / 1000);
|
||
|
||
if (time < nowTime) {
|
||
this.resetSec();
|
||
return;
|
||
}
|
||
|
||
this.secTimer && clearInterval(this.secTimer);
|
||
|
||
this.secNum = time - nowTime;
|
||
this.secTimer = setInterval(() => {
|
||
if (this.secNum <= 0) {
|
||
this.resetSec();
|
||
|
||
uni.showLoading({
|
||
title: "加载中",
|
||
mask: true,
|
||
});
|
||
setTimeout(() => {
|
||
// uni.hideLoading()
|
||
this.doRefresh();
|
||
}, 1000);
|
||
return;
|
||
}
|
||
|
||
this.secNum -= 1;
|
||
}, 1000);
|
||
},
|
||
|
||
toCoupon() {
|
||
this.$c.to({
|
||
url: "/pages/user/coupon",
|
||
query: {
|
||
type: 2,
|
||
total_price: this.orderData.order_total,
|
||
},
|
||
});
|
||
},
|
||
|
||
getPrize(order_num) {
|
||
if (!order_num) {
|
||
return;
|
||
}
|
||
|
||
setTimeout(() => {
|
||
this.req({
|
||
url: "prizeorderlog",
|
||
data: {
|
||
order_num,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.prizeData = res.data;
|
||
|
||
if (res.data.data.length <= 0) {
|
||
this.getPrize(order_num);
|
||
return;
|
||
}
|
||
|
||
// this.aniShow = true
|
||
// setTimeout(() => {
|
||
// this.aniShow = false
|
||
this.bgmCtx.openBgm.stop();
|
||
this.bgmCtx.openBgm.play();
|
||
this.open("resPop");
|
||
// }, 1300)
|
||
}
|
||
},
|
||
});
|
||
}, 500);
|
||
},
|
||
|
||
changePay(e) {
|
||
this[e] = !this[e];
|
||
this.confirmSubmit([0, this.buyNum]);
|
||
},
|
||
|
||
confirmSubmit([type, num, fromNotice = false]) {
|
||
let url = "ordermoney";
|
||
|
||
if (type == 1) {
|
||
url = "orderbuy";
|
||
|
||
if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
|
||
this.$refs.buyNotice.getRule(6);
|
||
return;
|
||
}
|
||
}
|
||
if (!this.getBtnXianShi(0)) {
|
||
this.useMoney = false;
|
||
this.useIntegral = false;
|
||
this.useMoney2 = false;
|
||
}
|
||
this.buyNum = num;
|
||
|
||
let data = {
|
||
goods_id: this.pageData.goods.id,
|
||
prize_num: this.buyNum,
|
||
goods_num: this.pageData.goods.num,
|
||
use_money_is: this.useMoney ? 1 : 2,
|
||
use_integral_is: this.useIntegral ? 1 : 2,
|
||
coupon_id: (this.couponData && this.couponData.id) || "",
|
||
use_money2_is: this.useMoney2 ? 1 : 2
|
||
};
|
||
|
||
if (this.pageData.goods.type == 5) {
|
||
data.coupon_id = "";
|
||
}
|
||
|
||
this.req({
|
||
url,
|
||
data,
|
||
success: async (res) => {
|
||
if (res.status == 1) {
|
||
if (type == 0) {
|
||
if (res.data.coupon_id) {
|
||
this.couponData = {
|
||
id: res.data.coupon_id,
|
||
price: res.data.coupon_price,
|
||
};
|
||
}
|
||
|
||
this.orderData = res.data;
|
||
|
||
// 使用this.$nextTick确保视图已更新，组件已挂载
|
||
this.$nextTick(() => {
|
||
if (this.$refs.buyPop) {
|
||
this.$refs.buyPop.open();
|
||
} else {
|
||
console.error('buyPop组件引用不存在');
|
||
}
|
||
});
|
||
}
|
||
|
||
if (type == 1) {
|
||
this.close("buyPop");
|
||
|
||
if (res.data.status == 1) {
|
||
const status = await this.$c.wxMpPay({
|
||
data: res.data.res,
|
||
});
|
||
|
||
if (status == "success") {
|
||
this.getPrize(res.data.order_num);
|
||
this.doRefresh();
|
||
}
|
||
} else {
|
||
this.$c.toast({
|
||
title: res.msg,
|
||
duration: 500,
|
||
success: () => {
|
||
this.getPrize(res.data.order_num);
|
||
this.doRefresh();
|
||
},
|
||
});
|
||
}
|
||
}
|
||
}
|
||
},
|
||
});
|
||
if (type == 1) {
|
||
this.close("buyPop");
|
||
}
|
||
},
|
||
|
||
onCollectionChanged() {
|
||
this.doRefresh();
|
||
},
|
||
|
||
handleRuleClick(ruleId, title) {
|
||
this.$refs.rulePop.getRule(ruleId, title);
|
||
},
|
||
|
||
toBag() {
|
||
this.close("resPop");
|
||
|
||
this.$c.to({
|
||
type: 3,
|
||
url: "/pages/sangdai/sangdai",
|
||
});
|
||
},
|
||
|
||
changeBox() {
|
||
this.$c.to({
|
||
url: "/pages/shouye/huanxiang",
|
||
query: {
|
||
id: this.pageData.goods.id,
|
||
type_text: this.optData.type_text,
|
||
},
|
||
});
|
||
},
|
||
|
||
doRefresh() {
|
||
this.getData();
|
||
|
||
if (this.tabCur == 2) {
|
||
this.tabChange(this.tabCur);
|
||
}
|
||
},
|
||
|
||
subTabChange(i) {
|
||
this.subTabCur = i;
|
||
this.logList = [];
|
||
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.mescroll.resetUpScroll();
|
||
this.mescroll.scrollTo(0, 0);
|
||
}, 100);
|
||
});
|
||
},
|
||
|
||
tabChange(i) {
|
||
this.tabCur = i;
|
||
|
||
switch (Number(i)) {
|
||
case 1:
|
||
this.getData();
|
||
break;
|
||
case 2:
|
||
this.subTabChange(this.subTabCur);
|
||
break;
|
||
}
|
||
},
|
||
|
||
next() {
|
||
if (this.optData.goods_num >= this.pageData.goods.stock) {
|
||
this.optData.goods_num = this.pageData.goods.stock;
|
||
|
||
this.$c.toast({
|
||
title: "已经是最后一箱了",
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.optData.goods_num += 1;
|
||
this.getData();
|
||
},
|
||
|
||
prev() {
|
||
if (this.optData.goods_num <= 1) {
|
||
this.optData.goods_num = 1;
|
||
|
||
this.$c.toast({
|
||
title: "已经是第一箱了",
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.optData.goods_num -= 1;
|
||
this.getData();
|
||
},
|
||
|
||
getLog({
|
||
num,
|
||
size
|
||
}) {
|
||
if (num > 1) return this.mescroll.endByPage(this.logList.length, 1);
|
||
this.req({
|
||
url: "shang_log",
|
||
data: {
|
||
page: num,
|
||
goods_id: this.optData.goods_id,
|
||
goods_num: this.optData.goods_num,
|
||
shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : "",
|
||
},
|
||
Loading: true,
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.subTab = res.data.category;
|
||
|
||
if (num == 1) {
|
||
this.logList = [];
|
||
}
|
||
|
||
this.logList = this.logList.concat(res.data.data);
|
||
this.mescroll.endByPage(res.data.data.length, res.data.last_page);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
getData() {
|
||
this.req({
|
||
url: "goodsdetail",
|
||
data: {
|
||
goods_id: this.optData.goods_id,
|
||
goods_num: this.optData.goods_num,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.optData.goods_num = Number(res.data.goods.num);
|
||
|
||
if (
|
||
res.data.goods.lock_is == 1 &&
|
||
res.data.lock_info.goods_lock_surplus_time > 0
|
||
) {
|
||
this.runSec(res.data.lock_info.goods_lock_surplus_time);
|
||
}
|
||
|
||
this.pageData = res.data;
|
||
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
|
||
this.useMoney = goodType.pay_balance == 1 ? true : false;
|
||
this.useIntegral = goodType.pay_currency == 1 ? true : false;
|
||
this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
|
||
console.log(this.pageData);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
getBtnXianShi(type) {
|
||
if (this.pageData == null || this.pageData["xuangou"] == null) {
|
||
// this.pageData
|
||
return true;
|
||
}
|
||
let xuangou = this.pageData["xuangou"];
|
||
if (xuangou.quanju_xiangou == 0) {
|
||
return true;
|
||
}
|
||
|
||
if (type == 0) {
|
||
return false;
|
||
}
|
||
if (type == 1) {
|
||
return true;
|
||
}
|
||
|
||
let yuxia = xuangou.quanju_xiangou - xuangou.user_xiangou_count;
|
||
console.log(yuxia);
|
||
if (yuxia >= type) {
|
||
return true;
|
||
}
|
||
return false;
|
||
},
|
||
close(e) {
|
||
console.log('关闭弹窗:', e, this.$refs[e]);
|
||
if (e === 'buyPop') {
|
||
if (this.$refs[e]) {
|
||
this.$refs[e].close();
|
||
} else {
|
||
console.error('找不到buyPop组件引用');
|
||
}
|
||
} else {
|
||
if (this.$refs[e]) {
|
||
this.$refs[e].close();
|
||
} else {
|
||
console.error('找不到组件引用:', e);
|
||
}
|
||
}
|
||
|
||
if (e == "resPop") {
|
||
if (this.prizeData && this.prizeData["user_coupon"] != null) {
|
||
this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
|
||
}
|
||
}
|
||
},
|
||
|
||
open(e) {
|
||
console.log('打开弹窗:', e, this.$refs[e]);
|
||
if (e === 'buyPop') {
|
||
if (this.$refs[e]) {
|
||
this.$refs[e].open();
|
||
} else {
|
||
console.error('找不到buyPop组件引用');
|
||
}
|
||
} else {
|
||
if (this.$refs[e]) {
|
||
this.$refs[e].open();
|
||
} else {
|
||
console.error('找不到组件引用:', e);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.navLeft {
|
||
width: 100%;
|
||
position: fixed;
|
||
left: 30rpx;
|
||
z-index: 100;
|
||
height: 44px;
|
||
|
||
>view {
|
||
font-weight: 600;
|
||
font-size: 50rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 0 300rpx;
|
||
background-color: #ffffff;
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
height: 722rpx;
|
||
margin-top: 130rpx;
|
||
background-color: #d8d8d8;
|
||
|
||
&-wuzhe {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
top: 300rpx;
|
||
left: 0;
|
||
}
|
||
|
||
&-goodsTitel {
|
||
position: absolute;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 24rpx;
|
||
z-index: 2;
|
||
// text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
|
||
}
|
||
|
||
&-suoxiang {
|
||
position: absolute;
|
||
width: 584rpx;
|
||
height: 120rpx;
|
||
background: rgba(0, 0, 0, 0.73);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 390rpx;
|
||
z-index: 2;
|
||
|
||
>image:nth-of-type(1) {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border: 2rpx solid #ffffff;
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
>image:nth-of-type(2) {
|
||
width: 144rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
>view:nth-of-type(1) {
|
||
width: 140rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
>view:nth-of-type(2) {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
&-title {
|
||
position: absolute;
|
||
padding: 0 20rpx;
|
||
width: 280rpx;
|
||
height: 44rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 78rpx;
|
||
z-index: 10;
|
||
|
||
>text:nth-child(2n + 1) {
|
||
font-weight: 400;
|
||
font-size: 18rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-weight: 700;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&-footer {
|
||
width: 750rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
&-one {
|
||
width: 186rpx;
|
||
height: 106rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-two {
|
||
width: 224rpx;
|
||
height: 119rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
left: 160rpx;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-three {
|
||
width: 224rpx;
|
||
height: 119rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
right: 160rpx;
|
||
bottom: 0;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-four {
|
||
width: 186rpx;
|
||
height: 106rpx;
|
||
display: flex;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.spylView {
|
||
background: #ffffff;
|
||
|
||
&-head {
|
||
box-sizing: border-box;
|
||
padding: 24rpx 30rpx;
|
||
width: 750rpx;
|
||
|
||
>view:nth-child(2n + 1) {
|
||
>view:nth-child(1) {
|
||
width: 74rpx;
|
||
height: 56rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
// border: 2rpx solid #000000;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
margin-top: 8rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
width: 420rpx;
|
||
|
||
>view:nth-child(1) {
|
||
width: 420rpx;
|
||
height: 14rpx;
|
||
border-radius: 40rpx;
|
||
|
||
>text {
|
||
height: 14rpx;
|
||
border-radius: 40rpx;
|
||
background: #cdf022;
|
||
}
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
padding: 14rpx 30rpx 0;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
|
||
>view {
|
||
>text {
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 30rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 210rpx);
|
||
gap: 30rpx 30rpx;
|
||
|
||
.list-item {
|
||
width: 210rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f8f8f8;
|
||
border-radius: 16rpx;
|
||
|
||
.pic {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: #3b3941;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
.pic-img {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
// border-radius: 24rpx;
|
||
}
|
||
|
||
.type-tag {
|
||
position: absolute;
|
||
top: 12rpx;
|
||
left: 12rpx;
|
||
border-radius: 18rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
min-width: 78rpx;
|
||
height: 38rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.num {
|
||
position: absolute;
|
||
left: 50%;
|
||
padding: 0 10rpx;
|
||
transform: translateX(-50%);
|
||
bottom: 8rpx;
|
||
border-radius: 18rpx;
|
||
min-width: 66rpx;
|
||
height: 38rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
color: #000000;
|
||
}
|
||
|
||
.yu-tag {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
top: 10rpx;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #ff873a;
|
||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0,
|
||
#fff 0 -1px 0;
|
||
}
|
||
|
||
.shadow {
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border-radius: 24rpx;
|
||
|
||
>image {
|
||
width: 84.93rpx;
|
||
height: 98rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding: 28rpx 10rpx 0;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.desc {
|
||
padding: 24rpx 10rpx 0;
|
||
font-size: 18rpx;
|
||
font-weight: 300;
|
||
color: #f39205;
|
||
}
|
||
|
||
.price {
|
||
padding: 24rpx 10rpx 28rpx;
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixed-btns {
|
||
position: fixed;
|
||
z-index: 10;
|
||
right: 20rpx;
|
||
bottom: 300rpx;
|
||
|
||
.btn {
|
||
width: 94rpx;
|
||
height: 110rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
.ft-fixed {
|
||
position: fixed;
|
||
z-index: 10;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: center;
|
||
padding-bottom: 40rpx;
|
||
background: #ffffff;
|
||
padding-top: 20rpx;
|
||
|
||
.lt-btn {
|
||
width: 690rpx;
|
||
height: 60rpx;
|
||
background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btn {
|
||
width: 120rpx;
|
||
height: 68rpx;
|
||
position: relative;
|
||
|
||
>view {
|
||
white-space: nowrap;
|
||
font-weight: 400;
|
||
font-size: 52rpx;
|
||
color: #ffffff;
|
||
position: relative;
|
||
text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
|
||
|
||
// &::before {
|
||
// content: '';
|
||
// position: absolute;
|
||
// bottom: 10rpx;
|
||
// left: -8rpx;
|
||
// width: 22rpx;
|
||
// height: 22rpx;
|
||
// background: url($imgurl+'common/jiantou1.png') no-repeat 0 0 / 100% 100%;
|
||
// }
|
||
|
||
// &::after {
|
||
// content: '';
|
||
// position: absolute;
|
||
// top: 0rpx;
|
||
// right: -10rpx;
|
||
// width: 22rpx;
|
||
// height: 22rpx;
|
||
// background: url($imgurl+'common/jiantou2.png') no-repeat 0 0 / 100% 100%;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.buy-pop {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
background: #f7f7f7;
|
||
padding-bottom: 30rpx;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -62rpx;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 62rpx;
|
||
// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
.buy-pop-hd {
|
||
padding: 20rpx 0;
|
||
padding-left: 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
|
||
.close {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.card-row {
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
height: 82rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 24rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
|
||
.title {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
margin-left: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.row-r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
.icon {
|
||
width: 10rpx;
|
||
height: 17rpx;
|
||
color: #999999;
|
||
margin-left: 10rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.buy-card {
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 30rpx 10rpx;
|
||
background: #ffffff;
|
||
|
||
.buy-info {
|
||
display: flex;
|
||
|
||
.pic {
|
||
width: 190rpx;
|
||
height: 190rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.info-r {
|
||
width: calc(100% - 190rpx);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0 10rpx 30rpx;
|
||
|
||
.title {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.type {
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.price-num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.price {
|
||
font-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.num {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
height: 1px;
|
||
background: #222222;
|
||
margin: 30rpx 0 10rpx;
|
||
}
|
||
|
||
.card-row {
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.row-r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-title {
|
||
margin-top: 30rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.pay-type {
|
||
padding: 30rpx 24rpx;
|
||
border-radius: 20rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.agree {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 32rpx;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.rule {
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
box-sizing: border-box;
|
||
margin: 20rpx 0 0;
|
||
height: 160rpx;
|
||
background: #f9f8e1;
|
||
border-radius: 20rpx;
|
||
|
||
.rule-inner {
|
||
max-height: 120rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.pay-btn {
|
||
margin: 30rpx auto 0;
|
||
width: 686rpx;
|
||
height: 84rpx;
|
||
background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
|
||
display: flex;
|
||
margin-bottom: 90rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
color: #cdef27;
|
||
|
||
>text:nth-child(1) {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.res-pop {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
background: url($imgurl + "common/yb.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
.res-pop-hd {
|
||
width: 400rpx;
|
||
height: 108rpx;
|
||
background: url($imgurl + "common/gxhd.png") no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
.res-pop-bd {
|
||
width: 636rpx;
|
||
height: 760rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin: 36rpx auto;
|
||
|
||
.res-list {
|
||
padding: 20rpx 10rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 210rpx);
|
||
gap: 24rpx 10rpx;
|
||
|
||
.res-item {
|
||
width: 180rpx;
|
||
height: 240rpx;
|
||
background-color: #f8f8f8;
|
||
border-radius: 16rpx;
|
||
|
||
.pic {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
position: relative;
|
||
background: #d8d8d8;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
>image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.type-tag {
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 12rpx;
|
||
z-index: 2;
|
||
width: 68rpx;
|
||
height: 32rpx;
|
||
background: url($imgurl + "common/chouLabel.png") no-repeat 0 0 / 100% 100%;
|
||
font-weight: 400;
|
||
font-size: 14rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.num {
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 10rpx;
|
||
min-width: 42rpx;
|
||
height: 28rpx;
|
||
font-weight: 400;
|
||
font-size: 14rpx;
|
||
color: #333333;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
border-radius: 18rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding: 22rpx 10rpx 0;
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.exchange {
|
||
padding: 10rpx 10rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.res-pop-ft {
|
||
width: 750rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
.ft-btn {
|
||
width: 200rpx;
|
||
height: 68rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
>view:nth-child(1) {
|
||
color: #333333;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ani-pop {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 88;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #000;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 1624rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |