zhongshen_project/addon/cashier---/source/os/components/nc-goods/nc-goods.vue

<template>
	<view class="container goods-container">
		<view class="header-operation">
			<view class="header-operation-left">
				<view :class="{ active: type == 'goods' }" @click="switchItem('goods')">商品</view>
				<view :class="{ active: type == 'service' }" @click="switchItem('service')">项目</view>
				<view :class="{ active: type == 'money' }" @click="switchItem('money')">无码商品</view>
			</view>
			<view class="header-operation-right">
				<input type="text" placeholder="请输入商品编码" placeholder-style="font-size:0.14rem;color:#ACACAC;" v-model="skuNo" />
				<input placeholder="请输入商品/项目名称" placeholder-style="font-size:0.14rem;color:#ACACAC;" v-model="searchText" />
				<view class="search-btn" @click="search"><text class="iconfont icon31sousuo"></text></view>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-x="true" class="type-switch common-scrollbar" v-show="serviceCategory.length && type == 'service'">
				<view class="switch-item" :class="{ active: serviceCategoryId == 'all' }" @click="serviceCategoryId = 'all'">所有分类</view>
				<view
					class="switch-item"
					:class="{ active: serviceCategoryId == item.category_id }"
					v-for="(item, index) in serviceCategory"
					:key="index"
					@click="serviceCategoryId = item.category_id"
				>
					{{ item.category_name }}
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="type-switch common-scrollbar" v-show="goodsCategory.length && type == 'goods'">
				<view class="switch-item" :class="{ active: goodsCategoryId == 'all' }" @click="goodsCategoryId = 'all'">所有分类</view>
				<view
					class="switch-item"
					:class="{ active: goodsCategoryId == item.category_id }"
					v-for="(item, index) in goodsCategory"
					:key="index"
					@click="goodsCategoryId = item.category_id"
				>
					{{ item.category_name }}
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap" v-show="type == 'service'" @scrolltolower="getService()">
				<view class="table-list" v-show="serviceData.list.length">
					<view
						class="table-item"
						:class="{ 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: goodsIds.indexOf(item.goods_id) != -1 }"
						v-for="(item, index) in serviceData.list"
						:key="index"
						@click="goodsSelect(item)"
					>
						<view class="item-name multi-hidden">{{ item.goods_name }}</view>
						<view class="item-info">
							<view class="item-img">
								<image
									:src="
										item.goods_image == 'public/uniapp/default_img/goods.png'
											? $util.img('public/uniapp/default_img/goods.png')
											: $util.img(item.goods_image.split(',')[0], { size: 'small' })
									"
									@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
									mode="widthFix"
								></image>
							</view>
							<view class="item-other">
								<view class="item-money">
									<text class="util">￥</text>
									{{ item.price | moneyFormat }}
								</view>
								<view class="item-time" v-if="item.service_length">时长：{{ item.service_length }}分钟</view>
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
					</view>
				</view>
				<view class="empty" v-show="!serviceData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无商品</view>
				</view>
				<nc-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false" ref="loading"></nc-loading>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-wrap" v-show="type == 'goods'" @scrolltolower="getGoods()">
				<view class="table-list" v-show="goodsData.list.length">
					<view
						class="table-item"
						:class="{ 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: goodsIds.indexOf(item.goods_id) != -1 }"
						v-for="(item, index) in goodsData.list"
						:key="index"
						@click="goodsSelect(item)"
					>
						<view class="item-name multi-hidden">{{ item.goods_name }}</view>
						<view class="item-info">
							<view class="item-img">
								<image
									:src="
										item.goods_image == 'public/uniapp/default_img/goods.png'
											? $util.img('public/uniapp/default_img/goods.png')
											: $util.img(item.goods_image.split(',')[0], { size: 'small' })
									"
									@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
									mode="widthFix"
								></image>
							</view>
							<view class="item-other">
								<view class="item-money">
									<text class="util">￥</text>
									{{ item.price | moneyFormat }}
								</view>
								<view class="item-stock">库存：{{ item.stock }}</view>
							</view>
						</view>
						<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
					</view>
				</view>
				<view class="empty" v-show="!goodsData.list.length">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无商品</view>
				</view>
				<nc-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false" ref="goodsLoading"></nc-loading>
			</scroll-view>

			<view class="table-pages" v-show="type == 'service' && serviceData.list.length">
				<uni-pagination :total="serviceData.total" :showIcon="true" @change="pageChange" :pageSize="serviceData.size" :value="serviceData.index" />
			</view>
			<view class="table-pages" v-show="type == 'goods' && goodsData.list.length">
				<uni-pagination :total="goodsData.total" :showIcon="true" @change="pageChange" :pageSize="goodsData.size" :value="goodsData.index" />
			</view>

			<view class="money-pages" v-show="type == 'money'">
				<view class="money-wrap">
					<view class="content-wrap">
						<view class="unit">￥</view>
						<input type="text" class="money" v-model="paymentMoney" />
					</view>
					<view class="keyboard-wrap">
						<view class="num-wrap">
							<view class="key-item" @click="keydown('1')">1</view>
							<view class="key-item" @click="keydown('2')">2</view>
							<view class="key-item" @click="keydown('3')">3</view>
							<view class="key-item" @click="keydown('4')">4</view>
							<view class="key-item" @click="keydown('5')">5</view>
							<view class="key-item" @click="keydown('6')">6</view>
							<view class="key-item" @click="keydown('7')">7</view>
							<view class="key-item" @click="keydown('8')">8</view>
							<view class="key-item" @click="keydown('9')">9</view>
							<view class="key-item" @click="keydown('00')">00</view>
							<view class="key-item" @click="keydown('0')">0</view>
							<view class="key-item" @click="keydown('.')">.</view>
						</view>
						<view class="operation-wrap">
							<view class="delete" @click="deleteCode">删除</view>
							<view class="delete" @click="paymentMoney = ''">清空</view>
							<view class="confirm" @click="paymentMoneyConfirm">确认</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="skuPopup" type="center">
			<view class="sku-wrap">
				<view class="header">
					<text class="title">选择</text>
					<text class="iconfont iconguanbi1" @click="$refs.skuPopup.close()"></text>
				</view>
				<view class="body">
					<scroll-view scroll-y="true">
						<view class="goods-info" v-if="skuinfo">
							<view class="image">
								<image
									:src="$util.img(skuinfo.sku_image, { size: 'small' })"
									@error="skuinfo.sku_image = $util.img('public/uniapp/default_img/goods.png')"
									mode="widthFix"
								></image>
							</view>
							<view class="info">
								<view class="multi-hidden">{{ skuinfo.goods_name }}</view>
								<view class="price">￥{{ skuinfo.price }} / {{ skuinfo.unit ? skuinfo.unit : '件' }}</view>
								<view>库存：{{ skuinfo.stock }}</view>
							</view>
						</view>
						<view v-for="(item, index) in goodsSpec" :key="index">
							<view class="spec">{{ item.spec_name }}</view>
							<view class="spec-value" v-if="!item.isWeigh">
								<view class="value-item" :class="{ active: spec.selected }" v-for="(spec, sindex) in item.value" :key="sindex" @click="skuSelect(spec.sku_id)">
									{{ spec.spec_value_name }}
								</view>
							</view>
							<view class="spec-value spec-value-form" v-else>
								<input type="number" class="spec-value-input" v-model="skuinfo.weigh" placeholder="请输入重量" />
								<text>{{ skuinfo.unit }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="footer"><button type="default" class="primary-btn" @click="skuConfirm" :disabled="skuinfo && skuinfo.stock == 0">确认</button></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'ncGoods',
	props: {
		goodsIds: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			type: 'goods',
			serviceCategory: [],
			serviceCategoryId: 'all',
			serviceData: {
				size: 12,
				index: 1,
				total: 0,
				list: []
			},
			goodsCategoryId: 'all',
			goodsCategory: [],
			goodsData: {
				size: 12,
				index: 1,
				total: 0,
				list: []
			},
			skuinfo: null,
			allsku: null,
			skuNo: '',
			searchText: '',
			itemNum: 3,
			mediaQueryOb: null,
			paymentMoney: ''
		};
	},
	created() {
		this.getServiceCategory();
		this.getGoodsCategory();
		this.getService();
		this.getGoods();
	},
	mounted() {
		this.mediaQueryOb = uni.createMediaQueryObserver(this);

		this.mediaQueryOb.observe(
			{
				maxWidth: 1300
			},
			matches => {
				if (matches) this.itemNum = 2;
			}
		);

		this.mediaQueryOb.observe(
			{
				minWidth: 1301,
				maxWidth: 1900
			},
			matches => {
				if (matches) this.itemNum = 3;
			}
		);

		this.mediaQueryOb.observe(
			{
				minWidth: 1901
			},
			matches => {
				if (matches) this.itemNum = 4;
			}
		);
	},
	methods: {
		getServiceCategory() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/service/category',
				success: res => {
					if (res.code == 0 && res.data) {
						this.serviceCategory = res.data;
					}
				}
			});
		},
		getGoodsCategory() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/goods/category',
				success: res => {
					if (res.code == 0 && res.data) {
						this.goodsCategory = res.data;
					}
				}
			});
		},
		getService() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/service/page',
				data: {
					page: this.serviceData.index,
					page_size: this.serviceData.size,
					category: this.serviceCategoryId,
					search_text: this.searchText,
					sku_no: this.skuNo,
					status: 1
				},
				success: res => {
					if (this.$refs.loading) this.$refs.loading.hide();
					if (res.code == 0) {
						this.serviceData.total = res.data.count;
						this.serviceData.list = res.data.list || [];
					}
				}
			});
		},
		getGoods() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/goods/page',
				data: {
					page: this.goodsData.index,
					page_size: this.goodsData.size,
					category: this.goodsCategoryId,
					search_text: this.searchText,
					sku_no: this.skuNo,
					goods_class: '1,6',
					status: 1
				},
				success: res => {
					if (this.$refs.goodsLoading) this.$refs.goodsLoading.hide();
					if (res.code == 0) {
						this.goodsData.total = res.data.count;
						this.goodsData.list = res.data.list || [];
					}
				}
			});
		},
		goodsSelect(data) {
			if (!data.stock) return;
			if (data.goods_spec_format || data.goods_class == 6) {
				this.$api.sendRequest({
					url: '/cashier/storeapi/goods/skulist',
					data: {
						goods_id: data.goods_id
					},
					success: res => {
						if (res.code == 0) {
							let obj = {};
							res.data.forEach(item => {
								item.goods_spec_format = JSON.parse(item.goods_spec_format);
								obj['sku_id_' + item.sku_id] = item;
							});
							this.allsku = obj;
							this.skuinfo = obj['sku_id_' + data.sku_id];
							this.$refs.skuPopup.open();
							// 兼容称重商品
							if (data.goods_class == 6) {
								let num = '';
								if (data.is_edit) {
									num = data.num;
									this.$set(this.skuinfo, 'is_edit', 1);
								}
								this.$set(this.skuinfo, 'weigh', num);
								Object.values(this.allsku).forEach((item, index) => {
									this.$set(item, 'weigh', num);
								});
							}
						}
					}
				});
			} else {
				this.$emit('select', data);
			}
		},
		skuSelect(sku_id) {
			this.skuinfo = this.allsku['sku_id_' + sku_id];
		},
		skuConfirm() {
			if (this.skuinfo.stock == 0) {
				this.$util.showToast({ title: '商品库存不足' });
				return;
			}
			if (this.skuinfo.goods_class == 6) {
				if (Number.parseFloat(this.skuinfo.weigh) <= 0 || !/^\d{0,10}(.?\d{0,3})$/.test(Number.parseFloat(this.skuinfo.weigh))) {
					this.$util.showToast({ title: '请输入合法的数值，数值要大于零且小数位不能超过三位' });
					return;
				}
				if (this.skuinfo.stock < this.skuinfo.weigh) {
					this.$util.showToast({ title: '商品库存不足' });
					return;
				}
			}

			this.$emit('select', this.skuinfo);
			this.$refs.skuPopup.close();
		},
		search() {
			// if (this.searchText == '') return;
			switch (this.type) {
				case 'service':
					this.serviceData.page = 0;
					this.$refs.loading.show();
					this.getService();
					break;
				case 'goods':
					this.goodsData.page = 0;
					this.$refs.goodsLoading.show();
					this.getGoods();
					break;
			}
		},
		destroyed() {
			this.mediaQueryOb.disconnect();
		},
		switchStoreAfter() {
			this.serviceCategory = [];
			this.serviceCategoryId = 'all';
			this.serviceData = {
				size: 12,
				index: 1,
				page: 0,
				total: 1,
				list: []
			};
			this.goodsCategoryId = 'all';
			this.goodsCategory = [];
			this.goodsData = {
				size: 12,
				index: 1,
				page: 0,
				total: 1,
				list: []
			};
			this.getServiceCategory();
			this.getGoodsCategory();
			this.getService();
			this.getGoods();
		},
		pageChange(e) {
			if (this.type == 'goods') {
				this.goodsData.index = e.current;
				this.getGoods();
			} else if (this.type == 'service') {
				this.serviceData.index = e.current;
				this.getService();
			}
		},
		switchItem(type) {
			this.type = type;
			if (this.type == 'goods') {
				this.goodsData.index = 1;
				this.getGoods();
			} else if (this.type == 'service') {
				this.serviceData.index = 1;
				this.getService();
			}
		},
		keydown(value) {
			let arr = this.paymentMoney.split('.');
			if (arr[1]) {
				if (value == '.' || arr[1].length == 2) return;
				if (value == '00' && arr[1].length == 1) value = '0';
			}
			if (parseFloat(this.paymentMoney + value) > 1000000) {
				this.$util.showToast({ title: '最大不能超过1000000' });
				return;
			}
			this.paymentMoney += value;
		},
		deleteCode() {
			this.paymentMoney = this.paymentMoney.substr(0, this.paymentMoney.length - 1);
		},
		paymentMoneyConfirm() {
			if (!this.paymentMoney.length) {
				this.$util.showToast({ title: '请输入收款金额' });
				return;
			}
			if (isNaN(parseFloat(this.paymentMoney)) || !/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(parseFloat(this.paymentMoney))) {
				this.$util.showToast({ title: '收款金额格式错误' });
				return;
			}
			if (this.paymentMoney <= 0) {
				this.$util.showToast({ title: '收款金额不能小于等于0' });
				return;
			}
			if (parseFloat(this.paymentMoney) > 1000000) {
				this.$util.showToast({ title: '最大不能超过1000000' });
				return;
			}
			this.$emit('select', {
				goods_id: parseInt(new Date().getTime() / 1000),
				sku_id: parseInt(new Date().getTime() / 1000),
				num: 1,
				money: parseFloat(this.paymentMoney)
			});
			this.paymentMoney = '';
		}
	},
	watch: {
		serviceCategoryId: function(nval) {
			this.serviceData.page = 0;
			this.$refs.loading.show();
			this.getService();
		},
		goodsCategoryId: function(nval) {
			this.goodsData.page = 0;
			this.$refs.goodsLoading.show();
			this.getGoods();
		},
		type: function() {
			this.searchText = '';
		}
	},
	computed: {
		goodsSpec() {
			if (this.allsku && this.skuinfo) {
				let data = [];
				if (this.skuinfo.goods_class != 6 || (this.skuinfo.goods_class == 6 && this.skuinfo.goods_spec_format)) {
					data = this.allsku['sku_id_' + this.skuinfo.sku_id].goods_spec_format;
				}

				if (this.skuinfo.goods_class == 6) {
					let obj = {
						spec_name: '称重',
						isWeigh: true
					};
					data.push(obj);
				}
				return data;
			}
			return [];
		}
	}
};
</script>

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

