<template>
<div class="evaluation">
<Header title="服务评分" goBack="true"> </Header>
<div class="mui-content">
<div class="form-wrap">
<form class="mui-input-group">
<div class="mui-input-row">
<label>任务名称</label>
<input type="text" placeholder="任务名称">
</div>
<div class="mui-input-row">
<label>时间安排</label>
<div class="self-choose">
<div class="self">
<div class="before-self">
<input type="text" placeholder="事项" readonly>
<span>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconrili1"></use>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="evaluation-list mt-2">
<p class="evaluation-list-content">
测试
</p>
<div class="mui-input-row">
<label for="">结果</label>
<input type="text">
</div>
</div>
</form>
<div class="custom-sign mt-2">
<p>客户签字:</p>
<div class="sign-board mt-2">
<div class="canvas-img" v-if='!flag'>
<img src="https://img.yzcdn.cn/vant/leaf.jpg" alt="签名">
</div>
</div>
<div class="sign-btn mt-2">
<mt-button type='primary' size='small' @click="showPopup"> 客户签名</mt-button>
</div>
</div>
<div class="">
<van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
<div class="canvas-wrap" id="canvasBox" :style="getHorizontalStyle">
<canvas id="canvas"></canvas>
</div>
<div class="sign-btn">
<mt-button type='primary' size='small' @touchstart="clear" @mousedown="clear"> 重置</mt-button>
<mt-button type='primary' size='small' @click="closePopup">取消</mt-button>
<mt-button type='primary' size='small' @touchstart="download" @mousedown="download">确认</mt-button>
</div>
</van-popup>
</div>
<div class="footer"></div>
</div>
<div class="add-submit">
<mt-button type="primary" :disabled="isClicked">提交</mt-button>
</div>
</div>
<Tabbar></Tabbar>
</div>
</template>
<script>
import Header from '@/components/Header';
import Tabbar from '@/components/Tabbar';
import {
serviceSureQueryList, // 确认标准
taskMainQueryList, //任务信息
} from '@/api/afterSale/serviceScore/index.js'
import Draw from '@/assets/draw/draw.js';
export default {
name: 'serviceScore',
data() {
return {
isClicked: false,
task_id: null, //任务id
flag: false,
degree: 0,
signImage: null,
show: false,
canvasBox: null,
scope: [{
value: 0,
title: '正常',
},
{
value: 90,
title: '顺时针旋转90°',
},
{
value: 180,
title: '顺时针旋转180°',
},
{
value: -90,
title: '逆时针旋转90°',
},
],
}
},
components: {
Header,
Tabbar,
Draw,
},
mounted() {
this.canvasBox = document.getElementById('canvasBox');
this.initCanvas();
},
computed: {
getHorizontalStyle() {
const d = document;
const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
let length = (h - w) / 2;
let width = w;
let height = h;
switch (this.degree) {
case -90:
length = -length;
case 90:
width = h;
height = w;
break;
default:
length = 0;
}
if (this.canvasBox) {
this.canvasBox.removeChild(document.querySelector('canvas'));
this.canvasBox.appendChild(document.createElement('canvas'));
setTimeout(() => {
this.initCanvas();
}, 200);
}
return {
transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
width: `${width}px`,
height: `${height}px`,
transformOrigin: 'center center',
};
},
},
watch: {
},
methods: {
showPopup() {
this.show = true;
},
closePopup() {
this.show = false;
},
initCanvas() {
const canvas = document.querySelector('canvas');
this.draw = new Draw(canvas, -this.degree);
},
clear() {
this.draw.clear();
},
download() {
this.draw.downloadPNGImage(this.draw.getPNGImage());
},
savePNG() {
this.signImage = this.draw.getPNGImage();
},
upload() {
const image = this.draw.getPNGImage();
const blob = this.draw.dataURLtoBlob(image);
const url = '';
const successCallback = (response) => {
console.log(response);
};
const failureCallback = (error) => {
console.log(error);
};
this.draw.upload(blob, url, successCallback, failureCallback);
},
getTaskInfo() {
// 任务id
this.task_id = this.$route.params.taskId;
// 获取确认内容
this.getServiceSureQueryList(this.task_id);
// 获取任务单主信息
this.getTaskMainQueryList(this.task_id)
},
// 确认标准
getServiceSureQueryList(taskId) {
serviceSureQueryList({
task_id: taskId
}).then((result) => {
console.log(result);
}).catch((err) => {
console.log(err);
});
},
// 任务单主信息
getTaskMainQueryList(taskId) {
taskMainQueryList({
id: taskId
}).then((result) => {
console.log(result);
}).catch((err) => {
console.log(err);
});
},
}
}
</script>
<style scoped>
.evaluation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 199;
height: 100%;
}
.mui-content {
width: 100%;
height: 100%;
padding-top: 44px;
padding-bottom: 50px;
overflow: scroll;
background-color: #fff;
}
.form-wrap {
width: 100%;
/* padding: 0 .625rem; */
background-color: #fff;
}
.mui-input-group {
padding: 0 .625rem;
}
/* 输入框自定义 右侧带有icon 开始 */
.self-choose {
float: right;
height: 40px;
width: 65%;
}
.self {
height: 100%;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
}
.before-self {
position: relative;
height: 100%;
width: 100%;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
}
.before-self input {
padding-left: 0;
}
.before-self .svg-icon {
width: 1.4em;
height: 1.4em;
}
.before-self span:nth-child(2) {
align-self: center;
}
/* 输入框自定义 右侧带有icon 结束*/
.mui-input-group:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0;
content: '';
/* -webkit-transform: scaleY(.5); */
/* transform: scaleY(.5); */
/* background-color: #c8c7cc; */
}
.mui-input-group:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 0;
content: '';
/* -webkit-transform: scaleY(.5); */
/* transform: scaleY(.5); */
/* background-color: #c8c7cc; */
}
.evaluation-list {
padding: .5rem;
width: 100%;
border: 1px solid #f2f2f2;
border-radius: .5rem;
box-shadow: 1px 2px 3px #ddd;
}
/* 签字板 */
.custom-sign {
width: 100%;
padding: 0 .625rem
}
.sign-board {
width: 100%;
height: 16rem;
background-color: #fff;
border-radius: .5rem;
/* border: 1px solid #c8c7cc; */
}
/* 写字板图片 */
.canvas-img {
width: 100%;
height: 100%;
border-radius: .5rem;
}
.canvas-img img {
display: inline-block;
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: .5rem;
}
.canvas-wrap {
padding: .625rem;
width: 100%;
height: 85%;
border: 1px solid #c8c7cc;
}
.canvas-wrap #canvas {
width: 100%;
height: 85%;
background-color: #f2f2f2;
cursor: crosshair;
}
.sign-btn {
width: 100%;
height: 15%;
padding: .625rem;
display: flex;
justify-content: space-between;
}
</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent