Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 3fd520ff by amateur
Options

Merge branch 'dev' of http://gitlab.polyhome.net/polysoft-nafmii/polysoft-h5 into dev

2 parents fd123c1b ecaddf9b
Inline Side-by-side
Showing 42 changed files with 675 additions and 173 deletions
src/assets/css/common.less
......@@ -17,6 +17,10 @@ body {
padding: 0;
}
img {
width: 100%;
}
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.iPhone {
......
src/assets/css/sprite.less
......@@ -18,18 +18,19 @@
.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-icon-classify { width: 30px; height: 30px; background-position: -1844px -582px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1894px -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-question-icon { width: 36px; height: 36px; background-position: -2823px -1598px; }
.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-tel { width: 36px; height: 36px; background-position: -1844px -526px; }
.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-user-question { width: 32px; height: 36px; background-position: -2012px -526px; }
.icon-user { width: 36px; height: 36px; background-position: -1900px -526px; }
.icon-verification { width: 36px; height: 36px; background-position: -1956px -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

1.47 MB | 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/components/NafmHeader.vue
......@@ -65,9 +65,6 @@ export default {
type: Boolean,
default: false
},
onBack: {
type: Function,
}
},
computed: {
...mapGetters('common', ['GStatusBarHeight']),
......@@ -99,7 +96,7 @@ export default {
methods: {
handleBack () {
if (this.showBack) {
this.onBack()
this.$emit('onBack')
} else {
this.$router.back()
}
......
src/components/SearchFirst.vue 0 → 100644
<template>
<div class="search_container" @click="jumpPage">
<van-icon name="search" color="#fff" size="18" class="search_first" />
<span class="text">{{placeholder}}</span>
</div>
</template>
<script>
export default {
name: 'SearchFirst',
props: {
placeholder: {
type: String
}
},
methods: {
jumpPage() {
this.$emit('jumpPage')
}
}
}
</script>
<style lang="less" scoped>
.search_container {
width: 384px;
margin: 10px auto;
display: flex;
height: 33px;
align-items: center;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: 16px;
.search_first {
opacity: 1;
margin-left: 10px;
margin-right: 5px;
}
.text {
color: #fff;
opacity: 0.8;
font-size: 12px;
}
}
</style>
\ No newline at end of file
src/i18n/lang/button/index.js
......@@ -7,7 +7,9 @@ const buttonEn = {
logout: 'Logout',
clickWrong: 'Cancel',
okUnbinding: 'Ok',
clear: 'Clear'
clear: 'Clear',
finish: 'Finish',
save: 'Save'
}
}
const buttonZn = {
......@@ -19,7 +21,9 @@ const buttonZn = {
logout: '退出登录',
clickWrong: '点错了',
okUnbinding: '确定解除',
clear: '清空'
clear: '清空',
finish: '完成',
save: '保存'
}
}
export default {
......
src/i18n/lang/index.js
......@@ -6,6 +6,7 @@ import toast from './toast/index'
import title from './title/index'
import user from './user/index'
import feedback from './feedback/index'
import question from './question/index'
const messages = {
en: {
......@@ -16,7 +17,7 @@ const messages = {
...title.titleEn,
...user.userEn,
...feedback.feedbackEn,
...question.questionEn,
},
zh: {
lang: "中文",
......@@ -26,7 +27,7 @@ const messages = {
...title.titleZn,
...user.userZh,
...feedback.feedbackZh,
...question.questionZh,
}
}
export default messages
\ No newline at end of file
src/i18n/lang/member/index.js 0 → 100644
const memberEn = {
login: {
language: 'Language', // 多语言
bindWechat: 'Binding Wechat', // 绑定微信
resetPassword: 'Reset Password', // 重置密码
privacyPolicy: 'Privacy Policy', //隐私政策
serviceAgreement: 'Service Agreement', // 服务协议
chinese: 'Chinese',
english: 'English',
},
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',
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',
question: 'Question',
feedBack: 'FeedBack',
about: 'About',
setting: 'Setting',
}
}
const memberZh = {
setting: {
language: '多语言',
bindWechat: '绑定微信',
resetPassword: '重置密码',
privacyPolicy: '隐私政策',
serviceAgreement: '服务协议',
chinese: '中文',
english: '英文',
},
person: {
photo: '头像',
nickName: '昵称',
nickNamePlaceholder: '请输入您的昵称',
phoneNumber: '手机号',
name: '姓名',
namePlaceholder: '请输入您的姓名',
nationality: '国籍',
namePlaceholder: '请选择您的国籍',
birthday: '出生日',
birthdayPlaceholder: '请选择您的出生日',
email: '邮箱',
emailPlaceholder: '请输入您的邮箱',
company: '单位',
companyPlaceholder: '请选择您的单位',
},
center: {
login: '立即登录',
konwMore: '登录后可了解更多信息',
message: '我的消息',
collect: '我的收藏',
study: '我的学习',
question: '常见问题',
feedBack: '意见反馈',
about: '关于协会',
setting: '设置',
}
}
export default {
memberEn,
memberZh
};
src/i18n/lang/question/index.js 0 → 100644
const questionEn = {
question: {
askPlaceholder: 'Please enter the question you want to ask',
classification: 'Classification',
question: 'Question'
}
}
const questionZh = {
question: {
askPlaceholder: '请输入您想咨询的问题',
classification: '问题分类',
question: '常见问题'
}
}
export default {
questionEn,
questionZh
};
\ No newline at end of file
src/i18n/lang/title/index.js
......@@ -13,7 +13,9 @@ const titleEn = {
privacyPolicy: 'Privacy Policy',
serviceAgreement: 'Service Agreement',
person: 'Personal',
photo: 'Edit Photo',
nickName: 'Edit NickName',
name: 'Edit Name',
email: 'Edit Email',
company: 'Edit Compnay',
}
......@@ -33,7 +35,9 @@ const titleZn = {
privacyPolicy: '隐私政策',
serviceAgreement: '服务协议',
person: '个人信息',
photo: '设置昵称',
nickName: '设置昵称',
name: '设置姓名',
email: '设置邮箱',
company: '设置单位'
}
......
src/i18n/lang/user/index.js
......@@ -18,11 +18,11 @@ const userEn = {
nationality: 'Nationality',
nationalityPlaceholder: 'Please select your Nationality',
birthday: 'BirthDay',
birthdayPlaceholder: 'Please select your Nationality',
birthdayPlaceholder: 'Please select your birthday',
email: 'Email',
emailPlaceholder: 'Please select your Nationality',
emailPlaceholder: 'Please input your email',
company: 'Company',
companyPlaceholder: 'Please select your Nationality',
companyPlaceholder: 'Please input your company',
},
center: {
login: 'Login',
......@@ -34,7 +34,7 @@ const userEn = {
feedBack: 'FeedBack',
about: 'About',
setting: 'Setting',
}
},
}
const userZh = {
......@@ -55,7 +55,7 @@ const userZh = {
name: '姓名',
namePlaceholder: '请输入您的姓名',
nationality: '国籍',
namePlaceholder: '请选择您的国籍',
nationalityPlaceholder: '请选择您的国籍',
birthday: '出生日',
birthdayPlaceholder: '请选择您的出生日',
email: '邮箱',
......@@ -73,7 +73,7 @@ const userZh = {
feedBack: '意见反馈',
about: '关于协会',
setting: '设置',
}
},
}
export default {
userEn,
......
src/router/modules/user.js
......@@ -6,7 +6,7 @@ const userRouter = [
title: '登录',
isLogin: false
},
component: () => import(/* webpackChunkName: "loginPhone" */ '@/views/user/loginPhone.vue') // 手机号登录
component: () => import(/* webpackChunkName: "loginPhone" */ '@/views/user/login/loginPhone.vue') // 手机号登录
},
{
path: '/user/login/username',
......@@ -15,7 +15,7 @@ const userRouter = [
title: '登录',
isLogin: false
},
component: () => import(/* webpackChunkName: "login" */ '@/views/user/loginUserName.vue') // 账号密码登录
component: () => import(/* webpackChunkName: "login" */ '@/views/user/login/loginUserName.vue') // 账号密码登录
},
{
path: '/user/register',
......@@ -24,7 +24,7 @@ const userRouter = [
title: '注册',
isLogin: false
},
component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册
component: () => import(/* webpackChunkName: "register" */ '@/views/user/login/register.vue') // 注册
},
{
path: '/user/findPassword',
......@@ -33,7 +33,7 @@ const userRouter = [
title: '',
isLogin: false
},
component: () => import(/* webpackChunkName: "findPassword" */ '@/views/user/findPassword.vue') // 手机号找回密码 邮箱找回密码
component: () => import(/* webpackChunkName: "findPassword" */ '@/views/user/login/findPassword.vue') // 手机号找回密码 邮箱找回密码
},
{
path: '/user/setPassword',
......@@ -42,7 +42,7 @@ const userRouter = [
title: '设置密码',
isLogin: false
},
component: () => import(/* webpackChunkName: "center" */ '@/views/user/setPassword.vue') // 设置密码
component: () => import(/* webpackChunkName: "center" */ '@/views/user/login/setPassword.vue') // 设置密码
},
{
path: '/user/resetPassword',
......@@ -51,7 +51,7 @@ const userRouter = [
title: '重置密码',
isLogin: false
},
component: () => import(/* webpackChunkName: "center" */ '@/views/user/resetPassword.vue') // 重置密码
component: () => import(/* webpackChunkName: "center" */ '@/views/user/login/resetPassword.vue') // 重置密码
},
{
path: '/user/sendVerification',
......@@ -96,7 +96,7 @@ const userRouter = [
title: '我的学习',
isLogin: true
},
component: () => import(/* webpackChunkName: "study" */ '@/views/user/study.vue') // 我到学习
component: () => import(/* webpackChunkName: "study" */ '@/views/user/study/index.vue') // 我到学习
},
{
path: '/user/question',
......@@ -132,7 +132,7 @@ const userRouter = [
title: '关于协会',
isLogin: false
},
component: () => import(/* webpackChunkName: "about" */ '@/views/user/about.vue') // 关于协会
component: () => import(/* webpackChunkName: "about" */ '@/views/user/about/index.vue') // 关于协会
},
{
path: '/user/setting',
......@@ -150,7 +150,7 @@ const userRouter = [
title: '隐私协议',
isLogin: false
},
component: () => import(/* webpackChunkName: "privacy" */ '@/views/user/privacy.vue') // 隐私协议
component: () => import(/* webpackChunkName: "privacy" */ '@/views/user/privacy/index.vue') // 隐私协议
},
{
path: '/user/service',
......@@ -159,7 +159,7 @@ const userRouter = [
title: '服务协议',
isLogin: false
},
component: () => import(/* webpackChunkName: "service" */ '@/views/user/service.vue') // 服务协议
component: () => import(/* webpackChunkName: "service" */ '@/views/user/service/index.vue') // 服务协议
},
{
path: '/user/person',
......
src/utils/vant-ui.js
......@@ -25,7 +25,8 @@ import {
Uploader,
List,
PullRefresh,
SwipeCell
SwipeCell,
DatetimePicker
} from 'vant'
import NafmHeader from '@/components/NafmHeader'
......@@ -61,7 +62,8 @@ import FooterBottom from '@/components/FooterBottom'
Uploader,
List,
PullRefresh,
SwipeCell
SwipeCell,
DatetimePicker
].forEach(item => Vue.use(item))
// 先预制，后期做统一调整
......
src/views/member/business/index.vue
<template>
<div class="list">
<div class="business_cpntainer">
<NafmHeader navClass="nafmii-head-bg3" title="业务开展列表" />
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<van-cell v-for="item in businessList" :key="item">
<div slot="title" class="title">{{item.title}}</div>
<p slot="label" class="info">
<span class="update_time">
<van-icon :name="timeIcon" />
更新日期：{{item.update_time}}
</span>
<span class="org">{{item.org}}</span>
</p>
</van-cell>
</van-list>
<main class="business_content">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<van-cell v-for="item in businessList" :key="item">
<div slot="title" class="title">{{item.title}}</div>
<p slot="label" class="info">
<span class="update_time">
<van-icon :name="timeIcon" />
更新日期：{{item.update_time}}
</span>
<span class="org">{{item.org}}</span>
</p>
</van-cell>
</van-list>
</main>
</div>
</template>
<script>
export default {
name: "BusinessList",
data() {
return {
businessList: [{
......@@ -41,7 +45,7 @@ export default {
}
</script>
<style lang="less" scoped>
.list {
.business_cpntainer {
.title {
color: #222222;
font-size: 16px;
......
src/views/member/contact/contactItem.vue
......@@ -28,6 +28,7 @@
</template>
<script>
export default {
name: "ContanctItem",
data() {
return {
......
src/views/member/contact/index.vue
<template>
<div class="list">
<div class="contact_containier">
<NafmHeader navClass="nafmii-head-bg3" title="联系人列表" />
<contact-item v-for="contactItem in contactList" :key="contactItem.id" :contact-item="contactItem"></contact-item>
<main class="contact_content">
<contact-item v-for="contactItem in contactList" :key="contactItem.id" :contact-item="contactItem"></contact-item>
</main>
</div>
</template>
<script>
......@@ -17,14 +19,16 @@ export default {
}
</script>
<style lang="less" scoped>
.list {
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 15px;
margin: 16px 15px;
.contact_containier {
width: 100%;
height: 100%;
background-color: #fafafa;
.contact_content {
width: 384px;
margin: 16px auto 0;
display: flex;
flex-direction: column;
}
}
</style>
src/views/member/memberGuide.vue
......@@ -6,6 +6,7 @@
</template>
<script>
export default {
name: 'MemberGuide',
data() {
return {
......
src/views/member/memberLogin.vue
<template>
<div class="member_login">
<div class="login_container">
<img src="@/assets/icon/bg_login_2.png" />
<NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" title=" " />
<div class="login_box">
<NafmHeader navClass="nafmii-head-bg1" title=" " />
</div>
<!-- <img src="@/assets/icon/bg_login_2.png" />
<NafmHeader navClass="nafmii-head-bg1" title=" " /> -->
<main class="login_content">
<van-form class="login_form">
<van-field v-model="code" :left-icon="shtyxydmIcon" placeholder="请输入社会信用代码或组织机构代码">
......@@ -13,8 +17,8 @@
<span class="verfication_code">111111</span>
</template>
</van-field>
<p v-show="isLogin" class="wraning_tip">
提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
<p class="wraning_tip">
<span v-show="isLogin">提示：请输入贵单位会员系统的登录名及密码登录（单位会员）</span>
</p>
<div>
<van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
......@@ -22,7 +26,7 @@
</van-form>
</main>
<div class="membership_about">
<van-cell title="入会指南" is-link to="/member/membershipGuide" />
<van-cell title="入会指南" is-link to="/member/memberGuide" />
<van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" />
<van-cell title="会员管理规则" is-link to="/member/membershipGuide" />
</div>
......@@ -30,6 +34,7 @@
</template>
<script>
export default {
name: "MemberLogin",
data() {
return {
code: '',
......@@ -56,35 +61,42 @@ export default {
if (!this.checkCode || this.checkCode === '') {
return Toast('请输入验证码')
}
this.$router.push({
name: 'LoginResult'
})
}
}
}
</script>
<style lang="less" scoped>
.member_login {
.login_container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.login_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
.login_content {
display: flex;
align-items: center;
justify-content: center;
.login_form {
margin-top: 20px;
width: 330px;
padding: 20px 0;
background-color: #ffffff;
::v-deep .van-cell:not(:last-child)::after {
border-bottom: 1px solid #efefef;
}
::v-deep .van-cell {
padding-right: 0 !important;
padding-left: 0 !important;
border-bottom: 1px solid #ebedf0;
}
::v-deep .van-cell:not(:last-child)::after {
border: none;
}
......@@ -102,9 +114,9 @@ export default {
color: #8f9196;
}
.wraning_tip {
min-height: 17px;
color: #ea5c6d;
font-size: 12px;
text-align: justify;
margin-top: 16px;
}
.login_btn {
......@@ -127,7 +139,8 @@ export default {
}
}
.membership_about {
margin: 20px 0;
flex: 1;
background-color: #f6f6f6;
.van-cell {
background-color: #f6f6f6;
font-size: 14px;
......
src/views/member/result/index.vue
<template>
<div class="login_result">
<img src="@/assets/icon/bg_member.png" />
<NafmHeader bgColor="transparent" title="会籍服务" />
<NafmHeader title="会籍服务" />
<main class="result_content">
<section class="member_basic">
<van-cell>
<van-cell class="bg_transparent">
<h3 slot="title" class="title">{{memberInfo.name}}</h3>
<div slot="label">
<p>
<span>
社会统一信用代码：
</span>
<span class="info">
{{memberInfo.shtyxydm}}
</span>
<span>社会统一信用代码：</span>
<span class="info">{{memberInfo.shtyxydm}}</span>
</p>
<p>
<span>
会员状态：
</span>
<span class="info">
{{memberInfo.status}}
</span>
<span>会员状态：</span>
<span class="info">{{memberInfo.status}}</span>
</p>
<p>
<span>
会员级别：
</span>
<span class="info">
{{memberInfo.level}}
</span>
<span>会员级别：</span>
<span class="info">{{memberInfo.level}}</span>
</p>
<p>
<span>
会籍类别：
</span>
<span class="info">
{{memberInfo.type}}
</span>
<span>会籍类别：</span>
<span class="info">{{memberInfo.type}}</span>
</p>
</div>
</van-cell>
<van-cell is-link to="/member/memberDetail">
<van-cell>
<p slot="default" class="tip_more">
<span class="warning_tip">
提示：如需变更请登录会员系统办理
<span class="warning_tip"> 提示：如需变更请登录会员系统办理 </span>
<span class="more" @click="toOtherRouter('MemberDetail')">
查看更多
<van-icon :name="moreIcon" />
</span>
<span class="more">查看更多</span>
</p>
</van-cell>
</section>
<section class="member_opration">
<div class="in">
<van-cell is-link :icon="joinIcon">
<van-cell is-link :icon="joinIcon" @click="toOtherRouter('JoinProgress')">
<template #title>
<span class="oper_title">入会</span>
</template>
</van-cell>
</div>
<div class="out">
<van-cell is-link :icon="quitIcon">
<van-cell is-link :icon="quitIcon" @click="toOtherRouter('QuitProgress')">
<template #title>
<span class="oper_title">退会</span>
</template>
</van-cell>
</div>
<div class="change">
<van-cell is-link :icon="changeIcon">
<van-cell is-link :icon="changeIcon" @click="toOtherRouter('ChangeProgress')">
<template #title>
<span class="oper_title">变更</span>
</template>
......@@ -81,6 +65,7 @@
</template>
<script>
export default {
name: 'MembrshipService',
data() {
return {
memberInfo: {
......@@ -92,7 +77,15 @@ export default {
},
joinIcon: require('@/assets/icon/join_member.png'),
quitIcon: require('@/assets/icon/quit_member.png'),
changeIcon: require('@/assets/icon/change_member.png')
changeIcon: require('@/assets/icon/change_member.png'),
moreIcon: require('@/assets/icon/icon_arrow_right.png')
}
},
methods: {
toOtherRouter(routerName) {
this.$router.push({
name: routerName
})
}
}
}
......@@ -101,13 +94,12 @@ export default {
.login_result {
width: 100%;
height: 100%;
background: url("../../../assets/icon/bg_member.png") no-repeat;
background-size: 100%;
display: flex;
flex-direction: column;
.result_content {
position: absolute;
top: 45px;
left: 0;
right: 0;
flex: 1;
}
}
.van-cell {
......@@ -139,6 +131,7 @@ export default {
}
.more {
color: #666666;
align-items: center;
}
}
}
......@@ -174,12 +167,9 @@ export default {
}
}
.bottom_tip {
flex: 0;
font-size: 12px;
color: #999999;
position: absolute;
bottom: 83px;
left: 0;
right: 0;
background: #f6f6f6;
padding: 10px 15px;
}
......
src/views/member/result/memberDetail.vue
......@@ -6,7 +6,7 @@
<span class="oper_title">{{memberInfo.name}}</span>
</h3>
<van-cell>
<p slot="label">
<p slot="default">
<span>社会统一信用代码</span>
<span>{{memberInfo.shtyxydm || '--'}}</span>
</p>
......@@ -80,6 +80,7 @@
</template>
<script>
export default {
name: "MemberDetail",
data() {
return {
memberInfo: {
......@@ -98,10 +99,16 @@ export default {
margin-top: 16px;
margin-right: 20px;
.oper_title {
display: inline-block;
height: 16px;
line-height: 16px;
color: #222222;
font-size: 16px;
font-family: PingFangSC-Semibold;
padding: 0 16px;
margin: 16px;
padding-left: 5px;
border-left: 2.5px solid #135faa;
vertical-align: middle;
}
p {
display: flex;
......
src/views/user/person/commonEdit.vue
<!-- 设置用户名 设置姓名 设置邮箱 设置单位 -->
<template>
<div class="common_container">
<NafmHeader :title="title" class="header">
<NafmHeader :title="title" class="header" navClass="nafmii-head-bg3">
<template slot="right">
<span class="finish" @click="handleFinish">完成</span>
<span class="finish" @click="handleFinish">{{$t('button.finish')}}</span>
</template>
</NafmHeader>
<div class="search">
<input type="text" v-model="value" :placeholder="placeholder" class="input">
<span class="close" @click="handleClear">&times;</span>
<van-field v-model="value" :placeholder="placeholder" clearable />
</div>
</div>
</template>
......@@ -24,17 +23,19 @@ export default {
},
mounted() {
const { title, value } = this.$route.query
this.title = title
this.userName = value
console.log('title', title)
if (title == '设置用户名') {
this.placeholder = '请输入用户名'
this.value = value
if (title == '设置昵称') {
this.title = this.$t('title.nickName')
this.placeholder = this.$t('person.nickNamePlaceholder')
} else if (title == '设置姓名') {
this.placeholder = '请输入您的姓名'
this.title = this.$t('title.name')
this.placeholder = this.$t('person.namePlaceholder')
} else if (title == '设置邮箱') {
this.placeholder = '请输入您的邮箱'
this.title = this.$t('title.email')
this.placeholder = this.$t('person.emailPlaceholder')
} else if (title == '设置单位') {
this.placeholder = '请输入您的单位全称'
this.title = this.$t('title.company')
this.placeholder = this.$t('person.companyPlaceholder')
}
},
methods: {
......@@ -42,40 +43,19 @@ export default {
// 调用设置接口
this.$router.back()
},
handleClear() {
this.value = ''
}
}
}
</script>
<style lang="less" scoped>
.header .finish {
font-size: 28px;
font-size: 14px;
}
.search {
margin: 15px;
position: relative;
}
.input {
height: 100px;
line-height: 100px;
background-color: #f6f6f6;
width: 100%;
border-radius: 16px;
color: #333;
font-size: 32px;
padding: 0 100px 0 25px;
}
.close {
position: absolute;
right: 30px;
top: 35px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
background-color: #c4c4c4;
border-radius: 50%;
/deep/ .van-cell {
background: #efefef;
border-radius: 8px;
}
</style>
\ No newline at end of file
src/views/user/person/components/UpdatePhoto.vue 0 → 100644
<template>
<div class="updatePhoto_container">
<NafmHeader :title="$t('title.photo')" :showBack="true" navClass="nafmii-head-bg3" @onBack="$emit('close')">
<template slot="right">
<span class="finish" @click="handleSave">{{$t('button.save')}}</span>
</template>
</NafmHeader>
<img :src="image" ref="image">
</div>
</template>
<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
export default {
name: 'UpdataPhoto',
props: {
file: {
required: true
}
},
data() {
return {
image: window.URL.createObjectURL(this.file),
cropper: null,
}
},
mounted() {
const image = this.$refs.image;
this.cropper = new Cropper(image, {
viewMode: 1,
dragMode: 'move',
aspectRatio: 1,
cropBoxMovable: false,
cropBoxResizable: false,
background: false,
movable: true
});
},
methods: {
async getCroppedCanvas() {
return new Promise(resolve => {
this.cropper.getCroppedCanvas().toBlob((file) => {
resolve(file)
})
})
},
async handleSave() {
// 图片上传 格式Content-Type: multipart/form-data，则一定要提交FormatData对象
const fd = new FormData()
// fd.append('photo', this.file)
const file = await this.getCroppedCanvas()
fd.append('photo', file)
// api 调用 todo
// 更新父组件
this.$emit('upDataPhoto', window.URL.createObjectURL(file))
// 关闭弹出层
this.$emit('close')
// 保存成功
Toast('保存成功')
}
}
}
</script>
<style lang="less" scoped>
.updatePhoto_container {
height: 100vh;
}
/deep/ .cropper-view-box {
border-radius: 50%;
}
</style>
\ No newline at end of file
src/views/user/person/index.vue
......@@ -2,14 +2,15 @@
<div class="person_cantainer">
<NafmHeader :title="$t('title.person')" navClass="nafmii-head-bg3" />
<div class="setting_list">
<van-cell :title="$t('person.photo')" center is-link value-class="right_content">
<input type="file" hidden ref="file" accept="image/*" @change="onFileChange">
<van-cell :title="$t('person.photo')" center is-link value-class="right_content" @click="openFile">
<template #default>
<img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt="">
<img :src="headerIcon" class="headerImg" alt="">
</template>
</van-cell>
<van-cell :title="$t('person.nickName')" center is-link @click="editUserName('设置用户名',userName)" value-class="right_content">
<van-cell :title="$t('person.nickName')" center is-link @click="editCommon('设置昵称',nickname)" value-class="right_content">
<template #default>
<span v-if="userName">{{userName}}</span>
<span v-if="nickname">{{nickname}}</span>
<span v-else>{{$t('person.nickNamePlaceholder')}}</span>
</template>
</van-cell>
......@@ -18,49 +19,71 @@
183****8924
</template>
</van-cell>
<van-cell :title="$t('person.name')" center is-link @click="editUserName('设置姓名',name)" value-class="right_content">
<van-cell :title="$t('person.name')" center is-link @click="editCommon('设置姓名',name)" value-class="right_content">
<template #default>
<span v-if="name">{{name}}</span>
<span v-else>{{$t('person.namePlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.nationality')" center is-link value-class="right_content">
<template #default>中国</template>
<template #default>
<span v-if="nationality">{{nationality}}</span>
<span v-else>{{$t('person.nationalityPlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.birthday')" center is-link value-class="right_content">
<van-cell :title="$t('person.birthday')" center is-link value-class="right_content" @click="openBirthday(true)">
<template #default>
<span v-if="name">{{name}}</span>
<span v-else>请选择您的出生日期</span>
<span v-if="birthday">{{birthday}}</span>
<span v-else>{{$t('person.birthdayPlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.email')" center is-link @click="editUserName('设置邮箱',email)" value-class="right_content">
<van-cell :title="$t('person.email')" center is-link @click="editCommon('设置邮箱',email)" value-class="right_content">
<template #default>
<span v-if="name">{{email}}</span>
<span v-else>请输入您的邮箱</span>
<span v-else>{{$t('person.emailPlaceholder')}}</span>
</template>
</van-cell>
<van-cell :title="$t('person.company')" center is-link @click="editUserName('设置单位',company)" value-class="right_content">
<van-cell :title="$t('person.company')" center is-link @click="editCommon('设置单位',company)" value-class="right_content">
<template #default>
<span v-if="name">{{company}}</span>
<span v-else>请输入您的单位全称</span>
<span v-else>{{$t('person.companyPlaceholder')}}</span>
</template>
</van-cell>
</div>
<van-popup v-model="showPicker" position="bottom">
<van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="selectBirthday" @cancel="showPicker = false" />
</van-popup>
<van-popup v-model="showPhoto" position="bottom" style="height:100%">
<UpdatePhoto v-if="showPhoto" :file="previewImg" @close="showPhoto=false" @upDataPhoto="headerIcon=$event" />
</van-popup>
</div>
</template>
<script>
import UpdatePhoto from './components/UpdatePhoto';
export default {
name: 'Person',
data() {
return {
userName: '',
headerIcon: require('@/assets/icon/photo_default.png'),
nickname: '',
name: '',
nationality: '',
birthday: '',
email: '',
company: ''
company: '',
showPicker: false,
minDate: new Date(1900, 0, 1),
maxDate: new Date(2220, 11, 1),
currentDate: new Date(),
showPhoto: false,
previewImg: null
}
},
components: {
UpdatePhoto
},
methods: {
editUserName(title, value) {
editCommon(title, value) {
this.$router.push({
path: '/user/commonEdit',
query: {
......@@ -68,14 +91,40 @@ export default {
value
}
})
},
openBirthday(value) {
this.showPicker = value
},
// 选择年月日
selectBirthday(value) {
console.log('date', value)
this.showPicker = false
},
// 打开图片预览和拍照
openFile() {
this.$refs.file.click()
},
// 选择图片操作
onFileChange() {
const file = this.$refs.file.files[0]
this.previewImg = file
this.showPhoto = true
// 为了解决相同图片 不触发 change事件 所以要清空file的value值
this.$refs.file.value = ''
}
}
}
</script>
<style lang="less" scoped>
.person_cantainer {
background: #fafafa;
height: 100vh;
}
.headerImg {
width: 55px;
height: 55px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.right_content {
......
src/views/user/question/detail.vue
<template>
<div class="question_detail">
<NafmHeader/>
<div class="detail_container">
<NafmHeader :title="title" navClass="nafmii-head-bg3" />
<div class="detail_content">
<div class="content">
111
</div>
<div class="other_question question_some">
<h3>相关问题</h3>
<van-cell :title="item.title" v-for="(item,index) in list" :key="index" center is-link @click="jumpDetail(item.id)" />
</div>
</div>
</div>
</template>
\ No newline at end of file
</template>
<script>
export default {
name: 'QuestionDetail',
data() {
return {
title: '详情',
list: [
{ id: '1', type: '产品创新', title: '问题一问题一问题一问题一问题一问题一问题一问题一问题一问题一' },
{ id: '2', type: '产品创新', title: '问题二问题二问题二问题二问题二问题二问题二问题二问题二问题二' },
]
}
},
mounted(){
// api 获取问题详情页面
},
methods:{
}
}
</script>
<style lang="less" scoped>
@import "./less/index.less";
.detail_container {
height: 100vh;
.content {
height: 200px;
}
}
.detail_content {
width: 384px;
margin: 15px auto;
}
</style>
\ No newline at end of file
src/views/user/question/less/index.less 0 → 100644
.question_some {
h3 {
position: relative;
color: #222;
font-size: 16px;
padding-left: 5px;
&::before {
content: "";
position: absolute;
top: 4px;
left: 0;
height: 15px;
border-left: 3px solid #135faa;
}
}
/deep/ .van-cell {
padding-right: 0 !important;
padding-left: 0 !important;
border-bottom: 1px solid #ebedf0;
font-size: 12px;
}
/deep/ .van-cell:not(:last-child)::after {
border-bottom: 0;
}
/deep/ .van-cell__title {
span {
display: block;
width: 354px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
}
}
\ No newline at end of file
src/views/user/question/list.vue
<template>
<div class="question_list">
<NafmHeader/>
<div class="question_list">
<NafmHeader :title="$t('title.question')" navClass="nafmii-head-bg3"></NafmHeader>
<!-- <template #bottom>
<SearchFirst @jumpPage="jumpPage" :placeholder="placeholder" />
</template> -->
<div class="question_content">
<h2>{{$t('question.classification')}}</h2>
<div class="question_type">
<ul>
<li @click="jumpQuestion()">
<img :src="icon" alt="">
<span>产品创新</span>
</li>
<li>
<img :src="icon" alt="">
<span>产品创新</span>
</li>
<li>
<img :src="icon" alt="">
<span>产品创新</span>
</li>
<li>
<img :src="icon" alt="">
<span>产品创新</span>
</li>
</ul>
</div>
<div class="question_some">
<h3>常见问题</h3>
<van-cell :title="item.title" v-for="(item,index) in list" :key="index" center is-link @click="jumpDetail(item.id)" />
</div>
</div>
</template>
\ No newline at end of file
</div>
</template>
<script>
// import SearchFirst from '@/components/SearchFirst.vue';
export default {
name: 'Question',
components: {
// SearchFirst
},
data() {
return {
icon: require('@/assets/icon/question_icon.png'),
placeholder: this.$t('question.askPlaceholder'),
list: [
{ id: '1', type: '产品创新', title: '问题一问题一问题一问题一问题一问题一问题一问题一问题一问题一' },
{ id: '2', type: '产品创新', title: '问题二问题二问题二问题二问题二问题二问题二问题二问题二问题二' },
]
}
},
methods: {
jumpPage() {
this.$router.push({
name: 'Home'
})
},
jumpQuestion() {
},
// 跳转问题详情
jumpDetail(id) {
this.$router.push({
path: '/user/questionDetail',
query: {
id
}
})
}
}
}
</script>
<style lang="less" scoped>
@import './less/index.less';
.question_content {
width: 384px;
margin: 16px auto;
display: flex;
flex-direction: column;
h2 {
position: relative;
display: flex;
height: 30px;
font-size: 19px;
color: #222;
border-bottom: 1px solid #c9dbeb;
&:after {
content: "";
position: absolute;
left: 0;
top: 29px;
width: 76px;
border-bottom: 3px solid #135faa;
}
}
.question_type {
margin: 25px 0;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
flex: 0 0 121px;
display: flex;
width: 121px;
height: 42px;
margin-bottom: 10px;
justify-content: center;
align-items: center;
border-radius: 8px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
margin-right: 10px;
&:nth-child(3n + 3) {
margin-right: 0;
}
img {
width: 18px;
height: 18px;
margin-right: 7px;
}
span {
color: #333;
font-size: 16px;
}
}
}
}
</style>
\ No newline at end of file
src/views/user/question/search.vue 0 → 100644
<template>
<div class="search_container">
</div>
</template>
<script>
export default {
name: 'Search'
}
</script>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!