Browse Source

设置页修改

Signed-off-by: hebaowu <hebao.wu@ccwin-in.com>
wms3.0_pda
hebaowu 11 months ago
parent
commit
13efb76a4b
  1. 91
      components/pullDown/pullDown.vue
  2. 4
      package-lock.json
  3. 12
      pages.json
  4. 105
      pages/config/config.vue
  5. 2
      static/config.json
  6. 4
      test/pullDownTest.vue
  7. 2
      test/pullDownTest2.vue

91
components/pullDown/pullDown.vue

@ -1,20 +1,26 @@
<template> <template>
<view> <view>
<view class="maskbox" v-show="active" @tap="maskClick"></view> <view class="maskbox" v-show="active" @tap="maskClick"></view>
<view class="uni-combox" style="width: 100%;"> <view :class="description == 'row'?'uni-combox-row':'uni-combox-column'">
<view v-if="label" class="uni-combox__label" :style="labelStyle"> <view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text> <text>{{label}}</text>
</view> </view>
<view class="u-dropdown"> <view class="u-dropdown">
<view class="u-dropdown__menu" :style="{height:height+'rpx'}"> <view class="u-dropdown__menu">
<view class="u-dropdown__menu__item"> <view class="u-dropdown__menu__item">
<view class="u-flex " style="width: 100%;"> <view class="u-flex " style="width: 100%;">
<view class="u-close-wrap" v-if="isSearch"> <view class="u-close-wrap" v-if="isSearch">
<u-icon class="u-clear-icon" :size="30" :name="searchIcon" <u-icon class="u-clear-icon" :size="30" :name="searchIcon"
:color="searchIconColor ? searchIconColor : color"></u-icon> :color="searchIconColor ? searchIconColor : color"></u-icon>
</view> </view>
<input confirm-type="search" class="uni-combox__input" type="text" v-model="inputVal"
@confirm="confirm()" :placeholder="placeholder" /> <view class="u-input">
<u-input confirm-type="search" class="uni-combox__input"
:type="isAutoHeight ? 'textarea':'text'" v-model="inputVal" @confirm="confirm()"
:placeholder="placeholder" :auto-height="isAutoHeight"
:height="isAutoHeight ?height-20:height" />
</view>
<icon class="uni-combox__icon" type="clear" size="16" @tap="clearInputValue" <icon class="uni-combox__icon" type="clear" size="16" @tap="clearInputValue"
v-if="inputVal!=''" style="height: 100%;align-items: center;justify-content: center;" /> v-if="inputVal!=''" style="height: 100%;align-items: center;justify-content: center;" />
<!-- <image size="16" src="/static/icons/close-circle2.svg" <!-- <image size="16" src="/static/icons/close-circle2.svg"
@ -31,7 +37,7 @@
</view> </view>
<view class="u-dropdown__content" :style="[contentStyle, { <view class="u-dropdown__content" :style="[contentStyle, {
transition: `opacity ${duration / 1000}s linear`, transition: `opacity ${duration / 1000}s linear`,
top: $u.addUnit(height), top: $u.addUnit(height+28),
height: contentHeight + 'px'}]" @tap="maskClick" @touchmove.stop.prevent> height: contentHeight + 'px'}]" @tap="maskClick" @touchmove.stop.prevent>
<view class="u-dropdown__content__popup" :style="[popupStyle]" @touchmove.stop.prevent="() => {}" <view class="u-dropdown__content__popup" :style="[popupStyle]" @touchmove.stop.prevent="() => {}"
@ -43,13 +49,21 @@
<view v-for="(item, index) in filterOptions" style="width: 100%;" <view v-for="(item, index) in filterOptions" style="width: 100%;"
@click="onSelectorClick(index)"> @click="onSelectorClick(index)">
<view class="uni-combox-item"> <view v-if="itemTextCount == 1" class="uni-combox-item">
<text class="uni-combox-item-text" :title-style="{ <text class="uni-combox-item-text" :title-style="{
color: inputVal === item ? activeColor : inactiveColor color: inputVal === item ? activeColor : inactiveColor
}">{{item}}</text> }">{{item}}</text>
<u-icon v-if="inputVal === item" name="checkbox-mark" :color="activeColor" size="32"> <u-icon v-if="inputVal === item" name="checkbox-mark" :color="activeColor" size="32">
</u-icon> </u-icon>
</view> </view>
<view v-if="itemTextCount == 2" class="uni-combox-item2">
<text class="uni-combox-item-text" :title-style="{
color: inputVal === item ? activeColor : inactiveColor
}">{{item.value}}</text>
<text class="uni-combox-item-text" :title-style="{
color: inputVal === item ? activeColor : inactiveColor
}">{{item.desc}}</text>
</view>
<u-line class="line_color"></u-line> <u-line class="line_color"></u-line>
</view> </view>
</view> </view>
@ -63,7 +77,7 @@
<script> <script>
/** /**
* dropdown 下拉菜单 * dropdown 下拉菜单
* @description 该组件一般用于向下展开菜单同时可切换多个选项卡的场景 * @description 菜单标题与编辑框排列方向,即水平排列row/垂直排列column,默认水平排列row
* @tutorial http://uviewui.com/components/dropdown.html * @tutorial http://uviewui.com/components/dropdown.html
* @property {String} active-color 标题和选项卡选中的颜色默认#2979ff * @property {String} active-color 标题和选项卡选中的颜色默认#2979ff
* @property {String} inactive-color 标题和选项卡未选中的颜色默认#606266 * @property {String} inactive-color 标题和选项卡未选中的颜色默认#606266
@ -82,6 +96,11 @@
name: 'pulldown', name: 'pulldown',
emits: ["open", "close", "update:modelValue", "input", "change", "confirm"], emits: ["open", "close", "update:modelValue", "input", "change", "confirm"],
props: { props: {
// ,row/column
description: {
type: String,
default: 'row'
},
// //
label: { label: {
@ -121,7 +140,7 @@
// rpx // rpx
height: { height: {
type: [Number, String], type: [Number, String],
default: 80 default: 55
}, },
// //
borderBottom: { borderBottom: {
@ -190,6 +209,17 @@
return []; return [];
} }
}, },
//
itemTextCount: {
type: Number,
default: 1
},
//
isAutoHeight: {
type: Boolean,
default: false
},
}, },
data() { data() {
return { return {
@ -301,6 +331,7 @@
onSelectorClick(index) { onSelectorClick(index) {
// console.log(index); // console.log(index);
if (this.itemTextCount == 1) {
this.inputVal = this.options[index]; this.inputVal = this.options[index];
this.close(); this.close();
// v-model // v-model
@ -308,6 +339,16 @@
this.$emit("update:modelValue", this.inputVal); this.$emit("update:modelValue", this.inputVal);
// value // value
this.$emit("change", index, this.inputVal); this.$emit("change", index, this.inputVal);
} else if (this.itemTextCount == 2) {
this.inputVal = this.options[index].value;
this.close();
// v-model
this.$emit("input", this.inputVal);
this.$emit("update:modelValue", this.inputVal);
// value
this.$emit("change", index, this.inputVal);
}
}, },
// //
open() { open() {
@ -386,6 +427,12 @@
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../uni_modules/vk-uview-ui/libs/css/style.components.scss"; @import "../../uni_modules/vk-uview-ui/libs/css/style.components.scss";
.u-input {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
.u-clear-icon { .u-clear-icon {
@include vue-flex; @include vue-flex;
align-items: center; align-items: center;
@ -409,8 +456,9 @@
z-index: 4; z-index: 4;
} }
.uni-combox { .uni-combox-row {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%;
display: flex; display: flex;
/* #endif */ /* #endif */
min-height: 40px; min-height: 40px;
@ -423,6 +471,21 @@
// z-index: 3; // z-index: 3;
} }
.uni-combox-column {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
min-height: 40px;
flex-direction: column;
align-items: flex-start;
position: relative;
background-color: #FFFFFF;
// padding-right: 5px;
// padding-left: 5px;
// z-index: 3;
}
.uni-combox__label { .uni-combox__label {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
@ -471,6 +534,16 @@
width: 100%; width: 100%;
} }
.uni-combox-item2 {
display: flex;
flex-direction: column;
font-size: 16px;
height: 100%;
line-height: 100%;
background-color: #FFFFFF;
width: 100%;
}
.uni-combox-item-text { .uni-combox-item-text {
font-size: 16px; font-size: 16px;
height: 100%; height: 100%;

4
package-lock.json

@ -221,7 +221,7 @@
}, },
"node_modules/vue-clipboard2": { "node_modules/vue-clipboard2": {
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz", "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==", "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
"dependencies": { "dependencies": {
"clipboard": "^2.0.0" "clipboard": "^2.0.0"
@ -387,7 +387,7 @@
}, },
"vue-clipboard2": { "vue-clipboard2": {
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz", "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==", "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
"requires": { "requires": {
"clipboard": "^2.0.0" "clipboard": "^2.0.0"

12
pages.json

@ -37,12 +37,12 @@
// "autoBackButton": "true", // "autoBackButton": "true",
"buttons": [ "buttons": [
// //
// { {
// "float": "right", "float": "right",
// "fontSize": "52rpx", // "fontSize": "52rpx", //
// "text": "\ue706", "text": "\ue706",
// "fontSrc": "/static/ali_icon/iconfont.ttf" "fontSrc": "/static/ali_icon/iconfont.ttf"
// } }
] ]
} }

105
pages/config/config.vue

@ -1,42 +1,119 @@
<template> <template>
<view class="" style="background-color: #fff; height: 100%;"> <view class="page-wraper">
<view class="" style="font-size: 35rpx;padding: 15rpx;"> <view class="page-main" style="background-color: #fff; height: 100%;">
请求地址
<pullDown label="项目名称" v-model="name" :options="arrayUnique(options,'name')" description='column' />
<pullDown label="服务器地址" v-model="value" :options="unique(options)" :itemTextCount="2" :isAutoHeight='true'
description='column' style="font-size: 35rpx;padding: 30rpx 0 0 0;" />
</view>
<!-- 页面底部 -->
<view class="page-footer">
<button type="primary" @click="saveClick">保存</button>
</view> </view>
<uni-combox :candidates="candidates" placeholder="请选择请求地址" v-model="city"></uni-combox>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
candidates:["http://192.168.0.178:12080/admin-api(陈放)", name: '',
"http://192.168.0.178:12080/admin-api" value: '',
],
city:""
};
},
options: [{
name: '汽车镜备件',
desc: '汽车镜备件公司测试库',
value: 'http://192.168.0.178:12080/admin-api',
},
{
methods: { name: '汽车镜备件',
desc: '汽车镜备件现场测试库',
value: 'http://192.168.0.178:12080/admin-api',
},
{
name: '汽车镜备件',
desc: '汽车镜备件现场正式库',
value: 'http://192.168.0.178:12080/admin-api',
},
{
name: '富维汽车镜',
desc: '汽车镜备件现场正式库',
value: 'http://192.168.0.178:12080/admin-api',
},
],
};
},
onLoad(option) {
this.value = getApp().globalData.request_url;
},
methods: {
saveClick() {
getApp().globalData.request_url = this.value;
console.log(getApp().globalData.request_url);
// uni.navigateBack()
uni.navigateBack({
delta: 1 // delta
})
},
unique(arr) {
let that = this;
if (this.name == '') {
return this.options
} else {
return arr.filter(item => item.name === this.name);
}
},
arrayUnique(arr, type) {
return arr ? [
...new Set(
arr.map((item) => {
return item[type]
})
)
] : []
}
} }
} }
</script> </script>
<style> <style>
.page-wraper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.page-main {
flex: 1;
position: relative;
}
.page-footer {
color: #fff;
line-height: 100rpx;
/* 不放大不缩小固定100rpx */
flex: 0 0 100rpx;
background-color: #00AAFF;
}
.container {
background-color: #f5f7fa;
/* 这里只是作为样式展示 */
}
</style> </style>

