908 lines
25 KiB
Vue
908 lines
25 KiB
Vue
<template>
|
||
<view class="box-detail-page">
|
||
<HeaderCom></HeaderCom>
|
||
<image src="@/static/shop/fx.png" mode="aspectFit" class="share-icon" @click="copy" v-if="!cellBuy"></image>
|
||
<view class="main">
|
||
<view class="box">
|
||
<image src="@/static/box/box.png" mode="" class="box-icon"></image>
|
||
<image src="@/static/box/tai.png" mode="" class="tai-icon"></image>
|
||
<!-- <view class="name-icon">{{detailData.name}}</view> -->
|
||
<view class="name-icon">
|
||
<view class="name">一发入魂</view>
|
||
</view>
|
||
</view>
|
||
<view class="probability">
|
||
<view class="probability-header">
|
||
<view class="probability-header-title">奖池概率</view>
|
||
<view class="probability-header-num">共{{detailData.items.length}}款</view>
|
||
</view>
|
||
<view class="probability-item" style="background-image: url(/static/zy/index/zz.png);color: #526180;">
|
||
<view>
|
||
{{detailData.probability && detailData.probability['SUPREME'] || 0}}
|
||
<text style="font-size: 16rpx;">％</text>
|
||
</view>
|
||
<view class="probability-total">共{{countByGrade('SUPREME') || 0}}个</view>
|
||
</view>
|
||
<view class="probability-item" style="background-image: url(/static/zy/index/xy.png);color: #3D6E99;">
|
||
<view>{{detailData.probability && detailData.probability['RARE'] || 0}}<text style="font-size: 16rpx;">％</text></view>
|
||
<view class="probability-total">共{{countByGrade('RARE') || 0}}个</view>
|
||
</view>
|
||
<view class="probability-item" style="background-image: url(/static/zy/index/yc.png);color: #5361A6;">
|
||
<view>{{detailData.probability && detailData.probability['HIDDEN'] || 0}}<text style="font-size: 16rpx;">％</text></view>
|
||
<view class="probability-total">共{{countByGrade('HIDDEN') || 0}}个</view>
|
||
</view>
|
||
<view class="probability-item" style="background-image: url(/static/zy/index/pt.png);color: #99754C;">
|
||
<view>{{detailData.probability && detailData.probability['NORMAL'] || 0}}<text style="font-size: 16rpx;">％</text></view>
|
||
<view class="probability-total">共{{countByGrade('NORMAL') || 0}}个</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="headerline">
|
||
<!-- <view class="title">奖池</view> -->
|
||
<!-- <image src="@/static/box/qhh.png" mode="" class="swiper" @click="switchover" v-if="isGrid"></image>
|
||
<image src="@/static/box/qh.png" mode="" class="swiper" @click="switchover" v-if="!isGrid"></image> -->
|
||
</view>
|
||
<template>
|
||
<view class="list" v-if="!isGrid">
|
||
<view class="item" v-for="(item,index) in detailData.items" :key="index" @click="goShopDetail(item)">
|
||
<view class="item-shop">
|
||
<image :src="gradeData[item.grade]" mode="" class="grade-icon"></image>
|
||
<image v-if="item.coverResource" :src="item.coverResource.url" mode="" class="shop-icon"></image>
|
||
</view>
|
||
<view class="item-detail">
|
||
<view class="name">{{item.abbreviation}}</view>
|
||
<view class="detail">
|
||
<!-- <view class="point">¥ {{item.sellPrice}}</view> -->
|
||
<!-- <view class="price">¥{{item.sellPrice}}</view> -->
|
||
<!-- <view class="point">{{item.sellPrice}}积分</view>
|
||
<view class="price">¥{{item.sellPrice}}</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-if="isGrid">
|
||
<view class="grid-list">
|
||
<view class="grid" v-for="(item,index) in detailData.items" :key="index" @click="goShopDetail(item)">
|
||
<view class="item-shop">
|
||
<view class="dlg-shop" v-if="item.curStock == 0">售罄</view>
|
||
<image :src="gradeData[item.grade]" mode="" class="grade-icon"></image>
|
||
<image v-if="item.coverResource" :src="item.coverResource.url" mode="" class="shop-icon"></image>
|
||
<!-- <view class="shop-icon"></view> -->
|
||
</view>
|
||
<view class="item-detail">
|
||
<view class="name">{{item.abbreviation}}</view>
|
||
<!-- <view class="detail"> -->
|
||
<!-- <view class="point">¥ {{item.sellPrice}}</view> -->
|
||
<!-- <view class="price">¥{{item.sellPrice}}</view> -->
|
||
<!-- <view class="point">{{item.sellPrice}}积分</view>
|
||
<view class="price">¥{{item.sellPrice}}</view> -->
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="footer" v-if="isNo">
|
||
<template v-if='activity === "buy"'>
|
||
<view class="btn-tip" @click="tip">提示卡使用</view>
|
||
<view class="btn-open" @click="sellBox">立即开盒</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="now-buy" @click="confirmBuy">立即支付</view>
|
||
</template>
|
||
|
||
</view>
|
||
<view class="footer" v-if="cellBuy">
|
||
<view class="now-buy" @click="cellConfirmBuy">立即支付</view>
|
||
</view>
|
||
|
||
<popup-view v-model="cellShow" mode="bottom" border-radius="15" z-index="999" :maskCloseAble="false" closeable>
|
||
<BuyBoxRunCom :detailData="detailBoxData" @payStatus="payStatus" @isOk="buySuccess" boxType="buy" :payNum="payNum" :isActivityReport="true" isActivity="runActivity" :curTaskId="curTaskId" :activityId="activityId" :activityType="activityType" :isNormal="isNormal"></BuyBoxRunCom>
|
||
</popup-view>
|
||
|
||
|
||
|
||
<BuyCom :visible="buyVisible" :item="detailData" @close="buyClose" @click="goBuy"></BuyCom>
|
||
|
||
|
||
<!-- 购买弹窗 -->
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1000" :maskCloseAble="false" closeable>
|
||
<BuyBoxCom :typeNum="prizeType" :detailData="detailData" @isOk="buySuccess" @payStatus="payStatus" :boxType="activity" @coinDeficit="coinDeficit" :isDetail="true" :payNum="payNum"></BuyBoxCom>
|
||
</popup-view>
|
||
<popup-view v-model="showActivity" mode="bottom" border-radius="45" zIndex="1000" :maskCloseAble="false" >
|
||
<BuyActivityBox :detailData="detailData" @isOk="buySuccess" @payStatus="payStatus" :boxType="activity" @coinDeficit="coinDeficit" :isDetail="true" :payNum="payNum" @close="showActivity = false"></BuyActivityBox>
|
||
</popup-view>
|
||
|
||
<template v-if="isPayDlgVisible">
|
||
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
|
||
</template>
|
||
<!-- 去充值 -->
|
||
<popup-view v-model="isTopUp" mode="bottom" border-radius="15" zIndex="1000">
|
||
<coinDeficitCom @close="closeTop" @sucClose="sucClose"></coinDeficitCom>
|
||
</popup-view>
|
||
<view class="custom-toast" v-if="isTip">
|
||
<view class="toast-txt">支付成功</view>
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/index/boxDetail"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
myMixins
|
||
} from "@/mixins/mixins.js";
|
||
import {
|
||
boxesDetail,
|
||
boxOrderApi,
|
||
activityDetailApi,
|
||
activityDetailSourceApi,
|
||
promptCountApi,
|
||
boxOrderPaidApi
|
||
} from '@/API/index.js'
|
||
import {
|
||
shareApi
|
||
} from '@/API/user.js'
|
||
import { mathMul } from '@/utils/mathUtils.js'
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import BuyCom from './components/buy.vue'
|
||
import BuyBoxCom from './components/buyBox.vue'
|
||
import coinDeficitCom from './components/coinDeficit.vue'
|
||
import reportClickFn from '@/utils/report.js'
|
||
import BuyActivityBox from './components/buyActivityBox.vue'
|
||
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
import BuyBoxRunCom from './components/buyBoxRun.vue'
|
||
|
||
// import {numAdd,numSub,numMulti,numDiv} from '@/utils/precisionNum';
|
||
import Decimal from 'decimal.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: "", //盲盒id
|
||
detailData: {
|
||
items: [],
|
||
price: []
|
||
},
|
||
priceTypeObj: {
|
||
SINGLE: "一发入魂",
|
||
TRIPLE: "三连抽",
|
||
PENTA: "五连抽"
|
||
},
|
||
priceTypeNum:{
|
||
SINGLE: "1",
|
||
TRIPLE: "3",
|
||
PENTA: "5"
|
||
},
|
||
gradeData: {
|
||
NORMAL: '../../static/grade/pt.png',
|
||
HIDDEN: '../../static/grade/yc.png',
|
||
RARE: '../../static/grade/xy.png',
|
||
SUPREME: '../../static/grade/zz.png',
|
||
},
|
||
isGrid: true, //是否表个显示
|
||
buyVisible:false,
|
||
activity:'',
|
||
isTopUp:false,
|
||
show:false,
|
||
isTip:false,
|
||
shareUrl:'',
|
||
shareqr:'',
|
||
showActivity:false,
|
||
isPayDlgVisible:false,
|
||
paidData:{},
|
||
payNum:0,
|
||
isNo:true,//一元购盲盒不显示购买
|
||
prize:'',//中奖播报进入 有值直接拉起支付
|
||
prizeType:'',
|
||
cellBuy:'',//跳格子活动 特殊（活动不再首页展示的）盲盒
|
||
cellShow:false,
|
||
detailBoxData:{},
|
||
curTaskId:'',
|
||
activityId:'',
|
||
activityType:'',
|
||
isNormal:false
|
||
}
|
||
},
|
||
components:{HeaderCom,BuyCom,BuyBoxCom,coinDeficitCom,BuyActivityBox,isPayDlgVue,BuyBoxRunCom},
|
||
onLoad(option) {
|
||
console.log(option)
|
||
if(option.prize){
|
||
this.prize = option.prize
|
||
}else{
|
||
this.prize = ''
|
||
}
|
||
if(option.prizeType){
|
||
this.prizeType = option.prizeType
|
||
}
|
||
// else{
|
||
// this.prizeType = ''
|
||
// }
|
||
|
||
if(option.isNo){
|
||
this.isNo = false
|
||
}
|
||
if(option.cellBuy){
|
||
this.cellBuy = option.cellBuy
|
||
}else{
|
||
this.cellBuy = ''
|
||
}
|
||
if(option.curTaskId){
|
||
this.curTaskId = option.curTaskId
|
||
}
|
||
if(option.activityId){
|
||
this.activityId = option.activityId
|
||
}
|
||
if(option.activityType){
|
||
this.activityType = option.activityType
|
||
}
|
||
if(option.isNormal){
|
||
this.isNormal = option.isNormal === 'true' ? true : false
|
||
}
|
||
if(option.shareqr){
|
||
this.shareqr = option.shareqr
|
||
}
|
||
if(option.type){
|
||
// 活动盲盒详情 ROOKIE 新手盲盒 PREFERENTIAL_DAY 每日优惠
|
||
this.activity = option.type
|
||
|
||
this.getActivityDetail()
|
||
}else{
|
||
this.activity = 'buy'
|
||
this.id = option.id
|
||
this.getDetail()
|
||
}
|
||
|
||
this.getShare()
|
||
|
||
},
|
||
methods: {
|
||
cellConfirmBuy(){
|
||
boxesDetail({
|
||
id:this.id
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailBoxData = res.data
|
||
this.cellShow = true
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
|
||
againPay(){
|
||
this.payNum += 1
|
||
},
|
||
isCancelCk(){
|
||
this.isPayDlgVisible = false
|
||
},
|
||
// 购买弹框回传回来的方法 用于是否打开是否支付弹框
|
||
payStatus(val){
|
||
this.isPayDlgVisible = true
|
||
console.log(val)
|
||
this.paidData = val
|
||
},
|
||
|
||
isPayStatus(){
|
||
boxOrderPaidApi({
|
||
no:this.paidData.no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
console.log(`/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${this.paidDatano.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
|
||
})
|
||
uni.hideLoading()
|
||
}else{
|
||
this.$api.msg('未查询到支付结果')
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
getShare(){
|
||
shareApi().then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
if(res.data){
|
||
this.shareUrl = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 代币不足
|
||
coinDeficit(){
|
||
this.isTopUp = true
|
||
},
|
||
closeTop(){
|
||
this.isTopUp = false
|
||
},
|
||
|
||
sucClose(){
|
||
this.isTopUp = false
|
||
this.isTip = true
|
||
setTimeout(() => {
|
||
this.isTip = false
|
||
},1500)
|
||
},
|
||
// 购买成功
|
||
buySuccess(){
|
||
this.isPayDlgVisible = false
|
||
this.show = false
|
||
this.cellShow = false
|
||
this.showActivity = false
|
||
},
|
||
// 切换商品排列方式
|
||
switchover() {
|
||
this.isGrid = !this.isGrid
|
||
},
|
||
// 购买盲盒
|
||
sellBox(item) {
|
||
console.log(item)
|
||
// this.boxType = 'buy'
|
||
this.show = true
|
||
|
||
|
||
// 盲盒预览埋点
|
||
reportClickFn('box_buy_review_clk')
|
||
|
||
// this.buyVisible = true
|
||
// uni.navigateTo({
|
||
// url: `/pages/index/boxOrderConfirm?boxId=${this.detailData.id}&type=SINGLE`
|
||
// })
|
||
},
|
||
// 查看详情
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/product/detail?id=${item.productId}`
|
||
})
|
||
},
|
||
// 获取活动盲盒详情
|
||
getActivityDetail(){
|
||
let header = {}
|
||
if(this.shareqr){
|
||
header = {'share-qr':this.shareqr}
|
||
}else{
|
||
header = {}
|
||
}
|
||
activityDetailSourceApi({source:this.activity
|
||
},header).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailData = res.data
|
||
const num2 = new Decimal(100);
|
||
|
||
this.detailData.probability['NORMAL'] = this.detailData.probability['NORMAL'] ? num2.times(Number(this.detailData.probability['NORMAL'])).toString() : 0;
|
||
this.detailData.probability['HIDDEN'] = this.detailData.probability['HIDDEN'] ? num2.times(Number(this.detailData.probability['HIDDEN'])).toString() : 0;
|
||
this.detailData.probability['RARE'] = this.detailData.probability['RARE'] ? num2.times(Number(this.detailData.probability['RARE'])).toString() : 0;
|
||
this.detailData.probability['SUPREME'] = this.detailData.probability['SUPREME'] ? num2.times(Number(this.detailData.probability['SUPREME'])).toString() : 0;
|
||
console.log(this.detailData.probability)
|
||
// this.detailData.probability['NORMAL'] = numMulti(Number(this.detailData.probability['NORMAL']),100)
|
||
// this.detailData.probability['HIDDEN'] = numMulti(Number(this.detailData.probability['HIDDEN']),100)
|
||
// this.detailData.probability['RARE'] = numMulti(Number(this.detailData.probability['RARE']),100)
|
||
// this.detailData.probability['SUPREME'] = numMulti(Number(this.detailData.probability['SUPREME']),100)
|
||
|
||
// setNavigationBarTitle
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.detailData.name}`
|
||
})
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// activityDetailApi({
|
||
// },header).then(res => {
|
||
// if (res.code === 200) {
|
||
// this.detailData = res.data
|
||
// const num2 = new Decimal(100);
|
||
|
||
// this.detailData.probability['NORMAL'] = this.detailData.probability['NORMAL'] ? num2.times(Number(this.detailData.probability['NORMAL'])).toString() : 0;
|
||
// this.detailData.probability['HIDDEN'] = this.detailData.probability['HIDDEN'] ? num2.times(Number(this.detailData.probability['HIDDEN'])).toString() : 0;
|
||
// this.detailData.probability['RARE'] = this.detailData.probability['RARE'] ? num2.times(Number(this.detailData.probability['RARE'])).toString() : 0;
|
||
// this.detailData.probability['SUPREME'] = this.detailData.probability['SUPREME'] ? num2.times(Number(this.detailData.probability['SUPREME'])).toString() : 0;
|
||
// console.log(this.detailData.probability)
|
||
// // this.detailData.probability['NORMAL'] = numMulti(Number(this.detailData.probability['NORMAL']),100)
|
||
// // this.detailData.probability['HIDDEN'] = numMulti(Number(this.detailData.probability['HIDDEN']),100)
|
||
// // this.detailData.probability['RARE'] = numMulti(Number(this.detailData.probability['RARE']),100)
|
||
// // this.detailData.probability['SUPREME'] = numMulti(Number(this.detailData.probability['SUPREME']),100)
|
||
|
||
// // setNavigationBarTitle
|
||
// uni.setNavigationBarTitle({
|
||
// title: `${this.detailData.name}`
|
||
// })
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// })
|
||
},
|
||
// 获取盲盒详情
|
||
getDetail() {
|
||
let header = {}
|
||
if(this.shareqr){
|
||
header = {'share-qr':this.shareqr}
|
||
}else{
|
||
header = {}
|
||
}
|
||
boxesDetail({
|
||
id: this.id
|
||
},header).then(res => {
|
||
if (res.code === 200) {
|
||
this.detailData = res.data
|
||
reportClickFn(`boxId_derail_${this.detailData.id}`)
|
||
console.log("this.detailData.probability:",this.detailData.probability)
|
||
const num2 = new Decimal(100);
|
||
|
||
this.detailData.probability['NORMAL'] = this.detailData.probability['NORMAL'] ? num2.times(Number(this.detailData.probability['NORMAL'])).toString() : 0;
|
||
this.detailData.probability['HIDDEN'] = this.detailData.probability['HIDDEN'] ? num2.times(Number(this.detailData.probability['HIDDEN'])).toString() : 0;
|
||
this.detailData.probability['RARE'] = this.detailData.probability['RARE'] ? num2.times(Number(this.detailData.probability['RARE'])).toString() : 0;
|
||
this.detailData.probability['SUPREME'] = this.detailData.probability['SUPREME'] ? num2.times(Number(this.detailData.probability['SUPREME'])).toString() : 0;
|
||
// this.detailData.probability['NORMAL'] = numMulti(Number(this.detailData.probability['NORMAL']),100)
|
||
// this.detailData.probability['HIDDEN'] = numMulti(Number(this.detailData.probability['HIDDEN']),100)
|
||
// this.detailData.probability['RARE'] = numMulti(Number(this.detailData.probability['RARE']),100)
|
||
// this.detailData.probability['SUPREME'] = numMulti(Number(this.detailData.probability['SUPREME']),100)
|
||
// setNavigationBarTitle
|
||
uni.setNavigationBarTitle({
|
||
title: `${this.detailData.name}`
|
||
})
|
||
if(this.prize){
|
||
this.sellBox()
|
||
}
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
cueCard() {
|
||
uni.navigateTo({
|
||
url: `/pages/index/card`
|
||
})
|
||
},
|
||
tip(){
|
||
// promptCountApi().then(res => {
|
||
// if(res.data === '0'){
|
||
// this.$api.msg('暂无提示卡')
|
||
// }else{
|
||
// uni.navigateTo({
|
||
// url:`/pages/index/card?boxId=${this.detailData.id}`
|
||
// })
|
||
// }
|
||
// })
|
||
uni.navigateTo({
|
||
url:`/pages/index/card?boxId=${this.detailData.id}`
|
||
})
|
||
},
|
||
buyClose(){
|
||
this.buyVisible = false
|
||
},
|
||
confirmBuy(){
|
||
if(this.activity === 'buy'){
|
||
this.show = true
|
||
}else{
|
||
this.showActivity = true
|
||
}
|
||
// uni.navigateTo({
|
||
// url:`/pages/index/boxOrderConfirm?activity=activity&boxId=${this.detailData.id}`
|
||
// })
|
||
},
|
||
goShopDetail(item){
|
||
// uni.navigateTo({
|
||
// url:`/pages/shop/detail?id=${item.productId}`
|
||
// })
|
||
// uni.switchTab({
|
||
// url:`/pages/shop/index`
|
||
// })
|
||
},
|
||
copy() {
|
||
let search = window.location.href
|
||
uni.setClipboardData({
|
||
data: `${search}&shareqr=${this.shareUrl}`,
|
||
})
|
||
console.log(search);
|
||
|
||
},
|
||
countByGrade(grade) {
|
||
return this.detailData.items.filter(item => item.grade === grade).length;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.box-detail-page {
|
||
padding-bottom: 144rpx;
|
||
.main{
|
||
width: 100%;
|
||
height: 746rpx;
|
||
background-image: url('@/static/box/bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
padding-top: 112rpx;
|
||
.box{
|
||
width: 100%;
|
||
height: 438rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding-top: 54rpx;
|
||
position: relative;
|
||
.box-icon{
|
||
width: 322rpx;
|
||
height: 260rpx;
|
||
z-index: 2;
|
||
}
|
||
.tai-icon{
|
||
width: 750rpx;
|
||
height: 256rpx;
|
||
margin-top: -100rpx;
|
||
z-index: 1;
|
||
}
|
||
.name-icon{
|
||
width: 402rpx;
|
||
height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 40rpx;
|
||
background-image: url('@/static/box/name.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
font-size: 60rpx;
|
||
color: #335C80;
|
||
font-family: YouSheBiaoTiHei;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 240rpx;
|
||
z-index: 3;
|
||
.name{
|
||
width: 280rpx;
|
||
overflow: hidden;
|
||
white-space: normal;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
.probability{
|
||
width: 100%;
|
||
height: 244rpx;
|
||
background-image: url('@/static/zy/index/gl.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
padding: 56rpx 32rpx 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
.probability-header{
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.probability-header-title{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.probability-header-num{
|
||
// width: 68rpx;
|
||
height: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
background-image:url('@/static/zy/index/num.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
.probability-item{
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
width: 160rpx;
|
||
height: 164rpx;
|
||
display: flex;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
padding-top: 68rpx;
|
||
.probability-total{
|
||
margin-top: 22rpx;
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.headerline {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
margin-top: 64rpx;
|
||
|
||
.title {
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.swiper {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
margin-top: 14rpx;
|
||
padding: 0 32rpx;
|
||
|
||
.item {
|
||
background-color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
width: 686rpx;
|
||
height: 160rpx;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item-shop {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
position: relative;
|
||
border-radius: 8rpx 0 0 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-image: url('@/static/new/box-bg.png');
|
||
background-size: contain;
|
||
|
||
.shop-icon {
|
||
width: 116rpx;
|
||
height: 120rpx;
|
||
}
|
||
.grade-icon{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 108rpx;
|
||
height: 72rpx;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.item-detail {
|
||
margin-left: 32rpx;
|
||
width: 462rpx;
|
||
|
||
.name {
|
||
width: 462rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.detail {
|
||
margin-top: 32rpx;
|
||
width: 462rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.point {
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.grid-list {
|
||
padding: 0 32rpx;
|
||
display: grid;
|
||
gap: 14rpx;
|
||
grid-template-rows: 1fr;
|
||
margin: 0px auto;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
border-bottom: none;
|
||
border-radius: 8rpx;
|
||
margin-top: 14rpx;
|
||
|
||
.grid {
|
||
width: 336rpx;
|
||
height: 320rpx;
|
||
background-color: #fff;
|
||
|
||
.item-shop {
|
||
width: 336rpx;
|
||
height: 240rpx;
|
||
background-image: url('@/static/new/card-shop.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
// background: linear-gradient(180deg, rgba(98, 126, 153, 0) 0%, #627E99 100%), #E6EBF0;
|
||
border-radius: 8rpx 8rpx 0px 0px;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
.dlg-shop{
|
||
width: 336rpx;
|
||
height: 240rpx;
|
||
background-color: rgba(0,0,0,0.4);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 3;
|
||
font-family: Zhxs;
|
||
font-size: 60rpx;
|
||
color: #F26378;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.shop-icon {
|
||
width: 192rpx;
|
||
height: 196rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
.grade-icon{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 108rpx;
|
||
height: 72rpx;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.item-detail {
|
||
padding: 16rpx;
|
||
width: 336rpx;
|
||
background-color: #fff;
|
||
border-radius: 0 0 8rpx 8rpx;
|
||
|
||
.name {
|
||
width: 304rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.detail {
|
||
height: 40rpx;
|
||
width: 304rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.point {
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
height: 144rpx;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding: 0 32rpx;
|
||
z-index: 4;
|
||
.now-buy{
|
||
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.btn-tip{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 328rpx;
|
||
height: 96rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #EBEBEB;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
}
|
||
.btn-open{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 328rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 8rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
.custom-toast{
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100vh;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999999;
|
||
.toast-txt{
|
||
z-index: 999999;
|
||
border-radius: 6rpx;
|
||
padding: 6rpx 26rpx;
|
||
background-color: rgba(0,0,0,0.8);
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.share-icon{
|
||
position: fixed;
|
||
top: 42rpx;
|
||
right: 32rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
z-index: 100;
|
||
}
|
||
</style> |