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 148 additions and 64 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 \ 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 \ 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 button from './button/index'
import placeholder from './placeholder/index'
import toast from './toast/index' import toast from './toast/index'
// 单独页面模块 // 单独页面模块
...@@ -12,7 +11,6 @@ const messages = { ...@@ -12,7 +11,6 @@ const messages = {
en: { en: {
lang: 'English', lang: 'English',
...button.buttonEn, ...button.buttonEn,
...placeholder.placeholderEn,
...toast.toastEn, ...toast.toastEn,
...title.titleEn, ...title.titleEn,
...@@ -23,7 +21,6 @@ const messages = { ...@@ -23,7 +21,6 @@ const messages = {
zh: { zh: {
lang: "中文", lang: "中文",
...button.buttonZn, ...button.buttonZn,
...placeholder.placeholderZn,
...toast.toastZn, ...toast.toastZn,
...title.titleZn, ...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 \ No newline at end of file
src/i18n/lang/toast/index.js
...@@ -7,7 +7,8 @@ const toastEn = { ...@@ -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', 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', verification: 'please input verification code',
unbindingSuccess: 'Finish!', unbindingSuccess: 'Finish!',
resetSuccess: 'Reset Successful' resetSuccess: 'Reset Successful',
isEmptyContent: 'Do you want to clear all data?',
} }
} }
...@@ -20,7 +21,8 @@ const toastZn = { ...@@ -20,7 +21,8 @@ const toastZn = {
tipMessage: '解除微信绑定后，将无法使用微信快速登录，你确定解除吗？', tipMessage: '解除微信绑定后，将无法使用微信快速登录，你确定解除吗？',
verification: '请输入验证码', verification: '请输入验证码',
unbindingSuccess: '解绑成功！', unbindingSuccess: '解绑成功！',
resetSuccess: '重置成功！' resetSuccess: '重置成功！',
isEmptyContent: '是否要清空全部数据？',
} }
} }
export default { export default {
......
src/i18n/lang/user/index.js
...@@ -11,14 +11,22 @@ const userEn = { ...@@ -11,14 +11,22 @@ const userEn = {
person: { person: {
photo: 'Photo', photo: 'Photo',
nickName: 'NickName', nickName: 'NickName',
nickNamePlaceholder: 'Please input your nickname',
phoneNumber: 'PhoneNumber', phoneNumber: 'PhoneNumber',
name: 'Name', name: 'Name',
namePlaceholder: 'Please input your name',
nationality: 'Nationality', nationality: 'Nationality',
nationalityPlaceholder: 'Please select your Nationality',
birthday: 'BirthDay', birthday: 'BirthDay',
birthdayPlaceholder: 'Please select your Nationality',
email: 'Email', email: 'Email',
company: 'Company' emailPlaceholder: 'Please select your Nationality',
company: 'Company',
companyPlaceholder: 'Please select your Nationality',
}, },
center: { center: {
login: 'Login',
konwMore: 'Know More Information',
message: 'Message', message: 'Message',
collect: 'Collection', collect: 'Collection',
study: 'Study', study: 'Study',
...@@ -42,14 +50,22 @@ const userZh = { ...@@ -42,14 +50,22 @@ const userZh = {
person: { person: {
photo: '头像', photo: '头像',
nickName: '昵称', nickName: '昵称',
nickNamePlaceholder: '请输入您的昵称',
phoneNumber: '手机号', phoneNumber: '手机号',
name: '姓名', name: '姓名',
namePlaceholder: '请输入您的姓名',
nationality: '国籍', nationality: '国籍',
namePlaceholder: '请选择您的国籍',
birthday: '出生日', birthday: '出生日',
birthdayPlaceholder: '请选择您的出生日',
email: '邮箱', email: '邮箱',
company: '单位' emailPlaceholder: '请输入您的邮箱',
company: '单位',
companyPlaceholder: '请选择您的单位',
}, },
center: { center: {
login: '立即登录',
konwMore: '登录后可了解更多信息',
message: '我的消息', message: '我的消息',
collect: '我的收藏', collect: '我的收藏',
study: '我的学习', study: '我的学习',
......
src/utils/vant-ui.js
...@@ -20,9 +20,12 @@ import { ...@@ -20,9 +20,12 @@ import {
Checkbox, Checkbox,
Picker, Picker,
Popup, Popup,
Swipe, Swipe,
SwipeItem, SwipeItem,
Uploader Uploader,
List,
PullRefresh,
SwipeCell
} from 'vant' } from 'vant'
import NafmHeader from '@/components/NafmHeader' import NafmHeader from '@/components/NafmHeader'
...@@ -32,7 +35,34 @@ import FooterBottom from '@/components/FooterBottom' ...@@ -32,7 +35,34 @@ import FooterBottom from '@/components/FooterBottom'
[NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item)); [NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
// 默认vant组件 // 默认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, { Object.assign(window, {
......
src/views/user/center.vue
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<div class="phone">183****8924</div> <div class="phone">183****8924</div>
</div> </div>
<div class="right_txt" v-else> <div class="right_txt" v-else>
<div class="nick">立即登录</div> <div class="nick">{{$t('center.login')}}</div>
<div class="phone">登录后可了解更多信息</div> <div class="phone">{{$t('center.konwMore')}}</div>
</div> </div>
<div class="iconfont iconright"></div> <div class="iconfont iconright"></div>
</div> </div>
......
src/views/user/collect/index.vue
<template> <template>
<div> <div class="collect_container">
<NafmHeader navClass="nafmii-head-bg3" :title="$t('title.collect')"> <NafmHeader navClass="nafmii-head-bg3" :title="$t('title.collect')">
<template #right> <template #right>
<div @click="handleClear">{{$t('button.clear')}}</div> <div @click="handleClear">{{$t('button.clear')}}</div>
</template> </template>
</NafmHeader> </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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Collect', name: 'Collect',
data() { data() {
return { 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: { methods: {
...@@ -20,10 +55,10 @@ export default { ...@@ -20,10 +55,10 @@ export default {
handleClear() { handleClear() {
Dialog.confirm({ Dialog.confirm({
title: this.$t('toast.tip'), title: this.$t('toast.tip'),
message: this.$t('toast.tipMessage'), message: this.$t('toast.isEmptyContent'),
cancelButtonText: this.$t('button.clickWrong'), cancelButtonText: this.$t('button.cancel'),
cancelButtonColor: '#206CB3', cancelButtonColor: '#206CB3',
confirmButtonText: this.$t('button.okUnbinding'), confirmButtonText: this.$t('button.ok'),
confirmButtonColor: '#999999' confirmButtonColor: '#999999'
}) })
.then(() => { .then(() => {
...@@ -31,6 +66,11 @@ export default { ...@@ -31,6 +66,11 @@ export default {
}) })
.catch(() => { .catch(() => {
}); });
},
// 页面滚动到底部加载数据
onLoad() {
this.loading = false
console.log('加载数据')
} }
} }
} }
......
src/views/user/person/index.vue
<template> <template>
<div class="person_cantainer"> <div class="person_cantainer">
<NafmHeader /> <NafmHeader :title="$t('title.person')" navClass="nafmii-head-bg3" />
<div class="setting_list"> <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> <template #default>
<img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt=""> <img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt="">
</template> </template>
</van-cell> </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> <template #default>
<span v-if="userName">{{userName}}</span> <span v-if="userName">{{userName}}</span>
<span v-else>请输入您的用户名</span> <span v-else>{{$t('person.nickNamePlaceholder')}}</span>
</template> </template>
</van-cell> </van-cell>
<van-cell title="手机号" center value-class="right_content"> <van-cell :title="$t('person.phoneNumber')" center value-class="right_content">
<template #default> <template #default>
183****8924 183****8924
</template> </template>
</van-cell> </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> <template #default>
<span v-if="name">{{name}}</span> <span v-if="name">{{name}}</span>
<span v-else>请输入您的姓名</span> <span v-else>{{$t('person.namePlaceholder')}}</span>
</template> </template>
</van-cell> </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> <template #default>中国</template>
</van-cell> </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> <template #default>
<span v-if="name">{{name}}</span> <span v-if="name">{{name}}</span>
<span v-else>请选择您的出生日期</span> <span v-else>请选择您的出生日期</span>
</template> </template>
</van-cell> </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> <template #default>
<span v-if="name">{{email}}</span> <span v-if="name">{{email}}</span>
<span v-else>请输入您的邮箱</span> <span v-else>请输入您的邮箱</span>
</template> </template>
</van-cell> </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> <template #default>
<span v-if="name">{{company}}</span> <span v-if="name">{{company}}</span>
<span v-else>请输入您的单位全称</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!