@@ -43,4 +43,6 @@ npm run lint | |||||
- 增加 接口文件 | - 增加 接口文件 | ||||
- 增加 store 文件 | - 增加 store 文件 | ||||
- 增加 封装的 toast 和 dialog 文件 | |||||
- 增加 封装 toast ,notify 和 dialog | |||||
- 增加 亲情号码,增加/修改亲情号码页面 | |||||
- 修改 tabBar 文件 |
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<van-tabbar fixed route v-model="active" @change="handleChange"> | <van-tabbar fixed route v-model="active" @change="handleChange"> | ||||
<van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index"> | |||||
<van-tabbar-item v-for="(item, index) in tabbars" :to="item.to" :icon="item.icon" :key="index"> | |||||
{{ item.title }} | {{ item.title }} | ||||
</van-tabbar-item> | </van-tabbar-item> | ||||
</van-tabbar> | </van-tabbar> | ||||
@@ -14,17 +14,48 @@ export default { | |||||
defaultActive: { | defaultActive: { | ||||
type: Number, | type: Number, | ||||
default: 0 | default: 0 | ||||
}, | |||||
data: { | |||||
type: Array, | |||||
default: () => { | |||||
return []; | |||||
} | |||||
} | } | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
active: this.defaultActive | |||||
active: this.defaultActive, | |||||
tabbars: [ | |||||
{ | |||||
title: '成长', | |||||
to: { | |||||
name: 'Development' | |||||
}, | |||||
icon: 'guide-o' | |||||
}, | |||||
{ | |||||
title: '今日', | |||||
to: { | |||||
name: 'Today' | |||||
}, | |||||
icon: 'notes-o' | |||||
}, | |||||
{ | |||||
title: '洞悉', | |||||
to: { | |||||
name: 'Insight' | |||||
}, | |||||
icon: 'apps-o' | |||||
}, | |||||
{ | |||||
title: '优化', | |||||
to: { | |||||
name: 'Optimize' | |||||
}, | |||||
icon: 'diamond-o' | |||||
}, | |||||
{ | |||||
title: '我的', | |||||
to: { | |||||
name: 'Myself' | |||||
}, | |||||
icon: 'user-circle-o' | |||||
} | |||||
] | |||||
}; | }; | ||||
}, | }, | ||||
methods: { | methods: { | ||||
@@ -1,4 +1,95 @@ | |||||
// 按需全局引入 vant组件 | // 按需全局引入 vant组件 | ||||
import Vue from 'vue'; | import Vue from 'vue'; | ||||
import { Button, Tabbar, TabbarItem, Toast, NavBar } from 'vant'; | |||||
Vue.use(Button).use(Tabbar).use(TabbarItem).use(Toast).use(NavBar); | |||||
import { | |||||
Button, | |||||
Tabbar, | |||||
TabbarItem, | |||||
Calendar, | |||||
Cell, | |||||
CellGroup, | |||||
Col, | |||||
DatetimePicker, | |||||
Dialog, | |||||
Field, | |||||
Form, | |||||
Icon, | |||||
Image, | |||||
List, | |||||
Loading, | |||||
NavBar, | |||||
NoticeBar, | |||||
Notify, | |||||
Overlay, | |||||
Popup, | |||||
PullRefresh, | |||||
Radio, | |||||
RadioGroup, | |||||
Row, | |||||
Slider, | |||||
Swipe, | |||||
SwipeCell, | |||||
SwipeItem, | |||||
Switch, | |||||
Tab, | |||||
Tabs, | |||||
Toast, | |||||
Tag, | |||||
Image as VanImage, | |||||
ActionSheet, | |||||
DropdownMenu, | |||||
DropdownItem, | |||||
Uploader, | |||||
Checkbox, | |||||
CheckboxGroup, | |||||
Circle, | |||||
Collapse, | |||||
CollapseItem, | |||||
ImagePreview, | |||||
Picker | |||||
} from 'vant'; | |||||
Vue.use(Button) | |||||
.use(NavBar) | |||||
.use(Calendar) | |||||
.use(Cell) | |||||
.use(CellGroup) | |||||
.use(Col) | |||||
.use(DatetimePicker) | |||||
.use(Dialog) | |||||
.use(Icon) | |||||
.use(Image) | |||||
.use(Form) | |||||
.use(Field) | |||||
.use(List) | |||||
.use(Loading) | |||||
.use(NavBar) | |||||
.use(NoticeBar) | |||||
.use(Notify) | |||||
.use(Overlay) | |||||
.use(Popup) | |||||
.use(PullRefresh) | |||||
.use(Radio) | |||||
.use(RadioGroup) | |||||
.use(Row) | |||||
.use(Slider) | |||||
.use(Tabbar) | |||||
.use(TabbarItem) | |||||
.use(Swipe) | |||||
.use(SwipeCell) | |||||
.use(SwipeItem) | |||||
.use(Switch) | |||||
.use(Tab) | |||||
.use(Tabs) | |||||
.use(Toast) | |||||
.use(Tag) | |||||
.use(VanImage) | |||||
.use(ActionSheet) | |||||
.use(DropdownMenu) | |||||
.use(DropdownItem) | |||||
.use(Uploader) | |||||
.use(Checkbox) | |||||
.use(CheckboxGroup) | |||||
.use(Circle) | |||||
.use(Collapse) | |||||
.use(CollapseItem) | |||||
.use(ImagePreview) | |||||
.use(Picker); |
@@ -41,6 +41,24 @@ export const constantRouterMap = [ | |||||
name: 'Myself', | name: 'Myself', | ||||
component: () => import('@/views/myself/index'), | component: () => import('@/views/myself/index'), | ||||
meta: { title: '我的', keepAlive: false } | meta: { title: '我的', keepAlive: false } | ||||
}, | |||||
{ | |||||
path: '/familyNumber', | |||||
name: 'familyNumber', | |||||
component: () => import('@/views/myself/familyNumber'), | |||||
meta: { title: '亲情号码', keepAlive: false } | |||||
}, | |||||
{ | |||||
path: '/changeFamilyNumber', | |||||
name: 'changeFamilyNumber', | |||||
component: () => import('@/views/myself/changeFamilyNumber'), | |||||
meta: { title: '修改亲情号码', keepAlive: false } | |||||
}, | |||||
{ | |||||
path: '/addFamilyNumber', | |||||
name: 'addFamilyNumber', | |||||
component: () => import('@/views/myself/addFamilyNumber'), | |||||
meta: { title: '增加亲情号码', keepAlive: false } | |||||
} | } | ||||
] | ] | ||||
} | } | ||||
@@ -0,0 +1,15 @@ | |||||
import { Notify } from 'vant'; | |||||
let NotifyService = { | |||||
notify({ type, message, duration, className, onClickCallback }) { | |||||
Notify({ | |||||
type: type || 'warning', // success | primary | danger | |||||
message, | |||||
duration: duration || 1500, | |||||
className, | |||||
onClickCallback | |||||
}); | |||||
} | |||||
}; | |||||
export default NotifyService; |
@@ -1,10 +1,14 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div></div> | |||||
<div> | |||||
<TabBar /> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | |||||
export default { | export default { | ||||
components: { TabBar }, | |||||
data() { | data() { | ||||
return {}; | return {}; | ||||
}, | }, | ||||
@@ -1,10 +1,14 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div></div> | |||||
<div> | |||||
<TabBar /> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | |||||
export default { | export default { | ||||
components: { TabBar }, | |||||
data() { | data() { | ||||
return {}; | return {}; | ||||
}, | }, | ||||
@@ -6,14 +6,14 @@ | |||||
</keep-alive> | </keep-alive> | ||||
<router-view v-else></router-view> | <router-view v-else></router-view> | ||||
</div> | </div> | ||||
<div class="layout-footer"> | |||||
<!-- <div class="layout-footer"> | |||||
<TabBar :data="tabbars" @change="handleChange" /> | <TabBar :data="tabbars" @change="handleChange" /> | ||||
</div> | |||||
</div> --> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | |||||
/* import TabBar from '@/components/TabBar'; */ | |||||
export default { | export default { | ||||
name: 'AppLayout', | name: 'AppLayout', | ||||
data() { | data() { | ||||
@@ -58,7 +58,7 @@ export default { | |||||
}; | }; | ||||
}, | }, | ||||
components: { | components: { | ||||
TabBar | |||||
/* TabBar */ | |||||
}, | }, | ||||
methods: { | methods: { | ||||
handleChange(v) { | handleChange(v) { | ||||
@@ -0,0 +1,552 @@ | |||||
<template> | |||||
<div class="addFamilyNumber familyNumber replace"> | |||||
<div class="management"> | |||||
<div class="oh_100vh"> | |||||
<div class="top-con"> | |||||
<van-nav-bar title="新增亲情号" left-text="返回" :border="true" @click-left="onNavBack"> | |||||
<div class="family_save" slot="right" @click="submit">保存</div> | |||||
</van-nav-bar> | |||||
<van-cell-group> | |||||
<van-field | |||||
v-model.trim="nickName" | |||||
maxlength="6" | |||||
label="昵称" | |||||
required | |||||
placeholder="如爸爸,妈妈,必须少于6个汉字" | |||||
input-align="right" | |||||
/> | |||||
<van-field | |||||
v-model.trim="phone" | |||||
maxlength="12" | |||||
label="号码" | |||||
required | |||||
oninput="value=value.replace(/\s+/g,'')" | |||||
placeholder="可输入手机,固话,短号" | |||||
input-align="right" | |||||
/> | |||||
<van-cell center required> | |||||
<template #title> | |||||
<span class="custom-title">快捷键</span> | |||||
</template> | |||||
<template #extra> | |||||
<div> | |||||
<van-dropdown-menu> | |||||
<van-dropdown-item v-model="value1" @change="onDrodownClick" :options="shortKeylist" /> | |||||
</van-dropdown-menu> | |||||
</div> | |||||
</template> | |||||
</van-cell> | |||||
</van-cell-group> | |||||
<div class="tips-container" v-show="isUnicom"> | |||||
<div class="inside-tips"> | |||||
<p>注:</p> | |||||
<p>1)由于网络因素影响,亲情号码设置后,最长需要等待10分钟后才可拨打。</p> | |||||
<p> | |||||
2)设备最多可设置{{ | |||||
setPhoneNumber | |||||
}}个亲情号码,添加首月无法删除,次月起每月最多允许删除1个亲情号,请慎重操作。 | |||||
</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { DeviceCommandModel, FamilyNumberModel } from '../../config/models'; | |||||
import DialogService from '../../services/dialog-service'; | |||||
import ToastService from '../../services/toast-service'; | |||||
import NotifyService from '../../services/notify-service'; | |||||
import APICommand from '@/api/command'; | |||||
export default { | |||||
data() { | |||||
return { | |||||
loading: false, | |||||
nickName: '', | |||||
phone: '', | |||||
checked: false, | |||||
shortcutKey: '', | |||||
listData: [], | |||||
sos: false, | |||||
mbnoneDisabled: false, | |||||
sureFalg: true, // radio 联系方式类型 | |||||
/* contactType: "0" */ value1: '', | |||||
shortKeylist: [], //当前可设置的快捷键 | |||||
newShortKeyList: ['1', '2', '3', '4', '5'], //对比的快捷键 | |||||
familyNameList: [], //亲情号码名字 | |||||
familyShortKeyList: [], //亲情号码快捷键 | |||||
namePhoneList: [] //名字和亲情号码 | |||||
}; | |||||
}, | |||||
methods: { | |||||
// 点击其他按钮,号码清空 | |||||
onClearCornet() { | |||||
this.phone = ''; | |||||
}, | |||||
onClearMobile() { | |||||
this.phone = ''; | |||||
}, | |||||
onClearPhone() { | |||||
this.phone = ''; | |||||
}, | |||||
// 返回 | |||||
onNavBack() { | |||||
this.$router.push({ name: 'familyNumber' }); | |||||
}, | |||||
// 校验联系方式 | |||||
checkedContact() { | |||||
switch (this.contactType) { | |||||
case '0': | |||||
// eslint-disable-next-line no-case-declarations | |||||
let reg = /^1[3456789]\d{9}$/; | |||||
if (reg.test(this.phone)) { | |||||
return true; | |||||
} else { | |||||
DialogService.confirm({ title: '请输入正确的号码' }); | |||||
} | |||||
// eslint-disable-next-line no-fallthrough | |||||
case '1': | |||||
// eslint-disable-next-line no-case-declarations | |||||
let reg1 = /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/; | |||||
if (reg1.test(this.phone)) { | |||||
return true; | |||||
} else { | |||||
DialogService.confirm({ title: '请输入正确的号码' }); | |||||
return false; | |||||
} | |||||
case '2': | |||||
if (this.phone.length <= 6 && this.phone.length >= 2) { | |||||
return true; | |||||
} else { | |||||
DialogService.confirm({ | |||||
title: '请输入正确的2-6位短号' | |||||
}); | |||||
return false; | |||||
} | |||||
default: | |||||
DialogService.confirm({ title: '未知号码' }); | |||||
return false; | |||||
} | |||||
}, | |||||
// TODO 设置为亲情号码按钮事件 | |||||
checkedClick() { | |||||
if (!this.checked) { | |||||
this.mbnoneDisabled = true; | |||||
this.shortcutKey = '5'; | |||||
this.sos = true; | |||||
//TODO:轮询号码列表是有sos号码 | |||||
let over = this.listData.find(val => { | |||||
return val.PressKey == 5; | |||||
}); | |||||
if (over != null) { | |||||
DialogService.confirm({ | |||||
title: '已有sos号码,是否覆盖原sos号码?', | |||||
showCancelButton: true | |||||
}) | |||||
.then(() => { | |||||
//TODO:删除原有sos号码 | |||||
this.listData = this.listData.filter(val => { | |||||
return val.PressKey != 5; | |||||
}); | |||||
this.listData.forEach(val => { | |||||
if (val.SOS == 1) { | |||||
val.SOS = 0; | |||||
} | |||||
}); | |||||
}) | |||||
.catch(() => { | |||||
this.checked = false; | |||||
this.mbnoneDisabled = false; | |||||
this.shortcutKey = ''; | |||||
this.sos = false; | |||||
}); | |||||
} | |||||
} else { | |||||
this.mbnoneDisabled = false; | |||||
this.shortcutKey = ''; | |||||
this.sos = false; | |||||
} | |||||
}, | |||||
submit() { | |||||
if (!this.sureFalg) { | |||||
ToastService.success({ | |||||
message: '保存成功', | |||||
onClose: () => this.onNavBack() | |||||
}); | |||||
return; | |||||
} | |||||
// 数字正则 | |||||
let numberReg = /^-?\d*\.?\d+$/; | |||||
// 2022 . 6 .29 修改手机正则表达式 | |||||
// 固话正则 | |||||
// 是否存在空格 | |||||
let spaceReg = /(^\s+)|(\s+$)|\s+/g; | |||||
if (this.nickName == '') { | |||||
DialogService.confirm({ title: '昵称不能为空' }); | |||||
return; | |||||
} | |||||
if (spaceReg.test(this.phone)) { | |||||
DialogService.confirm({ title: '号码不能有空格,请您检查后重新输入' }); | |||||
return; | |||||
} | |||||
if (!numberReg.test(this.phone)) { | |||||
DialogService.confirm({ title: '号码只能是数字,请您重新输入' }); | |||||
return; | |||||
} | |||||
if (this.phone.length < 3) { | |||||
DialogService.confirm({ title: '请至少输入3位的短号' }); | |||||
return; | |||||
} | |||||
// 2022.7.13 取消正则匹配 | |||||
/* if(this.phone.length === 11) { | |||||
if(!mobileReg.test(this.phone)) { | |||||
DialogService.confirm({ title: "请输入正确的手机号码" }); | |||||
return; | |||||
} | |||||
} | |||||
if(this.phone.length > 11) { | |||||
if(!fixMobileReg.test(this.phone)) { | |||||
DialogService.confirm({ title: "请输入正确的固话" }); | |||||
return; | |||||
} | |||||
} */ | |||||
/* if (!mobileReg.test(Number(phoneNumber))) { | |||||
DialogService.confirm({ title: "请输入正确的手机号码" }); | |||||
return; | |||||
} */ | |||||
if (this.phone == '') { | |||||
DialogService.confirm({ title: '号码不能为空' }); | |||||
return; | |||||
} | |||||
/* 取消校验方式 */ | |||||
/* if (!this.checkedContact()) { | |||||
return; | |||||
} */ | |||||
// 找出重复的用户名 | |||||
let repetition = this.namePhoneList.filter(val => { | |||||
return val.relationship == this.nickName; | |||||
}); | |||||
// 找出重复的号码 | |||||
let exists = this.namePhoneList.filter(val => { | |||||
return val.phone == this.phone; | |||||
}); | |||||
// 判断重复的用户名 | |||||
if (typeof repetition != 'undefined' && repetition.length > 0 && !this.sos) { | |||||
if (repetition.length == 1) { | |||||
let existNum = repetition[0]; | |||||
if (existNum.PressKey !== '5') { | |||||
DialogService.confirm({ title: '用户名已存在' }); | |||||
return; | |||||
} | |||||
} else { | |||||
DialogService.confirm({ title: '用户名已存在' }); | |||||
return; | |||||
} | |||||
} | |||||
//TODO:判断重复号码 允许仅一个号码与sos号码相同 | |||||
if (typeof exists != 'undefined' && exists.length > 0 && !this.sos) { | |||||
if (exists.length == 1) { | |||||
let existNum = exists[0]; | |||||
if (existNum.PressKey !== '5') { | |||||
DialogService.confirm({ title: '电话号码已存在' }); | |||||
return; | |||||
} | |||||
} else { | |||||
DialogService.confirm({ title: '电话号码已存在' }); | |||||
return; | |||||
} | |||||
} | |||||
this.sure(); | |||||
}, | |||||
sure() { | |||||
// 保存中的弹窗 | |||||
this.listData.push({ | |||||
relationship: this.nickName, | |||||
phone: this.phone.replace(/\s+/g, ''), | |||||
SOS: this.checked ? 1 : 0, | |||||
PressKey: this.shortcutKey, | |||||
AppType: FamilyNumberModel.appType.parentWeb, | |||||
Editable: FamilyNumberModel.editable.parentWeb, | |||||
Level: FamilyNumberModel.level, | |||||
CallOut: FamilyNumberModel.callOut, | |||||
Outtime: FamilyNumberModel.outtime, | |||||
Incoming: FamilyNumberModel.inComing, | |||||
IncomingTime: FamilyNumberModel.incomingTime | |||||
}); | |||||
let cmdCode = DeviceCommandModel.familyNum; | |||||
let cmdValue = { WhiteList: this.listData }; | |||||
this.sendCommand(cmdCode, JSON.stringify(cmdValue)); | |||||
}, | |||||
inputChange() { | |||||
this.shortcutKey = this.shortcutKey.replace(/[^\d]/g, ''); | |||||
}, | |||||
getCommandList() { | |||||
ToastService.loading(); | |||||
/* let url = `/api/Command/CommandList`; | |||||
let jsonData = { deviceId: this.$store.getters.deviceId }; */ | |||||
let _this = this; | |||||
/* _this.$axios | |||||
.post(url, jsonData) */ | |||||
APICommand.commandList({ | |||||
deviceId: this.$store.getters.deviceId | |||||
}) | |||||
.then(res => { | |||||
let item = res.data; | |||||
let listData = []; | |||||
if (item.items.length > 0) { | |||||
let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.familyNum); | |||||
if (cmdData.length) { | |||||
let parseValue = JSON.parse(cmdData[0].cmdValue); | |||||
parseValue.WhiteList.forEach(val => { | |||||
listData.push(val); | |||||
}); | |||||
// 获取白名单列表相关数据 | |||||
_this.listData = listData; // 接口调用的数组 | |||||
_this.namePhoneList = listData; //专门来筛选名字和亲情号码的数组 | |||||
_this.setFamilyNum(); | |||||
_this.setFamilyShortKey(); | |||||
} | |||||
} | |||||
}) | |||||
.catch(err => console.log(err)) | |||||
.finally(() => ToastService.clear()); | |||||
}, | |||||
setFamilyNum() { | |||||
this.$store.commit('familyNameList', ''); | |||||
let _this = this; | |||||
if (_this.listData == null || this.listData.length == 0) { | |||||
this.$store.commit('familyNameList', ''); | |||||
} else { | |||||
_this.listData | |||||
.filter(val => { | |||||
return val.PressKey !== '5'; | |||||
}) | |||||
.forEach(f => { | |||||
_this.familyNameList.push(f.relationship); | |||||
this.$store.commit('familyNameList', _this.familyNameList); | |||||
}); | |||||
} | |||||
}, | |||||
// 缓存亲情号码快捷键 | |||||
setFamilyShortKey() { | |||||
this.$store.commit('familyShortKeyList', ''); | |||||
let _this = this; | |||||
if (_this.listData == null || this.listData.length == 0) { | |||||
this.$store.commit('familyShortKeyList', ''); | |||||
} else { | |||||
_this.listData | |||||
.filter(val => { | |||||
return val.PressKey != ''; | |||||
}) | |||||
.forEach(f => { | |||||
_this.familyShortKeyList.push(f.PressKey); | |||||
this.$store.commit('familyShortKeyList', _this.familyShortKeyList); | |||||
}); | |||||
} | |||||
}, | |||||
sendCommand(cmdCode, cmdValue) { | |||||
ToastService.loading({ message: '设置中,请稍后...' }); | |||||
/* let url = `/api/Command/SendCommand`; | |||||
let jsonData = { | |||||
deviceId: this.$store.getters.deviceId, | |||||
userId: this.$store.getters.userId, | |||||
serialNo: this.$store.getters.serialNo, | |||||
cmdCode, | |||||
cmdValue | |||||
}; */ | |||||
this.sureFalg = false; | |||||
this.loading = true; | |||||
/* this.$axios | |||||
.post(url, jsonData) */ | |||||
APICommand.SetIotWhiteList({ | |||||
deviceId: this.$store.getters.deviceId, | |||||
userId: this.$store.getters.userId, | |||||
serialNo: this.$store.getters.serialNo, | |||||
cmdCode, | |||||
cmdValue | |||||
}) | |||||
.then(res => { | |||||
ToastService.clear(); | |||||
let item = res.data; | |||||
if (item.stateCode == 1) { | |||||
ToastService.success({ | |||||
message: item.message, | |||||
onClose: () => this.onNavBack() | |||||
}); | |||||
} else { | |||||
DialogService.confirm({ | |||||
title: '保存失败', | |||||
message: item.message | |||||
}); | |||||
// 失败初始化筛选名字和亲情号码的数组,防止在此判断重复 | |||||
this.namePhoneList = []; | |||||
ToastService.clear(); | |||||
} | |||||
}) | |||||
.catch(() => {}) | |||||
.finally(() => { | |||||
this.sureFalg = true; | |||||
this.loading = false; | |||||
ToastService.clear(); | |||||
}); | |||||
}, | |||||
// 选择下拉框的值 | |||||
onDrodownClick(value) { | |||||
console.log('选择了', value); | |||||
if (value === '5') { | |||||
this.shortcutKey = '5'; | |||||
this.sos = true; | |||||
this.checked = true; | |||||
} else { | |||||
this.shortcutKey = value; | |||||
this.sos = false; | |||||
this.checked = false; | |||||
} | |||||
}, | |||||
// 初始化快捷键数组 | |||||
initShortKey() { | |||||
ToastService.loading(); | |||||
let familyShortKeyList = this.familyShortKeyList; | |||||
if (typeof familyShortKeyList === 'string') { | |||||
familyShortKeyList = Array.from(familyShortKeyList.replace(/,/g, '')); | |||||
} | |||||
let newShorList = this.findDiffShortKey(this.newShortKeyList, familyShortKeyList); | |||||
this.shortKeylist = newShorList | |||||
.map(s => { | |||||
let text = s; | |||||
if (s === '5') { | |||||
text = 'sos'; | |||||
} | |||||
return { | |||||
text: text, | |||||
value: s | |||||
}; | |||||
}) | |||||
.filter(s => { | |||||
return s.text != ''; | |||||
}); | |||||
let defaultObj = { | |||||
text: '无', | |||||
value: '' | |||||
}; | |||||
this.shortKeylist.push(defaultObj); | |||||
this.value1 = this.shortKeylist[0].value; | |||||
this.shortcutKey = this.value1; | |||||
}, | |||||
// 找出两个数组中未设置的快捷键 | |||||
findDiffShortKey(arr1, arr2) { | |||||
return arr1.concat(arr2).filter((v, i, arr) => { | |||||
return arr.indexOf(v) === arr.lastIndexOf(v); | |||||
}); | |||||
} | |||||
}, | |||||
computed: { | |||||
theNextClass() { | |||||
let reg = /^1[3456789]\d{9}$/; | |||||
let mobileReg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/; | |||||
if (this.nickName == '' || this.phone == '') { | |||||
return false; | |||||
} | |||||
if (!reg.test(this.phone)) { | |||||
if (!mobileReg.test(this.phone)) { | |||||
return false; | |||||
} | |||||
} | |||||
return true; | |||||
}, | |||||
// 获取物联网卡号码,非空为物联网卡,空则为普通电话卡,不显示提示 | |||||
isUnicom() { | |||||
return this.$store.getters.uniPhone !== ''; | |||||
}, | |||||
// 截取物联网卡前3个数字,148是移动,其它是联通,移动可设5个亲情号码,联通可设10个 | |||||
setPhoneNumber() { | |||||
const startNumber = this.$store.getters.uniPhone.slice(0, 3); | |||||
return startNumber === '148' ? 5 : 10; | |||||
} | |||||
}, | |||||
watch: { | |||||
shortcutKey(key) { | |||||
/* if (!this.sos && key > 4) { | |||||
DialogService.confirm({ | |||||
title: "快捷键1-4的数字", | |||||
}) | |||||
.then(() => { | |||||
this.shortcutKey = ""; | |||||
}); | |||||
} */ | |||||
// 当快捷键等于0的时候 | |||||
if (!this.sos && key === '0') { | |||||
DialogService.confirm({ | |||||
title: '快捷键1-4的数字' | |||||
}).then(() => { | |||||
this.shortcutKey = ''; | |||||
}); | |||||
} | |||||
if (key === '5') { | |||||
this.sos = true; | |||||
this.checked = true; | |||||
} | |||||
if (key) { | |||||
this.listData.forEach(val => { | |||||
if (key == val.PressKey && key < 5) { | |||||
DialogService.confirm({ | |||||
title: '快捷键已经存在,请另外设置其它的快捷健' | |||||
}).then(() => { | |||||
this.sos = false; | |||||
this.shortcutKey = ''; | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
}, | |||||
nickName() { | |||||
if (this.nickName.length >= 6) { | |||||
NotifyService.notify({ | |||||
type: 'warning', | |||||
message: '昵称最长可设置6位' | |||||
}); | |||||
} | |||||
}, | |||||
phone() { | |||||
if (this.phone.length > 11) { | |||||
return (this.phone = this.phone.replace(/\s+/g, '')); | |||||
} | |||||
} | |||||
}, | |||||
created() { | |||||
this.getCommandList(); | |||||
setTimeout(() => { | |||||
this.initShortKey(); | |||||
ToastService.clear(); | |||||
}, 1000); | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.family_save { | |||||
width: 100px; | |||||
line-height: 60px; | |||||
background: #1989fa; | |||||
color: #fff; | |||||
font-size: 30px; | |||||
} | |||||
.tips-container { | |||||
padding: 20px; | |||||
.inside-tips { | |||||
padding: 40px; | |||||
border-radius: 30px; | |||||
border: 1px solid green; | |||||
p { | |||||
font-size: 32px; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,594 @@ | |||||
<template> | |||||
<div class="addFamilyNumber familyNumber replace"> | |||||
<div class="management"> | |||||
<div class="oh_100vh"> | |||||
<div class="top-con"> | |||||
<van-nav-bar title="修改亲情号" left-arrow :border="true" @click-left="onNavBack"> | |||||
<div class="save" slot="right" @click="onSubmit">保存</div> | |||||
</van-nav-bar> | |||||
<!-- <van-cell> | |||||
<div class="con"> | |||||
<span class="cell mbnone">昵称</span> | |||||
</div> | |||||
<input type="text" maxlength="6" placeholder="如爸爸,妈妈,必须少于6个汉字" v-model.trim="nickName" /> | |||||
</van-cell> --> | |||||
<van-cell-group> | |||||
<van-field | |||||
v-model.trim="nickName" | |||||
maxlength="6" | |||||
label="昵称" | |||||
required | |||||
placeholder="如爸爸,妈妈,必须少于6个汉字" | |||||
input-align="right" | |||||
/> | |||||
<van-field | |||||
v-model.trim="phone" | |||||
maxlength="12" | |||||
label="号码" | |||||
required | |||||
oninput="value=value.replace(/\s+/g,'')" | |||||
placeholder="可输入手机,固话,短号" | |||||
input-align="right" | |||||
/> | |||||
<van-cell center required> | |||||
<template #title> | |||||
<span class="custom-title">快捷键</span> | |||||
</template> | |||||
<template #extra> | |||||
<div> | |||||
<van-dropdown-menu> | |||||
<van-dropdown-item v-model="value1" @change="onDrodownClick" :options="shortKeylist" /> | |||||
</van-dropdown-menu> | |||||
</div> | |||||
</template> | |||||
</van-cell> | |||||
</van-cell-group> | |||||
<div class="tips-container" v-show="true"> | |||||
<div class="inside-tips"> | |||||
<p>注:</p> | |||||
<p>1)由于网络因素影响,亲情号码设置后,最长需要等待10分钟后才可拨打。</p> | |||||
<p> | |||||
2)设备最多可设置{{ | |||||
setPhoneNumber | |||||
}}个亲情号码,添加首月无法删除,次月起每月最多允许删除1个亲情号,请慎重操作。 | |||||
</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!--<div class="submit"> | |||||
<a href="javascript: void(0)" | |||||
:class="{next: theNextClass}" | |||||
@click="submit">保存</a> | |||||
</div>--> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { DeviceCommandModel } from '../../config/models'; | |||||
import ToastService from '../../services/toast-service'; | |||||
import DialogService from '../../services/dialog-service'; | |||||
import NotifyService from '../../services/notify-service'; | |||||
import APICommand from '@/api/command'; | |||||
export default { | |||||
data() { | |||||
return { | |||||
nickName: '', | |||||
phone: '', | |||||
checked: false, | |||||
shortcutKey: '', | |||||
listData: [], | |||||
sos: false, | |||||
mbnoneDisabled: false, | |||||
sureFalg: true, | |||||
familyId: 0, //路由跳转过来的ID // radio 联系方式类型 | |||||
/* contactType: "" */ value1: '', | |||||
shortKeylist: [], //当前可设置的快捷键 | |||||
newShortKeyList: ['1', '2', '3', '4', '5'], //对比的快捷键 | |||||
familyNameList: [], //亲情号码名字 | |||||
familyShortKeyList: [] //亲情号码快捷键 | |||||
}; | |||||
}, | |||||
methods: { | |||||
// 返回 | |||||
onNavBack() { | |||||
this.$router.push({ name: 'familyNumber' }); | |||||
}, | |||||
// 点击其他按钮,号码清空 | |||||
onClearCornet() { | |||||
this.phone = ''; | |||||
}, | |||||
onClearMobile() { | |||||
this.phone = ''; | |||||
}, | |||||
onClearPhone() { | |||||
this.phone = ''; | |||||
}, | |||||
initContactType() { | |||||
if (/* /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/ */ /^1[3456789]\d{9}$/.test(this.phone)) { | |||||
this.contactType = '0'; | |||||
} else if (/* /^[1-9][0-9][0-9]$/ */ /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/.test(this.phone)) { | |||||
this.contactType = '1'; | |||||
} else if (this.phone.length <= 5 || this.phone.length >= 2) { | |||||
this.contactType = '2'; | |||||
} | |||||
}, | |||||
// 校验联系方式 | |||||
checkedContact() { | |||||
switch (this.contactType) { | |||||
case '0': | |||||
// eslint-disable-next-line no-case-declarations | |||||
let reg = /^1[3456789]\d{9}$/; | |||||
if (reg.test(this.phone)) { | |||||
return true; | |||||
} else { | |||||
DialogService.confirm({ title: '请输入正确的号码' }); | |||||
return false; | |||||
} | |||||
case '1': | |||||
// eslint-disable-next-line no-case-declarations | |||||
let reg1 = /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/; | |||||
if (reg1.test(this.phone)) { | |||||
return true; | |||||
} else { | |||||
DialogService.confirm({ title: '请输入正确的号码' }); | |||||
return false; | |||||
} | |||||
case '2': | |||||
if (this.phone.length <= 6 && this.phone.length >= 2) { | |||||
return true; | |||||
} else { | |||||
DialogService.confirm({ | |||||
title: '请输入正确的2-6位短号' | |||||
}); | |||||
return false; | |||||
} | |||||
default: | |||||
DialogService.confirm({ title: '未知号码' }); | |||||
return false; | |||||
} | |||||
}, | |||||
checkedClick() { | |||||
if (!this.checked) { | |||||
this.mbnoneDisabled = true; | |||||
this.shortcutKey = '5'; | |||||
this.sos = true; | |||||
let _this = this; | |||||
//TODO:轮询号码列表是否有sos号码(除了自身) | |||||
let over = this.listData.find(val => { | |||||
return val.PressKey == 5 && val.Id != _this.familyId; | |||||
}); | |||||
if (over != null) { | |||||
DialogService.confirm({ | |||||
title: '已有sos号码,是否覆盖原sos号码?', | |||||
showCancelButton: true | |||||
}) | |||||
.then(() => { | |||||
//TODO:修改原有sos号码为亲情号 | |||||
this.listData = this.listData.filter(val => { | |||||
return val.PressKey != 5; | |||||
}); | |||||
this.listData.forEach(val => { | |||||
if (val.SOS == 1) { | |||||
val.SOS = 0; | |||||
} | |||||
}); | |||||
}) | |||||
.catch(() => { | |||||
this.checked = false; | |||||
this.mbnoneDisabled = false; | |||||
this.shortcutKey = ''; | |||||
this.sos = false; | |||||
}); | |||||
} | |||||
} else { | |||||
this.mbnoneDisabled = false; | |||||
this.shortcutKey = ''; | |||||
this.sos = false; | |||||
} | |||||
}, | |||||
onSubmit() { | |||||
if (!this.sureFalg) { | |||||
ToastService.loading(); | |||||
ToastService.success({ | |||||
message: '保存成功', | |||||
onClose: () => this.onNavBack() | |||||
}); | |||||
return; | |||||
} | |||||
// 数字正则 | |||||
let numberReg = /^-?\d*\.?\d+$/; | |||||
// 2022 . 6 .29 修改手机正则表达式 | |||||
// 固话正则 | |||||
// 是否存在空格 | |||||
let spaceReg = /(^\s+)|(\s+$)|\s+/g; | |||||
if (this.nickName == '') { | |||||
DialogService.confirm({ title: '昵称不能为空' }); | |||||
return; | |||||
} | |||||
if (spaceReg.test(this.phone)) { | |||||
DialogService.confirm({ title: '号码不能有空格,请您检查后重新输入' }); | |||||
return; | |||||
} | |||||
if (!numberReg.test(this.phone)) { | |||||
DialogService.confirm({ title: '号码只能是数字,请您重新输入' }); | |||||
return; | |||||
} | |||||
if (this.phone.length < 3) { | |||||
DialogService.confirm({ title: '请至少输入3位的短号' }); | |||||
return; | |||||
} | |||||
// 2022.7.13 取消正则匹配 | |||||
/* if(this.phone.length === 11) { | |||||
if(!mobileReg.test(this.phone)) { | |||||
DialogService.confirm({ title: "请输入正确的手机号码" }); | |||||
return; | |||||
} | |||||
} | |||||
if(this.phone.length > 11) { | |||||
if(!fixMobileReg.test(this.phone)) { | |||||
DialogService.confirm({ title: "请输入正确的固话" }); | |||||
return; | |||||
} | |||||
} */ | |||||
if (this.phone == '') { | |||||
DialogService.confirm({ title: '号码不能为空' }); | |||||
return; | |||||
} | |||||
/* if (!this.checkedContact()) { | |||||
return; | |||||
} */ | |||||
// 找出重复的用户名 | |||||
let repetition = this.listData.filter(val => { | |||||
return val.relationship != this.nickName; | |||||
}); | |||||
let exists = this.listData.filter(val => { | |||||
return val.phone == this.phone; | |||||
}); | |||||
// 判断重复的用户名 | |||||
if (repetition !== undefined && repetition.length > 0 && !this.sos) { | |||||
if (repetition.length == 1 || repetition.length >= 2) { | |||||
let nickName = this.nickName; | |||||
let queryName = this.$route.query.relationship; | |||||
let familyNameList = this.$store.getters.familyNameList || []; | |||||
let notQuery = familyNameList.filter(function (item) { | |||||
return item != queryName; | |||||
}); | |||||
if (notQuery.includes(queryName) == true) { | |||||
DialogService.confirm({ title: '用户名已存在' }); | |||||
return; | |||||
} else if (notQuery.includes(nickName) == true) { | |||||
DialogService.confirm({ title: '用户名已存在' }); | |||||
return; | |||||
} | |||||
} | |||||
} | |||||
// 根据是否是sos并且进行了取消sos按键的快捷操作 | |||||
if (this.$route.query.sos === 1 && this.shortcutKey !== 5) { | |||||
let nickName = this.nickName; | |||||
let familyNameList = this.$store.getters.familyNameList || []; | |||||
let onlyName = familyNameList.filter(function (item) { | |||||
return item; | |||||
}); | |||||
if (this.shortcutKey != 5 && onlyName.includes(nickName) == true) { | |||||
DialogService.confirm({ title: '用户名已存在' }); | |||||
return; | |||||
} | |||||
} | |||||
//TODO:判断重复号码 | |||||
if (exists !== undefined && exists.length > 0 && !this.sos) { | |||||
if (exists.length <= 2) { | |||||
let existNum = exists[0]; | |||||
//TODO:根据familyId识别是否正在修改的亲情号 | |||||
if (existNum.Id !== this.familyId && existNum.PressKey !== '5') { | |||||
DialogService.confirm({ title: '电话号码已存在' }); | |||||
return; | |||||
} | |||||
} else { | |||||
DialogService.confirm({ title: '电话号码已存在' }); | |||||
return; | |||||
} | |||||
} | |||||
// 成功保存触发 | |||||
this.sure(); | |||||
}, | |||||
sure() { | |||||
//TODO:查询已存在的号码 | |||||
let _this = this; | |||||
let exist = this.listData.find(val => { | |||||
return _this.familyId === val.Id; | |||||
}); | |||||
if (exist !== undefined) { | |||||
exist.relationship = this.nickName; | |||||
exist.phone = this.phone.replace(/\s+/g, ''); | |||||
exist.SOS = this.checked ? 1 : 0; | |||||
exist.PressKey = this.shortcutKey; | |||||
} | |||||
let cmdCode = DeviceCommandModel.familyNum; | |||||
let cmdValue = { | |||||
WhiteList: this.listData | |||||
}; | |||||
this.sendCommand(cmdCode, JSON.stringify(cmdValue)); | |||||
}, | |||||
getCommandList() { | |||||
ToastService.loading(); | |||||
/* let url = `/api/Command/CommandList`; | |||||
let jsonData = { deviceId: this.$store.getters.deviceId }; */ | |||||
let _this = this; | |||||
/* _this.$axios | |||||
.post(url, jsonData) */ | |||||
APICommand.commandList({ | |||||
deviceId: this.$store.getters.deviceId | |||||
}) | |||||
.then(res => { | |||||
let item = res.data; | |||||
let listData = []; | |||||
if (item.items.length > 0) { | |||||
let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.familyNum); | |||||
let parseValue = JSON.parse(cmdData[0].cmdValue); | |||||
parseValue.WhiteList.forEach(val => { | |||||
if (val.Id == _this.$route.query.id) { | |||||
_this.familyId = val.Id; | |||||
_this.nickName = val.relationship; | |||||
_this.phone = val.phone; | |||||
_this.checked = val.SOS == 1; | |||||
_this.shortcutKey = val.PressKey; | |||||
_this.sos = _this.checked; | |||||
_this.mbnoneDisabled = _this.sos; | |||||
_this.initContactType(); | |||||
} | |||||
listData.push(val); | |||||
}); | |||||
_this.listData = listData; | |||||
_this.setFamilyNum(); | |||||
_this.setFamilyShortKey(); | |||||
} | |||||
}) | |||||
.catch(() => {}) | |||||
.finally(() => ToastService.clear()); | |||||
}, | |||||
setFamilyNum() { | |||||
this.$store.commit('familyNameList', []); | |||||
let _this = this; | |||||
if (_this.listData == null || this.listData.length == 0) { | |||||
this.$store.commit('familyNameList', []); | |||||
} else { | |||||
_this.listData | |||||
.filter(val => { | |||||
return val.PressKey !== '5'; | |||||
}) | |||||
.forEach(f => { | |||||
_this.familyNameList.push(f.relationship); | |||||
this.$store.commit('familyNameList', _this.familyNameList); | |||||
}); | |||||
} | |||||
}, | |||||
// 缓存亲情号码快捷键 | |||||
setFamilyShortKey() { | |||||
this.$store.commit('familyShortKeyList', []); | |||||
let _this = this; | |||||
if (_this.listData == null || this.listData.length == 0) { | |||||
this.$store.commit('familyShortKeyList', []); | |||||
} else { | |||||
_this.listData | |||||
.filter(val => { | |||||
return val.PressKey != ''; | |||||
}) | |||||
.forEach(f => { | |||||
_this.familyShortKeyList.push(f.PressKey); | |||||
this.$store.commit('familyShortKeyList', _this.familyShortKeyList); | |||||
}); | |||||
} | |||||
}, | |||||
sendCommand(cmdCode, cmdValue) { | |||||
ToastService.loading({ message: '设置中,请稍后...' }); | |||||
/* let url = `/api/Command/SendCommand`; | |||||
let jsonData = { | |||||
deviceId: this.$store.getters.deviceId, | |||||
userId: this.$store.getters.userId, | |||||
serialNo: this.$store.getters.serialNo, | |||||
cmdCode, | |||||
cmdValue | |||||
}; */ | |||||
this.sureFalg = false; | |||||
ToastService.loading(); | |||||
/* this.$axios | |||||
.post(url, jsonData) */ | |||||
APICommand.SetIotWhiteList({ | |||||
deviceId: this.$store.getters.deviceId, | |||||
userId: this.$store.getters.userId, | |||||
serialNo: this.$store.getters.serialNo, | |||||
cmdCode, | |||||
cmdValue | |||||
}) | |||||
.then(res => { | |||||
ToastService.clear(); | |||||
let item = res.data; | |||||
this.sureFalg = true; | |||||
if (item.stateCode == 1) { | |||||
ToastService.success({ | |||||
message: item.message, | |||||
onClose: () => this.onNavBack() | |||||
}); | |||||
} else { | |||||
DialogService.confirm({ | |||||
title: '保存失败', | |||||
message: item.message | |||||
}); | |||||
} | |||||
}) | |||||
.catch(() => { | |||||
this.sureFalg = true; | |||||
ToastService.clear(); | |||||
}); | |||||
}, | |||||
/* dialog(title) { | |||||
this.$dialog.confirm({ | |||||
title, | |||||
className: "device_confirm", | |||||
showCancelButton: false | |||||
}); | |||||
}, */ | |||||
inputChange() { | |||||
this.shortcutKey = this.shortcutKey.replace(/[^\d]/g, ''); | |||||
}, | |||||
//初始化快捷键数组 | |||||
initShortKey() { | |||||
let familyShortKeyList = this.$store.getters.familyShortKeyList; | |||||
let selfKey = this.$route.query.shortKey; | |||||
if (typeof familyShortKeyList === 'string') { | |||||
familyShortKeyList = Array.from(familyShortKeyList.replace(/,/g, '')); | |||||
} | |||||
let keyOtherList = this.newShortKeyList.filter(f => { | |||||
return f != selfKey; | |||||
}); | |||||
let newShorList = this.findDiffShortKey(keyOtherList, familyShortKeyList); | |||||
this.shortKeylist = newShorList | |||||
.map(s => { | |||||
let text = s; | |||||
if (s === '5') { | |||||
text = 'sos'; | |||||
} | |||||
return { | |||||
text: text, | |||||
value: s | |||||
}; | |||||
}) | |||||
.filter(s => { | |||||
return s.text != ''; | |||||
}); | |||||
let defaultObj = { | |||||
text: '无', | |||||
value: '' | |||||
}; | |||||
this.shortKeylist.push(defaultObj); | |||||
this.value1 = this.$route.query.shortKey; | |||||
}, | |||||
// 选择下拉框的值 | |||||
onDrodownClick(value) { | |||||
console.log('选择了', value); | |||||
if (value === '5') { | |||||
this.shortcutKey = '5'; | |||||
this.sos = true; | |||||
this.checked = true; | |||||
} else { | |||||
this.shortcutKey = value; | |||||
this.sos = false; | |||||
this.checked = false; | |||||
} | |||||
}, | |||||
// 找出两个数组中未设置的快捷键 | |||||
findDiffShortKey(arr1, arr2) { | |||||
return arr1.concat(arr2).filter((v, i, arr) => { | |||||
return arr.indexOf(v) === arr.lastIndexOf(v); | |||||
}); | |||||
} | |||||
}, | |||||
computed: { | |||||
theNextClass() { | |||||
let reg = /^1[3456789]\d{9}$/; | |||||
let mobileReg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/; | |||||
if (this.nickName == '' || this.phone == '') { | |||||
return false; | |||||
} | |||||
if (!reg.test(this.phone)) { | |||||
if (!mobileReg.test(this.phone)) { | |||||
return false; | |||||
} | |||||
} | |||||
return true; | |||||
}, | |||||
// 获取物联网卡号码,非空为物联网卡,空则为普通电话卡,不显示提示 | |||||
isUnicom() { | |||||
return this.$store.getters.uniPhone !== ''; | |||||
}, | |||||
// 截取物联网卡前3个数字,148是移动,其它是联通,移动可设5个亲情号码,联通可设10个 | |||||
setPhoneNumber() { | |||||
const startNumber = this.$store.getters.uniPhone.slice(0, 3); | |||||
return startNumber === '148' ? 5 : 10; | |||||
} | |||||
}, | |||||
watch: { | |||||
shortcutKey(key) { | |||||
let _this = this; | |||||
/* if (!_this.sos && key > 4) { | |||||
DialogService.confirm({ | |||||
title: "快捷键1-4的数字" | |||||
}).then(() => { | |||||
_this.shortcutKey = ""; | |||||
}); | |||||
} */ | |||||
if (key) { | |||||
_this.listData.forEach(val => { | |||||
//TODO:根据familyId识别是否正在修改的亲情号 | |||||
if (key == val.PressKey && key < 5 && _this.familyId !== val.Id) { | |||||
DialogService.confirm({ | |||||
title: '快捷键已经存在,请另外设置其它的快捷健' | |||||
}) | |||||
.then(() => { | |||||
_this.shortcutKey = ''; | |||||
}) | |||||
.catch(() => { | |||||
_this.shortcutKey = ''; | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
}, | |||||
nickName() { | |||||
if (this.nickName.length >= 6 && this.nickName != this.$route.query.relationship) { | |||||
NotifyService.notify({ | |||||
type: 'warning', | |||||
message: '昵称最长可设置6位' | |||||
}); | |||||
} | |||||
}, | |||||
phone() { | |||||
if (this.phone.length > 11) { | |||||
this.phone = this.phone.replace(/\s+/g, ''); | |||||
} | |||||
} | |||||
}, | |||||
mounted() { | |||||
this.getCommandList(); | |||||
setTimeout(() => { | |||||
this.initShortKey(); | |||||
ToastService.clear(); | |||||
}, 1000); | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.addFamilyNumber { | |||||
.required { | |||||
color: red; | |||||
padding: 0 10px; | |||||
} | |||||
.save { | |||||
width: 100px; | |||||
line-height: 60px; | |||||
background: #1989fa; | |||||
color: #fff; | |||||
font-size: 30px; | |||||
} | |||||
.tips-container { | |||||
padding: 20px; | |||||
.inside-tips { | |||||
padding: 40px; | |||||
border-radius: 30px; | |||||
border: 1px solid green; | |||||
p { | |||||
font-size: 32px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,310 @@ | |||||
<template> | |||||
<div class="familyNumber"> | |||||
<van-nav-bar title="亲情号码" left-arrow :borvan-tabbarder="true" @click-left="onNavBack"> | |||||
<van-icon name="plus" slot="right" @click="onAddNumber" /> | |||||
</van-nav-bar> | |||||
<div class="management" v-show="isPageShow"> | |||||
<div v-if="listData.length > 0"> | |||||
<van-cell v-for="(item, index) in listData" :key="index"> | |||||
<van-swipe-cell> | |||||
<div class="conArea"> | |||||
<div class="con" @click="conClick(item)"> | |||||
<span class="cell">{{ item.relationship }}</span> | |||||
<span> | |||||
{{ item.phone }} | |||||
<i>(快捷键 {{ item.PressKey == '' ? '无' : item.PressKey }})</i> | |||||
<van-icon name="lock" v-if="!item.Editable && item.AppType == familyNumberModel.appType.manufactor" /> | |||||
</span> | |||||
</div> | |||||
<em class="fs30" v-show="!isUnicom" | |||||
><span>{{ item.SOS == 1 ? 'SOS' : '' }}</span></em | |||||
> | |||||
<!-- 增加物联网卡提示,标识亲情号码是否已经下发同步成功 0,1 同步成功, 2同步中--> | |||||
<em class="fs30" v-show="isUnicom" @click="onClickEm"> | |||||
<span>{{ item.SOS == 1 ? 'SOS' : '' }}</span> | |||||
{{ item.status >= 2 ? '同步中' : '' }} | |||||
</em> | |||||
</div> | |||||
<template slot="right"> | |||||
<van-button square type="danger" text="删除" @click="onDelete(item)" /> | |||||
</template> | |||||
</van-swipe-cell> | |||||
</van-cell> | |||||
</div> | |||||
<div class="newsNotData" v-else>您还没添加亲情号码,赶紧去添加吧~</div> | |||||
<div class="tips-container" v-if="isUnicom"> | |||||
<div class="inside-tips"> | |||||
<p>注:</p> | |||||
<p>1)由于网络因素影响,亲情号码设置后,最长需要等待10分钟后才可拨打。</p> | |||||
<p> | |||||
2)设备最多可设置{{ | |||||
setPhoneNumber | |||||
}}个亲情号码,添加首月无法删除,次月起每月最多允许删除1个亲情号,请慎重操作。 | |||||
</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import { DeviceCommandModel, FamilyNumberModel } from '@/config/models'; | |||||
import DialogService from '@/services/dialog-service'; | |||||
import ToastService from '@/services/toast-service'; | |||||
import APICommand from '@/api/command'; | |||||
export default { | |||||
computed: { | |||||
familyNumberModel() { | |||||
return FamilyNumberModel; | |||||
}, | |||||
// 获取物联网卡号码,非空为物联网卡,空则为普通电话卡,不显示提示 | |||||
isUnicom() { | |||||
return this.$store.getters.uniPhone !== ''; | |||||
}, | |||||
// 截取物联网卡前3个数字,148是移动,其它是联通,移动可设5个亲情号码,联通可设10个 | |||||
setPhoneNumber() { | |||||
const startNumber = this.$store.getters.uniPhone.slice(0, 3); | |||||
return startNumber === '148' ? 5 : 10; | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
listData: [], | |||||
numberMax: 30, | |||||
familyNameList: [], //亲情号码名字 | |||||
familyShortKeyList: [], //亲情号码快捷键 | |||||
uniWhiteList: [], //第三方物联网卡列表 | |||||
// 测试数据,不需要后可删除 | |||||
testList: [{ phone: '15111511', status: 2 }], | |||||
isPageShow: false | |||||
}; | |||||
}, | |||||
methods: { | |||||
// 点击标识 | |||||
onClickEm() { | |||||
DialogService.confirm({ | |||||
title: '温馨提示', | |||||
message: '请再保存一次号码,进行白名单同步。' | |||||
}); | |||||
}, | |||||
// 返回 | |||||
onNavBack() { | |||||
this.$router.push({ name: 'Myself' }); | |||||
}, | |||||
onAddNumber() { | |||||
// TODO iot平台 | |||||
if (this.listData.length >= this.numberMax) { | |||||
DialogService.confirm({ | |||||
title: `亲情号码最多只能设置${this.numberMax}个` | |||||
}); | |||||
} else { | |||||
this.$router.push({ | |||||
name: 'addFamilyNumber', | |||||
query: { serialNo: this.$store.getters.serialNo } | |||||
}); | |||||
} | |||||
}, | |||||
conClick(item) { | |||||
if (item.AppType !== FamilyNumberModel.appType.manufactor) { | |||||
this.$router.push({ | |||||
name: 'changeFamilyNumber', | |||||
query: { | |||||
id: item.Id, | |||||
serialNo: this.$store.getters.serialNo, | |||||
relationship: item.relationship, | |||||
sos: item.SOS, | |||||
shortKey: item.PressKey | |||||
} | |||||
}); | |||||
} else { | |||||
this.tipsOnEditable(); | |||||
} | |||||
}, | |||||
tipsOnEditable() { | |||||
DialogService.confirm({ | |||||
title: '抱歉,该记录不可操作', | |||||
message: '该记录为教师端所设,家长端不可以操作', | |||||
className: 'device_confirm' | |||||
}); | |||||
}, | |||||
getCommandList() { | |||||
ToastService.loading({ message: '数据加载中...' }); | |||||
APICommand.commandList({ | |||||
deviceId: this.$store.getters.deviceId | |||||
}) | |||||
.then(res => { | |||||
let item = res.data; | |||||
let listData = []; | |||||
if (item.items.length > 0) { | |||||
let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.familyNum); | |||||
if (cmdData.length) { | |||||
let parseValue = JSON.parse(cmdData[0].cmdValue); | |||||
parseValue.WhiteList.forEach(val => { | |||||
listData.push(val); | |||||
}); | |||||
} | |||||
console.log('随手精灵亲情号码列表::', listData); | |||||
// 判断是否是小台风物联网卡 | |||||
// 1. 是,查询小台风第三方亲情号卡列表,合并相同亲情号码的列表 | |||||
if (this.isUnicom) { | |||||
let that = this; | |||||
console.log('小台风白名单列表::', that.uniWhiteList); | |||||
if (that.uniWhiteList.length > 0) { | |||||
// 如果小台风白名单列表有数据,就开始拿一一对应亲情号码的状态赋予到随手精灵亲亲号码的列表 | |||||
listData.map(item => { | |||||
// 先判断小台风白名单列表是否有一一对应的亲亲号码,有那就拿相应的状态,无则同步状态默认给2,即同步中 | |||||
item.status = that.uniWhiteList.find(u => u.phone === item.phone) | |||||
? that.uniWhiteList.find(u => u.phone === item.phone).status | |||||
: 2; | |||||
}); | |||||
that.listData = listData; | |||||
} else { | |||||
that.listData = listData; | |||||
} | |||||
} else { | |||||
// 2. 否,照旧 | |||||
this.listData = listData; | |||||
} | |||||
ToastService.success({ | |||||
message: '加载完成' | |||||
}); | |||||
this.isPageShow = true; | |||||
} | |||||
}) | |||||
.catch(err => { | |||||
console.log(err); | |||||
this.isPageShow = true; | |||||
}) | |||||
.finally(() => ToastService.clear()); | |||||
}, | |||||
// 如果是小台风物联网卡,获取第三方物联网卡同步的亲情号码列表 | |||||
getIotCardWiteList() { | |||||
APICommand.GetIotCardWiteList(this.$store.getters.serialNo).then(res => { | |||||
this.uniWhiteList = res.data.data.items || []; | |||||
}); | |||||
}, | |||||
onDelete(item) { | |||||
if (item.AppType !== FamilyNumberModel.appType.manufactor) { | |||||
const req = this.listData.filter(val => val.Id !== item.Id); | |||||
let cmdCode = DeviceCommandModel.familyNum; | |||||
let cmdValue = { | |||||
WhiteList: req | |||||
}; | |||||
this.sendCommand(cmdCode, JSON.stringify(cmdValue)); | |||||
ToastService.success({ | |||||
message: '操作成功' | |||||
}); | |||||
} else { | |||||
this.tipsOnEditable(); | |||||
} | |||||
}, | |||||
sendCommand(cmdCode, cmdValue) { | |||||
ToastService.loading({ message: '删除中,请稍后...' }); | |||||
/* let url = `/api/Command/SendCommand`; | |||||
let jsonData = { | |||||
deviceId: this.$store.getters.deviceId, | |||||
userId: this.$store.getters.userId, | |||||
serialNo: this.$store.getters.serialNo, | |||||
cmdCode, | |||||
cmdValue | |||||
}; */ | |||||
/* this.$axios | |||||
.post(url, jsonData) */ | |||||
APICommand.SetIotWhiteList({ | |||||
deviceId: this.$store.getters.deviceId, | |||||
userId: this.$store.getters.userId, | |||||
serialNo: this.$store.getters.serialNo, | |||||
cmdCode, | |||||
cmdValue | |||||
}) | |||||
.then(res => { | |||||
let item = res.data; | |||||
if (item.stateCode == 1) { | |||||
ToastService.success({ | |||||
message: '操作成功' | |||||
}); | |||||
} else { | |||||
DialogService.confirm({ | |||||
title: '操作失败,请重新设置' | |||||
}); | |||||
} | |||||
this.getCommandList(); | |||||
}) | |||||
.catch(() => { | |||||
ToastService.clear(); | |||||
}); | |||||
}, | |||||
setFamilyNum() { | |||||
let _this = this; | |||||
if (_this.listData == null || this.listData.length == 0) { | |||||
this.$store.commit('familyNameList', ''); | |||||
} else { | |||||
_this.listData | |||||
.filter(val => { | |||||
return val.PressKey !== '5'; | |||||
}) | |||||
.forEach(f => { | |||||
_this.familyNameList.push(f.relationship); | |||||
this.$store.commit('familyNameList', _this.familyNameList); | |||||
}); | |||||
} | |||||
}, | |||||
// 缓存亲情号码快捷键 | |||||
setFamilyShortKey() { | |||||
let _this = this; | |||||
if (_this.listData == null || this.listData.length == 0) { | |||||
this.$store.commit('familyShortKeyList', ''); | |||||
} else { | |||||
_this.listData | |||||
.filter(val => { | |||||
return val.PressKey != ''; | |||||
}) | |||||
.forEach(f => { | |||||
_this.familyShortKeyList.push(f.PressKey); | |||||
this.$store.commit('familyShortKeyList', _this.familyShortKeyList); | |||||
}); | |||||
} | |||||
} | |||||
}, | |||||
created() { | |||||
let that = this; | |||||
this.getIotCardWiteList(); | |||||
setTimeout(() => { | |||||
that.getCommandList(); | |||||
}, 300); | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.familyNumber { | |||||
position: relative; | |||||
height: 100vh; | |||||
overflow: hidden; | |||||
font-size: 32px; | |||||
.management { | |||||
position: relative; | |||||
height: calc(100vh - 160px); | |||||
overflow: scroll; | |||||
.newsNotData { | |||||
height: 400px; | |||||
@include flexbox(center, center, column, nowrap); | |||||
font-size: 32px; | |||||
} | |||||
.conArea { | |||||
.con { | |||||
height: 100px; | |||||
@include flexbox(center, flex-start, column, nowrap); | |||||
} | |||||
} | |||||
.tips-container { | |||||
padding: 20px; | |||||
.inside-tips { | |||||
padding: 40px; | |||||
border-radius: 30px; | |||||
border: 1px solid green; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> | |||||
> |
@@ -53,6 +53,7 @@ | |||||
<SubmenuList :title="othersSetting.title" :list="othersSetting.list"> </SubmenuList> | <SubmenuList :title="othersSetting.title" :list="othersSetting.list"> </SubmenuList> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<TabBar /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -63,8 +64,9 @@ import APIUser from '@/api/user'; | |||||
import APIDevice from '@/api/device'; | import APIDevice from '@/api/device'; | ||||
import ToastService from '@/services/toast-service'; | import ToastService from '@/services/toast-service'; | ||||
import { isNotNull } from '@/services/utils-service'; | import { isNotNull } from '@/services/utils-service'; | ||||
import TabBar from '@/components/TabBar'; | |||||
export default { | export default { | ||||
components: { /* NavBar, */ SubmenuList }, | |||||
components: { /* NavBar, */ SubmenuList, TabBar }, | |||||
data() { | data() { | ||||
return { | return { | ||||
userInfos: {}, | userInfos: {}, | ||||
@@ -72,7 +74,13 @@ export default { | |||||
family: { | family: { | ||||
title: '亲情沟通', | title: '亲情沟通', | ||||
list: [ | list: [ | ||||
{ imgPath: require('../../assets/logo.png'), text: '亲情号码', bgColor: 'red' }, | |||||
{ | |||||
imgPath: require('../../assets/logo.png'), | |||||
text: '亲情号码', | |||||
bgColor: 'red', | |||||
showType: 'newPage', | |||||
routerName: 'familyNumber' | |||||
}, | |||||
{ imgPath: require('../../assets/logo.png'), text: '留言', bgColor: 'green' }, | { imgPath: require('../../assets/logo.png'), text: '留言', bgColor: 'green' }, | ||||
{ imgPath: require('../../assets/logo.png'), text: '通话记录', bgColor: 'red' } | { imgPath: require('../../assets/logo.png'), text: '通话记录', bgColor: 'red' } | ||||
] | ] | ||||
@@ -1,10 +1,14 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div></div> | |||||
<div> | |||||
<TabBar /> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | |||||
export default { | export default { | ||||
components: { TabBar }, | |||||
data() { | data() { | ||||
return {}; | return {}; | ||||
}, | }, | ||||
@@ -1,10 +1,14 @@ | |||||
<!-- --> | <!-- --> | ||||
<template> | <template> | ||||
<div></div> | |||||
<div> | |||||
<TabBar /> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | |||||
export default { | export default { | ||||
components: { TabBar }, | |||||
data() { | data() { | ||||
return {}; | return {}; | ||||
}, | }, | ||||