jiangyy
4 years ago
7 changed files with 526 additions and 81 deletions
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,245 @@ |
|||
<template> |
|||
<div class="div_mode"> |
|||
|
|||
<div> |
|||
<span>显示模式：</span> |
|||
<div class="div_radio"> |
|||
<el-radio v-model="mode" |
|||
label="flat">模式1</el-radio> |
|||
<el-radio v-model="mode" |
|||
@change="changeToMode2" |
|||
label="float">模式2（非隐藏标签总数为奇数时可选择）</el-radio> |
|||
<el-button size="mini" |
|||
type="primary" |
|||
@click="saveMode">{{ '保存' }}</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
<div v-if="mode=='flat'" |
|||
class="div_phone"> |
|||
<div class="phone_concent"> |
|||
<div class="phone_item" |
|||
v-for="(item,index) in showFootbarList" |
|||
:key="index"> |
|||
|
|||
<img v-if="index===0" |
|||
:src="item.selectedIconPath" |
|||
class="phone_img"> |
|||
<img v-else |
|||
class="phone_img" |
|||
:src="item.iconPath"> |
|||
<div :class="['bar_name',{'bar_name_sel':index===0}]">{{item.barName}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div v-if="mode=='float'" |
|||
class="div_phone_float"> |
|||
<div class="phone_concent phone_concent_float"> |
|||
<div :class="['phone_item',{'phone_item_float':item.isFloat}]" |
|||
v-for="(item,index) in showFootbarList" |
|||
:key="index"> |
|||
<div v-if="item.isFloat" |
|||
class="function_icon_float"> |
|||
<img :src="item.floatIconPath" |
|||
class="phone_img"> |
|||
</div> |
|||
<img v-else |
|||
class="phone_img" |
|||
:src="item.iconPath"> |
|||
<div :class="['bar_name',{'bar_name_sel':item.isFloat}]">{{item.barName}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
let loading// 加载动画 |
|||
export default { |
|||
props: { |
|||
showFootbarList: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
showMode: { |
|||
type: String, |
|||
default: "flat" |
|||
}, |
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
mode: this.showMode, |
|||
// showFootbarList: [] |
|||
|
|||
} |
|||
}, |
|||
created () { |
|||
// this.queryFunctionList() |
|||
}, |
|||
computed: { |
|||
diaTop () { |
|||
|
|||
return this.resolution === 'small' ? '30px' : '100px' |
|||
}, |
|||
...mapGetters(['clientHeight', 'resolution']), |
|||
}, |
|||
watch: { |
|||
// footbarList: {//深度监听，可监听到对象、数组的变化 |
|||
// handler (val, oldVal) { |
|||
// this.loadFootbarList(val) |
|||
// // console.log("b.c: ", val, oldVal); |
|||
// }, |
|||
// deep: true //true 深度监听 |
|||
// } |
|||
}, |
|||
methods: { |
|||
//切换模式到2 |
|||
|
|||
changeToMode2 () { |
|||
if (this.showFootbarList.length % 2 === 0) {//偶数 |
|||
this.$message.error("当前Footbar数量为偶数，无法切换到模式2") |
|||
this.mode = "flat" |
|||
} |
|||
}, |
|||
loadFormData () { |
|||
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/footbardetail' |
|||
const url = '/oper/customize/customerfootbar/footbardetail' |
|||
let _data = { |
|||
id: this.id |
|||
} |
|||
this.startLoading() |
|||
window.app.ajax.post(url, _data, |
|||
(data, rspMsg) => { |
|||
this.endLoading() |
|||
this.dataForm = data |
|||
|
|||
}, |
|||
(rspMsg, data) => { |
|||
this.endLoading() |
|||
this.$message.error(rspMsg) |
|||
}) |
|||
}, |
|||
|
|||
|
|||
async saveMode () { |
|||
this.startLoading() |
|||
// const url = "http://yapi.elinkservice.cn/mock/102/oper/crm/customer/savefootbarpattern" |
|||
const url = "/oper/crm/customer/savefootbarpattern" |
|||
|
|||
const params = { |
|||
customerId: this.customerId, |
|||
appType: this.activeName |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
|
|||
if (data) { |
|||
this.showMode = data.pattern |
|||
} |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.endLoading() |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.div_mode { |
|||
margin-top: 30px; |
|||
position: relative; |
|||
} |
|||
.mode_btn { |
|||
position: absolute; |
|||
right: 20px; |
|||
top: 20px; |
|||
} |
|||
.span_title { |
|||
font-size: 15px; |
|||
} |
|||
.div_radio { |
|||
margin-left: 30px; |
|||
display: inline; |
|||
} |
|||
.div_phone { |
|||
position: relative; |
|||
padding: 15px; |
|||
margin: 20px 20px; |
|||
width: 400px; |
|||
height: 80px; |
|||
overflow: auto; |
|||
background-color: #ffffff; |
|||
box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.div_phone_float { |
|||
position: relative; |
|||
padding: 15px; |
|||
margin: 20px 20px; |
|||
width: 400px; |
|||
height: 110px; |
|||
overflow: auto; |
|||
background-image: url(~@/assets/img/footbar_bc1.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.phone_concent { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
.phone_concent_float { |
|||
margin-top: 25px; |
|||
} |
|||
.phone_item { |
|||
text-align: center; |
|||
} |
|||
.phone_item_float { |
|||
margin-top: -25px; |
|||
} |
|||
.function_icon_float { |
|||
text-align: center; |
|||
background: #e3271c; |
|||
box-shadow: 0px 2px 12px 0px rgba(209, 34, 24, 0.57); |
|||
border-radius: 50%; |
|||
padding: 12px; |
|||
} |
|||
.phone_img { |
|||
width: 20px; |
|||
height: 22px; |
|||
} |
|||
.bar_name { |
|||
margin-top: 7px; |
|||
font-size: 10px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #cccccc; |
|||
} |
|||
.bar_name_sel { |
|||
color: #e3271c; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue