From 2f4ecca95c56d3d30402e480e9d97368a5254cbf Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期六, 07 十月 2023 23:53:17 +0800
Subject: [PATCH] #
---
pages/common/data-list/dataDetail.vue | 78 +++++++++++++------
components/z-input/z-input.vue | 28 +++++--
pages/component/demo.vue | 59 +++++++++++++-
components/z-data-list/z-data-list.vue | 26 +++---
4 files changed, 137 insertions(+), 54 deletions(-)
diff --git a/components/z-data-list/z-data-list.vue b/components/z-data-list/z-data-list.vue
index 7bdaa44..ac6bc1f 100644
--- a/components/z-data-list/z-data-list.vue
+++ b/components/z-data-list/z-data-list.vue
@@ -2,7 +2,7 @@
<view >
<view class="main">
<view class="main-left" >
- <view class="main-list" v-for="it in dataList" style="width: 100%;">
+ <view class="main-list" v-for="it in list" style="width: 100%;">
<view class="left-key">{{it.key}}</view>
<view>:</view>
<view class="left-val">
@@ -51,11 +51,11 @@
}
},
created() {
- this.dataList = this.list.detl
+ // this.dataList = this.list.detl
},
props: {
list: {
- type: Object,
+ type: Array,
default() {
return {}
}
@@ -79,24 +79,24 @@
<style scoped>
.main {
position: relative;
- min-height: 70rpx;
+ min-height: 35px;
background-color: #f5f5f5;
display: flex;
align-items: stretch;
margin: 8px 8px 8px 8px;
- border-radius: 16rpx;
+ border-radius: 8px;
}
.main-left {
flex: 7;
display: flex;
flex-direction: column;
- padding-top: 8rpx;
- padding-bottom: 8rpx;
+ padding-top: 4px;
+ padding-bottom: 4px;
color: #606164;
font-size: 14px;
}
.main-right {
- flex: 1;
+ width: 30px;
display: flex;
align-items: center;
justify-content: center;
@@ -109,7 +109,7 @@
.main-list {
display: flex;
align-items: center;
- margin: 8rpx 0;
+ margin: 2px 0;
}
.list-options {
display: flex;
@@ -124,20 +124,20 @@
display: flex;
}
.left-key {
- width: 130rpx;
- padding-right: 8rpx;
+ width: 65px;
+ padding-right: 4px;
text-align: end;
font-weight: 700;
}
.left-val {
flex: 1;
- padding-left: 8rpx;
+ padding-left: 4px;
color: #606266;
}
.val-text {
background-color: #00aeec;
padding: 2px 4px;
- border-radius: 8rpx;
+ border-radius: 4px;
color: #FFF;
}
.val-num {
diff --git a/components/z-input/z-input.vue b/components/z-input/z-input.vue
index c5dc7b8..0e8f0dc 100644
--- a/components/z-input/z-input.vue
+++ b/components/z-input/z-input.vue
@@ -3,9 +3,18 @@
<view class="main">
<view class="inner1">{{desc}}</view>
<view class="put inner2">
- <input class="p-input" type="text" :placeholder="placeholder" v-model="data" :focus="focusData">
- <uni-icons class="p-icon" type="closeempty" size="16" color="#707070"
- v-show="data.length" @click="clear">
+ <input class="p-input"
+ type="text"
+ :placeholder="placeholder"
+ v-model="data"
+ :focus="focusData">
+
+ <uni-icons class="p-icon"
+ type="closeempty"
+ size="16"
+ color="#b9b9b9"
+ v-show="data.length"
+ @click="clear">
</uni-icons>
</view>
<view class="inner3" v-show="btn">
@@ -96,7 +105,7 @@
.main {
display: flex;
align-items: center;
- min-height: 70rpx;
+ min-height: 35px;
background-color: #FFF;
/* border-bottom: 1px solid darkgray; */
}
@@ -106,17 +115,20 @@
}
.inner1 {
- width: 120rpx;
+ width: 65px;
padding-left: 8px;
- font-weight: 700;
+ color: #606164;
+ font-weight: 900;
font-family:'Helvetica Neue';
}
.inner2 {
- background-color: aliceblue;
+ background-color: #f1f3f4;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
+ border-radius: 5px;
+ color: #606266;
}
.p-input {
flex:1;
@@ -127,7 +139,7 @@
margin-right: 8px;
}
.inner3 {
- width: 200rpx;
+ width: 100px;
display: flex;
align-items: center;
justify-content: center;
diff --git a/pages/common/data-list/dataDetail.vue b/pages/common/data-list/dataDetail.vue
index fd981f1..3adcb30 100644
--- a/pages/common/data-list/dataDetail.vue
+++ b/pages/common/data-list/dataDetail.vue
@@ -8,17 +8,18 @@
{{it.value}}
</view>
- <input class="main-right"
+ <input class="main-right input"
v-show="it.type == 'input'"
type="text"
v-model="it.value"
>
- <view class="main-right dis-center" v-show="it.type == 'number-box'" @click="numChange(i)">
+ <view class="main-right dis-center no-border" v-show="it.type == 'number-box'" >
<uni-number-box
- color="#747474"
+ color="#606266"
v-show="it.type == 'number-box'"
- :value="it.value"
- :max="99999999"
+ v-model="it.value"
+ :max="99999999999999"
+ :min="0"
:step='1'
@change="changeValue"
/>
@@ -26,7 +27,10 @@
</view>
- <button @click="back">back</button>
+ <view class="footer">
+ <button @click="modify">modify</button>
+ <button @click="del">delete</button>
+ </view>
</view>
</template>
@@ -35,18 +39,19 @@
data() {
return {
dataList: [
- {key: '鍟嗗搧缂栫爜',value: 'fbr3dasdasd242fbr3dasdasd242fbr3dasdasd242fbr3dasdasd242fbr2'},
- {key: '鎵瑰彿',value: '20231006',type: 'input'},
- {key: '鏁伴噺',value: 200,type: 'number-box'},
+ {key: '鍟嗗搧鐮�',value: 'LSH90152025',valText: 'val-text'},
+ {key: '鍟嗗搧鍚嶇О',value: '灏奸緳澶达紙鐏扮櫧锛�5.2x25'},
+ {key: '瑙勬牸',value: '700*699*80'},
+ {key: '鎵瑰彿',value: '20231007204944',type: 'input'},
+ {key: '鏁伴噺',value: 951326478,type: 'number-box',valText: 'val-num'},
],
baseIP:'',
basePORT:'',
index: 0,
- val: 0,
}
},
onLoad(option) {
- let that = this
+ let _this = this
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 鍏煎APP-NVUE
// #endif
@@ -55,24 +60,24 @@
// #endif
// 鐩戝惉acceptDataFromOpenerPage浜嬩欢锛岃幏鍙栦笂涓�椤甸潰閫氳繃eventChannel浼犻�佸埌褰撳墠椤甸潰鐨勬暟鎹�
- eventChannel.on('mat', function(data) {
- that.dataList = data.data
+ eventChannel.on('param', function(res) {
+ _this.dataList = res.param
+ _this.index = res.index
})
},
methods: {
- numChange(i) {
- this.dataList[i].value = this.val
- },
changeValue(value) {
this.val = value
},
- back() {
+ modify() {
this.getOpenerEventChannel().emit('dataList', {data: this.dataList});
- uni.navigateBack({
-
- })
+ uni.navigateBack()
+ },
+ del() {
+ this.getOpenerEventChannel().emit('del', {data: this.index});
+ uni.navigateBack()
}
}
}
@@ -81,26 +86,47 @@
<style scoped>
.main {
display: flex;
- border-bottom: 1px solid #333;
- min-height: 70rpx;
+ min-height: 30px;
align-items: center;
margin-left: 8px;
- padding: 8rpx;
+ padding: 8px;
}
.main-left {
- width: 140rpx;
+ width: 65px;
text-align: right;
+ color: #606266;
}
.main-right {
flex: 1;
- background-color: aquamarine;
- margin-left: 8rpx;
+ margin-left: 8px;
display: flex;
flex-wrap: wrap;
/* word-wrap: break-word; */
word-break: break-all;
+ border: 1px solid #dcdfe6;
+ padding: 6px;
+ border-radius: 4px;
+ color: #a8abb2;
+ font-size: 12px;
}
.dis-center {
justify-content: center;
}
+ .no-border {
+ border: none;
+ }
+ .input {
+ color: #606266;
+ }
+ .footer {
+ height: 70px;
+ width: 100%;
+ background-color: #f8f8f8;
+ border-top: 1px solid #dcdfe6;
+ position: fixed;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
</style>
\ No newline at end of file
diff --git a/pages/component/demo.vue b/pages/component/demo.vue
index 8bfbb8b..5b072c8 100644
--- a/pages/component/demo.vue
+++ b/pages/component/demo.vue
@@ -20,9 +20,9 @@
<z-data-list class="data-list"
v-for="(it,i) in zDataList"
:key="i"
- :list="it"
+ :list="it.detl"
:index="i+1"
- @goDetail='goDetail(it.detl)'
+ @goDetail='goDetail(it.detl,i)'
></z-data-list>
@@ -54,7 +54,47 @@
{key: '瑙勬牸',value: '700*699*80'},
{key: '鎵瑰彿',value: '20231007204944',type: 'input'},
{key: '鏁伴噺',value: 951326478,type: 'number-box',valText: 'val-num'},
-
+ {key: '搴忓彿',value: 1},
+ ]
+ },
+ {
+ detl: [
+ {key: '鍟嗗搧鐮�',value: 'LSH90152025',valText: 'val-text'},
+ {key: '鍟嗗搧鍚嶇О',value: '灏奸緳澶达紙鐏扮櫧锛�5.2x25'},
+ {key: '瑙勬牸',value: '700*699*80'},
+ {key: '鎵瑰彿',value: '20231007204944',type: 'input'},
+ {key: '鏁伴噺',value: 951326478,type: 'number-box',valText: 'val-num'},
+ {key: '搴忓彿',value: 2},
+ ]
+ },
+ {
+ detl: [
+ {key: '鍟嗗搧鐮�',value: 'LSH90152025',valText: 'val-text'},
+ {key: '鍟嗗搧鍚嶇О',value: '灏奸緳澶达紙鐏扮櫧锛�5.2x25'},
+ {key: '瑙勬牸',value: '700*699*80'},
+ {key: '鎵瑰彿',value: '20231007204944',type: 'input'},
+ {key: '鏁伴噺',value: 951326478,type: 'number-box',valText: 'val-num'},
+ {key: '搴忓彿',value: 3},
+ ]
+ },
+ {
+ detl: [
+ {key: '鍟嗗搧鐮�',value: 'LSH90152025',valText: 'val-text'},
+ {key: '鍟嗗搧鍚嶇О',value: '灏奸緳澶达紙鐏扮櫧锛�5.2x25'},
+ {key: '瑙勬牸',value: '700*699*80'},
+ {key: '鎵瑰彿',value: '20231007204944',type: 'input'},
+ {key: '鏁伴噺',value: 951326478,type: 'number-box',valText: 'val-num'},
+ {key: '搴忓彿',value: 4},
+ ]
+ },
+ {
+ detl: [
+ {key: '鍟嗗搧鐮�',value: 'LSH90152025',valText: 'val-text'},
+ {key: '鍟嗗搧鍚嶇О',value: '灏奸緳澶达紙鐏扮櫧锛�'},
+ {key: '瑙勬牸',value: '700*699*80'},
+ {key: '鎵瑰彿',value: '20231007204944',type: 'input'},
+ {key: '鏁伴噺',value: 951326478,type: 'number-box',valText: 'val-num'},
+ {key: '搴忓彿',value: 5},
]
}
],
@@ -87,13 +127,15 @@
}
},
- goDetail(param) {
+ goDetail(param,index) {
+ let _this = this
uni.navigateTo({
url: '/pages/common/data-list/dataDetail',
// 浼�
- success: function(res) {
- res.eventChannel.emit('mat', {
- data: param
+ success: function(data) {
+ data.eventChannel.emit('param', {
+ param: param,
+ index: index
})
},
// 鎺�
@@ -101,6 +143,9 @@
dataList: function(data) {
console.log(data);
},
+ del: function(data) {
+ _this.zDataList.splice(data.data,1)
+ }
},
})
}
--
Gitblit v1.9.1