From 8dd9360a0e4cfd22ea9e261bec3821eff3f57fe8 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期二, 12 八月 2025 10:10:07 +0800
Subject: [PATCH] add：分享功能
---
pages/login/login.vue | 284 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 211 insertions(+), 73 deletions(-)
diff --git a/pages/login/login.vue b/pages/login/login.vue
index a926a9a..8599519 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -2,12 +2,12 @@
<view class="login-page">
<view class="top-bar">
<text class="top-left">帮助</text>
- <text class="top-right" @click="skipLogin">跳过</text>
+ <text class="top-right" @click="skipLogin">游客模式</text>
</view>
<view class="logo-container">
- <text class="app-name">光影</text>
- <text class="subtitle">登录后，体验更多功能</text>
+ <text class="app-name">影游四方</text>
+ <text class="subtitle">发现精彩电影世界</text>
</view>
<view class="phone-number">
@@ -18,16 +18,46 @@
<!-- <up-button type="primary" class="login-btn" @click="quickLogin" shape="circle">一键登录</up-button> -->
<!-- <up-button type="info" class="wechat-btn" @click="wechatLogin" icon="weixin-fill" iconColor="#00c800"
text="微信登录" shape="circle"></up-button> -->
- <up-button v-if="wxUser.user" type="info" class="login-btn" @click="wechatLogin" icon="weixin-fill"
- iconColor="#00c800" text="微信登录" shape="circle"></up-button>
- <up-button v-else type="info" class="login-btn" open-type="getPhoneNumber"
- @getphonenumber="handleGetPhoneNumber" icon="weixin-fill" iconColor="#00c800" text="微信登录"
- shape="circle"></up-button>
+ <up-button
+ type="primary"
+ class="guest-btn"
+ @click="skipLogin"
+ text="立即体验"
+ shape="circle"
+ ></up-button>
+<!-- <up-button v-if="wxUser.user" type="info" class="login-btn" @click="wechatLogin" icon="weixin-fill"-->
+<!-- iconColor="#00c800" text="微信登录" shape="circle"></up-button>-->
+<!-- <up-button v-else type="info" class="login-btn" open-type="getPhoneNumber"-->
+<!-- @getphonenumber="handleGetPhoneNumber" icon="weixin-fill" iconColor="#00c800" text="微信登录"-->
+<!-- shape="circle"></up-button>-->
+ <up-button
+ v-if="wxUser && wxUser.user"
+ type="primary"
+ class="login-btn"
+ @click="showWechatLoginConfirm"
+ icon=""
+ iconColor="#00c800"
+ text="手机号快捷登录"
+ shape="circle"
+ custom-style="background: #ff2d4a; color: white;"
+ ></up-button>
+ <up-button
+ v-else
+ type="primary"
+ class="login-btn"
+ open-type="getPhoneNumber"
+ @getphonenumber="handleGetPhoneNumber"
+ icon=""
+ iconColor="#00c800"
+ text="手机号快捷登录"
+ shape="circle"
+ custom-style="background: #ff2d4a; color: white;"
+ ></up-button>
</view>
- <view class="other-login" @click="otherLogin">
- <text>其他登录方式 ></text>
- </view>
+<!-- <view class="other-login" @click="otherLogin">-->
+<!-- <text>其他登录方式 ></text>-->
+<!-- </view>-->
<view class="agreement">
<view @click="toggleCheck">
@@ -61,41 +91,89 @@
isChecked.value = !isChecked.value
}
-const wxUser = ref<WxUser | null>(null)
+const wxUser = ref<WxUser>({
+ user: null,
+ phoneNumber: '',
+ purePhoneNumber: ''
+});
+// const wechatLogin = () => {
+// if (!isChecked.value) {
+// uni.showToast({ title: '请先同意协议', icon: 'none' });
+// return;
+// }
+// // 微信登录
+// uni.login({
+// "provider": "weixin",
+// "onlyAuthorize": true, // 微信登录仅请求授权认证
+// success: async function (event:any) {
+// const { code } = event
+// $message.showLoading();
+// const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
+// if (resp && resp.data) {
+// // that.$forceUpdate()
+// uni.reLaunch({
+// url: '/pages/home/home'
+// })
+// }
+// $message.hideLoading();
+// },
+// fail: function (err:any) {
+// // 登录授权失败
+// // err.code是错误码
+// }
+// })
+//
+//
+// };
const wechatLogin = () => {
- if (!isChecked.value) {
- uni.showToast({ title: '请先同意协议', icon: 'none' });
- return;
+ uni.login({
+ provider: "weixin",
+ onlyAuthorize: true,
+ success: async function (event:any) {
+ $message.showLoading();
+ const { code } = event;
+ const resp = await userStore.loginwx({
+ code,
+ phoneNumber: wxUser.value?.phoneNumber,
+ purePhoneNumber: wxUser.value?.purePhoneNumber
+ });
+
+ if (resp?.data) {
+ uni.reLaunch({ url: '/pages/home/home' });
+ }
+ $message.hideLoading();
+ },
+ fail: function (err:any) {
+ console.error('登录失败:', err);
}
- // 微信登录
- uni.login({
- "provider": "weixin",
- "onlyAuthorize": true, // 微信登录仅请求授权认证
- success: async function (event:any) {
- const { code } = event
- $message.showLoading();
- const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
- if (resp && resp.data) {
- // that.$forceUpdate()
- uni.reLaunch({
- url: '/pages/home/home'
- })
- }
- $message.hideLoading();
- },
- fail: function (err:any) {
- // 登录授权失败
- // err.code是错误码
- }
- })
-
-
+ });
};
-onShow(() => {
- console.log('页面显示')
- getOpenId()
-});
+// onShow(() => {
+// console.log('页面显示')
+// getOpenId()
+// });
+
+const showWechatLoginConfirm = () => {
+ if (!isChecked.value) {
+ uni.showToast({ title: '请先同意协议', icon: 'none' });
+ return;
+ }
+
+ uni.showModal({
+ title: '授权提示',
+ content: '需要使用手机号登录才能获得完整服务？',
+ confirmText: '确认登录',
+ cancelText: '暂不需要',
+ success: (res) => {
+ if (res.confirm) {
+ wechatLogin();
+ }
+ }
+ });
+};
+
+
const getOpenId = () => {
uni.login({
"provider": "weixin",
@@ -148,13 +226,19 @@
}
})
if (code == 0) {
- debugger;
- // 获取手机号码后，实现微信登录
- const phoneNumber = data.phone_info.phoneNumber;
- const purePhoneNumber = data.phone_info.purePhoneNumber;
- wxUser.value.phoneNumber = phoneNumber
- wxUser.value.purePhoneNumber = purePhoneNumber
- handleWechatClick()
+ wxUser.value = {
+ ...wxUser.value,
+ phoneNumber: data.phone_info.phoneNumber,
+ purePhoneNumber: data.phone_info.purePhoneNumber,
+ user: {} // 确保user不为null
+ };
+ wechatLogin();
+ // // 获取手机号码后，实现微信登录
+ // const phoneNumber = data.phone_info.phoneNumber;
+ // const purePhoneNumber = data.phone_info.purePhoneNumber;
+ // wxUser.value.phoneNumber = phoneNumber
+ // wxUser.value.purePhoneNumber = purePhoneNumber
+ // handleWechatClick()
} else {
}
@@ -163,31 +247,52 @@
}
}
+// const handleWechatClick = () => {
+// uni.login({
+// "provider": "weixin",
+// "onlyAuthorize": true, // 微信登录仅请求授权认证
+// success: async function (event: any) {
+// const { code } = event
+// $message.showLoading();
+// console.log("获取到的微信用户信息是：", wxUser.value)
+// const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
+// if (resp && resp.data) {
+// // $forceUpdate()
+// uni.reLaunch({
+// url: '/pages/home/home'
+// })
+// }
+// $message.hideLoading();
+// },
+// fail: function (err: any) {
+// // 登录授权失败
+// // err.code是错误码
+// }
+// })
+// }
+
const handleWechatClick = () => {
- uni.login({
- "provider": "weixin",
- "onlyAuthorize": true, // 微信登录仅请求授权认证
- success: async function (event: any) {
- const { code } = event
- $message.showLoading();
- console.log("获取到的微信用户信息是：", wxUser.value)
- const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
- if (resp && resp.data) {
- // $forceUpdate()
- uni.reLaunch({
- url: '/pages/home/home'
- })
- }
- $message.hideLoading();
- },
- fail: function (err: any) {
- // 登录授权失败
- // err.code是错误码
- }
- })
-}
+ uni.login({
+ provider: "weixin",
+ onlyAuthorize: true,
+ success: async function (event: any) {
+ $message.showLoading();
+ const resp = await userStore.loginwx({
+ code: event.code,
+ phoneNumber: wxUser.value?.phoneNumber,
+ purePhoneNumber: wxUser.value?.purePhoneNumber
+ });
-
+ if (resp?.data) {
+ uni.reLaunch({ url: '/pages/home/home' });
+ }
+ $message.hideLoading();
+ },
+ fail: function (err: any) {
+ console.error('登录失败:', err);
+ }
+ });
+};
const otherLogin = () => {
// 跳转到其他登录方式页面
@@ -195,7 +300,8 @@
};
const skipLogin = () => {
- uni.switchTab({ url: '/pages/home/index' });
+ // uni.switchTab({ url: '/pages/home/home' });gai
+ uni.reLaunch({ url: '/pages/home/home' });
};
@@ -204,6 +310,26 @@
url: `/sub-pages/protocol/protocol?title=${encodeURIComponent(title)}`
});
};
+
+defineExpose({
+ onShareAppMessage() {
+ return {
+ title: '影视地标推荐',
+ path: '/pages/home/home',
+ imageUrl: '', // 可以设置默认分享图片
+ desc: '发现全球影视拍摄地，探索电影背后的故事'
+ }
+ },
+ // 分享到朋友圈
+ onShareTimeline() {
+ return {
+ title: '影视地标推荐',
+ query: '',
+ imageUrl: '', // 可以设置默认分享图片
+ desc: '发现全球影视拍摄地，探索电影背后的故事'
+ }
+ }
+})
</script>
<style lang="scss" scoped>
@@ -262,6 +388,18 @@
background-color: #1c1c1e;
color: #fff;
}
+
+ .guest-btn {
+ background-color: #ff2d4a;
+ border: none;
+ color: #fff;
+ margin-bottom: 20rpx;
+ }
+
+ .login-btn {
+ background-color: #1c1c1e;
+ color: #fff;
+ }
}
.other-login {
--
Gitblit v1.9.3