.header-operation {
	padding: 0.2rem 0;
	border-bottom: 0.01rem solid #e6e6e6;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.header-operation-left {
		display: flex;
		align-items: center;

		view {
			width: 1rem;
			height: 0.35rem;
			line-height: 0.35rem;
			text-align: center;
			font-size: 0.14rem;
			border: 0.01rem solid #e6e6e6;
			border-left-width: 0;
			transition: all 0.3s;
			cursor: pointer;

			&:hover,
			&.active {
				border-color: $primary-color;
				color: $primary-color;
				background-color: rgba($color: $primary-color, $alpha: 0.1);
				box-shadow: -0.01rem 0 0 0 $primary-color;
			}

			&:first-child {
				border-left-width: 0.01rem;
				box-shadow: none;
			}
		}
	}
	.header-operation-right {
		display: flex;
		align-items: center;
		input {
			background: #ffffff;
			border: 0.01rem solid #e6e6e6;
			border-radius: 0.02rem;
			height: 0.36rem;
			padding: 0 0.15rem;
			font-size: 0.14rem;
			&:first-child {
				margin-left: 0.1rem;
				margin-right: 0.1rem;
			}
		}
		.search-btn {
			width: 0.36rem;
			height: 0.36rem;
			background: #ffffff;
			border: 0.01rem solid #e6e6e6;
			border-radius: 0.02rem;
			border-left: 0;
			text-align: center;
			line-height: 0.36rem;
			cursor: pointer;
		}
	}
}

