Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit e3d8d648 by fanx
Options

常见问题制作

1 parent 29714c79
Inline Side-by-side
Showing 30 changed files with 356 additions and 76 deletions
src/assets/css/sprite.less
......@@ -18,8 +18,8 @@
.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; }
......@@ -29,7 +29,8 @@
.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-question { width: 32px; height: 36px; background-position: -2012px -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; }
.icon-question-icon { width: 36px; height: 36px; background-position: -1956px -526px; }
\ 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/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,8 @@ const buttonEn = {
logout: 'Logout',
clickWrong: 'Cancel',
okUnbinding: 'Ok',
clear: 'Clear'
clear: 'Clear',
finish: 'Finish',
}
}
const buttonZn = {
......@@ -19,7 +20,8 @@ const buttonZn = {
logout: '退出登录',
clickWrong: '点错了',
okUnbinding: '确定解除',
clear: '清空'
clear: '清空',
finish: '完成',
}
}
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/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
......@@ -14,6 +14,7 @@ const titleEn = {
serviceAgreement: 'Service Agreement',
person: 'Personal',
nickName: 'Edit NickName',
name: 'Edit Name',
email: 'Edit Email',
company: 'Edit Compnay',
}
......@@ -34,6 +35,7 @@ const titleZn = {
serviceAgreement: '服务协议',
person: '个人信息',
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/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/index.vue
......@@ -4,12 +4,12 @@
<div class="setting_list">
<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="">
<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,31 +18,34 @@
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">
<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>
......@@ -53,14 +56,17 @@ export default {
name: 'Person',
data() {
return {
userName: '',
headerIcon: require('@/assets/icon/photo_default.png'),
nickname: '',
name: '',
nationality: '',
birthday: '',
email: '',
company: ''
}
},
methods: {
editUserName(title, value) {
editCommon(title, value) {
this.$router.push({
path: '/user/commonEdit',
query: {
......@@ -73,6 +79,10 @@ export default {
}
</script>
<style lang="less" scoped>
.person_cantainer{
background: #fafafa;
height: 100vh;
}
.headerImg {
width: 55px;
height: 55px;
......
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>
<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/>
<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>
</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!