|
@@ -11,48 +11,84 @@
|
|
|
<view class="mp-height"></view>
|
|
<view class="mp-height"></view>
|
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
|
<!-- 头部轮播 -->
|
|
<!-- 头部轮播 -->
|
|
|
- <view class="carousel-section">
|
|
|
|
|
|
|
+ <!-- <view class="headerInput" >
|
|
|
|
|
+ <input type="text" placeholder="请输入搜索内容"/>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="carousel-section" style="background-color: #fff;">
|
|
|
|
|
+ <view class="headerInput">
|
|
|
|
|
+ <input type="text" value="" placeholder="请输入搜索内容" />
|
|
|
|
|
+ </view>
|
|
|
<!-- 标题栏和状态栏占位符 -->
|
|
<!-- 标题栏和状态栏占位符 -->
|
|
|
<view class="titleNview-placing"></view>
|
|
<view class="titleNview-placing"></view>
|
|
|
<!-- 背景色区域 -->
|
|
<!-- 背景色区域 -->
|
|
|
- <view class="titleNview-background" :style="{ backgroundColor: '#5DBC7C' }"></view>
|
|
|
|
|
|
|
+ <view class="titleNview-background">
|
|
|
|
|
+ <image src="../../static/img/index-bg.png"></image>
|
|
|
|
|
+ </view>
|
|
|
<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
|
|
|
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
|
|
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
|
|
|
</swiper>
|
|
</swiper>
|
|
|
<!-- 自定义swiper指示器 -->
|
|
<!-- 自定义swiper指示器 -->
|
|
|
- <view class="swiper-dots">
|
|
|
|
|
|
|
+ <!-- <view class="swiper-dots">
|
|
|
<text class="num">{{ swiperCurrent + 1 }}</text>
|
|
<text class="num">{{ swiperCurrent + 1 }}</text>
|
|
|
<text class="sign">/</text>
|
|
<text class="sign">/</text>
|
|
|
<text class="num">{{ swiperLength }}</text>
|
|
<text class="num">{{ swiperLength }}</text>
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view> -->
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 分类 -->
|
|
<!-- 分类 -->
|
|
|
<view class="cate-section">
|
|
<view class="cate-section">
|
|
|
<view class="cate-item">
|
|
<view class="cate-item">
|
|
|
- <image src="/static/icon/c3.png"></image>
|
|
|
|
|
- <text>联盟礼包</text>
|
|
|
|
|
|
|
+ <image src="/static/icon/in1.png"></image>
|
|
|
|
|
+ <text>全部分类</text>
|
|
|
</view>
|
|
</view>
|
|
|
<navigator url="/pages/product/groupBooking/index">
|
|
<navigator url="/pages/product/groupBooking/index">
|
|
|
<view class="cate-item">
|
|
<view class="cate-item">
|
|
|
- <image src="/static/icon/c5.png"></image>
|
|
|
|
|
- <text>超值拼团</text>
|
|
|
|
|
|
|
+ <image src="/static/icon/in2.png"></image>
|
|
|
|
|
+ <text>热销专区</text>
|
|
|
</view>
|
|
</view>
|
|
|
</navigator>
|
|
</navigator>
|
|
|
<navigator url="/pages/product/seckill">
|
|
<navigator url="/pages/product/seckill">
|
|
|
<view class="cate-item">
|
|
<view class="cate-item">
|
|
|
- <image src="/static/icon/c7.png"></image>
|
|
|
|
|
- <text>限时秒杀</text>
|
|
|
|
|
|
|
+ <image src="/static/icon/in3.png"></image>
|
|
|
|
|
+ <text>充值送积分</text>
|
|
|
</view>
|
|
</view>
|
|
|
</navigator>
|
|
</navigator>
|
|
|
<navigator url="/pages/index/sign">
|
|
<navigator url="/pages/index/sign">
|
|
|
<view class="cate-item">
|
|
<view class="cate-item">
|
|
|
- <image src="/static/icon/c8.png"></image>
|
|
|
|
|
- <text>每日签到</text>
|
|
|
|
|
|
|
+ <image src="/static/icon/in4.png"></image>
|
|
|
|
|
+ <text>邀请有礼</text>
|
|
|
</view>
|
|
</view>
|
|
|
</navigator>
|
|
</navigator>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
|
|
|
|
|
|
|
+ <!-- 精选好物 -->
|
|
|
|
|
+ <view class="goods">
|
|
|
|
|
+ <hot-goods></hot-goods>
|
|
|
|
|
+ <!-- <view class="goods-top">
|
|
|
|
|
+ <image src="../../static/icon/jxgoods.png" mode=""></image>
|
|
|
|
|
+ <text>精选好物</text><text>买多赚多</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="goods-list">
|
|
|
|
|
+ <view class="goods-list-top">
|
|
|
|
|
+ <view class="goods-list-title">
|
|
|
|
|
+ <text>精选好货 平台推荐</text><br>
|
|
|
|
|
+ <text>买到就是赚到</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="goods-list-more">
|
|
|
|
|
+ <image src="../../static/icon/more.png"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="list">
|
|
|
|
|
+ <view class="list-g">
|
|
|
|
|
+ <scroll-view class="scroll-x" :scroll-x="true">
|
|
|
|
|
+ <view>A</view>
|
|
|
|
|
+ <view>B</view>
|
|
|
|
|
+ <view>C</view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view> -->
|
|
|
<!-- 可领取优惠券 -->
|
|
<!-- 可领取优惠券 -->
|
|
|
<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
|
|
<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
|
|
|
<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
|
|
<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
|
|
@@ -80,30 +116,30 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </scroll-view> -->
|
|
|
|
|
-
|
|
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ -->
|
|
|
<!-- 秒杀楼层 -->
|
|
<!-- 秒杀楼层 -->
|
|
|
- <seckill></seckill>
|
|
|
|
|
|
|
+ <!-- <seckill></seckill> -->
|
|
|
<!-- 砍价 -->
|
|
<!-- 砍价 -->
|
|
|
- <view class="hot-goods">
|
|
|
|
|
- <view class="hot-headers flex-upDown-center">
|
|
|
|
|
|
|
+ <!-- <view class="hot-goods"> -->
|
|
|
|
|
+ <!-- <view class="hot-headers flex-upDown-center"> -->
|
|
|
<!-- <image class="img" src="../../static/img/img44.png"></image> -->
|
|
<!-- <image class="img" src="../../static/img/img44.png"></image> -->
|
|
|
- <view class="hot-title">超值砍价</view>
|
|
|
|
|
|
|
+ <!-- <view class="hot-title">超值砍价</view>
|
|
|
<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
|
|
<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
|
|
|
- </view>
|
|
|
|
|
- <view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
|
|
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <!-- <view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
|
|
|
<view class="hot-produce">
|
|
<view class="hot-produce">
|
|
|
<view class="produce-image"><image :src="baritem.image"></image></view>
|
|
<view class="produce-image"><image :src="baritem.image"></image></view>
|
|
|
<view class="produce-content">
|
|
<view class="produce-content">
|
|
|
<view class="produce-price1 ">
|
|
<view class="produce-price1 ">
|
|
|
<view class="produce-name line2">{{ baritem.title }}</view>
|
|
<view class="produce-name line2">{{ baritem.title }}</view>
|
|
|
- <!-- <view class="produce-info">
|
|
|
|
|
|
|
+ <view class="produce-info">
|
|
|
已抢
|
|
已抢
|
|
|
<text style="color: #FF383E">{{ baritem.sales }}</text>
|
|
<text style="color: #FF383E">{{ baritem.sales }}</text>
|
|
|
箱/仅剩
|
|
箱/仅剩
|
|
|
<text style="color:#FF383E">{{ baritem.stock }}</text>
|
|
<text style="color:#FF383E">{{ baritem.stock }}</text>
|
|
|
箱
|
|
箱
|
|
|
- </view> -->
|
|
|
|
|
|
|
+ </view>
|
|
|
<view class="produce-center">
|
|
<view class="produce-center">
|
|
|
<view class="kanjia_word">
|
|
<view class="kanjia_word">
|
|
|
<view class="word-1">原价:¥{{ baritem.price }}</view>
|
|
<view class="word-1">原价:¥{{ baritem.price }}</view>
|
|
@@ -122,9 +158,9 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <!-- </view> -->
|
|
|
|
|
+ <!-- </view> -->
|
|
|
<!-- 拼团楼层 -->
|
|
<!-- 拼团楼层 -->
|
|
|
|
|
|
|
|
<view class="recommend flex">
|
|
<view class="recommend flex">
|
|
@@ -180,7 +216,7 @@
|
|
|
<view class="guess-section">
|
|
<view class="guess-section">
|
|
|
<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
|
|
|
<navigator :url="item.link">
|
|
<navigator :url="item.link">
|
|
|
- <view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
|
|
|
|
+ <view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
|
|
|
<text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
<text class="title clamp margin-c-20">{{ item.store_name }}</text>
|
|
|
<view class="cmy-hr"></view>
|
|
<view class="cmy-hr"></view>
|
|
|
<view class="price margin-c-20 flex">
|
|
<view class="price margin-c-20 flex">
|
|
@@ -329,6 +365,7 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import seckill from '../../components/seckill/seckill.vue';
|
|
import seckill from '../../components/seckill/seckill.vue';
|
|
|
|
|
+import hotGoods from './child/hotGoods.vue';
|
|
|
import { loadIndexs } from '@/api/index.js';
|
|
import { loadIndexs } from '@/api/index.js';
|
|
|
import { getUserInfo } from '@/api/user.js';
|
|
import { getUserInfo } from '@/api/user.js';
|
|
|
import { setCoupons } from '@/api/functionalUnit.js';
|
|
import { setCoupons } from '@/api/functionalUnit.js';
|
|
@@ -338,7 +375,8 @@ import { mapState } from 'vuex';
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
components: {
|
|
components: {
|
|
|
- seckill
|
|
|
|
|
|
|
+ seckill,
|
|
|
|
|
+ hotGoods
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
//自适应swiper高度
|
|
//自适应swiper高度
|
|
@@ -655,6 +693,24 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
|
|
+ //搜索栏
|
|
|
|
|
+ .headerInput {
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ background-color: rgba(255,255,255,0.8);
|
|
|
|
|
+ border-radius: 25rpx;
|
|
|
|
|
+ padding: 5rpx 28rpx;
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ top: 30px;
|
|
|
|
|
+ left: 5%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ //精选好物
|
|
|
|
|
+ .goods {
|
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ padding: 40rpx 5%;
|
|
|
|
|
+ }
|
|
|
.Mask {
|
|
.Mask {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
@@ -874,8 +930,12 @@ page {
|
|
|
top: 0;
|
|
top: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 426rpx;
|
|
|
|
|
- transition: 0.4s;
|
|
|
|
|
|
|
+ image {
|
|
|
|
|
+ // imsisize: 100%;
|
|
|
|
|
+ // height: 100%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ margin-top: -100rpx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.carousel {
|
|
.carousel {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -925,6 +985,7 @@ page {
|
|
|
}
|
|
}
|
|
|
/* 分类 */
|
|
/* 分类 */
|
|
|
.cate-section {
|
|
.cate-section {
|
|
|
|
|
+ background-color: #fff;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -934,16 +995,14 @@ page {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
|
|
- color: $font-color-dark;
|
|
|
|
|
|
|
+ font-size: 12rpx;
|
|
|
|
|
+ color: #333333;
|
|
|
}
|
|
}
|
|
|
/* 原图标颜色太深,不想改图了,所以加了透明度 */
|
|
/* 原图标颜色太深,不想改图了,所以加了透明度 */
|
|
|
image {
|
|
image {
|
|
|
- width: 88rpx;
|
|
|
|
|
- height: 88rpx;
|
|
|
|
|
- margin-bottom: 14rpx;
|
|
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 120rpx;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- opacity: 0.7;
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
// 中间广告图片
|
|
// 中间广告图片
|