3312 lines
76 KiB
Vue
3312 lines
76 KiB
Vue
<!--
|
||
* @Date: 2023-11-18 16:29:22
|
||
* @LastEditTime: 2023-11-27 16:05:22
|
||
* @Description: content
|
||
-->
|
||
<template>
|
||
<view
|
||
class="content"
|
||
:style="{
|
||
'padding-top': `calc(600rpx)`
|
||
}"
|
||
>
|
||
<!-- 购买说明 -->
|
||
|
||
<view
|
||
class="header common_bg"
|
||
v-if="goods"
|
||
:style="{
|
||
'background-image': `url(${goods.imgurl_detail})`
|
||
}"
|
||
>
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
:title="goods.title"
|
||
color="#fff"
|
||
backgroundColor="transparent"
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
:border="false"
|
||
@clickLeft="back"
|
||
></uni-nav-bar>
|
||
<!-- <view class="head">
|
||
<view
|
||
class="status_bar"
|
||
:style="'height:' + statusBarHeight + 'px;'"
|
||
></view>
|
||
<view class="header_title">
|
||
<view @click="back()">
|
||
<image :src="z_imgPath + 'back.png'"></image>
|
||
返回
|
||
</view>
|
||
<view class="hang1">{{ goods.title }}</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view
|
||
@click="$refs.shuoming.open()"
|
||
class="info-btn"
|
||
:style="{
|
||
top: `calc(${$sys().statusBarHeight}px + 130rpx)`
|
||
}"
|
||
>
|
||
<image :src="$img('/static/icon/info.png')" mode="scaleToFill" />
|
||
购买说明
|
||
</view>
|
||
|
||
<view
|
||
@click="sc_collect()"
|
||
class="like-btn"
|
||
:style="{
|
||
top: `calc(${$sys().statusBarHeight}px + 130rpx)`
|
||
}"
|
||
>
|
||
<image
|
||
v-if="goods.collection_is == 1"
|
||
:src="$img('/static/icon/like_act.png')"
|
||
mode="scaleToFill"
|
||
/>
|
||
|
||
<image v-else :src="$img('/static/icon/like.png')" mode="scaleToFill" />
|
||
{{ goods.collection_is == 1 ? '已收藏' : '收藏' }}
|
||
</view>
|
||
|
||
<view
|
||
class="pic-bt common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_banner_bg.png')})`
|
||
}"
|
||
>
|
||
<view class="pic-bt-hd">
|
||
<view class="left">
|
||
当前第{{ goods.num || 0 }}/{{ goods.stock || 0 }}箱
|
||
</view>
|
||
|
||
<view class="center">
|
||
赏品余量
|
||
<text>{{ goods.goodslist_surplus_stock || 0 }}</text>
|
||
/{{ goods.goodslist_stock || 0 }}张
|
||
</view>
|
||
|
||
<view class="right">
|
||
<text>{{ goods.price }}</text>
|
||
{{ goods.type == 5 ? '积分' : '元' }}
|
||
/张明信片
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pic-bt-ft">
|
||
<view @click="before()" class="prev">
|
||
<image :src="$img('/static/icon/left.png')" mode="scaleToFill" />
|
||
上一箱
|
||
</view>
|
||
|
||
<view
|
||
@click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
|
||
class="change-box common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_cbb.png')})`
|
||
}"
|
||
>
|
||
换箱
|
||
</view>
|
||
|
||
<view @click="after()" class="next">
|
||
下一箱
|
||
<image :src="$img('/static/icon/right.png')" mode="scaleToFill" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="header_center">
|
||
<image
|
||
:src="z_imgPath + 'detail/ysc.png'"
|
||
v-if="goods.collection_is == 1"
|
||
@click="sc_collect()"
|
||
></image>
|
||
<image
|
||
:src="z_imgPath + 'detail/wsc.png'"
|
||
v-else
|
||
@click="sc_collect()"
|
||
></image>
|
||
<image
|
||
:src="z_imgPath + 'detail/gmsm.png'"
|
||
@click="$refs.shuoming.open()"
|
||
></image>
|
||
<image :src=" z_imgPath + 'detail/hegui.png'" @click="tosangdai()"></image> 暂时隐藏
|
||
</view> -->
|
||
<!-- <view class="header_news">
|
||
<view
|
||
class="header_news_t"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/news_t_bg.png' +
|
||
') no-repeat 0 0 / 100% auto;'
|
||
"
|
||
>
|
||
<view class="header_news_t_price">
|
||
<view>{{ goods.price }}{{ goods.type == 5 ? '积分' : '元' }}</view>
|
||
<view>1张明信片</view>
|
||
</view>
|
||
<view class="riqi">
|
||
<view v-if="goods.addtime">发售日</view>
|
||
<view>{{ goods.addtime }}</view>
|
||
</view>
|
||
<image :src="z_imgPath + 'detail/jiaoliu.png?11'" @click="toNewMp()"></image>
|
||
@click="tohuanxiang()" 换箱弹窗操作
|
||
<image
|
||
:src="z_imgPath + 'detail/huanxiang1.png'"
|
||
style="width: 120rpx; height: 50rpx; margin-top: 30rpx"
|
||
@click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
|
||
></image>
|
||
<image
|
||
:src="z_imgPath + 'detail/jilv.png'"
|
||
@click="getjilv()"
|
||
style="width: 180rpx; height: 50rpx; margin: 30rpx 45rpx 0"
|
||
></image>
|
||
<image
|
||
:src="z_imgPath + 'detail/shuaxin.png'"
|
||
@click="getlist(goods.num)"
|
||
style="width: 120rpx; height: 50rpx; margin: 30rpx 30rpx 0 0"
|
||
></image>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="header_news_c">
|
||
<view class="redu">
|
||
<image
|
||
:src="item"
|
||
v-for="(item, index) in join_user"
|
||
:key="index"
|
||
v-if="index < 5"
|
||
:style="'transform:translateX(' + -index * 20 + 'rpx' + ')'"
|
||
></image>
|
||
{{ join_count }}次参与
|
||
</view>
|
||
<view class="flex_center" v-if="lock_info.goods_lock_surplus_time > 0">
|
||
<image
|
||
:src="lock_info.goods_lock_user_headimg"
|
||
style="
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
"
|
||
></image>
|
||
<view class="hang1" style="max-width: 150rpx; color: #85dfff">
|
||
{{ lock_info.goods_lock_user_nickname || '' }}
|
||
</view>
|
||
锁箱
|
||
<xwCountDown2
|
||
@change="change_time"
|
||
style="color: #85dfff"
|
||
v-if="lock_info.goods_lock_surplus_time > 0"
|
||
:datatime="lock_info.goods_lock_surplus_time"
|
||
></xwCountDown2>
|
||
秒
|
||
</view>
|
||
<view v-else>未锁箱</view>
|
||
</view>
|
||
<!-- <view class="header_news_b">
|
||
<image :src="z_imgPath + 'detail/before.png'" @click="before()"></image>
|
||
<view
|
||
class="flex_center"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/news_b_bg.png' +
|
||
') no-repeat 0 0 / 100% auto;'
|
||
"
|
||
>
|
||
第
|
||
<text>{{ goods.num }}</text>
|
||
/{{ goods.stock }}箱，商品余量
|
||
<text>{{ goods.goodslist_surplus_stock }}</text>
|
||
/{{ goods.goodslist_stock }}张
|
||
</view>
|
||
<image :src="z_imgPath + 'detail/after.png'" @click="after()"></image>
|
||
</view> -->
|
||
<!-- style="min-height: 400rpx;" -->
|
||
|
||
<view class="tab-list">
|
||
<view
|
||
@click="tabChange(i)"
|
||
v-for="(item, i) in tabList"
|
||
:key="i"
|
||
class="tab-list-item"
|
||
:class="{
|
||
active: tabCur == i
|
||
}"
|
||
>
|
||
{{ item.title }}
|
||
|
||
<image
|
||
class="arrow"
|
||
v-if="tabCur == i"
|
||
:src="$img('/static/img/tab_arrow.png')"
|
||
mode="scaleToFill"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 赏池预览 -->
|
||
<view v-if="tabList[tabCur].id == 1" class="shop">
|
||
<view
|
||
v-for="(item, index) in goodslist"
|
||
:key="index"
|
||
class="shop_item common_bg"
|
||
@click="yulan(item, index)"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_ib.png')})`
|
||
}"
|
||
>
|
||
<view class="item_head">
|
||
<image :src="item.imgurl"></image>
|
||
<view class="item_num">
|
||
<view>{{ item.shang_title }}</view>
|
||
<view>{{ item.surplus_stock }}/{{ item.stock }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_con">
|
||
<view class="hang1" style="color: #ffffff">{{ item.title }}</view>
|
||
<view class="hang1">{{ item.pro }}</view>
|
||
<view class="hang1" v-if="item.shang_id > 5">
|
||
参考价:{{ goods.type == 5 ? '' : '¥' }}{{ item.price
|
||
}}{{ goods.type == 5 ? '积分' : '' }}
|
||
</view>
|
||
</view>
|
||
<view class="qiangguang" v-if="item.surplus_stock == 0">
|
||
<image :src="$img('/static/img/yf_sold_out.png')"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<mescroll-body
|
||
v-if="tabList[tabCur].id == 2"
|
||
ref="mescrollRef"
|
||
@init="mescrollInit"
|
||
:down="downOption"
|
||
:up="upOption"
|
||
@down="downCallback"
|
||
@up="getjilv"
|
||
>
|
||
<scroll-view scroll-x class="log-tab">
|
||
<view
|
||
@click="logTabChange(i)"
|
||
v-for="(item, i) in shang_cate"
|
||
:key="i"
|
||
class="log-tab-item common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img(
|
||
logTabCur == i
|
||
? '/static/img/yf_tab_act.png'
|
||
: '/static/img/yf_tab.png'
|
||
)})`
|
||
}"
|
||
>
|
||
{{ item.shang_title }}
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="log-list">
|
||
<view
|
||
v-for="(item, i) in jl_Arr"
|
||
:key="i"
|
||
class="log-list-item common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_log_ib.png')})`
|
||
}"
|
||
>
|
||
<view class="log-l">
|
||
<image
|
||
class="avatar"
|
||
:src="item.user_info.headimg"
|
||
mode="scaleToFill"
|
||
/>
|
||
|
||
<view class="log-l-info">
|
||
<view class="info-name hang1">{{ item.user_info.nickname }}</view>
|
||
|
||
<view class="info-time">
|
||
{{ item.addtime }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="log-r">
|
||
<view class="log-r-hd">{{ item.shang_title }}</view>
|
||
|
||
<view class="log-r-ft">
|
||
<image
|
||
class="ft-pic"
|
||
:src="item.goodslist_imgurl"
|
||
mode="scaleToFill"
|
||
/>
|
||
|
||
<view class="ft-title hang1">{{ item.goodslist_title }}</view>
|
||
|
||
×1
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
<!-- 抽奖按钮 -->
|
||
<view class="ft-fixed">
|
||
<template v-if="goods.type != 3">
|
||
<view class="ft-fixed-hd">
|
||
<view
|
||
@click="choujiang(1)"
|
||
class="btn common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_1fa.png')})`
|
||
}"
|
||
>
|
||
冲一发
|
||
</view>
|
||
|
||
<view
|
||
@click="choujiang(3)"
|
||
class="btn center common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_3fa.png')})`
|
||
}"
|
||
>
|
||
冲三发
|
||
</view>
|
||
|
||
<view
|
||
@click="choujiang(5)"
|
||
class="btn common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_5fa.png')})`
|
||
}"
|
||
>
|
||
冲五发
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ft-fixed-ft">
|
||
<view
|
||
@click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
|
||
class="change-box common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_cbb1.png')})`
|
||
}"
|
||
>
|
||
换箱
|
||
</view>
|
||
|
||
<view
|
||
class="lock-btn common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_lbb.png')})`
|
||
}"
|
||
>
|
||
<xwCountDown2
|
||
class="lock-count"
|
||
v-if="lock_info.goods_lock_surplus_time > 0"
|
||
:datatime="lock_info.goods_lock_surplus_time"
|
||
></xwCountDown2>
|
||
|
||
{{
|
||
lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0
|
||
? '锁箱中'
|
||
: '自由模式'
|
||
}}
|
||
</view>
|
||
|
||
<view
|
||
@click="choujiang(goods.goodslist_surplus_stock)"
|
||
class="all-btn common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_all.png')})`
|
||
}"
|
||
>
|
||
抱箱
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- <view class="bar_box" v-if="goods.type != 3">
|
||
<view
|
||
@click="choujiang(1)"
|
||
class="bar_box_1"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/fa_1.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
></view>
|
||
<view
|
||
@click="choujiang(3)"
|
||
class="bar_box_2"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/fa_3.png?1' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
<text v-if="goods.type == 1 || goods.type == 5">
|
||
+{{ goods.three_time }}秒
|
||
</text>
|
||
</view>
|
||
<view
|
||
@click="choujiang(5)"
|
||
class="bar_box_3"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/fa_5.png?1' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
<text v-if="goods.type == 1 || goods.type == 5">
|
||
+{{ goods.five_time }}秒
|
||
</text>
|
||
</view>
|
||
<view
|
||
@click="gotoPage('/pages/shouye/huanxiang?id=' + goods_id)"
|
||
class="bar_box_5"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/huanxiang.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
></view>
|
||
<view
|
||
class="bar_box_4"
|
||
v-if="lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/suoxiang_sel.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
<xwCountDown2
|
||
v-if="
|
||
lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0
|
||
"
|
||
:datatime="lock_info.goods_lock_surplus_time"
|
||
@change="change_time"
|
||
class="daoji"
|
||
></xwCountDown2>
|
||
</view>
|
||
<view
|
||
class="bar_box_7"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/suoxiang.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
{{
|
||
lock_info.lock_is == 1 && lock_info.goods_lock_surplus_time !== 0
|
||
? '锁箱中'
|
||
: '自由模式'
|
||
}}
|
||
</view>
|
||
<view
|
||
@click="choujiang(goods.goodslist_surplus_stock)"
|
||
class="bar_box_6"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/baoxiang.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
></view>
|
||
</view> -->
|
||
<!-- 抽奖按钮 -->
|
||
<view class="bar_box" v-if="goods.type == 3">
|
||
<!-- <view @click="tohuanxiang()" class="bar_box_5"
|
||
:style="'background: url('+ z_imgPath + 'detail/huanxiang.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
||
</view> -->
|
||
<view
|
||
@click="choujiang(1)"
|
||
class="btns common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_1fa1.png')})`
|
||
}"
|
||
>
|
||
一发入魂
|
||
</view>
|
||
</view>
|
||
<!-- 刷新浮框 -->
|
||
<view class="xuanfu">
|
||
<image
|
||
:src="$img('/static/img/yf_rb.png')"
|
||
@click="loadData(true)"
|
||
></image>
|
||
|
||
<button open-type="share" hover-class="">
|
||
<image :src="$img('/static/img/yf_sb.png')"></image>
|
||
</button>
|
||
|
||
<!-- <image :src="z_imgPath + 'detail/shuaxin.png'" @click="getlist(goods.num)"></image> -->
|
||
|
||
<image :src="$img('/static/img/yf_bb.png')" @click="toBag"></image>
|
||
</view>
|
||
|
||
<!-- 购买说明 -->
|
||
<uni-popup ref="shuoming" type="center">
|
||
<view
|
||
class="popGm common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
|
||
}"
|
||
>
|
||
<view class="pop_title">购买说明</view>
|
||
<view class="pop_con">
|
||
<scroll-view scroll-y="true" style="height: 600rpx">
|
||
<view v-html="news"></view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<image
|
||
@click="$refs.shuoming.close()"
|
||
class="close"
|
||
:src="$img('/static/icon/close.png')"
|
||
></image>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 确认订单 -->
|
||
<uni-popup ref="dingdan" type="bottom">
|
||
<view class="order animated fadeInUp">
|
||
<view class="order_title">
|
||
<view class="ca">确认订单</view>
|
||
<image
|
||
:src="$img('/static/icon/close1.png')"
|
||
@click="$refs.dingdan.close()"
|
||
></image>
|
||
<!-- <image :src="z_imgPath + 'detail/order_p.png'"></image>
|
||
<view class="ca" @click="$refs.dingdan.close()">×</view> -->
|
||
</view>
|
||
<view class="order_title_con1">
|
||
<view class="order_pic" v-if="pay_news.goods">
|
||
<view class="order_pic_img">
|
||
<image :src="pay_news.goods.imgurl_detail"></image>
|
||
</view>
|
||
<view>
|
||
<view style="font-size: 35rpx">{{ pay_news.goods.title }}</view>
|
||
<view style="margin-top: 40rpx">类型：明信片</view>
|
||
<view style="margin-top: 10rpx">
|
||
<text>
|
||
<text style="font-family: zihun152hao-jijiachaojihei">
|
||
{{ pay_news.goods.price }}元
|
||
</text>
|
||
</text>
|
||
<text>×{{ pay_news.goods.prize_num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_num">
|
||
<view style="font-size: 28rpx" v-if="pay_news.goods">
|
||
明信片×{{ pay_news.goods.prize_num }}
|
||
</view>
|
||
<view>
|
||
小计:{{ goods.box_type == 5 ? '' : '￥' }}
|
||
<text>
|
||
{{ pay_news.order_total
|
||
}}{{ goods.box_type == 5 ? '积分' : '' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_title_con1" v-if="goods.box_type != 1">
|
||
<view style="font-size: 28rpx; margin-bottom: 10rpx">支付方式</view>
|
||
<!-- 积分赏 -->
|
||
<view class="fangshi" v-if="goods.type == 5">
|
||
<view class="flex_center">
|
||
<image
|
||
:src="$img('/static/icon/coin.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
<view>
|
||
使用积分抵扣￥
|
||
<text>{{ pay_news.use_score }}</text>
|
||
（剩余：
|
||
<text>{{ pay_news.score }}</text>
|
||
）
|
||
</view>
|
||
</view>
|
||
<image :src="z_imgPath + 'yuan_sel.png'"></image>
|
||
</view>
|
||
<!-- 一番赏 -->
|
||
<template v-else>
|
||
<view
|
||
class="fangshi"
|
||
@click="toCoupon"
|
||
style="padding-bottom: 15rpx"
|
||
>
|
||
<view class="flex_center">
|
||
<image
|
||
:src="$img('/static/icon/coupon.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
<view>优惠券</view>
|
||
</view>
|
||
|
||
<view class="fangshi-right">
|
||
{{ couponData ? `-${couponData.price}` : '未选择' }}
|
||
|
||
<image
|
||
class="icon"
|
||
:src="$img('/static/icon/right2.png')"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="fangshi"
|
||
@click="change_yuan_index(1)"
|
||
style="padding-bottom: 15rpx"
|
||
>
|
||
<view class="flex_center">
|
||
<image
|
||
:src="$img('/static/icon/coin.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
<view>
|
||
使用星钻抵扣￥
|
||
<text>{{ pay_news.use_integral }}</text>
|
||
（剩余：
|
||
<text>{{ pay_news.integral }}</text>
|
||
）
|
||
</view>
|
||
</view>
|
||
<image
|
||
v-if="bi"
|
||
:src="$img('/static/icon/check_act.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
<image
|
||
v-else
|
||
:src="$img('/static/icon/check.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
</view>
|
||
<view
|
||
class="fangshi"
|
||
@click="change_yuan_index(2)"
|
||
style="
|
||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
padding-top: 15rpx;
|
||
"
|
||
>
|
||
<view class="flex_center">
|
||
<image
|
||
:src="$img('/static/icon/balance.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
<view>
|
||
使用星钻抵扣￥
|
||
<text>{{ pay_news.use_money }}</text>
|
||
（剩余：
|
||
<text>{{ pay_news.money }}</text>
|
||
）
|
||
</view>
|
||
</view>
|
||
<image
|
||
v-if="yue"
|
||
:src="$img('/static/icon/check_act.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
<image
|
||
v-else
|
||
:src="$img('/static/icon/check.png')"
|
||
style="width: 40rpx; height: 40rpx"
|
||
></image>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view style="color: #999; font-size: 24rpx; margin: 20rpx 10rpx">
|
||
下单购买即表示同意
|
||
<text
|
||
style="color: #fff"
|
||
@click="gotoPage('/pages/guize/guize?type=2')"
|
||
>
|
||
《用户服务协议条款》
|
||
</text>
|
||
</view>
|
||
<view class="order_title_btn">
|
||
<view class="total-price">
|
||
共{{ pay_news.goods && pay_news.goods.prize_num }}抽总计:{{
|
||
goods.box_type == 5 ? '' : '￥'
|
||
}}
|
||
<text>
|
||
{{ pay_news.price }}{{ goods.box_type == 5 ? '积分' : '' }}
|
||
</text>
|
||
</view>
|
||
<view
|
||
class="zhifu common_bg"
|
||
@click="pay()"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_ljzf.png')})`
|
||
}"
|
||
>
|
||
<!-- 支付 -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 奖品弹窗 -->
|
||
<uni-popup
|
||
ref="jp_show"
|
||
type="center"
|
||
mask-background-color="rgba(0,0,0,0.8)"
|
||
>
|
||
<view class="pop_jp">
|
||
<!-- <image class="pop_gongxi" :src="z_imgPath + 'detail/jp_img.png'"></image> -->
|
||
<!-- <view class="jp_headimg">
|
||
<image :src="jp_news.headimg"></image>
|
||
</view> -->
|
||
<!-- <view class="jp_name">{{jp_news.nickname}}</view> -->
|
||
<view
|
||
class="suc-pop-hd common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_gxhd.png')})`
|
||
}"
|
||
></view>
|
||
|
||
<view
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_res_pop_bg.png')})`
|
||
}"
|
||
class="jp_bg common_bg"
|
||
>
|
||
<view class="jp_title animated zoomIn">
|
||
<view class="jp_title_1">
|
||
<view
|
||
class="jp_list common_bg"
|
||
v-for="(v, i) in jp_arr"
|
||
:key="i"
|
||
:style="{
|
||
'background-image': `url(${$img(
|
||
'/static/img/yf_item_bg.png'
|
||
)})`
|
||
}"
|
||
>
|
||
<view class="list_img">
|
||
<image :src="v.goodslist_imgurl"></image>
|
||
<view class="type-num">
|
||
<view class="type">{{ v.shang_title }}</view>
|
||
|
||
<view class="num">×1</view>
|
||
</view>
|
||
</view>
|
||
<view class="shang-title hang1">{{ v.goodslist_title }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <image class="dhbtmbox" :src="z_imgPath + 'detail/dong_bottom.png'" style="margin-top: 35rpx;"></image> -->
|
||
<view class="jp_btn">
|
||
<view
|
||
@click="tosangdai()"
|
||
class="animated fadeInLeft common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_qhg.png')})`
|
||
}"
|
||
>
|
||
<!-- 去赏袋 -->
|
||
</view>
|
||
<view
|
||
@click="$refs.jp_show.close()"
|
||
class="animated fadeInRight common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img('/static/img/yf_qd.png')})`
|
||
}"
|
||
>
|
||
<!-- 确定 -->
|
||
</view>
|
||
<!-- <view class="animated fadeInLeft" @click="tosangdai()">去赏袋</view>
|
||
<view class="animated fadeInRight" @click="$refs.jp_show.close()">继续抽</view> -->
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<uni-popup
|
||
ref="yulanPop"
|
||
type="center"
|
||
mask-background-color="rgba(0,0,0,.95)"
|
||
>
|
||
<swiper
|
||
:indicator-dots="false"
|
||
:autoplay="false"
|
||
:duration="300"
|
||
:current="current_index"
|
||
style="width: 600rpx; height: 830rpx"
|
||
>
|
||
<swiper-item v-for="(v, i) in goodslist" :key="i">
|
||
<view>
|
||
<view class="yulanStyle">
|
||
<view style="font-size: 36rpx; flex: 1; text-align: left">
|
||
{{ v.shang_title }}
|
||
</view>
|
||
<image :src="v.imgurl" mode="" class="shang_img"></image>
|
||
<image
|
||
class="img_bg"
|
||
:src="$img('/static/img/yf_detail_pop_bg.png')"
|
||
></image>
|
||
|
||
<view
|
||
class="detail-title common_bg"
|
||
:style="{
|
||
'background-image': `url(${$img(
|
||
'/static/img/yf_detail_pop_title_bg.png'
|
||
)})`
|
||
}"
|
||
>
|
||
<view class="hang1">{{ v.title }}</view>
|
||
</view>
|
||
|
||
<view class="detail-type">
|
||
产品类型:
|
||
<text>一番赏</text>
|
||
</view>
|
||
|
||
<view class="detail-price">
|
||
市场参考价:
|
||
<text>{{ v.sc_money }}</text>
|
||
</view>
|
||
|
||
<image
|
||
@click="$refs.yulanPop.close()"
|
||
class="close"
|
||
:src="$img('/static/icon/close.png')"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- <view
|
||
class=" hang1"
|
||
style="
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 10rpx 0;
|
||
text-align: center;
|
||
"
|
||
>
|
||
{{ v.title }}
|
||
</view>
|
||
<view
|
||
style="
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 10rpx 0;
|
||
text-align: center;
|
||
"
|
||
>
|
||
市场参考价：{{ v.sc_money }}
|
||
</view> -->
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-popup>
|
||
|
||
<!-- 中赏记录 -->
|
||
<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
|
||
<view
|
||
class="order animated fadeInUp"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/zsjl_bg.png' +
|
||
') no-repeat 0 0 / 100% auto;'
|
||
"
|
||
>
|
||
<view class="order_title">
|
||
<view class="ca">中赏记录</view>
|
||
<image
|
||
:src="z_imgPath + 'detail/guanbi_bg.png'"
|
||
@click="$refs.jilv.close(), (page_num = 1), (mixTotal = 0)"
|
||
></image>
|
||
</view>
|
||
<view class="jilv_title">
|
||
<view
|
||
v-for="(item, index) in shang_cate"
|
||
:key="index"
|
||
@click="change_shang_id(item.shang_id)"
|
||
:style="
|
||
shang_id == item.shang_id
|
||
? 'background: url(' +
|
||
z_imgPath +
|
||
'detail/tabSel_bg.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
: 'background: url(' +
|
||
z_imgPath +
|
||
'detail/tab_bg.png' +
|
||
') no-repeat 0 0 / 100% 100%;'
|
||
"
|
||
>
|
||
<text>{{ item.shang_title }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- -->
|
||
<scroll-view
|
||
scroll-y="true"
|
||
@scrolltolower="getjilv"
|
||
style="height: 900rpx"
|
||
>
|
||
<view
|
||
v-for="(item, index) in jl_Arr"
|
||
:key="index"
|
||
class="jilv_list"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/jilv_list_bg.png' +
|
||
') no-repeat 0 0 / 100% auto;'
|
||
"
|
||
>
|
||
<view>
|
||
<view class="flex_center">
|
||
<image :src="item.user_info.headimg"></image>
|
||
<view class="hang1" style="max-width: 260rpx">
|
||
{{ item.user_info.nickname }}
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 24rpx">{{ item.addtime }}</view>
|
||
</view>
|
||
<view>
|
||
<view class="flex_center">
|
||
<image
|
||
:src="item.goodslist_imgurl"
|
||
style="border-radius: 8rpx"
|
||
></image>
|
||
<view class="hang1" style="max-width: 300rpx">
|
||
{{ item.goodslist_title }}
|
||
</view>
|
||
</view>
|
||
<view>X{{ item.prize_num }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 换箱 -->
|
||
<!-- <uni-popup ref="huanxiang" type="bottom">
|
||
<view class="order animated fadeInUp">
|
||
<view class="order_title">
|
||
<image :src="z_imgPath + 'detail/huanxiang_p.png'" style="width: 173rpx;height: 87rpx;"></image>
|
||
<view class="ca" @click="$refs.huanxiang.close()">×</view>
|
||
</view>
|
||
<view class="huanxiang_header">
|
||
<view v-for="(v,i) in huanxiang_arr" :key="i" @click="huanxiang_click(saixuan_index,v.page_no)"
|
||
:class="page_no==v.page_no?'header_view_sel':'header_view'">{{v.title}}</view>
|
||
</view>
|
||
商品展示
|
||
<view class="goods_v">
|
||
<view class="flex_center" @click="huanxiang_click(1,page_no)">
|
||
<text :style="'color:'+(saixuan_index==1?'#FF7514':'')">箱号</text>
|
||
<image :src="z_imgPath+'saixuan' +(saixuan_index==1?'_sel':'')+ '.png'" class="goods_v_1">
|
||
</image>
|
||
</view>
|
||
<view class="flex_center" @click="huanxiang_click(2,page_no)" style="margin-left: 40rpx;">
|
||
<text :style="'color:'+(saixuan_index==2?'#FF7514':'')">余量</text>
|
||
<image :src="z_imgPath+'saixuan' +(saixuan_index==2?'_sel':'')+ '.png'" class="goods_v_1">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
赏品余量
|
||
<scroll-view scroll-y="true" class="yuliang">
|
||
<view class="yuliang_list" v-for="(v,i) in huanxiang_Detail" :key='i' @click="getlist(v.num)">
|
||
<view class="list_l"
|
||
:style="'background: url('+ z_imgPath + 'kong_box.png'+ ') no-repeat 0 0 / 100% 100%;'">
|
||
<view style="margin-top:65rpx;">第{{v.num}}箱</view>
|
||
<view style="margin-top: 10rpx;">剩
|
||
<text style="color: #96FFFE;">{{v.surplus_all_stock}}</text> 张
|
||
</view>
|
||
</view>
|
||
<view class="list_r">
|
||
<view v-for="(a,b) in v.goodslist" :key='b'>
|
||
<text>{{a.shang_title}}</text>
|
||
<text>{{a.surplus_stock}}/{{a.stock}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="qiangguang" v-if="v.surplus_stock==0">
|
||
<image :src="z_imgPath + 'qiangguangle1.png'"></image>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</uni-popup> -->
|
||
|
||
<!-- 抽奖动画 -->
|
||
<uni-popup
|
||
ref="popup"
|
||
type="center"
|
||
:maskClick="false"
|
||
mask-background-color="rgba(0,0,0,.8)"
|
||
>
|
||
<view
|
||
class="dhboxs"
|
||
v-if="jp_arr.length && jp_arr.length > 0"
|
||
:style="
|
||
'background: url(' +
|
||
z_imgPath +
|
||
'detail/jp_bg' +
|
||
jp_arr.length +
|
||
'.png' +
|
||
') no-repeat 0 0 / 100% 100%;height:' +
|
||
(jp_arr.length == 1 ? '330' : jp_arr.length == 3 ? '660' : '909') +
|
||
'rpx;'
|
||
"
|
||
>
|
||
<view class="choubox" v-for="(b, v) in jp_arr.length" :key="v">
|
||
<view class="choulist">
|
||
<view class="choulists" :style="moveCss[v]">
|
||
<view class="cj_title" v-for="(a, c) in items[v]" :key="c">
|
||
<image :src="a.imgurl"></image>
|
||
<view>{{ a.shang_title }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dhxian"></view>
|
||
</view>
|
||
<view class="tiaobox" @click="tiaofun()">跳过</view>
|
||
<!-- <image class="tiaobox" :src="z_imgPath + 'tiaoguo.png'"></image> -->
|
||
</uni-popup>
|
||
<view class="zzz" ref="refDivName"></view>
|
||
<!-- <bangding></bangding> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import xwCountDown2 from '@/components/xw-CountDown2'
|
||
// import bangding from '@/components/bangding'
|
||
export default {
|
||
components: {
|
||
xwCountDown2
|
||
// bangding
|
||
},
|
||
data() {
|
||
return {
|
||
z_imgPath: this.$z_img2 + 'shouye/',
|
||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||
goods_id: '', //商品id
|
||
goods_num: '', //箱数
|
||
goods: {},
|
||
goodslist: [],
|
||
join_count: '',
|
||
join_user: [], // 参与人数
|
||
// 锁箱
|
||
lock_info: {},
|
||
// 中赏记录
|
||
jl_Arr: [],
|
||
page_num: 1, // 页码
|
||
mixTotal: 0, // 统计信息总页数
|
||
// 换箱头部
|
||
huanxiang_arr: [],
|
||
page_no: 0,
|
||
saixuan_index: 1,
|
||
huanxiang_Detail: [],
|
||
|
||
bi: true, // 1:是否币支付,
|
||
yue: true, // 2:星钻支付
|
||
prize_num: 1, // 抽奖次数即购买次数
|
||
pay_news: {}, // 订单信息
|
||
// 奖品
|
||
jp_news: '', //用户头像
|
||
jp_arr: [],
|
||
news: '',
|
||
|
||
// 支付失效
|
||
pay_status: false,
|
||
downOption: {
|
||
auto: false
|
||
},
|
||
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
||
upOption: {
|
||
auto: false,
|
||
page: {
|
||
size: 10 // 每页数据的数量,默认10
|
||
}
|
||
},
|
||
// 动画
|
||
rollTimer: null, //动画定时器句柄
|
||
moveCss: [], //奖励滚动组件的滑动的动画效果css
|
||
luckyNums: 0, //中奖位置
|
||
luckydata: [], //中奖位置数组
|
||
lnStart: 50, //中奖位置区间开始
|
||
lnEnd: 60, //中奖位置区间结束
|
||
items: [], //滚动的卡片列表
|
||
awardItem: [], //中奖道具
|
||
left_px: '',
|
||
tiaotype: 1,
|
||
current_index: 0,
|
||
// 中赏记录
|
||
shang_cate: [],
|
||
shang_id: 0,
|
||
show: 1,
|
||
tabList: [
|
||
{
|
||
id: 1,
|
||
title: '包含以下赏品'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '中赏记录'
|
||
}
|
||
],
|
||
tabCur: 0,
|
||
logTabCur: 0,
|
||
couponData: ''
|
||
}
|
||
},
|
||
|
||
onLoad(v) {
|
||
this.goods_id = v.goods_id
|
||
this.goods_num = v.goods_num ? v.goods_num : ''
|
||
this.getDanye(3)
|
||
this.getgoodslist_count()
|
||
if (v.pid) {
|
||
uni.setStorageSync('pid', v.pid)
|
||
}
|
||
this.loadData()
|
||
|
||
uni.$on('chooseCoupon', data => {
|
||
// console.log('data', data)
|
||
|
||
this.couponData = data
|
||
this.order_money()
|
||
})
|
||
},
|
||
|
||
onUnload() {
|
||
uni.$off('chooseCoupon')
|
||
},
|
||
|
||
onShareAppMessage() {
|
||
let that = this
|
||
return {
|
||
title:
|
||
'吧唧一番赏' +
|
||
that.goods.title +
|
||
'系列' +
|
||
' 第' +
|
||
that.goods.num +
|
||
'套',
|
||
imageUrl: that.goods.imgurl,
|
||
path:
|
||
'/pages/shouye/detail?goods_id=' +
|
||
that.goods_id +
|
||
'&goods_num=' +
|
||
that.goods.num +
|
||
'&pid=' +
|
||
uni.getStorageSync('userinfo').ID
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
toCoupon() {
|
||
uni.navigateTo({
|
||
url: `/pages/user/coupon?type=2&total_price=${this.pay_news.order_total}`
|
||
})
|
||
},
|
||
|
||
toBag() {
|
||
uni.switchTab({ url: '/pages/sangdai/sangdai' })
|
||
},
|
||
|
||
logTabChange(i) {
|
||
this.logTabCur = i
|
||
this.jl_Arr = []
|
||
|
||
this.mescroll.resetUpScroll()
|
||
this.mescroll.scrollTo(0, 0)
|
||
},
|
||
|
||
change_time(e) {
|
||
// console.log(e)
|
||
if (e.s == 0) {
|
||
this.lock_info.lock_is = 0
|
||
this.lock_info.goods_lock_surplus_time = 0
|
||
}
|
||
},
|
||
tokefu() {
|
||
// #ifdef MP-WEIXIN
|
||
wx.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: uni.getStorageSync('wx_link') //客服地址链接
|
||
},
|
||
corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
|
||
success(res) {
|
||
console.log(res, 1)
|
||
},
|
||
fail(res) {
|
||
console.log(res, 2)
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
getlist(a) {
|
||
this.goods_num = a
|
||
this.loadData()
|
||
// this.$refs.huanxiang.close()
|
||
},
|
||
after() {
|
||
if (this.goods.num < this.goods.stock) {
|
||
this.goods_num = this.goods.num + 1
|
||
this.getlist(this.goods_num)
|
||
} else {
|
||
uni.showToast({
|
||
title: '没有更多箱啦~',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
},
|
||
before() {
|
||
if (this.goods.num > 1) {
|
||
this.goods_num = this.goods.num - 1
|
||
this.getlist(this.goods_num)
|
||
} else {
|
||
uni.showToast({
|
||
title: '当前已是第一箱~',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
},
|
||
huanxiang_click(a, b) {
|
||
let that = this
|
||
this.saixuan_index = a
|
||
this.page_no = b
|
||
that.req({
|
||
url: 'goodslist_content',
|
||
data: {
|
||
sort: that.saixuan_index,
|
||
goods_id: that.goods_id,
|
||
page_no: that.page_no
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.huanxiang_Detail = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
tohuanxiang() {
|
||
//隐藏之前弹出窗换箱
|
||
// this.huanxiang_click(this.saixuan_index, this.page_no)
|
||
// this.$refs.huanxiang.open()
|
||
console.log('点击')
|
||
// uni.redirectTo({
|
||
// url: '/pages/shouye/huanxiang?id=' + this.goods_id
|
||
// })
|
||
},
|
||
// 换箱头部
|
||
getgoodslist_count() {
|
||
let that = this
|
||
that.req({
|
||
url: 'goodslist_count',
|
||
data: {
|
||
goods_id: that.goods_id
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.huanxiang_arr = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getDanye(e) {
|
||
let that = this
|
||
that.req({
|
||
url: 'danye',
|
||
data: {
|
||
type: e
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.news = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 中赏记录
|
||
change_shang_id(e) {
|
||
this.shang_id = e
|
||
this.page_num = 1
|
||
this.jl_Arr = []
|
||
this.getjilv()
|
||
},
|
||
getjilv({ num, size }) {
|
||
let that = this
|
||
|
||
that.req({
|
||
url: 'shang_log',
|
||
Loading: true,
|
||
data: {
|
||
page: num,
|
||
goods_id: that.goods_id,
|
||
goods_num: that.goods.num,
|
||
shang_id:
|
||
that.shang_cate.length > 0
|
||
? that.shang_cate[that.logTabCur].shang_id
|
||
: ''
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.shang_cate = res.data.category
|
||
|
||
if (num == 1) {
|
||
that.jl_Arr = []
|
||
}
|
||
that.jl_Arr = that.jl_Arr.concat(res.data.data)
|
||
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
back() {
|
||
var pages = getCurrentPages()
|
||
console.log(pages)
|
||
|
||
if (pages.length == 1 && pages[0].route == 'pages/shouye/detail') {
|
||
uni.redirectTo({
|
||
url: '/pages/shouye/index'
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
|
||
openBox(v) {
|
||
// #ifdef H5
|
||
this.left_px = this.$refs.refDivName.$el.offsetWidth
|
||
// #endif
|
||
// #ifndef H5
|
||
uni
|
||
.createSelectorQuery()
|
||
.in(this)
|
||
.select('.zzz')
|
||
.boundingClientRect(data => {
|
||
this.left_px = data.width //表示元素宽度
|
||
})
|
||
.exec()
|
||
// #endif
|
||
//初始化数据
|
||
this.tiaotype = 1
|
||
this.InitPageModel(v)
|
||
//500ms 之后开始奖励列表滑动
|
||
setTimeout(() => {
|
||
this.rollTimer = setTimeout(() => this.startScroll(v), 100)
|
||
}, 150)
|
||
},
|
||
//随机数
|
||
getRand(start, end) {
|
||
return Math.floor(Math.random() * (end - start + 1) + start)
|
||
},
|
||
getItem() {
|
||
let r = this.getRand(0, this.goodslist.length - 1)
|
||
let item
|
||
item = this.goodslist[r]
|
||
return item
|
||
},
|
||
//初始化列表
|
||
InitPageModel(v) {
|
||
var that = this
|
||
//随机一个总数
|
||
that.items = []
|
||
//中间号码的列队
|
||
that.luckydata = []
|
||
//中奖卡片的位置
|
||
for (var a = 0; a < v; a++) {
|
||
var jldata = []
|
||
that.luckyNums = that.getRand(that.lnStart, that.lnEnd)
|
||
that.luckydata.push(that.luckyNums)
|
||
|
||
let loopNum =
|
||
that.lnEnd - that.luckyNums < 4 ? that.luckyNums + 4 : that.lnEnd
|
||
for (let i = 0; i < loopNum; i++) {
|
||
let item = {}
|
||
if (i == that.luckyNums) {
|
||
item = that.goodslist.filter(
|
||
item => item.id == that.jp_arr[a].goodslist_id
|
||
)[0] //把奖励加到列表里
|
||
that.awardItem.push(item) //拿到奖励的各个参数
|
||
} else item = that.getItem()
|
||
jldata.push(item)
|
||
}
|
||
that.items[a] = jldata
|
||
}
|
||
that.$nextTick(function () {
|
||
that.$refs.popup.open()
|
||
})
|
||
},
|
||
|
||
//滑动效果
|
||
startScroll() {
|
||
let that = this
|
||
that.$nextTick(function () {
|
||
setTimeout(() => {
|
||
for (let a = 0; a < that.luckydata.length; a++) {
|
||
let yanzi =
|
||
'left:-' +
|
||
(that.luckydata[a] - 1.95) * that.left_px +
|
||
'px;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
|
||
that.moveCss.push(yanzi)
|
||
//6s 动画结束后 开始弹出奖励图片，6500ms后执行
|
||
}
|
||
}, 500)
|
||
that.rollTimer = setTimeout(() => {
|
||
that.tiaofun()
|
||
}, 9000)
|
||
})
|
||
},
|
||
tiaofun() {
|
||
let that = this
|
||
that.moveCss = []
|
||
// 清除CSS动画属性
|
||
for (var a = 0; a < that.luckydata.length; a++) {
|
||
let left = 'left:0;'
|
||
that.moveCss.push(left)
|
||
}
|
||
clearTimeout(that.rollTimer)
|
||
that.$refs.popup.close()
|
||
setTimeout(() => {
|
||
that.$refs.jp_show.open()
|
||
that.moveCss = []
|
||
that.items = []
|
||
that.luckydata = []
|
||
}, 500)
|
||
},
|
||
|
||
yulan(e, a) {
|
||
this.current_index = a
|
||
setTimeout(() => {
|
||
this.$refs.yulanPop.open()
|
||
}, 300)
|
||
},
|
||
tosangdai() {
|
||
uni.setStorageSync('page', this.$mp.page.route)
|
||
uni.switchTab({ url: '/pages/sangdai/sangdai' })
|
||
// uni.redirectTo({
|
||
// url: '../sangdai/sangdai'
|
||
// })
|
||
},
|
||
change_yuan_index(e) {
|
||
if (e == 1) {
|
||
this.bi = !this.bi
|
||
}
|
||
if (e == 2) {
|
||
this.yue = !this.yue
|
||
}
|
||
this.order_money()
|
||
},
|
||
sc_collect() {
|
||
let that = this
|
||
that.req({
|
||
url: 'addCollect',
|
||
data: {
|
||
goods_id: that.goods.id,
|
||
goods_num: that.goods.num
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
if (that.goods.collection_is == 1) {
|
||
that.goods.collection_is = 0
|
||
} else {
|
||
that.goods.collection_is = 1
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
pay() {
|
||
let that = this
|
||
// that.$refs.jp_show.open()
|
||
// return;
|
||
let info = {
|
||
prize_num: that.prize_num,
|
||
goods_id: that.goods_id,
|
||
goods_num: that.goods.num,
|
||
use_money_is: that.yue ? 1 : 2,
|
||
use_integral_is: that.bi ? 1 : 2,
|
||
coupon_id: (that.couponData && that.couponData.id) || ''
|
||
}
|
||
if (that.pay_status) {
|
||
return
|
||
}
|
||
if (info) {
|
||
that.pay_status = true
|
||
that.req({
|
||
url: 'orderbuy',
|
||
data: info,
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.jp_arr = []
|
||
if (res.data.status == 1) {
|
||
that.info = {}
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.res.timeStamp,
|
||
nonceStr: res.data.res.nonceStr,
|
||
package: res.data.res.package,
|
||
signType: 'MD5',
|
||
paySign: res.data.res.paySign,
|
||
complete(ress) {
|
||
if (ress.errMsg == 'requestPayment:fail cancel') {
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon: 'loading',
|
||
duration: 1000
|
||
})
|
||
}
|
||
if (ress.errMsg == 'requestPayment:ok') {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
that.$refs.dingdan.close()
|
||
that.req({
|
||
url: 'prizeorderlog',
|
||
data: {
|
||
order_num: res.data.order_num
|
||
},
|
||
success(aa) {
|
||
if (aa.status == 1) {
|
||
that.jp_news = aa.data.user_info
|
||
that.jp_arr = aa.data.data
|
||
that.$refs.jp_show.open()
|
||
// if (that.jp_arr.length ==
|
||
// 1 || that.jp_arr
|
||
// .length == 3 || that
|
||
// .jp_arr.length == 5) {
|
||
// that.openBox(that
|
||
// .jp_arr
|
||
// .length)
|
||
// } else {
|
||
// that.$refs.jp_show
|
||
// .open()
|
||
// }
|
||
that.loadData()
|
||
}
|
||
}
|
||
})
|
||
}, 1500)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
that.info = {}
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
that.$refs.dingdan.close()
|
||
that.req({
|
||
url: 'prizeorderlog',
|
||
data: {
|
||
order_num: res.data.order_num
|
||
},
|
||
success(aa) {
|
||
if (aa.status == 1) {
|
||
that.jp_news = aa.data.user_info
|
||
that.jp_arr = aa.data.data
|
||
that.$refs.jp_show.open()
|
||
// if (that.jp_arr.length == 1 || that.jp_arr.length == 3 ||
|
||
// that.jp_arr.length == 5) {
|
||
// that.openBox(that.jp_arr.length)
|
||
// } else {
|
||
// that.$refs.jp_show.open()
|
||
// }
|
||
that.loadData()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
if (res.status == 0) {
|
||
}
|
||
},
|
||
complete() {
|
||
that.pay_status = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
choujiang(e) {
|
||
this.prize_num = e
|
||
this.couponData = ''
|
||
this.order_money()
|
||
},
|
||
order_money() {
|
||
let that = this
|
||
console.log(234)
|
||
for (var a = 0; a < that.luckydata.length; a++) {
|
||
let yanzi = 'left:0;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
|
||
// that.$set(that.moveCss, a, yanzi)
|
||
that.moveCss.push(yanzi)
|
||
console.log('moveCss:', that.moveCss[a])
|
||
}
|
||
that.req({
|
||
url: 'ordermoney',
|
||
data: {
|
||
prize_num: that.prize_num,
|
||
goods_id: that.goods_id,
|
||
goods_num: that.goods.num,
|
||
use_money_is: that.yue ? 1 : 2,
|
||
use_integral_is: that.bi ? 1 : 2,
|
||
coupon_id: (that.couponData && that.couponData.id) || ''
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.pay_news = res.data
|
||
if (res.data.coupon_id) {
|
||
that.couponData = {
|
||
id: res.data.coupon_id,
|
||
price: res.data.coupon_price
|
||
}
|
||
}
|
||
|
||
that.$refs.dingdan.open()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
tabChange(i) {
|
||
this.tabCur = i
|
||
this.goodslist = []
|
||
|
||
if (this.tabCur == 0) {
|
||
this.loadData()
|
||
}
|
||
|
||
if (this.tabCur == 1) {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.mescroll.resetUpScroll()
|
||
this.mescroll.scrollTo(0, 0)
|
||
}, 200)
|
||
})
|
||
}
|
||
},
|
||
|
||
loadData(showToast = false) {
|
||
// 模拟接口
|
||
let url = 'goodsdetail'
|
||
|
||
let that = this
|
||
that.req({
|
||
url,
|
||
data: {
|
||
goods_id: that.goods_id,
|
||
goods_num: that.goods_num
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
if (showToast) {
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'success'
|
||
})
|
||
}, 100)
|
||
}
|
||
|
||
if (res.status == 0) {
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}
|
||
if (res.status == 1) {
|
||
that.goods = res.data.goods
|
||
// that.goods_num = res.data.goods.num
|
||
that.join_count = res.data.join_count
|
||
that.join_user = res.data.join_user
|
||
that.$nextTick(() => {
|
||
that.lock_info = res.data.lock_info
|
||
})
|
||
that.goodslist = res.data.goodslist
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.daoji .time {
|
||
/* margin-left: 160rpx; */
|
||
margin-top: 18rpx;
|
||
}
|
||
.daoji .time text {
|
||
-webkit-text-stroke: 4rpx #0d0d0d;
|
||
}
|
||
.popGm {
|
||
width: 607rpx;
|
||
// height: 904rpx;
|
||
padding-top: 70rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.pop_title {
|
||
font-size: 36rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
|
||
.pop_con {
|
||
padding: 30rpx 40rpx 50rpx;
|
||
box-sizing: border-box;
|
||
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translate(-50%, 100%);
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
.zzz {
|
||
width: 140rpx;
|
||
height: 1rpx;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.dhboxs {
|
||
position: relative;
|
||
width: 750rpx;
|
||
/* height: 909rpx; */
|
||
padding: 80rpx 25rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dhxian {
|
||
width: 3rpx;
|
||
height: calc(100% - 100rpx);
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 52rpx;
|
||
margin: auto;
|
||
background: #ff7514;
|
||
box-shadow: 0 2rpx 10rpx 4rpx #ff7514;
|
||
}
|
||
|
||
.tiaobox {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
border: 2rpx solid #ff7315;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ff7315;
|
||
border-radius: 10rpx;
|
||
margin: 100rpx auto 0;
|
||
position: relative;
|
||
z-index: 20;
|
||
}
|
||
|
||
.choubox {
|
||
width: 670rpx;
|
||
height: 120rpx;
|
||
position: relative;
|
||
margin: 30rpx auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.choulist {
|
||
position: absolute;
|
||
display: flex;
|
||
width: 670rpx;
|
||
}
|
||
|
||
.choulists {
|
||
position: relative;
|
||
left: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.cj_title > view {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 0 20rpx 0 12rpx;
|
||
box-sizing: border-box;
|
||
background: #ff7514;
|
||
border-radius: 0 10rpx 0 0;
|
||
}
|
||
|
||
.cj_title > image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.cj_title {
|
||
width: 140rpx;
|
||
height: 120rpx;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
text-align: left;
|
||
position: relative;
|
||
}
|
||
|
||
/* 动画 */
|
||
.list_r text:nth-of-type(2) {
|
||
/* color: #F96026; */
|
||
}
|
||
|
||
.list_r > view {
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.list_r > view:nth-child(3n-1) {
|
||
margin: 0 5%;
|
||
}
|
||
|
||
.list_r {
|
||
margin-left: 40rpx;
|
||
width: 500rpx;
|
||
display: flex;
|
||
/* justify-content: space-around; */
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.list_l {
|
||
width: 97rpx;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.yuliang_list {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 690rpx;
|
||
font-size: 24rpx;
|
||
margin-top: 20rpx;
|
||
border: 1px solid #fff;
|
||
padding: 37rpx 20rpx 60rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.yuliang {
|
||
width: 690rpx;
|
||
max-height: 900rpx;
|
||
border-radius: 20rpx;
|
||
margin: 15rpx auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.goods_v_1 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
/* margin-left: 10rpx; */
|
||
}
|
||
|
||
.goods_v {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
margin: 10rpx;
|
||
}
|
||
|
||
.header_view_sel {
|
||
background: rgba(255, 115, 21, 0.2);
|
||
border: 1px solid #ff7514;
|
||
color: #ff7514;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.header_view {
|
||
background: rgba(242, 19, 55, 0.08);
|
||
border: 1px solid #999999;
|
||
color: #999999;
|
||
}
|
||
|
||
.huanxiang_header > view {
|
||
width: 180rpx;
|
||
height: 58rpx;
|
||
border-radius: 29rpx;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.huanxiang_header {
|
||
display: flex;
|
||
width: 100%;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
/* 换箱 */
|
||
|
||
.yulanStyle > .shang_img {
|
||
width: 540rpx;
|
||
height: 460rpx;
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 28rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.yulanStyle > .img_bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: -1;
|
||
}
|
||
.yulanStyle > view:nth-of-type(1) {
|
||
position: absolute;
|
||
top: 54rpx;
|
||
left: 45rpx;
|
||
font-size: 34rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
background: rgba(1, 14, 14, 0.83);
|
||
opacity: 0.83;
|
||
border-radius: 29rpx;
|
||
padding: 10rpx 30rpx;
|
||
}
|
||
|
||
.yulanStyle {
|
||
font-size: 47rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
position: relative;
|
||
width: 600rpx;
|
||
height: 794rpx;
|
||
|
||
.detail-title {
|
||
position: absolute;
|
||
top: 500rpx;
|
||
left: 130rpx;
|
||
width: 346rpx;
|
||
height: 84rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx;
|
||
|
||
font-size: 28rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.detail-type {
|
||
position: absolute;
|
||
top: 618rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #cccccc;
|
||
|
||
text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.detail-price {
|
||
position: absolute;
|
||
top: 674rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #cccccc;
|
||
|
||
text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translate(-50%, 70%);
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
/* .jp_btn>image{
|
||
width: 292rpx;
|
||
height: 70rpx;
|
||
}
|
||
.jp_btn>view:nth-of-type(2) {
|
||
background: #FF7514;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.jp_btn>view:nth-of-type(1) {
|
||
border: 2rpx solid #FF7514;
|
||
border-radius: 10rpx;
|
||
color: #FF7514;
|
||
} */
|
||
|
||
.jp_btn > view {
|
||
width: 206rpx;
|
||
height: 84rpx;
|
||
font-size: 43rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.jp_btn {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
}
|
||
.dhbtmbox {
|
||
width: 750rpx;
|
||
height: 32rpx;
|
||
}
|
||
.list_img > .type-num {
|
||
height: 40rpx;
|
||
box-sizing: border-box;
|
||
padding: 0 8rpx;
|
||
width: 100%;
|
||
position: absolute;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.type {
|
||
font-size: 22rpx;
|
||
font-family: zihun147hao-xingyuanhei;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.list_img > image {
|
||
width: 100%;
|
||
height: 184rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.list_img {
|
||
width: 184rpx;
|
||
height: 184rpx;
|
||
margin: 0 auto;
|
||
/* border-radius: 10rpx; */
|
||
position: relative;
|
||
|
||
// border: 1px solid #c5fadc;
|
||
/* box-shadow: 0px 0px 10rpx 0px #FF7514; */
|
||
}
|
||
|
||
.jp_list {
|
||
font-size: 24rpx;
|
||
width: 210rpx;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.pop_gongxi {
|
||
width: 750rpx;
|
||
height: 197rpx;
|
||
display: block;
|
||
margin-bottom: 30rpx;
|
||
/* position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
top: -212rpx; */
|
||
}
|
||
|
||
// .jp_title_1 > view:nth-child(3n-1) {
|
||
// margin: 20rpx 30rpx 0 30rpx;
|
||
// }
|
||
|
||
.jp_title_1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
margin: auto;
|
||
color: #ffffff;
|
||
// padding-bottom: 15rpx;
|
||
// box-sizing: border-box;
|
||
}
|
||
|
||
.jp_title {
|
||
box-sizing: border-box;
|
||
padding: 0rpx 50rpx;
|
||
box-sizing: border-box;
|
||
height: 100%;
|
||
/* margin-top: 200rpx; */
|
||
}
|
||
|
||
.jp_name {
|
||
/* font-family: 'zcq'; */
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
/* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
|
||
position: absolute;
|
||
top: 104rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 13;
|
||
}
|
||
|
||
.jp_headimg > image {
|
||
width: 114rpx;
|
||
height: 114rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.jp_headimg {
|
||
width: 114rpx;
|
||
height: 114rpx;
|
||
border-radius: 50%;
|
||
border: 1px solid #ff7514;
|
||
position: absolute;
|
||
top: -26rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 12;
|
||
}
|
||
|
||
.pop_jp {
|
||
/* width: 750rpx;
|
||
height: 942rpx;
|
||
margin: auto;
|
||
text-align: center; */
|
||
// height: 854rpx;
|
||
|
||
.jp_bg {
|
||
padding-top: 20rpx;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
width: 750rpx;
|
||
height: 650rpx;
|
||
// padding-top: 363rpx;
|
||
box-sizing: border-box;
|
||
// background-position: 0 90rpx;
|
||
// background-size: 100% calc(100% - 90rpx);
|
||
}
|
||
|
||
.suc-pop-hd {
|
||
width: 346rpx;
|
||
height: 94rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.shang-title {
|
||
padding: 10rpx;
|
||
text-align: center;
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.fangshi text {
|
||
// color: #70ede8;
|
||
}
|
||
|
||
.fangshi > view > image {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.fangshi image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.fangshi {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
line-height: 60rpx;
|
||
align-items: center;
|
||
|
||
.fangshi-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
|
||
.icon {
|
||
width: 10rpx;
|
||
height: 18rpx;
|
||
margin-right: 0;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zhifu {
|
||
width: 206rpx;
|
||
height: 84rpx;
|
||
/* background: #FF7514;
|
||
border-radius: 7rpx; */
|
||
font-size: 36rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.order_title_btn {
|
||
width: 690rpx;
|
||
height: 98rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 50rpx;
|
||
|
||
.total-price {
|
||
font-size: 28rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.order_num text {
|
||
font-size: 32rpx;
|
||
// color: #70ede8;
|
||
}
|
||
|
||
.order_num > view:nth-of-type(2) {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.order_num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-top: 1rpx solid #333333;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.order_pic > view > view:nth-of-type(3) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 410rpx;
|
||
}
|
||
|
||
.order_pic > view:nth-of-type(2) {
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
padding-top: 14rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.order_pic_img > image {
|
||
width: 168rpx;
|
||
height: 168rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.order_pic_img {
|
||
width: 188rpx;
|
||
height: 188rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.order_pic {
|
||
display: flex;
|
||
}
|
||
|
||
.order_title_con1 {
|
||
width: 690rpx;
|
||
background: rgba(34, 34, 34, 0.5);
|
||
// border: 1px solid #ffffff;
|
||
// box-shadow: 0px 0px 13rpx 0px rgba(15, 195, 197, 0.69);
|
||
margin-top: 28rpx;
|
||
padding: 20rpx 30rpx 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.order_title > image {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
position: absolute;
|
||
right: 14rpx;
|
||
top: 10rpx;
|
||
}
|
||
|
||
.order_title {
|
||
font-size: 36rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
.order {
|
||
width: 750rpx;
|
||
height: 994rpx;
|
||
background: #000;
|
||
/* background: rgba(0, 0, 0, 0.9); */
|
||
/* border-radius: 30rpx 30rpx 0px 0px;
|
||
border-top: 5rpx solid #35ED85; */
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 30rpx 21rpx 50rpx;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
|
||
border-top: 2px solid transparent;
|
||
background-clip: padding-box, border-box;
|
||
background-origin: padding-box, border-box;
|
||
background-image: linear-gradient(to right, #000, #000),
|
||
linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);
|
||
// border-bottom: none;
|
||
}
|
||
|
||
.jilv_list > view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #f7f7f7;
|
||
}
|
||
|
||
.jilv_list image:nth-of-type(2) {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
border-radius: 5rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.jilv_list image:nth-of-type(1) {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.jilv_list {
|
||
width: 710rpx;
|
||
height: 180rpx;
|
||
/* border: 2rpx solid #F7F7F7; */
|
||
margin: 22rpx auto;
|
||
padding: 30rpx 40rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.jilv_title > view {
|
||
/* padding: 4rpx 20rpx;
|
||
border: 3rpx solid;
|
||
border-radius: 10rpx; */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
color: #f7f7f7;
|
||
/* width: 97rpx; */
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.jilv_title {
|
||
font-size: 26rpx;
|
||
color: #f7f7f7;
|
||
display: flex;
|
||
align-items: center;
|
||
/* justify-content: space-between; */
|
||
width: 100%;
|
||
margin: 20rpx auto;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
|
||
button {
|
||
background-color: transparent;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
line-height: inherit;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.xuanfu image {
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.xuanfu {
|
||
position: fixed;
|
||
bottom: 275rpx;
|
||
right: 20rpx;
|
||
width: 104rpx;
|
||
z-index: 21;
|
||
}
|
||
|
||
.shop_con {
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
line-height: 40rpx;
|
||
/* background: #000000; */
|
||
border-radius: 0 0 10rpx 10rpx;
|
||
font-size: 20rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.qiangguang > image {
|
||
width: 118rpx;
|
||
height: 45rpx;
|
||
}
|
||
|
||
.qiangguang {
|
||
width: 100%;
|
||
height: 230rpx;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 0rpx;
|
||
}
|
||
.item_num {
|
||
background: rgba(0, 0, 0, 0.8);
|
||
bottom: 0rpx;
|
||
left: 0rpx;
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 39rpx;
|
||
box-sizing: border-box;
|
||
padding-right: 6rpx;
|
||
}
|
||
.item_num > view:nth-of-type(2) {
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
/* font-style: italic; */
|
||
color: #ffffff;
|
||
}
|
||
|
||
.item_num > view:nth-of-type(1) {
|
||
/* background: linear-gradient(0deg, #1AC762 0%, #35ED85 100%); */
|
||
border-radius: 0px 10rpx 0px 0px;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
font-family: zihun147hao-xingyuanhei;
|
||
background: linear-gradient(0deg, #85dfff 0%, #ba39ff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
padding: 0 14rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.item_head > image {
|
||
width: 100%;
|
||
height: 210rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.item_head {
|
||
width: 100%;
|
||
height: 210rpx;
|
||
position: relative;
|
||
}
|
||
.shop > view:nth-child(3n + 3) {
|
||
margin-right: 0rpx;
|
||
}
|
||
.shop_item {
|
||
width: 236rpx;
|
||
margin-top: 10rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
// margin-right: 15rpx;
|
||
// border: 3rpx solid #c5fadc;
|
||
border-radius: 10rpx;
|
||
padding: 12rpx;
|
||
}
|
||
|
||
.shop {
|
||
width: 710rpx;
|
||
margin: 0rpx auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-size: 24rpx;
|
||
}
|
||
.header_news_b > view {
|
||
width: 436rpx;
|
||
height: 80rpx;
|
||
padding-left: 49rpx;
|
||
box-sizing: border-box;
|
||
color: #ddd;
|
||
}
|
||
.header_news_b text {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.header_news_b > image {
|
||
width: 164rpx;
|
||
height: 66rpx;
|
||
}
|
||
|
||
.header_news_b {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
font-style: italic;
|
||
}
|
||
|
||
.header_news_c {
|
||
padding: 9rpx 30rpx 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: row-reverse;
|
||
// width: 691rpx;
|
||
|
||
// height: 67rpx;
|
||
color: #fff;
|
||
margin: 10rpx auto 20rpx;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 1rpx;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#ffffff 0%,
|
||
#a11aff 35%,
|
||
#85dfff 64%,
|
||
#ba39ff 100%
|
||
);
|
||
}
|
||
}
|
||
|
||
.redu {
|
||
/* width: 250rpx; */
|
||
height: 46rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.redu > image {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.header_news_t_price > view:nth-of-type(1) {
|
||
font-size: 34rpx;
|
||
margin-top: 10rpx;
|
||
text-shadow: 0px 3px 8px rgba(48, 251, 253, 0.32);
|
||
font-family: YouSheBiaoTiHei;
|
||
}
|
||
|
||
.header_news_t_price {
|
||
width: 200rpx;
|
||
height: 100rpx;
|
||
/* border: 1rpx solid red; */
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
opacity: 0.87;
|
||
margin-right: 30rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.riqi {
|
||
width: 120rpx;
|
||
/* height: 80rpx; */
|
||
/* border: 1rpx solid darkblue; */
|
||
font-size: 20rpx;
|
||
/* -webkit-text-stroke: 2rpx #1A1A1A; */
|
||
/* text-stroke: 2rpx #1A1A1A; */
|
||
font-family: zihun143hao;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
}
|
||
|
||
.header_news_t image:nth-of-type(2) {
|
||
width: 192rpx;
|
||
height: 54rpx;
|
||
}
|
||
|
||
.header_news_t image:nth-of-type(1) {
|
||
width: 168rpx;
|
||
height: 54rpx;
|
||
}
|
||
|
||
.header_news_t {
|
||
display: flex;
|
||
/* justify-content: flex-end; */
|
||
align-items: center;
|
||
margin-top: 24rpx;
|
||
width: 750rpx;
|
||
height: 118rpx;
|
||
}
|
||
|
||
.header_news {
|
||
width: 750rpx;
|
||
/* height: 273rpx; */
|
||
position: absolute;
|
||
bottom: -15rpx;
|
||
}
|
||
|
||
.header_center > image:nth-of-type(3) {
|
||
width: 153rpx;
|
||
height: 74rpx;
|
||
position: absolute;
|
||
bottom: 300rpx;
|
||
right: 0;
|
||
}
|
||
|
||
.header_center > image:nth-of-type(2) {
|
||
width: 146rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
bottom: 75rpx;
|
||
right: 20rpx;
|
||
z-index: 9;
|
||
}
|
||
|
||
.header_center > image:nth-of-type(1) {
|
||
width: 146rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
bottom: 75rpx;
|
||
right: 195rpx;
|
||
z-index: 9;
|
||
}
|
||
|
||
.header_center {
|
||
/* position: relative; */
|
||
/* margin: 0rpx auto; */
|
||
}
|
||
|
||
.header_title > view:nth-of-type(2) {
|
||
width: 520rpx;
|
||
text-align: center;
|
||
/* margin: auto; */
|
||
}
|
||
|
||
.header_title > view:nth-of-type(1) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.header_title image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.header_title {
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.status_bar {
|
||
height: var(--status-bar-height);
|
||
width: 100%;
|
||
}
|
||
|
||
.head {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
|
||
.header {
|
||
width: 750rpx;
|
||
height: 530rpx;
|
||
/* background: #ffffff; */
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 15;
|
||
|
||
.info-btn {
|
||
position: fixed;
|
||
left: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 1;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80%;
|
||
height: 0rpx;
|
||
box-shadow: 0 0 20rpx 10rpx #000;
|
||
z-index: -1;
|
||
}
|
||
|
||
image {
|
||
width: 12rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.like-btn {
|
||
position: fixed;
|
||
right: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 1;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80%;
|
||
height: 0rpx;
|
||
box-shadow: 0 0 20rpx 10rpx #000;
|
||
z-index: -1;
|
||
}
|
||
|
||
image {
|
||
width: 24rpx;
|
||
height: 21rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.pic-bt {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
transform: translateY(50%);
|
||
width: 100%;
|
||
height: 122rpx;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
|
||
.pic-bt-hd {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.left,
|
||
.center,
|
||
.right {
|
||
width: 33%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.left {
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.center {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
text-shadow: 0 0 10rpx #000;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
padding-right: 20rpx;
|
||
text-align: right;
|
||
|
||
text {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pic-bt-ft {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.prev,
|
||
.next {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 10rpx;
|
||
height: 17rpx;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
font-size: 22rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.change-box {
|
||
width: 180rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding-bottom: 250rpx;
|
||
/* background: #FAFAFA; */
|
||
padding-top: 450rpx;
|
||
}
|
||
|
||
.bar_box {
|
||
width: 750rpx;
|
||
height: 260rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.bar_box_1 {
|
||
width: 204rpx;
|
||
height: 96rpx;
|
||
position: absolute;
|
||
top: 36rpx;
|
||
left: 29rpx;
|
||
}
|
||
|
||
.bar_box_2 {
|
||
width: 190rpx;
|
||
height: 68rpx;
|
||
position: absolute;
|
||
top: 26rpx;
|
||
left: 279rpx;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
-webkit-text-stroke: 2rpx #30fbfd;
|
||
text-stroke: 2rpx #30fbfd;
|
||
}
|
||
|
||
.bar_box_3 {
|
||
width: 204rpx;
|
||
height: 96rpx;
|
||
position: absolute;
|
||
top: 36rpx;
|
||
right: 31rpx;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
-webkit-text-stroke: 2rpx #30fbfd;
|
||
text-stroke: 2rpx #30fbfd;
|
||
}
|
||
|
||
.bar_box_4 {
|
||
width: 138rpx;
|
||
height: 110rpx;
|
||
position: absolute;
|
||
bottom: 46rpx;
|
||
left: 307rpx;
|
||
font-size: 64rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.bar_box_5 {
|
||
width: 266rpx;
|
||
height: 95rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.bar_box_6 {
|
||
width: 265rpx;
|
||
height: 95rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
.bar_box_7 {
|
||
width: 316rpx;
|
||
height: 51rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 217rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding-top: 15rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.btns {
|
||
width: 690rpx;
|
||
height: 129rpx;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
right: 0rpx;
|
||
left: 0;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-size: 32rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
-webkit-text-stroke: 1rpx #000000;
|
||
}
|
||
|
||
.tab-list {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10rpx 0 30rpx;
|
||
|
||
.tab-list-item {
|
||
position: relative;
|
||
|
||
font-size: 28rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #939393;
|
||
|
||
.arrow {
|
||
position: absolute;
|
||
width: 27rpx;
|
||
height: 17rpx;
|
||
left: 50%;
|
||
bottom: -20rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
&.active {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-tab {
|
||
white-space: nowrap;
|
||
|
||
.log-tab-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 58rpx;
|
||
padding: 0 30rpx;
|
||
margin-right: 10rpx;
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
&:first-child {
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-list {
|
||
padding: 1rpx 20rpx 40rpx;
|
||
|
||
.log-list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 34rpx;
|
||
margin-top: 4rpx;
|
||
|
||
.log-l {
|
||
width: 50%;
|
||
display: flex;
|
||
|
||
.avatar {
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.log-l-info {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
width: calc(100% - 62rpx);
|
||
box-sizing: border-box;
|
||
padding-left: 10rpx;
|
||
|
||
.info-name {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.info-time {
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #dddddd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-r {
|
||
width: 50%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.log-r-hd {
|
||
font-size: 26rpx;
|
||
font-family: zihun147hao-xingyuanhei;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
|
||
.log-r-ft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.ft-pic {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.ft-title {
|
||
max-width: 200rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ft-fixed {
|
||
position: fixed;
|
||
z-index: 10;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100vw;
|
||
|
||
.ft-fixed-hd {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.btn {
|
||
width: 210rpx;
|
||
height: 86rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding-top: 12rpx;
|
||
|
||
font-size: 36rpx;
|
||
font-family: zihun147hao-xingyuanhei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
|
||
&.center {
|
||
height: 75rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ft-fixed-ft {
|
||
position: relative;
|
||
height: 150rpx;
|
||
|
||
.change-box,
|
||
.lock-btn,
|
||
.all-btn {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
box-sizing: border-box;
|
||
padding-top: 34rpx;
|
||
|
||
font-size: 36rpx;
|
||
font-family: zihun152hao-jijiachaojihei;
|
||
font-weight: 400;
|
||
color: #eeeeee;
|
||
-webkit-text-stroke: 1rpx #000000;
|
||
}
|
||
|
||
.change-box {
|
||
left: 0;
|
||
top: 30rpx;
|
||
width: 305rpx;
|
||
height: 118rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.lock-btn {
|
||
width: 292rpx;
|
||
height: 136rpx;
|
||
left: 50%;
|
||
top: 0;
|
||
padding: 0;
|
||
transform: translateX(-50%);
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
|
||
.all-btn {
|
||
right: 0;
|
||
top: 30rpx;
|
||
width: 305rpx;
|
||
height: 118rpx;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|