修改轮播图卡顿的问题

修改app上菜单栏尺寸过小的问题

components/colorui/animation.css

@@ -0,0 +1,184 @@
+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

components/colorui/components/cu-custom.vue

@@ -0,0 +1,65 @@
+<template>
+	<view>
+		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
+			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
+				<view class="action" @tap="BackPage" v-if="isBack">
+					<text class="cuIcon-back"></text>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background-image:url(${bgImage});`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

config/index.js

@@ -1,5 +1,4 @@
 
-// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
+export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
-export const VUE_APP_API_URL = 'http://127.0.0.1:8008/api';
 export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static';
 

libs/wechat.js

@@ -148,7 +148,8 @@ export function auth(code) {
   console.log('获取微信授权')
   return new Promise((resolve, reject) => {
     let loginType = cookie.get(LOGINTYPE);
-    wechatAuth(code, cookie.get("spread"), loginType)
+    let spread = cookie.get(spread);
+    wechatAuth(code, spread, loginType)
       .then(({ data }) => {
         console.log(data)
         const expires_time = dayjs(data.expires_time);
@@ -172,8 +173,15 @@ export function toAuth() {
 }
 
 function getAuthUrl(appId) {
-  const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
+  
-  // const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`encodeURIComponent(encodeURIComponent(cookie.has(BACK_URL)? cookie.get(BACK_URL): location.pathname + location.search)));
+  // const redirect_uri = encodeURIComponent(window.location.href);
+  // const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
+  
+	// #ifdef H5
+	// #endif
+  
+  
+  const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index?path=${encodeURIComponent(window.location.href)}`);
   // const redirect_uri = encodeURIComponent(`${window.location.origin}${window.location.pathname}`)
   // const redirect_uri = encodeURIComponent(`${location.origin}`)
   cookie.remove(BACK_URL);

main.js

@@ -6,7 +6,7 @@ import store from "./store";
 import schema from "async-validator";
 import dialog from "./utils/dialog";
 import cookie from "@/utils/store/cookie";
-
+import cuCustom from '@/components/colorui/components/cu-custom.vue'
 // // import "@/assets/iconfont/iconfont";
 // import "@/assets/iconfont/iconfont.css";
 // // import "@/assets/js/media_750";
@@ -23,13 +23,14 @@ import cookie from "@/utils/store/cookie";
 
 import {
 	parseRoute,
-	_router
+	_router,
+	parseQuery
 } from "@/utils";
 import {
 	VUE_APP_RESOURCES_URL,
 	VUE_APP_API_URL
 } from "@/config";
-
+Vue.component('cu-custom', cuCustom);
 Vue.config.productionTip = false;
 Vue.config.devtools = process.env.NODE_ENV !== "production";
 
@@ -80,7 +81,7 @@ Object.defineProperty(Vue.prototype, '$yroute', {
 
 Vue.prototype.$VUE_APP_RESOURCES_URL = VUE_APP_RESOURCES_URL
 Vue.prototype.$VUE_APP_API_URL = VUE_APP_API_URL
-
+Vue.component('cu-custom', cuCustom);
 // #ifdef H5
 // H5编译的代码
 
@@ -102,6 +103,27 @@ import {
 
 import { isWeixin } from '@/utils'
 
+
+const CACHE_KEY = "clear_0.0.1";
+
+if (!cookie.has(CACHE_KEY)) {
+  cookie.clearAll();
+  cookie.set(CACHE_KEY, 1);
+}
+
+var urlSpread = parseQuery()["spread"];
+
+if (urlSpread !== undefined) {
+  var spread = cookie.get("spread");
+  urlSpread = parseInt(urlSpread);
+  if (!Number.isNaN(urlSpread) && spread !== urlSpread) {
+    cookie.set("spread", urlSpread || 0);
+  } else if (spread === 0 || typeof spread !== "number") {
+    cookie.set("spread", urlSpread || 0);
+  }
+}
+
+
 // 判断是否是微信浏览器
 if (isWeixin()) {
 	Vue.prototype.$deviceType = 'weixin'

pages/Loading/index.vue

@@ -1,12 +1,7 @@
 <template>
   <view class="lottie-bg">
     <view id="lottie">
-      <image
+      <image src="../../static/images/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%;" />
-        src="../../static/images/live-logo.gif"
-        rel="preload"
-        mode="widthFix"
-        style="width: 100%;"
-      />
     </view>
   </view>
 </template>
@@ -28,7 +23,7 @@ export default {
   onShow() {
 
     var url = handleQrCode();
-    if(!url){
+    if (!url) {
       url = handleUrlParam(getCurrentPageUrl())
     }
     // 判断是否是分销
@@ -40,15 +35,30 @@ export default {
       } else if (spread === 0 || typeof spread !== "number") {
         cookie.set("spread", urlSpread || 0);
       }
-    }
       if (this.$store.getters.token) {
         this.toLaunch();
         return;
       }
-    cookie.get("spread");
+      // cookie.get("spread");
+      // if (this.$deviceType == "weixin") {
+      //   let path = parseQuery().path
+      //   console.log(this)
+      //   if (path) {
+      //     this.$yrouter.push({
+      //       path
+      //     });
+      //   } else {
+      //     this.$yrouter.switchTab({
+      //       path: "/pages/home/index"
+      //     });
+      //   }
+
+      //   return
+      // }
       // this.toLaunch();
-    if (this.$deviceType == "app"||this.$deviceType == "h5") {
+      if (this.$deviceType == "app" || this.$deviceType == "h5") {
         // this.toLaunch();
+
         this.$yrouter.switchTab({
           path: "/pages/home/index"
         });
@@ -59,6 +69,7 @@ export default {
           path: "/pages/home/index"
         });
       });
+    }
   },
     methods: {
       ...mapActions(["changeAuthorization", "setUserInfo"]),
@@ -70,11 +81,11 @@ export default {
         });
       }
     }
-};
+  };
 </script>
 
 <style scoped lang="less">
-.lottie-bg {
+  .lottie-bg {
     position: fixed;
     left: 0;
     top: 0;
@@ -88,13 +99,13 @@ export default {
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
-}
+  }
 
-#lottie {
+  #lottie {
     width: 35%;
     display: block;
     overflow: hidden;
     transform: translate3d(0, 0, 0);
     margin: auto;
-}
+  }
 </style>

pages/home/components/Banner.vue

@@ -2,14 +2,14 @@
     <view class="banner-swiper-box">
         <canvas canvas-id="colorThief" class="hide-canvas"></canvas>
         <swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true">
-            <swiper-item v-for="(item, index) in list" :key="index" class="carousel-item" @tap="routerTo(item.path)">
+            <swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item" >
                 <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 list.length" :key="index"></text>
+                v-for="(dot, index) in detail.length" :key="index"></text>
         </view>
     </view>
 </template>
@@ -22,43 +22,28 @@
             return {
                 swiperCurrent: 0, //轮播下标
                 webviewId: 0,
-                bgcolorAry: [],
-                list: []
             };
         },
         props: {
-            banner: {
+            detail: {
                 type: Array,
                 default: []
             }
         },
         created: async function () {
             await this.doColorThief();
-
-        },
-        async mounted() {
-
         },
         computed: {},
-        watch: {
-            banner(next) {
-                this.list = next;
-                this.doColorThief()
-            }
-        },
         methods: {
             async doColorThief() {
                 let that = this;
                 // 获取轮播图
-                let item = this.list[this.swiperCurrent];
+                let item = this.detail[this.swiperCurrent];
-                if(!item){
-                    return
-                }
                 // 获取轮播图颜色
-                let bgcolor = this.bgcolorAry[this.swiperCurrent];
+                let bgcolor = item.bgcolor;
                 // 颜色不存在
-                if (!bgcolor) {
+                if (bgcolor === '') {
-                    let ctx = uni.createCanvasContext('colorThief', that.$scope);
+                    let ctx = uni.createCanvasContext('colorThief', that);
                     if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
                         that.webviewId = ctx.webviewId;
                         uni.getImageInfo({
@@ -73,20 +58,16 @@
                                             width: parseInt(image.width),
                                             height: parseInt(image.height),
                                             success(res) {
-                                            let newBgcolor = colorThief(res.data)
+                                                let bgcolor = colorThief(res.data)
                                                     .color()
                                                     .getHex();
-                                            that.$set(that.bgcolorAry, that
+                                                that.$set(item, 'bgcolor', bgcolor);
-                                                .swiperCurrent,
+                                                that.$emit('getbgcolor', bgcolor);
-                                                newBgcolor);
-                                            that.$emit('getbgcolor', newBgcolor);
-                                        },
-                                        fail: function (error) {
                                             }
-                                    }, that.$scope);
-                                });
                                         },
-                            fail: function (error) {
+                                        that
+                                    );
+                                });
                             }
                         });
                     }
@@ -98,6 +79,8 @@
             swiperChange(e) {
                 this.swiperCurrent = e.detail.current;
                 this.doColorThief();
+                let bgcolor = this.detail[this.swiperCurrent].bgcolor;
+                this.$emit('getbgcolor', bgcolor);
             },
 
             // 路由跳转

pages/home/components/Live.vue

@@ -128,7 +128,6 @@
 			// 	}
 			},
 			goRoom(live) {
-				console.log(live.roomId,9999)
 				wx.navigateTo({
 					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}`
 				});

