czg_team
/
video_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改分享好友页面，增加海报保存按钮

This commit is contained in:
YeMingfei666 2024-12-11 14:02:04 +08:00
parent 4964043cda
commit 9f6eb2eb09
6 changed files with 221 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
me/components/wm-poster/wm-posterorders.vue
View File

@ -1,18 +1,25 @@
<template> <template>
<view style="background: #FFFFFF;"> <view>
<canvas v-if="!tempFilePath" :canvas-id="CanvasID" <view class="u-flex " >
:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas> <canvas v-if="!tempFilePath" :canvas-id="CanvasID"
<!-- #ifdef MP-WEIXIN --> :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response" <!-- #ifdef MP-WEIXIN -->
@longpress="saveqrcode"></image> <image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
<!-- <button v-if="openSettingBtnHidden" class="purple_btn btn_box" hover-class="none" open-type="openSetting" @longpress="saveqrcode"></image>
@opensetting='handleSetting'>请开启保存权限</button> --> <!-- <button v-if="openSettingBtnHidden" class="purple_btn btn_box" hover-class="none" open-type="openSetting"
<!-- #endif --> @opensetting='handleSetting'>请开启保存权限</button> -->
<!-- #ifndef MP-WEIXIN --> <!-- #endif -->
<image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response" <!-- #ifndef MP-WEIXIN -->
@longpress="toSave(tempFilePath)"></image> <image v-else lazy-load :src="tempFilePath" mode="widthFix" style="width: 100%;" class="is-response"
<!-- #endif --> @longpress="toSave(tempFilePath)"></image>
<!-- #endif -->
</view>
<view class="u-flex u-m-t-20" >
<button class="purple_btn btn_box" hover-class="none" open-type="openSetting"
@click.stop="toSave(tempFilePath)">保存海报</button>
</view>
</view> </view>
</template> </template>
<script> <script>
@ -240,7 +247,8 @@
//添加二维码 //添加二维码
_strHeight += uni.upx2px(20); _strHeight += uni.upx2px(20);
let toTop = uni.upx2px(103); let toTop = uni.upx2px(103);
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P - uni.upx2px(201), _this.canvasH - q[1] - toTop, 71, 71); _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P - uni.upx2px(201), _this.canvasH - q[1] - toTop,
71, 71);
//添加二维码 end //添加二维码 end
//添加推荐人与描述 //添加推荐人与描述
@ -313,4 +321,13 @@
}; };
</script> </script>
<style></style> <style scoped lang="scss">
.btn_box {
background: rgb(221, 220, 255);
border-radius: 8rpx;
color: rgb(69, 68, 255);
font-size: 28rpx;
font-weight: 700;
padding: 10rpx 32rpx;
}
</style>

6
me/detail/detailIOS.nvue
View File

