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

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

@ -1,5 +1,6 @@
<template>
<view style="background: #FFFFFF;">
<view>
<view class="u-flex " >
<canvas v-if="!tempFilePath" :canvas-id="CanvasID"
:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
<!-- #ifdef MP-WEIXIN -->
@ -13,6 +14,12 @@
@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>
</template>
<script>
@ -240,7 +247,8 @@
//添加二维码
_strHeight += uni.upx2px(20);
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
//添加推荐人与描述
@ -313,4 +321,13 @@
};
</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">
<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"
codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
@timeupdate="timeupdate"
@ -17,7 +17,7 @@
mode="aspectFill">
</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>
<!-- 右边操作 -->
<view class="swipers-items-right" :style="rightTop" v-if="showControls">
@ -303,6 +303,7 @@
export default {
data() {
return {
showBack:false,
nowBs: 1, //当前倍速
subList: [{
name: '0.5x',
@ -850,6 +851,7 @@
//显示/隐藏适配控制器的回调
controlstoggles(e) {
this.showControls = e.detail.show
this.showBack=!this.showBack
console.log(e.detail.show, '显示/隐藏控制栏')
},
//打开倍速弹框

211
me/invite/index.vue
View File

@ -1,40 +1,83 @@
<!-- 我的邀请 -->
<template>
<view>
<u-image src="/me/static/invite/juxing.png" alt="" width="100%" mode="widthFix"></u-image>
<view class="padding" style="position: relative;height: 360rpx;">
<u-image src="@/me/static/invite/fenxiang.png" alt="" width="100%" height="100%"></u-image>
<view class="text-center padding-top yaoqing">
<view class="margin-top-xl margin-bottom-sm padding-top-sm text-xxl text-red text-bold">
<view class="min-page">
<u-navbar title="分享好友" back-icon-color="#fff" :background="background" immersive :border-bottom="false"
title-color="#fff"></u-navbar>
<view class="u-relative">
<u-image src="/me/static/invite/top-bg.png" alt="" width="100%" mode="widthFix"></u-image>
<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}}
</view>
<view class="u-flex u-row-between" style="padding: 0 88rpx;">
<!-- #ifdef H5 -->
<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>
<!-- #endif -->
<!-- #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>
<!-- #endif -->
<!-- #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>
<!-- #endif -->
<!-- #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>
<!-- #endif -->
<!-- #ifndef MP-KUAISHOU -->
<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 -->
</view>
</view>
<view class="gap u-m-t-32"></view>
<view class="u-m-t-32">
<view class="font-bold color-000 u-font-32 u-text-center">我的邀请战绩</view>
<view class="flex justify-around u-m-t-32 u-text-center font-bold" style="line-height: 46rpx;">
<view>
<view class="">已邀请</view>
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{inviterNumber}}</text>人</view>
</view>
<view class="margin padding bg-white radius" v-if="inviterList.length">
<view>
<view class="">累计收益</view>
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{cumulativeRevenue}}</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 class="">已提现</view>
<view class="text-red u-m-t-16 "><text class="u-font-40">{{withdrawn}}</text>元</view>
</view>
</view>
<view class="u-m-t-16 color-999 u-text-center u-p-b-32">好友签到成功可额外获得1元现金红包</view>
</view>
</view>
<view class="margin u-m-t-40 padding bg-white radius-16" >
<view class="u-font-32 color-333 font-bold u-text-center">已邀请列表</view>
<view v-if="inviterList.length" class="u-m-t-20">
<view class="flex justify-between" style="line-height: 80rpx;" v-for="(item, index) in inviterList"
:key='index'>
<view class="flex">
@ -48,26 +91,10 @@
</view>
</view>
</view>
<view class="padding" style="position: relative;height: 160px;">
<u-image src="@/me/static/invite/yaoqing.png" alt="" width="100%" height="100%"></u-image>
<view class="text-center padding-top flex justify-center flex-direction zhanji">
<view class="flex justify-around margin-top-sm">
<view>
<view class="margin-bottom-sm">已邀请</view>
<view class="text-red"><text class="text-bold u-font-18">{{inviterNumber}}</text>人</view>
</view>
<view>
<view class="margin-bottom-sm">累计收益</view>
<view class="text-red"><text class="text-bold u-font-18">{{cumulativeRevenue}}</text>元</view>
</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 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>
<view class="padding-top jiqiao" style="">
<view class="padding-top-xl padding-lr padding-bottom" style="line-height: 48rpx;">
@ -90,7 +117,7 @@
</view>
</view>
</view>
</view> -->
<tki-qrcode ref="qrcode" :val="erweima" :size="200" background="#fff" foreground="#000" pdground="#000"
@ -126,13 +153,16 @@
modalName: '',
canvasId: 'default_PosterCanvasId',
avatar: '../../static/images/logo.png',
background: {
'background-color': 'transparent'
},
customStyle: {
background: '#FFE0E0',
border: '0',
color: 'rgb(254,30,35)',
fontSize: '12px',
fontWeight: '500',
padding: '15px 20px',
background: '#DDDCFF',
border: '8rpx',
color: '#4544FF',
fontSize: '28rpx',
fontWeight: '700',
padding: '10rpx 32rpx',
},
page: 1,
limit: 10,
@ -677,7 +707,85 @@
}
</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 {
position: fixed;
top: 0;
@ -696,7 +804,9 @@
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.bg-img{
background-color: transparent;
}
.modal.show {
opacity: 1;
transition-duration: 0.3s;
@ -708,7 +818,7 @@
}
page {
background: #E0EFFF;
background: #F3F4F8;
}
img {
@ -737,15 +847,20 @@
/* background-repeat: no-repeat; */
}
.zhanji {
width: 100%;
height: 119px;
position: absolute;
margin: auto;
top: 0;
.top-title {
left: 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-size: 100%; */
/* 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