魔方优化，商品详情购买导航增加还在优化
gongfuxiang
parent
c8fa8da3c8
commit
53bfe432f1
|
|
@ -1,40 +1,42 @@
|
|||
<template>
|
||||
<view :class="theme_view">
|
||||
<view v-if="(data_goods_list || null) != null && data_goods_list.length > 0">
|
||||
<view v-for="(items, indexs) in data_goods_list" :key="indexs" class="bg-white border-radius-main spacing-mb">
|
||||
<view class="padding-vertical-main" :style="(items.bg_images || null) !== null ? 'background-image: url(' + items.bg_images + ');background-size: auto 100%;' : ''">
|
||||
<view v-for="(item, index) in data_goods_list" :key="index" class="bg-white border-radius-main spacing-mb">
|
||||
<view class="padding-vertical-main" :style="(item.bg_images || null) !== null ? 'background-image: url(' + item.bg_images + ');background-size: auto 100%;' : ''">
|
||||
<view class="hot-list flex-row flex-warp">
|
||||
<view v-for="(item, index) in items.data" :key="index" :class="items.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === index + 1 ? 'wh-auto' : 'flex-width-half'">
|
||||
<view class="padding-horizontal-main">
|
||||
<view class="flex-row align-c margin-bottom-xs" :data-value="item.url" @tap="url_event">
|
||||
<text class="text-size fw-b single-text">{{ item.title }}</text>
|
||||
<view class="hot-go margin-left-sm">
|
||||
<block v-if="(item.icon || null) !== null">
|
||||
<image :src="item.icon" mode="heightFix" class="ht-auto"> </image>
|
||||
</block>
|
||||
<block v-for="(items, indexs) in item.data" :key="indexs">
|
||||
<view :class="items.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === indexs + 1 ? 'wh-auto' : 'flex-width-half'">
|
||||
<view class="padding-horizontal-main">
|
||||
<view class="flex-row align-c margin-bottom-xs" :data-value="items.url" @tap="url_event">
|
||||
<text class="text-size fw-b single-text">{{ items.title }}</text>
|
||||
<view class="hot-go margin-left-sm">
|
||||
<block v-if="(items.icon || null) !== null">
|
||||
<image :src="items.icon" mode="heightFix" class="ht-auto"> </image>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cr-grey-9 text-size-xs margin-bottom-sm">{{ item.describe }}</view>
|
||||
<swiper :class="items.data.length % 2 == 0 ? 'swiper-2' : items.data.length === index + 1 ? 'swiper-1' : 'swiper-2'" circular :autoplay="(item.rolling_time || null) !== null ? true : false" :vertical="propVertical" :interval="(item.rolling_time || null) !== null ? Number(item.rolling_time) * 1000 : '6000'" :duration="propDuration">
|
||||
<swiper-item v-for="(swiper_item, swiper_index) in item.data" :key="swiper_index">
|
||||
<view class="swiper-item">
|
||||
<view class="flex-row">
|
||||
<view v-for="(gv, gi) in swiper_item" :key="gi" :class="items.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === index + 1 ? 'flex-width-half-2' : 'flex-width-half'">
|
||||
<view class="padding-horizontal-main tc" :data-value="(gv.goods_url || null) !== null ? gv.goods_url : ''" @tap="url_event">
|
||||
<image :src="(gv.images || null) !== null ? gv.images : ''" mode="heightFix" class="swiper-img border-radius-sm"> </image>
|
||||
<view v-if="(gv.show_field_price_status || 0) == 1" class="price tc single-text">
|
||||
<text class="sales-price va-m text-size-xss va-b">{{ gv.show_price_symbol }}</text>
|
||||
<text class="sales-price va-m text-size-xs">{{ gv.min_price }}</text>
|
||||
<text class="cr-grey va-m text-size-xss">{{ gv.show_price_unit }}</text>
|
||||
<view class="cr-grey-9 text-size-xs margin-bottom-sm">{{ items.describe }}</view>
|
||||
<swiper :class="items.data.length % 2 == 0 ? 'swiper-2' : items.data.length === indexs + 1 ? 'swiper-1' : 'swiper-2'" circular :autoplay="(items.rolling_time || null) !== null ? true : false" :vertical="propVertical" :interval="(items.rolling_time || null) !== null ? Number(items.rolling_time) * 1000 : '6000'" :duration="propDuration">
|
||||
<swiper-item v-for="(itemss, indexss) in items.data" :key="indexss">
|
||||
<view class="swiper-item">
|
||||
<view class="flex-row">
|
||||
<view v-for="(gv, gi) in itemss" :key="gi" :class="item.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === indexs + 1 ? 'flex-width-half-2' : 'flex-width-half'">
|
||||
<view class="tc" :data-index="index" :data-indexs="indexs" :data-indexss="indexss" :data-gi="gi" :data-value="(gv.goods_url || null) !== null ? gv.goods_url : ''" @tap="goods_event">
|
||||
<image :src="(gv.images || null) !== null ? gv.images : ''" mode="heightFix" class="swiper-img border-radius-sm"> </image>
|
||||
<view v-if="(gv.show_field_price_status || 0) == 1" class="price tc single-text">
|
||||
<text class="sales-price va-m text-size-xss va-b">{{ gv.show_price_symbol }}</text>
|
||||
<text class="sales-price va-m text-size-xs">{{ gv.min_price }}</text>
|
||||
<text class="cr-grey va-m text-size-xss">{{ gv.show_price_unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -83,28 +85,43 @@
|
|||
this.set_data(this.propData);
|
||||
},
|
||||
methods: {
|
||||
// 商品事件
|
||||
goods_event(e) {
|
||||
// 商品数据缓存处理
|
||||
var index = e.currentTarget.dataset.index;
|
||||
var indexs = e.currentTarget.dataset.indexs;
|
||||
var indexss = e.currentTarget.dataset.indexss;
|
||||
var gi = e.currentTarget.dataset.gi;
|
||||
var goods = this.data_goods_list[index]['data'][indexs]['data'][indexss][gi];
|
||||
app.globalData.goods_data_cache_handle(goods.id, goods);
|
||||
|
||||
// 调用公共打开url地址
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
|
||||
// url事件
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
|
||||
// 轮播数据处理
|
||||
set_data(data) {
|
||||
let goods = data.goods;
|
||||
goods.forEach((items) => {
|
||||
items.data.forEach((item, i) => {
|
||||
goods.forEach((item) => {
|
||||
item.data.forEach((items, indexs) => {
|
||||
let swiperData = [];
|
||||
if (items.data.length % 2 == 0) {
|
||||
if (item.data.length % 2 == 0) {
|
||||
// 偶数
|
||||
swiperData = app.globalData.group_arry(item.goods_list, 2);
|
||||
swiperData = app.globalData.group_arry(items.goods_list, 2);
|
||||
} else {
|
||||
// 奇数
|
||||
if (items.data.length === i + 1) {
|
||||
swiperData = app.globalData.group_arry(item.goods_list, 4);
|
||||
if (item.data.length === indexs + 1) {
|
||||
swiperData = app.globalData.group_arry(items.goods_list, 4);
|
||||
} else {
|
||||
swiperData = app.globalData.group_arry(item.goods_list, 2);
|
||||
swiperData = app.globalData.group_arry(items.goods_list, 2);
|
||||
}
|
||||
}
|
||||
item.data = swiperData;
|
||||
items.data = swiperData;
|
||||
});
|
||||
});
|
||||
this.setData({
|
||||
|
|
|
|||
|
|
@ -420,57 +420,62 @@
|
|||
<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<view v-if="!plugins_realstore_cart_nav_status" class="goods-buy-nav oh wh-auto bg-white br-top-shadow bottom-line-exclude flex-row jc-sb align-c">
|
||||
<!-- 左侧集合操作 -->
|
||||
<view class="bus-items tc flex-row jc-sa align-c flex-width-half padding-right-sm">
|
||||
<!-- 是否指定返回操作、返回操作情况下仅展示返回和收藏操作 -->
|
||||
<block v-if="is_opt_back == 1 && is_goods_bottom_opt_back == 1">
|
||||
<!-- 返回操作 -->
|
||||
<view class="item cp" @tap="bottom_nav_back_event">
|
||||
<image :src="common_static_url + 'back-icon.png'" mode="scaleToFill"></image>
|
||||
<text class="dis-block text-size-xs cr-grey">{{$t('common.return')}}</text>
|
||||
<block v-if="goods_bottom_opt_nav_status">
|
||||
<view v-if="!plugins_realstore_cart_nav_status" class="goods-buy-nav oh wh-auto bg-white br-top-shadow bottom-line-exclude flex-row jc-sb align-c">
|
||||
<!-- 左侧集合操作 -->
|
||||
<view class="bus-items tc flex-row jc-sa align-c flex-width-half padding-right-sm">
|
||||
<!-- 是否指定返回操作、返回操作情况下仅展示返回和收藏操作 -->
|
||||
<block v-if="is_opt_back == 1 && is_goods_bottom_opt_back == 1">
|
||||
<!-- 返回操作 -->
|
||||
<view class="item cp" @tap="bottom_nav_back_event">
|
||||
<image :src="common_static_url + 'back-icon.png'" mode="scaleToFill"></image>
|
||||
<text class="dis-block text-size-xs cr-grey">{{$t('common.return')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- 首页 -->
|
||||
<view class="item cp" @tap="shop_event">
|
||||
<image :src="nav_home_button_info.icon" mode="scaleToFill"></image>
|
||||
<text class="dis-block text-size-xs cr-grey">{{ nav_home_button_info.text }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 客服 -->
|
||||
<component-online-service
|
||||
v-if="common_app_is_online_service == 1"
|
||||
:propIsGoods="true"
|
||||
:propIsNav="true"
|
||||
:propCard="true"
|
||||
:propTitle="goods.title"
|
||||
:propImg="goods.images"
|
||||
:propPath="'/pages/goods-detail/goods-detail?id=' + goods.id"
|
||||
:propChatUrl="plugins_chat_data == null ? '' : plugins_chat_data.chat_url"
|
||||
></component-online-service>
|
||||
<!-- 购物车 -->
|
||||
<view v-if="is_opt_cart == 1" class="item cp pr" data-value="/pages/cart-page/cart-page" @tap="url_event">
|
||||
<view class="badge-icon">
|
||||
<component-badge :propNumber="quick_nav_cart_count"></component-badge>
|
||||
</view>
|
||||
<image :src="common_static_url + 'cart-icon.png'" mode="scaleToFill"></image>
|
||||
<text class="dis-block text-size-xs cr-grey">{{$t('common.cart')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- 首页 -->
|
||||
<view class="item cp" @tap="shop_event">
|
||||
<image :src="nav_home_button_info.icon" mode="scaleToFill"></image>
|
||||
<text class="dis-block text-size-xs cr-grey">{{ nav_home_button_info.text }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 客服 -->
|
||||
<component-online-service
|
||||
v-if="common_app_is_online_service == 1"
|
||||
:propIsGoods="true"
|
||||
:propIsNav="true"
|
||||
:propCard="true"
|
||||
:propTitle="goods.title"
|
||||
:propImg="goods.images"
|
||||
:propPath="'/pages/goods-detail/goods-detail?id=' + goods.id"
|
||||
:propChatUrl="plugins_chat_data == null ? '' : plugins_chat_data.chat_url"
|
||||
></component-online-service>
|
||||
<!-- 购物车 -->
|
||||
<view v-if="is_opt_cart == 1" class="item cp pr" data-value="/pages/cart-page/cart-page" @tap="url_event">
|
||||
<view class="badge-icon">
|
||||
<component-badge :propNumber="quick_nav_cart_count"></component-badge>
|
||||
</view>
|
||||
<image :src="common_static_url + 'cart-icon.png'" mode="scaleToFill"></image>
|
||||
<text class="dis-block text-size-xs cr-grey">{{$t('common.cart')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧主操作 -->
|
||||
<view :class="'btn-items flex-row jc-sa align-c flex-width-half goods-buy-nav-btn-number-' + (buy_button.count || 0)">
|
||||
<block v-if="(buy_button.data || null) != null && buy_button.data.length > 0">
|
||||
<block v-for="(item, index) in buy_button.data" :key="index">
|
||||
<block v-if="(item.name || null) != null && (item.type || null) != null">
|
||||
<button :class="'item fl cr-white text-size-md round bg-' + ((item.color || 'main') == 'main' ? 'main' : 'main-pair')" type="default" @tap="nav_buy_submit_event" :data-type="item.type" :data-value="item.value || ''" hover-class="none">{{ item.name }}</button>
|
||||
<!-- 右侧主操作 -->
|
||||
<view :class="'btn-items flex-row jc-sa align-c flex-width-half goods-buy-nav-btn-number-' + (buy_button.count || 0)">
|
||||
<block v-if="(buy_button.data || null) != null && buy_button.data.length > 0">
|
||||
<block v-for="(item, index) in buy_button.data" :key="index">
|
||||
<block v-if="(item.name || null) != null && (item.type || null) != null">
|
||||
<button :class="'item fl cr-white text-size-md round bg-' + ((item.color || 'main') == 'main' ? 'main' : 'main-pair')" type="default" @tap="nav_buy_submit_event" :data-type="item.type" :data-value="item.value || ''" hover-class="none">{{ item.name }}</button>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
<block v-else>
|
||||
<button class="item bg-grey round tc text-size-md" type="default" :loading="data_loading_status == 0" disabled>{{ data_loading_status == 0 ? $t('realstore-cart.realstore-cart.50lf68') : (buy_button.error || $t('goods-detail.goods-detail.35f378')) }}</button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<button class="item bg-grey round tc text-size-md" type="default" :loading="data_loading_status == 0" disabled>{{ data_loading_status == 0 ? $t('realstore-cart.realstore-cart.50lf68') : (buy_button.error || $t('goods-detail.goods-detail.35f378')) }}</button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view v-else class="goods-buy-nav oh wh-auto bg-white br-top-shadow bottom-line-exclude flex-row jc-sb align-c">
|
||||
<button class="bg-white br-white round tc text-size-md wh-auto margin-horizontal-main" type="default" :loading="true" disabled>{{ $t('realstore-cart.realstore-cart.50lf68') }}</button>
|
||||
</view>
|
||||
|
||||
<!-- 商品参数弹窗 -->
|
||||
|
|
@ -648,6 +653,8 @@
|
|||
goods_spec_selected_text: this.$t('goods-detail.goods-detail.6brk57'),
|
||||
show_field_price_text: null,
|
||||
goods_video_is_autoplay: false,
|
||||
// 底部导航展示状态、如果已开启多门店默认展示、则先展示加载
|
||||
goods_bottom_opt_nav_status: app.globalData.get_config('plugins_base.realstore', null) == null,
|
||||
// 更多导航
|
||||
nav_more_status: false,
|
||||
nav_more_timer: null,
|
||||
|
|
@ -897,6 +904,7 @@
|
|||
var plugins_seckill_data = data.plugins_seckill_data || null;
|
||||
var upd_data = {
|
||||
data_loading_status: 1,
|
||||
goods_bottom_opt_nav_status: true,
|
||||
guess_you_like: data.guess_you_like || [],
|
||||
nav_more_list: data.nav_more_list || [],
|
||||
buy_button: data.buy_button || null,
|
||||
|
|
@ -935,7 +943,8 @@
|
|||
// 当前门店信息
|
||||
if((this.plugins_realstore_data.info || null) != null) {
|
||||
this.setData({
|
||||
plugins_realstore_cart_nav_status: true
|
||||
plugins_realstore_cart_nav_status: true,
|
||||
goods_bottom_opt_nav_status: false,
|
||||
});
|
||||
this.$refs.realstore_cart.init({...{source: 'goods', base: this.plugins_realstore_data.base, info: this.plugins_realstore_data.info, realstore_goods_data: {...{buy_button: this.buy_button}, ...this.goods}}, ...this.params});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue