You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
11 KiB
375 lines
11 KiB
<!-- 管理员登录页 -->
|
|
<template>
|
|
<view class="page1" style="overflow: scroll;">
|
|
<view @tap="addList"
|
|
style="width: 90%;height:80rpx;margin:20rpx auto;background: #088FEB;color: #fff;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 32rpx;">
|
|
新增
|
|
</view>
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" hide="true" :value="QrUrl">
|
|
</uqrcode>
|
|
<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="50" @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 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="qrcode1" style="width: 200px;height: 200px;top: -1000px;"></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
generateUUID
|
|
} from '@/utils/global.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
QrUrl: '1212', //二维码临时存放
|
|
canUpdate:true,
|
|
QrList1: [] // 点击新增按钮，新增一条数据
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
let that = this
|
|
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)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}).catch((res) => {})
|
|
|
|
setTimeout(res => {
|
|
// 返回canvas的位图数据
|
|
uni.canvasGetImageData({
|
|
canvasId: 'aaaa',
|
|
x: 0,
|
|
y: 0,
|
|
width: 100,
|
|
height: 100,
|
|
success(res) {
|
|
let data = {
|
|
width:res.width,
|
|
height:res.height,
|
|
imageData:res.data,
|
|
threshold:180
|
|
}
|
|
}
|
|
})
|
|
}, 2000)
|
|
},
|
|
methods: {
|
|
grayPixle(pix) {
|
|
return pix[0] * 0.299 + pix[1] * 0.587 + pix[2] * 0.114;
|
|
},
|
|
updateShopIcon(){
|
|
if(this.canUpdate == false){
|
|
uni.showToast({
|
|
title: "请等待二维码上传成功",
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
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;
|
|
const threshold = data.threshold || 180;
|
|
let sendImageData = new ArrayBuffer((sendWidth * sendHeight) / 8);
|
|
sendImageData = new Uint8Array(sendImageData);
|
|
let pix = data.imageData;
|
|
const part = [];
|
|
let index = 0;
|
|
for (let i = 0; i < pix.length; i += 32) {
|
|
//横向每8个像素点组成一个字节（8位二进制数）。
|
|
for (let k = 0; k < 8; k++) {
|
|
const grayPixle1 = this.grayPixle(pix.slice(i + k * 4, i + k * 4 + (4 - 1)));
|
|
//阈值调整
|
|
if (grayPixle1 > threshold) {
|
|
//灰度值大于threshold位 白色 为第k位0不打印
|
|
part[k] = 0;
|
|
} else {
|
|
part[k] = 1;
|
|
}
|
|
}
|
|
let temp = 0;
|
|
for (let a = 0; a < part.length; a++) {
|
|
temp += part[a] * Math.pow(2, part.length - 1 - a);
|
|
}
|
|
sendImageData[index++] = temp;
|
|
}
|
|
return {
|
|
array: Array.from(sendImageData),
|
|
width: sendWidth / 8,
|
|
height: sendHeight,
|
|
};
|
|
|
|
},
|
|
addList() {
|
|
if (this.QrList1.length > 4) {
|
|
uni.showToast({
|
|
title: '最多只能添加4个二维码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let data = {
|
|
name: '',
|
|
path: ''
|
|
}
|
|
this.QrList1.push(data)
|
|
},
|
|
getQRCode(index) {
|
|
let that = this
|
|
setTimeout(res => {
|
|
that.$refs.uqrcode.toTempFilePath({
|
|
success: res => {
|
|
let ctx = uni.createCanvasContext('qrcode1', that)
|
|
ctx.setFillStyle('#fff');
|
|
ctx.fillRect(0, 0, 200, 200);
|
|
let promise = that.getTempFilePath(res.tempFilePath)
|
|
promise.then((result) => {
|
|
ctx.drawImage(result, 8, 8, 184, 184);
|
|
ctx.draw(true);
|
|
setTimeout(ress => {
|
|
uni.canvasToTempFilePath({
|
|
x: 0,
|
|
y: 0,
|
|
width: 200,
|
|
height: 200,
|
|
destWidth: 200,
|
|
destHeight: 200,
|
|
canvasId: 'qrcode1',
|
|
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.canUpdate = true
|
|
that.$forceUpdate()
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}, 500)
|
|
});
|
|
}
|
|
});
|
|
}, 1000)
|
|
},
|
|
getTempFilePath(base64Data) {
|
|
return new Promise((resolve, reject) => {
|
|
const fs = uni.getFileSystemManager()
|
|
base64Data = base64Data.split(',')[1]
|
|
const fileName = 'temp_image_' + Date.now() + '.png' // 自定义文件名，可根据需要修改
|
|
const filePath = uni.env.USER_DATA_PATH + '/' + fileName
|
|
const buffer = uni.base64ToArrayBuffer(base64Data)
|
|
fs.writeFile({
|
|
filePath,
|
|
data: buffer,
|
|
encoding: 'binary',
|
|
success:res => resolve(filePath),
|
|
fail:err => reject(err)
|
|
})
|
|
});
|
|
},
|
|
addItemName(e, index) {
|
|
if(e.detail.value.length>6){
|
|
uni.showToast({
|
|
title: '最多输入6个字符',
|
|
icon: 'none'
|
|
})
|
|
this.QrList1[index].name = ''
|
|
return
|
|
}
|
|
this.QrList1[index].name = e.detail.value
|
|
},
|
|
scanCodeAdd(index) {
|
|
let that = this;
|
|
uni.scanCode({
|
|
success: (res) => {
|
|
if (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
|
|
})
|
|
that.tui.request("/app/urlMapping/saveOrUpdateUrlMapping", "post",urlMapping, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
that.QrList1[index].path = that.tui.interfaceUrl() + '/app/urlMapping/redirect?id='+uid
|
|
}
|
|
})
|
|
}else{
|
|
that.QrList1[index].path = res.result
|
|
}
|
|
that.QrUrl = that.QrList1[index].path
|
|
that.canUpdate = false
|
|
that.$forceUpdate()
|
|
setTimeout(res => {
|
|
that.getQRCode(index)
|
|
}, 1000)
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: '扫描失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
uni.showToast({
|
|
title: '扫描失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
delItem(index) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定要删除吗？",
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.QrList1.splice(index, 1)
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.page1 {
|
|
background: #eee;
|
|
height: 100%;
|
|
}
|
|
</style>
|