Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 29714c79 by fanx
Options

用户模块 中英文

1 parent c14133b9
Inline Side-by-side
Showing 10 changed files with 147 additions and 63 deletions
src/assets/css/sprite.less
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 1292px; }
.icon-bg-common { width: 828px; height: 360px; background-position: -848px -526px; }
.icon-bg-login-2 { width: 828px; height: 506px; background-position: 0px 0px; }
.icon-bg-login { width: 828px; height: 412px; background-position: -848px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: 0px -526px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: 0px -952px; }
.icon-email { width: 36px; height: 36px; background-position: -848px -432px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -848px -488px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -1572px -432px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1622px -432px; }
.icon-logo { width: 224px; height: 224px; background-position: -848px -952px; }
.icon-password { width: 36px; height: 36px; background-position: -904px -432px; }
.icon-tel { width: 36px; height: 36px; background-position: -960px -432px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1520px -432px; }
.icon-user { width: 36px; height: 36px; background-position: -1016px -432px; }
.icon-verification { width: 36px; height: 36px; background-position: -1072px -432px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1374px -952px; }
.icon-center-question { width: 36px; height: 36px; background-position: -1128px -432px; }
.icon-center-message { width: 36px; height: 36px; background-position: -1184px -432px; }
.icon-center-study { width: 36px; height: 36px; background-position: -1240px -432px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -1296px -432px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -1352px -432px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -1408px -432px; }
.icon-center-about { width: 36px; height: 36px; background-position: -1464px -432px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1092px -952px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1236px -952px; }
\ No newline at end of file
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 2908px 1686px; }
.icon-bg-common { width: 828px; height: 360px; background-position: -2080px -858px; }
.icon-bg-login-2 { width: 828px; height: 506px; background-position: -1232px 0px; }
.icon-bg-login { width: 828px; height: 412px; background-position: -2080px 0px; }
.icon-bg-member-result { width: 1212px; height: 717px; background-position: 0px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: -2080px -432px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: -2080px -1238px; }
.icon-center-about { width: 36px; height: 36px; background-position: -2319px -1598px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -2375px -1598px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -2431px -1598px; }
.icon-center-message { width: 36px; height: 36px; background-position: -2487px -1598px; }
.icon-center-question { width: 36px; height: 36px; background-position: -2543px -1598px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -2599px -1598px; }
.icon-center-study { width: 36px; height: 36px; background-position: -2655px -1598px; }
.icon-change-member { width: 90px; height: 90px; background-position: -1514px -526px; }
.icon-change-membership { width: 1155px; height: 303px; background-position: 0px -737px; }
.icon-change-name { width: 1155px; height: 303px; background-position: 0px -1060px; }
.icon-change-representive { width: 1155px; height: 303px; background-position: 0px -1383px; }
.icon-email { width: 36px; height: 36px; background-position: -2711px -1598px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2879px -1598px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -2008px -526px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1844px -582px; }
.icon-join-member { width: 90px; height: 90px; background-position: -1624px -526px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; }
.icon-logo { width: 224px; height: 224px; background-position: -1175px -737px; }
.icon-password { width: 36px; height: 36px; background-position: -2767px -1598px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; }
.icon-quit-member { width: 90px; height: 90px; background-position: -1734px -526px; }
.icon-shtyxydm { width: 54px; height: 54px; background-position: -2180px -1598px; }
.icon-tel { width: 36px; height: 36px; background-position: -2823px -1598px; }
.icon-time-update { width: 45px; height: 45px; background-position: -2254px -1598px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1956px -526px; }
.icon-user { width: 36px; height: 36px; background-position: -1844px -526px; }
.icon-verification { width: 36px; height: 36px; background-position: -1900px -526px; }
.icon-wechat { width: 80px; height: 78px; background-position: -2080px -1598px; }
\ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

628 KB | W: | H:

src/assets/images/sprite.png