pages/home/index.vue

@@ -1,17 +1,25 @@
 <template>
 	<view class="index">
 		<!-- 导航栏 -->
-		<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
+<!--		<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">-->
-			<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
+<!--			<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">-->
-				<view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">
+<!--				<view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">-->
-					<view class="action">
+<!--					<view class="action">-->
-						<text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>
+<!--						<text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>-->
-					</view>
+<!--					</view>-->
-					<view class="content" :style="[{top:StatusBar + 'px'}]">
+<!--					<view class="content" :style="[{top:StatusBar + 'px'}]">-->
 
-					</view>
+<!--					</view>-->
-				</view>
+<!--				</view>-->
-			</view>
+<!--			</view>-->
+<!--		</view>-->
+
+    <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
+      <cu-custom :isBack="true" >
+        <block slot="backText">
+          <text class="nav-title shopro-selector-rect">{{  'YSHOP商城' }}</text>
+        </block>
+      </cu-custom>
     </view>
 		<view class="header header-search  acea-row row-center-wrapper" :style="{ background: bgcolor }">
 			<view @click="goGoodSearch()" class="search acea-row row-middle">
@@ -22,7 +30,7 @@
 				<image src="@/static/images/qr.png" />
 			</view>
 		</view>
-		<Banner :banner="banner" @getbgcolor="getbgcolor"></Banner>
+		<Banner :detail="banner" v-if="banner.length>0" @getbgcolor="getbgcolor"></Banner>
 		<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true"
 			:text="singNew.info"></uni-notice-bar>
 		<view class="content_box home_content_box">
