QianNiaoShop/pages/order/OrderGoodsList.vue

<template>
	<view>
		<view class="goods-ul">
			<view class="goods-li" v-for="(item,index) in goods_list" :key="index">
				<view class="del-icon"><u-icon name="trash" color="#999999" size="40"></u-icon></view>
				<view class="goods-name ellipsis">{{item.title}}</view>
				<view class="goods-code">编号：{{item.code}}</view>
				<block v-for="(sku,skui) in item.specMultiple" :key="skui">
					<view class="goods-sku">
						<text>{{sku.unitName}};</text>
						<text v-for="(spec,specI) in sku.specGroup">{{spec.specValueName}}</text>
					</view>
					<view class="goods-num clearfix">
						<view class="float_left">
							<text class="price">¥{{sku.salePrice}}</text>
							/{{sku.unitName}}
						</view>
						<view class="float_right"><u-number-box v-model="sku.buyNum"></u-number-box></view>
					</view>
				</block>
				
			</view>
		</view>
		<view class="detail-bottom">
			<view class="left-view">
				<!-- <view class="total-price">¥1000.00</view> -->
				<view class="left-desc">已选{{goods_list.length}}种，55个</view>
			</view>
			<view class="right-view">
				<view class="btn-li" @click="goPage('/pagesT/goods/selGoods')">选择商品</view>
				<view class="btn-li" @click="backOrder">下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				goodsData:'',
				goods_list:[]
			}
		},
		watch:{
			goodsData(val){
				if(val){
					this.goods_list=val
				}
			}
		},
		onLoad() {
			
		},
		methods:{
			backOrder(){
				this._prePage().orderGoods = this.add_goods;
				this.goPage('/pages/order/OrderAdd')
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods-ul {
	padding-bottom: 100rpx;
	.goods-li {
		background-color: #ffffff;
		border-bottom: 1px solid #eeeeee;
		padding: 20rpx;
		padding-left: 80rpx;
		font-size: 24rpx;
		color: #6c6c6c;
		line-height: 50rpx;
		position: relative;
		.del-icon {
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
		}
		.goods-name {
			-webkit-line-clamp: 2;
			font-size: 28rpx;
			color: #111111;
		}
		.price {
			font-size: 28rpx;
			color: $uni-color-error;
		}
	}
}
.detail-bottom {
	.left-view {
		padding: 10rpx 30rpx;
		.total-price {
			color: $uni-color-error;
			font-weight: bold;
		}
		.left-desc {
			font-size: 24rpx;
			color: #6c6c6c;
		}
	}
	.right-view {
		padding:10rpx 30rpx;
		margin-left: 30rpx;
		.btn-li {
			display: inline-block;
			width: 200rpx;
			text-align: center;
			line-height: 80rpx;
			height: 80rpx;
			background: $uni-color-primary;
			border: 1px solid $uni-color-primary;
			color: #ffffff;
			border-radius: 10rpx;
			&:first-child {
				color: #333333;
				border-color: #eeeeee;
				background-color: #FFFFFF;
				margin-right: 20rpx;
			}
		}
	}
}
</style>