kuaiyidian-HD/pages/inventory/inventoryDetail.vue

<template>
	<view class="page1">
		<view class="content-box">
			<view class="right-box" @tap="toggle('bottom',item)">
				<view class="box-left">
					<img src="/static/images/logo.png" alt="">
				</view>
				<view class="box-right">
					<view class="box-right-name">女士裙子（AC1551452）</view>
					<view class="box-right-num">供应商：张三</view>
					<view class="edit-btn" @tap="goToAddGoods">编辑</view>
					<view class="box-right-num" style="color:#ffa200;">
						<text style="padding-right: 20rpx;">已上架</text>
						<text>已入库</text>
					</view>
				</view>
			</view>
			<view class="box-right-price">
				<view class="price-box">
					<text>100</text>
					<text>平均采购价</text>
				</view>
				<view class="price-box">
					<text>100</text>
					<text>批发价</text>
				</view>
				<view class="price-box">
					<text>100</text>
					<text>零售价</text>
				</view>
				<view class="price-box">
					<text>10</text>
					<text>库存</text>
				</view>
			</view>
		</view>
		<view class="container-box">
			<view class="prec-list">
				<view class="prec-list-box">
					颜色：黑色，尺码：S码，规格：童装
				</view>
				<view class="prec-list-box" style="text-align: right;">
					* 20
				</view>
			</view>
		</view>
		<!-- 弹出输入框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="采购价" placeholder="请输入采购价"
				@confirm="changePrice"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1, //分页的页码
				shopList: [],
				goodsDetail: [],
				temporaryList: [],
				carList: []
			}
		},
		onLoad(options) {
			// this.khid = options.khid;
			this.getShareList();
		},
		methods: {
			//库存商品详情
			getShareList() {

			},
			//弹出购物车或者商品规格选择弹窗
			toggle(type, item) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if (type == 'carPopup') {
					this.$refs.carPopup.open('bottom')

				} else {
					this.checkGoods(item);
					this.$refs.popup.open('bottom')
				}

			},
			//临时改价
			changePrice(val) {
				this.goodsDetail.price = this.temporaryList[0].price = val
			},
			//删除商品下的某一个规格
			delShopSpec(name) {
				var that = this;
				console.log(this.carList)
				for (let i = 0; i < this.carList.length; i++) {
					for (let m = 0; m < this.carList[i].saleDetailQueryDTO.length; m++) {
						if (this.carList[i].saleDetailQueryDTO[m].name == name) {
							uni.showModal({
								title: "提示",
								content: "确定删除此条商品吗？",
								success: function(res) {
									that.carList[i].saleDetailQueryDTO.splice(m, 1)
									if (that.carList[i].saleDetailQueryDTO.length == 0) {
										that.carList.splice(i, 1)
									}
								}
							})
						}
					}
				}
			},
			//去新增商品页编辑
			goToAddGoods(){
				//去编辑页的时候，分类不能更改了
				uni.navigateTo({
					url: "/pages/inventory/addGoods"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.page1 {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.content-box {
		background: #fff;
	}

	.right-box {
		width: 100%;
		height: 220rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.box-left {
		width: 170rpx;
		height: 170rpx;
		background-size: 100%;
		margin: 25rpx;
		border-radius: 20rpx;
	}

	.box-left img {
		width: 100%;
		height: 100%;

	}

	.box-right {
		margin-top: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.box-right-name {
		font-size: 30rpx;
		font-weight: bold;
		padding-left: 20rpx;
		height: 30%;
	}

	.box-right-num {
		padding: 5rpx 0;
		color: #777;
		padding-left: 20rpx;
		height: 30%;
	}

	.box-right-price {
		display: flex;
		font-size: 25rpx;
		height: 100rpx;
	}

	.price-box {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.container-box {
		border-top: 10px solid #eee;
	}

	.price-box text:first-child {
		color: #ffa200
	}

	.edit-btn {
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background: skyblue;
		position: absolute;
		top: 70rpx;
		right: 40rpx;
		border-radius: 10px;
		text-align: center;
	}

	.prec-list {
		    height: 140rpx;
		    background: #fff;
		    display: flex;
		    flex-direction: column;
		    font-size: 32rpx;
			border-bottom: 1px solid #eee;
	}

	.prec-list-box {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 40rpx;
	}
</style>