Skip to content

M
mayi-mp-shop
Commit 2a11fe3a by 李嘉林
Options

登录页组件

parent 92c423be
Showing with 562 additions and 3 deletions
src/api/login.js
......@@ -36,5 +36,8 @@ console.log(process.env,'-----------------config------')
get_open_id_by_code(options){
return requestGET(`${process.env.OLSHOP_URL}/wx/get_open_id_by_code?code=${options.code}&channel=1`,)
},
getLogin(data) {
return requestPOST(`${process.env.OLSHOP_URL}/login`, data)
},
}
\ No newline at end of file
src/components/ThemeDataPlant.vue
......@@ -16,6 +16,10 @@
<script>
export default {
props: {
pageCode: {
type:Number,
default: 1
}
},
components : {
// 'area-navigation' : () => import('~/components/theme/components/other/area-navigation')
......@@ -32,13 +36,13 @@ export default {
},
created(){
if (this.mpApp.globalData.pageList) {
this.pageInfo = this.mpApp.globalData.pageList.filter((item) => item.pageCode == 1)[0];
this.pageInfo = this.mpApp.globalData.pageList.filter((item) => item.pageCode == this.pageCode)[0];
this.pageSettingData = JSON.parse(this.pageInfo.pageSettingData);
console.log(this.pageInfo.pageSettingData,'kl')
}else{
let _this = this
this.mpApp.indexBgCallBack = function(data){
_this.pageInfo = _this.mpApp.globalData.pageList.filter((item) => item.pageCode == 1)[0];
_this.pageInfo = _this.mpApp.globalData.pageList.filter((item) => item.pageCode == _this.pageCode)[0];
_this.pageSettingData = JSON.parse(_this.pageInfo.pageSettingData);
console.log(_this.pageSettingData,'kl1')
_this.bacImage = `url(${_this.pageSettingData.backgroundImage})`
......
src/components/login/loginBox.vue 0 → 100644
<template>
<!-- 登录操作模块 -->
<div class="loginBox">
<div
class="toCLogin"
:style="{
'margin-top': paddingTop + 'px',
'margin-bottom': paddingBottom + 'px',
'margin-left': paddingLeft + 'px',
'margin-right': paddingRight + 'px',
}"
>
<div class="btn_info flex">
<div
class="btn"
:style="{
'border-radius': loginBtnOrderRadius + 'px',
'background-color':loginBtnStyleType == 1 ? customLoginBtnBackground : '',
'color': loginBtnStyleType == 1 ? customLoginBtnColor : '',
'font-size':loginBtnStyleType == 1 ? customLoginBtnSize + 'px' : ''
}"
lang="zh_CN"
@click="getUserProfile"
v-if="wxLoginFlag && !phoneLoginFlag"
>
微信一键登录
</div>
<div class="phoneLogin" v-if="phoneLoginFlag">
<div class="phoneLabel flex">
<span
:style="{
'font-size':labelStyleType == 1 ? customLabelSize + 'px' : '',
'color': labelStyleType == 1 ? customLabelColor : ''
}"
>账号</span
>
<input
:style="{ background: inputBackground }"
type="number"
v-model="loginMsg.account"
maxlength="11"
:placeholder="phoneInputPlaceholder"
/>
</div>
<div class="passLabel flex">
<span
:style="{
'font-size': labelStyleType == 1 ? customLabelSize + 'px' : '',
'color': labelStyleType == 1 ? customLabelColor : ''
}"
>密码</span
>
<input
:style="{ background: inputBackground }"
type="password"
v-model="loginMsg.password"
:placeholder="pwdInputPlaceholder"
/>
<div
class="forgetPassword"
v-if="forgetPasswordType == 1"
@click="forgetPassword"
>
忘记密码
</div>
</div>
<div class="loginIn flex">
<div
class="loginBtn flex"
:style="{
'border-radius': loginBtnOrderRadius + 'px',
'background-color':loginBtnStyleType == 1 ? customLoginBtnBackground : '',
'color': loginBtnStyleType == 1 ? customLoginBtnColor : '',
'font-size':loginBtnStyleType == 1 ? customLoginBtnSize + 'px' : ''
}"
@click="loginIn"
>
登录
</div>
</div>
<div
class="wxLogin"
v-if="phoneLoginFlag && wxLoginFlag"
@click="getUserProfile"
>
微信一键登录
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "loginBox",
props: {
render: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: () => {
return {
componentData: {},
};
},
},
isShowPhone: {
type: Boolean,
default: false,
},
showGetPhoneBtn: {
type: Boolean,
default: false,
},
},
data() {
return {
loginMsg: {
account: "",
password: "",
loginType: 0,
},
};
},
components: {},
computed: {
wxLoginFlag() {
return this.datas.componentData.wxLoginFlag;
},
phoneLoginFlag() {
return this.datas.componentData.phoneLoginFlag;
},
forgetPasswordType() {
return this.datas.componentData.forgetPasswordType;
},
forgetPasswordTips() {
return this.datas.componentData.forgetPasswordTips;
},
phoneInputPlaceholder() {
return this.datas.componentData.phoneInputPlaceholder;
},
pwdInputPlaceholder() {
return this.datas.componentData.pwdInputPlaceholder;
},
paddingTop() {
return this.datas.componentData.paddingTop;
},
paddingBottom() {
return this.datas.componentData.paddingBottom;
},
paddingLeft() {
return this.datas.componentData.paddingLeft;
},
paddingRight() {
return this.datas.componentData.paddingRight;
},
loginBtnOrderRadius() {
return this.datas.componentData.loginBtnOrderRadius;
},
inputBackground() {
return this.datas.componentData.inputBackground;
},
labelStyleType() {
return this.datas.componentData.labelStyleType;
},
customLabelColor() {
return this.datas.componentData.customLabelColor;
},
customLabelSize() {
return this.datas.componentData.customLabelSize;
},
loginBtnStyleType() {
return this.datas.componentData.loginBtnStyleType;
},
customLoginBtnBackground() {
return this.datas.componentData.customLoginBtnBackground;
},
customLoginBtnColor() {
return this.datas.componentData.customLoginBtnColor;
},
customLoginBtnSize() {
return this.datas.componentData.customLoginBtnSize;
},
},
created() {},
mounted() {},
methods: {
getUserProfile() {
if (!this.render) return;
this.$emit("getUserProfile");
},
getPhoneNumber(e) {
if (!this.render) return;
this.$emit("getPhoneNumber", e);
},
handbindHandle() {
if (!this.render) return;
this.$emit("handbindHandle");
},
cancelLogin() {
if (!this.render) return;
this.$emit("cancelLogin");
},
loginIn() {
if (!this.render) return;
this.$emit("loginIn", this.loginMsg);
},
forgetPassword() {
if (!this.render) return;
this.$emit("forgetPassword", this.forgetPasswordTips);
},
},
};
</script>
<style lang="scss" scoped>
input {
background: none;
outline: none;
border: none;
}
.loginBox {
.toCLogin {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.btn_info {
width: 100%;
color: #000;
align-items: center;
justify-content: space-around;
.btn {
background-color: #07c160;
color: #fff;
height: 45px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
}
.enterpriseLogin {
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
color: #333;
text-decoration: underline;
font-size: 15px;
}
}
.phoneLogin {
background: #fff;
margin: 0 20px;
padding: 30px 20px;
border-radius: 8px;
.phoneLabel,
.passLabel {
align-items: center;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 6px;
margin-bottom: 20px;
position: relative;
span {
color: #333;
font-size: 16px;
}
input {
margin-left: 30px;
width: 44%;
}
}
.passLabel {
margin-top: 10px;
margin-bottom: 0;
.forgetPassword {
position: absolute;
right: 0;
color: #444;
padding-left: 6px;
border-left: 1px solid #444;
}
}
.loginIn {
width: 100%;
justify-content: center;
align-items: center;
margin-top: 20px;
.loginBtn {
width: 100%;
justify-content: center;
align-items: center;
background: #333;
color: #fff;
font-size: 16px;
height: 50px;
}
}
.wxLogin {
margin-top: 20px;
text-align: center;
font-size: 16px;
color: #333;
}
}
}
</style>
src/components/login/loginLogo.vue 0 → 100644
<template>
<!-- 登录logo名字模块 -->
<div class="loginLogo" :style="{'padding-top':paddingTop + 'px','padding-bottom':paddingBottom + 'px'}">
<div class="imgBox" v-if="useUrl" :style="{'width': logoSize + 'px','height': logoSize + 'px'}">
<img v-if="!render" class="img" :src="useUrl" />
<image v-else class="img" mode="aspectFit" :src="useUrl" />
</div>
<p class="shopName" :style="{'padding-top':pictureTextSpacing + 'px','font-size':titleSize + 'px'}" v-if="useTitle">{{ useTitle }}</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "loginLogo",
props: {
render: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: () => {
return {
componentData: {},
}
},
},
logoUrl: {
type: String,
default: "http://cdn.mayi888.com/public/png/b034d103-bf1d-47eb-ba4c-df78ce24307e.png",
},
shopName: {
type: String,
default: "商城名",
},
},
data() {
return {};
},
components: {},
computed: {
useUrl() {
return this.useLogoType==1 ? this.customLogoUrl : this.logoUrl
},
useTitle() {
return this.useTitleType==1 ? this.customTitle : this.shopName
},
useLogoType(){
return this.datas.componentData.useLogoType
},
customLogoUrl(){
return this.datas.componentData.customLogoUrl
},
useTitleType(){
return this.datas.componentData.useTitleType
},
customTitle(){
return this.datas.componentData.customTitle
},
paddingTop(){
return this.datas.componentData.paddingTop
},
paddingBottom(){
return this.datas.componentData.paddingBottom
},
pictureTextSpacing(){
return this.datas.componentData.pictureTextSpacing
},
logoSize(){
return this.datas.componentData.logoSize
},
titleSize(){
return this.datas.componentData.titleSize
},
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.loginLogo {
display: flex;
flex-direction: column;
align-items: center;
.shopName {
font-weight: bold;
color: #333;
}
.imgBox{
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
</style>
src/components/login/loginUserAgreement.vue 0 → 100644
<template>
<!-- 用户协议模块 -->
<div class="loginUserAgreement" :style="{'position':positionType==1?'relative':'fixed','bottom':positionType==1?'':'20px', 'padding-top':paddingTop + 'px','padding-bottom': paddingBottom + 'px'}" v-if="content">
<!-- <div style="width: 100%; height: 60px"></div> -->
<div class="readAgreement flex" :style="{'font-size':textSize + 'px'}">
<van-checkbox :value="checked" @click="conF1"
>{{text1}}</van-checkbox
>
<p class="link" @click="contentShow = true">{{text2}}</p>
</div>
<van-popup
:show="contentShow"
custom-style="width:80vw;height:80vh;background:#fff;"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="posterWrap">
<div v-html="content"></div>
</div>
<div class="posterWrap_btn">
<div @click="conF">我已阅读并同意</div>
</div>
</van-popup>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "",
props: {
render: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: () => {
return {
componentData: {},
};
},
},
content: {
type: String,
default: "用户隐私协议",
},
},
data() {
return {
checked: false,
contentShow: false,
};
},
components: {},
computed: {
positionType() {
return this.datas.componentData.positionType;
},
text1() {
return this.datas.componentData.text1;
},
text2() {
return this.datas.componentData.text2;
},
paddingTop() {
return this.datas.componentData.paddingTop;
},
paddingBottom() {
return this.datas.componentData.paddingBottom;
},
textSize() {
return this.datas.componentData.textSize;
},
},
created() {},
mounted() {},
methods: {
conF() {
if (!this.render) return;
this.contentShow = false;
this.checked = true;
this.$emit("conF");
},
conF1() {
this.checked = !this.checked;
this.$emit("conF");
},
closeDia() {
if (!this.render) return;
this.contentShow = false;
},
},
};
</script>
<style lang="scss" scoped>
.loginUserAgreement {
width: 100%;
.readAgreement {
width: 100%;
font-size: 12px;
display: flex;
justify-content: center;
color: #1989fa;
align-items: center;
.link{
flex-shrink: 0;
}
}
.posterWrap {
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 0 16px;
padding-bottom: 46px;
}
.posterWrap_btn {
position: absolute;
bottom: 0px;
background: #fff;
width: 100%;
height: 46px;
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 5px;
div {
padding: 0 20px;
color: #fff;
background-color: red;
border-radius: 20px;
line-height: 36px;
height: 36px;
}
}
}
</style>
src/pages/login/main.json
......@@ -4,5 +4,6 @@
"van-checkbox": "/static/vant/checkbox/index",
"van-popup":"/static/vant/popup/index",
"van-icon":"/static/vant/icon/index"
}
},
"navigationStyle":"custom"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment