H5端齐采药项目,uniapp框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

127 lines
4.0 KiB

<template>
<!-- IP选择器 -->
<view class="">
<picker mode='selector' @change="selectIP" @cancel="selectIPStatus = false; IPclickNum = 0" :value="selectIPindex"
:range="IPArray" range-key="title">
<view class="uni-input" style="text-align: center;color: #fff;background-color: #000;" v-if="selectIPStatus">
<text>当前服务器</text>
<text>{{ IPArray[selectIPindex].title }}</text>
</view>
</picker>
<!-- 自定义IP弹出框 -->
<uniPopup ref="changeIPRef">
<view class=""
style="width: 80vw;height: 30vh;background-color: #FFFFFF;border-radius: 20rpx;padding: 30rpx;text-align: center;">
<view style="width: 100%;font-size: 40rpx;border-bottom: 1rpx solid #e3e3e3;margin-bottom: 20rpx;">自定义服务器</view>
<view class="">
<textarea v-model="ipConfigChange" style="border: 1rpx solid #e3e3e3;padding: 20rpx;" :maxlength="80" focus
auto-height placeholder-style="color:#ffee89" placeholder="注意使用英文标点符号与大小写" />
<text style="color: #dadada;font-size: 20rpx;">参考案例:<text
style="color: #ef6d53;">https://www.baidu.com/</text></text>
<button type="primary" style="position: absolute;bottom: 0;width: 90%;margin-bottom: 20rpx;"
@tap="comfirmSelectIP(selectIPindex, ipConfigChange)">确定</button>
</view>
</view>
</uniPopup>
</view>
</template>
<script>
import uniPopup from "./uni-popup/uni-popup"
export default {
name: "egg",
components: {
uniPopup
},
props: {
// 时间范围限制(单位毫秒:1s=1000ms)
IPArray: {
type: Array
},
defaultIP: {
type: String,
},
time: {
type: Number,
default: 1200
},
// 触发条件
clickNum: {
type: Number,
default: 8
}
},
data() {
return {
ipConfigChange: "", // 自定义IP
selectIPStatus: false,
selectIPindex: 0,
IPclickNum: 0,
}
},
methods: {
// 打开IP选择器 使用方法 this.$refs.switchIp.openSelectIP()
openSelectIP() {
this.IPclickNum++
let countNum = this.clickNum // 点击触发次数配置
// if (this.IPclickNum > (countNum - countNum / 2) && this.IPclickNum < countNum) {
// uni.showToast({
// title: '距离打开隐藏关卡,还差' + (countNum - this.IPclickNum) + '步',
// icon: "none",
// duration: 800
// });
// }
if (this.IPclickNum >= countNum) {
this.IPclickNum = 0
// 查找当前IP配置
this.IPArray.find((item, index) => {
if (item.ipConfig == this.defaultIP) {
this.selectIPindex = index
}
})
uni.showToast({
title: '您当前正在使用IP:' + this.defaultIP,
icon: "none",
duration: 3000
});
this.selectIPStatus = true // 显示IP配置
}
// 时间限制
setTimeout(() => {
this.IPclickNum = 0
}, this.time)
},
// 选择指定IP
selectIP(event) {
// 设置选中下标
this.selectIPindex = event.detail.value
// 选择自定义IP
if (event.detail.value === 2) {
// 为自定义IP赋默认值,方便快速修改
this.ipConfigChange = this.IPArray[event.detail.value].ipConfig
// 打开自定义IP弹出框
this.$refs.changeIPRef.open()
}
this.comfirmSelectIP(event.detail.value)
},
// 自定义IP确定更改
comfirmSelectIP(index, value) {
// 自定义IP配置
if (value && index === 2) {
this.IPArray[index].ipConfig = value
this.$refs.changeIPRef.close()
}
// 公用设置
this.selectIPStatus = false
// 修改IP配置
this.$emit("change", this.IPArray[index])
uni.showToast({
title: '请注意!正在使用' + JSON.stringify(this.IPArray[index]),
icon: "none",
duration: 3000
});
},
}
}
</script>