zhongtuanLitterButler/pages/goods/components/detail/detail-tabbar.vue

<template>
	<su-fixed bottom placeholder bg="bg-white">
		<view class="ui-tabbar-box">
			<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
				<!-- <view
          v-if="collectIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="onFavorite"
        >
          <block v-if="modelValue.favorite">
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_1.gif')"
              mode="aspectFit"
            ></image>
            <view class="item-title">已收藏</view>
          </block>
          <block v-else>
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_0.png')"
              mode="aspectFit"
            ></image>
            <view class="item-title">收藏</view>
          </block>
        </view> -->
				<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
					style="margin-left: 12rpx;" @tap="backHome">
					<image class="item-icon" src="https://mall.jiangxiaoxian.hschool.com.cn/backHome.png" mode="aspectFit">
					</image>
					<view class="item-title">首页</view>
				</view>
				<!-- <view @click="backHome">
			<image class="btnIcon" src="https://mall.jiangxiaoxian.hschool.com.cn/backHome.png" mode=""></image>
			<view class="btnText" style="margin-top: 10rpx;">首页</view>
		</view> -->
				<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
					@tap="onChat">
					<image class="item-icon" :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/message.png')"
						mode="aspectFit"></image>
					<view class="item-title">客服</view>
				</view>
				<view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
					style="margin-right: 12rpx;" @tap="shareGoods()">
					<image class="item-icon" :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/share.png')"
						mode="aspectFit"></image>
					<view class="item-title">分享</view>
				</view>
				<slot></slot>
			</view>
		</view>
	</su-fixed>

	<su-popup :show="showLogin == true" type="center" round="10" @close="showLogin = false" @open="showLogin = true">
		<view class="popup">

			<button class="texbut" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<!-- <image style="width: 100%;height: 136rpx;" src="https://mall.jiangxiaoxian.hschool.com.cn/loginBtnTwo.png"></image> -->
				<!-- 授权登录 -->
			</button>
		</view>
		<view style="margin: 0 auto;position: absolute;bottom: -90rpx;width: 100%;text-align: center;">
			<image style="width: 50rpx;height: 50rpx;" src="https://mall.jiangxiaoxian.hschool.com.cn/registerCancel.png"
				mode="aspectFill" @click="showLogin = false"></image>
		</view>
	</su-popup>
</template>

