|
|
@@ -16,25 +16,38 @@
|
|
|
<u--input v-model="inputForm.latitude" clearable></u--input>
|
|
|
</u-form-item>
|
|
|
|
|
|
- <div class="container">
|
|
|
- <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
|
|
|
- <button class="clickBtn" @click="goToFilm('camera')">拍摄</button>
|
|
|
- <button class="clickBtn" @click="goToFilm('album')">从相册选择</button>
|
|
|
- </van-popup>
|
|
|
- <div class="img_box">
|
|
|
- <div class="left_box" @click="boxClick">
|
|
|
- <u--image width="150" height="75" :src="img1" />
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
+<!-- <div class="container">-->
|
|
|
+<!-- <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">-->
|
|
|
+<!-- <button class="clickBtn" @click="goToFilm('camera')">拍摄</button>-->
|
|
|
+<!-- <button class="clickBtn" @click="goToFilm('album')">从相册选择</button>-->
|
|
|
+<!-- </van-popup>-->
|
|
|
+<!-- <div class="img_box">-->
|
|
|
+<!-- <div class="left_box" @click="boxClick">-->
|
|
|
+<!-- <u--image width="150" height="75" :src="img1" />-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- </div>-->
|
|
|
+ <view class="u-demo-block__content">
|
|
|
+ <view class="u-page__upload-item">
|
|
|
+ <u-upload
|
|
|
+ :fileList="fileList1"
|
|
|
+ @afterRead="afterRead"
|
|
|
+ @delete="deletePic"
|
|
|
+ name="1"
|
|
|
+ multiple
|
|
|
+ :maxCount="10"
|
|
|
+ ></u-upload>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</u--form>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>-->
|
|
|
<script>
|
|
|
+ import actCategoryService from "@/api/flowable/actCategoryService"
|
|
|
import wx from 'weixin-js-sdk';
|
|
|
import UImage from "../../../uni_modules/uview-ui/components/u--image/u--image";
|
|
|
|
|
|
@@ -46,6 +59,7 @@
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ fileList1: [],
|
|
|
inputForm:{
|
|
|
latitude:'',
|
|
|
longitude:'',
|
|
|
@@ -60,60 +74,109 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 删除图片
|
|
|
+ deletePic(event) {
|
|
|
+ this[`fileList${event.name}`].splice(event.index, 1)
|
|
|
+ },
|
|
|
+ // 新增图片
|
|
|
+ async afterRead(event) {
|
|
|
+ // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
+ let lists = [].concat(event.file)
|
|
|
+ let fileListLen = this[`fileList${event.name}`].length
|
|
|
+ lists.map((item) => {
|
|
|
+ this[`fileList${event.name}`].push({
|
|
|
+ ...item,
|
|
|
+ status: 'uploading',
|
|
|
+ message: '上传中'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ // const result = await this.uploadFilePromise(lists[i].url)
|
|
|
+ let item = this[`fileList${event.name}`][fileListLen]
|
|
|
+ this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
+ status: 'success',
|
|
|
+ message: '',
|
|
|
+ url: lists[i].url
|
|
|
+ }))
|
|
|
+ fileListLen++
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let a = uni.uploadFile({
|
|
|
+ url: 'http://www.example.com/upload', // 仅为示例，非真实的接口地址
|
|
|
+ filePath: url,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ user: 'test'
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ resolve(res.data.data)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
getConfig() {
|
|
|
this.initWeixin();
|
|
|
},
|
|
|
- initWeixin() {
|
|
|
- this.inputForm.latitude = ''
|
|
|
- this.inputForm.longitude = ''
|
|
|
- // 假设这些参数是从后端获取的
|
|
|
- const appId = 'wx96885ba58675d910';
|
|
|
- const timestamp = '1724144081';
|
|
|
- const nonceStr = '1142148534';
|
|
|
- const signature = '494260AF76E8A6ECB89356A463C2031402873A3D';
|
|
|
-
|
|
|
- wx.config({
|
|
|
- debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
|
|
- appId: appId, // 必填，公众号的唯一标识
|
|
|
- timestamp: timestamp, // 必填，生成签名的时间戳
|
|
|
- nonceStr: nonceStr, // 必填，生成签名的随机串
|
|
|
- signature: signature, // 必填，签名
|
|
|
- jsApiList: ['getLocation','chooseImage',
|
|
|
- 'uploadImage',
|
|
|
- 'getLocalImgData',
|
|
|
- 'downloadImage'] // 必填，需要使用的JS接口列表
|
|
|
- });
|
|
|
+ async initWeixin() {
|
|
|
+ try {
|
|
|
+ // 从后端获取签名参数
|
|
|
+ let res = await actCategoryService.getSignature();
|
|
|
+ console.log('res', res);
|
|
|
|
|
|
- wx.ready(function () {
|
|
|
- // 可以在这里调用其他API
|
|
|
- wx.openLocation({
|
|
|
- latitude: 0, // 纬度，浮点数，范围为90 ~ -90
|
|
|
- longitude: 0, // 经度，浮点数，范围为180 ~ -180。
|
|
|
- name: '', // 位置名
|
|
|
- address: '', // 地址详情说明
|
|
|
- scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
|
|
|
- infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
|
|
|
- });
|
|
|
- wx.checkJsApi({
|
|
|
- jsApiList: [
|
|
|
- 'chooseImage',
|
|
|
- 'previewImage',
|
|
|
- 'uploadImage',
|
|
|
- 'downloadImage'
|
|
|
- ],
|
|
|
- success: function (res) {
|
|
|
- if (res.checkResult.getLocation == true) {
|
|
|
- wxChooseImage();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
+ // 初始化参数
|
|
|
+ const appId = 'wxa79f618dcaf992f7';
|
|
|
+ const timestamp = res.timestamp;
|
|
|
+ const nonceStr = res.nonceStr;
|
|
|
+ const signature = res.signature;
|
|
|
|
|
|
- wx.error(function (res) {
|
|
|
- // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
|
|
|
- console.log('验证失败:', res);
|
|
|
- });
|
|
|
+ // 确保参数成功赋值后执行 wx.config
|
|
|
+ if (timestamp && nonceStr && signature) {
|
|
|
+ wx.config({
|
|
|
+ debug: false, // 开启调试模式
|
|
|
+ appId: appId, // 必填，公众号的唯一标识
|
|
|
+ timestamp: timestamp, // 必填，生成签名的时间戳
|
|
|
+ nonceStr: nonceStr, // 必填，生成签名的随机串
|
|
|
+ signature: signature, // 必填，签名
|
|
|
+ jsApiList: ['getLocation', 'chooseImage', 'uploadImage', 'getLocalImgData', 'downloadImage'] // 必填，需要使用的JS接口列表
|
|
|
+ });
|
|
|
+
|
|
|
+ wx.ready(function () {
|
|
|
+ // 可以在这里调用其他API
|
|
|
+ wx.openLocation({
|
|
|
+ latitude: 0, // 纬度，浮点数，范围为90 ~ -90
|
|
|
+ longitude: 0, // 经度，浮点数，范围为180 ~ -180。
|
|
|
+ name: '', // 位置名
|
|
|
+ address: '', // 地址详情说明
|
|
|
+ scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
|
|
|
+ infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
|
|
|
+ });
|
|
|
+
|
|
|
+ wx.checkJsApi({
|
|
|
+ jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage'],
|
|
|
+ success: function (res) {
|
|
|
+ if (res.checkResult.getLocation === true) {
|
|
|
+ wxChooseImage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ wx.error(function (res) {
|
|
|
+ // config信息验证失败会执行error函数
|
|
|
+ console.log('验证失败:', res);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error('获取签名参数失败，无法配置 wx.config');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化微信JS-SDK失败:', error);
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
getLocation() {
|
|
|
wx.getLocation({
|
|
|
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回火星坐标，可传入'gcj02'
|
|
|
@@ -196,8 +259,10 @@
|
|
|
},
|
|
|
goToFilm (sourceType) {
|
|
|
this.show = false
|
|
|
+ let _this = this
|
|
|
console.log(sourceType);
|
|
|
wx.chooseImage({
|
|
|
+
|
|
|
count: 1, // 默认9
|
|
|
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed']
|
|
|
sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有 ['album', 'camera']
|
|
|
@@ -213,8 +278,8 @@
|
|
|
localId: localId,// 图片的localID
|
|
|
success: function (res) {
|
|
|
var localData = res.localData;// localData是图片的base64数据，可以用img标签显示
|
|
|
- this.img1 = localData
|
|
|
- console.log('img1',this.img1)
|
|
|
+ _this.img1 = localData
|
|
|
+ console.log('img1',_this.img1)
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -248,4 +313,4 @@
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-</style>
|
|
|
+</style>
|
wangqiang