@@ -215,6 +223,7 @@
 			});
 			getHomeData().then(res => {
 				that.logoUrl = res.data.logoUrl;
+				res.data.banner.map(item => item.bgcolor = '')
 				that.$set(that, 'banner', res.data.banner);
 				that.$set(that, 'menus', res.data.menus);
 				that.$set(that, 'roll', res.data.roll);
@@ -381,9 +390,7 @@
 	}
 
   .head_box {
-		position: relative;
+    width: 750rpx;
-		z-index: 10;
-		width: 100%;
     // background: #fff;
     transition: all linear 0.3s;
 

utils/index.js

@@ -38,8 +38,8 @@ export function dataFormat(time, option) {
 		return timeStr
 	}
 }
-	// 年月日，时分秒
+// 年月日，时分秒
-	// "YYYY-mm-dd HH:MM"
+// "YYYY-mm-dd HH:MM"
 export function dateFormatL(fmt, date) {
 	let ret;
 	const opt = {
@@ -58,7 +58,7 @@ export function	dateFormatL(fmt, date) {
 		};
 	};
 	return fmt;
-	}
+}
 export function dateFormatT(time) {
 	time = +time * 1000;
 	const d = new Date(time);
@@ -82,18 +82,49 @@ export function isType(arg, type) {
 }
 
 export function isWeixin() {
-	if(navigator&&navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1){
+	if (navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
 		return true
 	}
 	return false
 }
 
 export function parseQuery() {
+
+	// #ifdef H5
+
+	let res = {};
+
+	const query = (location.href.split("?")[1] || "")
+		.trim()
+		.replace(/^(\?|#|&)/, "");
+
+	if (!query) {
+		return res;
+	}
+
+	query.split("&").forEach(param => {
+		const parts = param.replace(/\+/g, " ").split("=");
+		const key = decodeURIComponent(parts.shift());
+		const val = parts.length > 0 ? decodeURIComponent(parts.join("=")) : null;
+
+		if (res[key] === undefined) {
+			res[key] = val;
+		} else if (Array.isArray(res[key])) {
+			res[key].push(val);
+		} else {
+			res[key] = [res[key], val];
+		}
+	});
+	// #endif
+	// #ifdef MP-WEIXIN
+
 	var pages = getCurrentPages() //获取加载的页面
 	var currentPage = pages[pages.length - 1] //获取当前页面的对象
 	var url = currentPage.route //当前页面url
-	var options = currentPage.options //如果要获取url中所带的参数可以查看options
+	res = currentPage.options //如果要获取url中所带的参数可以查看options
-	return options
+	// #endif
+
+	return res
 }
 
 /*获取当前页url*/
@@ -110,7 +141,6 @@ export function getCurrentPageUrlWithArgs() {
 	var currentPage = pages[pages.length - 1] //获取当前页面的对象
 	var url = currentPage.route //当前页面url
 	var options = currentPage.options //如果要获取url中所带的参数可以查看options
-
 	//拼接url的参数
 	var urlWithArgs = url + '?'
 	for (var key in options) {
@@ -118,7 +148,6 @@ export function getCurrentPageUrlWithArgs() {
 		urlWithArgs += key + '=' + value + '&'
 	}
 	urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
-
 	return urlWithArgs
 }
 
@@ -505,6 +534,7 @@ export function routerPermissions(url, type) {
 	if (!path) {
 		path = '/' + getCurrentPageUrlWithArgs()
 	}
+	console.log(Vue.prototype.$deviceType)
 	if (Vue.prototype.$deviceType == 'routine') {
 		console.log('————————')
 		console.log('当前是微信小程序，开始处理小程序登录方法')
@@ -577,6 +607,13 @@ export function routerPermissions(url, type) {
 			})
 			cookie.set('redirect', path)
 		})
+		// } else if (Vue.prototype.$deviceType == 'weixin') {
+		// wechat().then(() => oAuth());
+		// if (!type) {
+		// 	push({
+		// 		path: url,
+		// 	})
+		// }
 	} else {
 		// 如果不是小程序跳转到登录页
 		console.log('当前无法自动登录，开始处理登录方法')
@@ -680,11 +717,10 @@ export function handleQrCode() {
 }
 
 export function handleUrlParam(path) {
-	console.log(path)
+	var url = path.split("?")[1]; //获取url中"?"符后的字串
 	var theRequest = new Object();
 	if(path.includes("?")){
 		var url = path.split("?")[1]; //获取url中"?"符后的字串
-		console.log(url)
 		let strs = url.split("&");
 		for (var i = 0; i < strs.length; i++) {
 			theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
@@ -820,10 +856,8 @@ export const handleLoginFailure = () => {
 	console.log('————————')
 	store.commit("updateAuthorizationPage", true);
 	let path = '/' + getCurrentPageUrlWithArgs()
-	console.log("getCurrentPageUrl",getCurrentPageUrl());
 	//判断小程序转发分享商品详情进来的
-	if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) ) {
+	if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) && !handleQrCode()) {
-		debugger;
 		console.log('————————')
 		console.log('判断小程序转发分享商品详情进来的')
 		console.log(' handleUrlParam()', handleUrlParam(path))
@@ -895,7 +929,7 @@ export const handleLoginFailure = () => {
 	}
 
 	// 判断是不是转发分享的砍价海报进来的
-	if (getCurrentPageUrl() == 'pages/activity/DargainDetails/index' &&  handleUrlParam(path)) {
+	if (getCurrentPageUrl() == 'pages/activity/DargainDetails/index' && handleUrlParam(path) && !handleQrCode()) {
 		console.log('————————')
 		console.log('判断是不是转发分享的砍价海报进来的')
 		console.log('————————')
@@ -928,7 +962,6 @@ export const handleLoginFailure = () => {
 		if(!url){
 			url = handleUrlParam(path);
 		}
-		console.log(url)
 		if (url) {
 			path = parseUrl({
 				path: `/${getCurrentPageUrl()}`,

utils/store/cookie.js

@@ -37,6 +37,7 @@ function _has(key) {
     return
   }
   let value = uni.getStorageSync(key)
+  console.log(key)
   if (value) {
     return true
   }