152 lines
3.5 KiB
Vue
152 lines
3.5 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<view class="content">
|
|
<view class="title">欢迎注册小鹿超市</view>
|
|
</view>
|
|
<view class="buttom">
|
|
<view class="loginType">
|
|
<view class="accountLogin item">
|
|
<input v-model="username" class="input" placeholder="请输入手机号" type="text"/>
|
|
<input v-model="password" class="input" placeholder="请输入密码" type="password"/>
|
|
<button :disabled="isLogin" class="loginBtn" @click="register">
|
|
注册
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="hint">
|
|
注册代表同意
|
|
<text class="link">小鹿超市用户协议、隐私政策，</text>
|
|
并授权使用您的小鹿超市账号信息（如昵称、头像、收获地址）以便您统一管理
|
|
</view>
|
|
<view class="buttons">
|
|
<button class="otherBtn" @click="goToLogin">账号密码登录</button>
|
|
<!-- 添加空白间距 -->
|
|
<div style="width: 20px; display: inline-block;"></div>
|
|
<button class="otherBtn" @click="goToWechatLogin">微信登录</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin: false,
|
|
username: '',
|
|
password: ''
|
|
};
|
|
},
|
|
methods: {
|
|
async register() {
|
|
this.isLogin = true;
|
|
try {
|
|
const result = await this.$u.api.postRegister({
|
|
phone: this.username,
|
|
password: this.password
|
|
});
|
|
console.log('注册成功:', result);
|
|
// 路由跳转至登录
|
|
uni.reLaunch({
|
|
url: '/pages/loginh5/loginh5',
|
|
});
|
|
} catch (error) {
|
|
console.error('登录失败:', error);
|
|
} finally {
|
|
this.isLogin = false;
|
|
}
|
|
},
|
|
goToLogin() {
|
|
uni.navigateTo({
|
|
url: '/pages/loginh5/loginh5',
|
|
});
|
|
},
|
|
goToWechatLogin() {
|
|
uni.navigateTo({
|
|
url: '/pages/login/login',
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 样式略有修改以适应账号密码登录的布局
|
|
.wrap {
|
|
font-size: 28rpx;
|
|
|
|
.content {
|
|
width: 600rpx;
|
|
margin: 80rpx auto 0;
|
|
|
|
.title {
|
|
text-align: left;
|
|
font-size: 60rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
}
|
|
|
|
.otherBtn {
|
|
width: 240rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
background-color: #ccc;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
border: none;
|
|
border-radius: 10rpx;
|
|
cursor: pointer;
|
|
background-color: #1aad19; // 更改微信登录按钮的背景颜色
|
|
}
|
|
|
|
.buttom {
|
|
.loginType {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20rpx;
|
|
|
|
.accountLogin {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.input {
|
|
width: 400rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
border: 1px solid #ccc;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.loginBtn {
|
|
width: 400rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background-color: rgb(83, 194, 64);
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
border-radius: 10rpx;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
padding: 20rpx 40rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
|
|
.link {
|
|
color: rgb(83, 194, 64);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|