.content {
	position: relative;
	box-sizing: border-box;
	padding: 0.15rem 0;
	height: calc(100% - 0.78rem);
	transform: rotate(0);
	display: flex;
	flex-direction: row-reverse;
	.table-pages {
		display: flex;
		justify-content: flex-end;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 1.2rem;
		height: 0.6rem;
		background-color: #fff;
		z-index: 1;
	}
}

.type-switch {
	width: 1rem;
	margin-left: 0.1rem;
	font-size: 0.14rem;
	margin-bottom: 0.15rem;
	white-space: nowrap;
	border-left: 0.01rem solid #e6e6e6;
	padding-left: 0.1rem;
	/deep/ .uni-scroll-view-content {
		display: flex;
		flex-direction: column;
	}

	.switch-item {
		padding: 0.1rem 0.2rem;
		color: #303133;
		font-size: 0.14rem;
		cursor: pointer;
		display: inline-block;
	}
	.switch-item.active {
		background-color: rgba(133, 88, 250, 0.1);
		color: $primary-color;
	}
}

.list-wrap {
	position: relative;
	flex: 1;
	padding-bottom: 0.4rem;
}

.money-pages {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	.money-wrap {
		background: #fff;
		border-radius: 0.05rem;

		.head {
			height: 0.6rem;
			line-height: 0.6rem;
			text-align: center;
			font-weight: bold;
			position: relative;

			text {
				font-size: 0.16rem;
			}

			.iconguanbi1 {
				position: absolute;
				right: 0.15rem;
				font-size: 0.22rem;
				cursor: pointer;
			}
		}

		.content-wrap {
			display: flex;
			border: 0.01rem solid #e6e6e6;
			height: 0.6rem;
			align-items: center;
			margin: 0 0.2rem;
			padding: 0 0.15rem;

			.unit {
				font-size: 0.25rem;
			}

			.money {
				margin-left: 0.05rem;
				font-size: 0.2rem;
			}
		}

		.keyboard-wrap {
			width: 4rem;
			padding: 0 0.2rem 0.3rem 0.2rem;
			margin-top: 0.1rem;
		}
	}
}

