XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-09-10 21:30:55 +08:00
parent 6d3eea76e4
commit 4f0d91c187
12 changed files with 69 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/xUpload/index.vue
View File

@ -6,6 +6,7 @@
</div>
<el-image class="image" :src="file.tempFile" fit="cover"></el-image>
</div>
<div v-if="file && file.status=='success'" class="x-upload__img">
<el-image class="image" :src="file.url" :preview-src-list="[file.url]" fit="cover" hide-on-click-modal append-to-body :z-index="9999">
<template #placeholder>
@ -15,7 +16,26 @@
</template>
</el-image>
<div class="x-upload__img-actions" v-if="!disabled">
<span class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
<span v-if="!replaceupload" class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
<el-upload v-else class="uploader" ref="uploader"
:auto-upload="cropper?false:autoUpload"
:disabled="disabled"
:show-file-list="showFileList"
:action="action"
:name="name"
:data="data"
:accept="accept"
:limit="1"
:http-request="request"
:on-change="change"
:before-upload="before"
:on-success="success"
:on-error="error"
:on-exceed="handleExceed">
<slot>
<span class="upload"><el-icon><component :is="icon" /></el-icon> <h4 v-if="title"> {{title}} </h4></span>
</slot>
</el-upload>
</div>
</div>
<el-upload v-if="!file" class="uploader" ref="uploader"
@ -79,6 +99,7 @@
onSuccess: { type: Function, default: () => { return true } },
onRemove: { type: Function, default: () => { return true } },
cropper: { type: Boolean, default: false },
replaceupload: { type: Boolean, default: false },
compress: {type: Number, default: 1},
aspectRatio: {type: Number, default: NaN}
},
@ -156,6 +177,10 @@
this.clearFiles()
},
clearFiles(){
if (this.replaceupload===true) {
this.newFile(this.value)
return false;
}
URL.revokeObjectURL(this.file.tempFile)
this.value = {}
this.file = null
@ -270,6 +295,7 @@
.x-upload__img-actions span {display: flex;justify-content: center;align-items: center;width: 25px;height:25px;cursor: pointer;color: #fff;}
.x-upload__img-actions span i {font-size: 12px;}
.x-upload__img-actions .del {background: #F56C6C;}
.x-upload__img-actions .upload {background: var(--el-color-primary);}
.x-upload__img:hover .x-upload__img-actions {display: block;}
.x-upload__img-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;background-color: var(--el-fill-color-lighter);}
.x-upload__uploading {width: 100%;height: 100%;position: relative;}

4
src/components/xUser/index.vue
View File

@ -12,11 +12,13 @@
:api="avatarupload"
width="120"
height="120"
icon="el-icon-avatar"
icon="el-icon-UploadFilled"
:onRemove="onRemove"
class="xuavatar"
round
:cropper="true"
title="上传头像"
:replaceupload="true"
:aspectRatio="1/1" />
<el-avatar :size="120" v-else :src="user.avatar"></el-avatar>
<h2 class="nickname">{{ user.nickname || user.username }}</h2>

14
src/router/systemRouter.js
View File

@ -14,19 +14,5 @@ const routes = [{
meta: {
title: "登录"
}
}, {
path: "/user_register",
component: () =>
import ('@/views/login/userRegister'),
meta: {
title: "注册"
}
}, {
path: "/reset_password",
component: () =>
import ('@/views/login/resetPassword'),
meta: {
title: "重置密码"
}
}]
export default routes;

13
src/views/home/widgets/components/StoreConversionData.vue
View File

@ -257,13 +257,24 @@ export default {
height: 267px;
}
::v-deep .el-tabs__nav-next, ::v-deep .el-tabs__nav-prev {
width: 30px;
}
::v-deep .el-tabs__nav-scroll {
margin: 0 24px;
height: 100%;
padding: 0 30px;
}
::v-deep .is-scrollable .el-tabs__nav-scroll {
height: 100%;
padding: 0 0px;
}
::v-deep .el-tabs__nav-wrap.is-scrollable {
height: 100px;
padding: 0 30px;
}
::v-deep .el-tabs__nav-prev {

79
src/views/home/widgets/components/allDataFrom.vue
View File

@ -1,18 +1,15 @@
<template>
<div class="card-box" :class="{'jus-bet':!resizeDom}" ref="reizeCardDom">
<el-card shadow="hover" class="card-item" :class="[resizeDom===2?'w-100':'',{'mg-l-15':resizeDom===1&&!((i+1)%2)}]" v-for="(item, i) in list" :key="i">
<el-row :gutter="10">
<el-col :xs="12" :sm="6" :md="4" :xl="4" v-for="(item, i) in list" :key="i">
<el-card shadow="hover" class="card-item">
<div>
<div class="item-text dis-f al-item jus-bet">
{{ item.title }}
<!-- <el-icon :size="15">
<el-icon-warning-filled />
</el-icon> -->
</div>
<div class="item-price mg-t-10 mg-b-3">
<span v-if="item.type == 'sale'"><span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
}}</span>
<span v-if="item.type == 'access'">{{ setNumMark('45123456') }}</span>
<span v-if="item.type == 'payment'">{{ setNumMark('45123456') }}</span>
<span v-if="item.type == 'sale'"><span style="margin-right:2px;">￥</span>{{ setNumMark('12345') }}</span>
<span v-if="item.type == 'access'">{{ setNumMark('12345') }}</span>
<span v-if="item.type == 'payment'">{{ setNumMark('12345') }}</span>
<span v-if="item.type == 'operate'">78%</span>
</div>
<div v-if="item.type == 'sale'">
@ -51,20 +48,14 @@
<div class="bor-b"></div>
<div class="item-text color-000" :class="{ 'dis-f al-item jus-bet': item.type == 'operate' }">
<span v-if="item.type == 'sale'">日销售额 <span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
}}</span>
<span v-if="item.type == 'access'">日访问量 <span style="margin-right:2px;">￥</span>{{
setNumMark('45123456')
}}</span>
<span v-if="item.type == 'sale'">日销售额 <span style="margin-right:2px;">￥</span>{{ setNumMark('12345') }}</span>
<span v-if="item.type == 'access'">日访问量 <span style="margin-right:2px;">￥</span>{{setNumMark('12345') }}</span>
<span v-if="item.type == 'payment'">转化率 60%</span>
<div class="dis-f al-item item-text color-000" v-if="item.type == 'operate'">
同比周 <span class="mg-l-10">12%</span>
<el-icon :size="10" color="#f5222d" class="mg-l-5">
<el-icon-caret-top />
</el-icon>
</div>
<div class="dis-f al-item item-text color-000" v-if="item.type == 'operate'">
同比日 <span class="mg-l-10">11%</span>
<el-icon :size="10" color="#52c41a" class="mg-l-5">
<el-icon-caret-bottom />
</el-icon>
@ -72,12 +63,12 @@
</div>
</div>
</el-card>
</div>
</el-col>
</el-row>
</template>
<script>
import xEcharts from '@/components/xEcharts';
import { setMark } from './tool.js'
export default {
title: "各项数据",
icon: "el-icon-trend-charts",
@ -106,6 +97,14 @@ export default {
type: 'operate',
title: '运营活动效果图'
},
{
type: 'operate',
title: '运营活动效果图'
},
{
type: 'operate',
title: '运营活动效果图'
},
],
accessOption: {
xAxis: {
@ -157,24 +156,14 @@ export default {
},
methods: {
setNumMark(num) {
return setMark(num)
return this.$tool.groupSeparator(num)
}
},
mounted() {
this.resize = new ResizeObserver((e) => {
console.log(e[0].contentRect.width)
if (e[0].contentRect.width <= 1000&&e[0].contentRect.width>=446) {
this.resizeDom = 1
} else if(e[0].contentRect.width < 446){
this.resizeDom = 2
}else{
this.resizeDom = 0
}
})
this.resize.observe(this.$refs.reizeCardDom)
},
beforeUnmount(){
this.resize.unobserve(this.$refs.reizeCardDom)
}
}
</script>
@ -226,9 +215,7 @@ export default {
}
.card-item {
width: calc(50% - 8px);
min-width:200px;
/* margin-right: 10px; */
}
.item-text {
@ -277,16 +264,6 @@ export default {
height: 3px;
width: 2px;
}
.w-100{
width:100% !important;
}
.w-49{
width:48.7% !important;
}
/* .el-progress--line {
width: 350px
} */
::v-deep .el-progress {
display: block;
}
@ -295,16 +272,4 @@ export default {
padding:11px;
}
/* @media screen and (max-width: 550px) {
.card-item {
width: 100%;
}
}
@media (min-width:550px) and (max-width: 1115px) {
.card-item {
width: 48.7%;
min-width: 246px;
}
} */
</style>

5
src/views/home/widgets/components/component/StoreInfo.vue
View File

@ -25,7 +25,6 @@
<script>
import xEcharts from '@/components/xEcharts';
import { setMark } from '../tool';
export default {
components: {
xEcharts
@ -110,7 +109,7 @@ export default {
},
methods: {
setNumMark(num) {
return setMark(num)
return this.$tool.groupSeparator(num)
},
setSize(){
this.$refs.c1.setSize()
@ -140,7 +139,7 @@ export default {
}
.box-pd {
padding: 0 24px 24px 24px;
padding: 0 20px 10px 20px;
}
.font {

9
src/views/home/widgets/components/hotSearch.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="card-item">
<div class="dis-f al-item jus-bet box-text" style="padding:0 24px;">
<div class="dis-f al-item jus-bet box-text" style="padding:0 24px 10px;">
线上热门搜索
<el-dropdown>
<span class="el-dropdown-link">
@ -16,7 +16,7 @@
</template>
</el-dropdown>
</div>
<div class="line" style="margin-top:16px;"></div>
<div class="line"></div>
<div class="info-box">
<div class="dis-f al-item jus-bet">
<div style="flex: 0.5;">
@ -111,7 +111,6 @@
<script>
import xEcharts from '@/components/xEcharts';
import { setMark } from './tool.js'
export default {
title: "线上热门搜索",
icon: "el-icon-search",
@ -150,7 +149,7 @@ export default {
},
methods: {
setNumMark(num) {
return setMark(num)
return this.$tool.groupSeparator(num)
},
refView(){
this.$refs.use.setSize()
@ -190,10 +189,8 @@ export default {
background: #fff;
padding: 16px 0;
margin-bottom:15px;
min-height:381px;
border:1px solid #e4e7ed;
border-radius:4px;
min-width:375px;
}
.line {

4
src/views/home/widgets/components/tool.js
View File

@ -1,4 +0,0 @@
const setMark=(num)=> {
return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
export {setMark}

11
src/views/login/components/passwordForm.vue
View File

@ -7,20 +7,9 @@
<el-form-item prop="password">
<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
</el-form-item>
<!-- <el-form-item style="margin-bottom: 10px;">
<el-col :span="12">
<el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
</el-col>
<el-col :span="12" class="login-forgot">
<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
</el-col>
</el-form-item> -->
<el-form-item>
<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
</el-form-item>
<div class="login-reg">
<!-- {{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link> -->
</div>
</el-form>
</template>

3
src/views/login/index.vue
View File

@ -36,9 +36,6 @@
<el-tab-pane :label="$t('login.accountLogin')" lazy>
<password-form></password-form>
</el-tab-pane>
<!-- <el-tab-pane :label="$t('login.mobileLogin')" lazy>
<phone-form></phone-form>
</el-tab-pane> -->
</el-tabs>
<template v-if="$config.MY_SHOW_LOGIN_OAUTH">
<el-divider>{{ $t('login.signInOther') }}</el-divider>

124
src/views/login/resetPassword.vue
View File

@ -1,124 +0,0 @@
<template>
<common-page title="重置密码">
<el-steps :active="stepActive" simple finish-status="success">
<el-step title="填写新密码" />
<el-step title="完成重置" />
</el-steps>
<el-form v-if="stepActive==0" ref="form" :model="form" :rules="rules" :label-width="120">
<el-form-item label="登录账号" prop="user">
<el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
<div class="el-form-item-msg">请输入注册时填写的登录账号</div>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item label="短信验证码" prop="yzm">
<div class="yzm">
<el-input v-model="form.yzm" placeholder="请输入6位短信验证码"></el-input>
<el-button @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{time}})</span></el-button>
</div>
</el-form-item>
<el-form-item label="新密码" prop="newpw">
<el-input v-model="form.newpw" show-password placeholder="请输入新密码"></el-input>
<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
</el-form-item>
<el-form-item label="确认新密码" prop="newpw2">
<el-input v-model="form.newpw2" show-password placeholder="请再一次输入新密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save">提交</el-button>
</el-form-item>
</el-form>
<el-result v-if="stepActive==1" icon="success" title="密码重置成功" sub-title="请牢记自己的新密码,返回登录后使用新密码登录">
<template #extra>
<el-button type="primary" @click="backLogin">返回登录</el-button>
</template>
</el-result>
</common-page>
</template>
<script>
import commonPage from './components/commonPage'
export default {
components: {
commonPage
},
data() {
return {
stepActive: 0,
form: {
user: "",
phone: "",
yzm: "",
newpw: "",
newpw2: ""
},
rules: {
user: [
{ required: true, message: '请输入登录账号'}
],
phone: [
{ required: true, message: '请输入手机号'}
],
yzm: [
{ required: true, message: '请输入短信验证码'}
],
newpw: [
{ required: true, message: '请输入新的密码'}
],
newpw2: [
{ required: true, message: '请再次输入新的密码'},
{validator: (rule, value, callback) => {
if (value !== this.form.newpw) {
callback(new Error('两次输入密码不一致'));
}else{
callback();
}
}}
],
},
disabled: false,
time: 0
}
},
mounted() {
},
methods: {
async getYzm(){
var validate = await this.$refs.form.validateField("phone").catch(()=>{})
if(!validate){ return false }
this.$message.success("已发送短信至手机号码")
this.disabled = true
this.time = 60
var t = setInterval(() => {
this.time -= 1
if(this.time < 1){
clearInterval(t)
this.disabled = false
this.time = 0
}
},1000)
},
async save(){
var validate = await this.$refs.form.validate().catch(()=>{})
if(!validate){ return false }
this.stepActive = 1
},
backLogin(){
this.$router.push({
path: '/login'
})
}
}
}
</script>
<style scoped>
</style>

171
src/views/login/userRegister.vue
View File

@ -1,171 +0,0 @@
<template>
<common-page title="注册新账号">
<el-steps :active="stepActive" simple finish-status="success">
<el-step title="基础信息" />
<el-step title="详细信息" />
<el-step title="完成注册" />
</el-steps>
<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
<el-form-item label="登录账号" prop="user">
<el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
<x-password-strength v-model="form.password"></x-password-strength>
<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
</el-form-item>
<el-form-item label="" prop="agree">
<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree=true">《平台服务协议》</span>
</el-form-item>
</el-form>
<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
<el-form-item label="真实姓名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
</el-form-item>
<el-form-item label="账号类型" prop="userType">
<el-radio-group v-model="form.userType">
<el-radio-button label="1">企业开发者</el-radio-button>
<el-radio-button label="2">企业开发者</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="开通类别" prop="open">
<el-checkbox-group v-model="form.open">
<el-checkbox label="1">云存储API</el-checkbox>
<el-checkbox label="2">云检索API</el-checkbox>
<el-checkbox label="3">Javescript API</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<div v-if="stepActive==2">
<el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
<template #extra>
<el-button type="primary" @click="goLogin">前去登录</el-button>
</template>
</el-result>
</div>
<el-form style="text-align: center;">
<el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
<el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
<el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
</el-form>
<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
平台服务协议
<template #footer>
<el-button @click="showAgree=false">取消</el-button>
<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
</template>
</el-dialog>
</common-page>
</template>
<script>
import xPasswordStrength from '@/components/xPasswordStrength';
import commonPage from './components/commonPage'
export default {
components: {
commonPage,
xPasswordStrength
},
data() {
return {
stepActive: 0,
showAgree: false,
form: {
user: "",
password: "",
password2: "",
agree: false,
userName: "",
email: "",
userType: "1",
open: []
},
rules: {
user: [
{ required: true, message: '请输入账号名'}
],
password: [
{ required: true, message: '请输入密码'}
],
password2: [
{ required: true, message: '请再次输入密码'},
{validator: (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次输入密码不一致'));
}else{
callback();
}
}}
],
agree: [
{validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请阅读并同意协议'));
}else{
callback();
}
}}
],
userName: [
{ required: true, message: '请输入真实姓名'}
],
email: [
{ required: true, message: '请输入邮箱地址'}
],
userType: [
{ required: true, message: '请选择账户类型'}
],
open: [
{ required: true, message: '请选择开通类别'}
]
}
}
},
mounted() {
},
methods: {
pre(){
this.stepActive -= 1
},
next(){
const formName = `stepForm_${this.stepActive}`
this.$refs[formName].validate((valid) => {
if (valid) {
this.stepActive += 1
}else{
return false
}
})
},
save(){
const formName = `stepForm_${this.stepActive}`
this.$refs[formName].validate((valid) => {
if (valid) {
this.stepActive += 1
}else{
return false
}
})
},
goLogin(){
this.$router.push({
path: '/login'
})
}
}
}
</script>
<style scoped>
</style>