Browse Source

设置页修改

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

105
components/pullDown/pullDown.vue

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

4
package-lock.json

@ -221,7 +221,7 @@
},
"node_modules/vue-clipboard2": {
"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==",
"dependencies": {
"clipboard": "^2.0.0"
@ -387,7 +387,7 @@
},
"vue-clipboard2": {
"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==",
"requires": {
"clipboard": "^2.0.0"

12
pages.json

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

115
pages/config/config.vue

@ -1,42 +1,119 @@
<template>
<view class="" style="background-color: #fff; height: 100%;">
<view class="" style="font-size: 35rpx;padding: 15rpx;">
请求地址
<view class="page-wraper">
<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>
<uni-combox :candidates="candidates" placeholder="请选择请求地址" v-model="city"></uni-combox>
</view>
</template>
<script>
export default {
data() {
return {
candidates:["http://192.168.0.178:12080/admin-api(陈放)",
"http://192.168.0.178:12080/admin-api"
],
city:""
name: '',
value: '',
options: [{
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',
},
{
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>
<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>

2
static/config.json

@ -18,7 +18,7 @@
"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",
"chefang": "http://192.168.0.178: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">
<pullDown label="所在城市市111" :active="true" :close-on-click-mask="mask" ref="uDropdown"
: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>
</view> -->
@ -121,7 +121,7 @@
value1: '',
value2: '2',
mask: true,
options1: [{
options: [{
label: '默认排序',
value: 1,
},

2
test/pullDownTest2.vue

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

Loading…
Cancel
Save