OpenDoorManageMini/pages/equipment/comManage.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" :title="title"></u-navbar>
		<view class="content">
			<!-- <view class="search">
				<u-search animation placeholder="商品搜索" v-model="keyword" :showAction="false" search="search"></u-search>
			</view> -->
			<view class="list" v-if="commList&&commList.length>0">
				<view class="thumb-box" v-for="(item, index) in commList" :key="item.id"
					@click.stop="commItemSelect(item)">
					<view>
						<image class="select-img"
							src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/commodity/selected.png"
							mode="widthFix" v-show="item.checked"></image>
						<image class="select-img"
							src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/commodity/select.png"
							mode="widthFix" v-show="!item.checked"></image>
					</view>
					<view class="check-content">
						<view class="comm-img">
							<u--image width="130rpx" height="130rpx" :src="item.cover" mode="aspectFit"
								:lazy-load="true"></u--image>
						</view>
						<view class="comm-main">
							<view>
								{{item.name}}
							</view>
							<view>
								条形码：{{item.barcode}}
							</view>
							<view>
								商品ID：{{item.id}}
							</view>
							<view>
								商品SKUID：{{item.skuId}}
							</view>
							<!-- <view class="c-cx">
								促销活动：
							</view> -->
							<view class="c-pri">
								价格：<text>￥{{$xy.delMoney(item.price)}}</text>
								<view @click.stop="edit(item)">修改</view>
							</view>
						</view>

						<view class="status" v-if="item.name">
							<view class="s-name">
								在售/补后
							</view>
							<view class="s-num">
								{{item.stock}}/{{item.fillCount}}
							</view>
						</view>

						<view class="status" v-else>
							补货时请移除
						</view>

						<!-- <view class="sale" v-if="item.name">
							<view>
								今日销售额
							</view>
							<view>
								￥<text>{{item.todaySalesMoney||0}}</text>
							</view>
						</view>

						<view class="sale" v-else>
							已删除商品
						</view> -->
					</view>
				</view>

				<u-loadmore :status="status" v-if="commList.length>=1" />
			</view>

			<view class="empty" v-else>
				<u-empty></u-empty>
			</view>
		</view>

		<view class="refresh" @click="search">
			刷新
		</view>

		<view class="btn safe-bottom">
			<xbutton width="340rpx" size="large" @click="del">删除商品</xbutton>
			<xbutton width="340rpx" size="large" @click="add">增加商品</xbutton>
		</view>

		<xpopup :show="editPriceShow" @close="editPriceClose" @confirm="submit" :showBtn="true" title="修改价格">
			<view class="pop-content">
				<u--input placeholder="请输入内容" type="digit" border="surround" v-model="price"></u--input>
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		goodsList
	} from '@/api/device/device.js'
	import {
		delGoods
	} from "@/api/replenishment/replenishment.js"
	import {
		changePrice
	} from '@/api/commodity/goodsMode.js'

	export default {
		data() {
			return {
				keyword: '',
				commList: [],
				id: null, //设备id
				page: 1,
				size: 10,
				editPriceShow: false,
				price: 0,
				goodsId: null,
				deviceName: null,
				title: null
			}
		},
		onLoad(o) {
			if (o.id) {
				this.id = o.id;
				this.deviceName = o.deviceName;
				this.title = '商品列表-' + this.deviceName

			}
		},

		onShow() {
			this.reset()
			this.getList()
		},

		methods: {
			search(val) {
				this.reset()
				this.getList()
			},
			// 商品选中状态改变
			commItemSelect(e) {
				if (e.name == '未知商品' || e.name == '非友好购物商品') {
					this.$modal.msg('预设商品不能删除!!!')
					return
				}
				e.checked = !e.checked;
			},

			edit(item) {
				this.goodsId = item.id;
				this.editPriceShow = true;
				this.price = (Number(item.price) / 100).toFixed(2)
			},

			//删除商品
			del() {
				let delComList = [];
				this.commList.forEach(i => {
					if (i.checked) {
						delComList.push(i.goodsId)
					}
				})

				if (delComList.length == 0) {
					this.$modal.msg('请选择需要删除的商品~')
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: res => {
						if (res.confirm) {
							delGoods({
								deviceId: this.id,
								goodsIds: delComList
							}).then(res => {
								this.$modal.confirm('删除成功,请拿走货架上当前商品。').then(resolve => {
									console.log('确认拿走~')
								})
								this.reset()
								this.getList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			add() {
				this.$tab.navigateTo(`/pages/equipment/addCom?id=${this.id}`)
			},

			reset() {
				this.status == 'loadmore'
				this.page = 1;
				this.commList = [];
			},

			getList() {
				goodsList({
					page: {
						current: this.page,
						size: this.size
					},
					deviceId: this.id
				}).then(res => {
					let data = res.data.records;
					for (let i = 0; i < data.length; i++) {
						let item = data[i];
						item.checked = false;
					}
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
					this.commList = this.commList.concat(data)
				})
			},

			onReachBottom() {
				if (this.status == 'nomore') return
				this.page++
				this.getList()
			},

			editPriceClose() {
				this.editPriceShow = false;
			},

			submit() {
				if (this.price) {
					changePrice({
						id: this.goodsId,
						price: Number(this.price) * 100
					}).then(res => {
						if (res.code == 200) {
							this.$modal.msg('修改成功~')
							this.reset()
							this.getList()
						}
					}).catch(err => {})
				} else {
					this.$modal.msg('商品价格不能为空！')
				}
				this.editPriceClose()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.content {
			padding-bottom: 88rpx;

			.search {
				padding: 24rpx 24rpx;
				background-color: #fff;
			}

			.list {
				width: 100%;
				padding: 12rpx 24rpx;

				.thumb-box {
					margin-bottom: 12rpx;
					border-bottom: 1rpx solid #f4f4f4;
					display: flex;
					flex-flow: row nowrap;
					padding: 12rpx 12rpx;
					align-items: center;
					background-color: #fff;
					border-radius: 12rpx;
				}

				.select-img {
					width: 40rpx;
					height: 40rpx;
				}

				.check-content {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-left: 12rpx;
					position: relative;

					.comm-img {
						width: 130rpx;
						height: 130rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-around;

						image {
							width: 100%;
						}
					}

					.comm-main {
						box-sizing: border-box;
						padding-left: 18rpx;
						color: #999;

						>view {
							padding: 8rpx 0;
							width: 330rpx;
						}

						>view:nth-child(1) {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							padding: 12rpx 0 8rpx 0;
						}

						>view:nth-child(2) {
							width: 450rpx;
							font-size: 26rpx;
						}

						>view:nth-child(3) {
							width: 450rpx;
							font-size: 26rpx;
						}

						>view:nth-child(4) {
							width: 450rpx;
							font-size: 26rpx;
							padding: 0;
							line-height: 40rpx;
						}

						>.c-cx {
							font-size: 26rpx;
						}

						>.c-pri {
							font-size: 26rpx;

							text {
								font-weight: bold;
								color: red;
								font-size: 30rpx;
							}

							>view {
								display: inline-block;
								font-size: 26rpx;
								color: #2C6FF3;
								text-decoration: underline;
								margin-left: 12rpx;
							}
						}
					}

					.status {
						width: 120rpx;
						height: 120rpx;
						box-sizing: border-box;
						border-radius: 120rpx;
						// border: 6rpx solid #2C6FF3;
						text-align: center;
						display: flex;
						flex-flow: column;
						justify-content: space-around;
						align-items: center;
						position: absolute;
						right: 12rpx;
						top: -12rpx;

						.s-name {
							font-size: 24rpx;
							padding-top: 16rpx;
							font-weight: bold;
						}

						.s-num {
							font-size: 28rpx;
							padding-bottom: 20rpx;
						}
					}

					.sale {
						position: absolute;
						right: 12rpx;
						bottom: 12rpx;
						text-align: center;
						color: #999;

						>view:nth-child(1) {
							font-size: 24rpx;
						}

						>view:nth-child(2) {
							font-size: 32rpx;
							color: #2C6FF3;
							font-weight: bold;
						}
					}
				}
			}
		}

		.empty {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.refresh {
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			text-align: center;
			line-height: 80rpx;
			position: fixed;
			right: 24rpx;
			bottom: 230rpx;
			background-color: #999;
			color: #fff;
			opacity: .8;
		}

		.btn {
			width: 100%;
			position: fixed;
			bottom: 24rpx;
			left: 0;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			padding: 0 24rpx;

			.cu-btn {
				background-color: #2C6FF3;
				color: #fff;
				width: 48%;
			}
		}

		.pop-content {
			padding: 24rpx;
		}
	}
</style>