From 39a280e9635ce38726df0cece53f37b99926e252 Mon Sep 17 00:00:00 2001
From: Gaoxs <704041637@qq.com>
Date: Mon, 7 Sep 2020 16:20:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=B0=8F=E7=A8=8B=E5=BA=8F?=
 =?UTF-8?q?=E9=80=80=E5=87=BA=E7=99=BB=E5=BD=95=E6=8C=89=E9=92=AE,?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E8=BD=AE=E6=92=AD=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E4=B8=8D=E5=8F=98=E5=8C=96=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/components/Banner.vue  | 176 ++++++++++++++++++++++++++++++
 pages/home/index.vue              | 131 ++--------------------
 pages/user/PersonalData/index.vue |  17 +--
 3 files changed, 193 insertions(+), 131 deletions(-)
 create mode 100644 pages/home/components/Banner.vue

diff --git a/pages/home/components/Banner.vue b/pages/home/components/Banner.vue
new file mode 100644
index 0000000..0bb0f1c
--- /dev/null
+++ b/pages/home/components/Banner.vue
@@ -0,0 +1,176 @@
+<template>
+    <view class="banner-swiper-box">
+        <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 list" :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 list.length" :key="index"></text>
+        </view>
+    </view>
+</template>
+
+<script>
+    import colorThief from 'miniapp-color-thief';
+
+    export default {
+        data() {
+            return {
+                swiperCurrent: 0, //轮播下标
+                webviewId: 0,
+                bgcolorAry: [],
+                list: []
+            };
+        },
+        props: {
+            banner: {
+                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];
+                if(!item){
+                    return
+                }
+                // 获取轮播图颜色
+                let bgcolor = this.bgcolorAry[this.swiperCurrent];
+                // 颜色不存在
+                if (!bgcolor) {
+                    let ctx = uni.createCanvasContext('colorThief', that.$scope);
+                    if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
+                        that.webviewId = ctx.webviewId;
+                        uni.getImageInfo({
+                            src: item.pic,
+                            success: function (image) {
+                                ctx.drawImage(image.path, 0, 0, image.width, image.height);
+                                ctx.draw(true, function (e) {
+                                    console.log(e)
+                                    uni.canvasGetImageData({
+                                        canvasId: 'colorThief',
+                                        x: 0,
+                                        y: 0,
+                                        width: parseInt(image.width),
+                                        height: parseInt(image.height),
+                                        success(res) {
+                                            let newBgcolor = colorThief(res.data)
+                                                .color()
+                                                .getHex();
+                                            that.$set(that.bgcolorAry, that
+                                                .swiperCurrent,
+                                                newBgcolor);
+                                            that.$emit('getbgcolor', newBgcolor);
+                                        },
+                                        fail: function (error) {
+                                        }
+                                    }, that.$scope);
+                                });
+                            },
+                            fail: function (error) {
+                            }
+                        });
+                    }
+                } else {
+                    that.$set(item, 'bgcolor', bgcolor);
+                    that.$emit('getbgcolor', bgcolor);
+                }
+            },
+            swiperChange(e) {
+                this.swiperCurrent = e.detail.current;
+                this.doColorThief();
+                let bgcolor = this.bgcolorAry[this.swiperCurrent];
+                this.$emit('getbgcolor', bgcolor);
+            },
+
+            // 路由跳转
+            goRoll(item) {
+                if (item.uniapp_url) {
+                    this.$yrouter.push(item.uniapp_url)
+                }
+            },
+        }
+
+    }
+</script>
+
+<style lang="less">
+    // 轮播
+    .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: 5;
+
+        .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;
+        }
+    }
+
+
+    .hide-canvas {
+        position: fixed !important;
+        top: -99999upx;
+        left: -99999upx;
+        z-index: -99999;
+    }
+</style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 46e5836..7713556 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -22,21 +22,7 @@
 				<image src="@/static/images/qr.png" />
 			</view>
 		</view>
-
-		<view class="banner-swiper-box" 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>
+		<Banner :banner="banner" @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">
@@ -56,7 +42,7 @@
 			<!-- 促销单品
 			<PromoteProduct :detail="benefit"></PromoteProduct> -->
 			<!-- 直播 -->
-			<Live :detail="live"></Live>
+			<!-- <Live :detail="live"></Live> -->
 
 			<!-- 为您推荐 -->
 			<PromotionGood :benefit="benefit"></PromotionGood>
@@ -66,8 +52,6 @@
 	</view>
 </template>
 <script>
-	import colorThief from 'miniapp-color-thief';
-
 	import {
 		mapState,
 		mapMutations,
@@ -81,10 +65,11 @@
 	import Adv from '@/components/sh-adv'
 	import Groupon from '@/components/sh-groupon.vue'
 
+	import Banner from './components/Banner';
 	import HotCommodity from './components/HotCommodity';
 	import FirstNewProduct from './components/FirstNewProduct';
 	import ProductsRecommended from './components/ProductsRecommended';
-	import Live from './components/Live';
+	// import Live from './components/Live';
 
 	import {
 		getHomeData,
@@ -110,10 +95,11 @@
 			Menu,
 			Adv,
 			Groupon,
+			Banner,
 			HotCommodity,
 			FirstNewProduct,
 			ProductsRecommended,
-			Live
+			// Live
 		},
 		props: {},
 		data: function () {
@@ -121,7 +107,6 @@
 				CustomBar: this.CustomBar,
 				StatusBar: this.StatusBar,
 				formatMenus: [],
-				bgcolorAry: [],
 				categoryCurrent: 0,
 				menuNum: 4,
 				bgcolor: '',
@@ -242,7 +227,7 @@
 				that.$set(that, 'combinationList', res.data.combinationList);
 				uni.hideLoading();
 				that.setOpenShare();
-				that.doColorThief()
+				// that.doColorThief()
 			});
 		},
 		methods: {
@@ -334,53 +319,9 @@
 								});
 								break;
 						}
-
-
 					}
 				});
 			},
-			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;
 			},
@@ -442,64 +383,6 @@
 		}
 	}
 
-	.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: 5;
-
-		.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%;
diff --git a/pages/user/PersonalData/index.vue b/pages/user/PersonalData/index.vue
index 65d8a3e..b8d4416 100644
--- a/pages/user/PersonalData/index.vue
+++ b/pages/user/PersonalData/index.vue
@@ -43,20 +43,23 @@
           <input type="text" v-else value="未绑定" disabled class="id" />
         </view>
       </view>
-      <!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
-        <view>密码</view>
-        <view class="input acea-row row-between-wrapper">
-          <text>点击修改密码</text>
-          <text class="iconfont icon-suozi"></text>
+      <!-- 
+        <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
+          <view>密码</view>
+          <view class="input acea-row row-between-wrapper">
+            <text>点击修改密码</text>
+            <text class="iconfont icon-suozi"></text>
+          </view>
         </view>
-      </view>-->
+      -->
     </view>
     <view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
+    <!-- #ifndef MP-WEIXIN -->
     <view
       class="logOut cart-color acea-row row-center-wrapper"
       @click="logout"
-      v-if="$deviceType!='routine'"
     >退出登录</view>
+    <!-- #endif -->
   </view>
 </template>
 <script>