新增分享,找回密码,实名认证,签约
This commit is contained in:
唐明明
@@ -13,7 +13,6 @@ Page({
|
||||
shareSee : false, //分享弹出
|
||||
inviteText : '', //邀请码
|
||||
inviteCode : '', //二维码
|
||||
|
||||
//海报
|
||||
canvas : ''
|
||||
},
|
||||
@@ -38,7 +37,7 @@ Page({
|
||||
*/
|
||||
onShow() {
|
||||
// 小程序码
|
||||
// this.ShareInfo();
|
||||
this.ShareInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -46,7 +45,7 @@ Page({
|
||||
*/
|
||||
ShareInfo() {
|
||||
wx.$api.user.miniShare({
|
||||
url: '/pages/mall/index'
|
||||
url: 'pages/mall/index'
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
inviteCode: res.data.qrcode
|
||||
@@ -151,9 +150,7 @@ Page({
|
||||
|
||||
// 返回上一页
|
||||
returnGo() {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
wx.navigateBack()
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
|
||||
<!-- header -->
|
||||
<view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
|
||||
<image bindtap="returnGo" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/arrowBlack.png' : '/static/icons/arrowWrite.png'}}"></image>
|
||||
</view>
|
||||
|
||||
<!-- 二维码海报 -->
|
||||
<view class="code">
|
||||
<image src="https://cdn.douhuofalv.com/images/2023/08/11/cd8093d6ab1a248e5154be48b0ddcaac.jpg" class="code-back"></image>
|
||||
<view class="code-cont">
|
||||
@@ -20,16 +23,18 @@
|
||||
<canvas type="2d" style="width: 375px; height: 800px;" id="coverCanvas" class="canvas-img" />
|
||||
|
||||
<!-- 分享弹出 -->
|
||||
<view class="sharePop {{shareSee ? 'active' : ''}}">
|
||||
<view class="shareCont">
|
||||
<button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
|
||||
<image src="https://cdn.shuiganying.com/images/2023/03/28/f8b773edc2fe6db8e45f96773b9a8dc4.png"></image>
|
||||
微信好友
|
||||
</button>
|
||||
<view class="shareCont-label" bindtap="onCanvas">
|
||||
<image src="https://cdn.shuiganying.com/images/2023/03/28/cfe0efbb53eaf7911ea5211923859c65.png"></image>
|
||||
保存二维码
|
||||
<view class="sharePop-lay {{shareSee ? 'active' : ''}}">
|
||||
<view class="sharePop">
|
||||
<view class="shareCont">
|
||||
<button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
|
||||
<image src="https://cdn.shuiganying.com/images/2023/03/28/f8b773edc2fe6db8e45f96773b9a8dc4.png"></image>
|
||||
微信好友
|
||||
</button>
|
||||
<view class="shareCont-label" bindtap="onCanvas">
|
||||
<image src="https://cdn.shuiganying.com/images/2023/03/28/cfe0efbb53eaf7911ea5211923859c65.png"></image>
|
||||
保存二维码
|
||||
</view>
|
||||
</view>
|
||||
<view class="shareCancel" bindtap="shareTap">取消</view>
|
||||
</view>
|
||||
<view class="shareCancel" bindtap="shareTap">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,148 +1,31 @@
|
||||
/* 返回上一页 */
|
||||
.navigation{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: transparent;
|
||||
transition: .2s;
|
||||
}
|
||||
.navigation{ position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 90rpx; background-color: transparent; transition: .2s; }
|
||||
.navigation.active { background-color: transparent; }
|
||||
.navigation-arrow { width: 44rpx; height: 44rpx; margin: 20rpx 15rpx 0 20rpx; }
|
||||
|
||||
.navigation.active {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* 二维码海报 */
|
||||
.code { width: 100vw; height: 100vh; position: relative; }
|
||||
.code-back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
|
||||
.code-cont { width: 400rpx; position: absolute; z-index: 9; text-align: center; left: calc(50% - 200rpx); bottom: 8vh; }
|
||||
.code-img{ margin: 0 auto 20rpx; overflow: hidden; width: 260rpx; height: 260rpx; border: 4rpx solid #ff4f64; background-color: #ffffff; padding: 10rpx; box-sizing: border-box; border-radius: 50%; }
|
||||
.code-img image { width: 100%; }
|
||||
.code-text { color: #ffffff; font-size: 30rpx; }
|
||||
|
||||
.navigation-arrow {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin: 20rpx 15rpx 0 20rpx;
|
||||
/* 海报分享 */
|
||||
.code-share { position: absolute; right: 0; bottom: 15%; background: linear-gradient(to right, #fffafb, #ffd4dd); width: 50rpx; text-align: center; border-radius: 26rpx 0 0 26rpx; padding: 30rpx 10rpx 30rpx 15rpx; box-shadow: 0 0 0 6rpx rgba(249, 96, 116, .8); z-index: 9;
|
||||
}
|
||||
.code-share-name { writing-mode:vertical-rl; font-size: 30rpx; padding-left: 4rpx; color: #da2b54; }
|
||||
.code-share image { width: 36rpx; height: 36rpx; margin-bottom: 5rpx; }
|
||||
|
||||
|
||||
/* 二维码 */
|
||||
.code {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.code-cont {
|
||||
width: 400rpx;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
left: calc(50% - 200rpx);
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
.code-img{
|
||||
margin: 0 auto 20rpx;
|
||||
overflow: hidden;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
border: 4rpx solid #ff4f64;
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.code-img image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.code-share {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
bottom: 15%;
|
||||
background: linear-gradient(to right, #fffafb, #ffd4dd);
|
||||
width: 50rpx;
|
||||
text-align: center;
|
||||
border-radius: 26rpx 0 0 26rpx;
|
||||
padding: 30rpx 10rpx 30rpx 15rpx;
|
||||
box-shadow: 0 0 0 6rpx rgba(249, 96, 116, .8);
|
||||
}
|
||||
|
||||
.code-share-name {
|
||||
writing-mode:vertical-rl;
|
||||
font-size: 30rpx;
|
||||
padding-left: 4rpx;
|
||||
color: #da2b54;
|
||||
}
|
||||
|
||||
.code-share image {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.sharePop {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sharePop.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shareCont-label image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: block;
|
||||
margin: 0 auto 10rpx;
|
||||
}
|
||||
|
||||
.shareCancel {
|
||||
border-top: 2rpx solid #ebebeb;
|
||||
color: #000000;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.shareCont{
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.shareCont-label {
|
||||
color: #000000;
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.codeShare-button {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
/* 弹出层 */
|
||||
.sharePop-lay{ background: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; right: 0; height: 100vh; width: 100vw; z-index: 9; display: none; }
|
||||
.sharePop-lay.active{ display: block; }
|
||||
.sharePop { position: fixed; width: 100%; z-index: 99; left: 0; bottom: 0; background-color: #ffffff; }
|
||||
.shareCont-label image { width: 60rpx; height: 60rpx; display: block; margin: 0 auto 10rpx; }
|
||||
.shareCancel { border-top: 2rpx solid #ebebeb; color: #000000; width: 100%; text-align: center; line-height: 100rpx; }
|
||||
.shareCont{ display: flex; padding: 30rpx 0; }
|
||||
.shareCont-label { color: #000000; flex: 2; text-align: center; font-size: 28rpx; }
|
||||
.codeShare-button { background-color: transparent; padding: 0; font-weight: normal; }
|
||||
|
||||
/* canvas */
|
||||
.canvas-img {
|
||||
position: fixed;
|
||||
left: 0%;
|
||||
/* left: -10000%; */
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.canvas-img { position: fixed; left: 0%; left: -100%; top: 0; z-index: -1; }
|
||||
Reference in New Issue
Block a user