13 changed files with 689 additions and 83 deletions
@ -1,24 +1,64 @@ |
|||||||
<script> |
<script> |
||||||
export default { |
import Vue from 'vue' |
||||||
onLaunch: function() { |
export default { |
||||||
console.log('App Launch') |
onLaunch: function () { |
||||||
}, |
console.log("App Launch"); |
||||||
onShow: function() { |
}, |
||||||
console.log('App Show') |
onShow: function () { |
||||||
}, |
console.log("App Show"); |
||||||
onHide: function() { |
}, |
||||||
|
onHide: function () { |
||||||
|
console.log("App Hide"); |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.setAppInfo() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取系统栏高度 |
||||||
|
async setAppInfo() { |
||||||
|
let that = this; |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
uni.getSystemInfo({ |
||||||
|
success: function (e) { |
||||||
|
Vue.prototype.StatusBar = e.statusBarHeight; |
||||||
|
// #ifdef H5 |
||||||
|
Vue.prototype.CustomBar = e.statusBarHeight + 45; |
||||||
|
// #endif |
||||||
|
|
||||||
console.log('App Hide') |
// #ifdef APP-PLUS |
||||||
} |
if (e.platform == "android") { |
||||||
} |
Vue.prototype.CustomBar = e.statusBarHeight + 50; |
||||||
|
} else { |
||||||
|
Vue.prototype.CustomBar = e.statusBarHeight + 45; |
||||||
|
} |
||||||
|
// #endif |
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
let custom = wx.getMenuButtonBoundingClientRect(); |
||||||
|
Vue.prototype.Custom = custom; |
||||||
|
Vue.prototype.CustomBar = |
||||||
|
custom.bottom + custom.top - e.statusBarHeight; |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 自动登录 |
||||||
|
async autoLogin(data) { |
||||||
|
|
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
|
||||||
<style lang="less"> |
<style lang="less"> |
||||||
/*每个页面公共css */ |
/*每个页面公共css */ |
||||||
@import "animate.css"; |
@import "animate.css"; |
||||||
@import "./assets/iconfont/iconfont.css"; |
@import "./assets/iconfont/iconfont.css"; |
||||||
@import "./assets/css/base.less"; |
@import "./assets/css/base.less"; |
||||||
@import "./assets/css/reset.less"; |
@import "./assets/css/reset.less"; |
||||||
@import "./assets/css/style.less"; |
@import "./assets/css/style.less"; |
||||||
</style> |
</style> |
||||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,207 @@ |
|||||||
|
<template> |
||||||
|
<view class="adv-box mx20 mb10"> |
||||||
|
<!-- 模板1--> |
||||||
|
<view class="x-f" v-if="detail.style == 1"> |
||||||
|
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板2--> |
||||||
|
<view class="type1 x-f" v-if="detail.style == 2"> |
||||||
|
<image class="type1-img" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板3--> |
||||||
|
<view class="type2 x-bc" v-if="detail.style == 3"> |
||||||
|
<image class="type2-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<view class="y-f type2-box"> |
||||||
|
<image class="type2-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image> |
||||||
|
<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 模板4--> |
||||||
|
<view class="type3 x-bc" v-if="detail.style == 4"> |
||||||
|
<view class="type3-box y-f"> |
||||||
|
<image class="type3-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板5--> |
||||||
|
<view class="type4 y-f" v-if="detail.style == 5"> |
||||||
|
<view class="type4-box x-f"> |
||||||
|
<image class="type4-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板6--> |
||||||
|
<view class="type5 y-f" v-if="detail.style == 6"> |
||||||
|
<image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<view class="type5-box x-bc"> |
||||||
|
<image class="type5-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image> |
||||||
|
<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 模板7--> |
||||||
|
<view class="type6 y-f" v-if="detail.style == 7"> |
||||||
|
<view class="x-f type6-box1"> |
||||||
|
<image class="type6-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<view class="x-f type6-box2"> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[3].path)" :src="detail.list[3].image" mode="aspectFill"></image> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: {} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
methods: { |
||||||
|
// 路由跳转 |
||||||
|
jump(path) { |
||||||
|
this.$tools.routerTo(path); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.adv-box { |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
.type1 { |
||||||
|
.type1-img { |
||||||
|
flex: 1; |
||||||
|
height: 220rpx; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type2 { |
||||||
|
.type2-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: 340rpx; |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type2-box { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
|
||||||
|
.type2-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3 { |
||||||
|
.type3-box { |
||||||
|
width: (710rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
.type3-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3-img2 { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4 { |
||||||
|
.type4-box { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
.type4-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4-img2 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type5 { |
||||||
|
.type5-img1 { |
||||||
|
width: 710rpx; |
||||||
|
height: (340rpx/2); |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type5-box { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
|
||||||
|
.type5-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6 { |
||||||
|
.type6-box1 { |
||||||
|
.type6-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6-box2 { |
||||||
|
border-top: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type6-img2 { |
||||||
|
width: (710rpx/3); |
||||||
|
height: (340rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
image { |
||||||
|
// background-color: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,155 @@ |
|||||||
|
<template> |
||||||
|
<!-- 产品分类导航 --> |
||||||
|
<view class="menu-category-box mb10" v-if="carousel" :style="list.length <= menu ? `height:200rpx` : `height:360rpx`"> |
||||||
|
<swiper |
||||||
|
class="menu-swiper-box" |
||||||
|
:style="list.length <= menu ? `height:160rpx` : `height:320rpx`" |
||||||
|
@change="onSwiper" |
||||||
|
circular |
||||||
|
:autoplay="false" |
||||||
|
:interval="3000" |
||||||
|
:duration="1000" |
||||||
|
> |
||||||
|
<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index" :style="list.length <= menu ? `height:200rpx` : `height:340rpx`"> |
||||||
|
<view class="menu-tab-box"> |
||||||
|
<view class="tab-list y-f" :style="{ width: 690 / menu + 'rpx' }" v-for="item in itemList" :key="item.name" @tap="routerTo(item)"> |
||||||
|
<image class="tab-img shopro-selector-circular" :style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.pic"></image> |
||||||
|
<text class="shopro-selector-rect">{{ item.name }}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="menu-category-dots" v-if="carousel.length > 1"> |
||||||
|
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in carousel.length" :key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
categoryCurrent: 0 //分类轮播下标 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
list: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
}, |
||||||
|
menu: { |
||||||
|
default: 5 |
||||||
|
}, |
||||||
|
imgW: { |
||||||
|
type: Number, |
||||||
|
default: 88 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
carousel() { |
||||||
|
if (this.list) { |
||||||
|
let list = this.sortData(this.list, this.menu * 2); |
||||||
|
return list; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() {}, |
||||||
|
methods: { |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
// 轮播 |
||||||
|
onSwiper(e) { |
||||||
|
this.categoryCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 路由跳转 |
||||||
|
routerTo(item) { |
||||||
|
this.$yrouter.push(item.uniapp_url); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
// 产品分类 |
||||||
|
.y-f { |
||||||
|
display: -webkit-box; |
||||||
|
display: -webkit-flex; |
||||||
|
display: flex; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-box-direction: normal; |
||||||
|
-webkit-flex-direction: column; |
||||||
|
flex-direction: column; |
||||||
|
-webkit-box-align: center; |
||||||
|
-webkit-align-items: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.menu-category-box { |
||||||
|
padding: 30rpx 30rpx 0 30rpx; |
||||||
|
background: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.menu-category-box, |
||||||
|
.menu-swiper-box { |
||||||
|
position: relative; |
||||||
|
background: #fff; |
||||||
|
.menu-swiper-item { |
||||||
|
background: #fff; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.menu-tab-box { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
.tab-list { |
||||||
|
font-size: 22rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
padding-bottom: 30rpx; |
||||||
|
|
||||||
|
.tab-img { |
||||||
|
border-radius: 25rpx; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.menu-category-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 20rpx; |
||||||
|
|
||||||
|
.category-dot { |
||||||
|
width: 40rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eeeeee; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.category-dot-active { |
||||||
|
width: 40rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue