157 lines
3.6 KiB
Vue
157 lines
3.6 KiB
Vue
![]() |
<template>
|
|||
|
<view class="content">
|
|||
|
<view class="container">
|
|||
|
|
|||
|
|
|||
|
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;margin: 40px auto;"></canvas>
|
|||
|
<view class="b-size">
|
|||
|
扫描上方二维码 立即报名
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import headers from '../../components/header/headers.vue'
|
|||
|
import tabbar from '../../components/tabbar/tabbar.vue'
|
|||
|
import request from '@/utils/request.js'
|
|||
|
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
|||
|
import {
|
|||
|
getToken
|
|||
|
} from '@/utils/auth'
|
|||
|
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
fileList1: [],
|
|||
|
}
|
|||
|
},
|
|||
|
onShow() {
|
|||
|
|
|||
|
},
|
|||
|
onPullDownRefresh() {
|
|||
|
console.log("刷新");
|
|||
|
uni.stopPullDownRefresh()
|
|||
|
},
|
|||
|
onReachBottom() {
|
|||
|
// this.show = true
|
|||
|
setTimeout(() => {
|
|||
|
console.log("加载执行");
|
|||
|
}, 2000)
|
|||
|
},
|
|||
|
|
|||
|
methods: {
|
|||
|
onReady() {
|
|||
|
// 获取uQRCode实例
|
|||
|
var qr = new UQRCode();
|
|||
|
// 设置二维码内容
|
|||
|
qr.data = "https://www.nuoyunr.com/jxjlCode?id=12&jlId=10";
|
|||
|
// 设置二维码大小,必须与canvas设置的宽高一致
|
|||
|
qr.size = 200;
|
|||
|
// 调用制作二维码方法
|
|||
|
qr.make();
|
|||
|
// 获取canvas上下文
|
|||
|
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
|
|||
|
// 设置uQRCode实例的canvas上下文
|
|||
|
qr.canvasContext = canvasContext;
|
|||
|
// 调用绘制方法将二维码图案绘制到canvas上
|
|||
|
qr.drawCanvas();
|
|||
|
},
|
|||
|
// 删除图片
|
|||
|
deletePic(event) {
|
|||
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|||
|
},
|
|||
|
// 新增图片
|
|||
|
async afterRead(event) {
|
|||
|
// 当设置 multiple 为 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: result
|
|||
|
}))
|
|||
|
fileListLen++
|
|||
|
}
|
|||
|
},
|
|||
|
async afterRead(event) {
|
|||
|
// 当设置 multiple 为 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: '上传中'
|
|||
|
})
|
|||
|
})
|
|||
|
const result = await this.uploadFilePromise(lists[0].url)
|
|||
|
let data = {
|
|||
|
url: result
|
|||
|
}
|
|||
|
this.fileList1 = []
|
|||
|
this.fileList1.push(data)
|
|||
|
console.log(this.fileList1, 'this.fileList1');
|
|||
|
},
|
|||
|
async uploadFilePromise(e) {
|
|||
|
console.log(e);
|
|||
|
let res = await upload({
|
|||
|
url: '/common/upload',
|
|||
|
filePath: e,
|
|||
|
})
|
|||
|
console.log(res.fileName);
|
|||
|
|
|||
|
},
|
|||
|
|
|||
|
goback() {
|
|||
|
uni.navigateBack()
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style scoped lang="scss">
|
|||
|
.content {
|
|||
|
width: 100%;
|
|||
|
background: linear-gradient(180deg, #4AA76F 0%, #4AA76F 20%, #f7f7f7 38%, #f7f7f7 100%);
|
|||
|
background: #4AA76F;
|
|||
|
height: 100vh;
|
|||
|
box-sizing: border-box;
|
|||
|
padding: 1px;
|
|||
|
}
|
|||
|
|
|||
|
.container {}
|
|||
|
|
|||
|
.up-box {
|
|||
|
width: 95%;
|
|||
|
border-bottom: 1px solid #ebebeb;
|
|||
|
margin: 10px auto;
|
|||
|
padding: 10px 0px;
|
|||
|
box-sizing: border-box;
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: space-between;
|
|||
|
}
|
|||
|
|
|||
|
.right-text {
|
|||
|
text-align: right;
|
|||
|
}
|
|||
|
|
|||
|
.b-size {
|
|||
|
font-weight: bold;
|
|||
|
width: 100%;
|
|||
|
text-align: center;
|
|||
|
font-size: 18px;
|
|||
|
color: #fff;
|
|||
|
}
|
|||
|
</style>
|