Skip to content

S
sensorConsult
Commit 84909063 authored by zhanglw's avatar zhanglw
Browse files
Options

底部文件

parent f356297a
Hide whitespace changes
Inline Side-by-side
Showing with 1400 additions and 21 deletions
src/api/common.js
View file @ 84909063
...@@ -437,10 +437,10 @@ export const HttpReq = { ...@@ -437,10 +437,10 @@ export const HttpReq = {
method: 'get' method: 'get'
}) })
}, },
// 首页-友情链接 // 首页-底部导航
homePageGetFriendshipUrl: function(params) { homePageGetBottomNavigation: function(params) {
return request({ return request({
url: '/api/bsw/bigScreen/index/friendshipUrl?' + qs.stringify(params, { indices: false }), url: '/api/bsw/bigScreen/index/bottomNavigationBar?' + qs.stringify(params, { indices: false }),
method: 'get' method: 'get'
}) })
}, },
......
src/router/index.js
View file @ 84909063
...@@ -9,7 +9,7 @@ import { filterAsyncRouter } from '@/store/modules/permission' ...@@ -9,7 +9,7 @@ import { filterAsyncRouter } from '@/store/modules/permission'
NProgress.configure({ showSpinner: false })// NProgress Configuration NProgress.configure({ showSpinner: false })// NProgress Configuration
const whiteList = ['/login', '/backlogin', '/home', '/product', '/supplier', '/project', '/software', '/course', '/information']// 免登录路由白名单 const whiteList = ['/login', '/backlogin', '/home', '/product', '/supplier', '/project', '/software', '/course', '/information', '/footer']// 免登录路由白名单
const backUrlList = ['/dashboard', '/system', '/monitor', '/sys-tools', '/backstage']// 后台路由 const backUrlList = ['/dashboard', '/system', '/monitor', '/sys-tools', '/backstage']// 后台路由
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
......
src/router/routers.js
View file @ 84909063
...@@ -158,6 +158,30 @@ export const constantRouterMap = [ ...@@ -158,6 +158,30 @@ export const constantRouterMap = [
}, },
hidden: true hidden: true
}, },
{
path: '/footer/about/:id',
meta: { title: '', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/footer/index'], resolve)
},
hidden: true
},
{
path: '/footer/opinion',
meta: { title: '提供建议', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/footer/opinion'], resolve)
},
hidden: true
},
{
path: '/footer/cooperate',
meta: { title: '我要合作', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/footer/cooperate'], resolve)
},
hidden: true
},
{ {
path: '/console', path: '/console',
meta: { title: '个人中心', noCache: true }, meta: { title: '个人中心', noCache: true },
......
src/views/backstage/contentMgt/homePage/add.vue
View file @ 84909063
<template> <template>
<!-- 表单渲染 --> <!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px"> <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="220px">
<el-form-item label="位置：" class="form-cell" prop="type"> <el-form-item label="位置：" class="form-cell" prop="type">
<div class="cell-box"> <div class="cell-box">
<el-select v-model="formData.type" placeholder="无" class="cell-select"> <el-select v-model="formData.type" placeholder="无" class="cell-select" @change="typeChang">
<el-option v-for="item in dict.home_setting" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in dict.home_setting" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
...@@ -83,6 +83,44 @@ ...@@ -83,6 +83,44 @@
/> />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="封面与LOGO：" class="form-cell" prop="partnerLogo">
<div class="cell-box">
<ul class="el-upload-list el-upload-list--picture-card" style="float: left">
<li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
<img :src="imgSrcStart+item" class="el-upload-list__item-thumbnail">
<label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
<span class="el-upload-list__item-delete" @click="handleRemoveImg(item)"><i class="el-icon-delete" /></span>
</span>
</li>
</ul>
<el-dialog append-to-body :visible.sync="dialogImgVisible">
<img width="100%" :src="imgSrcStart+dialogImgUrl">
</el-dialog>
<el-upload
ref="uploadCom"
action="/api/bsw/common/uploadPicture"
name="multipartFile"
:data="{mark:'logo'}"
list-type="picture-card"
:headers="uploadHeaders"
:limit="1"
:on-exceed="handleExceed"
:on-success="handleImported"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<div slot="trigger" @click="handlePushClick($event)">
<i class="el-icon-plus" />
</div>
</el-upload>
<el-dialog append-to-body :visible.sync="dialogImageVisible">
<img width="100%" :src="dialogImageUrl">
</el-dialog>
</div>
<div style="display: none;clear: both">{{ formData.partnerLogo }}</div>
</el-form-item>
<el-form-item label="是否设置为钻石供应商：" class="form-cell" prop="diamondSupplier"> <el-form-item label="是否设置为钻石供应商：" class="form-cell" prop="diamondSupplier">
<div class="cell-box"> <div class="cell-box">
<el-radio-group v-model="formData.diamondSupplier" size="mini"> <el-radio-group v-model="formData.diamondSupplier" size="mini">
...@@ -271,6 +309,28 @@ ...@@ -271,6 +309,28 @@
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
<div v-if="formData.type>=8">
<el-form-item label="操作名称：" class="form-cell" prop="operationName">
<div class="cell-box">
<el-input v-model="formData.operationName" placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="频道名称：" class="form-cell" prop="channelName">
<div class="cell-box">
<el-input v-model="formData.channelName" placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="富文本内容：" class="form-cell" prop="content">
<div class="cell-box">
<div ref="editor" class="editor" />
</div>
</el-form-item>
<el-form-item label="顺序：" class="form-cell" prop="operatingPeriod">
<div class="cell-box">
<el-input v-model.number="formData.sort" type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
</div>
</el-form> </el-form>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="cancelView">关闭</el-button> <el-button @click="cancelView">关闭</el-button>
...@@ -283,6 +343,9 @@ ...@@ -283,6 +343,9 @@
<script> <script>
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common' import { HttpReq } from '@/api/common'
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
export default { export default {
dicts: ['home_setting', 'home_setting_2', 'home_setting_5', 'product_type'], dicts: ['home_setting', 'home_setting_2', 'home_setting_5', 'product_type'],
...@@ -324,12 +387,45 @@ export default { ...@@ -324,12 +387,45 @@ export default {
rules: {} rules: {}
} }
}, },
mounted() { computed: {
this.$nextTick(() => { ...mapGetters([
'imagesUploadApi',
}) 'baseApi'
])
}, },
mounted() {},
methods: { methods: {
typeChang() {
if (this.formData.type >= 8) {
this.$nextTick(() => {
if (!this.editor) {
const _this = this
const editor = new E(this.$refs.editor)
editor.config.zIndex = 5
editor.config.customUploadImg = function(files, insert) {
files.forEach(image => {
upload(_this.imagesUploadApi, image).then(res => {
const data = res.data
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
insert(url)
})
})
}
editor.config.onchange = (html) => {
this.formData.content = html
}
editor.create()
this.editor = editor
}
this.editor.txt.html(this.formData.content)
})
} else {
if (this.editor) {
this.editor.txt.clear()
this.editor = null
}
}
},
checkEnterpriseName(rule, value, callback) { checkEnterpriseName(rule, value, callback) {
this.$nextTick(_ => { this.$nextTick(_ => {
HttpReq.backstageApi.checkEnterpriseName({ HttpReq.backstageApi.checkEnterpriseName({
...@@ -360,6 +456,10 @@ export default { ...@@ -360,6 +456,10 @@ export default {
if (this.$refs.uploadCom) { if (this.$refs.uploadCom) {
this.$refs.uploadCom.clearFiles() this.$refs.uploadCom.clearFiles()
} }
if (this.editor) {
this.editor.txt.clear()
this.editor = null
}
this.$refs.formViewRef.resetFields() this.$refs.formViewRef.resetFields()
this.imgList = [] this.imgList = []
this.formData = { this.formData = {
...@@ -454,6 +554,9 @@ export default { ...@@ -454,6 +554,9 @@ export default {
if (this.formData.partnerLogo) { if (this.formData.partnerLogo) {
this.imgList = this.formData.partnerLogo.split(';') this.imgList = this.formData.partnerLogo.split(';')
} }
if (this.formData.type >= 8) {
this.typeChang()
}
} else { } else {
this.$message({ this.$message({
message: res.msg, message: res.msg,
...@@ -524,6 +627,10 @@ export default { ...@@ -524,6 +627,10 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.editor{
text-align:left;
width: 580px;
}
.cell-box { .cell-box {
min-width: 120px; min-width: 120px;
.cell-input { .cell-input {
......
src/views/backstage/contentMgt/homePage/view.vue
View file @ 84909063
...@@ -84,6 +84,23 @@ ...@@ -84,6 +84,23 @@
/> />
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="封面与LOGO：" class="form-cell" prop="partnerLogo">
<div class="cell-box">
<ul class="el-upload-list el-upload-list--picture-card" style="float: left">
<li v-for="(item, index) in imgList" :key="index" tabindex="0" class="el-upload-list__item is-success">
<img :src="imgSrcStart+item" class="el-upload-list__item-thumbnail">
<label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check" /></label>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="dialogImgUrl=item;dialogImgVisible=true"><i class="el-icon-zoom-in" /></span>
</span>
</li>
</ul>
<el-dialog append-to-body :visible.sync="dialogImgVisible">
<img width="100%" :src="imgSrcStart+dialogImgUrl">
</el-dialog>
</div>
<div style="display: none;clear: both">{{ formData.partnerLogo }}</div>
</el-form-item>
<el-form-item label="是否设置为钻石供应商：" class="form-cell" prop="diamondSupplier"> <el-form-item label="是否设置为钻石供应商：" class="form-cell" prop="diamondSupplier">
<div class="cell-box"> <div class="cell-box">
<el-radio-group v-model="formData.diamondSupplier" disabled size="mini"> <el-radio-group v-model="formData.diamondSupplier" disabled size="mini">
...@@ -251,6 +268,28 @@ ...@@ -251,6 +268,28 @@
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
<div v-if="formData.type>=8">
<el-form-item label="操作名称：" class="form-cell" prop="operationName">
<div class="cell-box">
<el-input v-model="formData.operationName" disabled placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="频道名称：" class="form-cell" prop="channelName">
<div class="cell-box">
<el-input v-model="formData.channelName" disabled placeholder="单行输入" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="富文本内容：" class="form-cell" prop="content">
<div class="cell-box">
<div style="width: 580px" v-html="formData.content" />
</div>
</el-form-item>
<el-form-item label="顺序：" class="form-cell" prop="operatingPeriod">
<div class="cell-box">
<el-input v-model.number="formData.sort" disabled type="number" placeholder="请输入数字" class="cell-input" />
</div>
</el-form-item>
</div>
</el-form> </el-form>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="cancelView">关闭</el-button> <el-button @click="cancelView">关闭</el-button>
......
src/views/homepage/components/homeFooter.vue
View file @ 84909063
...@@ -5,9 +5,10 @@ ...@@ -5,9 +5,10 @@
<el-col v-for="(item,index) in dataList" :key="index" :span="4"> <el-col v-for="(item,index) in dataList" :key="index" :span="4">
<div class="title-s">{{ item.name }}</div> <div class="title-s">{{ item.name }}</div>
<div v-for="(t,i) in item.list" :key="'lb_'+i" class="label" :title="t.name"> <div v-for="(t,i) in item.list" :key="'lb_'+i" class="label" :title="t.name">
<a :href="t.url||'http://www.minestar.cn'" target="_blank"> <a v-if="t.url" :href="t.url||'http://www.minestar.cn'" target="_blank">
{{ t.name }} {{ t.name }}
</a> </a>
<div v-else class="touch" @click="linkClick(t)">{{ t.name }}</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -41,9 +42,9 @@ export default { ...@@ -41,9 +42,9 @@ export default {
{ {
name: '联系我们', name: '联系我们',
list: [ list: [
{ name: '提供建议', url: '' }, { name: '提供建议', leaveWordUrl: '/footer/opinion' },
{ name: '我要合作', url: '' }, { name: '我要合作', leaveWordUrl: '/footer/cooperate' },
{ name: '联系方式', url: '' } { name: '联系方式' }
] ]
}, },
{ {
...@@ -58,22 +59,54 @@ export default { ...@@ -58,22 +59,54 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
HttpReq.webClientApi.homePageGetFriendshipUrl({ HttpReq.webClientApi.homePageGetBottomNavigation({
preview: false preview: false
}).then((res) => { }).then((res) => {
this.dataList.push({ this.dataList = [
name: '友情链接', {
list: res.data.friendshipUrl name: '用户指南',
}) list: res.data.userGuide
},
{
name: '关于我们',
list: res.data.aboutUs
},
{
name: '联系我们',
list: [
{ name: '提供建议', leaveWordUrl: '/footer/opinion' },
{ name: '我要合作', leaveWordUrl: '/footer/cooperate' },
...res.data.commonQuestions
]
},
{
name: '常见问题',
list: res.data.contactUs
},
{
name: '友情链接',
list: res.data.friendshipUrl
}
]
}) })
}) })
}, },
methods: { methods: {
click() {} linkClick(item) {
if (item.leaveWordUrl) {
this.$router.push({ path: item.leaveWordUrl })
} else {
this.$router.push({ path: `/footer/about/${item.id}` })
}
}
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.footer-content { .footer-content {
width: 100%; width: 100%;
height: 267px; height: 267px;
......
src/views/homepage/footer/cooperate.vue 0 → 100644
View file @ 84909063
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>我要合作</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!--我要留言-->
<div class="page-title">我要合作</div>
<div class="form-table-box">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="留言内容类型：" class="form-cell" prop="consultType">
<div class="cell-box">
<el-select v-model="formData.consultType" disabled placeholder="产品大类" style="width: 300px">
<el-option label="深度合作" value="8" />
<el-option label="采购其它" value="9" />
<el-option label="其它问题" value="10" />
</el-select>
</div>
</el-form-item>
<el-form-item label="标题：" class="form-cell" prop="title">
<div class="cell-box">
<el-input v-model="formData.title" placeholder="请输入产品名称" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="内容：" class="form-cell" prop="consultationContent">
<div class="cell-box">
<el-input v-model="formData.consultationContent" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 12, maxRows: 12}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="联系方式：" required class="form-cell">
<div class="cell-box" style="max-width: 600px">
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">联系人</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-form-item prop="contactPerson" style="margin: 0">
<el-input v-model="formData.contactPerson" placeholder="请留下姓名" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">联系电话</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-form-item prop="contactPersonPhone" style="margin: 0">
<el-input v-model="formData.contactPersonPhone" placeholder="请留下联系电话" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">电子邮箱</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-input v-model="formData.contactPersonEmail" placeholder="请留下电子邮箱" />
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">联系地址</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-input v-model="formData.contactPersonDetailAddress" placeholder="请留下联系地址" />
</el-col>
</el-row>
</div>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: center">
<el-button @click="cancelView">返回</el-button>
<el-button type="primary" @click="openTip()">提交</el-button>
</div>
</div>
</div>
</div>
<home-footer ref="homeFooter" />
<el-backtop />
</div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter },
dicts: [],
data() {
return {
title: '',
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
editor: false, // 富文本对象
dialogImageUrl: '',
dialogImageVisible: false,
visible: false,
tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
productTypeOpts: [],
productSubTypeOpts: [],
inputVisible: false,
inputValue: '',
productFeature: [], // 产品特点tag列表
formData: {
title: '', // 标题
consultType: '8', // 留言类型
consultationContent: '', // 需求说明
contactPerson: '', // 联系人
contactPersonPhone: '', // 电话
contactPersonEmail: '', // 邮箱
contactPersonDetailAddress: '', // 地址
rank: '1' // 产品品级
},
rules: {
consultType: { required: true, message: '请选择留言类型', trigger: 'blur' },
title: { required: true, message: '请填写标题', trigger: 'blur' },
consultationContent: { required: true, message: '请填写留言内容', trigger: 'blur' },
contactPerson: { required: true, message: '请留下姓名', trigger: 'blur' },
contactPersonPhone: { required: true, message: '请留下联系电话', trigger: 'blur' }
}
}
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
onDictReady(dict) {
},
cancelView() {
this.$router.push({ path: `/home` })
},
openTip() {
this.$alert('我们收到了您的留言讯息，稍后将与您联系。', '完成', {
confirmButtonText: '确定',
type: 'success',
showClose: false,
center: true,
callback: action => {
this.cancelView()
}
})
},
submitForm() {
this.$refs.formViewRef.validate(valid => {
if (valid) {
HttpReq.backstageApi.addProduct(this.formData).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
alert(666)
}
})
} else {
this.$message({
message: '表单信息有误，请核对无误后提交！',
type: 'error'
})
}
})
},
loadData() {
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.showcase {
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.form-table-box {
width: 1080px;
margin: 20px auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
.page-title {
margin-top: 20px;
padding: 0 20px;
font-size: 26px;
font-weight: bold;
color: #333333;
}
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
.grid-content {
border: 1px solid rgba(100, 100, 100, 0.3);
padding: 0;
}
.grid-label {
background: #dedede;
padding: 0 10px;
}
.editor{
text-align:left;
width: 680px;
}
::v-deep .w-e-text-container {
height: 560px !important;
}
.cell-box {
min-width: 120px;
.cell-input {
width: 620px;
}
.cell-select {
width: 320px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 28px;
line-height: 24px;
padding: 0 8px;
}
.input-new-tag {
width: 140px;
height: 28px;
margin-left: 10px;
vertical-align: bottom;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
>>>.el-icon-arrow-up:before {
content: '';
}
}
</style>
src/views/homepage/footer/index.vue 0 → 100644
View file @ 84909063
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>{{ formData.channelName }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-title">{{ formData.channelName }}</div>
<div v-html="formData.content" />
</div>
</div>
<home-footer ref="homeFooter" />
<inquiry-view ref="inquiryView" />
<el-backtop />
</div>
</template>
<script>
import default_system from '@/assets/home_images/default_system.png'
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import inquiryView from '../components/inquiryView'
import { HttpReq } from '@/api/common'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView },
dicts: [],
data() {
return {
defaultImgSystem: default_system,
imgSrcStart: process.env.VUE_APP_BASE_API,
formData: {
channelName: '', // 频道名称
url: '', // 链接
content: '', // 内容
homePageId: null
},
throttle: null, // 节流器
throttleTime: 300
}
},
watch: {
$route() {
location.reload()
}
},
mounted() {
this.$nextTick(() => {
HttpReq.backstageApi.queryHomePageById({ homePageId: this.$route.params.id }).then((res) => {
if (res.code === 200) {
this.formData = Object.assign(this.formData, res.data)
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
})
},
methods: {
onDictReady(dict) {
},
setQuertType(type) {
if (type === this.query.type) {
this.query.sort = !this.query.sort
} else {
this.query.type = type
this.query.sort = false
}
},
// 点击询价
inquiry(item, type) {
console.log(item, type)
this.$refs.inquiryView.initView(item.id, type)
},
// 跳转到详情
goToDetails(item, type) {
console.log(item, type)
},
pageChange(e) {
this.page = e
this.loadData()
},
loadData() {
},
goTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
// 多行溢出省略号
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
// 分页 前文字+分页
.pagination {
margin-top: 23px;
text-align: center;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
>>>.el-pagination.is-background .el-pager li {
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
background-color: #fff;
color: #000000;
border: 1px solid #e5e5ea;
}
/* 激活后的样式 */
>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #ffffff;
color: #0366ed;
border: 1px solid #0366ed;
text-align: center;
}
/* 修改左右箭头样式 */
>>>.el-pagination .btn-next .el-icon, >>>.el-pagination .btn-prev .el-icon {
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
background-color: #fff;
color: #e5e5ea;
border: 1px solid #e5e5ea;
}
>>>.el-pager {
height: 35.5px !important;
}
>>>.number, >>>.el-icon {
height: 35.5px !important;
line-height: 35.5px !important;
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
.page-title {
margin-top: 20px;
padding: 0 20px;
font-size: 26px;
font-weight: bold;
color: #333333;
}
.box-card {
display: inline-block;
position: relative;
margin: 12px;
padding: 10px 0;
width: 350px;
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
.line-text {
width: 100%;
text-align: center;
padding: 5px;
font-size: 18px;
font-weight: bolder;
opacity: 0.85;
}
.line-text:hover {
opacity: 1;
}
.float-title {
width: 344px;
position: absolute;
padding: 5px;
top: 200px;
left: 2px;
text-align: center;
font-weight: 600;
color: #fff;
background: rgba(0,0,0,0.6);
opacity: 0.9;
}
.float-title:hover {
opacity: 1;
}
.title {
width: 305px;
padding: 2px 20px;
font-size: 18px;
color: #333333;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.title:hover {
font-weight: 600;
}
.subTitle {
width: 260px;
padding: 2px 20px;
font-size: 15px;
color: #1961C5;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.area {
padding: 2px 0;
font-size: 17px;
color: #666666;
}
.date {
padding: 2px 10px;
font-size: 17px;
color: #999999;
}
.stamp {
border-style: none;
position: absolute;
z-index: 99;
}
}
}
.search-box {
padding-top: 12px;
width: 100%;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
user-select: none;
.search-item {
width: 100%;
height: 38px;
display: inline-block;
padding: 8px 20px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
.label:hover {
font-weight: 600;
}
.btn {
width: 74px;
padding: 3px;
margin-left: 12px;
display: inline-block;
background: #1961C5;
border-radius: 6px;
color: white;
text-align: center;
opacity: 0.7;
}
.btn:hover {
opacity: 1;
}
}
.area-title {
height: 62px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
text-align: center;
line-height: 60px;
}
.area_item {
height: 30px;
padding: 6px 12px;
display: inline-block;
}
.area_item:hover {
font-weight: 600;
}
.active {
color: #1961C5;
}
.search-tools {
width: 100%;
.btn{
width: 76%;
height: 38px;
border: 2px solid #1961C5;
border-radius: 8px;
background: #1961C5;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 21px;
color: #ffffff;
opacity: 0.7;
}
.btn:hover {
opacity: 1;
}
>>>.el-input__inner {
height: 38px;
border: 2px solid #1961C5;
border-radius: 8px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #333333;
opacity: 0.7;
}
>>>.el-input__inner:hover {
opacity: 1;
}
}
.search-keyword {
padding: 5px 0;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
text-align: left;
.label {
padding: 1px 15px 1px;
color: #333333;
cursor:pointer;
user-select: none;
}
.label:hover {
color: #1961C5;
}
}
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
</style>
src/views/homepage/footer/opinion.vue 0 → 100644
View file @ 84909063
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="7" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>提供建议</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!--提供建议-->
<div class="page-title">提供建议</div>
<div class="form-table-box">
<el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
<el-form-item label="建议类别：" class="form-cell" prop="title">
<div class="cell-box">
<el-select v-model="formData.title" placeholder="请选择建议的类别" style="width: 300px">
<el-option label="产品功能" value="产品功能" />
<el-option label="产品推广" value="产品推广" />
<el-option label="售后" value="售后" />
<el-option label="业务咨询" value="业务咨询" />
<el-option label="平台管理" value="平台管理" />
</el-select>
</div>
</el-form-item>
<el-form-item label="内容：" class="form-cell" prop="consultationContent">
<div class="cell-box">
<el-input v-model="formData.consultationContent" type="textarea" placeholder="请输入文本内容" maxlength="1000" :autosize="{ minRows: 12, maxRows: 12}" show-word-limit resize="none" class="cell-input" />
</div>
</el-form-item>
<el-form-item label="联系方式：" required class="form-cell">
<div class="cell-box" style="max-width: 600px">
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">联系人</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-form-item prop="contactPerson" style="margin: 0">
<el-input v-model="formData.contactPerson" placeholder="请留下姓名" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">联系电话</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-form-item prop="contactPersonPhone" style="margin: 0">
<el-input v-model="formData.contactPersonPhone" placeholder="请留下联系电话" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">电子邮箱</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-input v-model="formData.contactPersonEmail" placeholder="请留下电子邮箱" />
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="grid-content">
<div class="grid-label">联系地址</div>
</el-col>
<el-col :span="14" class="grid-content">
<el-input v-model="formData.contactPersonDetailAddress" placeholder="请留下联系地址" />
</el-col>
</el-row>
</div>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: center">
<el-button @click="cancelView">返回</el-button>
<el-button type="primary" @click="openTip()">提交</el-button>
</div>
</div>
</div>
</div>
<home-footer ref="homeFooter" />
<el-backtop />
</div>
</template>
<script>
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import { getToken } from '@/utils/auth'
import { HttpReq } from '@/api/common'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter },
dicts: [],
data() {
return {
title: '',
uploadHeaders: { 'Authorization': getToken() },
imgSrcStart: process.env.VUE_APP_BASE_API,
editor: false, // 富文本对象
dialogImageUrl: '',
dialogImageVisible: false,
visible: false,
tagTypes: ['', 'primary', 'success', 'warning', 'danger', 'info', 'info', 'info'],
productTypeOpts: [],
productSubTypeOpts: [],
inputVisible: false,
inputValue: '',
productFeature: [], // 产品特点tag列表
formData: {
title: '', // 标题
consultType: '10', // 留言类型
consultationContent: '', // 需求说明
contactPerson: '', // 联系人
contactPersonPhone: '', // 电话
contactPersonEmail: '', // 邮箱
contactPersonDetailAddress: '', // 地址
rank: '1' // 产品品级
},
rules: {
title: { required: true, message: '请选择建议类别', trigger: 'blur' },
consultationContent: { required: true, message: '请填写留言内容', trigger: 'blur' },
contactPerson: { required: true, message: '请留下姓名', trigger: 'blur' },
contactPersonPhone: { required: true, message: '请留下联系电话', trigger: 'blur' }
}
}
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
onDictReady(dict) {
},
cancelView() {
this.$router.push({ path: `/home` })
},
openTip() {
this.$alert('我们收到了您的留言讯息，稍后将与您联系。', '完成', {
confirmButtonText: '确定',
type: 'success',
showClose: false,
center: true,
callback: action => {
this.cancelView()
}
})
},
submitForm() {
this.$refs.formViewRef.validate(valid => {
if (valid) {
HttpReq.backstageApi.addProduct(this.formData).then((res) => {
this.$notify({
title: res.msg,
type: 'success',
duration: 2500
})
if (res.code === 200) {
alert(666)
}
})
} else {
this.$message({
message: '表单信息有误，请核对无误后提交！',
type: 'error'
})
}
})
},
loadData() {
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.showcase {
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.form-table-box {
width: 1080px;
margin: 20px auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
.page-title {
margin-top: 20px;
padding: 0 20px;
font-size: 26px;
font-weight: bold;
color: #333333;
}
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
.grid-content {
border: 1px solid rgba(100, 100, 100, 0.3);
padding: 0;
}
.grid-label {
background: #dedede;
padding: 0 10px;
}
.editor{
text-align:left;
width: 680px;
}
::v-deep .w-e-text-container {
height: 560px !important;
}
.cell-box {
min-width: 120px;
.cell-input {
width: 620px;
}
.cell-select {
width: 320px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 28px;
line-height: 24px;
padding: 0 8px;
}
.input-new-tag {
width: 140px;
height: 28px;
margin-left: 10px;
vertical-align: bottom;
}
>>>.el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
border-bottom: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 5px;
}
>>>.el-input.is-disabled .el-input__inner {
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(100, 100, 100, 0.4);
background: white;
cursor: text;
}
>>>.el-input.is-disabled .el-input__icon {
cursor: text;
}
>>>.el-icon-circle-check {
color: #13ce66;
}
//>>>.el-icon-arrow-up:before {
// content: '';
//}
}
</style>
src/views/homepage/index.vue
View file @ 84909063
...@@ -40,9 +40,10 @@ ...@@ -40,9 +40,10 @@
<img v-if="item.isGood" src="@/assets/home_images/recommend.png" class="stamp" title="推荐" style="top: 10px;right: 8px"> <img v-if="item.isGood" src="@/assets/home_images/recommend.png" class="stamp" title="推荐" style="top: 10px;right: 8px">
<img v-if="item.isHot" src="@/assets/home_images/hot.png" class="stamp" title="热门" style="top: 0;left: 0"> <img v-if="item.isHot" src="@/assets/home_images/hot.png" class="stamp" title="热门" style="top: 0;left: 0">
<el-image <el-image
class="touch"
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgProduct" :src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgProduct"
:preview-src-list="item.imgSrcList.length?item.imgSrcList:[defaultImgProduct]"
style="width:284px;height: 284px;margin: 0 32px 4px" style="width:284px;height: 284px;margin: 0 32px 4px"
@click="goToDetails(item, '/product/details')"
> >
<div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div> <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
</el-image> </el-image>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment