2174 lines
47 KiB
Vue
2174 lines
47 KiB
Vue
<!--
|
||
* @Date: 2023-11-13 15:46:52
|
||
* @LastEditTime: 2024-03-09 14:09:26
|
||
* @Description: content
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||
<uni-icons type="left" color="#000000"></uni-icons>
|
||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||
</view>
|
||
|
||
<view class="center relative" style="z-index: 10;" :style="{top:$sys().statusBarHeight+'px'}">
|
||
<!-- <image :src="$img1('index/ljLeft.png')"></image> -->
|
||
<text class="" style="padding-top: 20rpx;">连击赏</text>
|
||
<!-- <image :src="$img1('index/ljRight.png')"></image> -->
|
||
</view>
|
||
|
||
|
||
<view v-if="pageData" class="page-hd common_bg relative">
|
||
|
||
<view v-if="pageData" class="user-btns">
|
||
<view class="user-num">
|
||
<view class="user-list">
|
||
<view class="avatar" v-for="(item, i) in pageData.goods.join_user.slice(0, 3)" :key="i"
|
||
:style="{'z-index': i}">
|
||
<image :src="item" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
{{ pageData.goods.join_count }}次参与
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 首抽半价 -->
|
||
<view v-if="pageData.goods.is_shou_zhe == 1" class="half-tag flex">
|
||
<image class="img100" :src="$img1('common/chouBanjia.png')" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<view v-if="pageTabCur == 0" class="link-num center">
|
||
连击×{{ pageData.goods.user_lian_ji_number }}
|
||
</view>
|
||
|
||
|
||
<view class="swiper_view1 center" @click="swCur&&swCur--">
|
||
<uni-icons type="left" color="#D8D8D8"></uni-icons>
|
||
</view>
|
||
<view class="swiper_view2 center" @click="(pageData.goods_list.data.length-1) != swCur&&swCur++">
|
||
<uni-icons type="right" color="#D8D8D8"></uni-icons>
|
||
</view>
|
||
|
||
|
||
<view class="align-center swiperAll" style="width: 100%; height: 100%; position: absolute;">
|
||
|
||
<swiper class="swiper" :indicator-dots="false" :current="swCur" @change="swChange" :autoplay="autoplay"
|
||
:interval="5000" :duration="500">
|
||
<swiper-item class="center" v-for="(item, i) in pageData.goods_list.data" :key="i">
|
||
<view class="swiper-item flex">
|
||
<image class="img100" :src="item.imgurl" mode="widthFix"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<text class="goods-name hidden" style="">{{pageData.goods_list.data[swCur].title}}</text>
|
||
|
||
<view class="center swiperItemInfo" v-if="pageData&&pageData.goods_list.data[swCur]">
|
||
<text>￥{{pageData.goods_list.data[swCur].price}}/ <text style="font-size: 18rpx;">抽</text></text>
|
||
</view>
|
||
|
||
<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>
|
||
|
||
<view class="align-center ml30 column" style="position: absolute; top: 56rpx; right: 32rpx;"
|
||
@tap="toggleCollect">
|
||
<image style="width: 64rpx; height: 64rpx;"
|
||
:src="pageData.goods&&pageData.goods.collection_is?$img1('index/sc1.png'):$img1('index/sc2.png')">
|
||
</image>
|
||
<text style="color: #FFFFFF; font-size: 20rpx;">收藏</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="page-tab justify-center relative">
|
||
<view class="page-tab-item center" v-for="(item, i) in pageTab" :key="i" :class="{ act: pageTabCur == i }"
|
||
@click="pageTabChange(i)">
|
||
<!-- <image v-if="i==0" :src="$img1('index/ljLeft.png')"></image> -->
|
||
<text>{{ item.title }}</text>
|
||
<!-- <image v-if="i==1" :src="$img1('index/ljRight.png')"></image> -->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
||
<view class="tab">
|
||
<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
|
||
<text>规则说明</text>
|
||
</view>
|
||
<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
|
||
<text>概率</text>
|
||
</view>
|
||
<view class="tab-item3 center" :class="[tabCur == 2 ? 'act' : 'unact']" @click="tabChange(2)">
|
||
<text>记录</text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
<!-- <view class="align-center guizeSc">
|
||
<view class="align-center">
|
||
<image :src="$img1('index/guize.png')"></image>
|
||
<text>规则</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
|
||
</view>
|
||
|
||
<view v-if="tabCur == 1 && pageData" class="list">
|
||
<view class="list-item common_bg mb30" v-for="(item, i) in pageData.goodslist" :key="i">
|
||
<view class="list-title common_bg align-center">
|
||
<view class="flex-1 align-center">
|
||
<image :src="item.shang_imgurl"></image>
|
||
<text class="ml20">{{ item.pro }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <scroll-view scroll-x></scroll-view> -->
|
||
<view class="goods-list">
|
||
<template v-for="(a, b) in item.goods_list">
|
||
<view class="goods-item column" :key="b" @click="previewDetail(item, a)">
|
||
<view class="pic">
|
||
<image :src="a.imgurl" lazy-load></image>
|
||
<view v-if="a.goods_type == 2" class="yu-tag ziti">预售</view>
|
||
</view>
|
||
<view class="title hang1">
|
||
{{ a.title }}
|
||
</view>
|
||
<view class="price">售价:{{ a.price }}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<template v-if="tabCur == 2">
|
||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getLog" :down="downOption"
|
||
:up="upOption">
|
||
<scroll-view class="sub-tab" scroll-x>
|
||
<view class="sub-tab-item common_bg" v-for="(item, i) in subTab" :key="i"
|
||
:class="{ act: subTabCur == i }" @click="subTabChange(i)">
|
||
{{ item.shang_title }}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="log-list">
|
||
<view class="log-item br10" v-for="(item, i) in logList" :key="i">
|
||
<view class="avatar">
|
||
<image :src="item.user_info.headimg" lazy-load></image>
|
||
</view>
|
||
|
||
<view class="info">
|
||
<view class="name hang1">
|
||
{{ item.user_info.nickname }}
|
||
</view>
|
||
|
||
<view class="time">{{ item.addtime }}</view>
|
||
</view>
|
||
|
||
<view class="prize">
|
||
<view class="pic flex">
|
||
<image class="img100" :src="item.goodslist_imgurl"></image>
|
||
</view>
|
||
<view class="align-end column">
|
||
<view class="center" :style="{background: item.shang_color}">{{item.shang_title}}</view>
|
||
<view class="align-center mt10">
|
||
<view class="title hang1">
|
||
{{ item.goodslist_title }}
|
||
</view>
|
||
<view class="num">×1</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</template>
|
||
|
||
<view class="btFixed column align-center" v-if="false">
|
||
<template v-if="pageTabCur == 0">
|
||
<view class="btFixed-top center">
|
||
<image @click="jian" :src="$img('/static/img/jian1.png')"></image>
|
||
<view class="center" @click="$c.noDouble(confirmSubmit, [0])">
|
||
购买
|
||
</view>
|
||
<image @click="jia" :src="$img('/static/img/jia1.png')"></image>
|
||
</view>
|
||
<view class="btFixed-footer mt20 align-center justify-around">
|
||
<view class="btFixed-footer-one center" @click="doMax">连击MAX</view>
|
||
<view class="btFixed-footer-two center">连击 {{buyNum}} 次</view>
|
||
<view class="btFixed-footer-three center">{{ pageData.goods?pageData.goods.user_mb_number:0 }}次夺取秘宝
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="pageTabCur == 1">
|
||
<view class="btFixed-top center">
|
||
<image @click="jian" :src="$img('/static/img/jian1.png')"></image>
|
||
<view class="center" @click="$c.noDouble(confirmSubmit, [0])">
|
||
使用密保{{buyNum}}次
|
||
</view>
|
||
<image @click="jia" :src="$img('/static/img/jia1.png')"></image>
|
||
</view>
|
||
<view class="btFixed-footer2 mt20 align-center justify-around">
|
||
<view class="btFixed-footer2-one center" @click="doMax">连击MAX</view>
|
||
<view class="btFixed-footer2-two center">连击 1 次</view>
|
||
<view class="btFixed-footer2-three center">{{ pageData.goods?pageData.goods.user_mb_number:0 }}次夺取秘宝
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="btnFixed column align-center">
|
||
<view style="width: 100%; height: 75rpx; display: flex; align-items: center; position: relative;">
|
||
|
||
<view class="btnFixed-numBox align-center justify-between">
|
||
<image @click="jian" :src="$img1('index/jian.png')"></image>
|
||
<text class="flex-1 center" style="margin-bottom: 10rpx;">{{buyNum}}</text>
|
||
<image @click="jia" :src="$img1('index/jia.png')"></image>
|
||
</view>
|
||
|
||
<!-- 进度条-->
|
||
<view class="center" v-if="pageTabCur!=1"
|
||
style="min-width: 112rpx; height: 40rpx; background-color: #F5F5F5; border-radius: 20rpx; position: absolute; left: 38rpx;">
|
||
<view class="center row" style="color: #999999; font-size: 20rpx;">
|
||
<text style="font-size: 16rpx; margin-right: 8rpx;">cp:</text>
|
||
<text>{{pageData.goods?pageData.goods.user_lian_ji_number:0}}/{{pageData.goods?pageData.goods.lian_ji_num:0}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="btnFixed-btns relative center">
|
||
<view :class="pageTabCur==0?'btnFixed-btns-one':'btnFixed-btns-one2 filter'"
|
||
@click="pageTabCur==0 && $c.noDouble(confirmSubmit, [0])">连击{{ pageTabCur==0?buyNum:0}}次</view>
|
||
<view :class="pageTabCur==0?'':'filter'" class="btnFixed-btns-lianji column center" @click="doMax">
|
||
<!-- <text>连击</text>
|
||
<text>MAX</text> -->
|
||
</view>
|
||
<view :class="pageTabCur==1?'btnFixed-btns-two':'btnFixed-btns-two2 filter'"
|
||
@click="pageTabCur==1 && $c.noDouble(confirmSubmit, [0])">
|
||
{{ pageData.goods?pageData.goods.user_mb_number:0 }}次夺取秘宝
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
||
<view 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"
|
||
@click="item.isChoose = !item.isChoose">
|
||
<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">×1</view>
|
||
</view>
|
||
<view class="title hang1">
|
||
{{ item.goodslist_title }}
|
||
</view>
|
||
<view class="exchange">
|
||
{{
|
||
item.goodslist_money * 1 > 0
|
||
? `可兑换:${item.goodslist_money}`
|
||
: `不可兑换`
|
||
}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="res-pop-ft mt20">
|
||
<view class="ft-btn common_bg justify-center" :style="{
|
||
backgroundImage: `url(${$img1('common/quhegui.png')})`
|
||
}" @click="toBag">
|
||
<text>去发货</text>
|
||
</view>
|
||
|
||
<view class="ft-btn common_bg justify-center" :style="{
|
||
backgroundImage: `url(${$img1('common/jixuchou.png')})`
|
||
}" @click="close('resPop')">
|
||
<text>继续抽</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="dPop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
|
||
<view v-if="previewData" class="d-pop">
|
||
<view class="pic center relative">
|
||
<image :src="previewData.imgurl" lazy-load></image>
|
||
<view class="justify-center">{{ previewData.shang_title }}</view>
|
||
</view>
|
||
|
||
<view class="title">
|
||
<text class="hang1">
|
||
{{ previewData.title }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="d-list">
|
||
<view class="d-item">
|
||
{{ previewData.shang_title }} {{ previewData.pro }}
|
||
</view>
|
||
|
||
<view class="d-item">产品类型:{{ optData.type_text }}</view>
|
||
</view>
|
||
|
||
<view class="close icon" @click="close('dPop')">
|
||
<image :src="$img('/static/img/close.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="buyPop" type="bottom">
|
||
<view v-if="orderData" class="buy-pop relative">
|
||
<view class="buy-pop-hd">
|
||
<view class="close"></view>
|
||
<text>确认订单</text>
|
||
<view class="close icon" @click="close('buyPop')">
|
||
<image :src="$img('/static/img/close2.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
<view class="buy-card">
|
||
<view class="buy-info">
|
||
<view class="pic">
|
||
<image :src="orderData.goods.imgurl_detail" lazy-load></image>
|
||
</view>
|
||
<view class="info-r">
|
||
<view class="title hang1">
|
||
{{ orderData.goods.title }}
|
||
</view>
|
||
<view class="type">类型:明信片</view>
|
||
<template v-if="
|
||
orderData.goods.is_shou_zhe == 1 &&
|
||
orderData.goods.shou_zhe_price * 1 > 0
|
||
">
|
||
<view class="price-num">
|
||
<view class="price">
|
||
¥
|
||
<text>{{ orderData.goods.shou_zhe_price }}</text>
|
||
</view>
|
||
<view class="num">×{{ 1 }}</view>
|
||
</view>
|
||
<view v-if="orderData.goods.prize_num > 1" class="price-num">
|
||
<view class="price">
|
||
¥
|
||
<text>{{ orderData.goods.price }}</text>
|
||
</view>
|
||
<view class="num">
|
||
×{{ orderData.goods.prize_num * 1 - 1 }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view v-else class="price-num">
|
||
<view class="price">
|
||
¥<text>{{ orderData.goods.price }}</text>
|
||
</view>
|
||
<view class="num">×{{ orderData.goods.prize_num }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- <view class="card-row" @click="$c.to({ url: '/pages/user/vip' })">
|
||
<view class="title align-center">
|
||
<text class="ml20">{{ orderData.zhe ? `会员折扣 (${orderData.zhe}折)` : '暂无会员抵扣'}}</text>
|
||
</view>
|
||
<view class="row-r">
|
||
详情
|
||
<view class="icon">
|
||
<image :src="$img1('common/right1.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
<view class="card-row" @click="toCoupon">
|
||
<view class="title align-center">
|
||
<text class="ml20">优惠券</text>
|
||
</view>
|
||
<view class="row-r">
|
||
{{
|
||
couponData && orderData.coupon_price > 0
|
||
? `-${couponData.price}`
|
||
: '未选择'
|
||
}}
|
||
<view class="icon">
|
||
<image :src="$img1('common/right1.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="mt20" style="background: #FFFFFF; border-radius: 16rpx;">
|
||
<view class="pay-type" @click="changePay('useIntegral')">
|
||
<view class="title align-center">
|
||
使用{{$config.getAppSetting('currency1_name')}}抵扣¥{{ orderData.use_integral_money }} <text
|
||
style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.integral }}个)</text>
|
||
</view>
|
||
<view class="icon">
|
||
<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
<view class="pay-type" @click="changePay('useMoney')">
|
||
<view class="title align-center">
|
||
{{$config.getAppSetting('balance_name')}}支付¥{{ orderData.use_money }} <text
|
||
style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.money }})</text>
|
||
</view>
|
||
|
||
<view class="icon">
|
||
<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="rule">
|
||
<scroll-view class="rule-inner" scroll-y>
|
||
<view v-html="sendRuleData"></view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="agree" @click="isAgree = !isAgree">
|
||
<view class="icon">
|
||
<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
|
||
|
||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||
</view>
|
||
|
||
我已满18岁,阅读并同意
|
||
|
||
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
|
||
《用户协议》
|
||
</text>
|
||
|
||
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
|
||
《隐私政策》
|
||
</text>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="pay-btn" @click="$c.noDouble(confirmSubmit, [1])">
|
||
<text>立即支付</text>
|
||
<text>
|
||
{{
|
||
pageData.goods.type == 5
|
||
? ` ${orderData.price}积分`
|
||
: ` ¥${orderData.price}`
|
||
}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<view v-if="aniShow" class="ani-pop">
|
||
<image :src="aniSrc" lazy-load></image>
|
||
</view>
|
||
|
||
<buy-notice ref="buyNotice" @confirm="$c.noDouble(confirmSubmit, [1, true])"></buy-notice>
|
||
|
||
<rule-pop ref="rulePop"></rule-pop>
|
||
<coupon-pop ref="couponPop"></coupon-pop>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getLianJiGoodsDetail, getInfiniteShangLog } from '@/common/server/goods.js';
|
||
import { calcInfiniteOrderMoney, createInfiniteOrder, createInfiniteMibaoOrder, getInfinitePrizeOrderLogByNum } from '@/common/server/order.js';
|
||
import { toggleCollection } from '@/common/server/collection.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
optData: '',
|
||
buyNum: 0,
|
||
useMoney: true,
|
||
useIntegral: true,
|
||
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
||
downOption: {
|
||
auto: false
|
||
},
|
||
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
||
upOption: {
|
||
auto: true,
|
||
page: {
|
||
size: 15 // 每页数据的数量,默认10
|
||
}
|
||
},
|
||
pageTab: {
|
||
0: {
|
||
title: '连击赏'
|
||
},
|
||
1: {
|
||
title: '秘宝池'
|
||
}
|
||
},
|
||
pageTabCur: 0,
|
||
tabList: {
|
||
1: {
|
||
title: '赏品预览'
|
||
},
|
||
2: {
|
||
title: '中赏记录'
|
||
}
|
||
},
|
||
tabCur: 1,
|
||
swCur: 0,
|
||
autoplay: false,
|
||
subTab: [],
|
||
subTabCur: 0,
|
||
pageData: '',
|
||
previewData: '',
|
||
orderData: '',
|
||
prizeData: '',
|
||
sendRuleData: '',
|
||
couponData: '',
|
||
isAgree: true,
|
||
aniShow: false,
|
||
logList: []
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
reChooseNum() {
|
||
if (!this.prizeData || this.prizeData.data.length <= 0) {
|
||
return 0
|
||
}
|
||
|
||
const arr = this.prizeData.data.filter(item => item.isChoose)
|
||
|
||
return arr.length
|
||
}
|
||
},
|
||
|
||
onShareAppMessage() {
|
||
if (this.$refs["couponPop"] != null) {
|
||
var co = this.$refs["couponPop"].getfengxiaodata();
|
||
if (co != null) {
|
||
console.log(co);
|
||
return co;
|
||
}
|
||
}
|
||
|
||
// 使用小写 id，兼容新版 .NET API
|
||
const userinfo = uni.getStorageSync('userinfo') || {};
|
||
const pid = userinfo.id || userinfo.ID || '';
|
||
return {
|
||
title: this.$config.getAppSetting("app_name") + `${this.pageData.goods.title}系列`,
|
||
imageUrl: this.pageData.goods.imgurl_detail,
|
||
path: '/package/index/lian-ji' +
|
||
this.$c.qs({
|
||
goods_id: this.pageData.goods.id,
|
||
goods_num: this.pageData.goods.num,
|
||
pid: pid
|
||
})
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.optData = options
|
||
|
||
this.tabChange(this.tabCur)
|
||
|
||
uni.$on('chooseCoupon', data => {
|
||
this.couponData = data
|
||
this.confirmSubmit([0])
|
||
})
|
||
this.$c.getRule(10).then(res => {
|
||
if (res.status == 1) {
|
||
this.sendRuleData = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
onShow() {
|
||
this.autoplay = true
|
||
},
|
||
|
||
onReady() {
|
||
},
|
||
|
||
onHide() {
|
||
this.autoplay = false
|
||
},
|
||
|
||
onUnload() {
|
||
uni.$off('chooseCoupon')
|
||
},
|
||
|
||
methods: {
|
||
openZhankai(item) {
|
||
item.open = !item.open
|
||
},
|
||
doMax() {
|
||
if (this.pageTabCur != 0) return false
|
||
let max =
|
||
Number(this.pageData.goods.max_fa) -
|
||
Number(this.pageData.goods.user_lian_ji_number)
|
||
|
||
this.buyNum = max
|
||
},
|
||
jia() {
|
||
if (this.pageTabCur == 0) {
|
||
let max =
|
||
Number(this.pageData.goods.max_fa) -
|
||
Number(this.pageData.goods.user_lian_ji_number)
|
||
|
||
if (this.buyNum >= max) {
|
||
this.buyNum = max
|
||
this.$c.toast({
|
||
title: '已达到最大值'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.buyNum += 1
|
||
}
|
||
|
||
if (this.pageTabCur == 1) {
|
||
if (this.buyNum >= this.pageData.goods.user_mb_number) {
|
||
this.buyNum = this.pageData.goods.user_mb_number
|
||
this.$c.toast({
|
||
title: '已达到最大值'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.buyNum += 1
|
||
}
|
||
},
|
||
|
||
jian() {
|
||
if (this.buyNum <= 0) {
|
||
this.buyNum = 0
|
||
return
|
||
}
|
||
|
||
this.buyNum -= 1
|
||
},
|
||
|
||
previewDetail(item, a) {
|
||
const obj = {
|
||
imgurl: a.imgurl,
|
||
title: a.title,
|
||
shang_title: item.shang_title,
|
||
pro: item.pro
|
||
}
|
||
|
||
console.log(obj)
|
||
this.previewData = obj
|
||
|
||
this.open('dPop')
|
||
},
|
||
|
||
doReDraw() {
|
||
if (this.orderData.item_card_count < this.reChooseNum) {
|
||
this.$c.toast({
|
||
title: '重置卡不足'
|
||
})
|
||
|
||
return
|
||
}
|
||
},
|
||
|
||
swChange(e) {
|
||
this.swCur = e.detail.current
|
||
},
|
||
|
||
async toggleCollect() {
|
||
try {
|
||
const res = await toggleCollection(this.pageData.goods.id);
|
||
if (res.status == 1) {
|
||
this.getData()
|
||
}
|
||
} catch (error) {
|
||
console.error('收藏操作失败:', error);
|
||
}
|
||
},
|
||
|
||
toBag() {
|
||
this.close('resPop')
|
||
|
||
this.$c.to({
|
||
type: 3,
|
||
url: '/pages/hegui/hegui'
|
||
})
|
||
},
|
||
|
||
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(async () => {
|
||
try {
|
||
const res = await getInfinitePrizeOrderLogByNum(order_num);
|
||
if (res.status == 1) {
|
||
res.data.data.map(item => {
|
||
item.isChoose = false
|
||
})
|
||
|
||
this.prizeData = res.data
|
||
|
||
if (res.data.data.length <= 0) {
|
||
this.getPrize(order_num)
|
||
return
|
||
}
|
||
|
||
this.bgmCtx.openBgm.stop()
|
||
this.bgmCtx.openBgm.play()
|
||
this.open('resPop')
|
||
}
|
||
} catch (error) {
|
||
console.error('获取抽奖结果失败:', error);
|
||
}
|
||
}, 500)
|
||
},
|
||
|
||
changePay(e) {
|
||
this[e] = !this[e]
|
||
|
||
this.confirmSubmit([0])
|
||
},
|
||
|
||
async confirmSubmit([type, fromNotice = false]) {
|
||
if (this.buyNum <= 0) {
|
||
this.$c.toast({
|
||
title: '次数不能为零'
|
||
})
|
||
return
|
||
}
|
||
|
||
let data = {
|
||
goods_id: this.pageData.goods.id,
|
||
prize_num: this.buyNum,
|
||
use_money_is: this.useMoney ? 1 : 2,
|
||
use_integral_is: this.useIntegral ? 1 : 2,
|
||
coupon_id: (this.couponData && this.couponData.id) || '',
|
||
is_mibao: this.pageTabCur
|
||
}
|
||
|
||
if (type == 1) {
|
||
if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
|
||
this.$refs.buyNotice.getRule(6)
|
||
return
|
||
}
|
||
}
|
||
|
||
try {
|
||
let res;
|
||
if (type == 0) {
|
||
res = await calcInfiniteOrderMoney(data);
|
||
} else if (type == 1) {
|
||
if (this.pageTabCur == 1) {
|
||
res = await createInfiniteMibaoOrder({
|
||
goods_id: this.pageData.goods.id,
|
||
prize_num: this.buyNum,
|
||
is_mibao: this.pageTabCur
|
||
});
|
||
} else {
|
||
res = await createInfiniteOrder(data);
|
||
}
|
||
}
|
||
|
||
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.open('buyPop')
|
||
}
|
||
|
||
if (type == 1) {
|
||
this.close('buyPop')
|
||
|
||
if (res.data.status == 1) {
|
||
const status = await this.$platform.pay({
|
||
data: res.data.res
|
||
}, this);
|
||
|
||
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()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('订单操作失败:', error);
|
||
}
|
||
},
|
||
doRefresh() {
|
||
this.getData()
|
||
if (this.tabCur == 2) {
|
||
this.tabChange(this.tabCur)
|
||
}
|
||
},
|
||
subTabChange(i) {
|
||
this.subTabCur = i
|
||
this.logList = []
|
||
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.mescroll.resetUpScroll()
|
||
}, 100)
|
||
})
|
||
},
|
||
tabChange(i) {
|
||
this.tabCur = i
|
||
switch (Number(i)) {
|
||
case 1:
|
||
this.getData()
|
||
break
|
||
case 2:
|
||
this.getData()
|
||
this.subTabChange(this.subTabCur)
|
||
break
|
||
}
|
||
},
|
||
async getLog({
|
||
num,
|
||
size
|
||
}) {
|
||
if (num > 1) return this.mescroll.endByPage(this.logList.length, 1)
|
||
try {
|
||
const res = await getInfiniteShangLog({
|
||
page: num,
|
||
goods_id: this.optData.goods_id,
|
||
shang_id: this.subTab.length > 0 ? this.subTab[this.subTabCur].shang_id : '',
|
||
is_mibao: this.pageTabCur
|
||
});
|
||
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)
|
||
}
|
||
} catch (error) {
|
||
console.error('获取中奖记录失败:', error);
|
||
this.mescroll.endErr();
|
||
}
|
||
},
|
||
pageTabChange(i) {
|
||
this.pageTabCur = i
|
||
this.buyNum = 0
|
||
this.tabChange(this.tabCur)
|
||
},
|
||
async getData() {
|
||
try {
|
||
const res = await getLianJiGoodsDetail(this.optData.goods_id, this.pageTabCur);
|
||
if (res.status == 1) {
|
||
res.data.goodslist.forEach(item => {
|
||
this.$set(item, 'open', false)
|
||
})
|
||
this.pageData = res.data
|
||
|
||
if (this.pageTabCur == 0) {
|
||
let max =
|
||
Number(this.pageData.goods.max_fa) -
|
||
Number(this.pageData.goods.user_lian_ji_number)
|
||
|
||
if (this.buyNum > max) {
|
||
this.buyNum = max
|
||
}
|
||
}
|
||
|
||
if (this.pageTabCur == 1) {
|
||
if (this.buyNum >= this.pageData.goods.user_mb_number) {
|
||
this.buyNum = this.pageData.goods.user_mb_number
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取商品详情失败:', error);
|
||
}
|
||
},
|
||
|
||
close(e) {
|
||
this.$refs[e].close()
|
||
if (e == "resPop") {
|
||
if (this.prizeData['user_coupon'] != null) {
|
||
this.$refs["couponPop"].open(this.prizeData['user_coupon']);
|
||
}
|
||
}
|
||
},
|
||
|
||
open(e) {
|
||
this.$refs[e].open()
|
||
},
|
||
|
||
|
||
computedPercentage(numerator, denominator) {
|
||
// 确保分母不为0，以避免除以零的错误
|
||
if (this.denominator === 0) return 0;
|
||
// 计算百分比并乘以100（如果需要百分比形式的输出）
|
||
return (numerator / denominator) * 100;
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.navLeft {
|
||
position: fixed;
|
||
left: 30rpx;
|
||
height: 44px;
|
||
z-index: 100;
|
||
|
||
>view {
|
||
font-weight: 400;
|
||
font-size: 50rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 0 300rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
.page-tab {
|
||
margin: 36rpx auto 0;
|
||
width: 532rpx;
|
||
height: 72rpx;
|
||
z-index: 10;
|
||
border: 2rpx solid #F5F5F5;
|
||
border-radius: 16rpx;
|
||
|
||
.page-tab-item {
|
||
width: 266rpx;
|
||
height: 72rpx;
|
||
position: relative;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
|
||
>image {
|
||
width: 40rpx;
|
||
height: 42rpx;
|
||
}
|
||
|
||
>text {
|
||
width: 532rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 16rpx;
|
||
background-color: #FFFFFF;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
&.act {
|
||
text {
|
||
color: #D8FD24;
|
||
background-color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-hd {
|
||
width: 100%;
|
||
height: 750rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-top: 130rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
.half-tag {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 200rpx;
|
||
z-index: 1;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.link-num {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 168rpx;
|
||
min-width: 128rpx;
|
||
height: 40rpx;
|
||
background-color: rgba(51, 51, 51, 0.50);
|
||
z-index: 10;
|
||
box-sizing: border-box;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FECF97;
|
||
}
|
||
|
||
.swiper_view1 {
|
||
position: absolute;
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
top: 346rpx;
|
||
left: 32rpx;
|
||
background: rgba(51, 51, 51, 0.5);
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
|
||
.swiper_view2 {
|
||
position: absolute;
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
top: 346rpx;
|
||
right: 32rpx;
|
||
background: rgba(51, 51, 51, 0.5);
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
|
||
.swiperAll {
|
||
height: 100%;
|
||
|
||
>view {
|
||
width: 74rpx;
|
||
height: 56rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #000000;
|
||
}
|
||
|
||
>image {
|
||
width: 126rpx;
|
||
height: 126rpx;
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.goods-name {
|
||
z-index: 10;
|
||
position: absolute;
|
||
bottom: 24rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.swiperItemInfo {
|
||
min-width: 280rpx;
|
||
height: 44rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 78rpx;
|
||
font-weight: 500;
|
||
z-index: 10;
|
||
font-size: 24rpx;
|
||
background: url($imgurl + "index/leitai.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
>text:nth-child(1) {
|
||
color: #333333;
|
||
}
|
||
|
||
}
|
||
|
||
.goods-title {
|
||
margin: 30rpx auto 0;
|
||
width: 630rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 20rpx;
|
||
|
||
.hang1 {}
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.user-btns {
|
||
display: flex;
|
||
position: absolute;
|
||
bottom: 136rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 1;
|
||
|
||
.user-num {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 18rpx;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
|
||
.user-list {
|
||
display: flex;
|
||
padding-left: 26rpx;
|
||
padding-right: 10rpx;
|
||
|
||
.avatar {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: #7f7f7f;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-left: -16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 40rpx;
|
||
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
&.pd {
|
||
padding-left: 60rpx;
|
||
}
|
||
|
||
&.dis {
|
||
filter: grayscale(1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tab-item1 {
|
||
width: 160rpx;
|
||
height: 92rpx;
|
||
font-weight: 400;
|
||
margin-right: 30rpx;
|
||
background: url($imgurl + "index/uncheckTab1.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.tab-item2 {
|
||
width: 160rpx;
|
||
height: 92rpx;
|
||
font-weight: 400;
|
||
margin-right: 30rpx;
|
||
|
||
&.act {
|
||
background: url($imgurl + "index/checkTab2.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&.unact {
|
||
background: url($imgurl + "index/uncheckTab2.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.tab-item3 {
|
||
width: 160rpx;
|
||
height: 92rpx;
|
||
font-weight: 400;
|
||
|
||
&.act {
|
||
background: url($imgurl + "index/checkTab3.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&.unact {
|
||
background: url($imgurl + "index/uncheckTab3.png") no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.guizeSc {
|
||
>view {
|
||
>image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 40rpx 20rpx 0;
|
||
|
||
.list-item {
|
||
box-sizing: border-box;
|
||
|
||
.list-title {
|
||
height: 52rpx;
|
||
|
||
>view:nth-child(1) {
|
||
>image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-list {
|
||
padding: 30rpx 10rpx 10rpx 10rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 220rpx);
|
||
grid-gap: 20rpx;
|
||
|
||
.goods-item {
|
||
display: inline-flex;
|
||
width: 220rpx;
|
||
background-color: #F8F8F8;
|
||
border-radius: 16rpx;
|
||
|
||
.pic {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
position: relative;
|
||
margin: 0 auto;
|
||
|
||
.yu-tag {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
bottom: 10rpx;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #894DD3;
|
||
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
width: 200rpx;
|
||
margin: 28rpx auto 0;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.price {
|
||
width: 200rpx;
|
||
margin: 24rpx auto 28rpx;
|
||
font-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sub-tab {
|
||
white-space: nowrap;
|
||
padding: 40rpx 0 10rpx;
|
||
|
||
.sub-tab-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 88rpx;
|
||
height: 44rpx;
|
||
margin-left: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
background: #F5F5F5;
|
||
border-radius: 8rpx;
|
||
|
||
&.act {
|
||
background: #E6F791;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.log-list {
|
||
padding: 1rpx 30rpx 30rpx;
|
||
|
||
.log-item {
|
||
height: 144rpx;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F8F8F8;
|
||
margin-top: 24rpx;
|
||
|
||
.avatar {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.info {
|
||
width: 230rpx;
|
||
margin-left: 20rpx;
|
||
|
||
.name {
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.time {
|
||
margin-top: 12rpx;
|
||
white-space: nowrap;
|
||
font-size: 16rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.prize {
|
||
flex: 1;
|
||
padding-left: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pic {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
>view:nth-child(1) {
|
||
min-width: 68rpx;
|
||
height: 32rpx;
|
||
box-sizing: border-box;
|
||
line-height: 40rpx;
|
||
border-radius: 18rpx;
|
||
font-weight: 500;
|
||
font-size: 14rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
|
||
.title {
|
||
width: 120rpx;
|
||
margin-left: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
text-align: right;
|
||
}
|
||
|
||
.num {
|
||
font-size: 16rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btFixed {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding-bottom: 30rpx;
|
||
|
||
&-top {
|
||
>image {
|
||
width: 90rpx;
|
||
height: 66rpx;
|
||
}
|
||
|
||
>view {
|
||
min-width: 210rpx;
|
||
height: 66rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
background: url($imgurl+'img/goumai.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
}
|
||
|
||
&-footer {
|
||
width: 750rpx;
|
||
|
||
>view {
|
||
width: 210rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
&-one {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #00FFBC;
|
||
background: url($imgurl+'img/lainmax.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-two {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #00FFBC;
|
||
background: url($imgurl+'img/liannum.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-three {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: rgba(0, 255, 188, 0);
|
||
line-height: 113rpx;
|
||
text-stroke: 1px #00FFBB;
|
||
-webkit-text-stroke: 1px #00FFBB;
|
||
background: url($imgurl+'img/lianzero.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
}
|
||
|
||
&-footer2 {
|
||
width: 750rpx;
|
||
|
||
>view {
|
||
width: 210rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
&-one {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: rgba(0, 255, 188, 0);
|
||
line-height: 113rpx;
|
||
text-stroke: 1px #00FFBB;
|
||
-webkit-text-stroke: 1px #00FFBB;
|
||
background: url($imgurl+'img/lainmax.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-two {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: rgba(0, 255, 188, 0);
|
||
line-height: 113rpx;
|
||
text-stroke: 1px #00FFBB;
|
||
-webkit-text-stroke: 1px #00FFBB;
|
||
background: url($imgurl+'img/liannum.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-three {
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #00FFBC;
|
||
background: url($imgurl+'img/lianzero.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnFixed {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 30rpx 30rpx 80rpx;
|
||
background: #FFFFFF;
|
||
|
||
&-numBox {
|
||
width: 224rpx;
|
||
height: 92rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
// background: url($imgurl+'index/numBox.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
>image {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&-btns {
|
||
margin: 30rpx 0 0;
|
||
border: 2rpx solid #F5F5F5;
|
||
border-radius: 16rpx;
|
||
|
||
&-one {
|
||
width: 342rpx;
|
||
height: 92rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #D8FD24;
|
||
box-sizing: border-box;
|
||
background: url($imgurl+'index/lianjiBtn1.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-one2 {
|
||
width: 342rpx;
|
||
height: 92rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #333333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&-lianji {
|
||
position: absolute;
|
||
// bottom: -25rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 118.79rpx;
|
||
height: 118.79rpx;
|
||
z-index: 4;
|
||
line-height: 1;
|
||
background: url($imgurl+'index/lianjiMax.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
color: #FFFFFF;
|
||
font-family: YouSheBiaoTiHei;
|
||
text-shadow: #894DD3 1px 0 0, #894DD3 0 1px 0, #894DD3 -1px 0 0, #894DD3 0 -1px 0;
|
||
}
|
||
|
||
>text:nth-child(1) {
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
}
|
||
|
||
&-two {
|
||
width: 342rpx;
|
||
height: 92rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #D8FD24;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
text-align: right;
|
||
background: url($imgurl+'index/duoquBtn1.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&-two2 {
|
||
width: 342rpx;
|
||
height: 92rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.res-pop {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
.res-pop-hd {
|
||
width: 380rpx;
|
||
height: 104rpx;
|
||
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
.res-pop-bd {
|
||
width: 750rpx;
|
||
height: 40vh;
|
||
|
||
.res-list {
|
||
padding: 30rpx 30rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 210rpx);
|
||
gap: 30rpx 30rpx;
|
||
|
||
.res-item {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.pic {
|
||
width: 100%;
|
||
height: 210rpx;
|
||
position: relative;
|
||
background: #8953DC;
|
||
border: 2rpx solid #FFFFFF;
|
||
|
||
>image {
|
||
width: 202rpx;
|
||
height: 202rpx;
|
||
}
|
||
|
||
.type-tag {
|
||
position: absolute;
|
||
left: 14rpx;
|
||
top: -14rpx;
|
||
z-index: 2;
|
||
width: 134rpx;
|
||
height: 42rpx;
|
||
background: url($imgurl+ 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFDF46;
|
||
}
|
||
|
||
.num {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: -20rpx;
|
||
right: -22rpx;
|
||
min-width: 42rpx;
|
||
height: 48rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFDF46;
|
||
background: url($imgurl+ 'common/chouNum.png') no-repeat 0 0 / 100% 100%;
|
||
text-shadow: #000 1rpx 0 0, #000 0 1rpx 0, #000 -1rpx 0 0, #000 0 -1rpx 0;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding: 10rpx 10rpx 0;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.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: 244rpx;
|
||
height: 116rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
|
||
>text {
|
||
margin-top: 36rpx;
|
||
}
|
||
}
|
||
|
||
>view:nth-child(1) {
|
||
color: #DE6025;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
color: #7825DE;
|
||
}
|
||
}
|
||
}
|
||
|
||
.d-pop {
|
||
position: relative;
|
||
width: 570rpx;
|
||
box-sizing: border-box;
|
||
|
||
.pic {
|
||
width: 570rpx;
|
||
height: 598rpx;
|
||
// background: #8953DC;
|
||
background: #FFFFFF;
|
||
border: 2rpx solid #FFFFFF;
|
||
|
||
>image {
|
||
width: 548rpx;
|
||
height: 549rpx;
|
||
}
|
||
|
||
>view {
|
||
width: 130rpx;
|
||
height: 46rpx;
|
||
position: absolute;
|
||
top: -12rpx;
|
||
left: 0;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FFDF46;
|
||
box-sizing: border-box;
|
||
background: url($imgurl+'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin: 40rpx auto 0;
|
||
width: 574rpx;
|
||
height: 82rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 20rpx;
|
||
border: 2rpx solid #894DD3;
|
||
border-radius: 12rpx;
|
||
background: #313133;
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.d-list {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0 0;
|
||
|
||
.d-item {
|
||
margin-top: 14rpx;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translate(-50%, 160%);
|
||
}
|
||
}
|
||
|
||
.buy-pop {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
background: #F7F7F7;
|
||
padding-bottom: 30rpx;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
|
||
|
||
.buy-pop-hd {
|
||
padding: 40rpx 0;
|
||
padding-left: 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
>text {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.close {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.buy-card {
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
background: #FFFFFF;
|
||
|
||
.buy-info {
|
||
display: flex;
|
||
|
||
.pic {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.info-r {
|
||
width: calc(100% - 190rpx);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
padding: 32rpx 0 10rpx 30rpx;
|
||
|
||
.title {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.hang1 {}
|
||
|
||
.type {
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
}
|
||
|
||
.price-num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.price {
|
||
ffont-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
|
||
>text {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.num {
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
height: 1px;
|
||
background: #222222;
|
||
margin: 30rpx 0 10rpx;
|
||
}
|
||
|
||
.yhfs {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.card-row {
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
>image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.row-r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-row {
|
||
.title {}
|
||
|
||
.row-r {
|
||
.icon {}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-row {
|
||
padding: 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
margin-top: 24rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.title {
|
||
>image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
>text {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.row-r {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
|
||
.icon {
|
||
width: 10rpx;
|
||
height: 17.14rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-title {
|
||
margin-top: 30rpx;
|
||
font-size: 38rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.pay-type {
|
||
padding: 24rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.agree {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
line-height: 32rpx;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.rule {
|
||
padding: 20rpx;
|
||
background: #F9F8E1;
|
||
border-radius: 20rpx;
|
||
box-sizing: border-box;
|
||
margin: 20rpx 0 0;
|
||
|
||
.rule-inner {
|
||
max-height: 160rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.pay-btn {
|
||
margin: 30rpx auto;
|
||
width: 686rpx;
|
||
height: 84rpx;
|
||
background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
color: #CDEF27;
|
||
|
||
>text:nth-child(1) {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
>text:nth-child(2) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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> |