1.47 MB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/i18n/lang/index.js
// 全局公用模块
import button from './button/index'
import placeholder from './placeholder/index'
import toast from './toast/index'
// 单独页面模块
......@@ -12,7 +11,6 @@ const messages = {
en: {
lang: 'English',
...button.buttonEn,
...placeholder.placeholderEn,
...toast.toastEn,
...title.titleEn,
......@@ -23,7 +21,6 @@ const messages = {
zh: {
lang: "中文",
...button.buttonZn,
...placeholder.placeholderZn,
...toast.toastZn,
...title.titleZn,
......
src/i18n/lang/placeholder/index.js deleted 100644 → 0
const placeholderEn = {
userName: 'please input username',
}
const placeholderZn = {
userName: '请输入用户名',
}
export default {
placeholderEn,
placeholderZn
};
\ No newline at end of file
src/i18n/lang/toast/index.js
......@@ -7,7 +7,8 @@ const toastEn = {
tipMessage: 'After you unbind wechat, you will not be able to use wechat to log in quickly. Are you sure you want to unbind it',
verification: 'please input verification code',
unbindingSuccess: 'Finish!',
resetSuccess: 'Reset Successful'
resetSuccess: 'Reset Successful',
isEmptyContent: 'Do you want to clear all data?',
}
}
......@@ -20,7 +21,8 @@ const toastZn = {
tipMessage: '解除微信绑定后，将无法使用微信快速登录，你确定解除吗？',
verification: '请输入验证码',
unbindingSuccess: '解绑成功！',
resetSuccess: '重置成功！'
resetSuccess: '重置成功！',
isEmptyContent: '是否要清空全部数据？',
}
}
export default {
......
src/i18n/lang/user/index.js
......@@ -11,14 +11,22 @@ const userEn = {
person: {
photo: 'Photo',
nickName: 'NickName',
nickNamePlaceholder: 'Please input your nickname',
phoneNumber: 'PhoneNumber',
name: 'Name',
namePlaceholder: 'Please input your name',
nationality: 'Nationality',
nationalityPlaceholder: 'Please select your Nationality',
birthday: 'BirthDay',
birthdayPlaceholder: 'Please select your Nationality',
email: 'Email',
company: 'Company'
emailPlaceholder: 'Please select your Nationality',
company: 'Company',
companyPlaceholder: 'Please select your Nationality',
},
center: {
login: 'Login',
konwMore: 'Know More Information',
message: 'Message',
collect: 'Collection',
study: 'Study',
......@@ -42,14 +50,22 @@ const userZh = {
person: {
photo: '头像',
nickName: '昵称',
nickNamePlaceholder: '请输入您的昵称',
phoneNumber: '手机号',
name: '姓名',
namePlaceholder: '请输入您的姓名',
nationality: '国籍',
namePlaceholder: '请选择您的国籍',
birthday: '出生日',
birthdayPlaceholder: '请选择您的出生日',
email: '邮箱',
company: '单位'
emailPlaceholder: '请输入您的邮箱',
company: '单位',
companyPlaceholder: '请选择您的单位',
},
center: {
login: '立即登录',
konwMore: '登录后可了解更多信息',
message: '我的消息',
collect: '我的收藏',
study: '我的学习',
......
src/utils/vant-ui.js
......@@ -22,7 +22,10 @@ import {
Popup,
Swipe,
SwipeItem,
Uploader
Uploader,
List,
PullRefresh,
SwipeCell
} from 'vant'
import NafmHeader from '@/components/NafmHeader'
......@@ -32,7 +35,34 @@ import FooterBottom from '@/components/FooterBottom'
[NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
// 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox, Picker, Popup, Swipe, SwipeItem, Uploader].forEach(item => Vue.use(item))
[
Loading,
Lazyload,
Tab,
Tabs,
Toast,
Dialog,
Icon,
Form,
Field,
Switch,
Overlay,
Cell,
CellGroup,
ActionSheet,
Button,
Step,
Steps,
Checkbox,
Picker,
Popup,
Swipe,
SwipeItem,
Uploader,
List,
PullRefresh,
SwipeCell
].forEach(item => Vue.use(item))
// 先预制，后期做统一调整
Object.assign(window, {
......
src/views/user/center.vue
......@@ -11,8 +11,8 @@
<div class="phone">183****8924</div>
</div>
<div class="right_txt" v-else>
<div class="nick">立即登录</div>
<div class="phone">登录后可了解更多信息</div>
<div class="nick">{{$t('center.login')}}</div>
<div class="phone">{{$t('center.konwMore')}}</div>
</div>
<div class="iconfont iconright"></div>
</div>
......
src/views/user/collect/index.vue
<template>
<div>
<div class="collect_container">
<NafmHeader navClass="nafmii-head-bg3" :title="$t('title.collect')">
<template #right>
<div @click="handleClear">{{$t('button.clear')}}</div>
</template>
</NafmHeader>
<div class="collect_content">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div class="">
</div>
<template #right>
<van-button square text="删除" type="danger" class="delete-button" />
</template>
</van-list>
</div>
</div>
</template>
<script>
export default {
name: 'Collect',
data() {
return {
loading: false,
finished: false,
list: [
{
date: '2020-04-11',
content: [{
title: '《1中国银行间市场交易商协会会员代表大会会员代表产生办法》（协会公告[2011]10号）',
type: '自律规则'
}, {
title: '《2中国银行间市场交易商协会会员代表大会会员代表产生办法》（协会公告[2011]10号）',
type: '自律规则'
}]
},
{
date: '2020-04-10',
content: [{
title: '《3中国银行间市场交易商协会会员代表大会会员代表产生办法》（协会公告[2011]10号）',
type: '自律规则'
}, {
title: '《4中国银行间市场交易商协会会员代表大会会员代表产生办法》（协会公告[2011]10号）',
type: '自律规则'
}]
}
]
}
},
methods: {
......@@ -20,10 +55,10 @@ export default {
handleClear() {
Dialog.confirm({
title: this.$t('toast.tip'),
message: this.$t('toast.tipMessage'),
cancelButtonText: this.$t('button.clickWrong'),
message: this.$t('toast.isEmptyContent'),
cancelButtonText: this.$t('button.cancel'),
cancelButtonColor: '#206CB3',
confirmButtonText: this.$t('button.okUnbinding'),
confirmButtonText: this.$t('button.ok'),
confirmButtonColor: '#999999'
})
.then(() => {
......@@ -31,6 +66,11 @@ export default {
})
.catch(() => {
});
},
// 页面滚动到底部加载数据
onLoad() {
this.loading = false
console.log('加载数据')
}
}
}
......
src/views/user/person/index.vue
<template>
<div class="person_cantainer">
<NafmHeader />
<NafmHeader :title="$t('title.person')" navClass="nafmii-head-bg3" />
<div class="setting_list">
<van-cell title="头像" center is-link value-class="right_content">
<van-cell :title="$t('person.photo')" center is-link value-class="right_content">
<template #default>
<img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt="">
</template>
</van-cell>
<van-cell title="用户名" center is-link @click="editUserName('设置用户名',userName)" value-class="right_content">
<van-cell :title="$t('person.nickName')" center is-link @click="editUserName('设置用户名',userName)" value-class="right_content">
<template #default>
<span v-if="userName">{{userName}}</span>
<span v-else>请输入您的用户名</span>
<span v-else>{{$t('person.nickNamePlaceholder')}}</span>
</template>
</van-cell>
<van-cell title="手机号" center value-class="right_content">
<van-cell :title="$t('person.phoneNumber')" center value-class="right_content">
<template #default>
183****8924
</template>
</van-cell>
<van-cell title="姓名" center is-link @click="editUserName('设置姓名',name)" value-class="right_content">
<van-cell :title="$t('person.name')" center is-link @click="editUserName('设置姓名',name)" value-class="right_content">
<template #default>
<span v-if="name">{{name}}</span>
<span v-else>请输入您的姓名</span>
<span v-else>{{$t('person.namePlaceholder')}}</span>
</template>
</van-cell>
<van-cell title="国籍" center is-link value-class="right_content">
<van-cell :title="$t('person.nationality')" center is-link value-class="right_content">
<template #default>中国</template>
</van-cell>
<van-cell title="出生日期" center is-link value-class="right_content">
<van-cell :title="$t('person.birthday')" center is-link value-class="right_content">
<template #default>
<span v-if="name">{{name}}</span>
<span v-else>请选择您的出生日期</span>
</template>
</van-cell>
<van-cell title="邮箱" center is-link @click="editUserName('设置邮箱',email)" value-class="right_content">
<van-cell :title="$t('person.email')" center is-link @click="editUserName('设置邮箱',email)" value-class="right_content">
<template #default>
<span v-if="name">{{email}}</span>
<span v-else>请输入您的邮箱</span>
</template>
</van-cell>
<van-cell title="单位" center is-link @click="editUserName('设置单位',company)" value-class="right_content">
<van-cell :title="$t('person.company')" center is-link @click="editUserName('设置单位',company)" value-class="right_content">
<template #default>
<span v-if="name">{{company}}</span>
<span v-else>请输入您的单位全称</span>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!