#

whycq

2023-10-07 2f4ecca95c56d3d30402e480e9d97368a5254cbf

#

 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 {

 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;

 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>

 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)
                        }
                    },
                })
            }