.table-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.table-item {
		border: 0.01rem solid #e6e6e6;
		display: flex;
		flex-direction: column;
		width: 1.9rem;
		height: 1.15rem;
		padding: 0.1rem;
		box-sizing: border-box;
		margin-right: 0.1rem;
		margin-bottom: 0.1rem;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;

		&:hover {
			background-color: #eee;
		}
		.item-other {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 0.1rem;
		}

		.item-img {
			width: 0.5rem;
			height: 0.5rem;
			display: flex;
			align-items: center;
			overflow: hidden;
			image {
				width: 100%;
			}
		}
		.item-name {
			height: 0.38rem;
			margin-bottom: 0.05rem;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.item-info {
			cursor: pointer;
			flex: 1;
			display: flex;
			.item-time {
				font-size: 0.12rem;
				color: #909399;
			}
			.item-money {
				font-size: 0.14rem;
				color: #fe2278;
				line-height: 1;

				.util {
					font-size: 0.12rem;
				}
			}
		}

		.no-stock {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.5);
			cursor: not-allowed;

			image {
				height: 60%;
			}
		}

		&.active {
			border-color: $primary-color;
			background-color: $primary-color;
			color: #fff;

			.item-time,
			.item-money {
				color: #fff;
			}
		}
	}
}

.sku-wrap {
	display: flex;
	flex-direction: column;
	width: 7rem;
	height: 3.94rem;
	background-color: #fff;
	border-radius: 0.04rem;
	box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);

	.header,
	.footer {
		height: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 0.01rem solid #e6e6e6;
		position: relative;

		.title {
			font-size: 0.16rem;
			font-weight: bold;
		}

		.iconfont {
			line-height: 1;
			position: absolute;
			right: 0.15rem;
			font-size: 0.2rem;
			cursor: pointer;
		}
	}

	.body {
		flex: 1;
		padding: 0.15rem;
		scroll-view {
			height: 2.55rem;
		}
	}

	.spec {
		line-height: 0.35rem;
		font-weight: bold;
		margin-top: 0.1rem;
	}

	.spec-value {
		.value-item {
			display: inline-block;
			height: 0.3rem;
			line-height: 0.3rem;
			background-color: #fff;
			color: #333;
			border: 0.01rem solid #e6e6e6;
			margin: 0.05rem 0.1rem 0 0;
			padding: 0 0.1rem;
			cursor: pointer;
			transition: all 0.3s;
			border-radius: 0.04rem;

			&:hover,
			&.active {
				background: rgba($color: $primary-color, $alpha: 0.1);
				border-color: $primary-color;
				color: $primary-color;
			}
		}
	}
	.spec-value-form {
		display: flex;
		align-items: center;
		.spec-value-input {
			margin-right: 0.05rem;
			border-width: 0.01rem;
			border-style: solid;
			background-color: #fff;
			color: rgba(0, 0, 0, 0.85);
			border-radius: 0.02rem;
			padding-left: 0.1rem;
			height: 0.38rem;
			line-height: 0.38rem;
			font-size: 0.14rem;
			border-color: #e6e6e6;
			border-radius: 0.02rem;
			width: 3rem;
		}
	}

	.goods-info {
		display: flex;

		.image {
			width: 0.7rem;
			height: 0.7rem;
			margin-right: 0.1rem;
			flex-shrink: 0;
			overflow: hidden;

			image {
				width: 100%;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.price {
				line-height: 1;
				margin-top: 0.05rem;
			}
		}
	}

	.footer {
		border: 0;
		height: 0.6rem;
		button {
			width: 95%;
		}
	}
}

.empty {
	text-align: center;
	padding-top: 1.2rem;

	image {
		width: 2rem;
	}

	.tips {
		color: #999;
		margin-top: 0.15rem;
	}
}
</style>