siyu_app/components/good-list/good-list.vue

<template>
	<view class="order-list">
		<view v-for="(item,index) in dataList" :key="index" class="item" >
			
			<!-- 订单号，状态 -->
			<view class="ordersn-box">
				<view class="num">订单号：{{item.orderCode}}</view>
				<view class="status-box">
					<!-- <view   class="recom-box">推荐订单</view> -->
					<text   class="text success">  
						{{parseDictName(item.status)}} 
					</text>
				</view>
			</view>
			<!-- 药品列表 -->
			<view class="drug-list"  >
				<view v-for="(subItem,index) in item.items" :key="index" class="drug-item">
					<view class="img-box">
						<image :src="JSON.parse(subItem.jsonInfo).image" mode="aspectFill"></image>
					</view>
					<view class="drug-info"  >
						<view>
							<view class="name-box ellipsis2">
								<view v-if="subItem.isPrescribe==1" class="tag">处方药</view>{{JSON.parse(subItem.jsonInfo).productName}}
							</view>
							<view class="spec ellipsis">{{JSON.parse(subItem.jsonInfo).sku}}</view>
						</view>
						<view class="num-box">
							<view class="price">
								<text class="unit">¥</text>
								<text class="num" v-if="JSON.parse(subItem.jsonInfo).price!=null">{{JSON.parse(subItem.jsonInfo).price.toFixed(2)}}</text>
							</view>
							<view class="amount">x{{JSON.parse(subItem.jsonInfo).num}}</view>
						</view>
					</view>
				</view>
				<!-- 实付金额、按钮 -->
				<view class="bottom-box">
					<view class="amount-paid">
						<text class="label">实付金额：</text>
						<view class="price-box">
							<view class="unit">¥</view>
							<view class="num" >{{item.payPrice.toFixed(2)}}</view>
						</view>
					</view>
					<view class="btn-box">
						<view  class="btn pay" @click.stop="showDetail(item)">
							查看详情
						</view>
					</view>
				</view>
			</view>
		
		
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dataList: {
				type: Array,
				default(){
					return []
				}
			}
		},
		methods: {
		   parseDictName(val){
				var name=""
				name=this.getStoreDictByName('store_order_status',val);
				return name;
		   },
		   showDetail(item) {
				uni.navigateTo({
					url: '/pages/user/order/storeOrderDetail?id=' + item.id
				})
		   },
		   getStoreDictByName(key,dictValue) {
		   	if(dictValue==null || dictValue==-1){
		   		return "请选择";
		   	}
		   	var dicts = uni.getStorageSync(key);
		   	var dict=JSON.parse(dicts);
		   	var name="";
		   	dict.forEach(function(item, index, array) {
		   		 if(dictValue.toString()==item.dictValue.toString()){
		   			 name=item.dictLabel
		   		 }
		   	});
		   	return name;
		   }
		   
		}
	}
</script>

<style scoped lang="scss">

	.order-list{
		padding: 20upx;
		.item{
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 0 30upx;
			margin-bottom: 20upx;
			.ordersn-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34upx 0 20upx;
				.num{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 1;
				}
				.status-box{
					display: flex;
					align-items: center;
					.recom-box{
						width: 108upx;
						height: 30upx;
						line-height: 30upx;
						text-align: left;
						padding-left: 8upx;
						font-size: 22upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						//background-image: url(../static/images/recom.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-right: 8upx;
					}
					.text{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 1;
						&.success{
							color: #2BC7B9;
						}
						&.black{
							color: #111111;
						}
						&.info{
							color: #999999;
						}
					}
				}
			}
			.drug-list{
				.drug-item{
					padding: 30upx 0;
					border-bottom: 1px soli #F0F0F0;
					display: flex;
					align-items: center;
					.img-box{
						width: 160upx;
						height: 160upx;
						margin-right: 30upx;
						flex-shrink: 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.drug-info{
						width: calc(100% - 190upx);
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name-box{
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							line-height: 40upx;
							.tag{
								display: inline-block;
								padding: 0 6upx;
								height: 30upx;
								background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
								border-radius: 4upx;
								margin-right: 10upx;
								font-size: 22upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FFFFFF;
								line-height: 30upx;
								float: left;
								margin-top: 7upx;
							}
						}
						.spec{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
							margin-top: 10upx;
						}
						.num-box{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.price{
								display: flex;
								align-items: flex-end;
								.unit{
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1.2;
									margin-right: 4upx;
								}
								.num{
									font-size: 32upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #111111;
									line-height: 1;
								}
							}
							.amount{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
							}
						}
					}
				}
				.bottom-box{
					height: 110upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.amount-paid{
						display: flex;
						align-items: center;
						.label{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
						}
						.price-box{
							display: flex;
							align-items: flex-end;
							.unit{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF6633;
								line-height: 1.2;
								margin-right: 4upx;
							}
							.num{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #FF6633;
								line-height: 1;
							}
						}
					}
					.btn-box{
						box-sizing: border-box;
						display: flex;
						align-items: center;
						.btn{
							width: 155upx;
							height: 64upx;
							line-height: 64upx;
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							text-align: center;
							border-radius: 32upx;
							margin-left: 15upx;
							&:first-child{
								margin-left: 0;
							}
							&.cancel{
								border: 1px solid #DDDDDD;
								color: #666666;
							}
							&.pay{
								background: #2BC7B9;
								color: #FFFFFF;
								position: relative;
								.share{
									display: inline-block;
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%rpx;
									opacity: 0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>