Przeglądaj źródła

专业支持、推荐转发页面最新需求修改

htc 3 tygodni temu
rodzic
commit
d320657983
2 zmienionych plików z 78 dodań i 25 usunięć
  1. 64 3
      pages/support.vue
  2. 14 22
      pagesMy/forward.vue

+ 64 - 3
pages/support.vue

@@ -2,14 +2,27 @@
 	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
 	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
 		<cus-header title='专业支持'></cus-header>
 		<cus-header title='专业支持'></cus-header>
 		<image style="width: 100%;" :src="imgBase+'support.png'" mode="widthFix" @click="handleTurn"></image>
 		<image style="width: 100%;" :src="imgBase+'support.png'" mode="widthFix" @click="handleTurn"></image>
+		<div class="code" :style="{'top':(mt*2+1278)+'rpx'}">
+			<canvas canvas-id="qrcode" style="width:216rpx;height:216rpx;border-radius: 16rpx; position: fixed;left: -9999px;top: -9999px;"></canvas>
+			<image v-if="qrCodeDataURL" :src="qrCodeDataURL" mode="scaleToFill" show-menu-by-longpress></image>
+		</div>
 	</view>
 	</view>
 </template>
 </template>
 
 
 <script>
 <script>
+	import UQrcode from '@/uqrcode.js'
 	export default {
 	export default {
 		data(){
 		data(){
 			return {
 			return {
-				imgBase:this.$imgBase
+				imgBase:this.$imgBase,
+				qrCodeDataURL:'',
+				qrVal:'https://wxapp.transcend-intl.cn',
+			}
+		},
+		onLoad() {
+			this.generateQRCode();
+			if(uni.getStorageSync('userInfo')){
+				this.qrVal = `https://wxapp.transcend-intl.cn?shareUserId=${JSON.parse(uni.getStorageSync('userInfo'))?.id||''}`;
 			}
 			}
 		},
 		},
 		methods:{
 		methods:{
@@ -17,11 +30,59 @@
 				uni.navigateTo({
 				uni.navigateTo({
 					url:'/pages/webView?src=https://appyf7rnhyg7811.h5.xiaoeknow.com'
 					url:'/pages/webView?src=https://appyf7rnhyg7811.h5.xiaoeknow.com'
 				})
 				})
-			}
+			},
+			async generateQRCode(){
+				try {
+					let that = this;
+					// 确保DOM已经更新,canvas元素已准备好
+					this.$nextTick(() => { 
+						UQrcode.make({
+							canvasId: 'qrcode',
+							componentInstance: this,
+							text: that.qrVal,
+							size: 103, // 对应 216rpx 的物理像素大小
+							margin: 5,
+							backgroundColor: '#ffffff',
+							foregroundColor: '#000000',
+							fileType: 'png',
+							errorCorrectLevel: UQrcode.errorCorrectLevel.H,
+							success: res => {
+								uni.canvasToTempFilePath({
+									canvasId: 'qrcode', 
+									fileType: 'png', 
+									quality: 1, 
+									success: (canvasRes) => {
+										that.qrCodeDataURL = canvasRes.tempFilePath; 
+									},
+									fail: (err) => {
+										that.qrCodeDataURL = res; 
+									}
+								}, this);
+							}
+						});
+					});
+				} catch { }
+			},
 		}
 		}
 	}
 	}
 </script>
 </script>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
-	
+	.default_page{
+		position: relative;
+	}
+	.code{
+		width: 216rpx;
+		height: 216rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		position: absolute;
+		left: 50%;
+		margin-left: -108rpx;
+		image{
+			width: 100%;
+			height: 100%;
+			border-radius: 18rpx;
+		}
+	}
 </style>
 </style>

+ 14 - 22
pagesMy/forward.vue

@@ -3,16 +3,15 @@
 		<cus-header title='转发推荐'></cus-header>
 		<cus-header title='转发推荐'></cus-header>
 		<div class="all adffc">
 		<div class="all adffc">
 			<div class="box adffcac">
 			<div class="box adffcac">
