|
@@ -28,43 +28,31 @@
|
|
|
<div class="left">
|
|
|
<i class="iconfont icon-edit_input_arrow icon-expand"></i>
|
|
|
<img
|
|
|
- v-if="
|
|
|
- item.type === '电话' &&
|
|
|
- item.isShow
|
|
|
- "
|
|
|
+ v-if="item.type === '电话' && item.isShow"
|
|
|
:src="require('@/assets/images/icons/phone.svg')"
|
|
|
class="button-icon"
|
|
|
alt=""
|
|
|
/>
|
|
|
<img
|
|
|
- v-if="
|
|
|
- item.type === '电话' &&
|
|
|
- !item.isShow
|
|
|
- "
|
|
|
+ v-if="item.type === '电话' && !item.isShow"
|
|
|
:src="require('@/assets/images/icons/phone-dark.svg')"
|
|
|
class="button-icon"
|
|
|
alt=""
|
|
|
/>
|
|
|
<img
|
|
|
- v-if="
|
|
|
- item.type === '链接' &&
|
|
|
- item.isShow
|
|
|
- "
|
|
|
+ v-if="item.type === '链接' && item.isShow"
|
|
|
:src="require('@/assets/images/icons/link.svg')"
|
|
|
class="button-icon"
|
|
|
alt=""
|
|
|
/>
|
|
|
<img
|
|
|
- v-if="
|
|
|
- item.type === '链接' &&
|
|
|
- !item.isShow
|
|
|
- "
|
|
|
+ v-if="item.type === '链接' && !item.isShow"
|
|
|
:src="require('@/assets/images/icons/link-dark.svg')"
|
|
|
class="button-icon"
|
|
|
alt=""
|
|
|
/>
|
|
|
<span class="button-name">
|
|
|
- {{ getButtonTypeI18n(item.type)}}
|
|
|
+ {{ getButtonTypeI18n(item.type) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="right">
|
|
@@ -90,11 +78,17 @@
|
|
|
</div>
|
|
|
<div class="edit-content">
|
|
|
<div class="edit-content-item">
|
|
|
- <span class="item-name">{{ $i18n.t(`edit_settings.button_type`) }}</span>
|
|
|
- <div style="margin-left: 16px">{{ getButtonTypeI18n(item.type) }}</div>
|
|
|
+ <span class="item-name">{{
|
|
|
+ $i18n.t(`edit_settings.button_type`)
|
|
|
+ }}</span>
|
|
|
+ <div style="margin-left: 16px">
|
|
|
+ {{ getButtonTypeI18n(item.type) }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="edit-content-item">
|
|
|
- <span class="item-name">{{ $i18n.t(`edit_settings.button_name`) }}</span>
|
|
|
+ <span class="item-name">{{
|
|
|
+ $i18n.t(`edit_settings.button_name`)
|
|
|
+ }}</span>
|
|
|
<div style="margin-left: 16px">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
@@ -105,15 +99,17 @@
|
|
|
{{ item.value }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="edit-content-item">
|
|
|
- <span class="item-name">{{ $i18n.t("edit_settings.button_open_method") }}</span>
|
|
|
+ <div class="edit-content-item" v-if="item.type !== '电话'">
|
|
|
+ <span class="item-name"
|
|
|
+ >{{ $i18n.t("edit_settings.button_open_method") }}</span
|
|
|
+ >
|
|
|
<div style="margin-left: 16px">
|
|
|
{{ $i18n.t(`zh_key.${item.openMethod}`) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 编辑框 -->
|
|
|
<popup v-if="isEditing" :canClose="false">
|
|
|
<div class="ui-message ui-message-confirm dark edit-window">
|
|
|
<div class="ui-message-header">
|
|
@@ -125,7 +121,9 @@
|
|
|
|
|
|
<div class="ui-message-main">
|
|
|
<div class="edit-content-item">
|
|
|
- <span class="item-name">{{ $i18n.t(`edit_settings.button_name`) }}</span>
|
|
|
+ <span class="item-name">{{
|
|
|
+ $i18n.t(`edit_settings.button_name`)
|
|
|
+ }}</span>
|
|
|
<PulldownMenuInEditor
|
|
|
class="selector"
|
|
|
:valueList="buttonTypeList"
|
|
@@ -142,12 +140,16 @@
|
|
|
<span class="item-name">{{ editingButtonValueTip }}</span>
|
|
|
<input
|
|
|
class="value-input"
|
|
|
- :placeholder="`${$i18n.t(`edit_settings.please_input`)}${editingButtonValueTip}`"
|
|
|
+ :placeholder="`${$i18n.t(
|
|
|
+ `edit_settings.please_input`
|
|
|
+ )}${editingButtonValueTip}`"
|
|
|
v-model="editingInfo.value"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="edit-content-item">
|
|
|
- <span class="item-name">{{ $i18n.t('edit_settings.button_open_method') }}</span>
|
|
|
+ <div class="edit-content-item full" v-if="!isNotPhoneMode">
|
|
|
+ <span class="item-name">{{
|
|
|
+ $i18n.t("edit_settings.button_open_method")
|
|
|
+ }}</span>
|
|
|
<PulldownMenuInEditor
|
|
|
class="selector"
|
|
|
:valueList="buttonOpenMethodList"
|
|
@@ -185,7 +187,7 @@ export default {
|
|
|
return {
|
|
|
expandStatus: [],
|
|
|
buttonTypeList: ["电话", "链接"],
|
|
|
- buttonOpenMethodList: ['弹出层打开', '新窗口打开'],
|
|
|
+ buttonOpenMethodList: ["弹出层打开", "新窗口打开"],
|
|
|
isEditing: false,
|
|
|
editingButtonIdx: -1,
|
|
|
editingInfo: {
|
|
@@ -200,6 +202,10 @@ export default {
|
|
|
...mapGetters({
|
|
|
info: "info",
|
|
|
}),
|
|
|
+ isNotPhoneMode() {
|
|
|
+ //TODO 这个模块都有用中文做为key value (惊了?)
|
|
|
+ return this.editingInfo.type === "电话";
|
|
|
+ },
|
|
|
buttonValueTips() {
|
|
|
if (this.info.customButton) {
|
|
|
return this.info.customButton.map((item) => {
|
|
@@ -226,10 +232,19 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
+ // editingInfo: {
|
|
|
+ // handler(val) {
|
|
|
+ // console.log("editingInfo-1", val);
|
|
|
+ // },
|
|
|
+ // immediate: true,
|
|
|
+ // deep: true,
|
|
|
+ // },
|
|
|
"editingInfo.type": {
|
|
|
- handler(vNew) {
|
|
|
- this.editingInfo.name = i18n.t(`zh_key.${vNew}`);
|
|
|
- this.editingInfo.value = "";
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.editingInfo.name = i18n.t(`zh_key.${newValue}`);
|
|
|
+ if (oldValue && newValue !== oldValue) {
|
|
|
+ this.editingInfo.value = "";
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
},
|
|
@@ -255,8 +270,8 @@ export default {
|
|
|
}
|
|
|
if (!this.info.customButton[0].openMethod) {
|
|
|
// 这是在v1.3版之前创建的作品,还没设置过自定义按钮的打开方式。
|
|
|
- this.info.customButton[0].openMethod = '弹出层打开'
|
|
|
- this.info.customButton[1].openMethod = '弹出层打开'
|
|
|
+ this.info.customButton[0].openMethod = "弹出层打开";
|
|
|
+ this.info.customButton[1].openMethod = "弹出层打开";
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -269,12 +284,12 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
getButtonTypeI18n(buttonType) {
|
|
|
- if (buttonType === '电话') {
|
|
|
+ if (buttonType === "电话") {
|
|
|
return i18n.t("edit_settings.phone_short");
|
|
|
- } else if (buttonType === '链接') {
|
|
|
+ } else if (buttonType === "链接") {
|
|
|
return i18n.t("edit_settings.link_short");
|
|
|
} else {
|
|
|
- return ''
|
|
|
+ return "";
|
|
|
}
|
|
|
},
|
|
|
onRequestForChangeExpandStatus(index) {
|
|
@@ -282,10 +297,11 @@ export default {
|
|
|
},
|
|
|
onRequestForEdit(index) {
|
|
|
this.editingButtonIdx = index;
|
|
|
+
|
|
|
this.editingInfo.type = this.info.customButton[index].type;
|
|
|
this.editingInfo.name = this.info.customButton[index].name;
|
|
|
this.editingInfo.value = this.info.customButton[index].value;
|
|
|
- this.editingInfo.openMethod = this.info.customButton[index].openMethod
|
|
|
+ this.editingInfo.openMethod = this.info.customButton[index].openMethod;
|
|
|
this.isEditing = true;
|
|
|
},
|
|
|
checkButtonName(name) {
|
|
@@ -541,7 +557,11 @@ export default {
|
|
|
margin-top: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
+ &.full {
|
|
|
+ .selector {
|
|
|
+ width: 610px;
|
|
|
+ }
|
|
|
+ }
|
|
|
> .item-name {
|
|
|
flex: 0 0 auto;
|
|
|
font-size: 14px;
|
|
@@ -588,4 +608,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|