Leadfyy.co
/
uniapp-supplychain
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
邓平艺 5 years ago
parent
a6ea960513
commit
cdc5838a81
9 changed files with 388 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 186
      canteen/components/lf-image/lf-image.vue
  2. 3
      canteen/main.js
  3. 3
      canteen/pages/index/index.vue
  4. 9
      canteen/pages/purchase/detail.vue
  5. 2
      canteen/pages/purchase/receipt.vue
  6. 186
      supplier/components/lf-image/lf-image.vue
  7. 3
      supplier/main.js
  8. 7
      supplier/pages/gonghuo/detail.vue
  9. 3
      supplier/pages/index/index.vue

186
canteen/components/lf-image/lf-image.vue
View File

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

3
canteen/main.js
View File

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

3
canteen/pages/index/index.vue
View File

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

9
canteen/pages/purchase/detail.vue
View File

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

2
canteen/pages/purchase/receipt.vue
View File

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

186
supplier/components/lf-image/lf-image.vue
View File

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

3
supplier/main.js
View File

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

7
supplier/pages/gonghuo/detail.vue
View File

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

3
supplier/pages/index/index.vue
View File

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

Write Preview
Loading…
Cancel
Save