投稿
问答

订单详情里的展开和收起如何做的?

作者：admin 2021-04-21 我要评论

第一次做移动端,有点懵逼,有大佬做过的指点一下 有demo的也行 template !-- 订单详情 -- view class="orderForm" !-- 第一个盒子 -- view class="info-one" view...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

image.png
image.png

第一次做移动端,有点懵逼,有大佬做过的指点一下
有demo的也行

<template>
<!-- 订单详情 -->

<view class="orderForm">
    <!-- 第一个盒子 -->
    <view class="info-one">
        <view class="one-title">
            <text>患者待取药</text>
            <u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
        </view>
        <view class="one-infos">
            <view class="one-captcha">
                <text class="left">取药地址</text>
                <text class="right">上海市黄浦区龙华东路385号 国大药房药房龙华店东路</text>
            </view>
            <view class="one-captcha">
                <text class="left">验证码</text>
                <text class="right textColor">0638</text>
            </view>
            <view class="one-captcha">
                <text class="left">联系人</text>
                <text class="right">张三</text>
            </view>
            <view class="one-captcha">
                <text class="left">联系电话</text>
                <text class="right">15565505131</text>
            </view>
        </view>
    </view>
    <!-- 第二个盒子 -->
    <view class="info-two">
        <view class="two-top">
            <view class="two-top-left">
                <text class="left">用药信息</text>
                <u-icon name="question-circle" color="#CCC" size="28"></u-icon>
            </view>
            <view class="two-top-right">
                <text class="right">未填写</text>
                <u-icon name="arrow-right" color="#CCC" size="28"></u-icon>
            </view>
        </view>
        <view class="two-bottom">
            <text>据国家规定，此购药清单包含处方药，需填写用药信息</text>
        </view>
    </view>
    <!-- 第三个盒子 -->
    <view class="info-three">
        <view class="info-center">
            <view class="three-title">
                <text>订单商品(5)</text>
            </view>
            <view class="three-reduction">
                <text class="t1">满减</text>
                <text class="t2">满10盒，可减1盒；满10盒，可减1盒</text>
            </view>
            
            <!-- <u-read-more ref="uReadMore">
                    <u-parse :html="content" @load="parseLoaded"></u-parse>
            </u-read-more>
             -->                
            <view class="three-goods" v-for="item in dataList" :key="item.id">
                <view class="goods-pic">
                    <image src="/uploads/allimg/210421/1500025446-2.png" mode=""></image>
                </view>
                <view class="goods-describe">
                    <text class="t1">{{item.t1}}</text>
                    <text class="t2">{{item.t2}}</text>
                </view>
                <view class="goods-price">
                    <text class="t1">
                        <text>￥{{item.p1}}</text>
                    </text>
                    <text class="t2">x {{item.p2}}</text>
                </view>
            </view>
            
            <view class="three-loading">
                <u-button class="loading-button">加载更多
                    <u-icon class="loading-down" name="arrow-down" color="#CCC" size="28"></u-icon>
                </u-button>
            </view>
            <view class="three-preferential">
                <view class="preferential-promote">
                    <text class="t1">促销</text> 
                    <text class="t2">-￥15.3</text>
                </view>
                <view class="preferential-ticket">
                    <text class="t1">优惠券</text>
                    <text class="t2">-￥25</text>
                </view>
            </view>
        </view>
    </view>
    <!-- 第四个盒子 -->
    <view class="four-money">
        <view class="four-economize">
            <text class="t1">共节省</text>
            <text class="t2">￥35.3</text>
        </view>
        <view class="four-statistics">
            <text class="t1">实付金额:</text>
            <text class="t2">￥175.56</text>
        </view>
    </view>
    <!-- 第五个盒子 -->
    <view class="five-information">
        <view class="five-title">
            订单信息
        </view>
        <view class="five-center">
            <view class="five-number">
                <text class="t1">订单编号</text>
                <text class="t2">20210202222888833</text>
                <text class="t3">复制</text>
            </view>
            <view class="five-number">
                <text class="t1">下单时间</text>
                <text class="t2">2021-02-02 15:11:33</text>
            </view>
            <view class="five-number">
                <text class="t1">支付方式</text>
                <text class="t2">货到付款</text>
            </view>
            <view class="five-number">
                <text class="t1">订单备注</text>
                <text class="t2">缺货时请和我电话联系，谢谢!</text>
            </view>
        </view>
    </view>
