极客观点
项目管理
HarmonyOS
第一次做移动端,有点懵逼,有大佬做过的指点一下
有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="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.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":"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
"t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
"t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
"p1":"399.88",
"p2":"9",
"id":"1"
},
{
"img":"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
"t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
"t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
"p1":"399.88",
"p2":"9",
"id":"2"
},
{
"img":"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
"t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
"t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
"p1":"399.88",
"p2":"9",
"id":"3"
},
{
"img":"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
"t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
"t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
"p1":"399.88",
"p2":"9",
"id":"4"
},
{
"img":"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
"t1":"碳酸镁咀嚼片碳酸碳酸镁咀碳酸镁咀碳酸镁咀镁镁镁咀咀咀片碳酸镁",
"t2":"0.5g*20T 拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限拜耳医药保健有限",
"p1":"399.88",
"p2":"9",
"id":"5"
},
{
"img":"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.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 的 class 就行