develop
xiaozhiyong 10 months ago
parent 6be758eba0
commit 17677a8517
  1. 34
      src/api/common.js
  2. 10
      src/api/site/aptitude.js
  3. 6
      src/pages.json
  4. 2
      src/subPackages/login/login/index.vue
  5. 3
      src/subPackages/order/details/index.vue
  6. 90
      src/subPackages/site/aptitude/index.vue
  7. 60
      src/subPackages/site/details/components/info.vue
  8. 7
      src/subPackages/site/details/index.vue
  9. 13
      src/uni_modules/h-watermark/changelog.md
  10. 363
      src/uni_modules/h-watermark/components/h-watermark/h-watermark.vue
  11. 85
      src/uni_modules/h-watermark/package.json
  12. 102
      src/uni_modules/h-watermark/readme.md
  13. 0
      src/uni_modules/tts/index.vue
  14. 2
      vue.config.js

@ -1,33 +1,3 @@
import request from 'utils/request';
import request from "utils/request";
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,
});
},
};
export default {};

@ -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",
"pages": [{ "path": "details/index" }, { "path": "search/index" }]
"pages": [
{ "path": "details/index" },
{ "path": "search/index" },
{ "path": "aptitude/index" }
]
},
{
"root": "subPackages/order",

@ -389,7 +389,7 @@ export default {
.agreement {
position: fixed;
left: 0;
bottom: env(safe-area-inset-bottom);
bottom: calc(env(safe-area-inset-bottom) + 60rpx);
width: 100%;
font-size: 22rpx;
color: #b6b6b6;

@ -1,7 +1,7 @@
<template>
<view class="container">
<navbar>
<view slot="center">订单详情</view>
<view slot="center" style="font-size: 28rpx">订单详情</view>
</navbar>
<view class="status">
<view>
@ -113,7 +113,6 @@ export default {
},
filters: {
preferential(discountAmount, platformCommission) {
if (!discountAmount || !platformCommission) return "0.00";
return (
(discountAmount * 10000 + platformCommission * 10000) /
10000

@ -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" />
</view>
<view class="block">
<view class="block first">
<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>
</template>
<script>
export default {
props: {
discountInfo: Object,
siteId: String,
},
methods: {
jumpAptitude() {
uni.navigateTo({
url: `/subPackages/site/aptitude/index?siteId=${this.siteId}`,
});
},
close() {
this.$emit("close");
},
@ -46,16 +57,43 @@ export default {
padding: 30rpx;
background: #fff;
border-radius: 15rpx;
> view {
&:nth-of-type(1) {
font-size: 33rpx;
font-weight: 550;
color: #333;
&.first {
> view {
&:nth-of-type(1) {
font-size: 33rpx;
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;
font-size: 24rpx;
line-height: 38rpx;
}
&.second {
display: flex;
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"
@touchmove.stop.prevent
>
<info @close="$refs.popupInfo.close()" />
<info
:siteId="siteInfo.siteId || siteInfo.id"
@close="$refs.popupInfo.close()"
/>
</uni-popup>
<uni-popup
@ -501,7 +504,7 @@ export default {
display: inline-block;
padding: 3rpx 10rpx;
font-size: 18rpx;
color: #33333390;
color: #333;
border: 1rpx solid #999;
border-radius: 6rpx;
}

@ -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>

@ -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"
}
}
}
}
}

@ -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 | 水印列数 |

@ -1,6 +1,6 @@
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir); // __dirname是当前目录的绝对路径
return path.join(__dirname, dir);
}
module.exports = {

Loading…
Cancel
Save