436 lines
9.1 KiB
Vue
436 lines
9.1 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 域名列表 -->
|
|
<view class="domain-list" v-if="configList.length">
|
|
<view
|
|
class="domain-item"
|
|
:class="{'domain-item-active': configIndex === index}"
|
|
v-for="(item, index) in configList"
|
|
:key="item.id"
|
|
@click="changeConfig(index)"
|
|
>
|
|
<view class="domain-item-content">
|
|
<!-- 单选按钮 -->
|
|
<view class="radio-wrapper">
|
|
<u-radio-group v-model="configIndex">
|
|
<u-radio
|
|
:name="index"
|
|
size="40"
|
|
shape="circle"
|
|
activeColor="#2979ff"
|
|
></u-radio>
|
|
</u-radio-group>
|
|
</view>
|
|
|
|
<!-- 协议标签 -->
|
|
<view :class="['protocol-tag', item.protocol.includes('https') ? 'https' : 'http']">
|
|
<text>{{ item.protocol.includes('https') ? 'HTTPS' : 'HTTP' }}</text>
|
|
</view>
|
|
|
|
<!-- 域名 -->
|
|
<view class="domain-name">
|
|
<text>{{ item.address }}</text>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view @click.stop="openEdit(index)" class="domain-item-btn">
|
|
<u-icon name="edit-pen" color="#2979ff" size="40"></u-icon>
|
|
</view>
|
|
<view @click.stop="delConfig(index)" class="domain-item-btn">
|
|
<u-icon name="trash" color="#fa3534" size="40"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<u-empty margin-top="200" v-else text="没有域名,请添加" mode="list"></u-empty>
|
|
|
|
<!-- 添加域名按钮 -->
|
|
<view class="add-button-wrapper">
|
|
<u-button
|
|
type="primary"
|
|
@click="openAdd"
|
|
>+ 添加域名</u-button>
|
|
</view>
|
|
|
|
<!-- 添加/编辑域名弹窗 -->
|
|
<u-modal v-model="show" width="700" :title="form.id ? '编辑域名' : '添加域名'" 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="arrow-icon">
|
|
<u-icon name="arrow-down" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 域名输入 -->
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
域名
|
|
</view>
|
|
<view class="form-value">
|
|
<input type="text" v-model="form.address" placeholder="请输入域名">
|
|
</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: 'https://',
|
|
label: 'HTTPS'
|
|
},
|
|
{
|
|
value: 'http://',
|
|
label: 'HTTP'
|
|
}
|
|
],
|
|
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: 'http://',
|
|
address: '192.168.1.17:8848',
|
|
}
|
|
} 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) {
|
|
console.log("编辑",index)
|
|
this.form = JSON.parse(JSON.stringify(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 lang="scss" scoped>
|
|
page {
|
|
background-color: #F5F7FA;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background-color: #F5F7FA;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.domain-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
margin-bottom: 120rpx; // 为底部按钮留出空间
|
|
}
|
|
|
|
.domain-item {
|
|
background-color: #ffffff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
|
&-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 35rpx 30rpx;
|
|
}
|
|
|
|
&-active {
|
|
background-color: #f0f7ff;
|
|
border: 1rpx solid #2979ff;
|
|
}
|
|
.domain-item-btn{
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
|
|
.radio-wrapper {
|
|
margin-right: 0rpx;
|
|
}
|
|
|
|
.protocol-tag {
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 26rpx;
|
|
&.https {
|
|
background-color: rgba(41, 121, 255, 0.1);
|
|
|
|
text {
|
|
color: #2979ff;
|
|
}
|
|
}
|
|
|
|
&.http {
|
|
background-color: rgba(255, 152, 0, 0.1);
|
|
|
|
text {
|
|
color: #ff9800;
|
|
}
|
|
}
|
|
}
|
|
|
|
.domain-name {
|
|
flex: 1;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 30rpx;
|
|
view {
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
|
|
.add-button-wrapper {
|
|
padding: 30rpx 20rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.slot-content {
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 30rpx;
|
|
|
|
.form-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.form-value {
|
|
background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
position: relative;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.arrow-icon {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |