|
|
|
@ -9,27 +9,35 @@ |
|
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" hide="true" start="false" auto="true" queue="true" :value="QrUrl"> |
|
|
|
</uqrcode> |
|
|
|
<img v-for="(item,index) in newQRList" :src="item" alt="" /> |
|
|
|
<view> <!-- --> |
|
|
|
<view v-for="(item,index) in QrList1" :key="index" |
|
|
|
style="background: #fff;height: 100rpx;display: flex;line-height: 100rpx;"> |
|
|
|
<input type="text" :value="item.name" @blur="addItemName($event,index)" placeholder="输入名称" |
|
|
|
style="width: 30%;display: block;height: 100rpx;text-align: center;font-size: 32rpx;" /> |
|
|
|
<input type="text" disabled @tap="scanCodeAdd(index)" :value="item.path" placeholder="点击扫描二维码" |
|
|
|
style="width: 58%;display: block;height: 80rpx;border: 1px solid #eee;padding-left: 20rpx;margin-top: 10rpx;" /> |
|
|
|
<view @tap="delItem(index)" style="width:12%;margin-left: 20rpx;"> |
|
|
|
<uni-icons color="red" type="minus" size="26"></uni-icons> |
|
|
|
</view> |
|
|
|
<view v-for="(item,index) in QrList1" :key="index" |
|
|
|
style="background: #fff;height: 100rpx;display: flex;line-height: 100rpx;"> |
|
|
|
<input type="text" :value="item.name" maxlength="6" @blur="addItemName($event,index)" placeholder="输入名称" |
|
|
|
style="width: 30%;display: block;height: 100rpx;text-align: center;font-size: 32rpx;" /> |
|
|
|
<input type="text" disabled @tap="scanCodeAdd(index)" :value="item.path" placeholder="点击扫描二维码" |
|
|
|
style="width: 58%;display: block;height: 80rpx;border: 1px solid #eee;padding-left: 20rpx;margin-top: 10rpx;" /> |
|
|
|
<view @tap="delItem(index)" style="width:12%;margin-left: 20rpx;"> |
|
|
|
<uni-icons color="red" type="minus" size="26"></uni-icons> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
<view style="display: flex;"> |
|
|
|
<view v-for="(item,index) in QrList1" :key="index" style="width: 150rpx;height: 210rpx;margin: 20rpx;"> |
|
|
|
<image :src="item.imgUrl" style="width: 150rpx;height: 150rpx;background-size: 100%;"></image> |
|
|
|
<view v-if="item.imgUrl != ''">{{item.name}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view @tap="updateShopIcon()" |
|
|
|
style="width: 90%;height:80rpx;position: fixed;bottom: 40rpx;left:5%;background: #088FEB;color: #fff;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 32rpx;"> |
|
|
|
提交 |
|
|
|
</view> |
|
|
|
<canvas canvas-id="aaaa" style="width: 200px;height: 200px;"></canvas> |
|
|
|
<canvas canvas-id="qrcode" style="width: 200px;height: 200px;top: -1000px;"></canvas> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
generateUUID |
|
|
|
} from '@/utils/global.js' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -40,7 +48,7 @@ |
|
|
|
'https://u.wechat.com/ELXU0g00OAM8huehO8nDQMQ', |
|
|
|
'https://qr.alipay.com/fkx11051559cgeldh61dyf6' |
|
|
|
], |
|
|
|
QrUrl: 'https://qr.95516.com/01020001/wcqr?f=ICBCqr&X=1&T=3&P=13&I=e03d925776684b4d&N=b4cbb142eeafe2bddce7a7878c57f5ca&L=3f7aafc9dbc03de742513fbb73a3380023c77748dbca0813d7a49f63159d542ed2f1e45fac242c519fb6c9a3a51a8caaa3b79f53b538a276', //二维码临时存放 |
|
|
|
QrUrl: '', //二维码临时存放 |
|
|
|
newQRList: [], // 生成的二维码临时路径的数组 |
|
|
|
QrList1: [], // 点击新增按钮，新增一条数据 |
|
|
|
aaa: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/67fd6f17a7634400afac9b6694ed9234.png' |
|
|
|
@ -51,19 +59,84 @@ |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
let that = this |
|
|
|
let ctx = uni.createCanvasContext('aaaa', this) |
|
|
|
uni.getImageInfo({ |
|
|
|
src: this.aaa, |
|
|
|
success: (res) => { |
|
|
|
// 绘制图片 |
|
|
|
ctx.drawImage(res.path, 0, 0, 200, 200); |
|
|
|
ctx.draw(true); |
|
|
|
}, |
|
|
|
fail: (err) => { |
|
|
|
console.log(err) |
|
|
|
that.tui.request("/app/shop/getShopInfoById", "post", { |
|
|
|
id: uni.getStorageSync('shopId'), |
|
|
|
}, false, true).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
let qrCode = res.result.shopIcon |
|
|
|
if (qrCode != '') { |
|
|
|
let data = qrCode.split(',') |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
if (qrCode.indexOf('@_@') != -1) { |
|
|
|
let obj = { |
|
|
|
name: data[i].split('@_@')[0], |
|
|
|
path: data[i].split('@_@')[1], |
|
|
|
imgUrl: data[i].split('@_@')[2], |
|
|
|
level: "M" |
|
|
|
} |
|
|
|
this.QrList1.push(obj) |
|
|
|
} else { |
|
|
|
var weixin = data[i].indexOf("微信"); |
|
|
|
var dianpu = data[i].indexOf("店铺"); |
|
|
|
var zifubao = data[i].indexOf("支付"); |
|
|
|
var yinlian = data[i].indexOf("收款"); |
|
|
|
var duizhang = data[i].indexOf("对账"); |
|
|
|
if (duizhang != -1) { |
|
|
|
var result = data[i].substring(duizhang + 2); |
|
|
|
let obj = { |
|
|
|
name: '查看对账单', |
|
|
|
path: result, |
|
|
|
level: "M" |
|
|
|
} |
|
|
|
this.QrList1.push(obj) |
|
|
|
} |
|
|
|
if (dianpu != -1) { |
|
|
|
var result = data[i].substring(dianpu + 2); |
|
|
|
let obj = { |
|
|
|
name: '店铺微信', |
|
|
|
path: result, |
|
|
|
level: "M" |
|
|
|
} |
|
|
|
this.QrList1.push(obj) |
|
|
|
} |
|
|
|
if (weixin != -1) { |
|
|
|
var result = data[i].substring(weixin + 2); |
|
|
|
let obj = { |
|
|
|
name: '微信收款码', |
|
|
|
path: result, |
|
|
|
level: "M" |
|
|
|
} |
|
|
|
this.QrList1.push(obj) |
|
|
|
} |
|
|
|
if (zifubao != -1) { |
|
|
|
var result = data[i].substring(zifubao + 2); |
|
|
|
let obj = { |
|
|
|
name: '支付宝收款码', |
|
|
|
path: result, |
|
|
|
level: "Q" |
|
|
|
} |
|
|
|
this.QrList1.push(obj) |
|
|
|
} |
|
|
|
if (yinlian != -1) { |
|
|
|
var result = data[i].substring(yinlian + 2); |
|
|
|
let obj = { |
|
|
|
name: '银行收款码', |
|
|
|
path: result, |
|
|
|
level: "M" |
|
|
|
} |
|
|
|
this.QrList1.push(obj) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setTimeout(res => { |
|
|
|
if(this.qrArr.length > 0){ |
|
|
|
that.getQRCode(); |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
}).catch((res) => {}) |
|
|
|
|
|
|
|
setTimeout(res => { |
|
|
|
// 返回canvas的位图数据 |
|
|
|
uni.canvasGetImageData({ |
|
|
|
@ -73,14 +146,12 @@ |
|
|
|
width: 100, |
|
|
|
height: 100, |
|
|
|
success(res) { |
|
|
|
console.log('宽高：' + res.width + ' * ' + res.height) // 100 |
|
|
|
let data = { |
|
|
|
width:res.width, |
|
|
|
height:res.height, |
|
|
|
imageData:res.data, |
|
|
|
threshold:180 |
|
|
|
} |
|
|
|
console.log(that.overwriteImageData(data)) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, 2000) |
|
|
|
@ -89,6 +160,35 @@ |
|
|
|
grayPixle(pix) { |
|
|
|
return pix[0] * 0.299 + pix[1] * 0.587 + pix[2] * 0.114; |
|
|
|
}, |
|
|
|
updateShopIcon(){ |
|
|
|
let shopIcon = '' |
|
|
|
if(this.QrList1.length > 0){ |
|
|
|
for(let i = 0; i < this.QrList1.length;i++){ |
|
|
|
if(i == this.QrList1.length-1){ |
|
|
|
shopIcon += this.QrList1[i].name+'@_@'+this.QrList1[i].path+'@_@'+this.QrList1[i].imgUrl |
|
|
|
}else{ |
|
|
|
shopIcon += this.QrList1[i].name+'@_@'+this.QrList1[i].path+'@_@'+this.QrList1[i].imgUrl+',' |
|
|
|
} |
|
|
|
} |
|
|
|
this.tui.request("/app/shop/editShopIconById", "post", { |
|
|
|
shopId: uni.getStorageSync('shopId'), |
|
|
|
shopIcon: shopIcon |
|
|
|
},false, true).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.showToast({ |
|
|
|
title: "更新成功", |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
setTimeout(res=>{ |
|
|
|
uni.navigateBack({ |
|
|
|
delta: 1 |
|
|
|
}) |
|
|
|
},1000) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
overwriteImageData(data) { |
|
|
|
let sendWidth = data.width, |
|
|
|
sendHeight = data.height; |
|
|
|
@ -121,7 +221,6 @@ |
|
|
|
width: sendWidth / 8, |
|
|
|
height: sendHeight, |
|
|
|
}; |
|
|
|
console.log(sendImageData) |
|
|
|
|
|
|
|
}, |
|
|
|
addList() { |
|
|
|
@ -138,30 +237,99 @@ |
|
|
|
} |
|
|
|
this.QrList1.push(data) |
|
|
|
}, |
|
|
|
getQRCode() { |
|
|
|
getQRCode(index) { |
|
|
|
let that = this |
|
|
|
// for (let i = 0; i <= this.QRList.length; i++) { |
|
|
|
|
|
|
|
// setTimeout(res => { |
|
|
|
// this.QrUrl = this.QRList[i] |
|
|
|
setTimeout(res => { |
|
|
|
this.$refs.uqrcode.toTempFilePath({ |
|
|
|
success: res => { |
|
|
|
this.newQRList.push(res.tempFilePath) |
|
|
|
let ctx = uni.createCanvasContext('qrcode', that) |
|
|
|
ctx.drawImage(res.tempFilePath, 0, 0, 200, 200); |
|
|
|
ctx.draw(true); |
|
|
|
setTimeout(ress=>{ |
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
width: 200, |
|
|
|
height: 200, |
|
|
|
destWidth: 200, |
|
|
|
destHeight: 200, |
|
|
|
canvasId: 'qrcode', |
|
|
|
success: (res3) => { |
|
|
|
uni.uploadFile({ |
|
|
|
url: that.tui.interfaceUrl() + '/upload/file', |
|
|
|
filePath: res3.tempFilePath, |
|
|
|
name: 'file', |
|
|
|
header: { |
|
|
|
"content-type": "multipart/form-data", |
|
|
|
'accessToken': that.tui.getToken() |
|
|
|
}, |
|
|
|
formData: {}, |
|
|
|
success: (uploadFileRes) => { |
|
|
|
let path = JSON.parse(uploadFileRes.data) |
|
|
|
//后端返回的地址，存入图片地址 |
|
|
|
that.QrList1[index].imgUrl = path.result |
|
|
|
that.$forceUpdate() |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
},500) |
|
|
|
} |
|
|
|
}); |
|
|
|
// }, 1000 * (i + 1)) |
|
|
|
}, 1000) |
|
|
|
// } |
|
|
|
}, |
|
|
|
async base64ToTempFilePath(base64Data) { |
|
|
|
const fs = uni.getFileSystemManager() |
|
|
|
const fileName = 'LotteryActivity_' + Date.now() + '.png' // 自定义文件名，可根据需要修改 |
|
|
|
const filePath = uni.env.USER_DATA_PATH + '/' + fileName |
|
|
|
const base64 = base64Data.split(',')[1]//移除固定头部 |
|
|
|
const buffer = uni.base64ToArrayBuffer(base64) |
|
|
|
let promise = await new Promise((resolve, reject) => { |
|
|
|
fs.writeFile({ |
|
|
|
filePath, |
|
|
|
data: buffer, |
|
|
|
encoding: 'binary', |
|
|
|
success(res) { |
|
|
|
resolve(filePath) // fulfilled |
|
|
|
}, |
|
|
|
fail(err) { |
|
|
|
reject(err) // rejected |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
return promise |
|
|
|
}, |
|
|
|
addItemName(e, index) { |
|
|
|
this.QrList1[index].name = e.detail.value |
|
|
|
console.log(this.QrList1) |
|
|
|
}, |
|
|
|
scanCodeAdd(index) { |
|
|
|
let that = this; |
|
|
|
uni.scanCode({ |
|
|
|
success: (res) => { |
|
|
|
if (res.result != '') { |
|
|
|
console.log(res.result) |
|
|
|
this.QrList1[index].path = res.result |
|
|
|
if(res.result.indexOf('u.wechat.com') == -1 && res.result.indexOf('qr.alipay.com') == -1 && res.result.indexOf('wxp://') == -1 && res.result.length > 80){ |
|
|
|
let uid = uni.getStorageSync('shopId').substring('10','12') + generateUUID().substring('0','7'); |
|
|
|
let urlMapping = [] |
|
|
|
urlMapping.push({ |
|
|
|
id:uid, |
|
|
|
longUrl:res.result |
|
|
|
}) |
|
|
|
this.tui.request("/app/urlMapping/saveOrUpdateUrlMapping", "post",urlMapping, false, false).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.QrList1[index].path = that.tui.interfaceUrl() + '/app/urlMapping/redirect?id='+uid |
|
|
|
} |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
this.QrList1[index].path = res.result |
|
|
|
} |
|
|
|
setTimeout(res => { |
|
|
|
that.QrUrl = this.QrList1[index].path |
|
|
|
that.getQRCode(index) |
|
|
|
}, 500) |
|
|
|
|
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: '扫描失败', |
|
|
|
|
wangfukang
2 years ago