jinNiucourseMall_uniapp/pages_manage/index.vue

<template>
	<view class="pages_manage flex-1 hb column hidden">
		<dataIndex v-if="tabact==0"></dataIndex>
		<courseIndex v-if="tabact==1" @child-data-update='onChildDataUpdate' :parent-method="handleParentMethod"></courseIndex>
		<memberIndex v-if="tabact==2" @childEvent='chlidpages' style="height: 100%;"></memberIndex> 
		<UrgeIndex v-if="tabact==3" style="height: 100%;"></UrgeIndex>
		<manageIndex v-if="tabact==4" @childsales='chlidSalsepages'></manageIndex>
		<view class="footbox" >
			<view @click="tabclick(item)" v-for="(item,index) in listtab" class="column align-center flex-1" :key="index">
				<image :src="tabact==item.value?item.tabsel:item.tab" class="w50 h50"></image>
				<view class="fs24" :class="tabact==item.value?'actcolor':'colortab'">{{item.name}}</view>
			</view>
		</view>
		<view style="flex:0">
			<u-popup :show="showShare" :closeOnClickOverlay="true" :round='20' @close="closeShare" >
				<view class="sharePop x-ac">
					<!--#ifdef MP-WEIXIN-->
					<view class="sharePop-item y-f card-share">
						<image :src="imgPath+'/app/images/card_icon.png'"
							mode="aspectFill" style="width: 80rpx; height: 80rpx;margin-top: 20rpx;"></image>
						<view style="font-weight: bold;margin-bottom: 4px;">生成卡片</view>
						<view style="font-size: 12px;color: #888;">指导分享轻松转发</view>
						<button open-type="share" class="share">分享课程</button>
						<view  @click="copy" v-if="imgname!='乐氏本源'"
						class="base-color-6 u-border ptb10 plr30 radius50 mt20">复制页面地址</view>
					</view>
					<!--#endif-->
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import dataIndex from './components/dataIndex.vue'
	import courseIndex from './components/courseIndex.vue'
	import memberIndex from './components/memberIndex.vue'
	import UrgeIndex from './components/UrgeIndex.vue'
	import manageIndex from './components/manageIndex.vue'
	import {copyuniLink} from "@/api/manageCompany.js"
	import { mapGetters } from 'vuex';
	export default{
		components:{
			dataIndex,
			courseIndex,
			memberIndex,
			UrgeIndex,
			manageIndex
		},
		data(){
			return{
				showShare:false,
				tabact:0,
				childdata:[],
				vipPages:'',
				salsepages:'',
				// appid:this.$store.state.appid
				listtab:[
					{
					name:'数据',
					value:0,
					tab:require("@/static/manageTabIcon/data.png"),
					tabsel:require('@/static/manageTabIcon/data_on.png')
					},
					{
					name:'课程库',
					value:1,
					tab:require('@/static/manageTabIcon/liveclasses.png'),
					tabsel:require('@/static/manageTabIcon/liveclasses_on.png')
					},
					{
					name:'会员',
					value:2,
					tab:require('@/static/manageTabIcon/vip.png'),
					tabsel:require('@/static/manageTabIcon/vip_on.png')
					},
					{
					name:'催课',
					value:3,
					tab:require('@/static/manageTabIcon/training.png'),
					tabsel:require('@/static/manageTabIcon/training_on.png')
					},
					{
					name:'管理',
					value:4,
					tab:require('@/static/manageTabIcon/manage.png'),
					tabsel:require('@/static/manageTabIcon/manage_on.png')
					}
				],
				companyUserInfo:JSON.parse(uni.getStorageSync('companyUserInfo')) 
			}
		},
		computed: {
			appid() {
				return this.$store.state.appid
			},
		    imgPath() {
		      return this.$store.state.imgpath
		    },
			...mapGetters(['logoimg']),
		},
		watch: {
		    logoimg: {
		      immediate: true,          // 页面一进入就检查一次
		      handler(val) {
				  return val
		      }
		    },
		},
		onShareAppMessage() {
			if(this.tabact==1){
				return {
					title: this.childdata.title, // 分享卡片标题
					path: this.childdata.path + "?course=" + JSON.stringify(this.childdata.params), // 目标页面路径
					// 携带参数：将当前页面的数据拼接到路径中
					imageUrl: this.childdata.img, // 分享卡片封面图（可选）
					success: (res) => {
						console.log("分享成功", res);
					},
					fail: (err) => {
						console.log("分享失败", err);
					},
				}
			}
			if(this.tabact==2){
				return {
					title:this.$store.state.logoname+'小程序的'+this.companyUserInfo.nickName + '邀请您成为会员！',
					path: this.vipPages,
					imageUrl: this.logoimg,
				}
			}
			if(this.tabact==4){
				return {
					title:this.$store.state.logoname+'小程序的'+this.companyUserInfo.nickName + '邀请您成为销售！',
					path: this.salsepages,
					imageUrl: this.logoimg,
				}
			}
		},
		onLoad(option) {
			this.tabact=option.act?option.act:0
		},
		methods:{
			copy(){
				console.log("hhh")
				uni.showLoading({
					title: "处理中..."
				});
				const data={
					appid:this.appid,
					linkStr:this.childdata.path + "?course=" + JSON.stringify(this.childdata.params)
				}
				copyuniLink(data).then(res=>{
					if(res.code==200){
						uni.hideLoading();
						setTimeout(() => {
							uni.setClipboardData({
								data:res.data,
								// data:  this.childdata.path + "?course=" + JSON.stringify(this.childdata.params),
								success: () => {
									uni.showToast({
										title: '链接已复制',
										icon: 'none',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									});
								}
							});
						}, 200)
					}else{
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				
			},
			chlidpages(e){
				this.vipPages=e
			},
			chlidSalsepages(e){
				console.log('父组件',e)
				this.salsepages=e
			},
			closeShare() {
				this.showShare = false
				// console.log('open');
			},
			handleParentMethod() {
			},
			onChildDataUpdate(data) {
				this.childdata = data
				this.showShare = this.childdata.onshow
				console.log(this.childdata);
				console.log('父组件', this.childdata.path + "?course=" +JSON.stringify(this.childdata.params) )
			},
			tabclick(item){
				this.tabact=item.value
				 uni.setNavigationBarTitle({
				      title: item.name
				    });
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.colortab{
		color: #7e7e7e;
	}
	.actcolor{
		color: #1773ff;
	}
	.footbox{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		padding-bottom: 40rpx ;
		padding-top: 20rpx;
	}
	.card-share{
		position: relative;
	}
	.share{
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 80%;
			opacity: 0;
		}
	.sharePop {
		background-color: #fff;
		padding: 30rpx 0;
		border-radius: 20px 20px 0 0;
		/* #ifdef MP-WEIXIN */
		/* #endif */
	
		/* #ifdef H5 */
		padding-bottom: 60px;
	
		/* #endif */
		&-item {
			padding: 0 10px;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
	
			display: inline-flex !important;
	
			image {
				height: 48px;
				width: 48px;
				margin-bottom: 10px;
			}
		}
	}
</style>