other_project/mallplus
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2023-02-22 完善页面样式

Browse Source
This commit is contained in:
guoxing
2023-02-22 20:24:25 +08:00
parent 515ae22389
commit c64e72109e
4 changed files with 303 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
mallplusui-uniapp-app/pages/index/messageDetail.vue
View File

@@ -91,7 +91,8 @@
display: flex;
margin-top: 10px;
height: 850px;
padding: 10rpx;
font-size: 28px;
padding: 20upx 30upx;
background-color: #fff;
}

202
mallplusui-uniapp-app/pages/public/login.vue
View File

@@ -1,100 +1,104 @@
<template>
<view class="container">
<view class="left-bottom-sign"></view>
<!-- <view class="left-bottom-sign"></view> -->
<!-- <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view> -->
<view class="right-top-sign"></view>
<!-- <view class="right-top-sign"></view> -->
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
<!-- <view class="left-top-sign">{{ sysInfo.name }}LOGIN</view> -->
<view class="welcome">欢迎回来！汇融云链</view>
<view class="wrapper">
<!-- #ifdef H5 -->
<view class="input-content">
<view class="select_lay">
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===0}" @click="selectType(0)">免密登录</text>
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">账号登录</text>
</view>
<view class="input-item">
<text class="tit">手机号码</text>
<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" />
</view>
<view class="input-item" v-if="show">
<text class="tit">密码</text>
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
</view>
<view class="input-item" v-if="!show">
<text class="tit">验证码</text>
<view class="input-item-right">
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin"
style="width: 70%;" />
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
<view class="authTime" v-else>{{ auth_time }}秒</view>
<view class="welcome">汇融云链欢迎您</view>
<view class="wrapper">
<!-- #ifdef H5 -->
<view class="input-content">
<view class="select_lay">
<text :class="{'select_lay_text1':selectKey===0}"
@click="selectType(0)">账号登录</text>
<text style="margin-left: 20px;" :class="{'select_lay_text1':selectKey===1}"
@click="selectType(1)">短信登录</text>
</view>
<view class="input-item">
<text class="tit">手机号码</text>
<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" />
</view>
<view class="input-item" v-if="show">
<text class="tit">密码</text>
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
</view>
<view class="input-item" v-if="!show">
<text class="tit">验证码</text>
<view class="input-item-right">
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin"
style="width: 70%;" />
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
<view class="authTime" v-else>{{ auth_time }}秒</view>
</view>
</view>
</view>
</view>
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
<view class="login_bot">
<view class="forget-section" @click="toForget">忘记密码?</view>
<view class="register-section">
还没有账号?
<text @click="toRegist">马上注册</text>
</view>
</view>
<br />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true"
v-if="isGetPhone == false">微信登录</button>
<button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
v-if="isGetPhone == true">获取手机号</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="input-content">
<view class="select_lay">
<text :class="{'select_lay_text1':selectKey===0}" @click="selectType(0)">免密登录</text>
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">账号登录</text>
</view>
<view class="input-item">
<text class="tit">手机号码</text>
<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" />
</view>
<view class="input-item" v-if="show">
<text class="tit">密码</text>
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
</view>
<view class="input-item" v-if="!show">
<text class="tit">验证码</text>
<view class="input-item-right">
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin"
style="width: 70%;" />
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
<view class="authTime" v-else>{{ auth_time }}秒</view>
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
<view class="login_bot">
<view class="forget-section" @click="toForget">忘记密码?</view>
<view class="register-section">
还没有账号?
<text @click="toRegist">马上注册</text>
</view>
</view>
</view>
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
<!-- <button v-if="isWeiXin == 1" class="confirm-btn" @click="wechatH5Login" :disabled="logining">微信授权登录</button> -->
<view class="login_bot">
<view class="forget-section" @click="toForget">忘记密码?</view>
<view class="register-section">
还没有账号?
<text @click="toRegist">马上注册</text>
<br />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button class="confirm-btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true"
v-if="isGetPhone == false">微信登录</button>
<button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
v-if="isGetPhone == true">获取手机号</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="input-content">
<view class="select_lay">
<text :class="{'select_lay_text1':selectKey===0}"
@click="selectType(0)">账号登录</text>
<text style="margin-left: 20px;" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">短信登录</text>
</view>
<view class="input-item">
<text class="tit">手机号码</text>
<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" />
</view>
<view class="input-item" v-if="show">
<text class="tit">密码</text>
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
</view>
<view class="input-item" v-if="!show">
<text class="tit">验证码</text>
<view class="input-item-right">
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin"
style="width: 70%;" />
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
<view class="authTime" v-else>{{ auth_time }}秒</view>
</view>
</view>
</view>
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
<!-- <button v-if="isWeiXin == 1" class="confirm-btn" @click="wechatH5Login" :disabled="logining">微信授权登录</button> -->
<view class="login_bot">
<view class="forget-section" @click="toForget">忘记密码?</view>
<view class="register-section">
还没有账号?
<text @click="toRegist">马上注册</text>
</view>
</view>
<br />
<!-- #endif -->
</view>
<br />
<!-- #endif -->
</view>
<!-- <mallplusCopyright></mallplusCopyright> -->
</view>
@@ -114,8 +118,8 @@
},
data() {
return {
show: false,
selectKey:0,
show: true,
selectKey: 0,
code: '',
coding: false,
auth_time: 60,
@@ -140,10 +144,10 @@
},
methods: {
...mapMutations(['login']),
selectType(index){
this.selectKey=index
selectType(index) {
this.selectKey = index
this.show = !this.show
},
inputChange(e) {
const key = e.currentTarget.dataset.key;
@@ -487,17 +491,17 @@
async toLogin() {
var that = this;
let phoneReg = /^1[1-9][0-9]\d{8}$/;
if(that.selectKey==0){
// 免密登录
if (that.selectKey == 1) {
// 短信登录
uni.showToast({
icon: 'none',
title: '暂不支持此登录方式'
});
return;
}else{
} else {
// 账号登录
try {
if (this.phone == '') {
throw '请填写手机号';
@@ -535,7 +539,7 @@
});
}
}
},
getuserinfoh5appwx() {
var that = this;
@@ -701,7 +705,7 @@
align-items: center;
.select_lay_text {
margin-left: 30upx;
}
.select_lay_text1 {
@@ -792,7 +796,7 @@
.login_bot {
display: flex;
margin-top: 15upx;
margin-top: 25upx;
margin-left: 70upx;
margin-right: 70upx;
flex-direction: row;

2
mallplusui-uniapp-app/pagesU/user/coupon.vue
View File

@@ -288,7 +288,7 @@ import Api from '@/common/api';
/* #ifdef H5 || MP-WEIXIN*/
width: 100% !important;
/* #endif */
width: 94%;
width: 100%;
height: 95upx;
padding: 0 3%;
border-bottom: solid 1upx #dedede;

367
mallplusui-uniapp-app/pagesU/user/profile.vue
View File

@@ -1,190 +1,217 @@
<template>
<view class="container">
<view class="list-cell b-b m-t" @click="upImg" :hover-stay-time="50" style="display: flex;align-items: center;">
<text class="cell-tit">我的头像</text>
<view class="" style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;">
<image v-if="userInfos && userInfos.icon" :src="userInfos.icon" style="border-radius: 50%;width: 100upx;height: 100upx;"></image>
<text class="cell-more yticon icon-you"></text>
</view>
</view>
<view class="list-cell b-b m-t" @click="inputShowModal('nickname')" hover-class="cell-hover" :hover-stay-time="50">
<text class="cell-tit" v-if="userInfos && userInfos.nickname">修改昵称:{{userInfos.nickname|| ''}}</text>
<view class="container">
<view class="list-cell b-b m-t" @click="upImg" :hover-stay-time="50" style="display: flex;align-items: center;">
<text class="cell-tit">我的头像</text>
<view class=""
style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;">
<image v-if="userInfos && userInfos.icon" :src="userInfos.icon"
style="border-radius: 50%;width: 100upx;height: 100upx;"></image>
<text class="cell-more yticon icon-you"></text>
</view>
<view class="list-cell b-b" @click="genderShowModal" hover-class="cell-hover" :hover-stay-time="50">
<text class="cell-tit">修改性别</text>
<text class="cell-more yticon icon-you"></text>
</view>
<neil-modal :show="inputShow" @close="cancel" title="编辑" @cancel="cancel" @confirm="confirm">
<input v-model="inputContent" style="margin:20upx" placeholder="请输入..." />
</neil-modal>
<neil-modal :show="genderShow" @close="cancel" title="选择性别" @cancel="cancel" @confirm="confirmGender">
<view>
<radio-group style="text-align:center" @change="genderRadioChange">
<label v-for="(item, index) in genders" :key="item.value">
<radio :value="item.value" :checked="index === current" style="margin:10upx" />
{{ item.name }}
</label>
</radio-group>
</view>
</neil-modal>
</view>
<view class="list-cell b-b m-t" @click="inputShowModal('nickname')" hover-class="cell-hover"
:hover-stay-time="50">
<text class="cell-tit" v-if="userInfos && userInfos.nickname">修改昵称:{{userInfos.nickname|| ''}}</text>
<text class="cell-more yticon icon-you"></text>
</view>
<view class="list-cell b-b" @click="genderShowModal" hover-class="cell-hover" :hover-stay-time="50">
<text class="cell-tit">修改性别</text>
<text class="cell-more yticon icon-you"></text>
</view>
<neil-modal :show="inputShow" @close="cancel" title="编辑" @cancel="cancel" @confirm="confirm">
<input v-model="inputContent" style="margin:20upx" placeholder="请输入..." />
</neil-modal>
<neil-modal :show="genderShow" @close="cancel" title="选择性别" @cancel="cancel" @confirm="confirmGender">
<view>
<radio-group style="text-align:center" @change="genderRadioChange">
<label v-for="(item, index) in genders" :key="item.value">
<radio :value="item.value" :checked="index === current" style="margin:10upx" />
{{ item.name }}
</label>
</radio-group>
</view>
</neil-modal>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import neilModal from '@/components/neil-modal.vue';
import { mapState, mapMutations } from 'vuex';
export default {
components: {
neilModal
},
data() {
return {
inputShow: false,
feild: undefined,
inputContent: '',
genderShow: false,
gender: undefined,
genders: [{ name: '保密', value: 0 }, { name: '男', value: 1 }, { name: '女', value: 2 }],
userInfos: {},
sourceTypeIndex: 0,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 0,
sizeType: ['压缩', '原图', '压缩或原图'],
};
},
async onShow() {
let params = { };
let data = await Api.apiCall('get', Api.index.userSampleInfo, params);
this.userInfos=data;
console.log(this.userInfos);
},
async onLoad() {
let params = { };
let data = await Api.apiCall('get', Api.index.userSampleInfo, params);
this.userInfos=data;
console.log(this.userInfos);
},
methods: {
upImg(){
this.$otherApi.uploadFiles(res => {
if (res.code == 200) {
this.userInfos.icon = res.data;
let obj = {
id:1,
icon: res.data
};
Api.apiCall('post', Api.member.updateMember, obj);
that.$api.msg('修改成功');
} else {
this.$common.errorToShow(res.msg)
}
})
import Api from '@/common/api';
import neilModal from '@/components/neil-modal.vue';
import {
mapState,
mapMutations
} from 'vuex';
export default {
components: {
neilModal
},
cancel() {
this.inputShow = false;
this.genderShow = false;
},
inputShowModal(feild) {
this.feild = feild;
this.inputShow = true;
this.inputContent = '';
},
genderShowModal() {
this.genderShow = true;
this.gender = undefined;
},
confirm() {
const that = this;
if (!that.inputContent) {
that.$api.msg('输入不能为空');
return;
}
let obj = { id:1};
obj[that.feild] = that.inputContent;
Api.apiCall('post', Api.member.updateMember, obj);
that.$api.msg('修改成功');
that.userInfos[that.feild] = that.inputContent
},
genderRadioChange(e) {
this.gender = parseInt(e.detail.value);
},
confirmGender() {
const that = this;
if (that.gender === undefined) {
that.$api.msg('请选择性别');
return;
}
let obj = {
id:1,
gender: that.gender
data() {
return {
inputShow: false,
feild: undefined,
inputContent: '',
genderShow: false,
gender: undefined,
genders: [{
name: '保密',
value: 0
}, {
name: '男',
value: 1
}, {
name: '女',
value: 2
}],
current: 0,
userInfos: {},
sourceTypeIndex: 0,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 0,
sizeType: ['压缩', '原图', '压缩或原图'],
};
Api.apiCall('post', Api.member.updateMember, obj);
that.$api.msg('修改成功');
},
async onShow() {
let params = {};
let data = await Api.apiCall('get', Api.index.userSampleInfo, params);
this.userInfos = data;
console.log(this.userInfos);
},
async onLoad() {
let params = {};
let data = await Api.apiCall('get', Api.index.userSampleInfo, params);
this.userInfos = data;
console.log(this.userInfos);
},
methods: {
upImg() {
this.$otherApi.uploadFiles(res => {
if (res.code == 200) {
this.userInfos.icon = res.data;
let obj = {
id: 1,
icon: res.data
};
Api.apiCall('post', Api.member.updateMember, obj);
that.$api.msg('修改成功');
} else {
this.$common.errorToShow(res.msg)
}
})
},
cancel() {
this.inputShow = false;
this.genderShow = false;
},
inputShowModal(feild) {
this.feild = feild;
this.inputShow = true;
this.inputContent = '';
},
genderShowModal() {
this.genderShow = true;
this.gender = undefined;
},
confirm() {
const that = this;
if (!that.inputContent) {
that.$api.msg('输入不能为空');
return;
}
let obj = {
id: 1
};
obj[that.feild] = that.inputContent;
Api.apiCall('post', Api.member.updateMember, obj);
that.$api.msg('修改成功');
that.userInfos[that.feild] = that.inputContent
},
genderRadioChange(e) {
this.gender = parseInt(e.detail.value);
},
confirmGender() {
const that = this;
if (that.gender === undefined) {
that.$api.msg('请选择性别');
return;
}
let obj = {
id: 1,
gender: that.gender
};
Api.apiCall('post', Api.member.updateMember, obj);
that.$api.msg('修改成功');
}
}
}
};
};
</script>
<style lang="scss">
page {
background: $page-color-base;
}
page {
background: $page-color-base;
}
page {
background: $page-color-base;
}
.list-cell {
display: flex;
align-items: baseline;
padding: 20upx;
line-height: 60upx;
position: relative;
background: #fff;
justify-content: center;
&.log-out-btn {
margin-top: 40upx;
.cell-tit {
color: $uni-color-primary;
text-align: center;
margin-right: 0;
}
}
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30upx;
}
&.m-t {
margin-top: 16upx;
}
.cell-more {
align-self: baseline;
font-size: $font-lg;
color: $font-color-light;
margin-left: 10upx;
}
page {
background: $page-color-base;
}
.list-cell {
display: flex;
align-items: baseline;
padding: 20upx;
line-height: 60upx;
position: relative;
background: #fff;
justify-content: center;
&.log-out-btn {
margin-top: 40upx;
.cell-tit {
color: $uni-color-primary;
text-align: center;
margin-right: 0;
flex: 1;
font-size: $font-base + 2upx;
color: $font-color-dark;
margin-right: 10upx;
}
.cell-tip {
font-size: $font-base;
color: $font-color-light;
}
switch {
transform: translateX(16upx) scale(0.84);
}
}
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30upx;
}
&.m-t {
margin-top: 16upx;
}
.cell-more {
align-self: baseline;
font-size: $font-lg;
color: $font-color-light;
margin-left: 10upx;
}
.cell-tit {
flex: 1;
font-size: $font-base + 2upx;
color: $font-color-dark;
margin-right: 10upx;
}
.cell-tip {
font-size: $font-base;
color: $font-color-light;
}
switch {
transform: translateX(16upx) scale(0.84);
}
}
</style>