点击编辑，弹出窗口，上传授权书的同时根据执照全称生成印章，印章转化成base64传给后台。
image.png
image.png
弹窗
<Modal
:mask-closable="false"
@on-cancel="modalStatusHide($event)"
v-model="add_modal"
:title="merchant_id ? '修改商户信息' : '添加商户'"
width="570"
>
<Form
ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="108"
>
<FormItem label="销售人员" prop="sale_id">
<Select
clearable
ref="userSelect"
v-model="formValidate.sale_id"
filterable
placeholder="请选择"
>
<Option v-for="item in saleList" :key="item.id" :value="item.id"
>{{ item.name }}（用户ID：{{ item.id }}）
</Option>
</Select>
</FormItem>
<FormItem label="客服人员" prop="customer_id">
<Select
clearable
ref="userSelect"
v-model="formValidate.customer_id"
filterable
placeholder="请选择"
>
<Option
v-for="item in customerList"
:key="item.id"
:value="item.id"
>{{ item.name }}（用户ID：{{ item.id }}）
</Option>
</Select>
</FormItem>
<FormItem label="团队" prop="agent_id">
<Select
clearable
ref="userSelect"
v-model="formValidate.agent_id"
filterable
placeholder="请选择"
>
<Option v-for="item in agentList" :key="item.id" :value="item.id"
>{{ item.name }}（用户ID：{{ item.id }}）
</Option>
</Select>
</FormItem>
<FormItem label="合同编号" prop="contract_number">
<Input
v-model="formValidate.contract_number"
placeholder="请输入合同编号"
></Input>
</FormItem>
<FormItem label="上传文件" prop="contract_url">
<Upload
ref="upload"
:action="uploadUrl"
:on-success="handleUpload"
:show-upload-list="false"
>
<Button icon="ios-cloud-upload-outline">附件上传</Button>
</Upload>
<p style="cursor: pointer" v-if="!formValidate.contract_url == ''">
<a :href="formValidate.contract_url" target="_blank" download>{{
contract_urlName
}}</a>
<Icon
v-if="!formValidate.contract_url == ''"
type="md-close"
size="16"
color="#ff7632"
@click="remove"
/>
</p>
</FormItem>
<FormItem label="执照全称" prop="license_full_name">
<Input
v-model="formValidate.license_full_name"
placeholder="请输入执照全称"
></Input>
</FormItem>
<FormItem label="公司简称" prop="company_abbr">
<Input
v-model="formValidate.company_abbr"
placeholder="请输入公司简称"
></Input>
</FormItem>
<FormItem label="公司负责人" prop="charge_name">
<Input
v-model="formValidate.charge_name"
placeholder="请输入公司负责人"
></Input>
</FormItem>
<FormItem label="负责人手机号码" prop="charge_mobile">
<Input
:maxlength="mobileLength"
v-model="formValidate.charge_mobile"
placeholder="请输入负责人手机号"
></Input>
<p style="color: #999999" class="tips">
*该手机号将作为商户账号的最高权限
</p>
</FormItem>
<FormItem label="营业执照" prop="license_url">
<Input
style="display: none"
v-model="formValidate.license_url"
placeholder
></Input>
<Upload
:show-upload-list="show_upload_list"
:on-success="upSuccess"
:action="uploadUrl"
accept="image/png, image/jpeg"
>
<div class="license-box">
<img
v-if="formValidate.license_url"
:src="formValidate.license_url"
alt
/>
<p v-else>
<Icon type="ios-cloud-upload-outline" />
<span>支持格式：jpg、png</span>
</p>
</div>
</Upload>
</FormItem>
<FormItem
style="display: inline-block"
label="授权书"
prop="empower_url"
>
<Input
style="display: none"
v-model="formValidate.empower_url"
placeholder
></Input>
<Upload
:show-upload-list="show_upload_list"
:on-success="upSuccess_sqs"
:action="uploadUrl_sqs"
accept="image/png, image/jpeg"
>
<div class="license-box">
<img
v-if="formValidate.empower_url"
:src="formValidate.empower_url"
alt
/>
<p v-else>
<Icon type="ios-cloud-upload-outline" />
<span>支持格式：jpg、png</span>
</p>
</div>
</Upload>
</FormItem>
<FormItem
style="display: inline-block; width: 100px"
label="印章"
prop="seal"
>
<div class="license-box">
<canvas id="canvas" width="250" height="250"></canvas>
</div>
</FormItem>
</Form>
<div slot="footer">
<Button @click="hideAddModal">取消</Button>
<Button @click="saveHandle" type="primary" class="btn-warning"
>保存</Button
>
</div>
</Modal>
data
//图片
uploadUrl: baseUrl + "common/upload/store",
//授权书
uploadUrl_sqs: baseUrl + "common/upload/store",
add_modal: false,
show_upload_list: false,
contract_urlName: "",
formValidate: {
//执照全称
license_full_name: "",
company_abbr: "",
charge_name: "",
charge_mobile: "",
license_url: "",
sale_id: "",
customer_id: "",
agent_id: "",
contract_number: "",
contract_url: "",
empower_url: "",
seal: ""
},
ruleValidate: {
license_full_name: [
{ required: true, message: "执照全称不能为空", trigger: "focus" },
],
contract_url: [
{ required: true, message: "上传文件不能为空", trigger: "focus" },
],
company_abbr: [
{
required: true,
message: "统一社会信用代码不能为空",
trigger: "focus",
},
],
charge_name: [
{ required: true, message: "请选择经营者", trigger: "focus" },
],
charge_mobile: [
{ required: true, message: "请上传营业执照", trigger: "focus" },
],
},
methods
methods:{
createSeal() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 绘制印章边框
var width = canvas.width / 2;
var height = canvas.height / 2;
context.lineWidth = 7;
context.strokeStyle = "#f00";
context.beginPath();
context.arc(width, height, 110, 0, Math.PI * 2);
context.stroke();
//画五角星
create5star(context, width, height, 20, "#f00", 0);
// 绘制印章名称
context.font = '16px Helvetica';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth = 1;
context.fillStyle = '#f00';
let name = "验收专用章"
context.fillText(name, width, height + 55);
// 绘制印章单位
context.translate(width, height);// 平移到此位置,
context.font = '26px Helvetica'
var count = this.formValidate.license_full_name.length;// 字数
var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度
var chars = this.formValidate.license_full_name.split("");
console.log(chars, "执照全称")
var c;
for (var i = 0; i < count; i++) {
c = chars[i];// 需要绘制的字符
if (i == 0)
context.rotate(5 * Math.PI / 6);
else
context.rotate(angle);
context.save();
context.translate(90, 0);// 平移到此位置,此时字和x轴垂直
context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
context.fillText(c, 0, 5);// 此点为字的中心点
context.restore();
}
//绘制五角星
/**
* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
* rotate:绕对称轴旋转rotate弧度
*/
function create5star(context, sx, sy, radius, color, rotato) {
context.save();
context.fillStyle = color;
context.translate(sx, sy);//移动坐标原点
context.rotate(Math.PI + rotato);//旋转
context.beginPath();//创建路径
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {//画五角星的五条边
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(x * radius, y * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
var saveImage = canvas.toDataURL('image/png')
this.formValidate.seal = saveImage.substring(22)
},
//授权书
upSuccess_sqs(response) {
this.formValidate.empower_url = response.data.url;
if (response.message == "success") {
this.createSeal()
}
},
// 编辑
editHandle(row) {
console.log(row);
merchantDetail({ merchant_id: row.id }).then((res) => {
console.log(res.data.data);
this.merchant_id = row.id;
let detail = res.data.data;
this.formValidate.sale_id = detail.sale_id || "";
this.formValidate.customer_id = detail.customer_id || "";
this.formValidate.agent_id = detail.agent_id || "";
this.formValidate.license_full_name = detail.license_full_name;
this.formValidate.company_abbr = detail.company_abbr;
this.formValidate.charge_name = detail.charge_name;
this.formValidate.charge_mobile = detail.charge_mobile;
this.formValidate.license_url = detail.license_url;
this.formValidate.empower_url = detail.empower_url;
this.formValidate.contract_number = detail.contract_number || "";
if (detail.contract_url) {
let search = "/";
this.formValidate.contract_url = detail.contract_url;
let start = detail.contract_url.lastIndexOf(search);
this.contract_urlName = detail.contract_url.slice(
start + 1
);
} else {
this.formValidate.contract_url = ""
this.contract_urlName = ""
}
this.add_modal = true;
var canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = canvas.width;
canvas.height = canvas.height;
});
},
}
遇到的问题：每次打开弹窗会重复绘制印章
解决办法：
1. //清除后的样式保留
content.clearRect(0,0,canvas.width,canvas.height);//清除一个矩形区域
2.//原来设置的样式不保留
canvas.width=canvas.width;
canvas.height=canvas.height;
content.fillRect(125,125,100,100);//清除路径
// 区别
1.前一种方法 由 2d渲染上下文来操作；后一种方法，直接设置的是canvas
2.前一种方法，清除一个矩形区域，会保留原有的样式，
网友评论