更新
This commit is contained in:
xiaozhiyong
@@ -1,33 +1,3 @@
|
|||||||
import request from 'utils/request';
|
import request from "utils/request";
|
||||||
|
|
||||||
export default {
|
export default {};
|
||||||
getById(params) {
|
|
||||||
return request({
|
|
||||||
url: '/guest-site/saasSiteInfo/getById',
|
|
||||||
method: 'post',
|
|
||||||
data: params,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 金额换算升数
|
|
||||||
getPayDisInfo(params) {
|
|
||||||
return request({
|
|
||||||
url: '/guest-site/mobileOrderApi/getPayDisInfo',
|
|
||||||
method: 'post',
|
|
||||||
data: params,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
createCOrder(params) {
|
|
||||||
return request({
|
|
||||||
url: '/guest-site/mobileOrderApi/createCOrder',
|
|
||||||
method: 'post',
|
|
||||||
data: params,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
wxPay(params) {
|
|
||||||
return request({
|
|
||||||
url: '/guest-finance/yiBaoPay/wxPay',
|
|
||||||
method: 'post',
|
|
||||||
data: params,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|||||||
10
src/api/site/aptitude.js
Normal file
10
src/api/site/aptitude.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import request from "utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getSiteCertificateBySiteId(siteId) {
|
||||||
|
return request({
|
||||||
|
url: `/guest-site/saasSiteCertificate/getSiteCertificateBySiteId/${siteId}`,
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -16,7 +16,11 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"root": "subPackages/site",
|
"root": "subPackages/site",
|
||||||
"pages": [{ "path": "details/index" }, { "path": "search/index" }]
|
"pages": [
|
||||||
|
{ "path": "details/index" },
|
||||||
|
{ "path": "search/index" },
|
||||||
|
{ "path": "aptitude/index" }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"root": "subPackages/order",
|
"root": "subPackages/order",
|
||||||
|
|||||||
@@ -389,7 +389,7 @@ export default {
|
|||||||
.agreement {
|
.agreement {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: env(safe-area-inset-bottom);
|
bottom: calc(env(safe-area-inset-bottom) + 60rpx);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #b6b6b6;
|
color: #b6b6b6;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<navbar>
|
<navbar>
|
||||||
<view slot="center">订单详情</view>
|
<view slot="center" style="font-size: 28rpx">订单详情</view>
|
||||||
</navbar>
|
</navbar>
|
||||||
<view class="status">
|
<view class="status">
|
||||||
<view>
|
<view>
|
||||||
@@ -113,7 +113,6 @@ export default {
|
|||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
preferential(discountAmount, platformCommission) {
|
preferential(discountAmount, platformCommission) {
|
||||||
if (!discountAmount || !platformCommission) return "0.00";
|
|
||||||
return (
|
return (
|
||||||
(discountAmount * 10000 + platformCommission * 10000) /
|
(discountAmount * 10000 + platformCommission * 10000) /
|
||||||
10000
|
10000
|
||||||
|
|||||||
90
src/subPackages/site/aptitude/index.vue
Normal file
90
src/subPackages/site/aptitude/index.vue
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container" style="--navbar-background-opacity: 1">
|
||||||
|
<navbar>
|
||||||
|
<view slot="center" style="font-size: 28rpx">营业资质</view>
|
||||||
|
</navbar>
|
||||||
|
<view class="content">
|
||||||
|
<!-- <image
|
||||||
|
v-for="(item, index) in imgList"
|
||||||
|
:key="index"
|
||||||
|
src=""
|
||||||
|
mode="widthFix"
|
||||||
|
/> -->
|
||||||
|
|
||||||
|
<view
|
||||||
|
style="position: relative; margin-bottom: 20rpx"
|
||||||
|
v-for="(item, index) in imgList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
:src="item.ossUrl"
|
||||||
|
style="width: 100%; vertical-align: middle"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<h-watermark
|
||||||
|
position="absolute"
|
||||||
|
title="小星加油"
|
||||||
|
titleColor="orange"
|
||||||
|
></h-watermark>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tip">
|
||||||
|
以上信息均为商家提供，具体以相关主管登记部门为准。经营者需确保信息真实有效，如与事实不符或发生变更，请联系平台更换
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import serve from "api/site/aptitude.js";
|
||||||
|
import hWatermark from "@/uni_modules/h-watermark/components/h-watermark/h-watermark.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
hWatermark,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgList: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
let { siteId } = options;
|
||||||
|
if (siteId) {
|
||||||
|
this.getSiteCertificateBySiteId(siteId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getSiteCertificateBySiteId(siteId) {
|
||||||
|
serve.getSiteCertificateBySiteId(siteId).then((res) => {
|
||||||
|
if (res.code === 20000) {
|
||||||
|
this.imgList = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f6f6f6;
|
||||||
|
.content {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 150rpx;
|
||||||
|
width: 700rpx;
|
||||||
|
// height: 500px;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 140rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 35rpx;
|
||||||
|
background: rgba($color: #000, $alpha: 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -4,21 +4,32 @@
|
|||||||
油站详情
|
油站详情
|
||||||
<uni-icons type="closeempty" size="20" @click="close" />
|
<uni-icons type="closeempty" size="20" @click="close" />
|
||||||
</view>
|
</view>
|
||||||
<view class="block">
|
<view class="block first">
|
||||||
<view>油站开票</view>
|
<view>油站开票</view>
|
||||||
<view
|
<view
|
||||||
>发票需油站当天开具，请务必现场咨询油站，过期可能无法回溯发票。</view
|
>发票需油站当天开具，请务必现场咨询油站，过期可能无法回溯发票。</view
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="block second">
|
||||||
|
<view>营业资质</view>
|
||||||
|
<view @click="jumpAptitude">
|
||||||
|
<text>查看</text><uni-icons type="right" size="17"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
discountInfo: Object,
|
siteId: String,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
jumpAptitude() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/subPackages/site/aptitude/index?siteId=${this.siteId}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$emit("close");
|
this.$emit("close");
|
||||||
},
|
},
|
||||||
@@ -46,16 +57,43 @@ export default {
|
|||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 15rpx;
|
border-radius: 15rpx;
|
||||||
> view {
|
&.first {
|
||||||
&:nth-of-type(1) {
|
> view {
|
||||||
font-size: 33rpx;
|
&:nth-of-type(1) {
|
||||||
font-weight: 550;
|
font-size: 33rpx;
|
||||||
color: #333;
|
font-weight: 550;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:nth-of-type(2) {
|
}
|
||||||
margin-top: 20rpx;
|
&.second {
|
||||||
font-size: 24rpx;
|
display: flex;
|
||||||
line-height: 38rpx;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
> view {
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
font-size: 33rpx;
|
||||||
|
font-weight: 550;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
//
|
||||||
|
// margin-top: 20rpx;
|
||||||
|
|
||||||
|
// line-height: 38rpx;
|
||||||
|
text {
|
||||||
|
// vertical-align: text-bottom;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
uni-icons {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -108,7 +108,10 @@
|
|||||||
borderRadius="20rpx 20rpx 0 0"
|
borderRadius="20rpx 20rpx 0 0"
|
||||||
@touchmove.stop.prevent
|
@touchmove.stop.prevent
|
||||||
>
|
>
|
||||||
<info @close="$refs.popupInfo.close()" />
|
<info
|
||||||
|
:siteId="siteInfo.siteId || siteInfo.id"
|
||||||
|
@close="$refs.popupInfo.close()"
|
||||||
|
/>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
|
|
||||||
<uni-popup
|
<uni-popup
|
||||||
@@ -501,7 +504,7 @@ export default {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 3rpx 10rpx;
|
padding: 3rpx 10rpx;
|
||||||
font-size: 18rpx;
|
font-size: 18rpx;
|
||||||
color: #33333390;
|
color: #333;
|
||||||
border: 1rpx solid #999;
|
border: 1rpx solid #999;
|
||||||
border-radius: 6rpx;
|
border-radius: 6rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
13
src/uni_modules/h-watermark/changelog.md
Normal file
13
src/uni_modules/h-watermark/changelog.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
## 1.0.5（2024-01-19）
|
||||||
|
- 重大更新：新增全局数据监听，组件参数变化时，水印跟随变化
|
||||||
|
## 1.0.4（2023-10-27）
|
||||||
|
- 重大更新：新增参数scale放大缩小，可放大和缩放水印，以达到相关使用需求
|
||||||
|
- 重大更新：新增参数column水印列数，用以适用缩小功能，防止缩小后水印不能完全覆盖页面问题
|
||||||
|
## 1.0.3（2023-08-03）
|
||||||
|
- 去除微信小程序支持，canvas在小程序手机中会跟随页面滚动而滚动
|
||||||
|
## 1.0.2（2023-07-31）
|
||||||
|
- 增加布局方式（绝对布局-相对布局），可指定父级容器
|
||||||
|
## 1.0.1（2023-07-31）
|
||||||
|
- dcloud更新展示图片不显示问题
|
||||||
|
## 1.0.0（2023-07-12）
|
||||||
|
- 第一次版本提交
|
||||||
@@ -0,0 +1,363 @@
|
|||||||
|
<!-- 水印组件 -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="watermark" :style="{ position: position }">
|
||||||
|
<canvas
|
||||||
|
canvas-id="watermark"
|
||||||
|
style="position: absolute"
|
||||||
|
:style="{
|
||||||
|
transform: 'scale(' + scale + ')',
|
||||||
|
width: canvasWidth + '%',
|
||||||
|
height: canvasWidth + '%',
|
||||||
|
top: canvasTop + '%',
|
||||||
|
left: canvasTop + '%',
|
||||||
|
}"
|
||||||
|
></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* @description 水印
|
||||||
|
* @example <h-watermark></h-watermark>
|
||||||
|
*
|
||||||
|
* @property {String} title 标题文字（默认 水印组件 ）
|
||||||
|
* @property {Boolean} titleShow 是否显示标题文字（默认 true ）
|
||||||
|
* @property {Number} titleSize 标题文字字号（默认 16 ）
|
||||||
|
* @property {String} titleColor 标题文字颜色（默认 #f15723 ）
|
||||||
|
* @property {Number} titleLucency 标题文字透明度（默认 0.2 ）
|
||||||
|
* @property {String} mobile 联系电话（默认 18761665823 ）
|
||||||
|
* @property {Boolean} mobileShow 是否显示联系电话（默认 true ）
|
||||||
|
* @property {Number} mobileSize 联系电话字号（默认 10 ）
|
||||||
|
* @property {String} mobileColor 联系电话颜色（默认 #f15723 ）
|
||||||
|
* @property {Number} mobileLucency 联系电话透明度（默认 0.2 ）
|
||||||
|
* @property {String} appName 软件名称（默认 组件 ）
|
||||||
|
* @property {Boolean} appNameShow 是否显示软件名称（默认 true ）
|
||||||
|
* @property {Number} appNameSize 软件名称字号（默认 10 ）
|
||||||
|
* @property {String} appNameColor 软件名称颜色（默认 #f15723 ）
|
||||||
|
* @property {Number} appNameLucency 软件名称透明度（默认 0.2 ）
|
||||||
|
* @property {Number} rotate 旋转弧度（默认 -45 ）
|
||||||
|
* @property {Object} position 布局方式（绝对布局-相对布局）（默认 'fixed-绝对布局' ）
|
||||||
|
* @property {Number} scale 放大缩小（默认1）
|
||||||
|
* @property {Number} column 水印列数（默认15）
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// 小程序样式穿透
|
||||||
|
options: {
|
||||||
|
styleIsolation: "shared",
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 标题文字
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "水印组件",
|
||||||
|
},
|
||||||
|
// 是否显示标题文字
|
||||||
|
titleShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
// 标题文字字号
|
||||||
|
titleSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 16,
|
||||||
|
},
|
||||||
|
// 标题文字颜色
|
||||||
|
titleColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#f15723",
|
||||||
|
},
|
||||||
|
// 标题文字透明度
|
||||||
|
titleLucency: {
|
||||||
|
type: Number,
|
||||||
|
default: 0.2,
|
||||||
|
},
|
||||||
|
// 联系电话
|
||||||
|
mobile: {
|
||||||
|
type: String,
|
||||||
|
default: "18761665823",
|
||||||
|
},
|
||||||
|
// 是否显示联系电话
|
||||||
|
mobileShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 联系电话字号
|
||||||
|
mobileSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
// 联系电话颜色
|
||||||
|
mobileColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#f15723",
|
||||||
|
},
|
||||||
|
// 联系电话透明度
|
||||||
|
mobileLucency: {
|
||||||
|
type: Number,
|
||||||
|
default: 0.2,
|
||||||
|
},
|
||||||
|
// 软件名称
|
||||||
|
appName: {
|
||||||
|
type: String,
|
||||||
|
default: "组件",
|
||||||
|
},
|
||||||
|
// 是否显示软件名称
|
||||||
|
appNameShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 软件名称字号
|
||||||
|
appNameSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
// 软件名称颜色
|
||||||
|
appNameColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#f15723",
|
||||||
|
},
|
||||||
|
// 软件名称透明度
|
||||||
|
appNameLucency: {
|
||||||
|
type: Number,
|
||||||
|
default: 0.2,
|
||||||
|
},
|
||||||
|
// 旋转弧度
|
||||||
|
rotate: {
|
||||||
|
type: Number,
|
||||||
|
default: -45,
|
||||||
|
},
|
||||||
|
// 布局方式（绝对布局-相对布局）
|
||||||
|
position: {
|
||||||
|
type: String,
|
||||||
|
default: "fixed",
|
||||||
|
},
|
||||||
|
// 放大缩小
|
||||||
|
scale: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
// 水印列数
|
||||||
|
column: {
|
||||||
|
type: Number,
|
||||||
|
default: 15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.createWatemark();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
all(val) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.createWatemark();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 画布宽度
|
||||||
|
canvasWidth() {
|
||||||
|
return 100 / this.scale;
|
||||||
|
},
|
||||||
|
// 画布距离顶部高度
|
||||||
|
canvasTop() {
|
||||||
|
return -(100 / this.scale - 100) / 2;
|
||||||
|
},
|
||||||
|
all() {
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
titleShow,
|
||||||
|
titleSize,
|
||||||
|
titleColor,
|
||||||
|
titleLucency,
|
||||||
|
mobile,
|
||||||
|
mobileShow,
|
||||||
|
mobileSize,
|
||||||
|
mobileColor,
|
||||||
|
mobileLucency,
|
||||||
|
appName,
|
||||||
|
appNameShow,
|
||||||
|
appNameSize,
|
||||||
|
appNameColor,
|
||||||
|
appNameLucency,
|
||||||
|
rotate,
|
||||||
|
position,
|
||||||
|
scale,
|
||||||
|
column,
|
||||||
|
} = this;
|
||||||
|
return {
|
||||||
|
title,
|
||||||
|
titleShow,
|
||||||
|
titleSize,
|
||||||
|
titleColor,
|
||||||
|
titleLucency,
|
||||||
|
mobile,
|
||||||
|
mobileShow,
|
||||||
|
mobileSize,
|
||||||
|
mobileColor,
|
||||||
|
mobileLucency,
|
||||||
|
appName,
|
||||||
|
appNameShow,
|
||||||
|
appNameSize,
|
||||||
|
appNameColor,
|
||||||
|
appNameLucency,
|
||||||
|
rotate,
|
||||||
|
position,
|
||||||
|
scale,
|
||||||
|
column,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createWatemark() {
|
||||||
|
let ctx = uni.createCanvasContext("watermark", this);
|
||||||
|
const title = this.title;
|
||||||
|
const mobile = this.mobile;
|
||||||
|
const appName = this.appName;
|
||||||
|
const titleColor = this.colorRgba(this.titleColor, this.titleLucency);
|
||||||
|
const mobileColor = this.colorRgba(this.mobileColor, this.mobileLucency);
|
||||||
|
const appNameColor = this.colorRgba(
|
||||||
|
this.appNameColor,
|
||||||
|
this.appNameLucency
|
||||||
|
);
|
||||||
|
// 旋转弧度
|
||||||
|
ctx.rotate((this.rotate * Math.PI) / 180);
|
||||||
|
// 设置字体颜色
|
||||||
|
ctx.setFillStyle("#000");
|
||||||
|
for (let j = 0; j < this.column; j++) {
|
||||||
|
for (let i = 1; i < this.column; i++) {
|
||||||
|
//这个for循环代表横向循环，
|
||||||
|
let num = 0;
|
||||||
|
ctx.beginPath();
|
||||||
|
if (this.titleShow) {
|
||||||
|
ctx.setFontSize(this.titleSize);
|
||||||
|
ctx.setFillStyle(titleColor);
|
||||||
|
ctx.fillText(title, 135 * -i, 150 * j);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.mobileShow) {
|
||||||
|
ctx.setFontSize(this.mobileSize);
|
||||||
|
ctx.setFillStyle(mobileColor);
|
||||||
|
ctx.fillText(mobile, 135 * -i + 20 * num, 150 * j + 20 * num);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.appNameShow) {
|
||||||
|
ctx.setFontSize(this.appNameSize);
|
||||||
|
ctx.setFillStyle(appNameColor);
|
||||||
|
ctx.fillText(appName, 135 * -i + 20 * num, 150 * j + 20 * num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 1; i < this.column; i++) {
|
||||||
|
//这个for循环代表横向循环，
|
||||||
|
let num = 0;
|
||||||
|
ctx.beginPath();
|
||||||
|
if (this.titleShow) {
|
||||||
|
ctx.setFontSize(this.titleSize);
|
||||||
|
ctx.setFillStyle(titleColor);
|
||||||
|
ctx.fillText(title, 135 * i, -150 * j);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.mobileShow) {
|
||||||
|
ctx.setFontSize(this.mobileSize);
|
||||||
|
ctx.setFillStyle(mobileColor);
|
||||||
|
ctx.fillText(mobile, 135 * i + 20 * num, -150 * j + 20 * num);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.appNameShow) {
|
||||||
|
ctx.setFontSize(this.appNameSize);
|
||||||
|
ctx.setFillStyle(appNameColor);
|
||||||
|
ctx.fillText(appName, 135 * i + 20 * num, -150 * j + 20 * num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 1; i < this.column; i++) {
|
||||||
|
//这个for循环代表横向循环，
|
||||||
|
let num = 0;
|
||||||
|
ctx.beginPath();
|
||||||
|
if (this.titleShow) {
|
||||||
|
ctx.setFontSize(this.titleSize);
|
||||||
|
ctx.setFillStyle(titleColor);
|
||||||
|
ctx.fillText(title, -135 * i, -150 * j);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.mobileShow) {
|
||||||
|
ctx.setFontSize(this.mobileSize);
|
||||||
|
ctx.setFillStyle(mobileColor);
|
||||||
|
ctx.fillText(mobile, -135 * i + 20 * num, -150 * j + 20 * num);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.appNameShow) {
|
||||||
|
ctx.setFontSize(this.appNameSize);
|
||||||
|
ctx.setFillStyle(appNameColor);
|
||||||
|
ctx.fillText(appName, -135 * i + 20 * num, -150 * j + 20 * num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.column; i++) {
|
||||||
|
//这个for循环代表横向循环，
|
||||||
|
let num = 0;
|
||||||
|
ctx.beginPath();
|
||||||
|
if (this.titleShow) {
|
||||||
|
ctx.setFontSize(this.titleSize);
|
||||||
|
ctx.setFillStyle(titleColor);
|
||||||
|
ctx.fillText(title, 135 * i, 150 * j);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.mobileShow) {
|
||||||
|
ctx.setFontSize(this.mobileSize);
|
||||||
|
ctx.setFillStyle(mobileColor);
|
||||||
|
ctx.fillText(mobile, 135 * i + 20 * num, 150 * j + 20 * num);
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
if (this.appNameShow) {
|
||||||
|
ctx.setFontSize(this.appNameSize);
|
||||||
|
ctx.setFillStyle(appNameColor);
|
||||||
|
ctx.fillText(appName, 135 * i + 20 * num, 150 * j + 20 * num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.draw();
|
||||||
|
},
|
||||||
|
// 颜色转换
|
||||||
|
colorRgba(sHex, alpha = 1) {
|
||||||
|
// 十六进制颜色值的正则表达式
|
||||||
|
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||||
|
/* 16进制颜色转为RGB格式 */
|
||||||
|
let sColor = sHex.toLowerCase();
|
||||||
|
if (sColor && reg.test(sColor)) {
|
||||||
|
if (sColor.length === 4) {
|
||||||
|
var sColorNew = "#";
|
||||||
|
for (let i = 1; i < 4; i += 1) {
|
||||||
|
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
||||||
|
}
|
||||||
|
sColor = sColorNew;
|
||||||
|
}
|
||||||
|
// 处理六位的颜色值
|
||||||
|
var sColorChange = [];
|
||||||
|
for (let i = 1; i < 7; i += 2) {
|
||||||
|
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
|
||||||
|
}
|
||||||
|
if (alpha == 1) {
|
||||||
|
return sColorChange.join(",");
|
||||||
|
} else {
|
||||||
|
return "rgba(" + sColorChange.join(",") + "," + alpha + ")";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return sColor;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.watermark {
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
85
src/uni_modules/h-watermark/package.json
Normal file
85
src/uni_modules/h-watermark/package.json
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
{
|
||||||
|
"id": "h-watermark",
|
||||||
|
"displayName": "h-watermark 水印组件",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "水印组件，可自定义旋转弧度、父级容器、自定义水印标题（显影、文字、字号、颜色、透明度等）、自定义水印联系电话（显影、文字、字号、颜色、透明度等）、自定义软件名称（显影、文字、字号、颜色、透明度等）",
|
||||||
|
"keywords": [
|
||||||
|
"h-watermark",
|
||||||
|
"水印",
|
||||||
|
"自定义",
|
||||||
|
"vue",
|
||||||
|
"放大缩小"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "u"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "u",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
102
src/uni_modules/h-watermark/readme.md
Normal file
102
src/uni_modules/h-watermark/readme.md
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
## 水印组件
|
||||||
|
|
||||||
|
> **组件名：h-watermark**
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
|
在 ``template`` 中使用组件
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<!-- 基本使用 -->
|
||||||
|
<h-watermark></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义标题文字 -->
|
||||||
|
<h-watermark title="自定义标题文字"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 是否显示标题文字 -->
|
||||||
|
<h-watermark :titleShow="false"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义标题文字字号 -->
|
||||||
|
<h-watermark :titleSize="26"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义标题文字颜色 -->
|
||||||
|
<h-watermark titleColor="#30b6a2"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义标题文字透明度 -->
|
||||||
|
<h-watermark :titleLucency="0.4"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义联系电话 -->
|
||||||
|
<h-watermark mobile="18888888888"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 是否显示联系电话 -->
|
||||||
|
<h-watermark :mobileShow="false"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义联系电话字号 -->
|
||||||
|
<h-watermark :mobileSize="16"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义联系电话颜色 -->
|
||||||
|
<h-watermark mobileColor="#30b6a2"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义联系电话透明度 -->
|
||||||
|
<h-watermark :mobileLucency="0.4"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义软件名称 -->
|
||||||
|
<h-watermark appName="自定义软件名称"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 是否显示软件名称 -->
|
||||||
|
<h-watermark :appNameShow="false"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义软件名称字号 -->
|
||||||
|
<h-watermark :appNameSize="16"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义软件名称颜色 -->
|
||||||
|
<h-watermark appNameColor="#30b6a2"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义软件名称透明度 -->
|
||||||
|
<h-watermark :appNameLucency="0.4"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义旋转弧度 -->
|
||||||
|
<h-watermark :rotate="45"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义父级容器 -->// 写在父级容器中
|
||||||
|
<view style="height: 500px;position: relative;">
|
||||||
|
<h-watermark position="absolute"></h-watermark>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 自定义放大缩小 -->
|
||||||
|
<h-watermark :scale="0.5"></h-watermark>
|
||||||
|
|
||||||
|
<!-- 自定义水印列数 -->
|
||||||
|
<h-watermark :column="50"></h-watermark>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||||||
|
| :-------: | :-----: | :-----: | :-----------------------: |
|
||||||
|
| title | String | 水印组件 | 标题文字 |
|
||||||
|
| titleShow | Boolean | true | 是否显示标题文字 |
|
||||||
|
| titleSize | Number | 16 | 标题文字字号 |
|
||||||
|
| titleColor | String | #f15723 | 标题文字颜色 |
|
||||||
|
| titleLucency | Number | 0.2 | 标题文字透明度 |
|
||||||
|
| mobile | String | 18761665823 | 联系电话 |
|
||||||
|
| mobileShow | Boolean | true | 是否显示联系电话 |
|
||||||
|
| mobileSize | Number | 10 | 联系电话字号 |
|
||||||
|
| mobileColor | String | #f15723 | 联系电话颜色 |
|
||||||
|
| mobileLucency | Number | 0.2 | 联系电话透明度 |
|
||||||
|
| appName | String | 组件 | 软件名称 |
|
||||||
|
| appNameShow | Boolean | true | 是否显示软件名称 |
|
||||||
|
| appNameSize | Number | 10 | 软件名称字号 |
|
||||||
|
| appNameColor | String | #f15723 | 软件名称颜色 |
|
||||||
|
| appNameLucency| Number | 0.2 | 软件名称透明度 |
|
||||||
|
| rotate | Number | -45 | 旋转弧度 |
|
||||||
|
| position | String | fixed | 布局方式（绝对布局-相对布局） |
|
||||||
|
| scale | Number | 1 | 放大缩小 |
|
||||||
|
| column | Number | 15 | 水印列数 |
|
||||||
0
src/uni_modules/tts/index.vue
Normal file
0
src/uni_modules/tts/index.vue
Normal file
@@ -1,6 +1,6 @@
|
|||||||
const path = require("path");
|
const path = require("path");
|
||||||
function resolve(dir) {
|
function resolve(dir) {
|
||||||
return path.join(__dirname, dir); // __dirname是当前目录的绝对路径
|
return path.join(__dirname, dir);
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|||||||
Reference in New Issue
Block a user