init
This commit is contained in:
87
components/LinkScan.vue
Normal file
87
components/LinkScan.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="search_wraper">
|
||||
<input
|
||||
type="text"
|
||||
class="filter_input pdr120"
|
||||
confirm-type="go"
|
||||
:value="value"
|
||||
:focus="focusState"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@confirm="handleSend">
|
||||
<view class="filter_num">{{editValue.toString()}}</view>
|
||||
<view class="zd-row buttons_wraper">
|
||||
<uni-icons v-show="editValue.length > 0" class="pdr10" type="clear" size="24" color="#666" @tap="linkDel"></uni-icons>
|
||||
<uni-icons v-show="value !== '' && value !== null && value !== undefined" class="pdr10" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
|
||||
<uni-icons type="scan" size="22" :color="focusState ? '#ff6a00' : '#4e6ef2'" @tap="focusState=true"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import permision from "@/utils/permission.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusState: false
|
||||
};
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'input'
|
||||
},
|
||||
props: {
|
||||
value: String,
|
||||
editValue: Array
|
||||
},
|
||||
methods: {
|
||||
handleFocus () {
|
||||
this.focusState = true
|
||||
},
|
||||
handleBlur (e) {
|
||||
this.$emit('input', e.target.value)
|
||||
// if (e.target.value.length) {
|
||||
// this.$emit('handleChange', e.target.value)
|
||||
// }
|
||||
this.focusState = false
|
||||
},
|
||||
toDel () {
|
||||
this.$emit('input', '')
|
||||
this.$emit('handleDel')
|
||||
},
|
||||
linkDel () {
|
||||
this.$emit('linkDel')
|
||||
},
|
||||
handleSend (e) {
|
||||
this.$emit('input', e.target.value)
|
||||
if (e.target.value.length) {
|
||||
this.$emit('handleChange', e.target.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '../common/style/mixin.styl';
|
||||
.search_wraper
|
||||
position relative
|
||||
_wh(100%, 70rpx)
|
||||
.pdr120
|
||||
padding-right: 50%;
|
||||
.buttons_wraper
|
||||
position absolute
|
||||
top 0
|
||||
right 10rpx
|
||||
_wh(auto, 80rpx)
|
||||
.pdr10
|
||||
padding-right 10rpx
|
||||
.filter_num
|
||||
position absolute
|
||||
top 0
|
||||
right 50px
|
||||
width calc(50% - 50px)
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
line-height 80rpx
|
||||
</style>
|
||||
66
components/NavBar.vue
Normal file
66
components/NavBar.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view class="zd-row jcflexstart header">
|
||||
<view class="zd-col-4">
|
||||
<uni-icons class="icon_back" @tap="goBack" type="back" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="zd-col-16 page_name">{{title}}</view>
|
||||
<view v-if="searchActive" class="zd-col-4" style="text-align: right">
|
||||
<uni-icons @tap="toSearch" type="search" size="26" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
props: {
|
||||
title: String,
|
||||
inner: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inner2: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
searchActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack () {
|
||||
if (this.inner) {
|
||||
uni.navigateBack()
|
||||
} else if (this.inner2) {
|
||||
this.$emit('goIn')
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}
|
||||
},
|
||||
toSearch () {
|
||||
this.$emit('toSearch')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '@/common/style/mixin.styl';
|
||||
.header
|
||||
position fixed
|
||||
_wh(100%, calc(var(--status-bar-height) + 72rpx))
|
||||
// background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
|
||||
background-color $red
|
||||
z-index 200
|
||||
padding var(--status-bar-height) 20rpx 0
|
||||
.page_name
|
||||
_font(32rpx, 32rpx, #fff,700,center)
|
||||
.icon_back
|
||||
font-size 40rpx !important
|
||||
</style>
|
||||
136
components/NumberInput.vue
Normal file
136
components/NumberInput.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<input
|
||||
type="number"
|
||||
:value="displayValue"
|
||||
@input="handleInput"
|
||||
@blur="handleBlur"
|
||||
class="filter_input"
|
||||
:class="inputClass"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NumberInput",
|
||||
props: {
|
||||
value: [Number, String],
|
||||
inputClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 输入模式：integer(纯整数), decimal(纯小数), mixed(混合)
|
||||
mode: {
|
||||
type: String,
|
||||
default: "mixed",
|
||||
validator: (v) => ["integer", "decimal", "mixed"].includes(v),
|
||||
},
|
||||
// 小数位数限制
|
||||
decimalLength: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
// 最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: Infinity,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
displayValue: this.value?.toString() || "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.displayValue = newVal?.toString() || "";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
let value = e.detail.value;
|
||||
|
||||
// 1. 过滤非法字符
|
||||
let filtered = value.replace(/[^\d.]/g, "");
|
||||
|
||||
// 2. 处理多余的小数点
|
||||
if (this.mode === "integer") {
|
||||
filtered = filtered.replace(/\./g, ""); // 整数模式删除所有小数点
|
||||
} else {
|
||||
const firstDotIndex = filtered.indexOf(".");
|
||||
if (firstDotIndex !== -1) {
|
||||
// 只保留第一个小数点
|
||||
filtered =
|
||||
filtered.substring(0, firstDotIndex + 1) +
|
||||
filtered.substring(firstDotIndex + 1).replace(/\./g, "");
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 处理前导0
|
||||
if (filtered.startsWith("0") && filtered.length > 1 && !filtered.startsWith("0.")) {
|
||||
filtered = filtered.replace(/^0+/, "0").replace(/^0([^.])/, "$1");
|
||||
}
|
||||
|
||||
// 4. 处理开头的小数点
|
||||
if (filtered.startsWith(".")) {
|
||||
if (this.mode === "integer") {
|
||||
filtered = "";
|
||||
} else {
|
||||
filtered = "0" + filtered;
|
||||
}
|
||||
}
|
||||
|
||||
this.displayValue = filtered;
|
||||
},
|
||||
|
||||
handleBlur() {
|
||||
let value = this.displayValue;
|
||||
|
||||
// 空值处理
|
||||
if (value === "" || value === ".") {
|
||||
this.$emit("input", "");
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理结尾的小数点
|
||||
if (value.endsWith(".")) {
|
||||
value = value.slice(0, -1);
|
||||
}
|
||||
|
||||
// 转换为数字
|
||||
const numValue = Number(value);
|
||||
|
||||
// 小数位数处理
|
||||
let processedValue = value;
|
||||
if (this.mode !== "integer" && value.includes(".")) {
|
||||
const parts = value.split(".");
|
||||
if (parts[1].length > this.decimalLength) {
|
||||
processedValue = `${parts[0]}.${parts[1].slice(0, this.decimalLength)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 范围校验
|
||||
let finalNum = Number(processedValue);
|
||||
if (finalNum < this.min) finalNum = this.min;
|
||||
if (finalNum > this.max) finalNum = this.max;
|
||||
|
||||
// 更新值
|
||||
this.displayValue = finalNum.toString();
|
||||
this.$emit("input", finalNum);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.number-input {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
122
components/SearchBox.vue
Normal file
122
components/SearchBox.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="search_wraper">
|
||||
<input
|
||||
type="text"
|
||||
class="filter_input pdr120"
|
||||
confirm-type="go"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
:focus="focusState"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@confirm="handleSend">
|
||||
<view class="zd-row buttons_wraper">
|
||||
<uni-icons v-show="value !== '' && value !== null && value !== undefined" class="pdr10 icon_del" type="clear" color="#666" @tap="toDel"></uni-icons>
|
||||
<uni-icons class="icon_scan" type="scan" :color="focusState ? '#ff6a00' : '#4e6ef2'" @tap="focusState=true"></uni-icons>
|
||||
<!-- <uni-icons class="icon_camera" type="camera" :color="focusState ? '#ff6a00' : '#4e6ef2'" @tap="toPhone"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import permision from "@/utils/permission.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
focusState: false
|
||||
};
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'input'
|
||||
},
|
||||
props: {
|
||||
value: String,
|
||||
placeholder: String,
|
||||
},
|
||||
methods: {
|
||||
handleFocus () {
|
||||
this.focusState = true
|
||||
},
|
||||
handleBlur (e) {
|
||||
this.$emit('input', e.target.value)
|
||||
// if (e.target.value.length) {
|
||||
// this.$emit('handleChange', e.target.value)
|
||||
// }
|
||||
this.focusState = false
|
||||
},
|
||||
toDel () {
|
||||
this.$emit('input', '')
|
||||
this.$emit('handleDel')
|
||||
},
|
||||
handleSend (e) {
|
||||
this.$emit('input', e.target.value)
|
||||
if (e.target.value.length) {
|
||||
this.$emit('handleChange', e.target.value)
|
||||
}
|
||||
},
|
||||
async toPhone() {
|
||||
// #ifdef APP-PLUS
|
||||
let status = await this.checkPermission();
|
||||
if (status !== 1) {
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
this.$emit('input', res.result)
|
||||
this.$emit('handleChange', res.result)
|
||||
},
|
||||
fail: (err) => {
|
||||
// uni.showToast({
|
||||
// title: '出错',
|
||||
// icon: 'none'
|
||||
// })
|
||||
}
|
||||
});
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
,
|
||||
async checkPermission(code) {
|
||||
let status = permision.isIOS ? await permision.requestIOS('camera') :
|
||||
await permision.requestAndroid('android.permission.CAMERA');
|
||||
|
||||
if (status === null || status === 1) {
|
||||
status = 1;
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: "需要相机权限",
|
||||
confirmText: "设置",
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
permision.gotoAppSetting();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return status;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '../common/style/mixin.styl';
|
||||
.search_wraper
|
||||
position relative
|
||||
_wh(100%, 70rpx)
|
||||
.pdr120
|
||||
padding-right: 120rpx;
|
||||
.buttons_wraper
|
||||
position absolute
|
||||
top 0
|
||||
right 10rpx
|
||||
_wh(auto, 80rpx)
|
||||
.pdr10
|
||||
padding-right 10rpx
|
||||
.icon_del
|
||||
font-size 40rpx !important
|
||||
.icon_scan, .icon_camera
|
||||
font-size 46rpx !important
|
||||
</style>
|
||||
Reference in New Issue
Block a user