390 lines
8.4 KiB
Vue
390 lines
8.4 KiB
Vue
<template>
|
||
<view class="config-box">
|
||
<view class="config-list" v-if="configList.length">
|
||
<view class="config-item" v-for="(item,index) in configList" :key="item.id" @click="changeConfig(index)">
|
||
<!-- <u-icon v-if="configIndex==index" class="icon-checkbox-mark" name="checkbox-mark" color="#ff0000" size="50"></u-icon> -->
|
||
<view class="acitve-box" v-if="configIndex==index">
|
||
已选择
|
||
</view>
|
||
<view class="congfig-txt">
|
||
{{item.protocol+item.address}}
|
||
</view>
|
||
<view class="operate-box">
|
||
<view class="iconfont icon-bianji1 color-blue" @click.stop="openEdit(index)"></view>
|
||
<view class="iconfont icon-shanchu color-red" @click.stop="delConfig(index)"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty margin-top="200" v-else text="没有域名,请添加" mode="list"></u-empty>
|
||
<view class="btn-box">
|
||
<button type="primary" @tap="openAdd">添加域名</button>
|
||
</view>
|
||
<u-modal v-model="show" width="700" title="新增/修改域名" ref="uModal" :show-cancel-button="true" :mask-close-able="true" @confirm="addConfig">
|
||
<view class="slot-content">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
网络协议：
|
||
</view>
|
||
<view class="form-value" @click="protocolShow=true">
|
||
{{form.protocol?form.protocol:'请选择'}}
|
||
<view class="iconfont icon-xiangyou1"></view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
域名或ip：
|
||
</view>
|
||
<view class="form-value">
|
||
<input type="text" v-model="form.address" placeholder="请输入地址如:192.168.0.1">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<u-select v-model="protocolShow" :list="protocolList" @confirm="confirmProtocol"></u-select>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
configIndex:0,
|
||
configList:[],
|
||
form:{
|
||
id:'',
|
||
protocol:'',
|
||
address:'',
|
||
},
|
||
protocolShow:false,
|
||
protocolList:[
|
||
{
|
||
value: 'http://',
|
||
label: 'http://'
|
||
},
|
||
{
|
||
value: 'https://',
|
||
label: 'https://'
|
||
}
|
||
],
|
||
show:false,
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 小程序只使用https
|
||
// #ifdef MP-WEIXIN
|
||
this.protocolList = [
|
||
{
|
||
value: 'https://',
|
||
label: 'https://'
|
||
}
|
||
]
|
||
// #endif
|
||
this.getConfigList();
|
||
},
|
||
methods:{
|
||
getConfigList(){
|
||
uni.getStorage({
|
||
key:'configList',
|
||
}).then(res => {
|
||
// 如果返回数组为两位就是正确
|
||
if(res.length==2){
|
||
this.configList = res[1].data;
|
||
}
|
||
return uni.getStorage({
|
||
key:'configIndex',
|
||
})
|
||
}).then(res => {
|
||
console.log("configIndex",res)
|
||
if(res.length==2){
|
||
this.configIndex = res[1].data;
|
||
}
|
||
})
|
||
},
|
||
changeConfig(i){
|
||
console.log("index",i)
|
||
if(i !== this.configIndex){
|
||
this.configIndex = i;
|
||
uni.setStorage({
|
||
key:'configIndex',
|
||
data: i,
|
||
}).then(res => {
|
||
console.log("修改索引")
|
||
})
|
||
}
|
||
},
|
||
verification(){
|
||
if(!this.form.protocol){
|
||
this.$refs.uToast.show({
|
||
title: '请先选择协议!',
|
||
type: 'error'
|
||
})
|
||
return false;
|
||
}else if(!this.form.address){
|
||
this.$refs.uToast.show({
|
||
title: '请先输入地址',
|
||
type: 'error',
|
||
})
|
||
return false;
|
||
}else if(!this.$u.test.url(this.form.protocol+this.form.address)){
|
||
this.$refs.uToast.show({
|
||
title: '请确认输入地址正确',
|
||
type: 'error',
|
||
})
|
||
return false;
|
||
}else{
|
||
return true;
|
||
}
|
||
},
|
||
openAdd(){
|
||
if(this.configList.length == 0){
|
||
this.form = {
|
||
id:'',
|
||
protocol:'https://',
|
||
address:'cloud.iot-fast.com',
|
||
}
|
||
}else{
|
||
this.form = {
|
||
id:'',
|
||
protocol:'',
|
||
address:'',
|
||
}
|
||
}
|
||
|
||
this.show = true;
|
||
},
|
||
addConfig(){
|
||
console.log("添加页面",this.form)
|
||
if(this.verification()){
|
||
if(this.form.id===''){
|
||
// 新增
|
||
this.configList.push({
|
||
id:this.$u.guid(32),
|
||
protocol:this.form.protocol,
|
||
address:this.form.address,
|
||
})
|
||
uni.setStorage({
|
||
key:'configList',
|
||
data: this.configList,
|
||
}).then(res => {
|
||
this.$refs.uToast.show({
|
||
title: '新增成功',
|
||
type: 'success',
|
||
})
|
||
})
|
||
if(this.configList.length==1){
|
||
uni.setStorage({
|
||
key:'configIndex',
|
||
data: 0,
|
||
}).then(res => {
|
||
console.log("添加第一个域名索引为0")
|
||
})
|
||
}
|
||
this.show = false;
|
||
this.getConfigList()
|
||
console.log("configList",this.configList)
|
||
}else{
|
||
// 编辑
|
||
this.configList.map(item=>{
|
||
if(item.id == this.form.id){
|
||
item.protocol=this.form.protocol;
|
||
item.address=this.form.address;
|
||
}
|
||
return item;
|
||
})
|
||
uni.setStorage({
|
||
key:'configList',
|
||
data: this.configList,
|
||
}).then(res => {
|
||
this.$refs.uToast.show({
|
||
title: '编辑成功',
|
||
type: 'success',
|
||
})
|
||
})
|
||
this.show = false;
|
||
this.getConfigList()
|
||
}
|
||
}else{
|
||
this.$refs.uModal.clearLoading();
|
||
}
|
||
},
|
||
confirmProtocol(e){
|
||
this.form.protocol = e[0].value;
|
||
},
|
||
openEdit(index){
|
||
this.form = this.configList[index];
|
||
this.show = true;
|
||
},
|
||
delConfig(index){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认要删除域名吗？',
|
||
success: (res)=>{
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
|
||
this.configList.splice(index, 1);
|
||
uni.setStorage({
|
||
key:'configList',
|
||
data: this.configList,
|
||
}).then(res => {
|
||
this.$refs.uToast.show({
|
||
title: '删除成功',
|
||
type: 'success',
|
||
})
|
||
})
|
||
if(this.configIndex<index){
|
||
}else{
|
||
if(this.configIndex>index){
|
||
this.configIndex = this.configIndex - 1;
|
||
}else if(this.configIndex==index){
|
||
if(this.configList.length==0){
|
||
this.configIndex = -1;
|
||
}else{
|
||
this.configIndex = 0;
|
||
}
|
||
}
|
||
uni.setStorage({
|
||
key:'configIndex',
|
||
data: this.configIndex,
|
||
}).then(res => {
|
||
console.log("修改索引")
|
||
})
|
||
}
|
||
this.getConfigList();
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page{
|
||
background: #f5f5f5;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.color-blue{
|
||
color: $mainColor;
|
||
}
|
||
.color-red{
|
||
color: red;
|
||
}
|
||
.config-box{
|
||
.config-list{
|
||
.config-item{
|
||
background: #fff;
|
||
// border-radius: 10rpx;
|
||
padding: 30rpx 20rpx;
|
||
padding-left: 70rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
overflow: hidden;
|
||
.acitve-box{
|
||
z-index: 888;
|
||
position: absolute;
|
||
top: -16rpx;
|
||
left: -76rpx;
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: rotate(-40deg) ;
|
||
padding-top: 30rpx;
|
||
color: #fff;
|
||
background: $mainColor;
|
||
font-size: 26rpx;
|
||
}
|
||
.icon-checkbox-mark{
|
||
position: absolute;
|
||
top:20rpx;
|
||
left:10rpx;
|
||
}
|
||
.operate-box{
|
||
display: flex;
|
||
align-items: center;
|
||
.iconfont{
|
||
font-weight: bold;
|
||
margin-left: 20rpx;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.slot-content{
|
||
padding: 20rpx 30rpx;
|
||
.form-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10rpx;
|
||
|
||
.form-label{
|
||
width: 170rpx;
|
||
}
|
||
.form-value{
|
||
flex: 1;
|
||
background: #f0f0f0;
|
||
border-radius: 8rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 20rpx;
|
||
input{
|
||
width: 100%;
|
||
padding-left: 20rpx;
|
||
}
|
||
}
|
||
&:first-child{
|
||
.form-value{
|
||
// justify-content: flex-end;
|
||
padding-left: 20rpx;
|
||
position: relative;
|
||
padding-right: 40rpx;
|
||
.iconfont{
|
||
position: absolute;
|
||
right: 6rpx;
|
||
top: 19rpx;
|
||
font-size: 37rpx;
|
||
color: #8a8c90;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-box{
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 130rpx;
|
||
padding: 10rpx;
|
||
padding-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
background-color: #fff;
|
||
button{
|
||
width: 95%;
|
||
background-color: $mainColor;
|
||
color: #fff;
|
||
}
|
||
.bg-grey{
|
||
background: #e7e7e7;
|
||
color: #8a8c90;
|
||
}
|
||
}
|
||
</style>
|