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