2
static/config.json

@ -18,7 +18,7 @@
"request_url": { "request_url": {
"name": "request_url", "name": "request_url",
"value": "http://192.168.0.106:12080/admin-api", "value": "http://dev.ccwin-in.com:25100/api/admin-api",
"dev2": "http://192.168.0.157:12080/admin-api", "dev2": "http://192.168.0.157:12080/admin-api",
"chefang": "http://192.168.0.178:12080/admin-api", "chefang": "http://192.168.0.178:12080/admin-api",
"chenxinming": "http://192.168.0.230:12080/admin-api", "chenxinming": "http://192.168.0.230:12080/admin-api",

4
test/pullDownTest.vue

@ -5,7 +5,7 @@
<!-- <view class="u-demo-area u-flex u-row-center"> <!-- <view class="u-demo-area u-flex u-row-center">
<pullDown label="所在城市市111" :active="true" :close-on-click-mask="mask" ref="uDropdown" <pullDown label="所在城市市111" :active="true" :close-on-click-mask="mask" ref="uDropdown"
:activeColor="activeColor" :borderBottom="borderBottom"> :activeColor="activeColor" :borderBottom="borderBottom">
<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item> <u-dropdown-item v-model="value1" title="距离" :options="options"></u-dropdown-item>
</pullDown> </pullDown>
</view> --> </view> -->
@ -121,7 +121,7 @@
value1: '', value1: '',
value2: '2', value2: '2',
mask: true, mask: true,
options1: [{ options: [{
label: '默认排序', label: '默认排序',
value: 1, value: 1,
}, },

2
test/pullDownTest2.vue

@ -59,7 +59,7 @@
value1: '', value1: '',
value2: '2', value2: '2',
mask: true, mask: true,
options1: [{ options: [{
label: '默认排序', label: '默认排序',
value: 1, value: 1,
}, },

Loading…
Cancel
Save