mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-17 07:55:53 +08:00
feat: 更新售后细节和用户工具页面 (master)
- 修改afterSalesDetailExpress.vue中gotoGoodsDetail函数参数 - 调整快递公司、快递单号和发货时间选择器样式 - 在tool.vue中添加邀请用户功能和分享弹窗 - 在request.js中增加请求头带上邀请人信息 - 移除tpl_goods.vue中的调试日志 - App.vue增加启动时设置邀请人逻辑 - storage.js新增邀请人信息的存取方法
This commit is contained in:
Chopper711
1439
components/Sansnn-uQRCode/uqrcode.js
Normal file
1439
components/Sansnn-uQRCode/uqrcode.js
Normal file
File diff suppressed because it is too large
Load Diff
225
components/m-placard/index.vue
Normal file
225
components/m-placard/index.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
<view v-model="show" class="slot-content">
|
||||
<image @click="downLoad()" class="img" :src="imgUrl" />
|
||||
<div class="canvas-hide">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<canvas id="canvas" type="2d" style="width: 560px; height: 800px" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<canvas canvas-id="canvas" id="canvas" style="width: 560px; height: 800px" />
|
||||
<!-- #endif -->
|
||||
</div>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入绘制插件
|
||||
import DrawPoster from "@/js_sdk/u-draw-poster";
|
||||
// 生成二维码
|
||||
import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js';
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
imgUrl: "", //绘制出来的图片路径
|
||||
show: false, //是否展示模态框
|
||||
dp: {}, //绘制的dp对象，用于存储绘制等一些方法。
|
||||
logo: require("@/pages/passport/static/logo-title.png"), // 本地logo地址
|
||||
myFace: require("@/pages/passport/static/missing-face.png"), // 本地默认头像
|
||||
sharingLink: '', // 二维码链接
|
||||
}),
|
||||
props: {
|
||||
/**
|
||||
* 父级传参的数据
|
||||
*/
|
||||
res: {
|
||||
type: null,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
onUnload() {},
|
||||
onReady() {},
|
||||
methods: {
|
||||
/** 解决微信小程序中图片模糊问题 */
|
||||
// #ifdef MP-WEIXIN
|
||||
st2: (size) => size * 2,
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
st2: (size) => size,
|
||||
// #endif
|
||||
|
||||
/** 保存图片 */
|
||||
downLoad() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: this.imgUrl,
|
||||
success: function () {
|
||||
uni.showToast({title: "保存成功！",icon: "none",});
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({title: "保存失败，请稍后重试！",icon: "none",});
|
||||
},
|
||||
});
|
||||
},
|
||||
/** 创建canvas */
|
||||
async init() {
|
||||
this.show = true;
|
||||
this.dp = await DrawPoster.build({
|
||||
selector: "canvas",
|
||||
componentThis: this,
|
||||
loading: true,
|
||||
debugging: true,
|
||||
});
|
||||
let dp = this.dp;
|
||||
// #ifdef MP-WEIXIN
|
||||
// 用于微信小程序中画布错乱问题
|
||||
dp.canvas.width = this.st2(560);
|
||||
dp.canvas.height = this.st2(800);
|
||||
// #endif
|
||||
this.showQRCode(dp);
|
||||
},
|
||||
/** 生成二维码 */
|
||||
async showQRCode(dp){
|
||||
await uQRCode.make({
|
||||
canvasId: 'canvas', // canvas画布
|
||||
componentInstance: this,
|
||||
text: this.res.bottom.code, // 二维码内容
|
||||
size: 130, // 二维码大小
|
||||
margin: 5, // 二维码内边距
|
||||
backgroundColor: '#ffffff', // ！ 二维码背景颜色
|
||||
foregroundColor: '#000000', // ！二维码色块颜色
|
||||
fileType: 'jpg',
|
||||
errorCorrectLevel: 0, // <== 关键 容错率，M:0,L:1,H:2,Q:3,
|
||||
// errorCorrectLevel: uQRCode.errorCorrectLevel.M, // <== 关键 容错率，M:0,L:1,H:2,Q:3,
|
||||
success: res => {
|
||||
this.sharingLink = res; // res => 图片路径
|
||||
// 对画布进行绘制
|
||||
this.draw(dp);
|
||||
},
|
||||
fail: res => {
|
||||
// console.log('失败',res)
|
||||
}
|
||||
})
|
||||
},
|
||||
async draw(dp) {
|
||||
const { face, nickName, desc } = this.res.memberInfo;
|
||||
const { width, height, background, title } = this.res.container;
|
||||
const { code, img, price } = this.res.bottom;
|
||||
|
||||
/** 绘制背景 */
|
||||
await dp.draw((ctx) => {
|
||||
ctx.fillStyle = background;
|
||||
ctx.fillRoundRect( this.st2(0), this.st2(0), this.st2(width), this.st2(height), this.st2(12));
|
||||
ctx.clip();
|
||||
});
|
||||
/** 绘制圆角矩形 */
|
||||
await dp.draw(async (ctx)=>{
|
||||
// 设置矩形色彩
|
||||
ctx.fillStyle = "#ffffff";
|
||||
// 设置图形轮廓的颜色。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
|
||||
ctx.strokeStyle = "#ffffff";
|
||||
// 这个属性设置当前绘线的粗细。属性值必须为正数。描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。默认值是1.0。
|
||||
ctx.lineWidth = this.st2(1);
|
||||
// 进行绘制
|
||||
ctx.fillRoundRect(30, 150, 500, 620, 0);
|
||||
// ctx.strokeRoundRect(30, 150, 500, 620, 0);
|
||||
// ctx.strokeRect(30, 150, 500, 620, 0);
|
||||
})
|
||||
/** 绘制图片 */
|
||||
dp.draw(async (ctx) => {
|
||||
await Promise.all([
|
||||
// 绘制头像face
|
||||
ctx.drawImage(face?face:this.myFace, this.st2(30), this.st2(30), this.st2(90), this.st2(90)),
|
||||
// 绘制Logo
|
||||
// ctx.drawImage( this.logo, this.st2(175), this.st2(0), this.st2(256), this.st2(144)),
|
||||
// 中间图片
|
||||
ctx.drawImage(img, this.st2(60), this.st2(170), this.st2(440), this.st2(440)),
|
||||
// 二维码
|
||||
ctx.drawImage(this.sharingLink, this.st2(375), this.st2(625), this.st2(130), this.st2(130))
|
||||
]);
|
||||
});
|
||||
/** 绘制顶部文字（昵称 简述） */
|
||||
await dp.draw((ctx) => {
|
||||
ctx.fillStyle = "#666";
|
||||
ctx.font = `${this.st2(24)}px PingFang SC`;
|
||||
ctx.fillText(nickName, this.st2(150), this.st2(65));
|
||||
ctx.fillStyle = "#666";
|
||||
ctx.font = `${this.st2(24)}px PingFang SC`;
|
||||
ctx.fillText(desc, this.st2(150), this.st2(105));
|
||||
});
|
||||
/** 绘制中间文字（商品名称 价格） */
|
||||
await dp.draw((ctx) => {
|
||||
ctx.fillStyle = "#333";
|
||||
ctx.font = `bold ${this.st2(24)}px PingFang SC`;
|
||||
ctx.textAlign = "left";
|
||||
ctx.fillWarpText({
|
||||
text: title,
|
||||
lineHeight: this.st2(32),
|
||||
maxWidth: this.st2(280),
|
||||
x: this.st2(60),
|
||||
y: this.st2(710),
|
||||
layer: 2,
|
||||
});
|
||||
ctx.fillStyle = "#ff3c2a";
|
||||
ctx.font = `${this.st2(38)}px PingFang SC`;
|
||||
ctx.textAlign = "left";
|
||||
ctx.fillText(price, this.st2(60), this.st2(665));
|
||||
});
|
||||
/** 绘制底部文字 */
|
||||
// await dp.draw((ctx) => {
|
||||
// ctx.fillStyle = "#666";
|
||||
// ctx.font = `${this.st2(24)}px PingFang SC`;
|
||||
// ctx.fillText("长按图片，识别二维码", this.st2(200), this.st2(866));
|
||||
// ctx.fillStyle = "#666";
|
||||
// ctx.font = `${this.st2(24)}px PingFang SC`;
|
||||
// ctx.fillText("查看商品详情", this.st2(200), this.st2(900));
|
||||
// });
|
||||
|
||||
// 绘制生成本地地址
|
||||
this.imgUrl = await dp.createImagePath();
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.index {
|
||||
height: 100%;
|
||||
}
|
||||
.canvas-hide {
|
||||
/* 1 */
|
||||
position: fixed;
|
||||
right: 100vw;
|
||||
bottom: 100vh;
|
||||
/* 2 */
|
||||
z-index: -9999;
|
||||
/* 3 */
|
||||
opacity: 0;
|
||||
}
|
||||
.index {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: rgba($color: grey, $alpha: 0.2);
|
||||
}
|
||||
|
||||
image {
|
||||
display: block;
|
||||
}
|
||||
.img {
|
||||
width: 560rpx;
|
||||
height: 800rpx;
|
||||
}
|
||||
|
||||
.qrcode-content {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user