[优化] 封装image组件，并更换

canteen/components/lf-image/lf-image.vue

@@ -0,0 +1,186 @@
+<template>
+	<image 
+		:class="{'loading': loading}"
+		:data-loading-text="loadingText"
+		:src="img_src" 
+		:mode="mode" 
+		:lazy-load="true" 
+		@click="click"
+		@load="load" 
+		@error="error">
+	</image>
+</template>
+
+<script>
+	export default {
+		props: {
+			src: {
+				type: String,
+				default: ''
+			},
+			mode: {
+				type: String,
+				default: 'scaleToFill'
+			},
+			errSrc: {
+				type: String,
+				default: '../../static/images/empty.png'
+			},
+			loadingText: {
+				type: String,
+				default: '正在加载中'
+			}
+		},
+		data(){
+			return {
+				img_src: this.src,
+				loading: true
+			}
+		},
+		methods: {
+			load(event){
+				this.loading = false;
+			},
+			error(event){
+				this.loading = false;
+				this.img_src = this.$props.errSrc;
+			},
+			click(event){
+				this.$emit('click', event);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.loading{
+		position: relative;
+		// background-color: #e5e5e5;
+		background: linear-gradient(-45deg, #e5e5e5, #d9d9d9, #f1f3f5, #f0f0f0);
+		animation: gradientBG 15s ease infinite;
+		background-size: 400% 400%;
+		transition: all 1s;
+		&::after{
+			content: attr(data-loading-text);
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			color: #969696;
+			font-size: 20rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-wrap: wrap;
+			animation: flicker-in-1 2s linear both infinite;
+			transition: all 2s;
+		}
+	}
+	@keyframes gradientBG {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+	@keyframes flicker-in-1 {
+	  0% {
+	    opacity: 0.5;
+	  }
+	  10% {
+	    opacity: 0.5;
+	  }
+	  10.1% {
+	    opacity: 1;
+	  }
+	  10.2% {
+	    opacity: 0.5;
+	  }
+	  20% {
+	    opacity: 0.5;
+	  }
+	  20.1% {
+	    opacity: 1;
+	  }
+	  20.6% {
+	    opacity: 0.5;
+	  }
+	  30% {
+	    opacity: 0.5;
+	  }
+	  30.1% {
+	    opacity: 1;
+	  }
+	  30.5% {
+	    opacity: 1;
+	  }
+	  30.6% {
+	    opacity: 0.5;
+	  }
+	  45% {
+	    opacity: 0.5;
+	  }
+	  45.1% {
+	    opacity: 1;
+	  }
+	  50% {
+	    opacity: 1;
+	  }
+	  55% {
+	    opacity: 1;
+	  }
+	  55.1% {
+	    opacity: 0.5;
+	  }
+	  57% {
+	    opacity: 0.5;
+	  }
+	  57.1% {
+	    opacity: 1;
+	  }
+	  60% {
+	    opacity: 1;
+	  }
+	  60.1% {
+	    opacity: 0.5;
+	  }
+	  65% {
+	    opacity: 0.5;
+	  }
+	  65.1% {
+	    opacity: 1;
+	  }
+	  75% {
+	    opacity: 1;
+	  }
+	  75.1% {
+	    opacity: 0.5;
+	  }
+	  77% {
+	    opacity: 0.5;
+	  }
+	  77.1% {
+	    opacity: 1;
+	  }
+	  85% {
+	    opacity: 1;
+	  }
+	  85.1% {
+	    opacity: 0.5;
+	  }
+	  86% {
+	    opacity: 0.5;
+	  }
+	  86.1% {
+	    opacity: 1;
+	  }
+	  100% {
+	    opacity: 1;
+	  }
+	}
+</style>

canteen/main.js

@@ -33,6 +33,9 @@ Vue.component('lf-stepbar', lfStepbar);
 // 预览图片组件
 import lfPreviewImage from '@/components/lf-previewImage/lf-previewImage';
 Vue.component('lf-previewimage', lfPreviewImage);
+// 页面image组件
+import lfImage from '@/components/lf-image/lf-image';
+Vue.component('lf-image', lfImage);
 
 const app = new Vue({
     ...App

canteen/pages/index/index.vue

@@ -1,8 +1,7 @@
 <template>
 	<view>
 		<view class="lf-row-center lf-flex-column head" v-if="$isRight(canteen)">
-			<image :src="canteen.avatar" v-if="canteen.avatar"></image>
-			<image src="../../static/images/default_avatar.png" v-else></image>
+			<lf-image :src="canteen.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
 			<view class="lf-m-t-20 lf-font-32 lf-font-bold lf-color-black">{{ canteen.name }}</view>
 			<view class="lf-font-28 lf-color-555 lf-m-t-10">{{ canteen.role }}</view>
 		</view>

canteen/pages/purchase/detail.vue

@@ -3,8 +3,7 @@
 		<block v-if="$isRight(order)">
 			<view class="head">
 				<view class="lf-row-between list">
-					<image :src="order.supplier.logo" class="image" v-if="order.supplier.logo"></image>
-					<image src="../../static/images/supplier_avatar.png" class="image" v-else></image>
+					<lf-image :src="order.supplier.logo" errSrc="../../static/images/supplier_avatar.png" class="image"></lf-image>
 					<view class="info">
 						<view class="lf-font-32 lf-color-black lf-font-bold">{{ order.supplier.supplier_name }}</view>
 						<view class="lf-font-24 lf-color-555">{{ order.supplier.address }}</view>
@@ -45,13 +44,13 @@
 				<view class="list" v-if="supplier_voucher.length">
 					<view>供应商证明材料</view>
 					<view class="lf-flex-wrap lf-m-t-10">
-						<image :src="item" @click="lookImage(index, 'supplier_voucher')" class="ms-img" v-for="(item, index) in supplier_voucher" :key="index"></image>
+						<lf-image :src="item" @click="lookImage(index, 'supplier_voucher')" class="ms-img" v-for="(item, index) in supplier_voucher" :key="index"></lf-image>
 					</view>
 				</view>
 				<view class="list" v-if="canteen_voucher.length">
 					<view>食堂证明材料</view>
 					<view class="lf-flex-wrap lf-m-t-10">
-						<image :src="item" @click="lookImage(index, 'canteen_voucher')" class="ms-img" v-for="(item, index) in canteen_voucher" :key="index"></image>
+						<lf-image :src="item" @click="lookImage(index, 'canteen_voucher')" class="ms-img" v-for="(item, index) in canteen_voucher" :key="index"></lf-image>
 					</view>
 				</view>
 			</view>
@@ -400,7 +399,7 @@
 				width: 140rpx;
 				height: 140rpx;
 				border-radius: 10rpx;
-				background-color: #EEEEEE;
+				// background-color: #EEEEEE;
 			}
 			.info{
 				display: flex;

canteen/pages/purchase/receipt.vue

@@ -45,7 +45,7 @@
 			<view :style="upload_list.length ? 'height: 260rpx' : 'height: 140rpx'"></view>
 			<!-- 凭证图 -->
 			<view class="fixed-images" v-if="upload_list.length">
-				<image class="ms-img" :src="item" @click="lookImage(index)" v-for="(item, index) in upload_list" :key="index" v-if="index < 6"></image>
+				<lf-image class="ms-img" :src="item" @click="lookImage(index)" v-for="(item, index) in upload_list" :key="index" v-if="index < 6"></lf-image>
 			</view>
 			<view class="fixed-bottom" v-if="list.length">
 				<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>

supplier/components/lf-image/lf-image.vue

@@ -0,0 +1,186 @@
+<template>
+	<image 
+		:class="{'loading': loading}"
+		:data-loading-text="loadingText"
+		:src="img_src" 
+		:mode="mode" 
+		:lazy-load="true" 
+		@click="click"
+		@load="load" 
+		@error="error">
+	</image>
+</template>
+
+<script>
+	export default {
+		props: {
+			src: {
+				type: String,
+				default: ''
+			},
+			mode: {
+				type: String,
+				default: 'scaleToFill'
+			},
+			errSrc: {
+				type: String,
+				default: '../../static/images/empty.png'
+			},
+			loadingText: {
+				type: String,
+				default: '正在加载中'
+			}
+		},
+		data(){
+			return {
+				img_src: this.src,
+				loading: true
+			}
+		},
+		methods: {
+			load(event){
+				this.loading = false;
+			},
+			error(event){
+				this.loading = false;
+				this.img_src = this.$props.errSrc;
+			},
+			click(event){
+				this.$emit('click', event);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.loading{
+		position: relative;
+		// background-color: #e5e5e5;
+		background: linear-gradient(-45deg, #e5e5e5, #d9d9d9, #f1f3f5, #f0f0f0);
+		animation: gradientBG 15s ease infinite;
+		background-size: 400% 400%;
+		transition: all 1s;
+		&::after{
+			content: attr(data-loading-text);
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			color: #969696;
+			font-size: 20rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-wrap: wrap;
+			animation: flicker-in-1 2s linear both infinite;
+			transition: all 2s;
+		}
+	}
+	@keyframes gradientBG {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+	@keyframes flicker-in-1 {
+	  0% {
+	    opacity: 0.5;
+	  }
+	  10% {
+	    opacity: 0.5;
+	  }
+	  10.1% {
+	    opacity: 1;
+	  }
+	  10.2% {
+	    opacity: 0.5;
+	  }
+	  20% {
+	    opacity: 0.5;
+	  }
+	  20.1% {
+	    opacity: 1;
+	  }
+	  20.6% {
+	    opacity: 0.5;
+	  }
+	  30% {
+	    opacity: 0.5;
+	  }
+	  30.1% {
+	    opacity: 1;
+	  }
+	  30.5% {
+	    opacity: 1;
+	  }
+	  30.6% {
+	    opacity: 0.5;
+	  }
+	  45% {
+	    opacity: 0.5;
+	  }
+	  45.1% {
+	    opacity: 1;
+	  }
+	  50% {
+	    opacity: 1;
+	  }
+	  55% {
+	    opacity: 1;
+	  }
+	  55.1% {
+	    opacity: 0.5;
+	  }
+	  57% {
+	    opacity: 0.5;
+	  }
+	  57.1% {
+	    opacity: 1;
+	  }
+	  60% {
+	    opacity: 1;
+	  }
+	  60.1% {
+	    opacity: 0.5;
+	  }
+	  65% {
+	    opacity: 0.5;
+	  }
+	  65.1% {
+	    opacity: 1;
+	  }
+	  75% {
+	    opacity: 1;
+	  }
+	  75.1% {
+	    opacity: 0.5;
+	  }
+	  77% {
+	    opacity: 0.5;
+	  }
+	  77.1% {
+	    opacity: 1;
+	  }
+	  85% {
+	    opacity: 1;
+	  }
+	  85.1% {
+	    opacity: 0.5;
+	  }
+	  86% {
+	    opacity: 0.5;
+	  }
+	  86.1% {
+	    opacity: 1;
+	  }
+	  100% {
+	    opacity: 1;
+	  }
+	}
+</style>

supplier/main.js

@@ -33,6 +33,9 @@ Vue.component('lf-stepbar', lfStepbar);
 // 预览图片组件
 import lfPreviewImage from '@/components/lf-previewImage/lf-previewImage';
 Vue.component('lf-previewimage', lfPreviewImage);
+// 页面image组件
+import lfImage from '@/components/lf-image/lf-image';
+Vue.component('lf-image', lfImage);
 
 const app = new Vue({
     ...App

supplier/pages/gonghuo/detail.vue

@@ -2,8 +2,7 @@
 	<view>
 		<view class="head">
 			<view class="lf-row-between list" v-if="order.canteen">
-				<image :src="order.canteen.logo" class="image" v-if="order.canteen.logo"></image>
-				<image src="../../static/images/canteen_avatar.png" class="image" v-else></image>
+				<lf-image class="image" :src="order.canteen.logo" errSrc="../../static/images/canteen_avatar.png"></lf-image>
 				<view class="info">
 					<view class="lf-font-32 lf-color-black lf-font-bold">{{ order.canteen.canteen_name }}</view>
 					<view class="lf-font-24 lf-color-555">{{ order.canteen.address }}</view>
@@ -58,13 +57,13 @@
 			<view class="list" v-if="supplier_voucher.length">
 				<view>供应商证明材料</view>
 				<view class="lf-flex-wrap lf-m-t-10">
-					<image :src="item" class="ms-img" @click="lookImage(index, 'supplier_voucher')" v-for="(item, index) in supplier_voucher" :key="index"></image>
+					<lf-image :src="item" class="ms-img" @click="lookImage(index, 'supplier_voucher')" v-for="(item, index) in supplier_voucher" :key="index"></lf-image>
 				</view>
 			</view>
 			<view class="list" v-if="canteen_voucher.length">
 				<view>食堂证明材料</view>
 				<view class="lf-flex-wrap lf-m-t-10">
-					<image :src="item" class="ms-img" @click="lookImage(index, 'canteen_voucher')" v-for="(item, index) in canteen_voucher" :key="index"></image>
+					<lf-image :src="item" class="ms-img" @click="lookImage(index, 'canteen_voucher')" v-for="(item, index) in canteen_voucher" :key="index"></lf-image>
 				</view>
 			</view>
 		</view>

supplier/pages/index/index.vue

@@ -1,8 +1,7 @@
 <template>
 	<view>
 		<view class="lf-row-center lf-flex-column head" v-if="$isRight(supplier)">
-			<image :src="supplier.avatar" v-if="supplier.avatar"></image>
-			<image src="../../static/images/default_avatar.png" v-else></image>
+			<lf-image :src="supplier.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
 			<view class="lf-m-t-20 lf-font-32 lf-font-bold lf-color-black">{{ supplier.name }}</view>
 			<view class="lf-font-28 lf-color-555 lf-m-t-10">{{ supplier.role }}</view>
 		</view>