Delivery-merchant/pages/Addstores.vue

<template>
	<view class="titlenav">
		<view class="top">
			<!-- <titlenav :flag="true"></titlenav> -->
			<view>
				<view class="title">商品管理</view>
				<view class="search">
					<image class="sousuo" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-09-53-26QAqibCrM.png" mode=""></image>
					<view class="placeholder">搜索</view>
				</view>
				<u-tabs :current="tab" active-color="#ffffff" inactive-color="#ffffffcc" :list="tabs" :bg-color="$colors.prim" :is-scroll="false" @change="changeTab"></u-tabs>
			</view>
		</view>
		<view class="content">
			<view class="tabs">
				<view class="tab" :class="{ active: item === active }" v-for="(item, index) in tabs2" :key="index" @click="change(item)">{{ item }}</view>
			</view>
			<view class="storeCon" v-if="status">
				<view class="merchantroCon" v-for="(item, index) in merchantorListsData" :key="index">
					<image
						v-if="show"
						style="width:24px;height:24px;margin-left:5px;"
						:src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${list.includes(item.id) ? '2021-09-29-15-24-20LcnkHdXx.png' : '2021-09-02-14-49-00OrkCuHPB.png'}`"
						@click="pushId(item.id)"
						mode=""
					></image>
					<image class="img" :src="item.image" mode=""></image>
					<view>
						<view class="text1">{{ item.name }}</view>
						<view class="text2">月销226&nbsp;&nbsp; 库存30/60</view>
						<view class="price" v-if="tab != 2">¥20.00</view>
						<view class="price" v-if="tab == 2 && show == false">库存不足</view>
						<view class="addcon" v-if="tab == 2 && show == true">
							<view>
								<img
									class="add"
									:src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${item.currentNum ? '2021-09-29-14-52-08uxMdZpar.png' : '2021-09-29-14-52-26BrhdOJqT.png'}`"
									alt=""
									@click="minus(item)"
								/>
							</view>
							<view class="text">{{ item.currentNum }}</view>
							<view><img class="add" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-14-51-44FFpxEAAP.png" alt="" @click="add(item)" /></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" v-if="!show">
			<view class="bottom" @click="navigateTo('/pages/Storeclassification')">
				<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-10-32-11ViwbrsTU.png" mode=""></image>
				<view class="name">分类管理</view>
				<text class="border"></text>
			</view>
			<view class="bottom" @click="show = true">
				<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-10-32-33BsbfsGzW.png" mode=""></image>
				<view class="name">批量操作</view>
				<text class="border"></text>
			</view>
			<view class="bottom" @click="navigateTo('/pages/Addcommodity')">
				<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-29-10-32-52ObSGBFre.png" mode=""></image>
				<view class="name">新增商品</view>
			</view>
		</view>
		<view class="btn" v-else>
			<u-button block class="btn2" @click="dele">删除</u-button>
			<u-button block class="btn2" @click="show = false">完成</u-button>
			<u-button block type="primary" @click="submit">{{ !Tab ? '上架出售' : '下架出售' }}</u-button>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
import { merchantorLists } from '../mock/merchantorList.js';
export default {
	components: { Titlenav },
	data() {
		return {
			tab: 0,
			show: false,
			list: [],
			merchantorListsData: [],
			tabs: [{ name: '出售中' }, { name: '未上架' }, { name: '已售磬' }],
			form: {},
			tabs2: ['热销', '清新素粥'],
			active: '热销'
		};
	},
	created() {
		merchantorLists.forEach(item => {
			// 数量
			item.currentNum = 0;
			this.merchantorListsData.push(item);
		});
	},
	computed: {
		...mapState(['systemInfo']),
		status() {
			if (this.active == '热销') {
				return true;
			} else {
				return false;
			}
		},
		Tab() {
			if (this.tab == 0) {
				return true;
			} else {
				return false;
			}
		}
	},
	methods: {
		changeTab(index) {
			this.tab = index;
		},
		change(e) {
			this.active = e;
		},
		checkId(id) {
			return this.list.includes(id);
		},
		pushId(id) {
			if (this.checkId(id)) {
				this.list.splice(this.list.indexOf(id), 1);
			} else {
				this.list.push(id);
			}
		},
		submit() {
			if (this.tab == 0) {
				console.log(111);
			} else if (this.tab == 1) {
				console.log(222);
			} else {
				console.log(333);
			}
		},
		add(item) {
			item.currentNum++;
		},
		minus(item) {
			if (item.currentNum != 0) {
				item.currentNum--;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.titlenav {
	background: #214bbe;
	.top {
		// position: sticky;
		// z-index: 999;
		// top: 80px;
		background: #214bbe;
		padding-bottom: 10px;
		.title {
			font-size: 22px;
			font-weight: bold;
			color: #ffffff;
			line-height: 26px;
			padding: 10px 0 16px 20px;
		}
		.search {
			height: 32px;
			background: rgb(69, 116, 204);
			border-radius: 16px;
			margin: 0 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			.placeholder{
				font-size: 14px;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 24px;
			}
			.sousuo {
				width: 16px;
				height: 16px;
				margin-right: 8px;
			}
		}
	}
	.content {
		background: #ffffff;
		border-radius: 16px 16px 0px 0px;
		padding: 0px 20px;
		display: flex;
		.tabs {
			width: 80px;
			min-height: 100vh;
			background: #f2f3f5;
			border-radius: 16px 0px 0px 0px;
			font-size: 13px;
			margin-left: -20px;
			font-weight: 400;
			padding-top: 16px;
			text-align: center;
			color: #939599;
			.tab {
				height: 34px;
				line-height: 34px;
				&.active {
					color: #000000;
					font-weight: bold;
					height: 34px;
					background: #ffffff;
					line-height: 34px;
				}
			}
		}
		.storeCon {
			.merchantroCon {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
				margin-top: 16px;
				.img {
					width: 80px;
					height: 80px;
					border-radius: 8px;
					margin: 0 10px;
				}
				.text1 {
					font-size: 16px;
					font-weight: 400;
					color: #000000;
					line-height: 24px;
				}
				.text2 {
					font-size: 13px;
					font-weight: 400;
					color: #939599;
					line-height: 24px;
					margin-bottom: 6px;
				}
				.price {
					font-size: 14px;
					font-weight: bold;
					color: #ff7f1f;
					line-height: 24px;
				}
				.addcon {
					display: flex;
					align-items: center;
					.text {
						width: 24px;
						height: 24px;
						text-align: center;
						line-height: 24px;
						background: #f5f7fa;
						margin: 0 4px;
					}
					.add {
						width: 24px;
						height: 24px;
						margin-top: 4px;
						line-height: 24px;
					}
				}
			}
		}
	}
	/deep/ .u-btn {
		width: 100px;
		height: 48px;
		font-size: 16px;
		border-radius: 4px;
	}
	.btn {
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: space-between;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 6px 20px;
		padding-bottom: 34px;
		padding-bottom: calc(34px + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2
		padding-bottom: calc(34px + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2
		background-color: #ffffff;
		.btn2 {
			color: #214bbe;
			text-align: center;
		}
		.bottom {
			display: flex;
			align-items: center;
			padding: 12px 0 6px;
			.name {
				font-size: 16px;
				font-weight: bold;
				color: #214bbe;
				line-height: 24px;
				margin-left: 4px;
			}
			.imgBox {
				width: 24px;
				height: 24px;
			}
			.border {
				width: 1px;
				height: 30px;
				background: #e5e5e5;
				border-radius: 1px;
				margin-left: 14px;
			}
		}
	}
}
</style>