Gaoxs
4 years ago
13 changed files with 689 additions and 83 deletions
@ -1,24 +1,64 @@
|
||||
<script> |
||||
export default { |
||||
onLaunch: function() { |
||||
console.log('App Launch') |
||||
}, |
||||
onShow: function() { |
||||
console.log('App Show') |
||||
}, |
||||
onHide: function() { |
||||
import Vue from 'vue' |
||||
export default { |
||||
onLaunch: function () { |
||||
console.log("App Launch"); |
||||
}, |
||||
onShow: function () { |
||||
console.log("App Show"); |
||||
}, |
||||
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> |
||||
|
||||
|
||||
|
||||
<style lang="less"> |
||||
/*每个页面公共css */ |
||||
@import "animate.css"; |
||||
@import "./assets/iconfont/iconfont.css"; |
||||
@import "./assets/css/base.less"; |
||||
@import "./assets/css/reset.less"; |
||||
@import "./assets/css/style.less"; |
||||
</style> |
||||
/*每个页面公共css */ |
||||
@import "animate.css"; |
||||
@import "./assets/iconfont/iconfont.css"; |
||||
@import "./assets/css/base.less"; |
||||
@import "./assets/css/reset.less"; |
||||
@import "./assets/css/style.less"; |
||||
</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