341 lines
13 KiB
Vue
341 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="posir">
|
|||
|
|
<image class="posia" src="/static/img/pageh/headb.png" style="width: 100%;"></image>
|
|||
|
|
<!-- 使用标题栏 -->
|
|||
|
|
<!-- <status-nav :statusTitle="true" :title-val="'登锐商城'" :tabcolor="'#ffffff'"></status-nav> -->
|
|||
|
|
<view class="posi-tzy zIn5 statusHNH" style="background: url(https://s3.jpg.cm/2021/07/22/I6PtxL.png) fixed top;background-size: 100%;">
|
|||
|
|
<view :style="{height:statusBarHeight+'px'}"></view>
|
|||
|
|
<view class="padding-z20 disac width100 navBarH" :style="{background:backgroudColor}">
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<view class="tab-title titlec" style="color:#ffffff;">登锐商城</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索框、消息 -->
|
|||
|
|
<view class="margin-zy20 disba" :style="{paddingTop:statusHNH+'px'}">
|
|||
|
|
<view class="searchRadius disac ptwo-input-box">
|
|||
|
|
<image class="searcht margin-z20" src="/static/img/pageh/sousuo.png"></image>
|
|||
|
|
<input @tap="inputFocus" disabled class="margin-z10 fon26 colorh width100" placeholder="搜索的内容" placeholder-class="searchpla"
|
|||
|
|
type="text" />
|
|||
|
|
</view>
|
|||
|
|
<!-- <image @tap="goNotices" class="xiaox margin-y10 flexs" src="/static/img/pageh/xiaoxi.png"></image> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="margin20">
|
|||
|
|
<!-- banner轮播 -->
|
|||
|
|
<view class="radius10">
|
|||
|
|
<swiper class="banner-box" :indicator-color="'#f9f9f9'" :indicator-active-color="'#1c4593'"
|
|||
|
|
:indicator-dots="true" :easing-function="'easeOutCubic'" :autoplay="true" :interval="3000"
|
|||
|
|
:circular="true" :duration="1000">
|
|||
|
|
<swiper-item v-if="bannerList.length!=0" v-for="(item,index) in bannerList" :key="index">
|
|||
|
|
<view class="swiper-item">
|
|||
|
|
<image class="width100 banner-box radius10" :src="item.src" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
<!-- 公告 -->
|
|||
|
|
<view class="margin-sx20 disac zIn4" style="position: relative;">
|
|||
|
|
<view class="disac flexs">
|
|||
|
|
<image class="gimg" src="/static/img/pageh/gonggao.png" mode=""></image>
|
|||
|
|
<view class="fon26 gtitle margin-z10"><i>小程序公告:</i></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="disba width100">
|
|||
|
|
<view class="fon24 color6 margin-zy20 width100">
|
|||
|
|
<!-- <marquee direction="left" align="absmiddle" scrollamount="5">新品上市百雀明媚羚眼霜限时促销霜限时促销霜限时促销</marquee> -->
|
|||
|
|
<lwNotice @dangGao="dangGao" :list="advanceListTwo"></lwNotice>
|
|||
|
|
</view>
|
|||
|
|
<view @tap="goNotices" class="fon24 color9 margin-y20 flexs">更多</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 热门产品，限时补贴 -->
|
|||
|
|
<view class="discc width100 textc" style="background: url(https://s3.jpg.cm/2021/07/22/I6P1IW.png) no-repeat;background-size: 100% 100%;">
|
|||
|
|
<view class="fon36 colorb bold margin-s40 disbcac">
|
|||
|
|
<image class="reba" src="/static/img/pageh/rebefore.png"></image>
|
|||
|
|
<view class="margin-zy20">厂家送红包 购100送70</view>
|
|||
|
|
<image class="reba" src="/static/img/pageh/reaffter.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon24 colorb margin-sx20 discc">
|
|||
|
|
<view class="zIn1">红包可提现，也可分次购货</view>
|
|||
|
|
<view class="tiao"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fon24 margin-x20" style="color: rgba(255,255,255,.7);">商城产品低于市场价70%，红包可选择长期分红更划算</view>
|
|||
|
|
<view class="reboxre margin-zy20 margin-x20" style="width: 94%;" v-for="(itemre,indexre) in zanReArrImg" :key="indexre">
|
|||
|
|
<image class="radius10" @tap="goReDetail(itemre.link)" style="width: 100%;height: 342rpx;" mode="aspectFill" :src="itemre.src"></image>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="radius10 disba rebox margin-zy20 margin-x20" v-for="(itemre,indexre) in reArr" :key="indexre">
|
|||
|
|
<image v-if="indexre%2==0" class="flexs reimg" :src="itemre.src"></image>
|
|||
|
|
<view class="disbc width100 flw margin-sf30">
|
|||
|
|
<view class="fon26 color26">{{itemre.title}}</view>
|
|||
|
|
<view class="fon36 color26 bold margin-sx10">{{itemre.miaoone}}</view>
|
|||
|
|
<view class="fon24 color26">{{itemre.miaotwo}}</view>
|
|||
|
|
<view class="btnradius fon24 colorb rebtn margin-s20">
|
|||
|
|
惊喜价:￥<span class="fon36 blod">{{itemre.price}}</span>.00
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<image v-if="indexre%2!=0" class="flexs reimg" :src="itemre.src"></image>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- 分类列表 -->
|
|||
|
|
<view class="width100">
|
|||
|
|
<!-- 分类 -->
|
|||
|
|
<scroll-view scroll-x="true" style="height: 80rpx;">
|
|||
|
|
<view class="disba margin20 catebox">
|
|||
|
|
<view @tap="chooseCate(item.id,index)" :class="current==index?'pactive':'pmo'" class="disac flexs"
|
|||
|
|
v-for="(item,index) in cateList" :key="index">{{item.name}}<view class="pxian"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<!-- @addChe="addChe" -->
|
|||
|
|
<twocoluList :dataList="dataList"></twocoluList>
|
|||
|
|
<!-- 更多 -->
|
|||
|
|
<view v-if="gisok" class="margin-sx26 textc color9 fon26">{{gcontent}}</view>
|
|||
|
|
</view>
|
|||
|
|
<backTop :showTop="showTop" @backTop="backTop"></backTop>
|
|||
|
|
<!-- <footTab></footTab> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import twocoluList from '@/components/twocoluList.vue';
|
|||
|
|
import backTop from '@/components/backTop.vue';
|
|||
|
|
import lwNotice from '@/components/lw-notice/lw-notice.vue';
|
|||
|
|
import footTab from '@/components/footTab.vue';
|
|||
|
|
export default {
|
|||
|
|
components:{
|
|||
|
|
twocoluList,
|
|||
|
|
backTop,
|
|||
|
|
lwNotice,
|
|||
|
|
footTab
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
|||
|
|
bannerList: [],
|
|||
|
|
// cateList:['轮胎轮毂','车载电器','雨刮器','机油养护','汽车配件'],
|
|||
|
|
cateList:[{
|
|||
|
|
id:'',
|
|||
|
|
name:'全部',
|
|||
|
|
pid:'',
|
|||
|
|
hasChildren:''
|
|||
|
|
}],
|
|||
|
|
current:0,
|
|||
|
|
dataList:[],
|
|||
|
|
gcontent:'暂无更多',//更多文本
|
|||
|
|
gisok:false,//判断更多是否出现
|
|||
|
|
showTop:false,
|
|||
|
|
advanceListTwo:[],//公告内容列表
|
|||
|
|
advanceListInfo:[],//公告所有信息
|
|||
|
|
// reArr:[
|
|||
|
|
// {src:'/static/img/pageh/reone.jpg',title:'/凌度BLACKVIEW/',miaoone:'行车记录仪前后双录',miaotwo:'全屏流媒体后视镜倒车影像',price:'459'},
|
|||
|
|
// {src:'/static/img/pageh/retwo.jpg',title:'/凌度BLACKVIEW/',miaoone:'行车记录仪前后双录',miaotwo:'全屏流媒体后视镜倒车影像',price:'459'},
|
|||
|
|
// ],
|
|||
|
|
zanReArrImg:[],
|
|||
|
|
cid:0,
|
|||
|
|
page:1,
|
|||
|
|
size:10,
|
|||
|
|
total:'',
|
|||
|
|
isZanw:true,
|
|||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|||
|
|
pageShow:false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if(this.total!=this.dataList.length){
|
|||
|
|
this.page++
|
|||
|
|
this.checkList()//调用自主预约列表事件
|
|||
|
|
} else {
|
|||
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
|
|||
|
|
this.isZanw = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
if(uni.getStorageSync('is_active')!='' && uni.getStorageSync('is_active')!=0) this.$toolAll.tools.guoq()
|
|||
|
|
uni.showTabBar()
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
const query = wx.createSelectorQuery().in(this)
|
|||
|
|
query.select('.statusHNH').boundingClientRect((rect) => {
|
|||
|
|
// console.log('rect.height',rect)
|
|||
|
|
uni.setStorageSync('statusHNH',rect.height)
|
|||
|
|
this.statusHNH = rect.height
|
|||
|
|
}).exec()
|
|||
|
|
var _this = this;
|
|||
|
|
// 微信扫码后会自动编码,所以需要解码
|
|||
|
|
if (options && options.q) {
|
|||
|
|
let arr = decodeURIComponent(options.q).split('?')[1].split('&')
|
|||
|
|
let obj = {}
|
|||
|
|
arr.forEach(item => {
|
|||
|
|
let brr = item.split('=')
|
|||
|
|
obj[brr[0]] = brr[1]
|
|||
|
|
})
|
|||
|
|
// console.log(obj) //得到参数组成的对象
|
|||
|
|
uni.setStorageSync('invite_code',obj.invite_code)
|
|||
|
|
}
|
|||
|
|
this.title = this.dengrui
|
|||
|
|
this.bannerEv()//查询轮播
|
|||
|
|
this.requestGao()//查询公告
|
|||
|
|
this.reMen()//查询热门产品
|
|||
|
|
this.shaiEv()//查询商品分类
|
|||
|
|
this.checkList()//商品列表查询事件
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
shaiEv(){//商品分类查询事件
|
|||
|
|
this.$requst.post('product/spu/category').then(res=>{
|
|||
|
|
// console.log('筛选',res);
|
|||
|
|
if(res.data.length!=0){
|
|||
|
|
res.data.forEach(item=>{
|
|||
|
|
let obj = {
|
|||
|
|
id:item.id,
|
|||
|
|
name:item.name,
|
|||
|
|
pid:item.pid,
|
|||
|
|
hasChildren:item.hasChildren
|
|||
|
|
}
|
|||
|
|
this.cateList.push(obj)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},error=>{})
|
|||
|
|
},
|
|||
|
|
bannerEv(){// 查询轮播图片事件
|
|||
|
|
let paramsBanner = {
|
|||
|
|
position:'home_banner'
|
|||
|
|
}
|
|||
|
|
this.$requst.post('slide/index',paramsBanner).then(res => {
|
|||
|
|
// console.log('轮播图===>',res);
|
|||
|
|
if(res.data.length!=0){
|
|||
|
|
this.pageShow = true
|
|||
|
|
res.data.forEach(item=>{
|
|||
|
|
let obj = {
|
|||
|
|
src:this.$http+item.src,
|
|||
|
|
alt:item.alt,
|
|||
|
|
link:item.link,
|
|||
|
|
time:item.time
|
|||
|
|
}
|
|||
|
|
this.bannerList.push(obj)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},error => {})
|
|||
|
|
},
|
|||
|
|
goReDetail(urlre){// 去热门详情
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:urlre
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
reMen(){//查询热门
|
|||
|
|
this.$requst.post('slide/index',{position:'home_promote'}).then(res => {
|
|||
|
|
// console.log('热门===>',res);
|
|||
|
|
if(res.data.length!=0){
|
|||
|
|
res.data.forEach(item=>{
|
|||
|
|
let zanObj = {
|
|||
|
|
alt: item.alt,
|
|||
|
|
desc: item.desc,
|
|||
|
|
link: item.link,
|
|||
|
|
src: this.$http+item.src,
|
|||
|
|
time: item.time
|
|||
|
|
}
|
|||
|
|
this.zanReArrImg.push(zanObj)
|
|||
|
|
// let obj = {
|
|||
|
|
// src:this.$http+item.src,
|
|||
|
|
// title:item.alt,
|
|||
|
|
// miaoone:item.link,
|
|||
|
|
// miaotwo:item.time,
|
|||
|
|
// price:item.price
|
|||
|
|
// }
|
|||
|
|
// this.reArr.push(obj)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},error => {})
|
|||
|
|
},
|
|||
|
|
requestGao(){//查询公告列表
|
|||
|
|
var paramsGao = {
|
|||
|
|
size:0
|
|||
|
|
}
|
|||
|
|
this.$requst.post('article/announcement/topList',paramsGao).then(res => {
|
|||
|
|
// console.log(res);
|
|||
|
|
if(res.data.list.length!=0){
|
|||
|
|
res.data.list.forEach(item=>{
|
|||
|
|
this.advanceListTwo.push(item.title)
|
|||
|
|
})
|
|||
|
|
this.advanceListInfo = res.data.list
|
|||
|
|
}
|
|||
|
|
},error => {})
|
|||
|
|
},
|
|||
|
|
backTop(){
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: 0,
|
|||
|
|
duration: 300
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
chooseCate(id,e){
|
|||
|
|
this.current = e
|
|||
|
|
if(id=='') this.cid = 0
|
|||
|
|
else this.cid = id
|
|||
|
|
this.page = 1
|
|||
|
|
this.isZanw = true
|
|||
|
|
this.checkList()
|
|||
|
|
},
|
|||
|
|
checkList(){
|
|||
|
|
let paramCate ={
|
|||
|
|
category_id:this.cid,
|
|||
|
|
page:this.page,
|
|||
|
|
size:this.size,
|
|||
|
|
sort_filed:'synthetical',//排序字段。“synthetical”综合推荐
|
|||
|
|
sort_direction:'down'//排序方向。【down 由大到小|up 由小到大】
|
|||
|
|
}
|
|||
|
|
this.$requst.post('product/spu/list',paramCate).then(res=>{
|
|||
|
|
// console.log('产品',res);
|
|||
|
|
if(this.page==1) this.dataList = []
|
|||
|
|
if(res.data.list.length!=0){
|
|||
|
|
this.total = res.data.total
|
|||
|
|
// this.cid = res.data.list[0].cid//获取分类ID，以便加载更多使用
|
|||
|
|
this.zanList = res.data.list
|
|||
|
|
res.data.list.forEach(item=>{
|
|||
|
|
let cateObj = {
|
|||
|
|
id:item.main_sku.id,//商品ID
|
|||
|
|
spu_id:item.id,
|
|||
|
|
src:this.$http + item.main_sku.main_image,//商品图片
|
|||
|
|
title:item.name,//商品名称
|
|||
|
|
content:item.sub_title,//商品标题
|
|||
|
|
cate:item.tag_list,//标签列表
|
|||
|
|
price:item.main_sku.cur_price/100//商品原价
|
|||
|
|
}
|
|||
|
|
this.dataList.push(cateObj)
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// this.$toolAll.tools.showToast('没找到相关产品o(╥﹏╥)o')
|
|||
|
|
}
|
|||
|
|
},error=>{})
|
|||
|
|
},
|
|||
|
|
// addChe(e){//加入购物车事件
|
|||
|
|
// console.log('加入购物车：'+e)
|
|||
|
|
// },
|
|||
|
|
dangGao(e){//跳转到公告详情
|
|||
|
|
uni.setStorageSync('noticeInfo',this.advanceListInfo[e])
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pagesB/noticesDetail/noticesDetail?index=2'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goNotices(){//跳转到公告列表
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pagesB/notices/notices'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
inputFocus(){//搜索框获取焦点跳转产品页
|
|||
|
|
wx.hideKeyboard()
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pagesB/keySearch/keySearch'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|