开发微信公众号h5页面,在solve、submit两个组件使用到了上传图片wx.chooseImage,在线上时:安卓手机先打开solve文件中的这个没有反应,先打开submit文件中的这个上传图片再打开solve中的,solve中的就可以打开了。苹果手机没有这个问题,为什么呢?
代码:
微信配置函数:
export function wxConfig(jsApiList, ) {
let app = getApp();
// url
let url = window.location.href;
if (uni.getSystemInfoSync().platform === 'ios') {
url = app.globalData.firstPage;
}
Request.get(RequestConstant.wxSignatureUrl, {
url: encodeURIComponent(url)
}).then(res => {
if (res.code == 200) {
let data = res.result;
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.noncestr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: jsApiList // 必填,需要使用的JS接口列表
})
}
});
}
solve文件内容:
<template>
<view>
<view class="cu-bar bg-white margin-top">
<view class="action cuIcon-title text-orange">
<text class="text-black">上传图片</text>
</view>
<view class="action">
{{imgList.length}}/9
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="deleteImage(index)">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="flex flex-direction logout-panel">
<button class="cu-btn bg-blue margin-tb-sm lg" @click="submit()">确认提交</button>
</view>
</view>
</template>
<script>
const jweixin = require('jweixin-module')
import {
RequestConstant
} from '@/util/constant.js'
import {
formatDate,
wxConfig,
uploadBase64DataToQiniu
} from '@/util/util.js'
import {
pathToBase64
} from '@/js_sdk/gsq-image-tools/image-tools/index.js';
import moment from 'moment'
export default {
data() {
return {
order: null,
orderId: null,
orderInfo: null,
operationId: 0,
operation: ['确认关闭', '确认退回', '确认关闭', '确认关闭'],
imgList: [],
remark: '',
status: 6,
ot: 6,
}
},
methods: {
chooseImage() {
uni.hideKeyboard();
let that = this
jweixin.chooseImage({
count: 9 - that.imgList.length,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
let localIds = res.localIds;
if (localIds.length > 0) {
uni.showLoading({
title: '图片上传中',
mask: true
})
that.uploadOneByOne(localIds, 0)
}
}
})
uni.hideKeyboard();
},
uploadOneByOne(localIds, index) {
let that = this;
// 获取本地图片的base64数据
jweixin.getLocalImgData({
localId: localIds[index],
success: function(res) {
let localData = res.localData;
// 上传至七牛云, 上传成功后返回文件url
uploadBase64DataToQiniu(localData).then(filePath => {
that.imgList.push(filePath);
// 执行下一张图片的上传
if (index < localIds.length - 1) {
that.uploadOneByOne(localIds, index + 1)
} else {
uni.hideLoading()
}
})
}
});
},
deleteImage(index) {
// 移除元素
this.imgList.splice(index, 1);
},
submit() {
uni.hideKeyboard();
let that = this;
let imgStr = '';
that.imgList.forEach(img => {
imgStr = imgStr + img + ',';
});
imgStr = imgStr.substr(0, imgStr.length - 1);
let data = Object.assign({}, that.order);
let user = uni.getStorageSync('user');
data['contact'] = user.phone;
data['id'] = that.orderId;
data['repairTime'] = moment().format("YYYY-MM-DD HH:mm:ss");
let stringImg = ''
if (data['afterImguri']) {
if (imgStr) {
stringImg = imgStr + ',' + data['afterImguri']
} else {
stringImg = data['afterImguri']
}
}
data['afterImguri'] = stringImg
data['afterImg'] = imgStr
data['status'] = 0;
// data['afterDesc'] = that.remark;
// 测试先关掉
if (!imgStr) { //测试图片再放开
uni.showModal({
title: '提示',
content: "请至少上传一张图片"
})
return;
}
// if (that.ot == 1) {
// data['status'] = 6;
// } else {
// data['status'] = 4;
// }
data['operationId'] = user.id;
data['updateBy'] = user.id;
data['operationName'] = user
.realname;
data['updateByName'] = user.realname;
data['limitTime'] = moment(that.order.limitTime)
.valueOf(); //转时间戳
data['isRedo'] = 0; //转时间戳
// if (user.roles.findIndex(role => role.id == 2) > -1) {
// data['isClose'] = 1;
// } else {
// data['isClose'] = 0;
// }
// data['isClose'] = 0;
uni.showLoading({
title: '请稍候',
mask: true
})
// let url = RequestConstant.handle;//之前的提交关闭原因和图片
let url = RequestConstant.orderEdit;
console.log('data', data);
that.$put(url, data).then(res => {
// that.$post(url, data).then(res => {
uni.hideLoading();
if (res.code == 200) {
uni.showToast({
title: res.message,
icon: 'none'
})
uni.navigateBack({
delta: 1
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
console.log('err', err);
if (err.statusCode == 200) {
uni.hideLoading();
// that.loading = false;
uni.navigateTo({
url: '/pages/order/success'
})
} else {
uni.showToast({
title: err.errMsg,
icon: 'none'
})
}
})
},
listHistory() {
let that = this;
that.$get(RequestConstant.listOrderHistoryUrl + '?pageSize=50&repairId=' + this.orderId).then(
res => {
if (res.code == 200) {
let history = res.result.records.sort((a, b) => {
if (new Date(a.createTime) > new Date(b.createTime)) {
return -1
} else {
return 11;
}
});
if (history.length > 0) {
that.imgList = history[0].imageUrls;
that.remark = history[0].remark;
}
}
})
},
getRepairInfo(orderId) {
let that = this;
that.$get(RequestConstant.getRepairTempUrl + '?repairId=' + orderId).then(res => {
if (res.code == 200 && res.result) {
that.remark = res.result.remark;
that.imgList = res.result.imageUrl ? res.result.imageUrl.split(',') : [];
console.log(res.result);
}
});
}
},
onLoad(option) {
this.operationId = option.ot; //ot 2保洁点关闭 3管理员点关闭 0维修点关闭 1维修点退回
this.ot = option.ot; //ot 2保洁点关闭 3管理员点关闭 0维修点关闭 1维修点退回
this.orderId = option.id;
console.log('orderid', option.id);
this.status = option.status;
console.log('option', option);
this.order = JSON.parse(option.order);
if (this.operationId == 0) {
this.getRepairInfo(this.orderId);
}
if (this.operationId == 1) {
this.listHistory();
}
this.$loadToken(() => {
// 微信sdk配置
wxConfig(['chooseImage', 'getLocalImgData'])
})
},
}
</script>
ssubmit文件(由于文件太长,下面去除了一些与文件上传不相关的内容):
<template>
<view>
<!-- 图片 -->
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="text-black">上传图片</text>
</view>
<view class="action">
{{imgList.length}}/9
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index">
<image :src="imgList[index]" mode="aspectFill" @tap.stop="preview(imgList, index)"></image>
<view class="cu-tag bg-red" @tap.stop="deleteImage(index)">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="flex flex-direction logout-panel">
<button class="cu-btn bg-blue margin-tb-sm lg" @click="submit()" :loading="loading"
:disabled="loading">submit</button>
</view>
</view>
</template>
<script>
const jweixin = require('jweixin-module')
import {
formatDate,
wxConfig,
uploadBase64DataToQiniu
} from '@/util/util.js'
import {
RequestConstant
} from '@/util/constant.js'
import {
pathToBase64
} from '@/js_sdk/gsq-image-tools/image-tools/index.js';
import moment from "moment";
export default {
data() {
return {
...
}
},
methods: {
preview(urls, currentIndex) {
uni.previewImage({
urls: urls,
current: currentIndex,
loop: true
})
},
chooseImage() {
uni.hideKeyboard();
let that = this
jweixin.chooseImage({
count: 9 - that.imgList.length,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
let localIds = res.localIds;
if (localIds.length > 0) {
uni.showLoading({
title: '上传图片中',
mask: true
})
that.uploadOneByOne(localIds, 0)
}
}
})
uni.hideKeyboard();
},
uploadOneByOne(localIds, index) {
// uploadOneByOne(filePaths, index){
let that = this;
// 获取本地图片的base64数据
jweixin.getLocalImgData({
localId: localIds[index],
success: function(res) {
let localData = res.localData;
// 上传至七牛云, 上传成功后返回文件url
uploadBase64DataToQiniu(localData).then(filePath => {
that.imgList.push(filePath);
// 执行下一张图片的上传
if (index < localIds.length - 1) {
that.uploadOneByOne(localIds, index + 1)
} else {
uni.hideLoading()
}
})
}
});
},
deleteImage(index) {
// 移除元素
this.imgList.splice(index, 1);
},
submit() {
uni.hideKeyboard(); //隐藏键盘
let that = this;
let imgStr = '';
that.imgList.forEach(img => {
imgStr = imgStr + img + ',';
});
imgStr = imgStr.substr(0, imgStr.length - 1);
// if (!imgStr) {
// uni.showModal({
// title: '提示',
// content: "请至少上传一张图片"
// })
// return;
// }
let data = {};
data['imageUrl'] = imgStr
that.loading = true;
that.$post(RequestConstant.addOrder, data).then(res => {
uni.hideLoading();
that.loading = false;
uni.navigateTo({
url: '/pages/order/success'
})
})
},
},
onLoad(option) {
let user = uni.getStorageSync('user');
let orgCode = user.orgCode;
// ot 0故障报修 1创建任务
this.ot = option.ot;
this.locationId = option.locationId;
this.locationName = option.locationName;
this.$loadToken(() => {
wxConfig(['chooseImage', 'getLocalImgData'])
})
}
}
</script>