秒杀细节
gongfuxiang
parent
68c3dca9a9
commit
7b36a53faf
|
|
@ -1,63 +1,65 @@
|
|||
<template>
|
||||
<view :class="theme_view">
|
||||
<component-nav-back :propFixed="false" :propStyle="'background: url(' + (current.header_bg || seckill_static_url + 'app/header-bg.png')+') top/100% no-repeat;background-size:100% 100%;'">
|
||||
<template slot="right" class="flex-1 flex-width seckill-right-title">
|
||||
<view class="flex-1 seckill-right-title tc">
|
||||
<image :src="current.header_logo || seckill_static_url + 'app/header-logo.png'" mode="widthFix" class="title pr top-md"></image>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="periods_list.length > 0" slot="content">
|
||||
<!-- 秒杀时段 -->
|
||||
<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + nav_active_index" class="top-nav-scroll wh-auto">
|
||||
<view class="nav_seckill flex-row flex-nowrap cr-white tc">
|
||||
<view v-for="(item, index) in periods_list" :key="index" class="item text-size-xss" :class="nav_active_index === index ? 'active' : ''" :id="'one-nav-item-' + index" :data-index="index" :data-text="item.time.time_first_text" :data-status="item.time.status" @tap="nav_event">
|
||||
<view class="time text-size-lg">{{ item.name }}</view>
|
||||
<view class="state text-size-xs round" :class="nav_active_index === index ? 'cr-red' : ''">{{ item.time.msg }}</view>
|
||||
</view>
|
||||
<view :class="theme_view">
|
||||
<block v-if="data_list_loding_status == 3">
|
||||
<component-nav-back :propFixed="false" :propStyle="'background: url(' + current.header_bg +') top/100% no-repeat;background-size:100% 100%;'">
|
||||
<template slot="right" class="flex-1 flex-width seckill-right-title">
|
||||
<view class="flex-1 seckill-right-title tc">
|
||||
<image :src="current.header_logo" mode="widthFix" class="title pr top-md"></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
</component-nav-back>
|
||||
<scroll-view v-if="periods_list.length > 0" :scroll-top="scroll_top" scroll-y="true" class="scroll-y" @scroll="scroll_event" :style="'height: calc(100vh - 210rpx - ' + (status_bar_height + 5) + 'px);'">
|
||||
<view class="padding-horizontal-main padding-top-main">
|
||||
<!-- 基础信息、倒计时 -->
|
||||
<view class="oh spacing-mb flex-row jc-sb align-c">
|
||||
<view>
|
||||
<text :class="'va-m text-size-xs fw-b cr-blak ' + (is_valid == 1 ? 'cr-base' : 'cr-red')">{{ time_first_text }}</text>
|
||||
<view v-if="is_valid == 1" class="dis-inline-block va-m margin-left-sm">
|
||||
<view v-for="(item, index) in periods_list" :key="index">
|
||||
<view v-show="nav_active_index === index">
|
||||
<component-countdown :propHour="item.time.hours" :propMinute="item.time.minutes" :propSecond="item.time.seconds" :propTimeBackgroundColor="seckill_status === 1 ? '#E22C08' : '#333333'"></component-countdown>
|
||||
</template>
|
||||
<template v-if="periods_list.length > 0" slot="content">
|
||||
<!-- 秒杀时段 -->
|
||||
<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + nav_active_index" class="top-nav-scroll wh-auto">
|
||||
<view class="nav_seckill flex-row flex-nowrap cr-white tc">
|
||||
<view v-for="(item, index) in periods_list" :key="index" class="item text-size-xss" :class="nav_active_index === index ? 'active' : ''" :id="'one-nav-item-' + index" :data-index="index" :data-text="item.time.time_first_text" :data-status="item.time.status" @tap="nav_event">
|
||||
<view class="time text-size-lg">{{ item.name }}</view>
|
||||
<view class="state text-size-xs round" :class="nav_active_index === index ? 'cr-red' : ''">{{ item.time.msg }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
</component-nav-back>
|
||||
<scroll-view v-if="periods_list.length > 0" :scroll-top="scroll_top" scroll-y="true" class="scroll-y" @scroll="scroll_event" :style="'height: calc(100vh - 210rpx - ' + (status_bar_height + 5) + 'px);'">
|
||||
<view class="padding-horizontal-main padding-top-main">
|
||||
<!-- 基础信息、倒计时 -->
|
||||
<view class="oh spacing-mb flex-row jc-sb align-c">
|
||||
<view>
|
||||
<text :class="'va-m text-size-xs fw-b cr-blak ' + (is_valid == 1 ? 'cr-base' : 'cr-red')">{{ time_first_text }}</text>
|
||||
<view v-if="is_valid == 1" class="dis-inline-block va-m margin-left-sm">
|
||||
<view v-for="(item, index) in periods_list" :key="index">
|
||||
<view v-show="nav_active_index === index">
|
||||
<component-countdown :propHour="item.time.hours" :propMinute="item.time.minutes" :propSecond="item.time.seconds" :propTimeBackgroundColor="seckill_status === 1 ? '#E22C08' : '#333333'"></component-countdown>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="(data_base.content_notice || null) != null && data_base.content_notice.length > 0" class="text-size-xs cr-blak" @tap="quick_open_event">{{$t('index.index.516559')}}<iconfont name="icon-miaosha-hdgz" size="26rpx" propClass="margin-left-xs pr top-xs" color="#999"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="(data_base.content_notice || null) != null && data_base.content_notice.length > 0" class="text-size-xs cr-blak" @tap="quick_open_event">{{$t('index.index.516559')}}<iconfont name="icon-miaosha-hdgz" size="26rpx" propClass="margin-left-xs pr top-xs" color="#999"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品 -->
|
||||
<view v-if="goods.length > 0">
|
||||
<component-goods-list :propData="{ style_type: 1, goods_list: goods }" :propCurrencySymbol="currency_symbol" :propGridBtnConfig="grid_btn_config" :propIsOpenGridBtnSet="isOpenGridBtnSet" propPriceField="seckill_min_price"></component-goods-list>
|
||||
<!-- 商品 -->
|
||||
<view v-if="goods.length > 0">
|
||||
<component-goods-list :propData="{ style_type: 1, goods_list: goods }" :propCurrencySymbol="currency_symbol" :propGridBtnConfig="grid_btn_config" :propIsOpenGridBtnSet="isOpenGridBtnSet" propPriceField="seckill_min_price"></component-goods-list>
|
||||
</view>
|
||||
<view v-else>
|
||||
<!-- 提示信息 -->
|
||||
<component-no-data propStatus="0" :propMsg="$t('detail.detail.5knxg6')"></component-no-data>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<!-- 提示信息 -->
|
||||
<component-no-data propStatus="0" :propMsg="$t('detail.detail.5knxg6')"></component-no-data>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 结尾 -->
|
||||
<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
|
||||
<!-- 弹窗 -->
|
||||
<component-popup v-if="(data_base.content_notice || null) != null && data_base.content_notice.length > 0" :propShow="popup_status" :propIsBar="propIsBar" propPosition="bottom" @onclose="quick_close_event">
|
||||
<view class="rule">
|
||||
<view class="title cr-black text-size-md fw-b margin-bottom-main tc">{{$t('index.index.516559')}}</view>
|
||||
<scroll-view :scroll-y="true" class="item">
|
||||
<view v-for="(item, index) in data_base.content_notice" :key="index" class="cr-grey text-size-md">{{ item }}</view>
|
||||
</scroll-view>
|
||||
<button type="default" class="bg-main cr-white round text-size-md pa bottom-0 left-0 right-0" @tap="quick_close_event">{{$t('index.index.qbi72m')}}</button>
|
||||
</view>
|
||||
</component-popup>
|
||||
</scroll-view>
|
||||
<!-- 结尾 -->
|
||||
<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
|
||||
<!-- 弹窗 -->
|
||||
<component-popup v-if="(data_base.content_notice || null) != null && data_base.content_notice.length > 0" :propShow="popup_status" :propIsBar="propIsBar" propPosition="bottom" @onclose="quick_close_event">
|
||||
<view class="rule">
|
||||
<view class="title cr-black text-size-md fw-b margin-bottom-main tc">{{$t('index.index.516559')}}</view>
|
||||
<scroll-view :scroll-y="true" class="item">
|
||||
<view v-for="(item, index) in data_base.content_notice" :key="index" class="cr-grey text-size-md">{{ item }}</view>
|
||||
</scroll-view>
|
||||
<button type="default" class="bg-main cr-white round text-size-md pa bottom-0 left-0 right-0" @tap="quick_close_event">{{$t('index.index.qbi72m')}}</button>
|
||||
</view>
|
||||
</component-popup>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- 提示信息 -->
|
||||
<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
|
||||
|
|
@ -76,7 +78,6 @@
|
|||
import componentBottomLine from '@/components/bottom-line/bottom-line';
|
||||
import componentGoodsList from '@/components/goods-list/goods-list';
|
||||
import componentPopup from '@/components/popup/popup';
|
||||
var seckill_static_url = app.globalData.get_static_url('seckill', true);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -216,7 +217,7 @@
|
|||
goods: goods,
|
||||
is_valid: is_valid,
|
||||
data_list_loding_msg: '',
|
||||
data_list_loding_status: 0,
|
||||
data_list_loding_status: (periods_list.length > 0) ? 3 : 0,
|
||||
data_bottom_line_status: goods.length > 0,
|
||||
});
|
||||
if ((this.data_base || null) != null) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue