zhongtuanLitterButler/pages/index/components/first-two.vue

<!-- 页面  -->
<template>
	<view>
		<view class="ss-flex flex-wrap">
			<view class="goods-box" v-for="item in pagination?.data" :key="item.id">
				<view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
					<view class="goods-img">
						<image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFit"></image>
					</view>
					<view class="goods-content">
						<view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
						<view class="goods-price" v-if="isLogin == true">￥{{ item.price[0] }}</view>
						<view class="goods-price" v-else @click.stop="toLogin">登录查看价格</view>
					</view>
				</view>
			</view>
		</view>
		<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>
		</su-popup>
	</view>


</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed,
		ref,
		reactive,
	} from 'vue';
	import third from '@/sheep/api/third';
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		activeMenu: [Number, String],
		pagination: Object,
	});
	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);
		uni.reLaunch({
			url: '/pages/index/login'
		});
		// 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;
			}
			resolve(false);
		});
	}
</script>

<style lang="scss" scoped>
	.goods-box {
		width: calc((100% - 20rpx) / 2);
		margin-bottom: 20rpx;

		.goods-img {
			width: 246rpx;
			height: 246rpx;
			border-radius: 10rpx 10rpx 0px 0px;
		}

		.goods-content {
			width: 100%;
			background: #ffffff;
			box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
			padding: 20rpx 0 32rpx 16rpx;
			box-sizing: border-box;
			border-radius: 0 0 10rpx 10rpx;

			.goods-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
			}

			.goods-price {
				font-size: 24rpx;
				font-family: OPPOSANS;
				font-weight: 500;
				color: #e1212b;
			}
		}

		&:nth-child(2n + 1) {
			margin-right: 20rpx;
		}
	}

	.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>