第一次提交
This commit is contained in:
gxwebsoft
547
sub_pages/user/poster/poster.vue
Normal file
547
sub_pages/user/poster/poster.vue
Normal file
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop placeholder
|
||||
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
|
||||
<view class="bg-image"></view>
|
||||
<view class="content">
|
||||
<view style="display: flex;justify-content: center;position: relative;flex-direction: column;align-items: center;margin-top: 72rpx;height: 800rpx;" class="">
|
||||
<image style="width: 640rpx;position: absolute; top: 0;" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/yaoqinghaoyouzhuanjiangli.png" mode="widthFix"></image>
|
||||
<image class="head-box" src="https://oss.jimeigroup.cn/static/poster-head21.png" mode="widthFix"></image>
|
||||
<view class="poster-btn">
|
||||
<view class="poster-wrapper">
|
||||
<view class="poster-desc">
|
||||
<view class="poster-desc-title">
|
||||
邀请好友奖励如下
|
||||
</view>
|
||||
<view class="poster-list">
|
||||
<view class="item">邀请<text class="b">注册用户</text>：获得好友充值的奖励</view>
|
||||
<view class="item">邀请<text class="b">普通会员</text>：获得好友充值的奖励</view>
|
||||
<view class="item">邀请<text class="b">尊享用户</text>：获得好友充值的奖励</view>
|
||||
</view>
|
||||
</view>
|
||||
<image @click="$push('sub_pages/user/poster/poster2')" class="btn-share" src="https://oss.jimeigroup.cn/static/haibaofenxiang.png" mode="widthFix"></image>
|
||||
<!-- <u-button text="海报分享" color="#ffffff"
|
||||
:customStyle="{color: '#000000',fontWeight: '600', marginBottom: '70rpx'}" :disabled="disabled"
|
||||
shape="circle" @click="$push('sub_pages/user/poster/poster2')"></u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<image class="rank-top" src="https://oss.jimeigroup.cn/static/yaoqinghaoyouzhuanjiangli2.png" mode="widthFix"></image>
|
||||
<view class="ranking">
|
||||
<!-- <view class="title">—— 排行榜 ——</view> -->
|
||||
<view class="list">
|
||||
<u-list height="600rpx" @scrolltolower="scrolltolower">
|
||||
<u-list-item v-for="(item, index) in ranking" :key="index">
|
||||
<view style="display: flex;justify-content: space-between; margin-top: 10rpx; padding: 20rpx; height: 50rpx;align-items: center;" class="cell">
|
||||
<view style="display: flex;align-items: center; line-height: 50rpx;" class="">
|
||||
<view v-if="index >= 3" style="margin-right: 22rpx;width: 64rpx;display: flex;justify-content: center;" class="">{{index + 1}}</view>
|
||||
<image v-if="index < 3" style="width: 64rpx; height: 64rpx;margin-right: 22rpx; padding-top: 20rpx;" :src="item.icon" mode="widthFix"></image>
|
||||
<u-avatar shape="circle" size="30" :src="item.avatar"></u-avatar>
|
||||
<view style="color: rgb(255, 235, 211);font-size: 28rpx; margin-left: 10rpx;" class="">{{item.nickname}}</view>
|
||||
</view>
|
||||
<view style="color: rgb(255, 235, 211);font-size: 28rpx;" class="">
|
||||
共奖励<text style="color: rgb(242, 67, 116);">{{item.value}}</text>元
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="form" @click="onShowQrcode">
|
||||
<view class="btn">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<u-popup :show="showQrcode" mode="center" :round="10" @close="showQrcode = false">
|
||||
<view class="qrcode-box">
|
||||
<view class="poster">
|
||||
<image :src="posterUrl" mode="widthFix">
|
||||
|
||||
</view>
|
||||
<view class="gap">立即分享</view>
|
||||
<view class="share">
|
||||
<view class="btn">
|
||||
<!-- <image src="../../../static/icon/share01.png" mode="widthFix"></image> -->
|
||||
<u-button @click="onSahreQuan" text="朋友圈" icon="https://file.wsdns.cn/20230710/447306d3788a4fcdb6c5a9c7b8d9147d.png" :plain="true" size="normal" :customStyle="{border: 'none'}" :hairline="false" open-type="share"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button @click="onShareWeixin" text="微信好友" icon="https://file.wsdns.cn/20230710/ebb9586ef759415585db3bbc55574321.png" :plain="true" size="normal" :customStyle="{border: 'none'}" open-type="share"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button @click="onShareAlbum" text="保存相册" icon="https://file.wsdns.cn/20230710/da05c38686b349debde3063f4203e20a.png" :plain="true" size="normal" :customStyle="{border: 'none'}"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 海报绘制 -->
|
||||
<l-painter custom-style="position: fixed; left: 200%" isCanvasToTempFilePath @success="drawSuccess" css="height: 732rpx; width: 580rpx;" file-type="png">
|
||||
<template v-if="userInfo && QrcodeUrl" >
|
||||
<l-painter-view
|
||||
css="height: 732rpx; width: 580rpx;borderRadius: 20rpx; backgroundColor: #fff; position: relative;"
|
||||
>
|
||||
<!-- 小程序码 -->
|
||||
<l-painter-image
|
||||
src="https://oss.jimeigroup.cn/static/invite-head.png?x-oss-process=image/resize,w_1500/format,webp"
|
||||
css="width: 580rpx; height: 632rpx; borderRadius: 20rpx 20rpx 0 0;"
|
||||
/>
|
||||
<l-painter-view
|
||||
css=" position: absolute; bottom: 110rpx;left:20rpx;"
|
||||
>
|
||||
<l-painter-view>
|
||||
<l-painter-image
|
||||
:src="QrcodeUrl"
|
||||
css="width: 140rpx; height: 140rpx;"
|
||||
/>
|
||||
</l-painter-view>
|
||||
|
||||
<l-painter-view
|
||||
css="width: 280rpx; height: 80rpx; display: flex; align-items: center;"
|
||||
>
|
||||
<l-painter-image
|
||||
:src="userInfo.avatar"
|
||||
css="width: 40rpx; height: 40rpx; borderRadius:50%;margin-right: 20rpx;"
|
||||
/>
|
||||
<l-painter-view
|
||||
css="font-size: 26rpx; display: flex; flex-direction: column;"
|
||||
>
|
||||
<l-painter-text :text="userInfo.nickname" css="textAlign: left; color: #FFFFFF;"/>
|
||||
<!-- <l-painter-text :text="userInfo.mobile" css="textAlign: left; color: #999999;"/> -->
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
|
||||
|
||||
</l-painter-view>
|
||||
|
||||
<l-painter-view css="width: 100%;textAlign: center;height: 100rpx;line-height:100rpx;">
|
||||
<l-painter-text
|
||||
text="长按识别二维码"
|
||||
css="textAlign: center; color: #000000;"
|
||||
/>
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
|
||||
</template>
|
||||
</l-painter>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as WxLoginApi from '@/api/wx-login.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId,
|
||||
userInfo,
|
||||
form: {},
|
||||
showQrcode: false,
|
||||
QrcodeUrl: '',
|
||||
ranking: [{
|
||||
icon: 'https://oss.jimeigroup.cn/static/1.png',
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/204f1dd2920648b49703255daf51b494.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '茶色',
|
||||
value: '5142.00'
|
||||
},{
|
||||
icon: 'https://oss.jimeigroup.cn/static/2.png',
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/4fd091aca58f4dcface4e906e0a2d50f.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '李开心',
|
||||
value: '3006.12'
|
||||
},{
|
||||
icon: 'https://oss.jimeigroup.cn/static/3.png',
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/19898741661d443a9afb9fe83ab513cf.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: 'Kris',
|
||||
value: '1982.06'
|
||||
},{
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/302bf7b247344c8dbac162eca421cf20.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '薄荷',
|
||||
value: '1306.60'
|
||||
},{
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/7fb23c8cabfc4588b91ecbf1087ffe0e.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '米兰',
|
||||
value: '1013.96'
|
||||
}],
|
||||
posterUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getQrCode()
|
||||
},
|
||||
onShareTimeline(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: '高端婚恋交友平台',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '高端婚恋交友平台',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
|
||||
imageUrl: 'https://oss.jimeigroup.cn/static/mp-share.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawSuccess(e){
|
||||
this.posterUrl = e
|
||||
// uni.previewImage({
|
||||
// urls: [e]
|
||||
// })
|
||||
},
|
||||
onShowQrcode() {
|
||||
this.showQrcode = true
|
||||
this.getQrCode()
|
||||
},
|
||||
// 获取微信小程序码
|
||||
getQrCode() {
|
||||
const app = this
|
||||
|
||||
WxLoginApi.getWxQrCodeFile().then(res => {
|
||||
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
|
||||
// app.showQrcode = true
|
||||
storage.set('QrcodeUrl', res.message)
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onShareQuan(){
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneTimeline",
|
||||
type: 2,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
success: function (res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareWeixin(){
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
title: '爱尚客',
|
||||
miniProgram: {
|
||||
id: 'gh_39f1f8019c3f',
|
||||
path: 'pages/index/index',
|
||||
type: 0,
|
||||
webUrl: 'http://uniapp.dcloud.io'
|
||||
},
|
||||
success: function (res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareAlbum(){
|
||||
// uni.saveImageToPhotosAlbum({
|
||||
// filePath: res.tempFilePaths[0],
|
||||
// success: function () {
|
||||
// console.log('save success');
|
||||
// }
|
||||
// });
|
||||
uni.getSetting({ //获取用户的当前设置
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||||
this.saveImageToPhotosAlbum();
|
||||
} else {
|
||||
uni.authorize({ //如果没有授权，向用户发起请求
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
this.saveImageToPhotosAlbum();
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: "请打开保存相册权限，再点击保存相册分享",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||||
success: (res2) => {
|
||||
// console.log(res2.authSetting)
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImageToPhotosAlbum() {
|
||||
|
||||
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功，请从相册选择再分享',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-image{
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
background-image: url('https://oss.jimeigroup.cn/static/poster-bg21.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content{
|
||||
z-index: 90;
|
||||
}
|
||||
.head-box{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 750rpx;
|
||||
top: -130rpx;
|
||||
}
|
||||
.rank-top{
|
||||
width: 634rpx;
|
||||
margin: 30rpx 58rpx;
|
||||
}
|
||||
.container {
|
||||
|
||||
|
||||
.poster-title {
|
||||
width: 750rpx;
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
font-family: FZZongYi;
|
||||
font-weight: 400;
|
||||
font-size: 70rpx;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
line-height: 70rpx;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.poster-btn {
|
||||
width: 600rpx;
|
||||
margin: 20rpx auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
|
||||
.poster-wrapper {
|
||||
color: #333333;
|
||||
width: 450rpx;
|
||||
height: 520rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.poster-desc {
|
||||
|
||||
|
||||
.poster-desc-title {
|
||||
padding-top: 60rpx;
|
||||
padding-bottom: 30rpx;
|
||||
font-size: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.poster-list {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
.b{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-share{
|
||||
width: 200rpx;
|
||||
margin: 95rpx auto 0;
|
||||
}
|
||||
|
||||
// width: 600rpx;
|
||||
// margin: auto;
|
||||
// background: url('https://file.wsdns.cn/20230710/b68c9d11ad744dc880217ee82af24f07.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100%;
|
||||
}
|
||||
|
||||
.ranking {
|
||||
margin: 0 auto;
|
||||
width: 634rpx;
|
||||
height: 500rpx;
|
||||
background: rgba(15, 0, 32, 0.5);
|
||||
border: 1px solid rgb(151, 99, 157);
|
||||
color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 34rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 350rpx;
|
||||
width: 750rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.qrcode-box {
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 660rpx;
|
||||
height: 1000rpx;
|
||||
|
||||
.poster {
|
||||
width: 580rpx;
|
||||
height: 733rpx;
|
||||
margin: 40rpx auto;
|
||||
box-shadow: 0px 0px 10px #cccccc;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 580rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.user {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 200rpx;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 26rpx;
|
||||
|
||||
.phone {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-img {
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.long-press {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.gap {
|
||||
font-size: 28rpx;
|
||||
margin: auto;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.share {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user