Browse Source

修改登录界面样式

wangyi/feature-20251022162725-启动页登录注册
Ethereal 1 month ago
parent
commit
0781fb1dd6
  1. 9
      .hbuilderx/launch.json
  2. 13
      manifest.json
  3. 6
      pages/start/Registration/Registration.vue
  4. 77
      pages/start/login/login.vue

9
.hbuilderx/launch.json

@ -0,0 +1,9 @@
{
"version" : "1.0",
"configurations" : [
{
"playground" : "standard",
"type" : "uni-app:app-ios"
}
]
}

13
manifest.json

@ -16,7 +16,9 @@
"autoclose" : true,
"delay" : 0
},
"modules" : {},
"modules" : {
"OAuth" : {}
},
/* */
"distribute" : {
/* */
@ -42,7 +44,14 @@
},
"ios" : {},
/* ios */
"sdkConfigs" : {}
"sdkConfigs" : {
"oauth" : {
"apple" : {},
"google" : {
"clientid" : "135"
}
}
}
}
},
/* SDK */

6
pages/start/Registration/Registration.vue

@ -11,7 +11,7 @@
</view>
<!-- Logo -->
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
<!-- <image class="logo" src="/static/logo.png" mode="aspectFit"></image> -->
<!-- 欢迎语 -->
<text class="welcome-text">欢迎来到 DeepChart</text>
@ -242,8 +242,8 @@ function goToLogin() {
font-weight: bold;
color: #333333;
margin-bottom: 60rpx;
text-align: left;
align-self: flex-start;
/* text-align: left; */
/* align-self: flex-start; */
}
.switch-container {
display: flex;

77
pages/start/login/login.vue

@ -14,10 +14,10 @@
</view>
<!-- Logo -->
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
<!-- <image class="logo" src="/static/logo.png" mode="aspectFit"></image> -->
<!-- 欢迎语 -->
<text class="welcome-text">登录</text>
<text class="welcome-text">登录DeepChart</text>
<!-- 邮箱/手机号切换 -->
<view class="switch-container">
@ -45,7 +45,11 @@
/>
<view v-else class="phone-input-container">
<view class="country-code-selector" @click="showCountryPicker">
<image class="country-flag-img" :src="selectedCountry.flag" mode="aspectFit"></image>
<image
class="country-flag-img"
:src="selectedCountry.flag"
mode="aspectFit"
></image>
<text class="country-code">{{ selectedCountry.code }}</text>
<text class="arrow-down"></text>
</view>
@ -97,7 +101,7 @@
<script setup>
import { ref } from "vue";
//
import countryList from './list.js';
import countryList from "./list.js";
const email = ref("");
const phone = ref("");
@ -106,24 +110,31 @@ const switchType = ref("Email"); // 默认是邮箱注册
const { safeAreaInsets } = uni.getSystemInfoSync();
// 使list.js
const countries = ref(countryList.list.map(item => ({
const countries = ref(
countryList.list.map((item) => ({
name: item.name,
code: `+${item.tel}`,
flag: item.flag,
short: item.short,
en: item.en
})));
en: item.en,
}))
);
//
const selectedCountry = ref(countries.value.find(country => country.short === 'CN') || countries.value[0]);
const selectedCountry = ref(
countries.value.find((country) => country.short === "CN") ||
countries.value[0]
);
//
function showCountryPicker() {
uni.showActionSheet({
itemList: countries.value.map(country => `${country.name} ${country.code}`),
itemList: countries.value.map(
(country) => `${country.name} ${country.code}`
),
success: function (res) {
selectedCountry.value = countries.value[res.tapIndex];
}
},
});
}
@ -157,7 +168,7 @@ function register() {
console.log("登录:", email.value);
}
if(switchType.value === "Phone"){
if (switchType.value === "Phone") {
//
if (!phone.value) {
uni.showToast({
@ -175,11 +186,48 @@ function register() {
function loginWithApple() {
// Apple
console.log("通过Apple登录");
uni.login({
provider: "apple",
success: function (loginRes) {
//
uni.getUserInfo({
provider: "apple",
success: function (info) {
// , info.authResult
console.log(info);
},
});
},
fail: function (err) {
//
// err.code`(code)`
console.log(err);
},
});
}
function loginWithGoogle() {
// Google
console.log("通过Google登录");
uni.login({
provider: "google",
success: function (loginRes) {
//
uni.getUserInfo({
provider: "google",
success: function (info) {
// , info.authResult
console.log(info);
},
});
},
fail: function (err) {
//
// err.code
console.log(err);
},
});
}
function goToRegistration() {
@ -194,12 +242,11 @@ function onPhoneInput(e) {
const value = e.detail.value;
// 使 isNaN
if (isNaN(value)) {
phone.value = '';
phone.value = "";
} else {
phone.value = value;
}
}
</script>
<style scoped>
@ -258,8 +305,8 @@ function onPhoneInput(e) {
font-weight: bold;
color: #333333;
margin-bottom: 60rpx;
text-align: left;
align-self: flex-start;
/* text-align: left; */
/* align-self: flex-start; */
}
.switch-container {
display: flex;

Loading…
Cancel
Save