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

[优化] lf-image组件在小程序端显示异常问题 

[新增] 预览图片组件拓展菜单功能
master
邓平艺 5 years ago
parent
cdc5838a81
commit
9bfb7c8031
6 changed files with 141 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      canteen/components/lf-image/lf-image.vue
  2. 82
      canteen/components/lf-previewImage/lf-previewImage.vue
  3. 4
      canteen/pages/index/index.vue
  4. 4
      supplier/components/lf-image/lf-image.vue
  5. 51
      supplier/components/lf-previewImage/lf-previewImage.vue
  6. 4
      supplier/pages/index/index.vue

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

@ -53,6 +53,10 @@
</script> </script>
<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
image{
width: 100%;
height: 100%;
}
.loading{ .loading{
position: relative; position: relative;
// background-color: #e5e5e5; // background-color: #e5e5e5;

82
canteen/components/lf-previewImage/lf-previewImage.vue
View File

@ -5,6 +5,7 @@
'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}" 'background-color': perspective ? 'rgba(0,0,0,0.5)' : '#000000'}"
:current="swiper_current" :circular="circular" :current="swiper_current" :circular="circular"
v-if="show_assembly" @click="hideAssembly" v-if="show_assembly" @click="hideAssembly"
@transition="transition"
@touchmove.stop.prevent="touchmove" @touchmove.stop.prevent="touchmove"
@change="e => switchItem(e.detail.current)"> @change="e => switchItem(e.detail.current)">
<swiper-item v-for="(item, index) in images" :key="index" <swiper-item v-for="(item, index) in images" :key="index"
@ -12,7 +13,7 @@
<!-- 可移动缩放操作的容器 --> <!-- 可移动缩放操作的容器 -->
<movable-area class="movable-area" :scale-area="true"> <movable-area class="movable-area" :scale-area="true">
<movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]"> <movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]">
<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel"></image>
<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel" @longpress="longpress"></image>
</movable-view> </movable-view>
</movable-area> </movable-area>
<!-- 控制器 --> <!-- 控制器 -->
@ -40,6 +41,10 @@
<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view> <view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
</view> </view>
</view> </view>
<!-- 底部菜单弹出层 -->
<view class="menu-popup" v-if="menu && show_menu" @click.stop>
<button @click="download">保存图片</button>
</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
@ -75,6 +80,10 @@
animation: { animation: {
type: Boolean, // 是否开启动画 type: Boolean, // 是否开启动画
default: false default: false
},
menu: {
type: Boolean, // 长按图片时是否显示菜单按钮，H5不支持，传参无效果
default: true
} }
}, },
data(){ data(){
@ -86,7 +95,8 @@
animationObj: {}, // 动画配置对象 animationObj: {}, // 动画配置对象
animationData: {}, // 动画导出执行对象 animationData: {}, // 动画导出执行对象
scale_values: [], // 每张图的缩放比例 scale_values: [], // 每张图的缩放比例
clientY: 0
clientY: 0,
show_menu: false
} }
}, },
created(){ created(){
@ -109,6 +119,12 @@
touchmove(){ touchmove(){
return false; return false;
}, },
// swiper 位置发生变化
transition(){
if(this.show_menu){
this.show_menu = false;
}
},
// swiper被改变 // swiper被改变
switchItem(current){ switchItem(current){
this.swiper_current = current; this.swiper_current = current;
@ -151,6 +167,10 @@
}, },
// 关闭隐藏图片 // 关闭隐藏图片
hideAssembly(){ hideAssembly(){
if(this.show_menu){
this.show_menu = false;
return;
}
if(this.$props.animation){ if(this.$props.animation){
this.animationObj.opacity(0).step(); this.animationObj.opacity(0).step();
this.animationData = this.animationObj.export(); this.animationData = this.animationObj.export();
@ -160,6 +180,44 @@
}else{ }else{
this.show_assembly = false; this.show_assembly = false;
} }
},
// 长按事件
longpress(event){
// #ifndef H5
if(this.$props.menu){
this.show_menu = true;
}
// #endif
},
// 保存图片
download(){
uni.showLoading({
title: '正在保存'
})
this.show_menu = false;
uni.downloadFile({
url: this.images[this.swiper_current],
success: res => {
let tempFilePath = res.tempFilePath;
uni.saveFile({
tempFilePath,
success: result => {
uni.showToast({
title: '保存成功',
icon: 'success'
})
},
fail: err => {
uni.showToast({
title: '保存失败',
icon: 'none'
})
},
complete: () => uni.hideLoading()
})
},
complete: () => uni.hideLoading()
})
} }
} }
} }
@ -230,6 +288,26 @@
} }
} }
} }
.menu-popup{
position: fixed;
bottom: 0;
left: 0;
height: max-content;
width: 100%;
background-color: #FFFFFF;
z-index: 1004;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
button{
height: 100rpx;
line-height: 100rpx;
background-color: transparent;
border-bottom: 1rpx solid #e5e5e5;
&:last-child{
border-bottom: none;
}
}
}
// 轻提示框样式 // 轻提示框样式
/deep/.uni-sample-toast{ /deep/.uni-sample-toast{
z-index: 1002; z-index: 1002;

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

@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<view class="lf-row-center lf-flex-column head" v-if="$isRight(canteen)"> <view class="lf-row-center lf-flex-column head" v-if="$isRight(canteen)">
<lf-image :src="canteen.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
<lf-image class="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-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 class="lf-font-28 lf-color-555 lf-m-t-10">{{ canteen.role }}</view>
</view> </view>
@ -99,7 +99,7 @@
width: 750rpx; width: 750rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
image {
.image {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border: 2rpx solid #FFFFFF; border: 2rpx solid #FFFFFF;

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

@ -53,6 +53,10 @@
</script> </script>
<style lang="scss" scoped="scoped"> <style lang="scss" scoped="scoped">
image{
width: 100%;
height: 100%;
}
.loading{ .loading{
position: relative; position: relative;
// background-color: #e5e5e5; // background-color: #e5e5e5;

51
supplier/components/lf-previewImage/lf-previewImage.vue
View File

@ -12,7 +12,7 @@
<!-- 可移动缩放操作的容器 --> <!-- 可移动缩放操作的容器 -->
<movable-area class="movable-area" :scale-area="true"> <movable-area class="movable-area" :scale-area="true">
<movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]"> <movable-view class="movable-view" direction="all" :scale="true" :inertia="true" @scale="scale" :scale-value="scale_values[swiper_current]">
<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel"></image>
<image :src="item" class="swiper-image" mode="aspectFit" @mousewheel.stop="mousewheel" @longpress="longpress"></image>
</movable-view> </movable-view>
</movable-area> </movable-area>
<!-- 控制器 --> <!-- 控制器 -->
@ -40,6 +40,10 @@
<view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view> <view v-for="(item, index) in images" :key="index" class="indicators-icon" :style="swiper_current == index ? 'background-color:'+ themeColor : ''"></view>
</view> </view>
</view> </view>
<!-- 底部菜单弹出层 -->
<view class="menu-popup" v-if="menu && show_menu" @click.stop>
<button @click="download">保存图片</button>
</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
@ -75,6 +79,10 @@
animation: { animation: {
type: Boolean, // 是否开启动画 type: Boolean, // 是否开启动画
default: false default: false
},
menu: {
type: Boolean, // 长按图片时是否显示菜单按钮，H5不支持，传参无效果
default: true
} }
}, },
data(){ data(){
@ -86,7 +94,8 @@
animationObj: {}, // 动画配置对象 animationObj: {}, // 动画配置对象
animationData: {}, // 动画导出执行对象 animationData: {}, // 动画导出执行对象
scale_values: [], // 每张图的缩放比例 scale_values: [], // 每张图的缩放比例
clientY: 0
clientY: 0,
show_menu: false
} }
}, },
created(){ created(){
@ -160,6 +169,44 @@
}else{ }else{
this.show_assembly = false; this.show_assembly = false;
} }
},
// 长按事件
longpress(event){
// #ifndef H5
if(this.$props.menu){
this.show_menu = true;
}
// #endif
},
// 保存图片
download(){
uni.showLoading({
title: '正在保存'
})
this.show_menu = false;
uni.downloadFile({
url: this.images[this.swiper_current],
success: res => {
let tempFilePath = res.tempFilePath;
uni.saveFile({
tempFilePath,
success: result => {
uni.showToast({
title: '保存成功',
icon: 'success'
})
},
fail: err => {
uni.showToast({
title: '保存失败',
icon: 'none'
})
},
complete: () => uni.hideLoading()
})
},
complete: () => uni.hideLoading()
})
} }
} }
} }

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

@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<view class="lf-row-center lf-flex-column head" v-if="$isRight(supplier)"> <view class="lf-row-center lf-flex-column head" v-if="$isRight(supplier)">
<lf-image :src="supplier.avatar" errSrc="../../static/images/default_avatar.png"></lf-image>
<lf-image class="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-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 class="lf-font-28 lf-color-555 lf-m-t-10">{{ supplier.role }}</view>
</view> </view>
@ -101,7 +101,7 @@
height: 374rpx; height: 374rpx;
width: 750rpx; width: 750rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
image{
.image{
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border: 2rpx solid #FFFFFF; border: 2rpx solid #FFFFFF;

Write Preview
Loading…
Cancel
Save