1567 lines
44 KiB
Vue
1567 lines
44 KiB
Vue
<template>
|
|
<view>
|
|
<view class="container" :class="[themeConfigData.layout]">
|
|
<status-bar-height></status-bar-height>
|
|
<view class="page-bg2" v-if="themeConfigData.layout == 'layout3'">
|
|
<image class="img" :src="themeConfigData.layoutData.search.backgroundImage" mode="widthFix"></image>
|
|
<view class="page-tab">
|
|
<view class="item active">
|
|
<text class="t">首页</text>
|
|
</view>
|
|
<navigator class="item" open-type="switchTab" hover-class="none" url="/pages/goods-category/goods-category">
|
|
<text class="t">新品</text>
|
|
</navigator>
|
|
</view>
|
|
<!-- 搜索栏2 -->
|
|
<view class="search-wrap2">
|
|
<navigator class="search-content" hover-class="none" url="/pages/goods-search/goods-search">
|
|
<uni-icons type="scan" size="24" color="#E75A63"></uni-icons>
|
|
<view class="ipt">请输入商品名称</view>
|
|
<uni-icons type="camera" size="30" color="#999"></uni-icons>
|
|
<view class="btn">
|
|
<view class="line"></view>
|
|
<text class="t">搜索</text>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<view class="page-bg" v-else>
|
|
<image class="img" :src="themeConfigData.layoutData ? themeConfigData.layoutData.search.backgroundImage : ''" mode="widthFix"></image>
|
|
</view>
|
|
<view class="layout3-category" v-if="themeConfigData.layout == 'layout3'">
|
|
<scroll-view class="category-list" :class="[themeConfigData.layout]" scroll-x :scrollLeft="scrollLeft">
|
|
<view class="item tab-item" :class="{ active: currentTab == 0 }" @click="handleTabClick(0)">
|
|
<view class="t-wrap">
|
|
<view class="dot" :style="{ background: themeConfigData.themeColor }"></view>
|
|
<view class="t">推荐</view>
|
|
</view>
|
|
</view>
|
|
<view class="item tab-item" :class="{ active: currentTab == index + 1 }" v-for="(item, index) in category_list" :key="item.id" @click="handleTabClick(index + 1)">
|
|
<view class="t-wrap">
|
|
<view class="dot" :style="{ background: themeConfigData.themeColor }"></view>
|
|
<view class="t">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<navigator class="cate" open-type="switchTab" hover-class="none" url="/pages/goods-category/goods-category">
|
|
<uni-icons type="bars" color="#555" size="18"></uni-icons>
|
|
<text class="t">分类</text>
|
|
</navigator>
|
|
</view>
|
|
<template v-if="themeConfigData.layout != 'layout3'">
|
|
<view class="logo">
|
|
<image class="img" :src="application_logo" mode="aspectFit"></image>
|
|
</view>
|
|
<!-- 搜索栏1 -->
|
|
<view class="search-wrap">
|
|
<navigator class="search-content" hover-class="none" url="/pages/goods-search/goods-search">
|
|
<view class="ipt">请输入商品名称</view>
|
|
<view class="btn">
|
|
<uni-icons type="search" size="22" color="#fff"></uni-icons>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</template>
|
|
<!-- 轮播图 -->
|
|
<view v-if="banner_list.length && themeConfigData.layoutData.carousel.visible">
|
|
<component-banner :propData="banner_list" @changeBanner="change_banner"></component-banner>
|
|
</view>
|
|
<!-- <view v-if="banner_list.length > 0 && themeConfigData.layoutData && themeConfigData.layoutData.carousel.visible">
|
|
<component-banner :propData="banner_list" @changeBanner="change_banner"></component-banner>
|
|
</view> -->
|
|
<!-- 金刚区 -->
|
|
<view class="menus-wrap" v-if="themeConfigData.layout != 'layout3'">
|
|
<view class="item" v-for="item in navigation.slice(0, 10)" :key="item.id" :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event">
|
|
<view class="icon">
|
|
<image class="img" :src="item.images_url" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="t">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 推荐区1 -->
|
|
<view class="recommed-wrap" v-if="themeConfigData.layout == 'layout2' && themeConfigData.layoutData.jingang.visible">
|
|
<view class="left-icon">
|
|
<image class="img" :src="themeConfigData.layoutData && themeConfigData.layoutData.jingang.backgroundImage" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="goods-wrap">
|
|
<scroll-view class="scroll-view" scroll-x>
|
|
<view class="item" v-for="(item, index) in recommd_goods_list" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
|
|
<view class="cover">
|
|
<image class="img" :src="item.images" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="name">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- 推荐区2 -->
|
|
<view class="recommed2-wrap" v-if="themeConfigData.layoutData.newGoods.visible" :style="{ background: `linear-gradient(${themeConfigData.layoutData.newGoods.bgColorDeg}deg, ${themeConfigData.layoutData.newGoods.bgColor} 0%, ${themeConfigData.layoutData.newGoods.bgColor1} 100%)` }">
|
|
<view class="top">
|
|
<text class="title">#新品上架#</text>
|
|
<navigator class="more" open-type="switchTab" url="/pages/goods-category/goods-category" :style="{ 'background-color': themeConfigData.themeColor }">
|
|
<text class="t">更多好物</text>
|
|
<uni-icons type="right" color="#333" size="12"></uni-icons>
|
|
</navigator>
|
|
</view>
|
|
<view class="goods-wrap">
|
|
<view class="item" v-for="(item, index) in news_goods_list" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
|
|
<view class="icon">
|
|
<image class="img" :src="item.images" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="name">{{ item.title }}</view>
|
|
<view class="price-wrap">
|
|
<text class="p">￥{{ item.min_price }}</text>
|
|
<text class="o">￥{{ item.original_price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 推荐区3 -->
|
|
<view class="recommed3-wrap" v-if="themeConfigData.layout == 'layout1' && themeConfigData.layoutData.jingang.visible">
|
|
<view class="left" v-if="recommd_goods_list.length">
|
|
<image class="bg" :src="themeConfigData.layoutData.jingang.block1.backgroundImage" mode="aspectFill"></image>
|
|
<view class="top1">
|
|
<image class="img" :src="recommd_goods_list[0].images" mode="aspectFill" :data-value="recommd_goods_list[0].goods_url" @tap="goods_event"></image>
|
|
<view class="tag">TOP 1</view>
|
|
</view>
|
|
<view class="goods-wrap">
|
|
<view class="item" v-for="item in recommd_goods_list.slice(1, 4)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" :src="item.images" mode="aspectFill"></image>
|
|
<text class="t">￥{{ item.min_price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" v-if="news_goods_list.length">
|
|
<view class="item" :data-value="news_goods_list[0].goods_url" @tap="goods_event">
|
|
<image class="bg" :src="themeConfigData.layoutData.jingang.block2.backgroundImage" mode=""></image>
|
|
<image class="img" :src="news_goods_list[0].images" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="item" :data-value="news_goods_list[1].goods_url" @tap="goods_event">
|
|
<image class="bg" :src="themeConfigData.layoutData.jingang.block3.backgroundImage" mode=""></image>
|
|
<image class="img" :src="news_goods_list[1].images" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 推荐区4 -->
|
|
<view class="recommed4-wrap" v-if="themeConfigData.layout == 'layout3'">
|
|
<view class="col">
|
|
<view class="col-item">
|
|
<view class="title">
|
|
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block1.title }}</text>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block1.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" :src="item.images"></image>
|
|
<view class="t">
|
|
<view class="price">￥{{ item.min_price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="col-item">
|
|
<view class="title">
|
|
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block2.title }}</text>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block2.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" :src="item.images"></image>
|
|
<view class="name">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="t">
|
|
<view class="price">￥{{ item.min_price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="col-item">
|
|
<view class="title">
|
|
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block3.title }}</text>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block3.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" :src="item.images"></image>
|
|
<view class="name">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="t">
|
|
<view class="price">￥{{ item.min_price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="col">
|
|
<view class="col-item">
|
|
<view class="title">
|
|
<view class="left">
|
|
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block4.title }}</text>
|
|
<view class="tag">
|
|
<view class="tag-bg"></view>
|
|
<text class="tag-t">好物推荐</text>
|
|
</view>
|
|
</view>
|
|
<view class="title-goods">
|
|
<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(0, 2)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" :src="item.images" mode="aspectFill"></image>
|
|
<text class="name">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(2, 5)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" style="height: 100upx; border-radius: 8upx" :src="item.images" mode="aspectFill"></image>
|
|
<text class="name" style="width: 100upx">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="col-item">
|
|
<view class="title">
|
|
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block5.title }}</text>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item" v-for="(item, index) in themeConfigData.layoutData.recommandGoods.block5.data" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
|
|
<image class="img" :src="item.images" mode="aspectFill"></image>
|
|
<view class="name">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="t">
|
|
<view class="price"> ￥{{ item.min_price }} </view>
|
|
<view class="old"> ￥{{ item.original_price }} </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品列表 -->
|
|
<view class="goods-list">
|
|
<scroll-view class="category-list" scroll-x :scrollLeft="scrollLeft" v-if="themeConfigData.layout != 'layout3'">
|
|
<view class="item tab-item" :class="{ active: currentTab == 0 }" @click="handleTabClick(0)">
|
|
<view class="t-wrap">
|
|
<view class="line" :style="{ background: themeConfigData.themeColor }"></view>
|
|
<view class="t">为你推荐</view>
|
|
</view>
|
|
</view>
|
|
<view class="item tab-item" :class="{ active: currentTab == index + 1 }" v-for="(item, index) in category_list" :key="item.id" @click="handleTabClick(index + 1)">
|
|
<view class="t-wrap">
|
|
<view class="line" :style="{ background: themeConfigData.themeColor }"></view>
|
|
<view class="t">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in goods_list" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
|
|
<view class="icon">
|
|
<image class="img" :src="item.images" mode="widthFix"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="name">{{ item.title }}</view>
|
|
<view class="tag-list">
|
|
<view class="tag">新品</view>
|
|
</view>
|
|
<view class="price-wrap">
|
|
<text class="p">￥{{ item.min_price }}</text>
|
|
<text class="o">￥{{ item.original_price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 提示信息 -->
|
|
<!-- <block v-if="load_status == 0">
|
|
<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg" propPage="home" :propIsHeader="true"></component-no-data>
|
|
</block> -->
|
|
<view class="loading-wrap" v-if="theme_loading">
|
|
<view class="loading">
|
|
<image class="logo" :src="application_logo_square" mode="aspectFill"></image>
|
|
<text class="t">拼命加载中...</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 页面已加载、模式 -->
|
|
<block v-if="load_status == 1 && data_mode != 3">
|
|
<!-- 结尾 -->
|
|
<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
|
|
|
|
<!-- 版权信息 -->
|
|
<component-copyright></component-copyright>
|
|
|
|
<!-- 在线客服 -->
|
|
<component-online-service :propIsNav="true" :propIsBar="true" :propIsGrayscale="plugins_mourning_data_is_app"></component-online-service>
|
|
|
|
<!-- 快捷导航 -->
|
|
<component-quick-nav :propIsNav="true" :propIsBar="true" :propIsGrayscale="plugins_mourning_data_is_app"></component-quick-nav>
|
|
|
|
<!-- 公共 -->
|
|
<component-common ref="common" :propIsGrayscale="plugins_mourning_data_is_app"></component-common>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
const app = getApp();
|
|
import componentCommon from '@/components/common/common';
|
|
import componentSearch from '@/components/search/search';
|
|
import componentQuickNav from '@/components/quick-nav/quick-nav';
|
|
import componentIconNav from '@/components/icon-nav/icon-nav';
|
|
import componentBanner from '@/components/slider/slider';
|
|
import componentCountdown from '@/components/countdown/countdown';
|
|
import componentLayout from '@/components/layout/layout';
|
|
import componentBadge from '@/components/badge/badge';
|
|
import componentNoData from '@/components/no-data/no-data';
|
|
import componentBottomLine from '@/components/bottom-line/bottom-line';
|
|
import componentCopyright from '@/components/copyright/copyright';
|
|
import componentOnlineService from '@/components/online-service/online-service';
|
|
import componentActivityList from '@/components/activity-list/activity-list';
|
|
import componentBlogList from '@/components/blog-list/blog-list';
|
|
import componentRealstoreList from '@/components/realstore-list/realstore-list';
|
|
import componentShopList from '@/components/shop-list/shop-list';
|
|
import componentGoodsList from '@/components/goods-list/goods-list';
|
|
import componentBindingList from '@/components/binding-list/binding-list';
|
|
import componentMagicList from '@/components/magic-list/magic-list';
|
|
import componentDiy from '@/components/diy/diy';
|
|
import componentChoiceLocation from '@/components/choice-location/choice-location';
|
|
|
|
// 状态栏高度
|
|
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0, true));
|
|
// #ifdef MP-TOUTIAO
|
|
bar_height = 0;
|
|
// #endif
|
|
export default {
|
|
data() {
|
|
return {
|
|
theme_view: '',
|
|
theme_color: '',
|
|
common_static_url: '',
|
|
seckill_static_url: '',
|
|
static_url: '',
|
|
data_list_loding_status: 1,
|
|
data_list_loding_msg: '',
|
|
data_bottom_line_status: false,
|
|
load_status: 0,
|
|
currency_symbol: app.globalData.currency_symbol(),
|
|
is_home_search_scan: app.globalData.data.is_home_search_scan,
|
|
data_list: [],
|
|
banner_list: [],
|
|
navigation: [],
|
|
article_list: [],
|
|
cart_total: 0,
|
|
message_total: 0,
|
|
category_list: [],
|
|
currentTab: 0,
|
|
scrollLeft: 0,
|
|
tabWidths: [],
|
|
right_icon_list: [],
|
|
recommd_goods_list: [],
|
|
news_goods_list: [],
|
|
goods_list: [],
|
|
// 首页数据模式
|
|
data_mode: 0,
|
|
// 增加随机数，避免无法监听数据列表内部数据更新
|
|
random_value: 0,
|
|
// 基础配置
|
|
common_shop_notice: null,
|
|
common_app_is_enable_search: 0,
|
|
common_app_is_header_nav_fixed: 0,
|
|
common_app_is_online_service: 0,
|
|
// 顶部导航、名称、logo、定位
|
|
application_title: app.globalData.data.application_title,
|
|
application_logo: app.globalData.data.application_logo,
|
|
application_logo_square: app.globalData.get_application_logo_square(),
|
|
is_home_logo_use_text: app.globalData.data.is_home_logo_use_text,
|
|
is_home_location_choice: app.globalData.data.is_home_location_choice,
|
|
// 顶部+搜索样式配置
|
|
top_content_bg_color: '',
|
|
top_content_search_bg_color: '',
|
|
top_content_search_content_style: '',
|
|
// #ifdef MP
|
|
top_content_style: 'padding-top:' + (bar_height + 10) + 'px;',
|
|
// #endif
|
|
// #ifdef H5 || MP-TOUTIAO
|
|
top_content_style: 'padding-top:' + (bar_height + 14) + 'px;',
|
|
// #endif
|
|
// #ifdef APP
|
|
top_content_style: 'padding-top:' + bar_height + 'px;',
|
|
// #endif
|
|
// 是否单页预览
|
|
is_single_page: app.globalData.is_current_single_page() || 0,
|
|
// 轮播滚动时，背景色替换
|
|
slider_bg: null,
|
|
// 插件顺序列表
|
|
plugins_sort_list: [],
|
|
// 限时秒杀插件
|
|
plugins_seckill_data: null,
|
|
// 购买记录插件
|
|
plugins_salerecords_data: null,
|
|
// 活动配置插件
|
|
plugins_activity_data: null,
|
|
// 标签插件
|
|
plugins_label_data: null,
|
|
// 首页中间广告插件
|
|
plugins_homemiddleadv_data: null,
|
|
// 哀悼灰度插件
|
|
plugins_mourning_data_is_app: app.globalData.is_app_mourning(),
|
|
// 标签插件
|
|
plugins_blog_data: null,
|
|
// 门店插件
|
|
plugins_realstore_data: null,
|
|
// 多商户插件
|
|
plugins_shop_data: null,
|
|
// 组合搭配插件
|
|
plugins_binding_data: null,
|
|
// 魔方插件
|
|
plugins_magic_data: null,
|
|
themeConfigData: {
|
|
layout: '',
|
|
themeColor: '',
|
|
layoutData: {
|
|
carousel: '',
|
|
categories: '',
|
|
jingang: '',
|
|
newGoods: '',
|
|
products: '',
|
|
search: '',
|
|
recommandGoods: {
|
|
block1: '',
|
|
block2: '',
|
|
block3: '',
|
|
block4: '',
|
|
block5: '',
|
|
},
|
|
},
|
|
},
|
|
theme_loading: true,
|
|
};
|
|
},
|
|
|
|
components: {
|
|
componentCommon,
|
|
componentSearch,
|
|
componentQuickNav,
|
|
componentIconNav,
|
|
componentBanner,
|
|
componentCountdown,
|
|
componentLayout,
|
|
componentBadge,
|
|
componentNoData,
|
|
componentBottomLine,
|
|
componentCopyright,
|
|
componentOnlineService,
|
|
componentActivityList,
|
|
componentBlogList,
|
|
componentRealstoreList,
|
|
componentShopList,
|
|
componentGoodsList,
|
|
componentBindingList,
|
|
componentMagicList,
|
|
componentDiy,
|
|
componentChoiceLocation,
|
|
},
|
|
|
|
onLoad(params) {
|
|
// 调用公共事件方法
|
|
app.globalData.page_event_onload_handle(params);
|
|
|
|
this.getThemeConfig();
|
|
},
|
|
|
|
onShow() {
|
|
// 调用公共事件方法
|
|
app.globalData.page_event_onshow_handle();
|
|
|
|
// 数据加载
|
|
this.init();
|
|
|
|
// 初始化配置
|
|
this.init_config();
|
|
|
|
// 公共onshow事件
|
|
if ((this.$refs.common || null) != null) {
|
|
this.$refs.common.on_show({ object: this, method: 'init' });
|
|
}
|
|
|
|
// 设置顶部导航的默认颜色
|
|
this.set_navigation_bar_color();
|
|
},
|
|
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
if (this.data_list_loding_status === 1) {
|
|
uni.stopPullDownRefresh();
|
|
} else {
|
|
this.init();
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取首页主题配置
|
|
getThemeConfig() {
|
|
this.theme_loading = true;
|
|
uni.request({
|
|
url: app.globalData.get_request_url('pageConfigCurrent', 'common'),
|
|
method: 'GET',
|
|
success: (res) => {
|
|
console.log('getThemeConfig===', JSON.parse(res.data.data.json_data));
|
|
if (res.data.code == 0) {
|
|
this.themeConfigData = JSON.parse(res.data.data.json_data);
|
|
} else {
|
|
console.log('主题获取失败===', res.data.msg);
|
|
}
|
|
},
|
|
complete: () => {
|
|
setTimeout(() => {
|
|
this.theme_loading = false;
|
|
}, 1500);
|
|
},
|
|
});
|
|
},
|
|
// 商品事件
|
|
goods_event(e) {
|
|
console.log('goods_event===', e);
|
|
// 商品数据缓存处理
|
|
// var goods = this.goods_list[e.currentTarget.dataset.index];
|
|
// app.globalData.goods_data_cache_handle(goods.id, goods);
|
|
|
|
// 调用公共打开url地址
|
|
app.globalData.url_event(e);
|
|
},
|
|
// 金刚区导航
|
|
navigation_event(e) {
|
|
app.globalData.operation_event(e);
|
|
},
|
|
// 根据分类获取商品列表
|
|
getCategoryGoods() {
|
|
uni.request({
|
|
url: app.globalData.get_request_url('index2', 'search'),
|
|
method: 'get',
|
|
data: {
|
|
category_id: this.currentTab == 0 ? '' : this.category_list[this.currentTab - 1].id,
|
|
},
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
console.log('根据分类获取商品列表===', res);
|
|
if (res.data.code == 0) {
|
|
var data = res.data.data;
|
|
var temp_category = data.data || [];
|
|
this.goods_list = temp_category;
|
|
} else {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
},
|
|
});
|
|
},
|
|
// 获取推荐/新品
|
|
getRecommedGoods() {
|
|
// 获取推荐
|
|
uni.request({
|
|
url: app.globalData.get_request_url('recommendList', 'search'),
|
|
method: 'POST',
|
|
data: {
|
|
type: 1,
|
|
},
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
console.log('获取推荐===', res);
|
|
if (res.data.code == 0) {
|
|
var data = res.data.data;
|
|
var temp_category = data.data || [];
|
|
this.recommd_goods_list = temp_category;
|
|
} else {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
},
|
|
});
|
|
|
|
// 获取新品
|
|
uni.request({
|
|
url: app.globalData.get_request_url('recommendList', 'search'),
|
|
method: 'POST',
|
|
data: {
|
|
type: 0,
|
|
},
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
console.log('获取新品===', res);
|
|
if (res.data.code == 0) {
|
|
var data = res.data.data;
|
|
var temp_category = data.data || [];
|
|
this.news_goods_list = temp_category.slice(0, 4);
|
|
|
|
console.log('this.news_goods_list===', this.news_goods_list);
|
|
} else {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
},
|
|
});
|
|
},
|
|
// 初始化配置
|
|
init_config(status) {
|
|
if ((status || false) == true) {
|
|
this.setData({
|
|
currency_symbol: app.globalData.get_config('currency_symbol'),
|
|
common_shop_notice: app.globalData.get_config('config.common_shop_notice'),
|
|
common_app_is_enable_search: app.globalData.get_config('config.common_app_is_enable_search'),
|
|
common_app_is_header_nav_fixed: app.globalData.get_config('config.common_app_is_header_nav_fixed'),
|
|
common_app_is_online_service: app.globalData.get_config('config.common_app_is_online_service'),
|
|
application_title: app.globalData.get_application_title(),
|
|
application_logo: app.globalData.get_application_logo(),
|
|
});
|
|
} else {
|
|
app.globalData.is_config(this, 'init_config');
|
|
}
|
|
},
|
|
// 初始化获取所有选项卡的宽度
|
|
initTabWidths() {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.selectAll('.tab-item')
|
|
.boundingClientRect((rects) => {
|
|
this.tabWidths = rects.map((rect) => rect.width);
|
|
})
|
|
.exec();
|
|
},
|
|
// 处理选项卡点击
|
|
handleTabClick(index) {
|
|
console.log(index);
|
|
this.currentTab = index;
|
|
|
|
// 计算需要滚动的距离使目标选项卡居中
|
|
let scrollLeft = 0;
|
|
for (let i = 0; i < index; i++) {
|
|
scrollLeft += this.tabWidths[i] || 0;
|
|
}
|
|
|
|
// 获取容器宽度和当前选项卡宽度
|
|
const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
|
|
const currentTabWidth = this.tabWidths[index] || 0;
|
|
|
|
// 计算居中偏移量
|
|
scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;
|
|
|
|
// 确保滚动距离不小于0
|
|
scrollLeft = Math.max(0, scrollLeft);
|
|
|
|
// 设置滚动位置
|
|
this.scrollLeft = scrollLeft;
|
|
|
|
console.log('this.scrollLeft===', this.scrollLeft);
|
|
|
|
this.getCategoryGoods();
|
|
},
|
|
// 获取分类
|
|
getCategory() {
|
|
uni.request({
|
|
url: app.globalData.get_request_url('category', 'goods'),
|
|
method: 'POST',
|
|
data: {},
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
console.log('获取分类===', res);
|
|
if (res.data.code == 0) {
|
|
var data = res.data.data;
|
|
var temp_category = data.category || [];
|
|
this.category_list = temp_category;
|
|
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
this.initTabWidths();
|
|
}, 1000);
|
|
});
|
|
} else {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
app.globalData.showToast(this.$t('common.internet_error_tips'));
|
|
},
|
|
});
|
|
},
|
|
// 获取数据
|
|
init(params = {}) {
|
|
// 还没有数据则读取缓存
|
|
var cache_key = app.globalData.data.cache_index_data_key;
|
|
if (this.load_status == 0) {
|
|
// 本地缓存数据
|
|
var upd_data = uni.getStorageSync(cache_key) || null;
|
|
if (upd_data != null) {
|
|
// 先使用缓存数据展示
|
|
this.setData(upd_data);
|
|
|
|
// 初始化返回公共处理
|
|
this.init_result_common_handle();
|
|
|
|
// 已有本地缓存则直接取远程有效数据（默认首次取的是远程缓存数据）
|
|
params['is_cache'] = 0;
|
|
|
|
// 设置顶部导航的默认颜色
|
|
this.set_navigation_bar_color();
|
|
}
|
|
} else {
|
|
// 已有本地缓存则直接取远程有效数据（默认首次取的是远程缓存数据）
|
|
params['is_cache'] = 0;
|
|
}
|
|
|
|
// 网络检查
|
|
if ((params || null) == null || (params.loading || 0) == 0) {
|
|
app.globalData.network_type_handle(this, 'init', params);
|
|
return false;
|
|
}
|
|
|
|
// 没有缓存数据则开启加载层
|
|
if (upd_data == null) {
|
|
this.setData({
|
|
data_list_loding_status: 1,
|
|
});
|
|
}
|
|
this.getCategoryGoods();
|
|
this.getRecommedGoods();
|
|
this.getCategory();
|
|
// 请求远程数据
|
|
uni.request({
|
|
url: app.globalData.get_request_url('index', 'index'),
|
|
method: 'POST',
|
|
data: params,
|
|
dataType: 'json',
|
|
success: (res) => {
|
|
uni.stopPullDownRefresh();
|
|
// 数据处理
|
|
var data = res.data.data;
|
|
if (res.data.code == 0) {
|
|
var data_list = data.data_list || null;
|
|
|
|
console.log('data_list===', data_list);
|
|
|
|
var upd_data = {
|
|
random_value: Math.random(),
|
|
data_bottom_line_status: true,
|
|
banner_list: data.banner_list || [],
|
|
navigation: data.navigation || [],
|
|
article_list: data.article_list || [],
|
|
data_mode: data.data_mode || 0,
|
|
data_list: data_list,
|
|
cart_total: data.cart_total.buy_number || 0,
|
|
message_total: parseInt(data.message_total || 0),
|
|
right_icon_list: data.right_icon_list || [],
|
|
data_list_loding_status: data_list == null || data_list.length == 0 ? 0 : 3,
|
|
plugins_sort_list: data.plugins_sort_list || [],
|
|
plugins_seckill_data: data.plugins_seckill_data || null,
|
|
plugins_salerecords_data: (data.plugins_salerecords_data || null) == null || data.plugins_salerecords_data.length <= 0 ? null : data.plugins_salerecords_data,
|
|
plugins_activity_data: (data.plugins_activity_data || null) == null || data.plugins_activity_data.length <= 0 ? null : data.plugins_activity_data,
|
|
plugins_label_data: (data.plugins_label_data || null) == null || (data.plugins_label_data.base || null) == null || (data.plugins_label_data.data || null) == null || data.plugins_label_data.data.length <= 0 ? null : data.plugins_label_data,
|
|
plugins_homemiddleadv_data: (data.plugins_homemiddleadv_data || null) == null || data.plugins_homemiddleadv_data.length <= 0 ? null : data.plugins_homemiddleadv_data,
|
|
plugins_mourning_data_is_app: parseInt(data.plugins_mourning_data || 0) == 1,
|
|
plugins_blog_data: data.plugins_blog_data || null,
|
|
plugins_realstore_data: data.plugins_realstore_data || null,
|
|
plugins_shop_data: data.plugins_shop_data || null,
|
|
plugins_binding_data: data.plugins_binding_data || null,
|
|
plugins_magic_data: data.plugins_magic_data || null,
|
|
};
|
|
// 如果开启了哀悼灰色则不固定导航
|
|
if (upd_data.plugins_mourning_data_is_app == 1) {
|
|
upd_data['common_app_is_header_nav_fixed'] = 0;
|
|
}
|
|
this.setData(upd_data);
|
|
|
|
// 存储缓存
|
|
uni.setStorageSync(cache_key, upd_data);
|
|
|
|
// 设置顶部导航的默认颜色
|
|
this.set_navigation_bar_color();
|
|
|
|
// 是否需要重新加载数据
|
|
if (parseInt(data.is_result_data_cache || 0) == 1) {
|
|
this.init({ is_cache: 0 });
|
|
} else {
|
|
// 购物车导航角标
|
|
app.globalData.set_tab_bar_badge('cart', this.cart_total);
|
|
}
|
|
} else {
|
|
this.setData({
|
|
data_list_loding_status: 0,
|
|
data_list_loding_msg: res.data.msg,
|
|
data_bottom_line_status: true,
|
|
});
|
|
}
|
|
|
|
// 初始化返回公共处理
|
|
this.init_result_common_handle();
|
|
},
|
|
fail: () => {
|
|
// 轮播数据处理
|
|
if (this.load_status == 0 || (this.top_content_search_bg_color || null) == null) {
|
|
this.change_banner(app.globalData.get_theme_color());
|
|
}
|
|
|
|
uni.stopPullDownRefresh();
|
|
this.setData({
|
|
data_list_loding_status: 2,
|
|
data_list_loding_msg: this.$t('common.internet_error_tips'),
|
|
data_bottom_line_status: true,
|
|
load_status: 1,
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
// 设置顶部导航的默认颜色
|
|
set_navigation_bar_color() {
|
|
if (this.data_mode == 3) {
|
|
app.globalData.set_navigation_bar_color(parseInt(app.globalData.get_key_data(this.data_list, 'config.header.com_data.style.function_buttons_type', 0)) == 1);
|
|
}
|
|
},
|
|
|
|
// 初始化返回公共处理
|
|
init_result_common_handle() {
|
|
var theme_view = app.globalData.get_theme_value_view();
|
|
var theme_color = app.globalData.get_theme_color();
|
|
var common_static_url = app.globalData.get_static_url('common');
|
|
var seckill_static_url = app.globalData.get_static_url('seckill', true) + 'app/';
|
|
var static_url = app.globalData.get_static_url('home');
|
|
|
|
// 轮播数据处理
|
|
if (this.load_status == 0 || (this.top_content_search_bg_color || null) == null) {
|
|
var color = this.banner_list && this.banner_list.length > 0 && (this.banner_list[0]['bg_color'] || null) != null ? this.banner_list[0]['bg_color'] : theme_color;
|
|
this.change_banner(color);
|
|
}
|
|
|
|
// 公共数据
|
|
this.setData({
|
|
top_content_search_content_style: 'background-image: url("' + static_url + 'nav-top.png");',
|
|
theme_view: theme_view,
|
|
theme_color: theme_color,
|
|
common_static_url: common_static_url,
|
|
seckill_static_url: seckill_static_url,
|
|
static_url: static_url,
|
|
load_status: 1,
|
|
});
|
|
|
|
// 分享菜单处理、延时执行，确保基础数据已加载完成
|
|
setTimeout(function () {
|
|
app.globalData.page_share_handle();
|
|
}, 3000);
|
|
},
|
|
|
|
// 选择用户地理位置回调
|
|
user_back_choice_location(e) {
|
|
// 重新刷新数据
|
|
this.init();
|
|
},
|
|
|
|
// url事件
|
|
url_event(e) {
|
|
app.globalData.url_event(e);
|
|
},
|
|
|
|
// 轮播改变、背景色处理
|
|
change_banner(color) {
|
|
if ((color || null) == null) {
|
|
color = this.theme_color;
|
|
}
|
|
this.setData({
|
|
top_content_bg_color: 'background: linear-gradient(180deg, ' + color + ' 0%, #f5f5f5 80%);',
|
|
top_content_search_bg_color: 'background: linear-gradient(180deg, ' + color + ' 0%, #f5f5f5 300%);',
|
|
});
|
|
},
|
|
|
|
// 搜索icon扫码事件
|
|
search_icon_event(e) {
|
|
app.globalData.scan_handle();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
@import './index.css';
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
&.layout3 {
|
|
padding-top: 174upx;
|
|
}
|
|
}
|
|
.layout3-category {
|
|
padding: 20upx 0;
|
|
display: flex;
|
|
.cate {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
.t {
|
|
color: #555;
|
|
}
|
|
}
|
|
}
|
|
.category-list {
|
|
white-space: nowrap;
|
|
width: calc(750upx - 56upx);
|
|
&.layout3 {
|
|
width: calc(750upx - 56upx - 80upx);
|
|
}
|
|
.item {
|
|
display: inline-block;
|
|
padding-right: 40upx;
|
|
&.active {
|
|
.t-wrap {
|
|
.t {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.line,
|
|
.dot {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.t-wrap {
|
|
padding: 20upx 0;
|
|
position: relative;
|
|
.t {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #555;
|
|
}
|
|
.dot {
|
|
display: none;
|
|
$size: 16upx;
|
|
width: $size;
|
|
height: $size;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 24upx;
|
|
}
|
|
.line {
|
|
display: none;
|
|
width: 60upx;
|
|
height: 8upx;
|
|
position: absolute;
|
|
bottom: 12upx;
|
|
left: 50%;
|
|
margin-left: -30upx;
|
|
z-index: 1;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.loading-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 30%;
|
|
.loading {
|
|
display: flex;
|
|
gap: 20upx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.logo {
|
|
$size: 120upx;
|
|
width: $size;
|
|
height: $size;
|
|
border-radius: 16upx;
|
|
animation: ani 1s ease-in-out infinite;
|
|
}
|
|
@keyframes ani {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.t {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.container {
|
|
padding: 20upx;
|
|
position: relative;
|
|
.page-bg {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
.img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
.page-bg2 {
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
.img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.page-tab {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
padding: 0 29upx;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
padding: 12upx 0;
|
|
margin-right: 50upx;
|
|
&.active {
|
|
&::after {
|
|
content: '';
|
|
width: 40upx;
|
|
height: 4upx;
|
|
border-radius: 4upx;
|
|
background: #fff;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -20upx;
|
|
}
|
|
.t {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
}
|
|
.t {
|
|
font-size: 42upx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-wrap2 {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 20upx;
|
|
box-sizing: border-box;
|
|
$color: #fb1622;
|
|
.search-content {
|
|
height: 60upx;
|
|
border: 1px solid $color;
|
|
border-radius: 12upx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6upx 8upx;
|
|
.ipt {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20upx;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
color: #999;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 120upx;
|
|
height: 100%;
|
|
position: relative;
|
|
margin-left: 20upx;
|
|
.line {
|
|
height: 30upx;
|
|
border-left: 1px solid #999;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -15upx;
|
|
left: 0;
|
|
}
|
|
.t {
|
|
color: $color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.logo {
|
|
position: relative;
|
|
.img {
|
|
width: 180upx;
|
|
height: 40upx;
|
|
}
|
|
}
|
|
.search-wrap {
|
|
position: relative;
|
|
padding: 20upx 0;
|
|
.search-content {
|
|
height: 70upx;
|
|
border: 1px solid #000;
|
|
border-radius: 80upx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
padding: 6upx 8upx;
|
|
.ipt {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20upx;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
color: #999;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 120upx;
|
|
height: 100%;
|
|
border-radius: 80upx;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
}
|
|
.menus-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-column-gap: 28upx;
|
|
grid-row-gap: 28upx;
|
|
position: relative;
|
|
padding: 28upx 0;
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
.img {
|
|
$size: 80upx;
|
|
width: $size;
|
|
height: $size;
|
|
}
|
|
}
|
|
.t {
|
|
color: #333;
|
|
font-size: 28upx;
|
|
}
|
|
}
|
|
}
|
|
.recommed-wrap {
|
|
$height: 292upx;
|
|
display: flex;
|
|
margin-bottom: 28upx;
|
|
.left-icon {
|
|
.img {
|
|
width: 204upx;
|
|
height: $height;
|
|
}
|
|
}
|
|
.goods-wrap {
|
|
flex: 1;
|
|
height: $height;
|
|
padding-left: 20upx;
|
|
.scroll-view {
|
|
white-space: nowrap;
|
|
width: calc(100vw - 284upx);
|
|
overflow-x: hidden;
|
|
.item {
|
|
$coverHeight: 240upx;
|
|
display: inline-block;
|
|
width: 204upx;
|
|
height: $height;
|
|
margin-right: 20upx;
|
|
background-color: #fff;
|
|
border-radius: 20upx;
|
|
overflow: hidden;
|
|
.cover {
|
|
width: 100%;
|
|
height: $coverHeight;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.name {
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
width: 204upx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recommed2-wrap {
|
|
padding: 20upx;
|
|
border-radius: 20upx;
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.title {
|
|
font-size: 28upx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
.more {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border-radius: 100px;
|
|
padding: 4upx 12upx;
|
|
.t {
|
|
color: #333;
|
|
font-size: 24upx;
|
|
}
|
|
}
|
|
}
|
|
.goods-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 10px;
|
|
padding-top: 20upx;
|
|
.item {
|
|
.icon {
|
|
.img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 180upx;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
.name {
|
|
width: 140upx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.price-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6upx;
|
|
.p {
|
|
color: #d1381e;
|
|
}
|
|
.o {
|
|
color: #999;
|
|
font-size: 20upx;
|
|
text-decoration: line-through;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recommed3-wrap {
|
|
display: flex;
|
|
gap: 20upx;
|
|
padding-top: 32upx;
|
|
.left {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding: 108upx 16upx 16upx;
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 12upx;
|
|
}
|
|
.top1 {
|
|
width: 100%;
|
|
height: 170upx;
|
|
position: relative;
|
|
border-radius: 12upx;
|
|
overflow: hidden;
|
|
.tag {
|
|
content: 'TOP 1';
|
|
padding: 4upx 12upx;
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 20upx;
|
|
color: #fff;
|
|
border-radius: 0 0 12upx 0;
|
|
background: linear-gradient(to right, #aedaf9, #d8bcff);
|
|
}
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.goods-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 8upx;
|
|
padding-top: 20upx;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.img {
|
|
width: 100%;
|
|
height: 130upx;
|
|
border-radius: 8upx;
|
|
}
|
|
.t {
|
|
font-size: 24upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20upx;
|
|
.item {
|
|
position: relative;
|
|
height: 228upx;
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.img {
|
|
width: 90%;
|
|
height: 108upx;
|
|
border-radius: 8upx;
|
|
position: absolute;
|
|
bottom: 16upx;
|
|
left: 5%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recommed4-wrap {
|
|
$gap: 12upx;
|
|
display: flex;
|
|
gap: $gap;
|
|
box-sizing: border-box;
|
|
.flex {
|
|
display: flex;
|
|
gap: $gap;
|
|
box-sizing: border-box;
|
|
.col-item {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap;
|
|
box-sizing: border-box;
|
|
.col-item {
|
|
background-color: #fff;
|
|
border-radius: $gap;
|
|
box-sizing: border-box;
|
|
.title {
|
|
display: flex;
|
|
padding-bottom: $gap;
|
|
box-sizing: border-box;
|
|
padding: $gap;
|
|
.left {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
.t {
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
}
|
|
.tag {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.tag-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 60%;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #ffd1d1;
|
|
border-radius: 40upx 4upx 4upx;
|
|
box-sizing: border-box;
|
|
}
|
|
.tag-t {
|
|
color: #ff3838;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
.title-goods {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: $gap;
|
|
margin-left: $gap;
|
|
box-sizing: border-box;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
.img {
|
|
width: 100%;
|
|
height: 100upx;
|
|
border-radius: 8upx;
|
|
box-sizing: border-box;
|
|
}
|
|
.name {
|
|
width: 60upx;
|
|
height: 40upx;
|
|
color: #999;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.items {
|
|
display: flex;
|
|
gap: $gap;
|
|
box-sizing: border-box;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
.img {
|
|
width: 100%;
|
|
height: 180upx;
|
|
box-sizing: border-box;
|
|
}
|
|
.name {
|
|
width: 140upx;
|
|
height: 40upx;
|
|
color: #999;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
box-sizing: border-box;
|
|
}
|
|
.t {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
.price {
|
|
color: #fb1622;
|
|
box-sizing: border-box;
|
|
}
|
|
.old {
|
|
color: #999;
|
|
font-size: 20upx;
|
|
text-decoration: line-through;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.goods-list {
|
|
padding: 20upx 0;
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-column-gap: 20upx;
|
|
grid-row-gap: 20upx;
|
|
.item {
|
|
background-color: #fff;
|
|
border-radius: 20upx;
|
|
overflow: hidden;
|
|
.icon {
|
|
.img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
.info {
|
|
padding: 20upx;
|
|
}
|
|
.name {
|
|
width: calc(750upx / 2 - 94upx);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-bottom: 6px;
|
|
}
|
|
.tag-list {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
.tag {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4upx 16upx;
|
|
border-radius: 12upx;
|
|
background-color: #d1381e;
|
|
color: #fff;
|
|
font-size: 24upx;
|
|
}
|
|
}
|
|
.price-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6upx;
|
|
.p {
|
|
color: #d1381e;
|
|
font-size: 36upx;
|
|
font-weight: bold;
|
|
}
|
|
.o {
|
|
color: #999;
|
|
font-size: 20upx;
|
|
text-decoration: line-through;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|