@ -5,7 +5,7 @@
<swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId"> <swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId">
<view class="swipers-items" v-if="current == index"> <view class="swipers-items" v-if="current == index">
<!-- 视频 --> <!-- 视频 -->
<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" object-fit="cover" <video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" object-fit="contain"
v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true" v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true"
codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended" codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
@timeupdate="timeupdate" @timeupdate="timeupdate"
@ -17,7 +17,7 @@
mode="aspectFill"> mode="aspectFill">
</image> </image>
<!-- 返回图标 --> <!-- 返回图标 -->
<image src="../static/nvueIcon/backs.png" @click="goBack()" class="swipers-items-back" mode=""> <image v-if="showBack" src="../static/nvueIcon/backs.png" @click="goBack()" class="swipers-items-back" mode="">
</image> </image>
<!-- 右边操作 --> <!-- 右边操作 -->
<view class="swipers-items-right" :style="rightTop" v-if="showControls"> <view class="swipers-items-right" :style="rightTop" v-if="showControls">
@ -303,6 +303,7 @@
export default { export default {
data() { data() {
return { return {
showBack:false,
nowBs: 1, //当前倍速 nowBs: 1, //当前倍速
subList: [{ subList: [{
name: '0.5x', name: '0.5x',
@ -850,6 +851,7 @@
//显示/隐藏适配控制器的回调 //显示/隐藏适配控制器的回调
controlstoggles(e) { controlstoggles(e) {
this.showControls = e.detail.show this.showControls = e.detail.show
this.showBack=!this.showBack
console.log(e.detail.show, '显示/隐藏控制栏') console.log(e.detail.show, '显示/隐藏控制栏')
}, },
//打开倍速弹框 //打开倍速弹框

255
me/invite/index.vue
View File

@ -1,73 +1,100 @@
<!-- 我的邀请 --> <!-- 我的邀请 -->
<template> <template>
<view> <view class="min-page">
<u-image src="/me/static/invite/juxing.png" alt="" width="100%" mode="widthFix"></u-image> <u-navbar title="分享好友" back-icon-color="#fff" :background="background" immersive :border-bottom="false"
<view class="padding" style="position: relative;height: 360rpx;"> title-color="#fff"></u-navbar>
<u-image src="@/me/static/invite/fenxiang.png" alt="" width="100%" height="100%"></u-image> <view class="u-relative">
<view class="text-center padding-top yaoqing"> <u-image src="/me/static/invite/top-bg.png" alt="" width="100%" mode="widthFix"></u-image>
<view class="margin-top-xl margin-bottom-sm padding-top-sm text-xxl text-red text-bold"> <view class="u-absolute top-title">
<u-image src="/me/static/invite/title.png" alt="" width="544rpx" mode="widthFix"></u-image>
</view>
</view>
<view class=" invite-box u-relative">
<view class="top">
<u-image src="/me/static/invite/bg1.png" alt="" width="422rpx" height="76rpx"></u-image>
<view class="u-absolute font-bold">
<text>邀请详情</text>
</view>
</view>
<view class="u-font-32 font-bold u-text-center color-000" style="padding-top: 84rpx;">
您的邀请码
</view>
<view class="text-center ">
<view class=" u-m-t-32 text-xxl text-red text-bold u-m-b-32">
{{invitationCode}} {{invitationCode}}
</view> </view>
<!-- #ifdef H5 --> <view class="u-flex u-row-between" style="padding: 0 88rpx;">
<u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini" <!-- #ifdef H5 -->
:ripple="true">一键分享</u-button> <u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false"
<!-- #endif --> :ripple="true">一键分享</u-button>
<!-- #endif -->
<!-- #ifdef APP --> <!-- #ifdef APP -->
<u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini" <u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false"
:ripple="true">一键分享</u-button> :ripple="true">一键分享</u-button>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-TOUTIAO || MP-KUAISHOU --> <!-- #ifdef MP-TOUTIAO || MP-KUAISHOU -->
<u-button open-type="share" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini" <u-button open-type="share" :custom-style="customStyle" :hair-line="false"
:ripple="true">一键分享</u-button> :ripple="true">一键分享</u-button>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<u-button open-type="share" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini" <u-button open-type="share" :custom-style="customStyle" :hair-line="false"
:ripple="true">一键分享</u-button> :ripple="true">一键分享</u-button>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP-KUAISHOU --> <!-- #ifndef MP-KUAISHOU -->
<u-button style="margin-left: 50rpx;" @click.stop="onSaveImg()" :custom-style="customStyle" <u-button style="margin-left: 50rpx;" @click.stop="onSaveImg()" :custom-style="customStyle"
:hair-line="false" shape="circle" size="mini" :ripple="true">保存海报</u-button> :hair-line="false" :ripple="true">保存海报</u-button>
<!-- #endif --> <!-- #endif -->
</view>
</view> </view>
</view> <view class="gap u-m-t-32"></view>
<view class="margin padding bg-white radius" v-if="inviterList.length"> <view class="u-m-t-32">
<view class="flex justify-between" style="line-height: 80rpx;" v-for="(item, index) in inviterList" <view class="font-bold color-000 u-font-32 u-text-center">我的邀请战绩</view>
:key='index'> <view class="flex justify-around u-m-t-32 u-text-center font-bold" style="line-height: 46rpx;">
<view class="flex"> <view>
<!-- <u-image :src="item.avatar == null?avatar:item.avatar" width="40px" mode="widthFix"></u-image> --> <view class="">已邀请</view>
<image src="../static/invite/5.png" style="width: 80rpx;" mode="widthFix"></image> <view class="text-red u-m-t-16 "><text class=" u-font-40">{{inviterNumber}}</text>人</view>
<text class="margin-left-sm">{{item.userName}}</text> </view>
</view> <view>
<view style="width: 160rpx;"> <view class="">累计收益</view>
<text>获得</text> <view class="text-red u-m-t-16 "><text class=" u-font-40">{{cumulativeRevenue}}</text>元</view>
<text class="margin-left-xs text-red">{{item.money}}</text> </view>
<!-- <view>
<view class="">已签到</view>
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{withdrawn}}</text>人</view>
</view> -->
<view>
<view class="">已提现</view>
<view class="text-red u-m-t-16 "><text class="u-font-40">{{withdrawn}}</text>元</view>
</view>
</view> </view>
<view class="u-m-t-16 color-999 u-text-center u-p-b-32">好友签到成功可额外获得1元现金红包</view>
</view> </view>
</view> </view>
<view class="padding" style="position: relative;height: 160px;"> <view class="margin u-m-t-40 padding bg-white radius-16" >
<u-image src="@/me/static/invite/yaoqing.png" alt="" width="100%" height="100%"></u-image> <view class="u-font-32 color-333 font-bold u-text-center">已邀请列表</view>
<view class="text-center padding-top flex justify-center flex-direction zhanji"> <view v-if="inviterList.length" class="u-m-t-20">
<view class="flex justify-around margin-top-sm"> <view class="flex justify-between" style="line-height: 80rpx;" v-for="(item, index) in inviterList"
<view> :key='index'>
<view class="margin-bottom-sm">已邀请</view> <view class="flex">
<view class="text-red"><text class="text-bold u-font-18">{{inviterNumber}}</text>人</view> <!-- <u-image :src="item.avatar == null?avatar:item.avatar" width="40px" mode="widthFix"></u-image> -->
<image src="../static/invite/5.png" style="width: 80rpx;" mode="widthFix"></image>
<text class="margin-left-sm">{{item.userName}}</text>
</view> </view>
<view> <view style="width: 160rpx;">
<view class="margin-bottom-sm">累计收益</view> <text>获得</text>
<view class="text-red"><text class="text-bold u-font-18">{{cumulativeRevenue}}</text>元</view> <text class="margin-left-xs text-red">{{item.money}}</text>
</view>
<view>
<view class="margin-bottom-sm">已提现</view>
<view class="text-red">¥<text class="text-bold u-font-18">{{withdrawn}}</text></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="padding" style="position: relative;height: 250rpx;">
<!-- <view class="padding" style="position: relative;height: 250rpx;">
<u-image src="@/me/static/invite/jiqiao.png" alt="" width="100%" height="100%"></u-image> <u-image src="@/me/static/invite/jiqiao.png" alt="" width="100%" height="100%"></u-image>
<view class="padding-top jiqiao" style=""> <view class="padding-top jiqiao" style="">
<view class="padding-top-xl padding-lr padding-bottom" style="line-height: 48rpx;"> <view class="padding-top-xl padding-lr padding-bottom" style="line-height: 48rpx;">
@ -90,7 +117,7 @@
</view> </view>
</view> </view>
</view> </view> -->
<tki-qrcode ref="qrcode" :val="erweima" :size="200" background="#fff" foreground="#000" pdground="#000" <tki-qrcode ref="qrcode" :val="erweima" :size="200" background="#fff" foreground="#000" pdground="#000"
@ -126,13 +153,16 @@
modalName: '', modalName: '',
canvasId: 'default_PosterCanvasId', canvasId: 'default_PosterCanvasId',
avatar: '../../static/images/logo.png', avatar: '../../static/images/logo.png',
background: {
'background-color': 'transparent'
},
customStyle: { customStyle: {
background: '#FFE0E0', background: '#DDDCFF',
border: '0', border: '8rpx',
color: 'rgb(254,30,35)', color: '#4544FF',
fontSize: '12px', fontSize: '28rpx',
fontWeight: '500', fontWeight: '700',
padding: '15px 20px', padding: '10rpx 32rpx',
}, },
page: 1, page: 1,
limit: 10, limit: 10,
@ -677,7 +707,85 @@
} }
</script> </script>
<style> <style lang="scss" scoped>
$color1: #5857FF;
.cu-dialog{
background-color: transparent;
}
.text-red {
color: $color1;
}
.gap {
width: 100%;
height: 0;
position: relative;
border-bottom: 1px dashed #eee;
&:before,
&::after {
display: block;
content: '';
position: absolute;
width: 34rpx;
height: 34rpx;
background: #F3F4F8;
border-radius: 50%;
z-index: 2;
top: 50%;
transform: translateY(-50%);
background-size: 100% 18px;
background-repeat: repeat-x
}
&:before {
left: -16rpx;
}
&::after {
right: -16rpx;
}
}
.radius-16 {
border-radius: 16rpx;
}
.min-page {
background: #F3F4F8;
}
.invite-box {
position: relative;
margin-top: -280rpx;
background-color: #fff;
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-left: 28rpx;
margin-right: 28rpx;
.top {
position: absolute;
display: flex;
justify-content: center;
left: 134rpx;
right: 134rpx;
top: -24rpx;
.u-absolute {
left: 0;
right: 0;
z-index: 1;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
color: #FFFFFF;
}
}
}
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -696,7 +804,9 @@
transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
pointer-events: none; pointer-events: none;
} }
.bg-img{
background-color: transparent;
}
.modal.show { .modal.show {
opacity: 1; opacity: 1;
transition-duration: 0.3s; transition-duration: 0.3s;
@ -708,7 +818,7 @@
} }
page { page {
background: #E0EFFF; background: #F3F4F8;
} }
img { img {
@ -737,15 +847,20 @@
/* background-repeat: no-repeat; */ /* background-repeat: no-repeat; */
} }
.zhanji { .top-title {
width: 100%;
height: 119px;
position: absolute;
margin: auto;
top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; display: flex;
justify-content: center;
top: 192rpx;
.top-title-img {
width: 550rpx;
height: 92rpx;
}
}
.zhanji {
/* background-image: url('@/me/static/invite/yaoqing.png'); */ /* background-image: url('@/me/static/invite/yaoqing.png'); */
/* background-size: 100%; */ /* background-size: 100%; */
/* background-repeat: no-repeat; */ /* background-repeat: no-repeat; */

BIN
me/static/invite/bg1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
me/static/invite/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
me/static/invite/top-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 420 KiB