修改页面样式
This commit is contained in:
Gaoxs
74
App.vue
74
App.vue
@ -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";
|
||||
/*每个页面公共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
@ -3667,6 +3667,7 @@ page {
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.personal-data .wrapper .wrapList .item .picTxt .pictrue img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -7484,7 +7485,15 @@ page {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
// #ifdef H5
|
||||
top: 88rpx;
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
top: 0;
|
||||
// #endif
|
||||
|
||||
z-index: 9;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
207
components/Adv.vue
Normal file
207
components/Adv.vue
Normal file
@ -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>
|
||||
155
components/Menu.vue
Normal file
155
components/Menu.vue
Normal file
@ -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>
|
||||
@ -142,7 +142,6 @@ export function auth(code) {
|
||||
console.log('获取微信授权')
|
||||
return new Promise((resolve, reject) => {
|
||||
let loginType = cookie.get(LOGINTYPE);
|
||||
debugger
|
||||
wechatAuth(code, parseInt(cookie.get("spread")), loginType)
|
||||
.then(({ data }) => {
|
||||
console.log(data)
|
||||
@ -152,12 +151,10 @@ export function auth(code) {
|
||||
cookie.set(WX_AUTH, code, expires_time);
|
||||
cookie.remove(STATE_KEY);
|
||||
loginType && cookie.remove(LOGINTYPE);
|
||||
debugger
|
||||
resolve();
|
||||
})
|
||||
.catch(reject);
|
||||
}).catch(error => {
|
||||
debugger
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -193,6 +193,14 @@
|
||||
"resolved": "https://registry.npm.taobao.org/mimic-response/download/mimic-response-1.0.1.tgz?cache=0&sync_timestamp=1589481629775&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmimic-response%2Fdownload%2Fmimic-response-1.0.1.tgz",
|
||||
"integrity": "sha1-SSNTiHju9CBjy4o+OweYeBSHqxs="
|
||||
},
|
||||
"miniapp-color-thief": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npm.taobao.org/miniapp-color-thief/download/miniapp-color-thief-1.0.5.tgz",
|
||||
"integrity": "sha1-CdeHKwTUHIERDK9FbfVAOuOZ7iw=",
|
||||
"requires": {
|
||||
"quantize": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"mongodb": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npm.taobao.org/mongodb/download/mongodb-3.4.1.tgz",
|
||||
@ -296,6 +304,11 @@
|
||||
"once": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"quantize": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/quantize/download/quantize-1.0.2.tgz",
|
||||
"integrity": "sha1-0lrCAKd7bXD0ASfKFxoQ4zyFRt4="
|
||||
},
|
||||
"regexp-clone": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/regexp-clone/download/regexp-clone-1.0.0.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"async-validator": "^3.2.4",
|
||||
"dayjs": "^1.8.22",
|
||||
"jweixin-module": "^1.6.0",
|
||||
"miniapp-color-thief": "^1.0.5",
|
||||
"vue-ydui": "^1.2.6",
|
||||
"wechat-jssdk": "^5.0.4"
|
||||
}
|
||||
|
||||
10
pages.json
10
pages.json
@ -39,7 +39,10 @@
|
||||
{
|
||||
"path": "pages/home/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "yshop商城"
|
||||
"navigationBarTitleText": "yshop商城",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -405,9 +408,10 @@
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarTitleText": "Yshop",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"navigationStyle": "default"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#282828",
|
||||
|
||||
@ -1,6 +1,19 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="header fixed-header acea-row row-center-wrapper">
|
||||
<!-- 导航栏 -->
|
||||
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
|
||||
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
|
||||
<view class="cu-bar fixed" :style="customStyle" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
|
||||
<view class="action">
|
||||
<text class="nav-title shopro-selector-rect">{{ info.name || '商城' }}</text>
|
||||
</view>
|
||||
<view class="content" :style="[{top:StatusBar + 'px'}]">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }">
|
||||
<view @click="goGoodSearch()" class="search acea-row row-middle">
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
搜索商品
|
||||
@ -9,48 +22,22 @@
|
||||
<image src="@/static/images/qr.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed-header-box"></view>
|
||||
<view class="slider-banner banner">
|
||||
<swiper indicatorDots="true" v-if="banner.length > 0" autoplay circular>
|
||||
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
|
||||
<swiper-item>
|
||||
<view @click="goRoll(item)" class="swiper-item">
|
||||
<image :src="item.pic" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
|
||||
<view class="banner-swiper-box mb10" v-if="banner.length>0">
|
||||
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
|
||||
<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true">
|
||||
<swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item " @tap="routerTo(item.path)">
|
||||
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="banner-swiper-dots">
|
||||
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" v-for="(dot, index) in banner.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nav acea-row">
|
||||
<view @click="goWxappUrl(item)" class="item" v-for="(item, menusIndex) in menus" :key="menusIndex">
|
||||
<view class="pictrue">
|
||||
<image :src="item.pic" />
|
||||
</view>
|
||||
<view>{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="news acea-row ">
|
||||
<view class="pictrue" v-if="$VUE_APP_RESOURCES_URL">
|
||||
<image src="@/static/images/news.png" />
|
||||
</view>
|
||||
<view class="swiper-no-swiping new-banner">
|
||||
<swiper class="swiper-wrapper" v-if="roll.length > 0" :indicator-dots="false" autoplay circular vertical>
|
||||
<block v-for="(item, rollIndex) in roll" :key="rollIndex">
|
||||
<swiper-item class="swiper-slide">
|
||||
<view @click="goRoll(item)" class="swiper-item acea-row row-between-wrapper">
|
||||
<view class="text acea-row row-between-wrapper">
|
||||
<view class="label" v-if="item.show === '是'">最新</view>
|
||||
<view class="newsTitle line1">{{ item.info }}</view>
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou"></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="wrapper hot" v-if="likeInfo.length > 0"> -->
|
||||
<Menu :list="menus"></Menu>
|
||||
|
||||
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true" :text="singNew.info"></uni-notice-bar>
|
||||
<view class="wrapper hot" v-if="bastList.length > 0">
|
||||
<image class="bg" src="../../static/images/index-bg.png" mode="widthFix"></image>
|
||||
@ -140,6 +127,8 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import colorThief from 'miniapp-color-thief';
|
||||
|
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
import {
|
||||
mapState,
|
||||
@ -149,7 +138,8 @@
|
||||
import GoodList from '@/components/GoodList';
|
||||
import PromotionGood from '@/components/PromotionGood';
|
||||
import CouponWindow from '@/components/CouponWindow';
|
||||
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
|
||||
import Menu from '@/components/Menu';
|
||||
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
|
||||
import {
|
||||
getHomeData,
|
||||
getShare
|
||||
@ -170,11 +160,21 @@
|
||||
uniNoticeBar,
|
||||
GoodList,
|
||||
PromotionGood,
|
||||
CouponWindow
|
||||
CouponWindow,
|
||||
Menu
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
StatusBar: this.StatusBar,
|
||||
formatMenus: [],
|
||||
bgcolorAry: [],
|
||||
categoryCurrent: 0,
|
||||
menuNum: 5,
|
||||
bgcolor: '',
|
||||
swiperCurrent: 0, //轮播下标
|
||||
webviewId: 0,
|
||||
showCoupon: false,
|
||||
logoUrl: '',
|
||||
banner: [],
|
||||
@ -252,7 +252,17 @@
|
||||
computed: {
|
||||
singNew() {
|
||||
return this.roll.length > 0 ? this.roll[0] : "你还没添加通知哦！";
|
||||
}
|
||||
},
|
||||
customStyle() {
|
||||
var bgImage = this.bgImage;
|
||||
// var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`;
|
||||
var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}`;
|
||||
if (this.bgImage) {
|
||||
style = `${style}background-image:url(${bgImage});`;
|
||||
}
|
||||
return style
|
||||
},
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
this.getLocation()
|
||||
@ -274,6 +284,7 @@
|
||||
that.$set(that, 'couponList', res.data.couponList);
|
||||
uni.hideLoading();
|
||||
that.setOpenShare();
|
||||
that.doColorThief()
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
@ -327,11 +338,6 @@
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let option = handleUrlParam(res.result)
|
||||
console.log(option)
|
||||
|
||||
|
||||
// {productId: "19", spread: "21", codeType: "routine"}
|
||||
// {productId: "19", spread: "21", pageType: "good", codeType: "routine"}
|
||||
switch (option.pageType) {
|
||||
case 'good':
|
||||
// 跳转商品详情
|
||||
@ -374,8 +380,55 @@
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async doColorThief() {
|
||||
let that = this;
|
||||
let bannerItem = this.banner[this.swiperCurrent]
|
||||
let bgcolorItem = this.bgcolorAry[this.swiperCurrent]
|
||||
if (!bgcolorItem) {
|
||||
let ctx = uni.createCanvasContext('colorThief', that);
|
||||
if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
|
||||
that.webviewId = ctx.webviewId;
|
||||
uni.getImageInfo({
|
||||
src: bannerItem.pic,
|
||||
success: function(image) {
|
||||
ctx.drawImage(image.path, 0, 0, image.width, image.height);
|
||||
ctx.draw(true, function(e) {
|
||||
uni.canvasGetImageData({
|
||||
canvasId: 'colorThief',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: parseInt(image.width),
|
||||
height: parseInt(image.height),
|
||||
success(res) {
|
||||
let bgcolor = colorThief(res.data).color().getHex();
|
||||
|
||||
that.bgcolorAry[that.swiperCurrent] = bgcolor
|
||||
that.getbgcolor(bgcolor)
|
||||
}
|
||||
}, );
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.getbgcolor(bgcolorItem)
|
||||
|
||||
}
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
this.doColorThief();
|
||||
let bgcolor = this.bgcolorAry[this.swiperCurrent];
|
||||
this.getbgcolor(bgcolor)
|
||||
},
|
||||
getbgcolor(e) {
|
||||
this.bgcolor = e;
|
||||
},
|
||||
},
|
||||
created: async function() {
|
||||
await this.doColorThief();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@ -390,7 +443,13 @@
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
// #ifdef H5
|
||||
top: 88rpx;
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
top: 0;
|
||||
// #endif
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
@ -400,4 +459,121 @@
|
||||
height: 98rpx
|
||||
}
|
||||
}
|
||||
|
||||
.head_box {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
// background: #fff;
|
||||
transition: all linear 0.3s;
|
||||
|
||||
/deep/.cuIcon-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 38rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-canvas {
|
||||
position: fixed !important;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
|
||||
// 轮播
|
||||
.banner-swiper-box {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.banner-swiper-box,
|
||||
.banner-carousel {
|
||||
width: 750rpx;
|
||||
height: 350upx;
|
||||
position: relative;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
// background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 20rpx;
|
||||
z-index: 66;
|
||||
|
||||
.banner-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.banner-dot-active {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cu-bar.fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1024;
|
||||
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cu-bar {
|
||||
box-sizing: border-box;
|
||||
|
||||
.index .header {
|
||||
height: 64rpx;
|
||||
// width: 100%;
|
||||
// padding: 0 30rpx;
|
||||
// box-sizing: border-box;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header-search {
|
||||
transition: all linear 0.3s;
|
||||
}
|
||||
|
||||
.cu-bar .action {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -182,13 +182,11 @@ export const login = () => {
|
||||
// } else {
|
||||
// // wechat().then(() => oAuth().then((code) => {
|
||||
// // // const { code } = parseQuery()
|
||||
// // debugger
|
||||
// // auth(code)
|
||||
// // .then(() => {
|
||||
// // // location.replace(
|
||||
// // // decodeURIComponent(decodeURIComponent(this.$route.params.url))
|
||||
// // // );
|
||||
// // debugger
|
||||
// // location.href = decodeURIComponent(
|
||||
// // decodeURIComponent(this.$route.params.url)
|
||||
// // );
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
// #ifndef MP-WEIXIN
|
||||
// #ifdef H5
|
||||
// h5端
|
||||
import Fly from "flyio/dist/npm/fly";
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
// app端
|
||||
import Fly from "flyio/dist/npm/wx";
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import Fly from "flyio/dist/npm/wx";
|
||||
// #endif
|
||||
|
||||
Reference in New Issue
Block a user