wangxiaowei/wanjiashangchao-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化万家商超用户端仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-04-30 14:04:34 +08:00
commit 022c640d89
425 changed files with 160005 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

439
pages/my/invite-code/index.vue Normal file
View File

@ -0,0 +1,439 @@
<template>
<view class="container-wrap">
<view class="flex justify-start align-center text-333" style="width: 100%;"
:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
<view class="header-title">
<view class="cuIcon-back header-left" @click="handleJump" data-type="BACK"></view>
<view class="header-center text-333">海报</view>
</view>
</view>
<image class="canvas-img" :src="canvasImg" mode="widthFix"></image>
<!-- <view class="content-wrap flex flex-direction align-center justify-center">
<image class="logo" src="/static/logo.png" mode="widthFix"></image>
<image class="avatar" :src="userInfo.head_img" mode="widthFix"></image>
<view class="name text-lg text-333 margin-top-sm">{{userInfo.user_nickname}}</view>
<view class="code text-df text-333 margin-top-sm">{{ i18n['邀请码'] }}：{{userInfo.invite_code}}</view>
<image class="code-img" :src="userInfo.qrcode" mode="widthFix"></image>
<view class="desc text-df text-333 margin-top-sm">{{ i18n['扫码下载，即享新世界'] }}</view>
<view class="app-name text-sm text-999 margin-top-sm">{{ i18n['来啰外卖'] }}</view>
</view> -->
<view class="share-wrap flex align-center justify-center">
<!-- #ifndef MP-WEIXIN -->
<!-- <view @click="share(1)" class="item flex-sub flex flex-direction justify-center align-center ">
<image src="../static/1.png" mode="widthFix"></image>
<text class="text-sm text-333">{{ i18n['微信'] }}</text>
</view>
<view @click="share(2)" class="item flex-sub flex flex-direction justify-center align-center">
<image src="../static/2.png" mode="widthFix"></image>
<text class="text-sm text-333">{{ i18n['朋友圈'] }}</text>
</view> -->
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- <button open-type="share" class="item flex-sub flex flex-direction justify-center align-center ">
<image src="../static/1.png" mode="widthFix"></image>
<text class="text-sm text-333">{{ i18n['微信'] }}</text>
</button> -->
<!-- #endif -->
<view @click="savaImg" class="item flex-sub flex flex-direction justify-center align-center">
<image src="../static/3.png" mode="widthFix"></image>
<text class="text-sm text-333">保存图片</text>
</view>
</view>
<canvas
style="width: 504px; height: 700px; background-color: #fff; position: fixed; top: -10000px; left: -10000px;"
canvas-id="canvas" id="canvas"></canvas>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: null,
canvasImg: null
};
},
/**
* @param {Object} options 入参
*/
onLoad(options) {
this.getMyInviteData();
},
methods: {
async getPictureInformation(url) {
// let downLoadImgInfo = await uni.downloadFile({
// url: url
// });
// console.log(downLoadImgInfo[1].tempFilePath);
let imgInfo = await uni.getImageInfo({
src: url
})
console.log(imgInfo[1]);
return imgInfo[1]
},
async createPoster1() {
const that = this;
let logo = '/static/logo.png'
var context = uni.createCanvasContext('canvas', this)
context.setFillStyle('white')
context.fillRect(0, 0, 504, 818)
// 绘制圆角矩形
context.save();
context.beginPath();
context.arc(66, 66, 34, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
context.closePath();
context.clip();
// 绘制图片
context.drawImage(logo, 32, 32, 68, 68);
context.restore(); // 恢复之前保存的绘图上下文状态
// 绘制圆角矩形
context.save();
context.beginPath();
context.arc(252, 130, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
// 　　　　 context.setStrokeStyle('#333333')
// 　　　　 context.stroke()
context.closePath();
context.clip();
console.log(369);
let imageResult = await this.getPictureInformation(this.userInfo.avatar)
console.log(369);
// uni.getImageInfo({
// src: this.storeLogo,
// success: function (image) {
// console.log(image);
// }
// });
console.log(imageResult.path);
context.drawImage(imageResult.path, 204, 82, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
console.log(368);
// context.drawImage(this.userInfo.head_img, 204, 82, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
context.restore(); // 恢复之前保存的绘图上下文状态
context.setFillStyle('#333') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 32px 微软雅黑'; // 字体样式
context.fillText(this.userInfo.nickname, 252, 225)
context.setFillStyle('#333') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 28px 微软雅黑'; // 字体样式
context.fillText('邀请码' + ':' + this.userInfo.invite_code, 252, 286)
console.log(369);
let imageResult1 = await this.getPictureInformation(this.userInfo.invite_url)
console.log(123);
// uni.getImageInfo({
// src: this.storeLogo,
// success: function (image) {
// console.log(image);
// }
// });
context.drawImage(imageResult1.path, 92, 330, 320,
320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
// #ifndef MP-WEIXIN
// context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
// #endif
context.setFillStyle('#333') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 28px 微软雅黑'; // 字体样式
context.fillText('扫码下载，即享新世界', 252, 703)
context.setFillStyle('#999') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 24px 微软雅黑'; // 字体样式
context.fillText('萬家商超', 252, 760)
context.draw()
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: res => {
console.log(res.tempFilePath);
that.canvasImg = res.tempFilePath
},
fail: err => {
console.log(err);
}
});
}, 300);
},
async createPoster() {
const that = this;
let logo = '/static/logo.png'
var context = uni.createCanvasContext('canvas', this)
let imageResult11 = await this.getPictureInformation(
'https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/invite_bg.png')
context.drawImage(imageResult11.path, 0, 0, 504, 700); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
let imageResult111 = await this.getPictureInformation(
'https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/153.png')
context.drawImage(imageResult111.path, 32, 32, 440,
500); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
// 绘制圆角矩形
// context.save();
// context.beginPath();
// context.arc(252, 90, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
// context.closePath();
// context.clip();
// let imageResult = await this.getPictureInformation(this.userInfo.avatar)
// console.log(imageResult.path);
// context.drawImage(imageResult.path, 204, 42, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
// context.restore(); // 恢复之前保存的绘图上下文状态
context.setFillStyle('#fff') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 28px 微软雅黑'; // 字体样式
// context.fillText('邀请人' + ':' + this.userInfo.nickname, 252, 405)
context.fillText(this.userInfo.nickname, 252, 445)
context.setFillStyle('#333') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 28px 微软雅黑'; // 字体样式
context.fillText('邀请码' + ':' + this.userInfo.invite_code, 252, 344)
let imageResult1 = await this.getPictureInformation(this.userInfo.invite_url)
context.drawImage(imageResult1.path, 132, 64, 240,
240); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
// #ifndef MP-WEIXIN
// context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
// #endif
context.setFillStyle('#fff') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 28px 微软雅黑'; // 字体样式
context.fillText('扫码下载，即享新世界', 252, 583)
context.setFillStyle('#fff') //文字颜色：默认黑色
context.textAlign = 'center'
context.textBaseline = "middle";
context.font = 'normal 24px 微软雅黑'; // 字体样式
context.fillText('萬家商超', 252, 640)
context.draw()
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: res => {
console.log(res.tempFilePath);
that.canvasImg = res.tempFilePath
},
fail: err => {
console.log(err);
}
});
}, 300);
},
getMyInviteData() {
console.log(123)
this.$api.post(global.apiUrls.post5c78c4772da97).then(res => {
console.log(123)
console.log('res=', res.data.data)
if (res.data.code == 1) {
this.userInfo = res.data.data
this.createPoster()
}
})
},
savaImg() {
let that = this;
let url = this.userInfo.invite_url;
console.log('长按了', url);
uni.saveImageToPhotosAlbum({
filePath: this.canvasImg,
success: res => {
console.log(res);
this.$message.info('已保存到相册')
},
fail: err => {
console.log(err);
}
});
// uni.getImageInfo({
// src: url,
// success: function(image) {
// console.log('图片信息：', JSON.stringify(image));
// uni.saveImageToPhotosAlbum({
// filePath: image.path,
// success: function() {
// console.log('save success');
// that.$message.info(that.i18n['已保存到相册'])
// }
// });
// }
// });
},
share(type) {
if (type == 1) {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: this.canvasImg,
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
} else {
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 2,
imageUrl: this.canvasImg,
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
},
}
};
</script>
<style lang="scss">
.container-wrap {
width: 100%;
min-height: 100vh;
background-image: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/code_bg.png);
// background-color: #fff;
background-size: 100% 100%;
overflow: hidden;
}
.content-wrap {
margin: 40rpx auto;
width: 504rpx;
height: 818rpx;
background-color: #fff;
border-radius: 24rpx;
position: relative;
.logo {
position: absolute;
left: 32rpx;
top: 32rpx;
border-radius: 16rpx;
width: 68rpx;
height: 68rpx;
z-index: 100;
}
.avatar {
margin-top: 76rpx;
width: 96rpx;
height: 96rpx;
border-radius: 48rpx;
}
.code-img {
margin-top: 24rpx;
width: 300rpx;
height: 300rpx;
}
}
//头部 start
.header-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
.header-left {
font-size: 42rpx;
}
.header-center {
text-align: center;
font-size: 36rpx;
font-family: 'msgothic' !important;
font-weight: 500;
letter-spacing: 1rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
// view {
// width: 33.3%;
// }
}
.header-right {
font-size: 28rpx;
font-family: 'msgothic' !important;
color: #ffffff;
letter-spacing: 1rpx;
text-align: right;
&.mp-wx {
position: absolute;
right: 32rpx;
top: 10rpx;
}
}
// .canvas-img {
// margin: 120rpx auto;
// display: block;
// width: 580rpx;
// height: 920rpx;
// }
.share-wrap {
position: fixed;
bottom: 0;
// margin-bottom: 60rpx;
height: 260rpx;
width: 100%;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
}
.share-wrap image {
margin-bottom: 16rpx;
width: 80rpx;
height: 80rpx;
}
.canvas-img {
margin: 100rpx auto;
display: block;
width: 504rpx;
height: 818rpx;
}
button::after {
border: none;
}
button {
background-color: #fff;
}
button:hover {
background-color: #fff;
}
</style>