feat(登录)
This commit is contained in:
parent
c6ba320a80
commit
4b1de8bdac
|
@ -1,100 +1,173 @@
|
|||
<template>
|
||||
<pb-layout :leftIcon="''" navbar="inner" :bgStyle="{ backgroundColor: '#fff' }">
|
||||
<view class="login-module">
|
||||
<view>
|
||||
{{ title }}
|
||||
</view>
|
||||
<uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind">
|
||||
<uni-forms-item name="mobile">
|
||||
<uni-easyinput
|
||||
placeholder="请输入手机号"
|
||||
v-model="state.model.mobile"
|
||||
:inputBorder="false"
|
||||
type="number"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="code">
|
||||
<uni-easyinput
|
||||
placeholder="验证码"
|
||||
v-model="state.model.code"
|
||||
:inputBorder="false"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
>
|
||||
<template #right>
|
||||
<button class="ss-reset-button code-btn code-btn-start" @tap="smsLoginSubmit">
|
||||
获取验证码
|
||||
</button>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">登录</button>
|
||||
</view>
|
||||
</pb-layout>
|
||||
<pb-layout :leftIcon="''" navbar="inner" :bgStyle="{ backgroundColor: '#fff' }">
|
||||
<view class="login-module ss-p-x-30">
|
||||
<view class="login-title ss-font-56 ss-m-b-72">
|
||||
{{ title }}
|
||||
</view>
|
||||
<uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind">
|
||||
<uni-forms-item name="mobile">
|
||||
<uni-easyinput :styles="state.inputStyle" trim="all" placeholder="请输入手机号" v-model="state.model.mobile"
|
||||
:inputBorder="false" type="number" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="code">
|
||||
<uni-easyinput :styles="state.inputStyle" trim="all" placeholder="验证码" v-model="state.model.code"
|
||||
:inputBorder="false" type="number" maxlength="4">
|
||||
<template #right>
|
||||
<button :disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }"
|
||||
class="ss-reset-button code-btn code-btn-start" @tap="getSmsCode('smsLogin', state.model.mobile)">
|
||||
{{ getSmsTimer('smsLogin') }}
|
||||
</button>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">登录</button>
|
||||
<view class="agreement-box ss-flex ss-row-center" :class="{ shake: state.isShaking }">
|
||||
<label class="radio ss-flex" @tap="onChange">
|
||||
<radio :checked="state.agreeStatus" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
|
||||
@tap.stop="onChange" />
|
||||
<view class="agreement-text ss-flex ss-m-l-8">
|
||||
我已阅读并遵守
|
||||
<view class="tcp-text" @tap.stop="onProtocol('商家入驻协议')"> 《商家入驻协议》 </view>
|
||||
</view>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { code, mobile } from '@/peach/validate/form';
|
||||
import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/peach/hooks/useModal';
|
||||
|
||||
const title = ref('欢迎登录')
|
||||
const smsLoginRef = ref(null)
|
||||
|
||||
const state = ref({
|
||||
model: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
},
|
||||
rules: {
|
||||
mobile: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '手机号不能为空',
|
||||
},
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
errorMessage: '手机号格式错误',
|
||||
},
|
||||
],
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '验证码不能为空',
|
||||
},
|
||||
{
|
||||
pattern: /^\d{4}$/,
|
||||
errorMessage: '验证码格式错误',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
isMobileEnd: false,
|
||||
agreeStatus: false,
|
||||
isShaking: false,
|
||||
model: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
},
|
||||
rules: {
|
||||
mobile,
|
||||
code
|
||||
},
|
||||
inputStyle: {
|
||||
backgroundColor: '#ECECEC'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function onChange() {
|
||||
state.value.agreeStatus = !state.value.agreeStatus
|
||||
}
|
||||
|
||||
|
||||
async function smsLoginSubmit() {
|
||||
const validate = await smsLoginRef.value.validate().catch(err => {
|
||||
console.log('err', err)
|
||||
})
|
||||
if (!validate) return
|
||||
if (!state.agreeStatus) {
|
||||
state.value.isShaking = true
|
||||
setTimeout(() => {
|
||||
state.value.isShaking = false
|
||||
}, 1000)
|
||||
peach.$helper.toast('请勾选同意')
|
||||
return
|
||||
}
|
||||
|
||||
const { code } = await AuthUtil.smsLogin(state.value.model)
|
||||
if (code === 0) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-module {
|
||||
|
||||
.uni-easyinput {
|
||||
|
||||
::v-deep .uni-easyinput__content {
|
||||
border-radius: 41rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-module {
|
||||
.login-btn-start {
|
||||
width: 158rpx;
|
||||
height: 56rpx;
|
||||
line-height: normal;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-top: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
.login-title {
|
||||
color: '#1818d';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-btn-start {
|
||||
height: 82rpx;
|
||||
line-height: normal;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.code-btn-start {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
line-height: normal;
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: var(--ui-BG-Main);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.agreement-box {
|
||||
margin: -10px auto 10px;
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
|
||||
.protocol-check {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.code-btn-start {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
line-height: normal;
|
||||
border: 2rpx solid var(--ui-BG-Main);
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
|
||||
.agreement-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
.tcp-text {
|
||||
color: var(--ui-BG-Main);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation: shake 0.05s linear 4 alternate;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
from {
|
||||
transform: translateX(-10rpx);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(10rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
==================== */
|
||||
|
||||
.ss-bg-opactity-block {
|
||||
background-color: rgba(#000, 0.2);
|
||||
color: #fff;
|
||||
background-color: rgba(#000, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
@ -12,80 +12,80 @@
|
|||
==================== */
|
||||
|
||||
.ss-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ss-flex-1 {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ss-flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ss-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ss-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.ss-col-center {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ss-col-top {
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ss-col-bottom {
|
||||
align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.ss-col-stretch {
|
||||
align-items: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ss-row-center {
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ss-row-left {
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ss-row-right {
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ss-row-between {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ss-row-around {
|
||||
justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.ss-self-start {
|
||||
align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ss-self-end {
|
||||
align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.ss-self-center {
|
||||
align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
.ss-h-100 {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ss-w-100 {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
@ -94,60 +94,60 @@
|
|||
|
||||
==================== */
|
||||
@for $i from 0 through 100 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
// 得出:u-margin-30或者u-m-30
|
||||
.ss-margin-#{$i},
|
||||
.ss-m-#{$i} {
|
||||
margin: $i + rpx;
|
||||
}
|
||||
.ss-m-x-#{$i} {
|
||||
margin-left: $i + rpx;
|
||||
margin-right: $i + rpx;
|
||||
}
|
||||
.ss-m-y-#{$i} {
|
||||
margin-top: $i + rpx;
|
||||
margin-bottom: $i + rpx;
|
||||
}
|
||||
|
||||
// 得出:u-padding-30或者u-p-30
|
||||
.ss-padding-#{$i},
|
||||
.ss-p-#{$i} {
|
||||
padding: $i + rpx;
|
||||
}
|
||||
.ss-p-x-#{$i} {
|
||||
padding-left: $i + rpx;
|
||||
padding-right: $i + rpx;
|
||||
}
|
||||
.ss-p-y-#{$i} {
|
||||
padding-top: $i + rpx;
|
||||
padding-bottom: $i + rpx;
|
||||
}
|
||||
|
||||
@each $short, $long in l left, t top, r right, b bottom {
|
||||
// 缩写版,结果如: u-m-l-30
|
||||
// 定义外边距
|
||||
.ss-m-#{$short}-#{$i} {
|
||||
margin-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-p-#{$short}-#{$i} {
|
||||
padding-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 完整版,结果如:u-margin-left-30
|
||||
// 定义外边距
|
||||
.ss-margin-#{$long}-#{$i} {
|
||||
margin-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-padding-#{$long}-#{$i} {
|
||||
padding-#{$long}: $i + rpx;
|
||||
}
|
||||
}
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
// 得出:u-margin-30或者u-m-30
|
||||
.ss-margin-#{$i},
|
||||
.ss-m-#{$i} {
|
||||
margin: $i + rpx;
|
||||
}
|
||||
.ss-m-x-#{$i} {
|
||||
margin-left: $i + rpx;
|
||||
margin-right: $i + rpx;
|
||||
}
|
||||
.ss-m-y-#{$i} {
|
||||
margin-top: $i + rpx;
|
||||
margin-bottom: $i + rpx;
|
||||
}
|
||||
|
||||
// 得出:u-padding-30或者u-p-30
|
||||
.ss-padding-#{$i},
|
||||
.ss-p-#{$i} {
|
||||
padding: $i + rpx;
|
||||
}
|
||||
.ss-p-x-#{$i} {
|
||||
padding-left: $i + rpx;
|
||||
padding-right: $i + rpx;
|
||||
}
|
||||
.ss-p-y-#{$i} {
|
||||
padding-top: $i + rpx;
|
||||
padding-bottom: $i + rpx;
|
||||
}
|
||||
|
||||
@each $short, $long in l left, t top, r right, b bottom {
|
||||
// 缩写版,结果如: u-m-l-30
|
||||
// 定义外边距
|
||||
.ss-m-#{$short}-#{$i} {
|
||||
margin-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-p-#{$short}-#{$i} {
|
||||
padding-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 完整版,结果如:u-margin-left-30
|
||||
// 定义外边距
|
||||
.ss-margin-#{$long}-#{$i} {
|
||||
margin-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-padding-#{$long}-#{$i} {
|
||||
padding-#{$long}: $i + rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
@ -156,35 +156,37 @@
|
|||
|
||||
==================== */
|
||||
@for $i from 0 through 100 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
.ss-radius-#{$i},
|
||||
.ss-r-#{$i} {
|
||||
border-radius: $i + rpx;
|
||||
}
|
||||
|
||||
.ss-r-t-#{$i} {
|
||||
border-top-left-radius: $i + rpx;
|
||||
border-top-right-radius: $i + rpx;
|
||||
}
|
||||
|
||||
.ss-r-b-#{$i} {
|
||||
border-bottom-left-radius: $i + rpx;
|
||||
border-bottom-right-radius: $i + rpx;
|
||||
}
|
||||
|
||||
@each $short, $long in tl 'top-left', tr 'top-right', bl 'bottom-right', br 'bottom-right' {
|
||||
// 定义外边距
|
||||
.ss-r-#{$short}-#{$i} {
|
||||
border-#{$long}-radius: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-radius-#{$long}-#{$i} {
|
||||
border-#{$long}-radius: $i + rpx;
|
||||
}
|
||||
}
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
.ss-radius-#{$i},
|
||||
.ss-r-#{$i} {
|
||||
border-radius: $i + rpx;
|
||||
}
|
||||
|
||||
.ss-r-t-#{$i} {
|
||||
border-top-left-radius: $i + rpx;
|
||||
border-top-right-radius: $i + rpx;
|
||||
}
|
||||
|
||||
.ss-r-b-#{$i} {
|
||||
border-bottom-left-radius: $i + rpx;
|
||||
border-bottom-right-radius: $i + rpx;
|
||||
}
|
||||
|
||||
@each $short, $long in tl "top-left", tr "top-right", bl "bottom-right",
|
||||
br "bottom-right"
|
||||
{
|
||||
// 定义外边距
|
||||
.ss-r-#{$short}-#{$i} {
|
||||
border-#{$long}-radius: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-radius-#{$long}-#{$i} {
|
||||
border-#{$long}-radius: $i + rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
@ -194,41 +196,41 @@
|
|||
|
||||
==================== */
|
||||
@mixin ellipsis($rowCount: 1) {
|
||||
// @if $rowCount <=1 {
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// } @else {
|
||||
// min-width: 0;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: $rowCount;
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $rowCount;
|
||||
-webkit-box-orient: vertical;
|
||||
// @if $rowCount <=1 {
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// } @else {
|
||||
// min-width: 0;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: $rowCount;
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $rowCount;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
.ss-line-#{$i} {
|
||||
@include ellipsis($i);
|
||||
}
|
||||
.ss-line-#{$i} {
|
||||
@include ellipsis($i);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
hover
|
||||
==================== */
|
||||
.ss-hover-class {
|
||||
background-color: $gray-c;
|
||||
opacity: 0.6;
|
||||
background-color: $gray-c;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ss-hover-btn {
|
||||
transform: translate(1px, 1px);
|
||||
transform: translate(1px, 1px);
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
@ -236,9 +238,9 @@
|
|||
==================== */
|
||||
|
||||
.ss-safe-bottom {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) / 5 * 3);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 5 * 3);
|
||||
padding-bottom: 0;
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) / 5 * 3);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 5 * 3);
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
@ -247,40 +249,40 @@
|
|||
|
||||
==================== */
|
||||
|
||||
@for $i from 20 through 50 {
|
||||
.ss-font-#{$i} {
|
||||
font-size: $i + rpx;
|
||||
}
|
||||
@for $i from 20 through 60 {
|
||||
.ss-font-#{$i} {
|
||||
font-size: $i + rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
按钮
|
||||
==================== */
|
||||
.ss-reset-button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
border: 0rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
transform: translate(0, 0);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
border: 0rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
.ss-reset-button.button-hover {
|
||||
transform: translate(1px, 1px);
|
||||
background: none;
|
||||
transform: translate(1px, 1px);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ss-reset-button::after {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
|
|
@ -1,181 +1,185 @@
|
|||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import $platform from '@/peach/platform'
|
||||
import $router from '@/peach/router'
|
||||
import user from './user'
|
||||
import sys from './sys'
|
||||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import $platform from "@/peach/platform";
|
||||
import $router from "@/peach/router";
|
||||
import user from "./user";
|
||||
import useSysStore from "./sys";
|
||||
|
||||
const useAppStore = defineStore(
|
||||
'app',
|
||||
() => {
|
||||
/**
|
||||
* @description 应用信息
|
||||
* @param string name 应用名称
|
||||
* @param string logo 应用logo
|
||||
* @param string version 应用版本
|
||||
* @param string copyright 版权信息
|
||||
* @param string copyrightTime 版权时间
|
||||
* @param string cdnurl 静态资源域名
|
||||
* @param string filesystem 文件系统
|
||||
*/
|
||||
const info = ref({
|
||||
name: '',
|
||||
logo: '',
|
||||
version: '',
|
||||
copyright: '',
|
||||
copytime: '',
|
||||
cdnurl: '',
|
||||
filesystem: '',
|
||||
})
|
||||
"app",
|
||||
() => {
|
||||
/**
|
||||
* @description 应用信息
|
||||
* @param string name 应用名称
|
||||
* @param string logo 应用logo
|
||||
* @param string version 应用版本
|
||||
* @param string copyright 版权信息
|
||||
* @param string copyrightTime 版权时间
|
||||
* @param string cdnurl 静态资源域名
|
||||
* @param string filesystem 文件系统
|
||||
*/
|
||||
const info = ref({
|
||||
name: "",
|
||||
logo: "",
|
||||
version: "",
|
||||
copyright: "",
|
||||
copytime: "",
|
||||
cdnurl: "",
|
||||
filesystem: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* @description 平台信息
|
||||
* @param Array share.methods 分享方式
|
||||
* @param Object share.forwardInfo 转发信息
|
||||
* @param Object share.posterInfo 海报信息
|
||||
* @param string share.linkAddress 分享链接地址
|
||||
* @param number bindMobile 绑定手机号提醒 0: 提醒 1: 不提醒
|
||||
*/
|
||||
const platform = ref({
|
||||
share: {
|
||||
methods: [],
|
||||
forwardInfo: {},
|
||||
posterInfo: {},
|
||||
linkAddress: '',
|
||||
/**
|
||||
* @description 平台信息
|
||||
* @param Array share.methods 分享方式
|
||||
* @param Object share.forwardInfo 转发信息
|
||||
* @param Object share.posterInfo 海报信息
|
||||
* @param string share.linkAddress 分享链接地址
|
||||
* @param number bindMobile 绑定手机号提醒 0: 提醒 1: 不提醒
|
||||
*/
|
||||
const platform = ref({
|
||||
share: {
|
||||
methods: [],
|
||||
forwardInfo: {},
|
||||
posterInfo: {},
|
||||
linkAddress: "",
|
||||
},
|
||||
bindMobile: 0,
|
||||
});
|
||||
|
||||
const chat = ref({});
|
||||
|
||||
/**
|
||||
* @description 模板信息
|
||||
* @param Object basic 基础模板
|
||||
* @param Object tabbar 底部导航模板
|
||||
*/
|
||||
const template = ref({
|
||||
basic: {
|
||||
tabbar: {
|
||||
items: [
|
||||
{
|
||||
activeIconUrl:
|
||||
"http://mall.yudao.iocoder.cn/static/images/1-002.png",
|
||||
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
|
||||
text: "首页",
|
||||
url: "/pages/index/index",
|
||||
},
|
||||
bindMobile: 0,
|
||||
})
|
||||
|
||||
const chat = ref({})
|
||||
|
||||
/**
|
||||
* @description 模板信息
|
||||
* @param Object basic 基础模板
|
||||
* @param Object tabbar 底部导航模板
|
||||
*/
|
||||
const template = ref({
|
||||
basic: {
|
||||
tabbar: {
|
||||
items: [
|
||||
{
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
|
||||
text: '首页',
|
||||
url: '/pages/index/index',
|
||||
},
|
||||
{
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
|
||||
text: '分类',
|
||||
url: '/pages/index/category?id=3',
|
||||
},
|
||||
{
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
|
||||
text: '购物车',
|
||||
url: '/pages/index/icons',
|
||||
},
|
||||
{
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
|
||||
text: '我的',
|
||||
url: '/pages/index/user',
|
||||
},
|
||||
],
|
||||
style: {
|
||||
activeColor: '#fc4141',
|
||||
bgColor: '#fff',
|
||||
bgType: 'color',
|
||||
color: '#282828',
|
||||
},
|
||||
theme: 'red',
|
||||
},
|
||||
{
|
||||
activeIconUrl:
|
||||
"http://mall.yudao.iocoder.cn/static/images/2-002.png",
|
||||
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
|
||||
text: "分类",
|
||||
url: "/pages/index/category?id=3",
|
||||
},
|
||||
})
|
||||
|
||||
// 全局分享信息
|
||||
const shareInfo = ref({})
|
||||
|
||||
// 小程序发货信息管理 0: 没有 1:有
|
||||
const hasWechatTradeManaged = ref(0)
|
||||
|
||||
/**
|
||||
* @author Ankkaya
|
||||
* @description 小程序初始化
|
||||
* @param {Type} -
|
||||
* @returns {Type}
|
||||
*/
|
||||
async function init() {
|
||||
// 检查网络
|
||||
const networkStatus = await $platform.checkNetwork()
|
||||
if (!networkStatus) {
|
||||
$router.error('NetworkError')
|
||||
}
|
||||
|
||||
if (true) {
|
||||
this.info = {
|
||||
name: '🍑商城',
|
||||
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
|
||||
version: '1.0.0',
|
||||
copyright: '全部开源,个人与企业可 100% 免费使用',
|
||||
copytime: 'Copyright© 2018-2024',
|
||||
|
||||
cdnurl: 'https://file.sheepjs.com', // 云存储域名
|
||||
filesystem: 'qcloud', // 云存储平台
|
||||
}
|
||||
this.platform = {
|
||||
share: {
|
||||
methods: ['poster', 'link'],
|
||||
linkAddress: 'https://shopro.sheepjs.com/#/',
|
||||
posterInfo: {
|
||||
user_bg: '/static/img/shop/config/user-poster-bg.png',
|
||||
goods_bg: '/static/img/shop/config/goods-poster-bg.png',
|
||||
groupon_bg: '/static/img/shop/config/groupon-poster-bg.png',
|
||||
},
|
||||
},
|
||||
bind_mobile: 0,
|
||||
}
|
||||
this.chat = {
|
||||
chat_domain: 'https://api.shopro.sheepjs.com/chat',
|
||||
room_id: 'admin',
|
||||
}
|
||||
this.has_wechat_trade_managed = 0
|
||||
|
||||
// 加载主题
|
||||
const sysStore = sys()
|
||||
sysStore.setTheme()
|
||||
|
||||
// 模拟用户登录
|
||||
const userStore = user()
|
||||
if (userStore.isLogin) {
|
||||
userStore.loginAfter()
|
||||
}
|
||||
return Promise.resolve(true)
|
||||
} else {
|
||||
$router.error('InitError', res.msg || '加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
info,
|
||||
platform,
|
||||
chat,
|
||||
template,
|
||||
shareInfo,
|
||||
hasWechatTradeManaged,
|
||||
init,
|
||||
}
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
key: 'app-store',
|
||||
},
|
||||
],
|
||||
{
|
||||
activeIconUrl:
|
||||
"http://mall.yudao.iocoder.cn/static/images/3-002.png",
|
||||
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
|
||||
text: "购物车",
|
||||
url: "/pages/index/icons",
|
||||
},
|
||||
{
|
||||
activeIconUrl:
|
||||
"http://mall.yudao.iocoder.cn/static/images/4-002.png",
|
||||
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
||||
text: "我的",
|
||||
url: "/pages/index/user",
|
||||
},
|
||||
],
|
||||
style: {
|
||||
activeColor: "#fc4141",
|
||||
bgColor: "#fff",
|
||||
bgType: "color",
|
||||
color: "#282828",
|
||||
},
|
||||
theme: "red",
|
||||
},
|
||||
}
|
||||
)
|
||||
},
|
||||
});
|
||||
|
||||
export default useAppStore
|
||||
// 全局分享信息
|
||||
const shareInfo = ref({});
|
||||
|
||||
// 小程序发货信息管理 0: 没有 1:有
|
||||
const hasWechatTradeManaged = ref(0);
|
||||
|
||||
/**
|
||||
* @author Ankkaya
|
||||
* @description 小程序初始化
|
||||
* @param {Type} -
|
||||
* @returns {Type}
|
||||
*/
|
||||
async function init() {
|
||||
// 检查网络
|
||||
const networkStatus = await $platform.checkNetwork();
|
||||
if (!networkStatus) {
|
||||
$router.error("NetworkError");
|
||||
}
|
||||
|
||||
if (true) {
|
||||
this.info = {
|
||||
name: "🍑商城",
|
||||
logo: "https://static.iocoder.cn/ruoyi-vue-pro-logo.png",
|
||||
version: "1.0.0",
|
||||
copyright: "全部开源,个人与企业可 100% 免费使用",
|
||||
copytime: "Copyright© 2018-2024",
|
||||
|
||||
cdnurl: "https://file.sheepjs.com", // 云存储域名
|
||||
filesystem: "qcloud", // 云存储平台
|
||||
};
|
||||
this.platform = {
|
||||
share: {
|
||||
methods: ["poster", "link"],
|
||||
linkAddress: "https://shopro.sheepjs.com/#/",
|
||||
posterInfo: {
|
||||
user_bg: "/static/img/shop/config/user-poster-bg.png",
|
||||
goods_bg: "/static/img/shop/config/goods-poster-bg.png",
|
||||
groupon_bg: "/static/img/shop/config/groupon-poster-bg.png",
|
||||
},
|
||||
},
|
||||
bind_mobile: 0,
|
||||
};
|
||||
this.chat = {
|
||||
chat_domain: "https://api.shopro.sheepjs.com/chat",
|
||||
room_id: "admin",
|
||||
};
|
||||
this.has_wechat_trade_managed = 0;
|
||||
|
||||
// 加载主题
|
||||
const sysStore = useSysStore();
|
||||
sysStore.setTheme();
|
||||
|
||||
// 模拟用户登录
|
||||
const userStore = user();
|
||||
if (userStore.isLogin) {
|
||||
userStore.loginAfter();
|
||||
}
|
||||
return Promise.resolve(true);
|
||||
} else {
|
||||
$router.error("InitError", res.msg || "加载失败");
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
info,
|
||||
platform,
|
||||
chat,
|
||||
template,
|
||||
shareInfo,
|
||||
hasWechatTradeManaged,
|
||||
init,
|
||||
};
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
key: "app-store",
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export default useAppStore;
|
||||
|
|
|
@ -1,36 +1,33 @@
|
|||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
const useSysStore = defineStore(
|
||||
'sys',
|
||||
() => {
|
||||
const theme = ref('')
|
||||
const mode = ref('light')
|
||||
const modeAuto = ref(false)
|
||||
const fontSize = ref(1)
|
||||
"sys",
|
||||
() => {
|
||||
const theme = ref("");
|
||||
const mode = ref("light");
|
||||
const modeAuto = ref(false);
|
||||
const fontSize = ref(1);
|
||||
|
||||
function setTheme(stheme = '') {
|
||||
if (theme === '') {
|
||||
theme.value = 'orange'
|
||||
} else {
|
||||
theme.value = stheme
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
theme,
|
||||
mode,
|
||||
modeAuto,
|
||||
fontSize,
|
||||
setTheme,
|
||||
}
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [{ key: 'sys-store' }],
|
||||
},
|
||||
function setTheme(stheme = "") {
|
||||
console.log("setTheme", stheme);
|
||||
theme.value = stheme ? stheme : "orange";
|
||||
}
|
||||
)
|
||||
|
||||
export default useSysStore
|
||||
return {
|
||||
theme,
|
||||
mode,
|
||||
modeAuto,
|
||||
fontSize,
|
||||
setTheme,
|
||||
};
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [{ key: "sys-store" }],
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export default useSysStore;
|
||||
|
|
|
@ -0,0 +1,182 @@
|
|||
/**
|
||||
* Validate v1.0.0 通用验证
|
||||
* @description 项目中用到的表单验证规则
|
||||
*/
|
||||
import test from "@/peach/helper/test.js";
|
||||
|
||||
// 身份证号
|
||||
export const idCard = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入身份证号",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!test.idCard(value)) {
|
||||
callback("身份证号格式不正确");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 手机号
|
||||
export const mobile = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入手机号",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!test.mobile(value)) {
|
||||
callback("手机号码格式不正确");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 密码
|
||||
export const password = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入密码",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/.test(value)) {
|
||||
callback("需包含字母和数字,长度在6-12之间");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 短信验证码
|
||||
export const code = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入验证码",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 真实姓名
|
||||
export const realName = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入姓名",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!test.chinese(value)) {
|
||||
callback("请输入汉字");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const taxName = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入发票抬头名称",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!test.chinese(value)) {
|
||||
callback("请输入汉字");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 税号
|
||||
export const taxNo = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入税号",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 开户行
|
||||
export const bankName = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入银行名称",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!test.chinese(value)) {
|
||||
callback("请输入汉字");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// 银行卡号
|
||||
export const bankCode = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入银行卡号",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
if (!test.bankCode(value)) {
|
||||
callback("请输入正确银行卡号");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 支付宝账号
|
||||
export const alipayAccount = {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: "请输入支付宝账号",
|
||||
},
|
||||
{
|
||||
validateFunction: function (rule, value, data, callback) {
|
||||
let isEmail = test.email(value);
|
||||
let isMobile = test.mobile(value);
|
||||
|
||||
if (!isEmail && !isMobile) {
|
||||
callback("请输入正确账号");
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default {
|
||||
mobile,
|
||||
alipayAccount,
|
||||
bankCode,
|
||||
bankName,
|
||||
realName,
|
||||
password,
|
||||
code,
|
||||
taxNo,
|
||||
taxName,
|
||||
};
|
Loading…
Reference in New Issue