336 lines
8.9 KiB
Vue
336 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" :class="{isActive:isCode}">
|
|||
|
|
<custom-navbar title="资质认证" :showBack="true" backgroundColor="#fff"></custom-navbar>
|
|||
|
|
<view class="nocode" v-if="!isCode">
|
|||
|
|
<view class="node-title"> 输入验证码查看证件信息 </view>
|
|||
|
|
<view class="container-code">
|
|||
|
|
<view class="code-input">
|
|||
|
|
<input class="uni-input" v-model="value" maxlength="4" placeholder="请输入验证码"
|
|||
|
|
placeholder-class="code-input-placeholder" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<jp-verification-literalness ref="literalness" :contentWidth="115"
|
|||
|
|
:contentHeight="35"></jp-verification-literalness>
|
|||
|
|
</view>
|
|||
|
|
<view class="node-btn" :class="{ active: value.length == 4 }" @click="submit">
|
|||
|
|
查询
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode" v-if="isCode">
|
|||
|
|
<view class="isCode-title">资质认证</view>
|
|||
|
|
<view class="isCode-card" v-if="syrdetail.health_card">
|
|||
|
|
<view class="isCode-card-title">
|
|||
|
|
<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
|
|||
|
|
健康证
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card-card">
|
|||
|
|
<image class="isCode-card-card__img" :src="syrdetail.health_card" mode="widthFix" >
|
|||
|
|
</image>
|
|||
|
|
<wmWatermark text="美融融专用">
|
|||
|
|
</wmWatermark>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card" v-if="syrdetail.qualifications[0]">
|
|||
|
|
<view class="isCode-card-title">
|
|||
|
|
<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
|
|||
|
|
资质证书
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card-card">
|
|||
|
|
<image class="isCode-card-card__img" :src="syrdetail.qualifications[0]" mode="widthFix">
|
|||
|
|
</image>
|
|||
|
|
<wmWatermark text="美融融专用">
|
|||
|
|
</wmWatermark>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card" v-if="syrdetail.uscc_photo">
|
|||
|
|
<view class="isCode-card-title">
|
|||
|
|
<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
|
|||
|
|
营业执照
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card-card">
|
|||
|
|
<image class="isCode-card-card__img" :src="syrdetail.uscc_photo" mode="widthFix">
|
|||
|
|
</image>
|
|||
|
|
<wmWatermark text="美融融专用">
|
|||
|
|
</wmWatermark>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card" v-if="syrdetail.shop_photo">
|
|||
|
|
<view class="isCode-card-title">
|
|||
|
|
<image class="isCode-card-title__img" src="/static/images/syr/card.png" mode="aspectFit" />
|
|||
|
|
门头照片
|
|||
|
|
</view>
|
|||
|
|
<view class="isCode-card-card">
|
|||
|
|
<image class="isCode-card-card__img" :src="syrdetail.shop_photo" mode="aspectFill">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 隐藏的canvas，用于绘制水印 -->
|
|||
|
|
<canvas
|
|||
|
|
canvas-id="watermark-canvas"
|
|||
|
|
style="width: 1px; height: 1px; position: absolute; left: -9999rpx; top: -9999rpx;"
|
|||
|
|
></canvas>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import wmWatermark from "@/components/wm-watermark/wm-watermark.vue";
|
|||
|
|
import request from "../../utils/request";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
wmWatermark
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
value: "",
|
|||
|
|
syrdetail: {},
|
|||
|
|
id: null,
|
|||
|
|
isCode: false, //验证是否通过
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
tabsPopList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
console.log(options);
|
|||
|
|
this.id = options.id;
|
|||
|
|
this.getShopDetail(options.id);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 在页面的 methods 中定义方法
|
|||
|
|
previewWithWatermark(imgUrl) {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: imgUrl,
|
|||
|
|
success: (downloadRes) => {
|
|||
|
|
if (downloadRes.statusCode === 200 && downloadRes.tempFilePath) {
|
|||
|
|
// 确认临时路径存在
|
|||
|
|
this.addWatermark(downloadRes.tempFilePath);
|
|||
|
|
} else {
|
|||
|
|
console.error('图片下载失败，状态码：', downloadRes.statusCode);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('下载失败', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加水印并预览
|
|||
|
|
addWatermark(originalImgPath) {
|
|||
|
|
// 获取图片信息（宽高）
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: originalImgPath,
|
|||
|
|
success: (imgInfo) => {
|
|||
|
|
const { width, height } = imgInfo; // 原图宽高
|
|||
|
|
|
|||
|
|
// 步骤2：创建canvas（大小与原图一致）
|
|||
|
|
const canvasId = 'watermark-canvas'; // canvas 标识（需在页面中定义对应canvas）
|
|||
|
|
const ctx = uni.createCanvasContext(canvasId, this);
|
|||
|
|
|
|||
|
|
// 步骤3：绘制原图到canvas
|
|||
|
|
ctx.drawImage(originalImgPath, 0, 0, width, height);
|
|||
|
|
|
|||
|
|
// 步骤4：绘制文字水印（可自定义样式）
|
|||
|
|
const watermarkText = '我的水印'; // 水印文字
|
|||
|
|
ctx.setFontSize(20); // 字体大小
|
|||
|
|
ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 文字颜色（半透明）
|
|||
|
|
ctx.setTextAlign('center'); // 文字对齐方式
|
|||
|
|
ctx.setTextBaseline('middle'); // 文字基线
|
|||
|
|
|
|||
|
|
// 旋转水印（可选，-30度倾斜）
|
|||
|
|
const rotateAngle = -30 * Math.PI / 180; // 角度转弧度
|
|||
|
|
const gap = 100; // 水印间距
|
|||
|
|
|
|||
|
|
// 重复绘制水印（铺满图片）
|
|||
|
|
for (let y = 0; y < height; y += gap) {
|
|||
|
|
for (let x = 0; x < width; x += gap) {
|
|||
|
|
ctx.save(); // 保存当前状态
|
|||
|
|
ctx.translate(x, y); // 移动到指定位置
|
|||
|
|
ctx.rotate(rotateAngle); // 旋转
|
|||
|
|
ctx.fillText(watermarkText, 0, 0); // 绘制文字
|
|||
|
|
ctx.restore(); // 恢复状态
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绘制完成后导出图片
|
|||
|
|
ctx.draw(false, () => {
|
|||
|
|
// 步骤5：将canvas转为临时图片路径
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
canvasId: canvasId,
|
|||
|
|
width: width,
|
|||
|
|
height: height,
|
|||
|
|
destWidth: width, // 输出图片宽度（与原图一致）
|
|||
|
|
destHeight: height, // 输出图片高度（与原图一致）
|
|||
|
|
success: (res) => {
|
|||
|
|
const watermarkImgPath = res.tempFilePath; // 带水印的图片路径
|
|||
|
|
// 步骤6：预览带水印的图片
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: [watermarkImgPath], // 预览的图片数组
|
|||
|
|
current: 0 // 初始显示第几张
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('canvas转图片失败', err);
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('获取图片信息失败', err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取手艺人详情
|
|||
|
|
getShopDetail(id) {
|
|||
|
|
request
|
|||
|
|
.post("/user/syrdetail", {
|
|||
|
|
id,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
this.syrdetail = res.data;
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.log(err);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
if (this.value.length == 4) {
|
|||
|
|
this.isCode = this.$refs.literalness.verification(this.value);
|
|||
|
|
if(!this.isCode){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "验证码错误",
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
console.log(this.isCode);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.container {
|
|||
|
|
background-color: #fff;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
|
|||
|
|
.nocode {
|
|||
|
|
padding: 0 48rpx;
|
|||
|
|
|
|||
|
|
.node-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-top: 53rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container-code {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: 14rpx;
|
|||
|
|
border-bottom: 2rpx solid rgba(247, 249, 252, 1);
|
|||
|
|
|
|||
|
|
.code-input {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.code-input-placeholder {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #c5c5c7;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
margin-top: 90rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.node-btn {
|
|||
|
|
width: 644rpx;
|
|||
|
|
height: 96rpx;
|
|||
|
|
background: #f7f9fc;
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #8e929f;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.node-btn.active {
|
|||
|
|
color: #fff;
|
|||
|
|
background: #ff3344;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.isCode {
|
|||
|
|
.isCode-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.isActive {
|
|||
|
|
background-color: transparent;
|
|||
|
|
padding: 25rpx 20rpx;
|
|||
|
|
.isCode-card{
|
|||
|
|
padding: 30rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.isCode-card-title{
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
&__img{
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
margin-right: 13rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.isCode-card-card{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
width: 650rpx;
|
|||
|
|
// height: 300rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
&__img{
|
|||
|
|
width: 650rpx;
|
|||
|
|
// height: 300rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|