<script setup>
	/**
	 *
	 * 底部导航
	 *
	 * @property {String} bg 			 			- 背景颜色Class
	 * @property {String} ui 			 			- 自定义样式Class
	 * @property {Boolean} noFixed 		 			- 是否定位
	 * @property {Boolean} topRadius 		 		- 上圆角
	 *
	 *
	 */

	import {
		computed,
		ref,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showShareModal
	} from '@/sheep/hooks/useModal';
	import third from '@/sheep/api/third';
	import userApi from '@/sheep/api/user';

	const userInfo = computed(() => sheep.$store('user').userInfo);

	// 数据
	const state = reactive({});

	// 接收参数
	const props = defineProps({
		modelValue: {
			type: Object,
			default () {},
		},
		bg: {
			type: String,
			default: 'bg-white',
		},
		bgStyles: {
			type: Object,
			default () {},
		},
		ui: {
			type: String,
			default: '',
		},

		noFixed: {
			type: Boolean,
			default: false,
		},
		topRadius: {
			type: Number,
			default: 0,
		},
		collectIcon: {
			type: Boolean,
			default: true,
		},
		serviceIcon: {
			type: Boolean,
			default: true,
		},
		shareIcon: {
			type: Boolean,
			default: true,
		},
	});
	const elStyles = computed(() => {
		return {
			'border-top-left-radius': props.topRadius + 'rpx',
			'border-top-right-radius': props.topRadius + 'rpx',
			overflow: 'hidden',
		};
	});

	const tabbarheight = (e) => {
		uni.setStorageSync('tabbar', e);
	};
	async function onFavorite() {
		const {
			code
		} = await sheep.$api.user.favorite.do(props.modelValue.id);
		if (code === 1) {
			if (props.modelValue.favorite) {
				props.modelValue.favorite = 0;
			} else {
				props.modelValue.favorite = 1;
			}
		}
	}
	
	const goodShare = ref(false)
	function shareGoods() {
		console.log('shareGoods');
		showShareModal();
		// if(isLogin.value == true) {
		// 	goodShare.value = false;
		// 	showShareModal();
		// }else {
		// 	goodShare.value = true;
		// 	toLogin();
		// }
	}
	
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const showLogin = ref(false);
	const iv = ref('');
	const wxCode = ref('');
	const encryptedData = ref('');
	
	// 打开登录的弹框
	function toLogin() {
		console.log('toLogin——打开登录的弹框：', showLogin.value);
		showLogin.value = true;
		console.log('showLogin', showLogin.value);
	}
	// 关闭登录弹框
	function closeLogin() {
		console.log('closeLogin');
		showLogin.value = false;
	}
	// 打开登录的弹框
	function openLogin() {
		console.log('openLogin');
		showLogin.value = true;
	}
	// 使用微信手机号
	async function getPhoneNumber(e) {
		console.log('获取手机号', e, e.detail.errMsg);
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {} else {
			encryptedData.value = e.detail.encryptedData // 用于解密
			iv.value = e.detail.iv // 用于解密
			getCode()
			//    let result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
			// console.log('result', result);
			//    if (result) {
			//      sheep.$store('user').getInfo();
			//      // closeAuthModal();
			//   closeLogin();
			//    }
		}
	}
	// 获取code和sessionId
	function getCode() {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				wxCode.value = res.code
				// loginResult.value = res
				// getSessionId();
				Login();
			}
		})
	}
	// 登录接口
	function Login() {
		const session_id = uni.getStorageSync('sessionId')
		console.log('session_id', session_id);
		return new Promise(async (resolve, reject) => {
			const {
				code
			} = await third.wechat.wxLogin({
				platform: 'miniProgram',
				payload: encodeURIComponent(
					JSON.stringify({
						sessionId: session_id,
						iv: iv.value,
						encryptedData: encryptedData.value,
						code: wxCode.code,
					}),
				),
			});
			if (code === 1) {
				resolve(true);
				showLogin.value = false;
				if(goodShare.value == true) {
					shareGoods();
				}
				if(chatPhone.value == true) {
					getInfoUser();
				}
			}
			resolve(false);
		});
	}

	// const onChat = () => {
	//   sheep.$router.go('/pages/chat/index', {
	//     id: props.modelValue.id,
	//   });
	// };
	
	//获取平台客服电话
	function getInfoUser() {
	  userApi.profile().then(res=> {
		  if (res.code == 1){
			  console.log('获取个人信息：',res.data);
			  userInfo.value = res.data;
			  console.log('联系平台客服', userInfo.value.platform_contact_number);
			  onChat();
		  };
	  });
	}
	
	//联系平台客服
	const chatPhone = ref(false);
	function onChat() {
		if(isLogin.value == true) {
			chatPhone.value = false;
			console.log('联系平台客服', userInfo.value.platform_contact_number);
			wx.makePhoneCall({
				phoneNumber: userInfo.value.platform_contact_number,
				success: function() {
					console.log("拨打电话成功")
			
				},
				fail: function(err) {
					console.log("拨打电话失败", err)
				}
			})
		}else {
			chatPhone.value = true;
			toLogin();
		}
		
	}


	//返回首页
	function backHome() {
		uni.switchTab({
			// url: '/pages/index/index'
			url: '/pages/index/category'
		})
	}
</script>

<style lang="scss" scoped>
	.ui-tabbar-box {
		box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
	}

	.ui-tabbar {
		display: flex;
		height: 50px;
		background: #fff;

		.detail-tabbar-item {
			width: 90rpx;

			.item-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.item-title {
				font-size: 20rpx;
				font-weight: 500;
				line-height: 20rpx;
				margin-top: 12rpx;
			}
		}
	}
	
	.popup {
		background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginBack.png');
		background-size: 100%;
		width: 540rpx;
		height: 640rpx;
		display: flex;
		padding-bottom: 44rpx;
		flex-direction: column;
		align-items: baseline;
		justify-content: flex-end;
		padding-left: 73rpx;
		padding-right: 73rpx;
	
		.img_shouquan {
			position: absolute;
			width: 680rpx;
			height: 857rpx;
			left: -25rpx;
			top: -390rpx;
		}
	
	
		#txt2 {
			text-align: center;
			margin-top: 200rpx;
			font-size: 28rpx;
			color: #525252;
			margin-bottom: 60rpx;
			position: relative;
			font-weight: 500;
		}
	
		.texbut {
			width: 507rpx;
			height: 93rpx;
			border-radius: 16rpx;
			// background: #ffbd25;
			background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginBtnTwo.png');
			background-size: 100%;
			font-size: 34rpx;
			color: #3d3d3d;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			// margin: 0 auto;
		}
	}
	
</style>