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 class="addMe">
				<image src="../../../static/image/addStaff/f1.png" mode="" @click="getStaffList(1)"></image>
			</view>
			<view class="addMe">
				<image src="../../../static/image/addStaff/f2.png" mode="" @click="getStaffList(2)"></image>
			</view>
			<view class="addMe">
				<image src="../../../static/image/addStaff/f3.png" mode="" @click="getStaffList(3)"></image>
			</view>
		</view>
		<view class="" style="padding: 16px;">
			<view class="promotion " v-if="sources==1">
				<view style="width: 100%;border-bottom: 1px solid #f2f2f2;">
					<u-tabs :list="list1" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="dis a-c j-c f-c mt-5" v-if="current==0">
					<image :src="recommendImg" mode="widthFix" lazy-load style="width: 110px;"></image>
					<text class="mt-1" style="color: rgba(51, 51, 51, 0.8);">面对面推荐</text>
					<text style="color: rgba(51, 51, 51, 0.8);">更安全更方便的加入方式</text>
					<view class="invitation dis j-c a-c">
						<image src="../../../static/image/addStaff/f4.png" mode=""></image>
						<text @click="invitation">邀请函</text>
					</view>
				</view>
				<view class="dis a-c j-c f-c mt-5" v-if="current==1">
					<image :src="DownloadImg" mode="widthFix" lazy-load style="width: 110px;"></image>
					<text class="mt-1" style="color: rgba(51, 51, 51, 0.8);">微信扫描二维码</text>
					<text style="color: rgba(51, 51, 51, 0.8);">即可下载App</text>
					<!-- 	<view class="invitation dis j-c a-c">
						<image src="../../../static/image/addStaff/f4.png" mode=""></image>
						<text @click="invitation">邀请函</text>
					</view> -->
				</view>
			</view>
			<view class="promotion " v-if="sources==2">
				<view style="width: 100%;border-bottom: 1px solid #f2f2f2;">
					<u-tabs :list="list" :is-scroll="false" :current="current1" @change="change1"></u-tabs>
				</view>
				<view class="dis a-c j-c f-c mt-5" v-if="current1==0">
					<image :src="orderissuerImg" mode="widthFix" lazy-load style="width: 110px;"></image>
					<text class="mt-1" style="color: rgba(51, 51, 51, 0.8);">面对面推荐</text>
					<text style="color: rgba(51, 51, 51, 0.8);">更安全更方便的加入方式</text>
				</view>
				<view class="dis a-c j-c f-c mt-5" v-if="current1==1">
					<image :src="DownloadImg" mode="widthFix" lazy-load style="width: 110px;"></image>
					<text class="mt-1" style="color: rgba(51, 51, 51, 0.8);">微信扫描二维码</text>
					<text style="color: rgba(51, 51, 51, 0.8);">即可下载App</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import myListItem from "@/components/modules/my/my-list-item.vue";
	import {
		mapState
	} from "vuex"
	import QR from "@/common/wxqrcode.js"
	export default {
		components: {
			myListItem
		},
		data() {
			return {
				recommendImg: "",
				DownloadImg: "",
				orderissuerImg: '',
				list: [{
					name: '面对面推荐'
				}, {
					name: '扫码下载'
				}],
				current: 0,
				list1: [{
					name: '出单员扫码注册'
				}, {
					name: '扫码下载'
				}, ],
				current1: 0,
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
			}
		},
		onLoad() {
			this.recommendCode();
			this.codeDownload();
			this.orderissuer();
			this.$http.get('/sysMenuRecord/add?type=1&menuType=4')
		},
		computed: {
			...mapState(['userInfo', 'sources']),
		},
		methods: {
			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) //二维码大小  
				})
			},
			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.DownloadImg = QR.createQrCodeImg(url, {
					size: parseInt(200) //二维码大小  
				})
			},
			orderissuer() {
				let id = this.userInfo.sysUser.id;
				this.orderissuerImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/register/orderissuer?id=" + id, {
					size: parseInt(200) //二维码大小  
				})
			},
			change(index) {
				this.current = index;
			},
			change1(index) {
				this.current1 = index;
			},
			getStaffList(staffType) {
				// 0未认证 1已认证 2全部
				this.navigate({
					url: '/pages/tools/addStaff/authentication' + staffType,
				}, "navigateTo", true);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8FAFE;
	}

	.promotion {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		padding: 0 16px 16px;

		.invitation {
			width: 160px;
			height: 24px;
			background: rgba(255, 224, 178, 0.5);
			box-shadow: 2px 0px 1px 0px rgba(255, 255, 255, 0.6);
			border-radius: 12px;
			border: 1px solid #FFDCA7;
			color: #FB892B;
			margin-top: 10px;

			image {
				width: 16px;
				height: 16px;
				margin-right: 5px;
			}

		}
	}

	.Personnel {
		height: auto;
		width: 100%;
		background: #fff;
		background-image: url("/static/image/my/banner.png");
		background-size: 100% 100%;
		padding: 110px 24px 10px;

		.addMe {
			width: 70px;
			height: 70px;

			image {
				width: 100%;
				height: 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>