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; display: flex;
margin-top: 10px; margin-top: 10px;
height: 850px; height: 850px;
padding: 10rpx; font-size: 28px;
padding: 20upx 30upx;
background-color: #fff; background-color: #fff;
} }

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

@@ -1,100 +1,104 @@
<template> <template>
<view class="container"> <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="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="left-top-sign">{{ sysInfo.name }}LOGIN</view> -->
<view class="welcome">欢迎回来！汇融云链</view> <view class="welcome">汇融云链欢迎您</view>
<view class="wrapper"> <view class="wrapper">
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<view class="input-content"> <view class="input-content">
<view class="select_lay"> <view class="select_lay">
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===0}" @click="selectType(0)">免密登录</text> <text :class="{'select_lay_text1':selectKey===0}"
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">账号登录</text> @click="selectType(0)">账号登录</text>
<text style="margin-left: 20px;" :class="{'select_lay_text1':selectKey===1}"
@click="selectType(1)">短信登录</text>
</view> </view>
<view class="input-item"> <view class="input-item">
<text class="tit">手机号码</text> <text class="tit">手机号码</text>
<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" /> <input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" />
</view> </view>
<view class="input-item" v-if="show"> <view class="input-item" v-if="show">
<text class="tit">密码</text> <text class="tit">密码</text>
<input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" /> <input type="password" placeholder="请输入密码" v-model="password" @confirm="toLogin" />
</view> </view>
<view class="input-item" v-if="!show"> <view class="input-item" v-if="!show">
<text class="tit">验证码</text> <text class="tit">验证码</text>
<view class="input-item-right"> <view class="input-item-right">
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin" <input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" @confirm="toLogin"
style="width: 70%;" /> style="width: 70%;" />
<view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view> <view class="codeText" v-if="coding == false" @click="getCode()">获取验证码</view>
<view class="authTime" v-else>{{ auth_time }}秒</view> <view class="authTime" v-else>{{ auth_time }}秒</view>
</view>
</view> </view>
</view> </view>
</view> <button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button> <view class="login_bot">
<view class="login_bot"> <view class="forget-section" @click="toForget">忘记密码?</view>
<view class="forget-section" @click="toForget">忘记密码?</view>
<view class="register-section"> <view class="register-section">
还没有账号? 还没有账号?
<text @click="toRegist">马上注册</text> <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>
</view> </view>
</view> </view>
</view> <br />
<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button> <!-- #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 -->
<!-- <button v-if="isWeiXin == 1" class="confirm-btn" @click="wechatH5Login" :disabled="logining">微信授权登录</button> --> <!-- #ifdef APP-PLUS -->
<view class="login_bot"> <view class="input-content">
<view class="forget-section" @click="toForget">忘记密码?</view> <view class="select_lay">
<view class="register-section"> <text :class="{'select_lay_text1':selectKey===0}"
还没有账号? @click="selectType(0)">账号登录</text>
<text @click="toRegist">马上注册</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>
</view> <button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
<br />
<!-- #endif --> <!-- <button v-if="isWeiXin == 1" class="confirm-btn" @click="wechatH5Login" :disabled="logining">微信授权登录</button> -->
</view> <view class="login_bot">
<view class="forget-section" @click="toForget">忘记密码?</view>
<view class="register-section">
还没有账号?
<text @click="toRegist">马上注册</text>
</view>
</view>
<br />
<!-- #endif -->
</view>
<!-- <mallplusCopyright></mallplusCopyright> --> <!-- <mallplusCopyright></mallplusCopyright> -->
</view> </view>
@@ -114,8 +118,8 @@
}, },
data() { data() {
return { return {
show: false, show: true,
selectKey:0, selectKey: 0,
code: '', code: '',
coding: false, coding: false,
auth_time: 60, auth_time: 60,
@@ -140,8 +144,8 @@
}, },
methods: { methods: {
...mapMutations(['login']), ...mapMutations(['login']),
selectType(index){ selectType(index) {
this.selectKey=index this.selectKey = index
this.show = !this.show this.show = !this.show
}, },
@@ -488,14 +492,14 @@
var that = this; var that = this;
let phoneReg = /^1[1-9][0-9]\d{8}$/; let phoneReg = /^1[1-9][0-9]\d{8}$/;
if(that.selectKey==0){ if (that.selectKey == 1) {
// 免密登录 // 短信登录
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '暂不支持此登录方式' title: '暂不支持此登录方式'
}); });
return; return;
}else{ } else {
// 账号登录 // 账号登录
try { try {
@@ -701,7 +705,7 @@
align-items: center; align-items: center;
.select_lay_text { .select_lay_text {
margin-left: 30upx;
} }
.select_lay_text1 { .select_lay_text1 {
@@ -792,7 +796,7 @@
.login_bot { .login_bot {
display: flex; display: flex;
margin-top: 15upx; margin-top: 25upx;
margin-left: 70upx; margin-left: 70upx;
margin-right: 70upx; margin-right: 70upx;
flex-direction: row; 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*/ /* #ifdef H5 || MP-WEIXIN*/
width: 100% !important; width: 100% !important;
/* #endif */ /* #endif */
width: 94%; width: 100%;
height: 95upx; height: 95upx;
padding: 0 3%; padding: 0 3%;
border-bottom: solid 1upx #dedede; border-bottom: solid 1upx #dedede;

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

@@ -1,190 +1,217 @@
<template> <template>
<view class="container"> <view class="container">
<view class="list-cell b-b m-t" @click="upImg" :hover-stay-time="50" style="display: flex;align-items: center;"> <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> <text class="cell-tit">我的头像</text>
<view class="" style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;"> <view class=""
<image v-if="userInfos && userInfos.icon" :src="userInfos.icon" style="border-radius: 50%;width: 100upx;height: 100upx;"></image> style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;">
<text class="cell-more yticon icon-you"></text> <image v-if="userInfos && userInfos.icon" :src="userInfos.icon"
</view> style="border-radius: 50%;width: 100upx;height: 100upx;"></image>
</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> <text class="cell-more yticon icon-you"></text>
</view> </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>
<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> </template>
<script> <script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api'; import Api from '@/common/api';
import neilModal from '@/components/neil-modal.vue'; import neilModal from '@/components/neil-modal.vue';
import { mapState, mapMutations } from 'vuex'; import {
export default { mapState,
components: { mapMutations
neilModal } from 'vuex';
}, export default {
data() { components: {
return { neilModal
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)
}
})
}, },
cancel() { data() {
this.inputShow = false; return {
this.genderShow = false; inputShow: false,
}, feild: undefined,
inputShowModal(feild) { inputContent: '',
this.feild = feild; genderShow: false,
this.inputShow = true; gender: undefined,
this.inputContent = ''; genders: [{
}, name: '保密',
genderShowModal() { value: 0
this.genderShow = true; }, {
this.gender = undefined; name: '男',
}, value: 1
confirm() { }, {
const that = this; name: '女',
if (!that.inputContent) { value: 2
that.$api.msg('输入不能为空'); }],
return; current: 0,
} userInfos: {},
let obj = { id:1}; sourceTypeIndex: 0,
obj[that.feild] = that.inputContent; sourceType: ['拍照', '相册', '拍照或相册'],
Api.apiCall('post', Api.member.updateMember, obj); sizeTypeIndex: 0,
that.$api.msg('修改成功'); sizeType: ['压缩', '原图', '压缩或原图'],
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('修改成功'); 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> </script>
<style lang="scss"> <style lang="scss">
page { page {
background: $page-color-base; 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 { .cell-tit {
color: $uni-color-primary; flex: 1;
text-align: center; font-size: $font-base + 2upx;
margin-right: 0; 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> </style>