mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-06-11 14:17:25 +08:00
优化代码
This commit is contained in:
wuxw
parent
a77b783795
commit
2f898ef12d
@ -10,7 +10,7 @@
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="bg-img" v-for="(img,index) in imgList" @click.stop="preview(index)">
|
||||
<view class="bg-img" v-for="(img,index) in imgList" :key="index" @click.stop="preview(index)">
|
||||
<image :src="img" mode='aspectFill'></image>
|
||||
<view class="cu-tag bg-red" v-if="canEdit" @tap.stop="deleteImage(index)">
|
||||
<text class="cuIcon-close"></text>
|
||||
@ -21,17 +21,22 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--#ifdef MP-WEIXIN -->
|
||||
<canvas canvas-id="materCanvas" style="display: none;" type="2d" id="materCanvas"></canvas>
|
||||
<!--#endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
|
||||
import conf from '../../conf/config.js'
|
||||
import {uploadImageAsync} from '../../api/common/commonApi.js'
|
||||
import {
|
||||
uploadImageAsync
|
||||
} from '../../api/common/commonApi.js'
|
||||
const context = require("../../lib/java110/Java110Context.js");
|
||||
const factory = context.factory;
|
||||
export default {
|
||||
name:"vc-upload",
|
||||
name: "vc-upload",
|
||||
data() {
|
||||
return {
|
||||
photos: [],
|
||||
@ -79,14 +84,14 @@
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
photos:function(val){
|
||||
watch: {
|
||||
photos: function(val) {
|
||||
this.sendData();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mounted() {
|
||||
if(this.sendImgList.length > 0){
|
||||
if (this.sendImgList.length > 0) {
|
||||
uni.showLoading({
|
||||
title: "图片加载中...",
|
||||
mask: true
|
||||
@ -99,19 +104,25 @@
|
||||
if (item.indexOf("https") > -1 || item.indexOf("http") > -1 || item.indexOf(this.photoUrl) > -1) {
|
||||
this.imgList.push(item);
|
||||
let urlParams = this._getUrlParams(item);
|
||||
if(urlParams['fileId']){
|
||||
this.photos.push({fileId:urlParams['fileId'], url:item});
|
||||
if (urlParams['fileId']) {
|
||||
this.photos.push({
|
||||
fileId: urlParams['fileId'],
|
||||
url: item
|
||||
});
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
let url = this.photoUrl + "?fileId=" + item + "&communityId=-1&time=" + new Date();
|
||||
this.imgList.push(url);
|
||||
this.photos.push({fileId:item, url:url});
|
||||
this.photos.push({
|
||||
fileId: item,
|
||||
url: url
|
||||
});
|
||||
}
|
||||
})
|
||||
uni.hideLoading();
|
||||
console.log(this.imgList);
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 向父组件传递base64数据
|
||||
sendData() {
|
||||
this.$emit('sendImagesData', this.photos)
|
||||
@ -123,8 +134,9 @@
|
||||
},
|
||||
// 添加
|
||||
ChooseImage: function() {
|
||||
console.log(this.count,this.sizeType,this.sourceType)
|
||||
let that = this;
|
||||
wx.chooseImage({
|
||||
uni.chooseImage({
|
||||
count: this.count, // 选择数量
|
||||
sizeType: this.sizeType, //原图或压缩图
|
||||
sourceType: this.sourceType, // 相册或拍摄
|
||||
@ -132,20 +144,7 @@
|
||||
var tempFilePaths = upImgRes.tempFilePaths[0]
|
||||
that.imgList.push(tempFilePaths);
|
||||
that.$forceUpdate();
|
||||
//#ifdef H5
|
||||
TanslateImage.translate(tempFilePaths, (base64) => {
|
||||
let _objData = {
|
||||
uploadFile: base64,
|
||||
communityId: that.communityId
|
||||
}
|
||||
uploadImageAsync(_objData, that).then((res) => {
|
||||
that.photos.push(res);
|
||||
})
|
||||
})
|
||||
//#endif
|
||||
|
||||
//#ifndef H5
|
||||
factory.base64.urlTobase64(tempFilePaths).then(function(base64) {
|
||||
TanslateImage.translate(this,tempFilePaths, (base64) => {
|
||||
let _objData = {
|
||||
uploadFile: base64,
|
||||
communityId: that.communityId
|
||||
@ -154,21 +153,22 @@
|
||||
that.photos.push(res);
|
||||
})
|
||||
});
|
||||
//#endif
|
||||
},fail:(e)=> {
|
||||
console.error(e)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览
|
||||
preview: function(index){
|
||||
preview: function(index) {
|
||||
let urls = this.imgList;
|
||||
// 空集合 return
|
||||
if(urls.length < 1){
|
||||
if (urls.length < 1) {
|
||||
return;
|
||||
}
|
||||
// domain拼接
|
||||
urls.forEach((item, index) => {
|
||||
let start = item.indexOf("/callComponent");
|
||||
if(start == 0){
|
||||
if (start == 0) {
|
||||
urls[index] = conf.commonBaseUrl + item;
|
||||
}
|
||||
})
|
||||
@ -182,4 +182,4 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</style>
|
||||
@ -15,16 +15,16 @@ const baseUrl = '/';
|
||||
|
||||
// #ifndef H5
|
||||
//服务器域名 小程序 或者 app 时 后端地址
|
||||
const baseUrl = 'http://demo.homecommunity.cn/';
|
||||
const baseUrl = 'https://wuye.yunxiaowuye.com/';
|
||||
// #endif
|
||||
|
||||
let commonBaseUrl = 'http://demo.homecommunity.cn/';
|
||||
let commonBaseUrl = 'https://wuye.yunxiaowuye.com/';
|
||||
|
||||
//商城的url
|
||||
let mallUrl = 'https://mallapp.huilinwan.cn/';
|
||||
let mallUrl = 'https://mallapp.yunxiaowuye.com/';
|
||||
|
||||
//商城小程序ID
|
||||
let mallMinAppId = "wx7a01aad34e06840f";
|
||||
let mallMinAppId = "wxa4211361ca1e1bfb";
|
||||
|
||||
//默认的小区ID和名称，用户还没有登录时显示的小区信息
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
|
||||
|
||||
|
||||
/**
|
||||
|
||||
* 压缩
|
||||
@ -8,7 +11,17 @@
|
||||
|
||||
*/
|
||||
|
||||
export function translate(imgSrc, callback) {
|
||||
export function translate(that, imgSrc, callback) {
|
||||
// #ifndef H5
|
||||
imageToBease64(that, imgSrc, callback)
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
translateH5(imgSrc, callback)
|
||||
// #endif
|
||||
}
|
||||
|
||||
export function translateH5(imgSrc, callback) {
|
||||
|
||||
var img = new Image();
|
||||
|
||||
@ -62,21 +75,52 @@ export function translate(imgSrc, callback) {
|
||||
|
||||
canvas = null;
|
||||
|
||||
// var blob = base64ToBlob(base64);
|
||||
|
||||
// console.log(333);
|
||||
// console.log(base64)
|
||||
|
||||
//Blob对象转blob地址
|
||||
|
||||
// var blobUrl = window.URL.createObjectURL(blob);
|
||||
|
||||
callback(base64);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 图片转base64
|
||||
*
|
||||
* @param imageUrl 图片地址
|
||||
* @param callback 回调
|
||||
*/
|
||||
function imageToBease64(that, imageUrl, callback) {
|
||||
wx.getImageInfo({
|
||||
src: imageUrl,
|
||||
success(imgData) {
|
||||
const query = that.createSelectorQuery();
|
||||
query.select('#materCanvas').fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
const canvas = res[0].node;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const image = canvas.createImage();
|
||||
canvas.width = imgData.width;
|
||||
canvas.height = imgData.height;
|
||||
|
||||
image.src = imgData.path;
|
||||
image.onload = function() {
|
||||
const canvasWidth = imgData.width; // 获取图片宽度
|
||||
const canvasHeight = imgData.height; // 获取图片高度
|
||||
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight); // 绘制图片
|
||||
|
||||
//压缩比例
|
||||
let quality = 0.3;
|
||||
let base64 = canvas.toDataURL('image/jpeg', quality);
|
||||
callback(base64);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
* base转Blob对象
|
||||
|
||||
@ -59,12 +59,12 @@
|
||||
"quickapp" : {},
|
||||
"mp-weixin" : {
|
||||
"usingComponents" : true,
|
||||
"appid" : "wxad57531dabaed887",
|
||||
"appid" : "wx7e46e694ab977a6b",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"es6" : false
|
||||
},
|
||||
"navigateToMiniProgramAppIDList" : [ "wx7a01aad34e06840f" ], //商城小程序AppId
|
||||
"navigateToMiniProgramAppIDList" : [ "wxa4211361ca1e1bfb" ], //商城小程序AppId
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user