修改页面样式

App.vue

@@ -1,24 +1,64 @@
 <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>
-
+
 	
 <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>

assets/css/style.less

@@ -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;
 }

components/Adv.vue

@@ -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>

components/Menu.vue

@@ -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>

libs/wechat.js

@@ -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)
   })
 }

package-lock.json

@@ -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",

package.json

@@ -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"
   }

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",

pages/home/index.vue

@@ -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>
-			</swiper>
-		</view>
 
-		<view class="nav acea-row">
+		<view class="banner-swiper-box mb10" v-if="banner.length>0">
-			<view @click="goWxappUrl(item)" class="item" v-for="(item, menusIndex) in menus" :key="menusIndex">
+			<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
-				<view class="pictrue">
+			<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true">
-					<image :src="item.pic" />
+				<swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item " @tap="routerTo(item.path)">
-				</view>
+					<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load></image>
-				<view>{{ item.name }}</view>
+				</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>
-		<!-- <view class="news acea-row ">
+		
-			<view class="pictrue" v-if="$VUE_APP_RESOURCES_URL">
+		<Menu :list="menus"></Menu>
-				<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"> -->
 		<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,
@@ -148,8 +137,9 @@
 	} from 'vuex';
 	import GoodList from '@/components/GoodList';
 	import PromotionGood from '@/components/PromotionGood';
-	import CouponWindow from '@/components/CouponWindow';
+	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
 		}
 	}
-</style>
+
+	.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>

utils/index.js

@@ -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)
 			// 	// 			);

utils/request.js

@@ -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