vue-insagent-app/pages/tools/addStaff/addStaff.vue

<template>
	<view>
		<public-module></public-module>
		<!-- <service-widget @btnClick="btn_click"></service-widget> -->
		<view class="headers dis a-c j-start " :style="headerStyle">
			<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
			<text style="margin: auto;">我的邀请码</text>
		</view>
		<view class="Personnel dis a-c j-s">

		</view>
		<view class="" style="padding: 16px;margin-top: -78px;">
			<view class="promotion " v-if="sources==1">
				<view style="border-bottom: 1px solid #f2f2f2;">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"
						style="background: transparent;width: 210px;" :active-item-style="activestyle"
						inactive-color="#81869B" bar-width="80"></u-tabs>
				</view>
				<view class="dis a-c j-c f-c " v-if="current==0">
					<view class="" style="position: relative;margin: 40px 0;">
						<image :src="recommendImg" mode="widthFix" lazy-load style="width: 110px;height: 110px;">
						</image>
						<image src="../../../static/image/addStaff/zgcx.png" mode=""
							style="width: 26px;height: 26px;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);">
						</image>
					</view>
					<view class="shareMethod dis a-c j-s ">
						<view class="dis f-c a-c" @click="save">
							<image src="../../../static/image/addStaff/saveimg.png" mode=""></image>
							<text>保存图片</text>
						</view>
						<view class="dis f-c a-c" @click="invitation">
							<image src="../../../static/image/addStaff/share.png" mode=""></image>
							<text>分享海报</text>
						</view>
						<view class="dis f-c a-c" @click="linkShare(recommendUrl)">
							<image src="../../../static/image/addStaff/urlshare.png" mode=""></image>
							<text>链接分享</text>
						</view>
						<!-- #ifdef APP -->
						<view class="dis f-c a-c" @click="smsShare(recommendUrl)">
							<image src="../../../static/image/addStaff/smsshare.png" mode=""></image>
							<text>短信分享</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="dis a-c j-c f-c " v-if="current==1">
					<view class="qodeurl dis j-c a-c">
						<text>{{Downloadurl}}</text>
					</view>
					<view class="btn mt-4" @click="downloadUrl(Downloadurl)">
						<text>复制链接</text>
					</view>
					<view class="tioop dis a-c j-c">
						<text>下载APP，请点击复制链接后发送给好友，然后使用浏览器访问。</text>
					</view>
				</view>

			</view>
			<view class="promotion " v-if="sources==2">
				<view style="border-bottom: 1px solid #f2f2f2;">
					<u-tabs :list="list1" :is-scroll="false" :current="current1" @change="change1"
						style="background: transparent;width: 150px;" :active-item-style="activestyle"
						inactive-color="#81869B" bar-width="80"></u-tabs>
				</view>
				<view class="dis a-c j-c f-c " v-if="current1==0">
					<view class="" style="position: relative;margin: 40px 0;">
						<image :src="orderissuerImg" mode="widthFix" lazy-load style="width: 110px;height: 110px;">
						</image>
						<image src="../../../static/image/addStaff/zgcx.png" mode=""
							style="width: 26px;height: 26px;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);">
						</image>
					</view>
					<view class="shareMethod dis a-c j-s ">
						<view class="dis f-c a-c" @click="save">
							<image src="../../../static/image/addStaff/saveimg.png" mode=""></image>
							<text>保存图片</text>
						</view>
						<view class="dis f-c a-c" @click="linkShare(orderissuerUrl)">
							<image src="../../../static/image/addStaff/urlshare.png" mode=""></image>
							<text>链接分享</text>
						</view>
						<!-- #ifdef APP -->
						<view class="dis f-c a-c" @click="smsShare(orderissuerUrl)">
							<image src="../../../static/image/addStaff/smsshare.png" mode=""></image>
							<text>短信分享</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="dis a-c j-c f-c " v-if="current1==1">
					<view class="qodeurl dis j-c a-c">
						<text>{{Downloadurl}}</text>
					</view>
					<view class="btn mt-4" @click="downloadUrl(Downloadurl)">
						<text>复制链接</text>
					</view>
					<view class="tioop dis a-c j-c">
						<text>下载APP，请点击复制链接后发送给好友，然后使用浏览器访问。</text>
					</view>
				</view>
			</view>
			<view class="myMembers dis a-c j-s" @click="getStaffList">
				<view class="dis a-c">
					<image src="../../../static/image/addStaff/kefu.png" mode=""></image>
					<view class="dis f-c a-start">
						<text>我的成员</text>
						<text>查看成员已认证、未认证以及详细信息</text>
					</view>
				</view>
				<view class="circle dis a-c j-c">
					<u-icon name="arrow-right" color="#fff" size="26"
						:custom-style="{marginLeft:'2px',marginTop:'2px'}"></u-icon>
				</view>
			</view>
			<view class="myMembers1 dis a-c j-s" @click="newStats" v-if="this.userInfo.sysUser.managementSource == '2'">
				<view class="dis a-c">
					<image src="../../../static/image/addStaff/add.png" mode=""></image>
					<view class="dis f-c a-start">
						<text>新增统计</text>
						<text>查看成员新增数据的内容统计</text>
					</view>
				</view>
				<view class="circle dis a-c j-c">
					<u-icon name="arrow-right" color="#fff" size="26"
						:custom-style="{marginLeft:'2px',marginTop:'2px'}"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				Downloadurl: "", //app下载链接
				recommendImg: "",
				recommendUrl: "", //注册链接
				orderissuerImg: '',
				orderissuerUrl: "",
				list1: [{
					name: '邀请注册'
				}, {
					name: 'APP下载'
				}],
				current: 0,
				list: [{
					name: '出单员扫码注册'
				}, {
					name: 'APP下载'
				}, ],
				current1: 0,
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				activestyle: {
					background: 'linear-gradient(to right, #52C7E0, #2B91EF)',
					backgroundClip: 'text',
					WebkitBackgroundClip: 'text',
					WebkitTextFillColor: 'transparent', // 透明填充颜色
					transition: 'background 0.3s ease', // 添加过渡效果
				}
			}
		},
		onLoad() {
			this.recommendCode();
			this.codeDownload();
			this.orderissuer();
			this.$http.get('/sysMenuRecord/add?type=1&menuType=4')
			// #ifdef APP
			if (window.plus) {
				plusReady();
			}
			//#endif

		},
		computed: {
			...mapState(['userInfo', 'sources']),
		},
		methods: {
			//保存图片
			save() {
				let url = this.sources == '1' ? this.recommendImg : this.orderissuerImg;
				let base64Data = url.replace("data:image/gif;base64,", "");
				let pdfBase64 = `data:image/png;base64,${base64Data}`;
				base64ToPath(pdfBase64)
					.then(path => {
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
							filePath: path, //图片文件路径
							success: function() {
								uni.showToast({
									title: '已保存到相册',
									icon: 'none',
								});
							},
							fail: function(e) {
								uni.showToast({
									title: '图片保存失败',
									icon: 'none',
								});
							}
						});
					})
			},
			downloadUrl(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: '链接复制成功'
						})
					}
				});
			},
			//链接分享
			linkShare(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: '邀请链接已复制成功'
						})
					}
				});
			},
			//编辑短信加载事件
			plusReady() {},
			//短信分享
			smsShare(value) {
				var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
				msg.to = [""];
				msg.body = `${this.userInfo.sysUser.name}向您发送来了加入团队的邀请，点击加入：%${value}%`;
				plus.messaging.sendMessage(msg);
			},
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			invitation() {
				this.navigate({
					url: '/pages/tools/poster/poster',
				}, "navigateTo", true)
			},
			recommendCode() {
				let id = this.userInfo.sysUser.id;
				this.recommendImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/register?id=" + id, {
					size: parseInt(200) //二维码大小  
				})
				this.recommendUrl = this.$base.h5BaseUrl + "/#/pages/register/register?id=" + id;
				// this.recommendUrl = "http://192.168.0.20/h5/#/pages/register/register?id=" + id;
			},
			async codeDownload() {
				let id = this.userInfo.sysUser.id;
				let pageRequest = {
					pageNum: 1,
					pageSize: 50,
					columnFilters: {
						apptype: {
							name: "apptype",
							value: "apk",
						},
						appid: {
							name: "appid",
							value: "__UNI__D4FE29A",
						}
					}
				};
				let getquote = await this.$http.post('/sysVersion/findPage', pageRequest);
				let url = getquote.data.content[0].path;
				this.Downloadurl = url;

			},
			orderissuer() {
				let id = this.userInfo.sysUser.id;
				this.orderissuerImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/orderissuer?id=" + id, {
					size: parseInt(200) //二维码大小  
				})
				this.orderissuerUrl = this.$base.h5BaseUrl + "/#/pages/register/orderissuer?id=" + id;
				// this.orderissuerUrl = "http://192.168.0.20/h5/#/pages/register/orderissuer?id=" + id;

			},
			change(index) {
				this.current = index;
			},
			change1(index) {
				this.current1 = index;
			},
			getStaffList() {
				this.navigate({
					url: '/pages/tools/addStaff/authentication',
				}, "navigateTo", true);
			},
			newStats() {
				this.navigate({
					url: '/pages/tools/addStaff/employeeAdditionCount',
				}, "navigateTo", true);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ {
		.u-tab-bar {
			background: linear-gradient(90deg, rgba(82, 199, 224, 1), rgba(43, 145, 239, 1)) !important;
			border-radius: 4px 4px 4px 4px;
		}

		.u-tab-item {}
	}

	page {
		background-color: #fff;
	}

	// 扫码注册下载
	.promotion {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		padding: 0 16px 16px;

		.shareMethod {
			width: 100%;

			>view {
				text {
					color: #999;
					font-size: 12px;
					margin-top: 4px;
				}

				image {
					width: 38px;
					height: 38px;
				}
			}
		}

		.qodeurl {
			padding: 5px 10px;
			border: 1px solid #EEEEEE;
			border-radius: 2px;
			margin-top: 36px;

			text {
				white-space: normal;
				word-wrap: break-word;
				word-break: break-all;
				text-align: center;
				/* 文本居中 */
				color: #666;
				font-size: 13px;
			}
		}

		.btn {
			background: linear-gradient(90deg, #0153FF 0%, #0D89FF 100%);
			box-shadow: 0px 2px 5px 0px rgba(0, 82, 255, 0.1);
			border-radius: 4px;
			padding: 5px 40px;
			margin-bottom: 48px;

			text {
				font-size: 13px;
				color: #fff;
			}
		}

		.tioop {
			background: #F9FAFB;
			border-radius: 2px;
			padding: 5px 10px;
			border: 1px solid #EEEEEE;
			text-align: center;
			color: #333;
			font-size: 12px;
		}
	}

	// 扫码注册下载
	// 我的成员  统计
	.myMembers,
	.myMembers1 {
		height: 60px;
		background: linear-gradient(90deg, #F3F8FF 0%, #DCF0FF 100%);
		box-shadow: 0px 2px 5px 0px #DAE3F4;
		border-radius: 6px;
		margin-top: 16px;
		padding: 10px;

		image {
			width: 40px;
			height: 40px;
			margin-right: 6px;
		}

		text:nth-child(1) {
			color: #536674;
			font-size: 15px;
			font-weight: bold;
		}

		text:nth-child(2) {
			color: #999999;
			font-size: 12px;
		}

		.circle {
			width: 24px;
			height: 24px;
			background: linear-gradient(175deg, #3793FF 0%, #0175FF 100%);
			box-shadow: 0px 2px 2px 0px rgba(0, 133, 255, 0.15);
			border-radius: 50%;
		}
	}

	.myMembers1 {
		background: linear-gradient(90deg, #FFFAF4 0%, #FFEDDD 100%);

		.circle {
			background: linear-gradient(175deg, #FFBB37 0%, #FF8A00 100%);
		}
	}

	// 我的成员  统计
	.Personnel {
		height: 177px;
		width: 100%;
		background-image: url("/static/image/addStaff/banner.png");
		background-size: 100% 100%;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
	}

	.addStaffManage {
		height: 220upx;
		margin: 0 40upx;
	}

	.addStaffManage>view>view.icon {
		width: 110upx;
		height: 110upx;
		color: #FFFFFF;
		border-radius: 100%;
		margin-bottom: 10upx;
		font-size: 60upx;
	}

	.addStaffManage>view:nth-of-type(1)>view.icon {
		background-color: #78CBFF;
	}

	.addStaffManage>view:nth-of-type(2)>view.icon {
		background-color: #78FF7E;
	}

	.addStaffManage>view:nth-of-type(3)>view.icon {
		background-color: #FF9D4A;
	}
</style>