feat: 优化代码
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="login_warp">
|
||||
<view class="login_logo_warp">
|
||||
<view style="text-align: center;">
|
||||
<up-image src="/static/logo.png" width="90" height="118" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
</view>
|
||||
<!-- <view style="margin-top: 20rpx;">
|
||||
<up-image src="/static/logo_z.png" width="100" height="40" bgColor="#f1f6ff00"></up-image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="login_info">
|
||||
<view class="login_info_item">
|
||||
<up-input placeholder="请输入手机号/账户名称" border="surround" v-model="form.name" :customStyle="inputCss"
|
||||
@change="checkNameParam"></up-input>
|
||||
</view>
|
||||
<!-- 密码登录 -->
|
||||
<view class="login_info_item" v-if="loginWay === 'password'">
|
||||
<up-input placeholder="请输入密码" border="surround" v-model="form.password" :customStyle="inputCss"
|
||||
:type="isShow ? 'text' : 'password'" @change="checkParam">
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="isShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"
|
||||
@click="isShow = false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00"
|
||||
@click="isShow = true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<!-- 验证码登录 -->
|
||||
<view class="login_info_item" v-else>
|
||||
<up-input placeholder="请输入验证码" border="surround" v-model="form.code" :customStyle="inputCss">
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<view v-if="countdown" class="code-warp">
|
||||
<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
|
||||
<text style="margin-left: 10rpx;">s</text>
|
||||
</view>
|
||||
<view v-else @click="getMobileCode" class="code_msg">
|
||||
获取验证码
|
||||
</view>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
|
||||
<view class="login_comm_but login_comm_but_yes" @click="loginFun">
|
||||
<text style="margin-left: 10rpx;">登录</text>
|
||||
</view>
|
||||
<view class="cut_way_warp">
|
||||
<view v-if="loginWay === 'password'" @click="loginWay = 'code'">验证码登录</view>
|
||||
<view v-if="loginWay === 'code'" @click="loginWay = 'password'">密码登录登录</view>
|
||||
<view @click="jumpRegister">注册</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="policy_warp">
|
||||
<up-checkbox name="isCheck" usedAlone v-model:checked="isPolicy" shape="circle" activeColor="#7934F6" size="19"
|
||||
iconSize="18">
|
||||
<template #label>
|
||||
<text>已阅读并同意</text>
|
||||
<text class="policy_a_warp" @click="jumpUserAgreement">《服务协议》</text>
|
||||
<text>、</text>
|
||||
<text class="policy_a_warp" @click="jumpPrivacyAgreement">《隐私政策》</text>
|
||||
<text>、</text>
|
||||
<text class="policy_a_warp" @click="jumpProductAgreement">《售后保障协议》</text>
|
||||
</template>
|
||||
</up-checkbox>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import InputCodeComm from '@/components/code-comm/code-comm.vue';
|
||||
import { SMS_TYPE } from '@/utils/enumUtils.js';
|
||||
import { getUserList } from '@/api/common.js';
|
||||
import { loginbysms, loginbypw } from '@/api/auth.js';
|
||||
import { setStorageFun, TOKEN_NAME, USER_KEY, USER_DATA, USER_LOGIN_TIME } from '@/utils/auth.js';
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InputCodeComm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: null,
|
||||
password: null,
|
||||
code: null
|
||||
},
|
||||
inputCss: {
|
||||
"height": '80rpx',
|
||||
"background": "#F3F3F3FF",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
loginWay: 'password',
|
||||
isShow: false,// 是否显示
|
||||
isPolicy: false,// 是否同意
|
||||
countdown: false,// 清空倒计时
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpHome() {
|
||||
// const sysPlatform = getCurrentSysPlatform();
|
||||
// if(sysPlatform === "android"){
|
||||
// uni.switchTab({
|
||||
// url: '/pages/message/message',
|
||||
// })
|
||||
// }else{
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
// }
|
||||
|
||||
},
|
||||
async loginFun() {
|
||||
const then = this;
|
||||
const form = this.form;
|
||||
const params = {}
|
||||
if (!this.isPolicy) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请阅读完相关协议以及政策，并且勾选同意选项",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let response = {};
|
||||
if (this.loginWay === 'password') {
|
||||
params.mobile = form.name;
|
||||
params.password = CryptoJS.MD5(form.password).toString();
|
||||
response = await loginbypw(params);
|
||||
} else {
|
||||
params.mobile = form.name;
|
||||
params.smsCode = form.code;
|
||||
response = await loginbysms(params);
|
||||
}
|
||||
const data = response.data;
|
||||
setStorageFun(TOKEN_NAME, data.token);
|
||||
// 用于无感登录
|
||||
setStorageFun(USER_KEY, '');
|
||||
const userInfo = {
|
||||
avatar: data.avatarUrl,
|
||||
name: data.name,
|
||||
userId: data.userId,
|
||||
grade: data.grade,
|
||||
inviteCode: data.inviteCode,
|
||||
};
|
||||
setStorageFun(USER_DATA, userInfo);
|
||||
// 当前登录得时间戳
|
||||
let currentTimeStamp = new Date().getTime();
|
||||
setStorageFun(USER_LOGIN_TIME, currentTimeStamp);
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: response.msg,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
then.jumpHome();
|
||||
}, 2000);
|
||||
},
|
||||
checkNameParam(val) {
|
||||
// console.log("val",val);
|
||||
},
|
||||
checkParam(val) {
|
||||
// console.log("val",val);
|
||||
},
|
||||
/**
|
||||
* 获取手机验证码
|
||||
*/
|
||||
async getMobileCode() {
|
||||
const form = this.form;
|
||||
if (!form.name) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入账号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.countdown = true;
|
||||
|
||||
const params = {
|
||||
mobile: form.name,
|
||||
type: SMS_TYPE.LOGIN,
|
||||
}
|
||||
const response = await getUserList(params);
|
||||
console.log("responseresponseresponse", response);
|
||||
if (response && response.bizcode === 100) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: response.msg,
|
||||
});
|
||||
} else {
|
||||
this.countdown = false;
|
||||
}
|
||||
},
|
||||
jumpRegister() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login_package/register/register",
|
||||
})
|
||||
},
|
||||
// 用户协议
|
||||
jumpUserAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_user_agreement/mine_user_agreement?backPath=login'
|
||||
})
|
||||
},
|
||||
// 隐私协议
|
||||
jumpPrivacyAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_privacy_agreement/mine_privacy_agreement?backPath=login'
|
||||
})
|
||||
},
|
||||
// 售后保障协议
|
||||
jumpProductAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_product_agreement/mine_product_agreement?backPath=login'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login_warp {
|
||||
height: calc(100vh - 460rpx);
|
||||
padding: 250rpx 50rpx 0;
|
||||
}
|
||||
|
||||
.login_logo_warp {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login_info {
|
||||
margin-top: 60rpx;
|
||||
|
||||
.login_info_item {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.code_msg {
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
|
||||
.login_comm_but {
|
||||
background: #CCCCCC;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
padding: 28rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login_comm_but_yes {
|
||||
background: $app-bt-bj;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cut_way_warp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="news_warp">
|
||||
<Header leftTitle="商学院" left-path-type="switchTab" left-path="/pages/mine/mine"
|
||||
style="background-color: #FFFFFF;" />
|
||||
<view class="news_content_warp">
|
||||
<view class="heder_">
|
||||
<view v-for="item in titleList" :key="item.key"
|
||||
:class="form.type === item.key ? 'heder_item_sel heder_item' : 'heder_item'" @click="headerClick(item)">
|
||||
{{ item.value }}
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 20rpx 0;">
|
||||
<up-swiper :list="swiperList" height="120" radius="10" @change="e => currentNum = e.current"
|
||||
bgColor="#ffffff00">
|
||||
<template #indicator>
|
||||
<view class="indicator-num">
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_">
|
||||
<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:calc(100vh - 560rpx)">
|
||||
<up-input placeholder="搜索关键字" v-model="form.keywork" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 22px;color: #909399" :customStyle="inputCss">
|
||||
<template #suffix>
|
||||
<view @click="searchTap" class="search_but">
|
||||
搜索
|
||||
</view>
|
||||
</template>
|
||||
</up-input>
|
||||
|
||||
<view class="news_content_item" v-for="item in newsList" :key="item.id" v-if="newsList && newsList.length !== 0"
|
||||
@click="jumpInfo(item)">
|
||||
<view class="news_content_item_warp">
|
||||
<view class="news_content_item_title">{{ item.title }}</view>
|
||||
<view v-html="item.subTitle" class="news_content_item_content"></view>
|
||||
<view class="news_content_item_info">
|
||||
<view>{{ formatDate(item.ctdate) }}</view>
|
||||
<view class="browses_">
|
||||
<view>
|
||||
<up-image src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view style="margin-left: 8rpx;">{{ item.browses }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<up-image :src="item.coverImage" width="100" height="100" bgColor="#f1f6ff00" radius="8"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">还未发布新闻哦～</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/header.vue';
|
||||
import { NEWS_TYPE, APP_PAGE_TYPE } from '@/utils/enumUtils.js';
|
||||
import { getCarouselImage } from '@/api/common.js';
|
||||
import { getNewsList } from '@/api/news.js';
|
||||
import { formatDate } from '@/utils/index.js'
|
||||
|
||||
export default {
|
||||
components: { Header },
|
||||
data() {
|
||||
return {
|
||||
titleList: NEWS_TYPE,
|
||||
swiperList: [],
|
||||
currentNum: 0,
|
||||
form: {
|
||||
keywork: null,
|
||||
type: 1,
|
||||
page: 1,
|
||||
pageSize: 15,
|
||||
},
|
||||
inputCss: {
|
||||
"height": '68rpx',
|
||||
"background": "#FFFFFF",
|
||||
"border-radius": "16rpx",
|
||||
"border": "0rpx",
|
||||
"padding": "0 0 0 16px",
|
||||
},
|
||||
newsList: [],
|
||||
newsListTotal: 0,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getCarouselImage();
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
formatDate,
|
||||
// 查询轮播图
|
||||
async getCarouselImage() {
|
||||
const params = {
|
||||
pageUi: APP_PAGE_TYPE.NEWS,
|
||||
}
|
||||
const resp = await getCarouselImage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || [];
|
||||
this.swiperList = data.length !== 0 ? data.map(obj => obj.carouselImage) : [];
|
||||
}
|
||||
},
|
||||
headerClick(item) {
|
||||
this.form.type = item.key;
|
||||
this.searchTap();
|
||||
},
|
||||
|
||||
// 搜索
|
||||
searchTap() {
|
||||
this.newsList = [];
|
||||
this.form.page = 1;
|
||||
this.loadData();
|
||||
},
|
||||
// 加载数据的方法
|
||||
async loadData() {
|
||||
if (this.loading) return; // 如果正在加载，则不重复加载
|
||||
this.loading = true; // 设置加载状态为true
|
||||
try {
|
||||
const newData = await this.fetchData(this.form.page, this.form.pageSize);
|
||||
if (newData.entitys && newData.entitys.length !== 0) {
|
||||
this.newsList = [...this.newsList, ...newData.entitys]; // 将新数据添加到列表中
|
||||
this.form.page++;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
} finally {
|
||||
this.loading = false; // 设置加载状态为false
|
||||
}
|
||||
},
|
||||
// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
|
||||
async fetchData(page, pageSize) {
|
||||
const form = this.form;
|
||||
const params = {
|
||||
page,
|
||||
pageSize,
|
||||
type: form.type,
|
||||
}
|
||||
if (form.keywork) {
|
||||
params.keywork = form.keywork;
|
||||
}
|
||||
const data = await getNewsList(params);
|
||||
if (data && data.bizcode === 100 && data.data) {
|
||||
return data.data
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当滚动到底部时触发的方法
|
||||
loadMore() {
|
||||
this.loadData(); // 加载更多数据
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到详情
|
||||
* @param {Object} item
|
||||
*/
|
||||
jumpInfo(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login_package/news_info/news_info?id=' + item.id,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news_warp {
|
||||
overflow: hidden;
|
||||
|
||||
.news_content_warp {
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.heder_ {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.heder_item {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.heder_item_sel {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.content_ {
|
||||
padding: 30rpx;
|
||||
background: $app-bj;
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
|
||||
// height: calc(100vh - 560rpx);
|
||||
// overflow: auto;
|
||||
.search_but {
|
||||
line-height: 68rpx;
|
||||
background: $app-bt-bj;
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.news_content_item {
|
||||
background: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.news_content_item_warp {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.news_content_item_title {
|
||||
font-weight: 800;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.news_content_item_content {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.news_content_item_info {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
|
||||
.browses_ {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="news_info_warp">
|
||||
<Header leftTitle="" left-path-type="navigateTo" left-path="/pages/login_package/news/news"
|
||||
style="background-color: #FFFFFF;" />
|
||||
<view class="news_info_header_warp">
|
||||
<view class="title_">{{ newsDetail.title }}</view>
|
||||
<view class="avatar_">
|
||||
<view>
|
||||
<up-image :src="newsDetail.avatar_url" width="40" height="40" bgColor="#f1f6ff00" shape="circle"></up-image>
|
||||
</view>
|
||||
<view style="margin-left: 12rpx;">{{ newsDetail.name }}</view>
|
||||
</view>
|
||||
<view class="time_">
|
||||
<view>{{ formatDate(newsDetail.ctdate) }}</view>
|
||||
<view class="browses_">
|
||||
<view>
|
||||
<up-image src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view style="margin-left: 8rpx;">{{ newsDetail.browses }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="news_info_fg_warp"></view>
|
||||
<view class="news_info_content_warp" v-html="newsDetail.content"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/header.vue';
|
||||
import { getNewsDetail } from '@/api/news.js';
|
||||
import { formatDate } from '@/utils/index.js';
|
||||
|
||||
export default {
|
||||
components: { Header },
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
newsDetail: {}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const id = option.id;
|
||||
if (id && id !== "null") {
|
||||
this.id = id;
|
||||
this.fetchData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate,
|
||||
async fetchData() {
|
||||
const id = this.id;
|
||||
const params = {
|
||||
id,
|
||||
}
|
||||
const resp = await getNewsDetail(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
this.newsDetail = resp.data || {};
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news_info_warp {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news_info_header_warp {
|
||||
padding: 30rpx;
|
||||
|
||||
.title_ {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.avatar_ {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.time_ {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.browses_ {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news_info_fg_warp {
|
||||
height: 10rpx;
|
||||
background-color: $app-bj;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.news_info_content_warp {
|
||||
padding: 30rpx;
|
||||
height: calc(100vh - 524rpx);
|
||||
overflow: auto;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="register_warp">
|
||||
<view class="register_title_warp">注册</view>
|
||||
<view class="register_ifo_warp">
|
||||
<view class="register_info_item">
|
||||
<up-input placeholder="请输入手机号" border="surround" v-model="form.mobile" :customStyle="inputCss"></up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input placeholder="请输入验证码" border="surround" v-model="form.smsCode" :customStyle="inputCss">
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<view v-if="countdown" class="code-warp">
|
||||
<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
|
||||
<text style="margin-left: 10rpx;">s</text>
|
||||
</view>
|
||||
<view v-else @click="getMobileCode" class="code_msg">
|
||||
获取验证码
|
||||
</view>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input placeholder="请输入登录密码" border="surround" v-model="form.loginPassword" :customStyle="inputCss"
|
||||
:type="loginPasswordIsShow ? 'text' : 'password'">
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="loginPasswordIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"
|
||||
@click="loginPasswordIsShow = false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00"
|
||||
@click="loginPasswordIsShow = true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input placeholder="再次输入登录密码" border="surround" v-model="form.loginPassword2" :customStyle="inputCss"
|
||||
:type="loginPassword2IsShow ? 'text' : 'password'">
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="loginPassword2IsShow" src="/static/login/show.png" width="20" height="20"
|
||||
bgColor="#f1f6ff00" @click="loginPassword2IsShow = false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00"
|
||||
@click="loginPassword2IsShow = true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<!-- <view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="请输入交易密码"
|
||||
border="surround"
|
||||
v-model="form.transactionCode"
|
||||
:customStyle="inputCss"
|
||||
:type="transactionCodeIsShow ?'text':'password'"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="transactionCodeIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view> -->
|
||||
<view class="register_info_item">
|
||||
<up-input placeholder="推荐码" border="surround" v-model="form.referralCode" :customStyle="inputCss"></up-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login_comm_but login_comm_but_yes" @click="registerFun" :loading="butLoading">
|
||||
注册
|
||||
</view>
|
||||
<view class="policy_warp">
|
||||
<up-checkbox name="isCheck" usedAlone v-model:checked="isPolicy" shape="circle" activeColor="#7934F6" size="19"
|
||||
iconSize="18">
|
||||
<template #label>
|
||||
<text>已阅读并同意</text>
|
||||
<text class="policy_a_warp" @click="jumpUserAgreement">《服务协议》</text>
|
||||
<text>、</text>
|
||||
<text class="policy_a_warp" @click="jumpPrivacyAgreement">《隐私政策》</text>
|
||||
<text>、</text>
|
||||
<text class="policy_a_warp" @click="jumpProductAgreement">《售后保障协议》</text>
|
||||
</template>
|
||||
</up-checkbox>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SMS_TYPE } from '@/utils/enumUtils.js';
|
||||
import { getUserList } from '@/api/common.js';
|
||||
import { register } from '@/api/auth.js';
|
||||
import { setStorageFun, TOKEN_NAME, USER_KEY, USER_DATA, USER_LOGIN_TIME } from '@/utils/auth.js';
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
mobile: null,
|
||||
smsCode: null,// 验证码
|
||||
loginPassword: null,
|
||||
loginPassword2: null,
|
||||
transactionCode: null,// 交易密码
|
||||
referralCode: null,// 推荐码
|
||||
},
|
||||
inputCss: {
|
||||
"height": '80rpx',
|
||||
"background": "#F3F3F3FF",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
countdown: false,// 清空倒计时
|
||||
loginPasswordIsShow: false,
|
||||
loginPassword2IsShow: false,
|
||||
transactionCodeIsShow: false,// 交易密码
|
||||
isPolicy: false,
|
||||
butLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async registerFun() {
|
||||
const form = this.form;
|
||||
if (!form.mobile) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入手机号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!form.smsCode) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入验证码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!form.loginPassword) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入登录密码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!form.loginPassword2) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入二次确认密码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (form.loginPassword !== form.loginPassword2) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "两次输入的登录密码不一致",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!form.referralCode) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入推荐码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.isPolicy) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请阅读完相关协议以及政策，并且勾选同意选项",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.butLoading = true;
|
||||
const params = {
|
||||
mobile: form.mobile,
|
||||
smsCode: form.smsCode,
|
||||
password: CryptoJS.MD5(form.loginPassword).toString(),
|
||||
inviteCode: form.referralCode,
|
||||
}
|
||||
const resp = await register(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
setStorageFun(TOKEN_NAME, data.token);
|
||||
// 用于无感登录
|
||||
setStorageFun(USER_KEY, '');
|
||||
const userInfo = {
|
||||
avatar: data.avatarUrl,
|
||||
name: data.name,
|
||||
userId: data.userId,
|
||||
grade: data.grade,
|
||||
inviteCode: data.inviteCode,
|
||||
};
|
||||
setStorageFun(USER_DATA, userInfo);
|
||||
// 当前登录得时间戳
|
||||
let currentTimeStamp = new Date().getTime();
|
||||
setStorageFun(USER_LOGIN_TIME, currentTimeStamp);
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: resp.msg,
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
}, 2000);
|
||||
}
|
||||
this.butLoading = false;
|
||||
|
||||
},
|
||||
/**
|
||||
* 获取手机验证码
|
||||
*/
|
||||
async getMobileCode() {
|
||||
const form = this.form;
|
||||
if (!form.mobile) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入手机号码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.countdown = true;
|
||||
|
||||
const params = {
|
||||
mobile: form.mobile,
|
||||
type: SMS_TYPE.REGISTER,
|
||||
}
|
||||
const response = await getUserList(params);
|
||||
if (response && response.bizcode === 100) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: response.msg,
|
||||
});
|
||||
} else {
|
||||
this.countdown = false;
|
||||
}
|
||||
},
|
||||
// 用户协议
|
||||
jumpUserAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_user_agreement/mine_user_agreement?backPath=register'
|
||||
})
|
||||
},
|
||||
// 隐私协议
|
||||
jumpPrivacyAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_privacy_agreement/mine_privacy_agreement?backPath=register'
|
||||
})
|
||||
},
|
||||
// 售后保障协议
|
||||
jumpProductAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_product_agreement/mine_product_agreement?backPath=login'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.register_warp {
|
||||
height: calc(100vh - 280rpx);
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.register_title_warp {
|
||||
font-weight: bold;
|
||||
font-size: 62rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.register_ifo_warp {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.register_info_item {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user