You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
754 lines
19 KiB
754 lines
19 KiB
<!-- 页脚 -->
|
|
<template>
|
|
<div class="footer">
|
|
<div class="box">
|
|
<div class="top">
|
|
<ul>
|
|
<li v-for="(item, index) in sverList" :key="index">
|
|
<!-- <div class="none"></div>
|
|
<div class="left">
|
|
<div class="img">
|
|
<img :src="item.img" alt />
|
|
</div>
|
|
<div class="text">
|
|
<p class="title">{{ item.title }}</p>
|
|
<p class="name">{{ item.name }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<span></span>
|
|
</div> -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cont">
|
|
<div class="left">
|
|
<!-- <ul>
|
|
<li v-for="(item, index) in contList" :key="index">
|
|
<div class="title">{{ item.title }}</div>
|
|
<p
|
|
class="text"
|
|
v-for="(item2, index2) in item.list"
|
|
:key="index2"
|
|
@click="clickItem(item2)"
|
|
>
|
|
{{ item2 }}
|
|
</p>
|
|
</li>
|
|
</ul> -->
|
|
</div>
|
|
<div class="right">
|
|
<!-- <div class="title">合作伙伴</div>
|
|
<div class="hzhb">
|
|
<div
|
|
v-for="(item, index) in 5"
|
|
:key="index"
|
|
@click="clickItem('中国工商银行')"
|
|
>
|
|
<div class="img">
|
|
<img src="../assets/index/bank.png" alt />
|
|
</div>
|
|
<p>中国工商银行</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="certificate">
|
|
Copyright 安国市菁彤网络科技有限公司 All Rights Reserved | 冀ICP备2023010208号
|
|
</div>
|
|
</div>
|
|
<div class="floatWindow">
|
|
<div class="list">
|
|
<!-- <div class="item" @click="goCustomer">
|
|
<div class="iconfont">
|
|
<img src="../assets/index/yh.png" alt />
|
|
</div>
|
|
<div>客服消息</div>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
<el-tooltip effect="light" placement="left" manual :value="dhflag">
|
|
<div slot="content" style="line-height: 20px">
|
|
<div>
|
|
<p>
|
|
<b>专属业务员</b>
|
|
</p>
|
|
<p>张三 13456754567</p>
|
|
</div>
|
|
|
|
<div style="margin-top: 5px">
|
|
<p>
|
|
<b>其他联系方式</b>
|
|
</p>
|
|
<p>张三 13456754567</p>
|
|
<p>张三 13456754567</p>
|
|
</div>
|
|
</div>
|
|
<div class="item" @click="replyContentdh">
|
|
<div class="iconfont">
|
|
<img src="../assets/index/dh.png" alt />
|
|
</div>
|
|
<div>联系电话</div>
|
|
</div>
|
|
</el-tooltip>
|
|
</div> -->
|
|
|
|
<!-- <div class="item" @mouseleave="wxCodeHide">
|
|
<div @mouseenter="wxCode">
|
|
<div class="iconfont icon-weixin4"></div>
|
|
<div>关注微信</div>
|
|
</div>
|
|
<div class="itemCon" v-if="iScode">
|
|
<div class="ewm">
|
|
<div class="pictrue">
|
|
<div class="arrow"></div>
|
|
<img :src="codeUrl" class="bicode" />
|
|
</div>
|
|
<div class="tip">扫码关注公众号</div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
<div class="item" @click="goCart">
|
|
<div class="iconfont">
|
|
<img src="../assets/index/card.png" alt />
|
|
</div>
|
|
<div>购物车</div>
|
|
</div>
|
|
|
|
<div>
|
|
<!-- <el-tooltip effect="light" manual :value="xzflag" placement="left"> -->
|
|
<!-- <div slot="content">
|
|
<div>
|
|
<img style="width: 100px; height: 100px; padding: 5px" src alt />
|
|
</div>
|
|
</div> -->
|
|
<a :href="appDownloadUrl">
|
|
<div class="item">
|
|
<div class="iconfont">
|
|
<img src="../assets/index/xz.png" alt />
|
|
</div>
|
|
<div>下载APP</div>
|
|
</div>
|
|
</a>
|
|
<!-- </el-tooltip> -->
|
|
</div>
|
|
|
|
<div>
|
|
<el-tooltip effect="light" manual :value="fkflag" placement="left">
|
|
<div slot="content" class="opinion_tooltip">
|
|
<!-- 意见反馈form表单 -->
|
|
<div class="opinion_form">
|
|
<el-form
|
|
ref="opinionForm"
|
|
:model="opinionForm"
|
|
refs="opinionForm"
|
|
:rules="rules"
|
|
>
|
|
<el-form-item prop="content">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="opinionForm.content"
|
|
placeholder="请输入您要反馈的内容"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="phone">
|
|
<el-input
|
|
v-model="opinionForm.phone"
|
|
placeholder="请留下您的联系方式"
|
|
size="small"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="image">
|
|
<UploadImage1
|
|
UploadImage1Url="/upload/otherImage"
|
|
@input="uploadSccess($event, 'image')"
|
|
:value="opinionForm.image"
|
|
:limit="1"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload_BOX">
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" alt />
|
|
<span>上传图片</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<!-- <div class="tipt">最多上传6张相关的这图片</div> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button
|
|
style="float: right"
|
|
size="small"
|
|
type="primary"
|
|
@click="opinionClose('opinionForm')"
|
|
>确定</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="item" @click="replyContentfk">
|
|
<div class="iconfont">
|
|
<img src="../assets/index/fk.png" alt />
|
|
</div>
|
|
<div>意见反馈</div>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<chat-room
|
|
v-show="chatOptions.show"
|
|
:chat-options="chatOptions"
|
|
@chat-close="chatClose"
|
|
@socket-open="socketOpen"
|
|
@socket-error="socketError"
|
|
></chat-room>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "@/setting";
|
|
import ChatRoom from "@/components/ChatRoom";
|
|
import appChat from "@/mixins/appChat";
|
|
export default {
|
|
name: "footers",
|
|
components: {
|
|
ChatRoom,
|
|
},
|
|
mixins: [appChat],
|
|
data() {
|
|
return {
|
|
appDownloadUrl: Setting.app_download,
|
|
copyrightInfo: {},
|
|
userInfo: JSON.parse(localStorage.getItem("userInfo")),
|
|
// 是否登录
|
|
isSignin: localStorage.getItem("token") ? true : false,
|
|
companyInfo: {},
|
|
codeUrl: "",
|
|
iScode: false,
|
|
webInfo: {},
|
|
sverList: [
|
|
{
|
|
img: require("../assets/index/d.png"),
|
|
title: "品类齐全",
|
|
name: "轻松购物",
|
|
},
|
|
|
|
{
|
|
img: require("../assets/index/k.png"),
|
|
title: "多仓直发",
|
|
name: "极速配送",
|
|
},
|
|
{
|
|
img: require("../assets/index/h.png"),
|
|
title: "正品行货",
|
|
name: "精致服务",
|
|
},
|
|
{
|
|
img: require("../assets/index/s.png"),
|
|
title: "天天低价",
|
|
name: "畅选无忧",
|
|
},
|
|
],
|
|
contList: [
|
|
{
|
|
title: "关于我们",
|
|
list: ["公司简介", "企业文化", "加入我们"],
|
|
},
|
|
{
|
|
title: "联系方式",
|
|
list: [
|
|
"电话：13458978657",
|
|
"邮箱：293747@qq.com",
|
|
"地址：山西省忻州市五台县长寿大道254号",
|
|
],
|
|
},
|
|
],
|
|
// 下载app是否显示二维码
|
|
xzflag: false,
|
|
// 是否显示联系电话
|
|
dhflag: false,
|
|
// 是否显示意见反馈
|
|
fkflag: false,
|
|
opinion_success: false,
|
|
// 意见反馈表单
|
|
opinionForm: {
|
|
content: "",
|
|
phone: "",
|
|
image: "",
|
|
},
|
|
rules: {
|
|
content: {
|
|
required: true,
|
|
message: "请输入您要反馈的内容",
|
|
trigger: "blur",
|
|
},
|
|
phone: {
|
|
required: true,
|
|
message: "请留下您的联系方式",
|
|
trigger: "blur",
|
|
},
|
|
image: {
|
|
required: true,
|
|
message: "请上传图片",
|
|
trigger: "change",
|
|
},
|
|
},
|
|
};
|
|
},
|
|
//监听属性 类似于data概念
|
|
computed: {},
|
|
//监控data中的数据变化
|
|
watch: {},
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
head() {
|
|
return {
|
|
meta: [
|
|
{
|
|
hid: "keywords",
|
|
name: "keywords",
|
|
content: this.companyInfo.site_keywords,
|
|
},
|
|
{
|
|
hid: "description",
|
|
name: "description",
|
|
content: this.companyInfo.site_description,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
// this.getCompanyInfo();
|
|
// this.wechatCode();
|
|
this.getCopyright();
|
|
},
|
|
//方法集合
|
|
methods: {
|
|
getCopyright() {
|
|
this.$axios
|
|
.post(`/config/copyright`)
|
|
.then((res) => {
|
|
// console.log(res.data, `copyright`);
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
clickItem(v) {
|
|
this.$router.push({ path: "/about", query: { title: v } });
|
|
},
|
|
goTop() {
|
|
(function n() {
|
|
var t = document.documentElement.scrollTop || document.body.scrollTop;
|
|
if (t > 0) {
|
|
document.body.scrollTop = 0;
|
|
document.documentElement.scrollTop = 0;
|
|
}
|
|
})();
|
|
},
|
|
wxCode() {
|
|
this.iScode = true;
|
|
},
|
|
wxCodeHide() {
|
|
this.iScode = false;
|
|
},
|
|
goCart() {
|
|
// 已登录跳转
|
|
if (this.isSignin) {
|
|
this.$router.push({
|
|
path: "/shopping_cart",
|
|
});
|
|
}
|
|
//未登录跳转，登录页
|
|
else {
|
|
this.$message.error("请先登录！");
|
|
this.$router.push({ path: "/login" });
|
|
}
|
|
},
|
|
wechatCode() {
|
|
this.$axios
|
|
.get("/pc/get_wechat_qrcode")
|
|
.then((res) => {
|
|
this.codeUrl = res.data.wechat_qrcode;
|
|
console.log(this.codeUrl, "数据");
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
getCompanyInfo() {
|
|
this.$axios
|
|
.get("/pc/get_company_info")
|
|
.then((res) => {
|
|
this.companyInfo = res.data;
|
|
|
|
this.$store.commit("logo", res.data.logoUrl);
|
|
this.$cookies.set("logo", res.data.logoUrl);
|
|
// this.$store.commit("titles", res.data.site_name);
|
|
// this.$cookies.set("titles", res.data.site_name);
|
|
this.$store.commit("titles", "药厂");
|
|
this.$cookies.set("titles", "药厂");
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
openLink(url) {
|
|
window.open(url);
|
|
},
|
|
goCustomer() {
|
|
// 已登录跳转
|
|
if (this.isSignin) {
|
|
this.$router.push({ path: "/customer_news" });
|
|
}
|
|
//未登录跳转，登录页
|
|
else {
|
|
this.$message.error("请先登录！");
|
|
this.$router.push({ path: "/login" });
|
|
}
|
|
},
|
|
// 下载app是否显示二维码
|
|
replyContentxz() {
|
|
this.xzflag = !this.xzflag;
|
|
},
|
|
// 是否显示联系电话
|
|
replyContentdh() {
|
|
this.dhflag = !this.dhflag;
|
|
},
|
|
// 是否显示意见反馈
|
|
replyContentfk() {
|
|
this.fkflag = !this.fkflag;
|
|
},
|
|
opinionClose(formname) {
|
|
this.$refs[formname].validate((valid) => {
|
|
if (valid) {
|
|
let { content, phone, image } = { ...this.opinionForm };
|
|
let obj = {
|
|
name: this.userInfo.nickname,
|
|
content,
|
|
phone,
|
|
image,
|
|
};
|
|
this.$axios
|
|
.post(`/config/findServiceContent`, obj)
|
|
.then((res) => {
|
|
this.$message.success(res.message);
|
|
this.opinionForm = {};
|
|
this.fkflag = false;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
uploadSccess(e, key) {
|
|
this.opinionForm[key] = e;
|
|
this.$refs.opinionForm.validateField(key);
|
|
},
|
|
},
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
mounted() {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.floatWindow {
|
|
position: fixed;
|
|
right: 1%;
|
|
bottom: 15%;
|
|
width: 80px;
|
|
z-index: 99;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
|
|
|
|
.list {
|
|
padding: 5px 14px;
|
|
width: 80px;
|
|
border: 1px solid #d8d8d8;
|
|
.item:last-child {
|
|
border: 0;
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
height: 90px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #5c5c5c;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
&:hover {
|
|
color: #e93323;
|
|
}
|
|
div {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
.iconfont {
|
|
margin-bottom: 5px;
|
|
img {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.itemCon {
|
|
right: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
padding-right: 20px;
|
|
.ewm {
|
|
width: 140px;
|
|
border: 1px solid #eeeeee;
|
|
background-color: #fff;
|
|
padding: 8px 6px;
|
|
.tip {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-top: 6px;
|
|
}
|
|
.pictrue {
|
|
width: 126px;
|
|
height: 126px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.arrow {
|
|
position: absolute;
|
|
right: -16px;
|
|
top: 10px;
|
|
width: 0px;
|
|
height: 0px;
|
|
border: 8px solid transparent;
|
|
border-left-color: #eee;
|
|
&:before {
|
|
position: absolute;
|
|
left: -8px;
|
|
top: -7px;
|
|
content: "";
|
|
width: 0px;
|
|
height: 0px;
|
|
border: 7px solid transparent;
|
|
border-left-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
width: 100%;
|
|
background: #323232;
|
|
// background:var(--themeColor);
|
|
|
|
.box {
|
|
// width: 1200px;
|
|
// margin: 0 auto;
|
|
}
|
|
.top {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
border-bottom: 1px solid #4a4a4a;
|
|
ul {
|
|
height: 110px;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
li:nth-child(1) {
|
|
flex: 5;
|
|
justify-content: space-between;
|
|
.none {
|
|
display: none;
|
|
}
|
|
}
|
|
li:last-child {
|
|
flex: 5;
|
|
justify-content: flex-end;
|
|
|
|
.right {
|
|
display: none;
|
|
}
|
|
}
|
|
li {
|
|
flex: 8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left {
|
|
display: flex;
|
|
|
|
.img {
|
|
width: 47px;
|
|
height: 47px;
|
|
margin-right: 10px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.text {
|
|
.title,
|
|
.name {
|
|
height: 25px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
|
|
color: #927356;
|
|
line-height: 25px;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
span {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 25px;
|
|
background: #525252;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cont {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px 0;
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
|
|
.left {
|
|
ul {
|
|
padding: 0;
|
|
display: flex;
|
|
|
|
li {
|
|
margin-right: 118px;
|
|
|
|
.title {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #e3e3e3;
|
|
line-height: 22px;
|
|
text-align: left;
|
|
}
|
|
.text {
|
|
text-align: left;
|
|
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #878787;
|
|
line-height: 20px;
|
|
margin-top: 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: 50%;
|
|
|
|
.title {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #e3e3e3;
|
|
line-height: 22px;
|
|
text-align: left;
|
|
}
|
|
.hzhb {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
margin: auto;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
p {
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #e3e3e3;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.certificate {
|
|
padding: 16px 0;
|
|
height: 50px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #e3e3e3;
|
|
text-align: center;
|
|
line-height: 17px;
|
|
background-color: #2c2c2c;
|
|
}
|
|
}
|
|
.opinion_tooltip {
|
|
.opinion_form {
|
|
/deep/.el-form-item {
|
|
.el-form-item__content {
|
|
display: flex;
|
|
.upload_BOX {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dddddd;
|
|
text-align: center;
|
|
.upload {
|
|
margin: 10px auto;
|
|
color: #ccc;
|
|
img {
|
|
margin: auto;
|
|
width: 22px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
.tipt {
|
|
width: 90px;
|
|
width: 92px;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #c0c4cc;
|
|
line-height: 20px;
|
|
margin: 15px auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|