363 lines
14 KiB
Vue
363 lines
14 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 padding-x120">
|
||
<!-- 分类 -->
|
||
<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 v-if="dataList.length!=0" :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>
|
||
<foot-tab></foot-tab>
|
||
</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.dataList.length!=0){
|
||
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() {
|
||
uni.showTabBar()
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (res)=> {
|
||
if (res.code) {
|
||
var params = {code:res.code}
|
||
this.$requst.post('user/wxAppletsLogin',params).then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.token!=''){
|
||
uni.setStorageSync('token',res.data.token)//缓存token
|
||
uni.setStorageSync('openid',res.data.openid)//缓存Openid
|
||
uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
|
||
uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
|
||
uni.setStorageSync('user_type',res.data.user_type)//权限
|
||
this.checkList()//商品列表查询事件
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
},error=>{})
|
||
}
|
||
},
|
||
});
|
||
},
|
||
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()//查询商品分类
|
||
},
|
||
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>
|