|
|
|
@ -1,10 +1,12 @@ |
|
|
|
<template> |
|
|
|
<view class="home"> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<view style="background-color: white;"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar :title="configList.logo_name"/> |
|
|
|
<image class="bg" src="@/static/image/home/bg.png"></image> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar title="首页" bgColor="transparent" color="#FFFFFF" /> |
|
|
|
|
|
|
|
<!-- 搜索栏 --> |
|
|
|
<view class="search"> |
|
|
|
<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @custom="search" @search="search" |
|
|
|
@ -13,89 +15,53 @@ |
|
|
|
|
|
|
|
<!-- 轮播图 --> |
|
|
|
<view class="swipe"> |
|
|
|
<uv-swiper :list="bannerList" indicator height="320rpx" keyName="image"></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 首页-分类菜单 --> |
|
|
|
<view class="home-menu"> |
|
|
|
<uv-grid :border="false" :col="5"> |
|
|
|
<uv-grid-item v-for="(item, index) in categoryList" |
|
|
|
:key="index" |
|
|
|
@click="$utils.navigateTo(`/pages/index/category?cid=${item.id}`)"> |
|
|
|
<image :src="item.image" mode="aspectFill"></image> |
|
|
|
<text class="menu-text">{{item.name}}</text> |
|
|
|
</uv-grid-item> |
|
|
|
</uv-grid> |
|
|
|
<uv-swiper :list="bannerList" indicator height="340rpx" keyName="image"></uv-swiper> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 新人专享 --> |
|
|
|
<view class="new-people"> |
|
|
|
<view class="new-perple-top"> |
|
|
|
<view class="new-perple-top-left"> |
|
|
|
<view class="title"> |
|
|
|
最新活动 |
|
|
|
</view> |
|
|
|
<!-- <view class="descript"> |
|
|
|
领199元大礼包 |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
<view class="new-perple-top-right" |
|
|
|
@click="$utils.navigateTo(`/pages_order/home/journalism`)"> |
|
|
|
<image :src="configList.index_model" mode="aspectFill"></image> |
|
|
|
|
|
|
|
<!-- 推荐 -> 会员 --> |
|
|
|
<!-- todo: jump to member page --> |
|
|
|
<view v-if="!role" class="card flex recommend-member" @click="$utils.navigateTo('/pages/index/category')" > |
|
|
|
<view class="flex" style="flex: 1;"> |
|
|
|
<image class="icon-member" style="" src="@/static/image/home/icon-member.png"></image> |
|
|
|
<text>会员享受专属折扣和优惠活动，会员下单更优惠！</text> |
|
|
|
</view> |
|
|
|
<image class="icon-arrow" src="@/static/image/home/icon-arrow.png"></image> |
|
|
|
</view> |
|
|
|
<view class="new-perple-main"> |
|
|
|
|
|
|
|
<!-- <view class="red-packet"> |
|
|
|
<image src="@/static/image/home/red-packet.png" mode="aspectFill"></image> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view v-for="(item, index) in adList" :key="item.id" |
|
|
|
@click="$utils.navigateTo(`/pages_order/home/newsDetail?id=${item.id}`)" |
|
|
|
class="activity"> |
|
|
|
<image :src="item.icon" mode="aspectFill"></image> |
|
|
|
<view class="title">{{ item.title }}</view> |
|
|
|
<!-- <view class="product-price"> |
|
|
|
￥100 |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<!-- 商品列表 --> |
|
|
|
<view class="recommend-product"> |
|
|
|
<view class="flex title"> |
|
|
|
<text>热销套餐</text> |
|
|
|
<image class="icon-hot" style="" src="@/static/image/home/icon-hot.png"></image> |
|
|
|
</view> |
|
|
|
<productCard v-for="item in list" :data="item" :key="item.id"></productCard> |
|
|
|
<!-- todo: delete --> |
|
|
|
<productCard></productCard> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 视频 --> |
|
|
|
<view v-if="configList.index_vo" class="video-line"> |
|
|
|
<view class="line"></view> |
|
|
|
视频 |
|
|
|
</view> |
|
|
|
<view v-if="configList.index_vo" class="video-item"> |
|
|
|
<video :src="configList.index_vo" object-fit="cover" @error="videoErrorCallback" :danmu-list="danmuList" |
|
|
|
controls class="product-video"></video> |
|
|
|
</view> |
|
|
|
<!-- 优惠券弹窗 --> |
|
|
|
<couponPopup v-if="true || riceInfo.isGetCoupon"></couponPopup> |
|
|
|
|
|
|
|
<!-- 推荐 --> |
|
|
|
<view class="recommend"> |
|
|
|
<view class="recommend-title">推荐宝贝</view> |
|
|
|
<view @click="$utils.navigateTo('/pages/index/category')" |
|
|
|
class="recommend-more">更多</view> |
|
|
|
</view> |
|
|
|
<!-- tabbar --> |
|
|
|
<tabber select="home" /> |
|
|
|
|
|
|
|
<!-- 商品列表 --> |
|
|
|
<view style="position: 20rpx;"> |
|
|
|
<productList :list="list" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 全局弹框 --> |
|
|
|
<PrivacyAgreementPoup /> |
|
|
|
<template v-if="false"> |
|
|
|
|
|
|
|
<!-- 联系客服 --> |
|
|
|
<customerServicePopup ref="customerServicePopup" /> |
|
|
|
<!-- 商品列表 --> |
|
|
|
<view style="position: 20rpx;"> |
|
|
|
<productList :list="list" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 全局弹框 --> |
|
|
|
<PrivacyAgreementPoup /> |
|
|
|
|
|
|
|
<!-- tabbar --> |
|
|
|
<tabber select="home" /> |
|
|
|
<!-- 联系客服 --> |
|
|
|
<customerServicePopup ref="customerServicePopup" /> |
|
|
|
|
|
|
|
<!-- 优惠券弹窗 --> |
|
|
|
<couponPopup v-if="riceInfo.isGetCoupon"></couponPopup> |
|
|
|
</template> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -110,11 +76,16 @@ |
|
|
|
} from 'vuex' |
|
|
|
import customerServicePopup from '@/components/config/customerServicePopup.vue' |
|
|
|
import productList from '@/components/user/productList.vue' |
|
|
|
|
|
|
|
import productCard from '@/components/product/productCard.vue' |
|
|
|
|
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
export default { |
|
|
|
mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
productCard, |
|
|
|
|
|
|
|
PrivacyAgreementPoup, |
|
|
|
customerServicePopup, |
|
|
|
productList, |
|
|
|
@ -122,8 +93,13 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
role: '', |
|
|
|
notice: '', |
|
|
|
bannerList: [], |
|
|
|
bannerList: [ |
|
|
|
{ |
|
|
|
image: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280', |
|
|
|
} |
|
|
|
], |
|
|
|
baseList: [], |
|
|
|
productList: [], |
|
|
|
keyword: '', |
|
|
|
@ -144,13 +120,8 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
// 临时改一下 |
|
|
|
if (!uni.getStorageSync('token')) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/auth/wxLogin' |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
return |
|
|
|
this.getBanner() |
|
|
|
this.getRiceNoticeList() |
|
|
|
this.getRiceIconList() |
|
|
|
@ -162,6 +133,7 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
onPullDownRefresh() { |
|
|
|
return |
|
|
|
this.getBanner() |
|
|
|
this.getRiceNoticeList() |
|
|
|
}, |
|
|
|
@ -267,31 +239,89 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.home { |
|
|
|
.page { |
|
|
|
width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
background-color: $uni-bg-color; |
|
|
|
|
|
|
|
// 搜索栏 |
|
|
|
.search { |
|
|
|
border: 1px solid #F0F0F0; |
|
|
|
margin: 20rpx; |
|
|
|
border-radius: 41rpx; |
|
|
|
padding: 10rpx 0rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.bg { |
|
|
|
width: 100%; |
|
|
|
height: 589rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-search__action { |
|
|
|
background-color: $uni-color; |
|
|
|
color: #FFFFFF; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
.content { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
// 搜索栏 |
|
|
|
.search { |
|
|
|
background-color: $uni-fg-color; |
|
|
|
border-radius: 41rpx; |
|
|
|
padding: 10rpx 0rpx; |
|
|
|
margin: 20rpx 30rpx 0 30rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
/deep/ .uv-search__action { |
|
|
|
color: $uni-text-color; |
|
|
|
padding: 10rpx 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 轮播图 |
|
|
|
.swipe { |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 14rpx; |
|
|
|
margin: 14rpx 30rpx 0 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.recommend { |
|
|
|
&-member { |
|
|
|
margin: 27rpx 17rpx 0 17rpx; |
|
|
|
color: $uni-color-light; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
.icon { |
|
|
|
&-member { |
|
|
|
width: 42rpx; |
|
|
|
height: 38rpx; |
|
|
|
margin-right: 5rpx; |
|
|
|
} |
|
|
|
&-arrow { |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 轮播图 |
|
|
|
.swipe { |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin: 20rpx; |
|
|
|
&-product { |
|
|
|
margin: 28rpx 17rpx 0 17rpx; |
|
|
|
|
|
|
|
.title{ |
|
|
|
justify-content: flex-start; |
|
|
|
color: #000000; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 700; |
|
|
|
padding-left: 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
&-hot { |
|
|
|
width: 22rpx; |
|
|
|
height: 30rpx; |
|
|
|
margin-left: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.home { |
|
|
|
|
|
|
|
// 首页-分类菜单 |
|
|
|
.home-menu { |
|
|
|
|
