caimei-applets-caimei/pages/user/order/components/cm-contract-order.vue

<template name="goods">
    <view class="goods-template">
        <!-- 商品列表 -->
        <view class="goods-list">
            <view class="goods-main clearfix">
            	<view class="goods-item">
            		<view class="goods-item-td">产品名称</view> 
                    <view class="goods-item-td">注册证编号</view>
                    <view class="goods-item-td">生产厂家</view>
                    <view class="goods-item-td">规格</view>
                    <view class="goods-item-td">数量(支)</view>
                    <view class="goods-item-td">单价(元/支)</view>
                    <view class="goods-item-td">总价(元)</view>
            	</view>
            	<view class="goods-item" v-for="(pros, idx) in orderData.orderProductList" :key="idx">
            		<view class="goods-item-td">{{ pros.name }}</view>
            		<view class="goods-item-td">国械注准20213130488 晋药消械生产许20150014号</view>
            		<view class="goods-item-td">山西锦波生物医药股份有限公司</view>
            		<view class="goods-item-td">{{ pros.productUnit }}</view>
            		<view class="goods-item-td"><text class="red">{{ pros.num }}</text></view>
            		<view class="goods-item-td"><text class="red">￥{{ pros.price | NumFormat }}</text></view>
            		<view class="goods-item-td"><text class="red">￥{{ orderData.totalAmount | NumFormat }}</text> </view>
            	</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'goods',
        props: {
            orderData: {
                type: Object
            }
        },
        data() {
            return {
                
            }
        },
        created() {
            console.log('orderData',this.orderData)
        },
        filters: {
            NumFormat(value) {
                //处理金额
                return Number(value).toFixed(2)
            }
        },
        watch: {
            orderData: {
                handler: function(el) {
                    //监听对象的变换使用 function，箭头函数容易出现this指向不正确
                    this.orderData = el
                },
                deep: true
            }
        },
        computed: {},
        methods: {
            
        }
    }
</script>

<style lang="scss">
    .goods-template {
        width: 100%;
        height: auto;
        background: #ffffff;
        box-sizing: border-box;
        padding: 24rpx 0;
        .goods-list {
            width: 100%;
            height: auto;
            overflow-x: scroll;
            padding: 24rpx 0;
            .goods-main {
            	width: 1500rpx;
            	min-height: 240rpx;
            	border: 1px solid #666666;
            	border-radius: 10rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
            	.goods-item {
            		width: 100%;
            		border-bottom: 1px solid #666666;
                    display: flex;
                    justify-content: center;
            		&:last-child {
            			border-bottom: none;
            		}
            		.goods-item-td {
                        width: 14.28%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: wrap;
                        padding: 20rpx;
            			font-size: $font-size-24;
                        line-height: 40rpx;
            			color: #666666;
            			box-sizing: border-box;
                        border-right: 1px solid #666666;
                        .red{
                            color: #ff2a2a;
                        }
            			&:last-child {
                            border-right: none;
            			}
            		}
            	}
            }
        }
    }
</style>