</view>

</template>

<script>

export default {
    data() {
        return {
            // content:``
            dataList:[
                {
                    "img":"/uploads/allimg/210421/1500025446-2.png",
                    "t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
                    "t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
                    "p1":"399.88",
                    "p2":"9",
                    "id":"1"
                },
                {
                    "img":"/uploads/allimg/210421/1500025446-2.png",
                    "t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
                    "t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
                    "p1":"399.88",
                    "p2":"9",
                    "id":"2"
                },
                {
                    "img":"/uploads/allimg/210421/1500025446-2.png",
                    "t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
                    "t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
                    "p1":"399.88",
                    "p2":"9",
                    "id":"3"
                },
                {
                    "img":"/uploads/allimg/210421/1500025446-2.png",
                    "t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
                    "t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
                    "p1":"399.88",
                    "p2":"9",
                    "id":"4"
                },
                {
                    "img":"/uploads/allimg/210421/1500025446-2.png",
                    "t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
                    "t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
                    "p1":"399.88",
                    "p2":"9",
                    "id":"5"
                },
                {
                    "img":"/uploads/allimg/210421/1500025446-2.png",
                    "t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
                    "t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
                    "p1":"399.88",
                    "p2":"9",
                    "id":"6"
                }
            ]
        }
    },
    
}

</script>

<style lang="scss" scoped>

