samehome/pages/me/inviteFriends.vue

<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.InviteFriends }}</navigation>
		<view class="body">
			<view class="shareText">{{ i18n.ShareWithFriends }}</view>
			<!-- <view class="scanText">{{ i18n.ScanTheCode }}</view> -->

			<!-- 二维码 -->
			<view class="QRCode">
				<u-image class="QRCodeImg" :src="qr" width="400rpx" height="400rpx">
				</u-image>
			</view>
			<!-- 	<view class="myIdText">{{ i18n.MyReferralID }}{{inviteRules.invitationCode}}</view> -->
			<!-- 按钮 -->
			<!-- 	<u-button class="button" color="#00E8A2" throttleTime="500" @click="copyId(referralID)">{{
                    i18n.CopyID
            }}
			</u-button> -->
			<view class="copy">
				<view class="item">
					{{link}}
				</view>
				<view class="btn" @click="copyId(link)">
					{{ i18n.CopyLink}}
				</view>
			</view>

			<view class="copy">
				<view class="item2">
					{{ i18n.MyReferralID }}{{this.inviteRules.invitationCode}}
				</view>
				<view class="btn" @click="copyId(inviteRules.invitationCode)">
					{{ i18n.CopyID}}
				</view>
			</view>

			<view class="scanText" v-html="inviteRules.invitationRules"></view>
		</view>
	</view>
</template>

<script>
	import uniCopy from '@/utils/uni-copy'
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	import QR from '@/utils/qrCode/wxqrcode.js'
	export default {
		name: "inviteFriends",
		data() {
			return {
				// 邀请链接
				link: '',
				qr: null,
				referralID: 857222,
				inviteRules: {},
			};
		},
		computed: {
			i18n() {
				return this.$t("me");
			},
		},
		onLoad() {
			this.invitation()
		},
		onShow() {},
		methods: {
			//获取邀请规则文案
			invitation() {
				api.invitation().then(res => {
					this.inviteRules = res
					this.link = this.inviteRules.invitLink
					// let baseURL = constant.BASE_URL
					// e=e.replace('h5Path',baseURL)
					this.qr = QR.createQrCodeImg(this.link)
				})
			},
			copyId(e) {
				// console.log(value)
				uniCopy({
					content: e,
					success: (res) => {
						uni.showToast({
							title: this.i18n.CopySuccess,
							duration: 3000,
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.copy {
		margin-bottom: 60rpx;
		background: #323045;
		border-radius: 32rpx;
		line-height: 60rpx;
		padding: 32rpx;
		position: relative;

		.item {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 450rpx;
		}

		.btn {
			position: absolute;
			right: 0;
			top: 0;
			line-height: 60rpx;
			height: 100%;
			background: #00E8A2;
			border-radius: 0px 32rpx 32rpx 0px;
			width: 162rpx;
			font-weight: 600;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			color: #15141F;
			justify-content: center;
		}
	}

	.main {

		.body {
			overflow: hidden;
			margin-top: 200rpx;
			padding: 0 48rpx;
			padding-bottom: 45rpx;

			.shareText {
				margin-top: 104rpx;
				font-size: 60rpx;
				font-weight: 800;
				text-align: center;
			}

			.scanText {
				font-size: 32rpx;
				text-align: left;
				color: #A2A0A8;
				
				// HTML+CSS 对于英文单词强制换行但不截断单词的解决办法
				
			  /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
			  overflow-wrap: break-word;
			  word-wrap: break-word;
			
			  -ms-word-break: break-all;
			  /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
			  word-break: break-all;
			  /* Instead use this non-standard one: */
			  word-break: break-word;
			
			  /* 如果浏览器支持的话增加一个连接符(Blink不支持) */
			  -ms-hyphens: auto;
			  -moz-hyphens: auto;
			  -webkit-hyphens: auto;
			  hyphens: auto;
			}

			.QRCode {
				box-sizing: border-box;
				margin: 66rpx auto;
				width: 520rpx;
				height: 520rpx;
				background-image: url(../../static/me/bg_QR_code.png);
				background-repeat: no-repeat;
				background-size: 520rpx;
				padding: 52rpx;

				.QRCodeImg {
					margin-left: 8rpx;
				}
			}

			.myIdText {
				font-size: 48rpx;
				font-weight: 800;
				text-align: center;
			}

			.button {
				height: 112rpx;
				margin: 72rpx 0;
				border-radius: 32rpx;
				color: #15141F !important;
				font-weight: 700;
				font-size: 32rpx;
			}



		}

	}
</style>