-				<div class="box-title">PERILL团队发展动态评估</div>
 				<div class="box-code adffcac">
 				<div class="box-code adffcac">
 					<div class="box-code-ewm">
 					<div class="box-code-ewm">
 						<canvas canvas-id="qrcode" style="width:274rpx;height:274rpx; position: fixed;left: -9999px;top: -9999px;"></canvas>
 						<canvas canvas-id="qrcode" style="width:274rpx;height:274rpx; position: fixed;left: -9999px;top: -9999px;"></canvas>
 						<image v-if="qrCodeDataURL" :src="qrCodeDataURL" mode="scaleToFill" show-menu-by-longpress></image>
 						<image v-if="qrCodeDataURL" :src="qrCodeDataURL" mode="scaleToFill" show-menu-by-longpress></image>
 					</div>
 					</div>
-					<div class="box-code-tip">长按保存小程序二维码</div>
 				</div>
 				</div>
+				<div class="box-code-tip">扫码立即体验</div>
+				<button class="share-btn" open-type="share">点击分享</button>
 			</div>
 			</div>
-			<button class="share-btn" open-type="share">立即分享</button>
 		</div>
 		</div>
 	</view>
 	</view>
 </template>
 </template>
@@ -82,16 +81,17 @@
 	.share-btn {
 	.share-btn {
 		width: 100%;
 		width: 100%;
 		height: 88rpx;
 		height: 88rpx;
-		background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
+		background: linear-gradient( 180deg, #CFD9A4 0%, #029292 100%);
 		border-radius: 44rpx;
 		border-radius: 44rpx;
 		border: none;
 		border: none;
 		padding: 0;
 		padding: 0;
 		margin: 0;
 		margin: 0;
-		font-family: PingFang-SC, PingFang-SC;
+		font-family: SourceHanSansCN, SourceHanSansCN;
 		font-weight: bold;
 		font-weight: bold;
 		font-size: 32rpx;
 		font-size: 32rpx;
-		color: #FFFFFF;
+		color: #002846;
 		line-height: 88rpx;
 		line-height: 88rpx;
+		letter-spacing: 2px;
 		text-align: center;
 		text-align: center;
 		margin-top: 46rpx;
 		margin-top: 46rpx;
 		&::after {
 		&::after {
@@ -104,7 +104,7 @@
 		.all{
 		.all{
 			width: 100%;
 			width: 100%;
 			flex: 1;
 			flex: 1;
-			padding: 0 30rpx 74rpx;
+			padding: 0 30rpx 62rpx;
 			box-sizing: border-box;
 			box-sizing: border-box;
 			justify-content: flex-end;
 			justify-content: flex-end;
 			background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/forward_bg.png') no-repeat;
 			background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/forward_bg.png') no-repeat;
@@ -115,21 +115,12 @@
 			width: 100%;
 			width: 100%;
 			background: rgba(255,255,255,0.14);
 			background: rgba(255,255,255,0.14);
 			border-radius: 16rpx;
 			border-radius: 16rpx;
-			padding: 48rpx 50rpx;
+			padding: 36rpx 172rpx;
 			box-sizing: border-box;
 			box-sizing: border-box;
-			&-title{
-				font-family: PingFang-SC, PingFang-SC;
-				font-weight: bold;
-				font-size: 32rpx;
-				color: #FFFFFF;
-				line-height: 36rpx;
-				text-align: center;
-			}
 			&-code{
 			&-code{
 				background: #FFFFFF;
 				background: #FFFFFF;
-				border-radius: 8rpx;
+				border-radius: 16rpx;
 				padding: 24rpx 45rpx;
 				padding: 24rpx 45rpx;
-				margin-top: 24rpx;
 				&-ewm{
 				&-ewm{
 					width: 274rpx;
 					width: 274rpx;
 					height: 274rpx;
 					height: 274rpx;
@@ -140,10 +131,11 @@
 				}
 				}
 				&-tip{
 				&-tip{
 					font-family: PingFangSC, PingFang SC;
 					font-family: PingFangSC, PingFang SC;
-					font-weight: 400;
-					font-size: 24rpx;
-					color: #002846;
-					line-height: 24rpx;
+					font-weight: 600;
+					font-size: 50rpx;
+					color: #FFFFFF;
+					line-height: 50rpx;
+					letter-spacing: 2px;
 					margin-top: 24rpx;
 					margin-top: 24rpx;
 				}
 				}
 			}
 			}