使用promise.all实现多个接口返回后在执行弹窗的显示和隐藏
一个页面查看详情，弹出弹窗，弹窗里面有五个接口需要调取数据进行数据渲染，需求是五个接口数据返回后在进行弹窗显示
getAllScore(companyInfoId) {
this.companyInfoId = companyInfoId
Promise.all([evaluateRes.getSumScore(companyInfoId), evaluateRes.getModelScore(companyInfoId),
evaluateRes.getCrossScore(companyInfoId), evaluateRes.getVerticalScore(companyInfoId), evaluateRes.getAllWeight(companyInfoId)]).then(
result => {
// 執行結果會按照上面順序放在 result 數組內，所以 result[0]，代表第一個函數的 resolve 結果
this.companyScore.sumScore = result[0].data.sumAvgScore
this.companyScore.modelScore = result[1].data
this.companyScore.crossScore = result[2].data
this.companyScore.verticalScore = result[3].data
this.companyScore.allModelWeight = result[4].data
this.cardShow = true
})
// evaluateRes.getSumScore(companyInfoId).then(
// res => {
// this.companyScore.sumScore = res.data.sumAvgScore
// }
// )
// evaluateRes.getModelScore(companyInfoId).then(
// res => {
// this.companyScore.modelScore = res.data
// }
// )
// evaluateRes.getCrossScore(companyInfoId).then(
// res => {
// this.companyScore.crossScore = res.data
// }
// )
// evaluateRes.getVerticalScore(companyInfoId).then(
// res => {
// this.companyScore.verticalScore = res.data
// }
// )
// evaluateRes.getAllWeight(companyInfoId).then(
// res => {
// this.companyScore.allModelWeight = res.data
// }
// )
// this.$nextTick(() => {
// this.cardShow = true
// })
}
uniapp 查看图片点击放大预览图片 单张 多张
// An highlighted block
// 预览图片单张
previewImg(logourl) {
let _this = this;
let imgsArray = [];
imgsArray[0] = logourl
uni.previewImage({
current: 0,
urls: imgsArray
});
},
// 预览图片多张
previewImg(index) {
let _this = this;
let imgsArray = [];
for (let i = 0; i < this.imgUrlList.length; i++) {
if (this.imgUrlList[i].videoUrl == "") {
imgsArray.push(this.imgUrlList[i].imgUrl);
}
}
// #ifdef MP
uni.previewImage({
current: index - 1,
urls: imgsArray,
indicator: 'number',
loop: true
});
// #endif
// #ifndef MP
uni.previewImage({
current: index - 1,
urls: imgsArray,
indicator: 'number',
loop: true
});
// #endif
},
uniapp项目-签名组件封装
<template>
<view v-if="visibleSync" class="cat-signature" :class="{'visible':show}" @touchmove.stop.prevent="moveHandle">
<view class="mask" @tap="close" />
<view class="content">
<view class="title">手写签名</view>
<canvas class='firstCanvas' :canvas-id="canvasId" @touchmove='move' @touchstart='start($event)'
@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error' />
<view class="btns">
<!-- <view class="btn" @tap="clear">清除</view>
<view class="btn" @tap="save">保存</view> -->
<u-button class="clear" @click="clear">清除</u-button>
<u-button class="save" @click="save" type="primary">确定</u-button>
</view>
</view>
</view>
</template>
<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth;
canvash = canvasw * 9 / 16;
},
})
export default {
name: 'cat-signature',
props: {
visible: {
type: Boolean,
default: false
},
canvasId: {
type: String,
default: 'firstCanvas'
}
},
data() {
return {
show: false,
visibleSync: false,
signImage: '',
hasDh: false,
}
},
watch: {
visible(val) {
this.visibleSync = val;
this.show = val;
this.getInfo()
}
},
created(options) {
this.visibleSync = this.visible
this.getInfo()
setTimeout(() => {
this.show = this.visible;
}, 100)
},
methods: {
getInfo() {
//获得Canvas的上下文
content = uni.createCanvasContext(this.canvasId, this)
//设置线的颜色
content.setStrokeStyle("#000")
//设置线的宽度
content.setLineWidth(3)
//设置线两端端点样式更加圆润
content.setLineCap('round')
//设置两条线连接处更加圆润
content.setLineJoin('round')
},
//
close() {
this.show = false;
this.hasDh = false;
this.$emit('close')
},
moveHandle() {
},
// 画布的触摸移动开始手势响应
start(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y,
}
touchs.push(point);
this.hasDh = true
},
// 画布的触摸移动手势响应
move: function(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
}
touchs.push(point)
if (touchs.length >= 2) {
this.draw(touchs)
}
},
// 画布的触摸移动结束手势响应
end: function(e) {
//清空轨迹数组
for (let i = 0; i < touchs.length; i++) {
touchs.pop()
}
},
// 画布的触摸取消响应
cancel: function(e) {
// console.log("触摸取消" + e)
},
// 画布的长按手势响应
tap: function(e) {
// console.log("长按手势" + e)
},
error: function(e) {
// console.log("画布触摸错误" + e)
},
//绘制
draw: function(touchs) {
let point1 = touchs[0]
let point2 = touchs[1]
// console.log(JSON.stringify(touchs))
content.moveTo(point1.x, point1.y)
content.lineTo(point2.x, point2.y)
content.stroke()
content.draw(true);
touchs.shift()
},
//清除操作
clear: function() {
//清除画布
content.clearRect(0, 0, canvasw, canvash)
content.draw(true)
// this.close()
this.hasDh = false;
this.$emit('clear')
},
save() {
var that = this;
if (!this.hasDh) {
uni.showToast({
title: '请先签名',
icon: 'none'
})
return;
}
uni.showLoading({
title: '生成中...',
mask: true
})
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: this.canvasId,
success: function(res) {
that.signImage = res.tempFilePath;
that.$emit('save', res.tempFilePath);
uni.hideLoading()
that.hasDh = false;
that.show = false;
},
fail: function(err) {
console.log(err)
uni.hideLoading()
}
}, this)
}, 100)
}
}
}
</script>
<style lang="scss">
.cat-signature.visible {
visibility: visible
}
.cat-signature {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 11;
height: 100vh;
visibility: hidden;
.mask {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
transition: opacity .3s;
}
.content {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: calc(100% - 48rpx);
background: #fff;
border-radius: 16rpx;
overflow: hidden;
.title{
font-size: 48rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #0A0D19;
line-height: 66rpx;
text-align: center;
padding: 48rpx 0 46rpx;
}
// canvas
.firstCanvas {
background-color: #fff;
width: calc(100% - 60rpx);
height: 364rpx;
background: #F8F8F8;
border-radius: 16rpx;
margin: 0 auto 48rpx auto;
}
// canvas
.btns {
padding: 0 30rpx 60rpx;
overflow: hidden;
margin: auto;
display: flex;
justify-content: space-between;
.u-btn,u-button{
width: calc(50% - 11rpx);
margin: 0;
}
.clear{
border-radius: 8rpx;
border-color: #3776A8;
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3776A8;
}
.u-btn--primary{
background: #3776A8;
border-radius: 8rpx;
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
}
}
}
.visible .mask {
display: block;
opacity: 1
}
</style>
使用
<button type="default" class="btn blur" @click="showSign=true">签字确认</button>
<!-- 签字确认按钮 -->
<catSignature v-if="showSign" canvasId="canvas1" @close="close" @save="save" :visible="showSign" />
组件导入
import catSignature from "@/components/cat-signature.vue"
components: {
catSignature
},
方法
close(){
this.showSign = false;
},
save(val){
this.showSign = false;
this.signPicture = val
this.signUrl = val
let reqData = {
filePath: val,
name: 'file'
}
// 上传接口
fileUpload(reqData).then((res)=>{
// console.log(res)
if(res.data.code===200){
// console.log(this.id)
console.log(res.data.data)
let signData = {
meetingId: this.id,
signStatus:1,
sysFileRelation: res.data.data
}
// 签名图片保存接口
sign(signData).then((signRes)=>{
// if(signRes.data.code===200){
// this.needSign = false
// this.getDetail()
// }else{
// uni.showToast({
// title: '签名失败，请重新签名',
// icon: 'none'
// })
// }
})
}
})
},
6366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