.orderForm{
    padding: 0 24rpx;
    background-color: #F6F6F6;
    padding-bottom: 260rpx;
    // 第一个盒子
    .info-one{
        background-color: #FFF;
        border-radius: 16rpx;
        padding-bottom: 32rpx;
        .one-title{
            padding-top: 48rpx;
            text-align: center;
            font-size: 34rpx;
            font-weight: 600;
            text{
                margin-right: 8rpx;
                }
        }
        .one-infos{
            &>view {
                display: flex;
                padding-top: 24rpx;
            }
            .left {
                font-size: 26rpx;
                width: 180rpx;
                padding-left: 24rpx;
            }
            .right {
                font-size: 26rpx;
                padding-right: 24rpx;
                text-align: left;
            }
            .textColor{
                color: #FF4F39;
            }
        }
    }
    // 第二个盒子
    .info-two{
        margin-top: 16rpx;
        height: 146rpx;
        background-color: #FFFFFF;
        border-radius: 16rpx;
        .two-top{
            padding-top: 24rpx;
            display: flex;
            justify-content:space-between;
            .two-top-left{
                margin-left: 24rpx;
                .left{
                    font-weight: 600;
                    font-size: 28rpx;
                    margin-right: 12rpx;
                    color: #333333;
                }
            }
            .two-top-right{
                color: #FF4F39;
                margin-right: 24rpx;
                .right{
                    margin-right: 8rpx;
                }
            }
        }
        .two-bottom{
            padding-top: 24rpx;
            text{
                margin-left: 24rpx;
                color: #999999;
                font-size: 24rpx;
            }
        }
    }
    // 第三个盒子
    .info-three{
        background-color: #FFFFFF;
        border-radius: 16rpx;
        margin-top: 24rpx;
        .info-center{
                padding:24rpx;
            .three-title{
                padding-bottom: 24rpx;
                color: #333333;
                font-size: 28rpx;
                font-weight: 600;
                border-bottom: 1px solid #F6F6F6;
            }
            .three-reduction{
                padding-top:24rpx;
                font-size: 24rpx;
                color: #333333;
                .t1{
                    margin-right: 24rpx;
                    padding: 0 8rpx;
                    background:linear-gradient(left,#F16500,#FF0000)
                }
            }
            .three-goods{
                background-color: #FFFFFF;
                display: flex;
                padding: 24rpx;
                .goods-pic{
                    image{
                        height: 140rpx;
                        width: 140rpx;
                        margin-right: 16rpx;
                    }
                }
                .goods-describe{
                    flex: 1;
                    .t1{
                        color: #333333;
                        font-size: 24rpx;
                        margin-bottom: 8rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }
                    .t2{
                        font-size: 24rpx;
                        color:#666666;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                    }
                }
                .goods-price{
                    display: flex;
                    flex-flow: column;
                    text-align: center;
                    margin-left: auto;
                    .t1{
                        display: flex;
                        font-size: 28rpx;
                        color: #FF4F39;
                        padding-left: 42rpx;
                    }
                    .t2{
                        font-size: 24rpx;
                        color: #999999;
                        margin: auto 0;
                    }
                }
            }
            .three-loading{
                .loading-button{
                    border: none;
                    background-color: #F6F6F6;
                    .loading-down{
                        margin-left: 8rpx;
                    }
                }
            }
            .three-preferential{
                // border-bottom: 2prx solid #F6F6F6;
                margin-bottom: 10rpx;
                padding-top: 24rpx;
                .preferential-promote{
                    display: flex;
                    justify-content: space-between;
                    .t1{
                        font-size: 26rpx;
                    }
                    .t2{
                        color: #FF4F39;
                        font-size: 28rpx;
                    }
                }
                .preferential-ticket{
                    padding-top: 28rpx;
                    display: flex;
                    justify-content: space-between;
                    .t1{
                        font-size: 26rpx;
                    }
                    .t2{
                        color: #FF4F39;
                        font-size: 28rpx;
                    }
                }
            }

        }
    }
    // 第四个盒子
    .four-money{
        margin-top: 2rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        padding: 36rpx 0 32rpx 0;
        font-size: 26rpx;
        .four-economize{
            margin-left: 260rpx;
            display: inline-block;
            .t2{
                padding-left: 4rpx;
                color: #FF4F39;
            }
        }
        .four-statistics{
            margin-left: 22rpx;
            display: inline-block;
            .t2{
                padding-left: 4rpx;
                color: #FF4F39;
            }
        }
    }
    // 第五个盒子
    .five-information{
        margin-top: 24rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        padding-bottom: 24rpx;
        .five-title{
            font-size: 28rpx;
            font-weight:600;
            padding: 24px 0 0 24rpx;
            }
        .five-center{
            padding: 0 24rpx;
            font-size: 26rpx;
            .five-number{
                // display: flex;
                // justify-content:space-between;
                padding-top:24rpx;
                .t2{
                    padding-left: 32rpx;
                }
                .t3{
                    border: 2rpx solid #F6F6F6;
                    float: right;
                    padding: 0 16rpx;
                }
            }
            // .five-time{
            //     .t2{
            //         padding-left: 32rpx;
            //     }
            // }
        }
    }

}

</style>

###
.item-list
.item-list .item:nth-child(n+5) {display:none;}
.item-list.show-all .item:nth-child(n+5) {display:block;}

剩下的就是 改 .item-list 的 class 就行

###

其实可以参看一下element 这个下拉菜单组件或者直接参考它显示代码隐藏代码那里的样式

###

vue的话如下

<ul class="list">
  <li class="item" v-for="it in list" :key="it.key"></li>
  <li class="toggle-btn">{{showAll?'收起':'展开'}}</li>
</ul>
export default {
    computed: {
      list() {
        return this.showAll ? this.goodsList : this.goodsList.slice(0, 10)
     }
   },
}
###

配合animation改变列表高度

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章
  • 订单详情里的展开和收起如何做的?

    订单详情里的展开和收起如何做的?

  • zalando/problem-spring-web如何隐藏st

    zalando/problem-spring-web如何隐藏st

  • 关于serviceWorker和workbox的离线缓存

    关于serviceWorker和workbox的离线缓存

  • 关于Kafka重试达到次数之后的处理方案

    关于Kafka重试达到次数之后的处理方案

腾讯云代理商
精彩导读
/images/defaultpic.gif

有一个TaskVersion类，因为多加两个字

/uploads/allimg/210419/15012BT5-0-lp.jpg

这个TCP连接为何会被RST掉

/uploads/allimg/210420/2100451960-0-lp.jpg

babel求翻译 ？

/images/defaultpic.gif

typescript 动态类型问题

/uploads/allimg/210410/0Z5451001-0-lp.jpg

taro 引入 taro-ui-vue 后编译报错

/uploads/allimg/210421/1201216142-0-lp.jpg

怎么实现多行不定列自适应布局

海外云服务器
热门资讯
备案：湘ICP备15009499号-1
网站简介 投稿须知 商务合作 版权申明 技术支持：TOP云