商品管理

pages/product/creatProduct.vue

@@ -7,7 +7,7 @@
 			</view>
 		</view>
 		<view class="content">
-			<view class="form" v-if="schedule ==1">
+			<view class="form" v-show="schedule ==1">
 				<view class="titl">
 					基础信息
 				</view>
@@ -81,7 +81,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="form" v-if="schedule == 2">
+			<view class="form" v-show="schedule == 2">
 				<view class="titl ">
 					售卖/使用信息
 				</view>
@@ -89,8 +89,8 @@
 					<view class="label">
 						售卖时间<span>*</span>
 					</view>
-					<view class="picker set inp" @click="isSelectDate = true">
-						去设置
+					<view class="picker set inp" @click="selectDate">
+						<u-input placeholder="去设置" v-model="showDate" @click="selectDate" />
 						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
 					</view>
 				</view>
@@ -99,7 +99,7 @@
 						库存<span>*</span>
 					</view>
 					<view class="picker set">
-						<u-input v-model="form.productName" placeholder="输入库存数量" />
+						<u-input type="number" v-model="form.stockQuantity" placeholder="输入库存数量" />
 					</view>
 				</view>
 				<view class="item">
@@ -107,8 +107,14 @@
 						可用时间<span>*</span>
 					</view>
 					<view class="picker set">
-						去设置
-						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
+						<view class="picker set inp" @click="setUsable" v-if="showSellDate == ''">
+							<u-input placeholder="去设置" />
+							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
+						</view>
+						<view class="picker set inp" @click="setUsable" v-else>
+							{{showSellDate}}
+							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
+						</view>
 					</view>
 				</view>
 				<view class="item">
@@ -116,7 +122,7 @@
 						需要预约<span>*</span>
 					</view>
 					<view class="picker set">
-						<u-switch v-model="form.checked" style="margin-left:8rpx;" size="28"></u-switch>
+						<u-switch v-model="makeChecked" style="margin-left:8rpx;" size="28"></u-switch>
 					</view>
 				</view>
 				<view class="item">
@@ -138,10 +144,10 @@
 						使用说明
 					</view>
 					<view class="textarea">
-						<u-input v-model="form.num" type="textarea" placeholder="输入库存数量" maxlength="500" />
+						<u-input v-model="form.instructions" type="textarea" placeholder="输入库存数量" maxlength="500" />
 					</view>
 					<view class="num">
-						0/500
+						{{form.instructions.length}}/500
 					</view>
 				</view>
 			</view>
@@ -154,12 +160,12 @@
 				<view class="back" @click="schedule-=1">
 					上一步
 				</view>
-				<view class="submit">
+				<view class="submit" @click="submit">
 					提交审核
 				</view>
 			</view>
 		</view>
-		<DateSelector @confirm="handleConfirm" @close="closeSelectDate" v-if="isSelectDate" />
+		<rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" />
 		<refund v-if="isRefund" @confirm="saveFound" @close="cutRule" />
 		<view class="popup" v-if="isSelectType">
 			<view class="model">
@@ -198,16 +204,20 @@
 </template>
 
 <script>
-	// import DateSelector from '@/components/product/select_date.vue'
+	import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
 	import refund from '@/components/product/refund.vue'
 	export default {
 		components: {
-			// DateSelector,
+			rangTime,
 			refund
 		},
 		data() {
 			return {
+				mode: 1,
 				form: {
+					instructions: '',
+					preBook: 0,
+					merchantId: null
 					// categoryId:'',
 					// productName: '',
 					// productImage: '',
@@ -219,7 +229,7 @@
 				fmImageList: [], //封面图
 				xqImage: [], //详情图
 				showRule: '', //显示退款规则文字
-				action: 'http://192.168.0.52:8080/jeecg-boot/sys/common/upload', //图片上传地址
+				action: 'http://192.168.0.36:8080/jeecg-boot/sys/common/upload', //图片上传地址
 				schedule: 1, //进度
 				fileList: [],
 				selectedTime: null,
@@ -234,7 +244,11 @@
 				currentRight: 0, //三级选中
 				productType: [], //选中的商品分类id
 				selectTypeList: [], //选中的商品分类名称
-				showText: ''
+				showText: '',
+				showDate: '',
+				showSellDate: '',
+				makeChecked: false,
+				imageHttp:'http://192.168.0.36:8080/jeecg-boot/'//上传图片前缀
 			}
 		},
 		methods: {
@@ -247,7 +261,7 @@
 					files = this.$refs.uUpload.lists.filter(val => {
 						return val.progress == 100;
 					})
-					this.form.productImage = files[0].response.message
+					this.form.productImage =this.imageHttp + files[0].response.message
 				}
 				// 详情图处理
 				if (this.$refs.dUpload.lists.length > 0) {
@@ -258,12 +272,12 @@
 					})
 					let temp = []
 					files.map(item => {
-						temp.push(item.response.message)
+						temp.push(this.imageHttp+item.response.message)
 					})
 					this.form.detailImages = temp.join(',')
 				}
 				//基础信息必填提示
-					console.log(this.form)
+				console.log(this.form)
 				if (!this.form.categoryId) {
 					uni.showToast({
 						title: '请选择商品分类',
@@ -299,16 +313,16 @@
 					});
 					return
 				}
-				if (!this.form.detailImages) {
+				if (!this.form.soldPrice) {
 					uni.showToast({
 						title: '请输入商品售价',
 						icon: 'none'
 					});
 					return
-				}else{
+				} else {
 					this.schedule += 1
 				}
-			
+
 			},
 			// 跳转至组合商品页
 			goGroup() {
@@ -318,9 +332,9 @@
 			},
 			//返回
 			back() {
-				uni.navigateBack({
-					delta: 1
-				});
+				uni.navigateTo({
+					url: '/pages/product/index'
+				})
 			},
 			// 处理 confirm 事件，接收子组件传递的时间段数据
 			handleConfirm(time) {
@@ -338,12 +352,6 @@
 					url: '/pages/product/usable'
 				})
 			},
-			//跳转至预约规则
-			setRule() {
-				uni.navigateTo({
-					url: '/pages/product/rule'
-				})
-			},
 			// 保存退款规则
 			saveFound(rules) {
 				console.log(rules)
@@ -443,6 +451,56 @@
 			//关闭选择分类弹窗
 			closePopup() {
 				this.isSelectType = false
+			},
+			selectDate() {
+				// this.isSelectDate = true
+				this.$refs.rangTime.open()
+			},
+			onEndTimeChange(val) {
+				this.form.saleStartDate = val.startDate
+				this.form.saleEndDate = val.endDate
+				console.log(this.form.saleStartDate, this.form.saleEndDate)
+				this.showDate = val.startDate + '-' + val.endDate
+				this.$forceUpdate(); // 强制刷新视图
+			},
+			//提交审核
+			submit() {
+				this.makeChecked ? this.form.preBook = 1 : this.form.preBook = 0
+				if (!this.form.saleStartDate) {
+					uni.showToast({
+						title: '请设置售卖时间',
+						icon: 'none'
+					});
+					return
+				} else if (!this.form.stockQuantity) {
+					uni.showToast({
+						title: '请输入商品库存',
+						icon: 'none'
+					});
+					return
+				} else if (!this.form.availableEndDate && !this.form.expirationDays) {
+					uni.showToast({
+						title: '请选择可用时间',
+						icon: 'none'
+					});
+					return
+				} else {
+					this.$http.post("/app/product/add", this.form).then(res => {
+						if (res.data.code == 200) {
+							uni.showToast({
+								title: '添加成功',
+								icon: 'none'
+							});
+						}
+						uni.removeStorage({
+							key: 'smdate',
+						});
+						uni.removeStorage({
+							key: 'group',
+						});
+						// this.back()
+					})
+				}
 			}
 		},
 		mounted() {
@@ -452,11 +510,38 @@
 			if (options.data) {
 				let objStr = decodeURIComponent(options.data); // 获取并解码参数
 				let obj = JSON.parse(objStr); // 将字符串转换回对象
-
 				this.form.productGroups = obj
-				console.log(this.form.productGroups); 
+				console.log(this.form.productGroups);
 			}
-
+		},
+		onShow() {
+			let that = this
+			uni.getStorage({
+				key: 'login_user_info',
+				success: function(res) {
+					that.form.merchantId = res.data.id
+				}
+			})
+			uni.getStorage({
+				key: 'smdate',
+				success: function(res) {
+					if (res.data.availableEndDate) {
+						that.showSellDate = res.data.availableStartDate + '-' + res.data.availableEndDate
+						that.form.availableStartDate = res.data.availableStartDate
+						that.form.availableEndDate = res.data.availableEndDate
+
+					} else if (res.data.expirationDays) {
+						that.form.expirationDays = res.data.expirationDays
+						that.showSellDate = res.data.expirationDays
+					}
+				}
+			})
+			uni.getStorage({
+				key: 'group',
+				success: function(res) {
+					that.form.productGroups = res.data
+				}
+			})
 		}
 	}
 </script>

pages/product/details.vue

@@ -1,109 +1,105 @@
 <template>
 	<view class="details">
 		<view class="head">
-			<span class="cuIcon-back" @click="back"></span>
+			<view class="head_left">
+				<span class="cuIcon-back" @click="back"></span>
+			</view>
 			<view class="case">
 				商品详情
 			</view>
 		</view>
 		<view class="center">
-
-
-			<view class="title">
-				基本信息
-			</view>
-			<view class="data">
-				商品名称：<span>{{name}}</span>
-			</view>
-			<view class="data">
-				所属分类：<span>{{type}}</span>
-			</view>
-			<view class="img_box">
-				<view class="img" v-for="(item,index) in iamgeList" :key="index">
-					<image :src="item.url" mode=""></image>
+			<view class="box">
+				<view class="title">
+					基本信息
 				</view>
-			</view>
-			<view class="data">
-				所属分类：<span>￥{{oldPrice}}</span>
-			</view>
-			<view class="data">
-				所属分类：<span>￥{{price}}</span>
-			</view>
-			<view class="particulars">
-				<view class="content">
-					<view class="item" v-for="(item,index) in particularsList" :key="index">
-						<view class="item_title">
-							{{item.title}}
-						</view>
-						<view class="item_row" v-for="(row,index) in item.list" :key="index">
-							<span>{{row.name}} </span>
-							<span>{{row.num}}次</span>
-							<span>￥{{row.price}}</span>
+				<view class="data">
+					<span class="span">商品分类</span>{{form.productCategory}}
+				</view>
+				<view class="data">
+					<span class="span">商品名称</span>{{form.productName}}
+				</view>
+
+				<view class="img_box">
+					<span class="line">商品封面图</span>
+					<view class="img_list">
+						<view class="img">
+							<image :src="form.productImage" mode=""></image>
 						</view>
 					</view>
 				</view>
-			</view>
-			<view class="title">
-				售卖/使用信息
-			</view>
-			<view class="data">
-				售卖时间：<span>{{name}}</span>
-			</view>
-			<view class="data">
-				库存：<span>{{name}}</span>
-			</view>
-			<view class="data">
-				可用时间：<span>{{name}}</span>
-			</view>
-			<view class="title">
-				预约规则
-			</view>
-			<view class="data">
-				需要预约：<span>{{name}}</span>
-			</view>
-			<view class="particulars">
-				<view class="content">
-					<view class="hint">
-						可预约时间
+				<view class="img_box">
+					<span class="line">商品详情图</span>
+					<view class="img_list">
+						<view class="img" v-for="(item,index) in detailImages" :key="index">
+							<image :src="item" mode=""></image>
+						</view>
 					</view>
-					<view class="item" v-for="(item,index) in timeList" :key="index">
-						{{item.date}}{{item.time}}
+				</view>
+
+				<view class="data">
+					<span class="span">原价</span>{{form.price}}
+				</view>
+				<view class="data">
+					<span class="span">实际售价</span>{{form.soldPrice}}
+				</view>
+
+				<view class="particulars">
+					组合套餐
+					<view class="content">
+						<view class="item" v-for="(item,index) in form.productGroups" :key="item.groupId">
+							<view class="item_title">
+								{{item.groupName}}
+							</view>
+							<view class="item_row" v-for="(row,index) in item.singleProduct" :key="index">
+								<view class="name">{{row.productName}} </view>
+								<view class="price">
+									{{row.quantity}}{{row.unit}}/{{row.price}}元
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
-			<view class="data">
-				必要信息填写：<span>姓名 手机号</span>
-			</view>
-			<view class="particulars">
-				<view class="content">
-					<view class="hint">
-						其他填写项
+			<view class="box rule">
+				<view class="title">
+					售卖/使用信息
+				</view>
+				<view class="data">
+					<span class="span">售卖时间</span>{{form.saleStartDate.slice(0,10)}}-{{form.saleEndDate.slice(0,10)}}
+				</view>
+				<view class="data">
+					<span class="span">库存</span>{{form.stockQuantity}}
+				</view>
+				<view class="data">
+					<span class="span">可用时间</span>
+					<view class="" v-if="form.availableStartDate">
+						{{form.availableStartDate.slice(0,10)}}-{{form.availableEndDate.slice(0,10)}}
 					</view>
-					<view class="item" v-for="(item,index) in timeList" :key="index">
-						{{item.date}}
+					<view class="">
+						购买后{{form.expirationDays}}天失效
 					</view>
 				</view>
-			</view>
-			<view class="rule">
-				<view class="headline">
-					退款规则
+				<view class="data">
+					<span class="span">需要预约</span>{{form.preBook==0?'不需要预约':'需要预约'}}
 				</view>
-				<view class="rule_item">
-					<view class="item" v-for="(item,index) in ruleList" :key="index">
-						{{item.name}}
+				<view class="data">
+						退款规则
+					<view class="rule_item">
+						<view class="item" v-for="(item,index) in ruleList" :key="index">
+							{{item.name}}
+						</view>
+					</view>
+				</view>
+				<view class="img_box">
+					<span class="line">使用说明</span>
+					<view class="text_area">
+						{{form.instructions}}
 					</view>
 				</view>
-			</view>
-			<view class="title">
-				图文详情
-			</view>
-			<view class="banner">
-				<image src="/static/blue.png" mode=""></image>
 			</view>
 		</view>
-		<view class="edit">
-			<span>编辑</span>
-		</view>
+
 	</view>
 </template>
 
@@ -111,102 +107,33 @@
 	export default {
 		data() {
 			return {
-				name: '半价前挡玻璃除油膜套餐（仅限轿车使用SUV，MVP车辆均不可用）',
-				type: '分类',
-				iamgeList: [{
-						url: '/static/blue.png'
-					},
-					{
-						url: '/static/blue.png'
-					},
-					{
-						url: '/static/blue.png'
-					},
-					{
-						url: '/static/blue.png'
-					},
-				],
+				form: {},
+				detailImages: [],
 				oldPrice: 300,
 				price: 280,
-				particularsList: [{
-						title: '外观处理',
-						list: [{
-								name: '全车精洗',
-								num: 1,
-								price: 120.00
-							},
-							{
-								name: '全车精洗',
-								num: 1,
-								price: 120.00
-							},
-							{
-								name: '全车精洗',
-								num: 1,
-								price: 120.00
-							},
-						]
-					},
-					{
-						title: '挡风除膜处理',
-						list: [{
-								name: '玻璃抛光',
-								num: 1,
-								price: 120.00
-							},
-							{
-								name: '玻璃除膜',
-								num: 1,
-								price: 120.00
-							}
-						]
-					}
-				],
-				timeList: [{
-						date: '星期日',
-						time: '09.00-18.00'
-					},
-					{
-						date: '星期一',
-						time: '09.00-18.00'
-					},
-					{
-						date: '星期二',
-						time: '09.00-18.00'
-					},
-					{
-						date: '星期三',
-						time: '09.00-18.00'
-					},
-					{
-						date: '星期四',
-						time: '09.00-18.00'
-					},
-					{
-						date: '星期五',
-						time: '09.00-18.00'
-					},
-					{
-						date: '星期六',
-						time: '09.00-18.00'
-					},
-				],
-				ruleList: [{
-						name: '随时退'
-					},
-					{
-						name: '过期自动退'
-					}
-				]
+				ruleList: [],
+				productId:'',
+				imageHttp:'http://192.168.0.36:8080/jeecg-boot/'
 			}
 		},
-		methods:{
+		methods: {
 			//返回
-			back(){
+			back() {
 				uni.navigateBack({
-					 delta: 1
+					delta: 1
 				});
 			},
+		},
+		onLoad(options) {
+			this.productId = options.productId
+			this.$http.get("/app/product/queryById?id=" + this.productId, {}).then(res => {
+				console.log(res)
+				if (res.data.code == 200) {
+					this.form = res.data.result
+					this.detailImages = res.data.result.detailImages.split(',')
+					console.log(this.detailImages)
+				}
+			})
 		}
 	}
 </script>
@@ -218,53 +145,95 @@
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
+		background: #F7F8FC;
+
 		.head {
 			width: 100%;
 			padding: 20rpx;
+			background-color: #fff;
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
-			background-color: #fff;
+			position: relative;
 
-			.cuIcon-back {
+			.head_left {
 				font-size: 40rpx;
-				margin-right: 40rpx;
+			}
+
+			.case {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				font-size: 36rpx;
+				font-weight: 600;
 			}
 		}
-		.center{
+
+		.center {
 			flex: 1;
 			overflow-y: auto;
+			padding: 21rpx 24rpx;
+
+			.box {
+				width: 100%;
+				padding: 16rpx;
+				background-color: #fff;
+				border-radius: 16rpx;
+			}
 		}
 
 		.title {
 			width: 100%;
 			font-weight: 600;
-			padding: 20rpx;
-			background-color: #fff;
-			border-top: 1px solid #ccc;
+			margin-bottom: 32rpx;
 		}
 
 		.data {
+			min-height: 58rpx;
 			display: flex;
 			align-items: center;
-			padding: 20rpx;
-			background-color: #fff;
-			border-top: 1px solid #ccc;
-
-			span {
-				flex: 1;
-				// width: 80%;
-				display: block;
+			border-bottom: 1px solid #EEEEEE;
+			padding-bottom: 16rpx;
+			margin-top: 16rpx;
+			font-size: 28rpx;
+			.span {
+				display: inline-block;
+				margin-right: 20rpx;
+				min-width: 112rpx;
+				font-size: 28rpx;
+				color: #666666;
 			}
+
 		}
 
 		.img_box {
-			display: flex;
-			justify-content: space-around;
-			margin-top: 20rpx;
+			border-bottom: 1px solid #EEEEEE;
+			padding-bottom: 16rpx;
 
-			image {
-				width: 140rpx;
-				height: 140rpx;
+			.line {
+				display: block;
+				font-size: 28rpx;
+				color: #666666;
+				margin: 16rpx 0px;
+			}
+
+			.img_list {
+				display: flex;
+				flex-wrap: wrap;
+				// justify-content: space-between;
+				gap: 27rpx;
+				.img {
+					 flex: 0 0 calc(25% - 27rpx);
+					height: 140rpx;
+					border-radius: 12rpx;
+					overflow: hidden;
+
+					image {
+						width: 140rpx;
+						height: 140rpx;
+					}
+				}
 			}
 		}
 
@@ -273,22 +242,38 @@
 			margin-top: 20rpx;
 
 			.content {
-				width: 95%;
+				width: 100%;
 				padding: 20rpx;
-				margin: 0 auto;
-				background-color: #fff;
+				background: #F7F8FC;
+				border-radius: 8rpx;
+				margin-top: 16rpx;
+				padding-top: 0px;
+				overflow: hidden;
 
 				.item {
+					margin-top: 16rpx;
+
 					.item_title {
 						font-weight: 600;
 						font-size: 26rpx;
-						margin: 20rpx 0px;
 					}
 
 					.item_row {
 						width: 100%;
-						display: flex;
-						justify-content: space-between;
+
+						.name {
+							font-size: 26rpx;
+							margin-top: 16rpx;
+							margin-bottom: 4rpx;
+							color: #333333;
+							line-height: 30rpx;
+						}
+
+						.price {
+							font-size: 24rpx;
+							color: #888888;
+							line-height: 28rpx;
+						}
 					}
 				}
 

pages/product/group.vue

@@ -73,13 +73,13 @@
 						名称<u-input v-model="singleProduct.productName" placeholder="请输入单品名称" />
 					</view>
 					<view class="single">
-						数量<u-input v-model="singleProduct.quantity" placeholder="请输入数量" />
+						数量<u-input type="number" v-model="singleProduct.quantity" placeholder="请输入数量" />
 					</view>
 					<view class="single">
 						单位<u-input v-model="singleProduct.unit" placeholder="请输入单位" />
 					</view>
 					<view class="single">
-						价格<u-input v-model="singleProduct.price" placeholder="请输入价格" />
+						价格<u-input type="number" v-model="singleProduct.price" placeholder="请输入价格" />
 					</view>
 				</view>
 				<view class="btn">
@@ -177,11 +177,25 @@
 			//保存
 			save(){
 				// console.log(this.groupList)
-				let objStr = JSON.stringify(this.groupList);
-				uni.navigateTo({
-					url: `/pages/product/creatProduct?data=${encodeURIComponent(objStr)}`
+				// let objStr = JSON.stringify(this.groupList);
+				// uni.navigateTo({
+				// 	url: `/pages/product/creatProduct?data=${encodeURIComponent(objStr)}`
+				// })
+				uni.setStorage({
+					key:'group',
+					data:this.groupList
 				})
+				this.back()
 			}
+		},
+		onShow() {
+			let that = this
+			uni.getStorage({
+				key: 'group',
+				success: function(res) {
+					that.groupList = res.data
+				}
+			})
 		}
 	}
 </script>

pages/product/index.vue

@@ -7,30 +7,39 @@
 				</view>
 				<span class="center">商品管理</span>
 				<view class="head_right">
-					<span class="cuIcon-search" @click="goSearch"></span>
+					<!-- <span class="cuIcon-search" @click="goSearch"></span> -->
 					<view class="manage" @click="manage">
 						{{isManage?'退出管理':'管理'}}
 					</view>
 				</view>
 			</view>
-
+			<view class="search">
+				<span class="cuIcon-search"></span>
+				<!-- <input @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入关键词" confirm-type="search"> -->
+				<u-input v-model="productName" />
+				</input>
+				<view class="search_btn" @click.stop="getProductList">
+					<span></span>搜索
+				</view>
+			</view>
 			<view class="type">
 				<view class="type_item" :class="currentIndex == index?'active':''" v-for="(item,index) in typeList" :key="index"
 					@click="selectType(item,index)">
-					{{item.type}}({{item.num}})
+					{{item.type}}
 					<span class="line" v-if="currentIndex == index"></span>
 				</view>
 			</view>
 		</view>
-
 		<view class="list">
 			<view class="product_item" v-for="(item,index) in productList" :key="index" @click="goDetails(item)">
 				<view class="status">
 					<span class="round" v-if="item.productStatus =='1'">售卖中</span>
 					<span class="round no" v-if="item.productStatus =='0'" style="color:#666666 ;">未上架</span>
+					<span class="audit " v-if="item.productStatus =='2'" style="color:#596ABB ;">审核中</span>
+					<span class="reject " v-if="item.productStatus =='3'" style="color:#F55D65 ;">未通过</span>
 					<span class="line"></span>
 					<span v-if="item.saleStartDate">{{item.saleStartDate.slice(0,10)}}-{{item.saleEndDate.slice(0,10)}}</span>
-					
+
 					<!-- <span>已售：{{item.num}}</span>
 					<span>库存：{{item.inventory}}</span> -->
 				</view>
@@ -55,7 +64,7 @@
 					</view>
 				</view>
 				<view class="btn_box">
-					<view class="delist">
+					<view class="delist" @click.stop="delist(item)">
 						下架
 					</view>
 					<view class="edit delist">
@@ -72,7 +81,7 @@
 					全选
 				</view>
 				<view class="delete">删除</view>
-				<view class="delete delist">下架</view>
+				<view class="delete delist" @click="deletes">下架</view>
 			</view>
 			<view class="btn" @click="creatProduct" v-else>
 				<image src="/static/product/product.png" mode=""></image>
@@ -111,28 +120,32 @@
 			return {
 				isManage: false,
 				currentIndex: 0,
-				productStatus:0,//商品状态，默认1售卖中，0未上架,2审核中，3未通过
+				productStatus: 0, //商品状态，默认1售卖中，0未上架,2审核中，3未通过
 				isAll: false,
 				isDelete: false,
 				canBeDelete: true,
-				typeList: [{
-						type: '售卖中',
-						num: 21
-					},
+				productName: '',
+				typeList: [
 					{
 						type: '待上架',
-						num: 8
+						productStatus: 0
 					},
+					{
+							type: '售卖中',
+							productStatus: 1
+						},
 					{
 						type: '审核中',
-						num: 0
+						productStatus: 2
 					},
 					{
 						type: '未通过',
-						num: 6
+						productStatus: 3
 					}
 				],
-				productList: []
+				productList: [],
+				merchantId: '',
+				productHandleList: []
 			}
 		},
 		methods: {
@@ -142,9 +155,18 @@
 					delta: 1
 				});
 			},
+			handleClear() {
+				this.getProductList()
+				// 这里可以添加其他逻辑
+			},
 			//切换分类
 			selectType(item, index) {
-				this.currentIndex = index
+				if (!this.isManage) {
+					this.currentIndex = index
+					this.productStatus = item.productStatus
+					this.getProductList()
+				}
+
 			},
 			//是否管理商品
 			manage() {
@@ -159,7 +181,7 @@
 			//跳转至详情
 			goDetails(item) {
 				uni.navigateTo({
-					url: '/pages/product/details'
+					url: '/pages/product/details?productId=' + item.productId
 				})
 			},
 			//跳转至创建商品
@@ -170,9 +192,41 @@
 			},
 			select(item) {
 				item.select = !item.select
+				this.productHandleList.push(item.productId)
+			},
+			//批量下架
+			deletes(){
+					let shelves = []
+				this.productHandleList.forEach(item=> {
+					shelves.push({
+						productId:item.productId,
+						productStatus:0
+					})
+				})
+				let that = this
+				uni.showModal({
+					title: '确定下架商品',
+					success: function (res) {
+						if (res.confirm) {
+							that.$http.post("/app/product/shelves",shelves )
+								.then(res => {
+									if (res.data.code == 200) {
+										console.log(res)
+										uni.showToast({
+											title: '下架成功',
+											duration: 2000,
+											icon:'none'
+										});
+										that.isManage = false
+									}
+								})
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
 			},
 			allSelect() {
-
 				if (this.isAll) {
 					this.isAll = false
 					this.productList.forEach(item => {
@@ -186,19 +240,60 @@
 				}
 			},
 			getProductList() {
-				this.$http.get("/app/product/list?merchantId=" + '111' + "&productStatus=" + this.productStatus, ).then(res => {
-					if (res.data.code == 200) {
-						res.data.result.records.forEach((item) => {
-							 item.select = false;
-						})
-						this.productList = res.data.result.records
-						console.log(this.productList)
-					}
+				this.$http.get("/app/product/list?merchantId=" + this.merchantId + "&productStatus=" + this.productStatus +
+						'&productName=' + this.productName, )
+					.then(res => {
+						if (res.data.code == 200) {
+							res.data.result.records.forEach((item) => {
+								item.select = false;
+							})
+							this.productList = res.data.result.records
+							console.log(this.productList)
+						}
+					})
+			},
+			delist(item) {
+				console.log(item)
+				let shelves = []
+				shelves.push({
+					productId:item.productId,
+					productStatus:0
 				})
+				let that = this
+				uni.showModal({
+					title: '确定下架商品',
+					success: function (res) {
+						if (res.confirm) {
+							that.$http.post("/app/product/shelves",shelves )
+								.then(res => {
+									if (res.data.code == 200) {
+										console.log(res)
+										uni.showToast({
+											title: '下架成功',
+											duration: 2000,
+											icon:'none'
+										});
+									}
+								})
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+				
 			}
 		},
 		mounted() {
 			this.getProductList()
+		},
+		onShow() {
+			let that = this
+			uni.getStorage({
+				key: 'login_user_info',
+				success: function(res) {
+					that.merchantId = res.data.id
+				}
+			})
 		}
 	}
 </script>
@@ -214,7 +309,7 @@
 
 		.head {
 			width: 100%;
-			background: linear-gradient(87deg, #FFFFFF 0%, #A3CDFF 100%), linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+			background: #ffffff;
 
 			.handle {
 				height: 112rpx;
@@ -223,6 +318,7 @@
 				align-items: center;
 				padding: 0px 24rpx;
 				position: relative;
+				background: linear-gradient(87deg, #FFFFFF 0%, #A3CDFF 100%), linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
 
 				.head_left {
 					font-size: 40rpx;
@@ -257,32 +353,66 @@
 				}
 			}
 
+			.search {
+				width: 93%;
+				height: 56rpx;
+				background: #F7F8FC;
+				border-radius: 12rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin: 16rpx auto;
+				font-size: 26rpx;
+				padding: 13rpx 20rpx;
+
+				span {
+					margin-right: 15rpx;
+
+				}
+
+				input {
+					flex: 1;
+					font-size: 26rpx;
+				}
+
+				.search_btn {
+					width: 72rpx;
+					color: #333333;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					span {
+						display: block;
+						width: 1px;
+						height: 26rpx;
+						background-color: #eeeeee;
+					}
+				}
+			}
+
 			.type {
 				display: flex;
+				justify-content: space-between;
 				background-color: #fff;
+				padding: 8px 24rpx 16rpx;
 
 				.type_item {
-					width: 25%;
-					height: 75rpx;
+					height: 54rpx;
 					display: flex;
 					justify-content: center;
 					align-items: center;
 					font-size: 26rpx;
 					color: #888888;
 					position: relative;
-
-					.line {
-						position: absolute;
-						bottom: 10rpx;
-						width: 53rpx;
-						height: 8rpx;
-						background: #449AFF;
-						border-radius: 7rpx;
-					}
+					padding: 8rpx 12rpx;
+					background: #F2F3F5;
+					border-radius: 8rpx;
 				}
 
 				.active {
-					color: #333;
+					color: #2D88F4;
+					background: #ECF5FF;
 				}
 			}
 		}
@@ -334,6 +464,38 @@
 						margin-right: 8rpx;
 					}
 
+					.audit {
+						display: flex;
+						align-items: center;
+						color: #596ABB;
+					}
+
+					.audit::before {
+						content: "";
+						display: inline-block;
+						width: 9rpx;
+						height: 9rpx;
+						background: #596ABB;
+						border-radius: 50%;
+						margin-right: 8rpx;
+					}
+
+					.reject {
+						display: flex;
+						align-items: center;
+						color: #F55D65;
+					}
+
+					.reject::before {
+						content: "";
+						display: inline-block;
+						width: 9rpx;
+						height: 9rpx;
+						background: #F55D65;
+						border-radius: 50%;
+						margin-right: 8rpx;
+					}
+
 					.line {
 						display: block;
 						width: 1rpx;

pages/product/usable.vue

@@ -1,80 +1,118 @@
 <template>
 	<view class="usable">
 		<view class="head">
-			<span class="cuIcon-back" @click="back"></span>
+			<view class="head_left">
+				<span class="cuIcon-back" @click="back"></span>
+			</view>
 			<view class="case">
 				可用时间
 			</view>
 		</view>
-	<view class="content">
-		<u-radio-group v-model="value" @change="radioGroupChange" style="width: 100%;">
-			<view class="title">
-				可使用日期
-			</view>
-			<u-radio @change="radioChange"  name="now" style="width: 100%;">
-				<view class="title now">
-					购买后立即生效,有效时间
-					<input type="number" v-model="valid" /> 天
+		<view class="content">
+			<u-radio-group v-model="value" @change="radioGroupChange"
+				style="width: 100%;background-color: #ffffff;padding: 16rpx;border-radius: 16rpx;">
+				<view class="title">
+					可使用日期
 				</view>
-			</u-radio>
-			<u-radio @change="radioChange" name="date" style="width: 100%;">
-				<view class="title now">
-					指定消费日期
-					<view class="" @click="isSelectDate = true">
-						{{ Object.keys(selectedTime).length === 0 ?'去选择':selectedTime.startTime+'--'+selectedTime.endTime}}
+				<u-radio @change="radioChange" name="now"
+					style="width: 100%;height:65rpx; flex;align-items: center;border-bottom: 1px solid #eeeeee;">
+					<view class="title now">
+						购买后立即生效,有效时间
+						<input type="number" style="background-color:#F7F8FC ;" v-model="expirationDays" /> 天
 					</view>
-				</view>
-			</u-radio>
-		</u-radio-group>
-	</view>
-		<view class="btn">
-			保存
+				</u-radio>
+				<u-radio @change="radioChange" name="date" style="width: 100%;margin-top: 16rpx;">
+					<view class="title now">
+						指定消费日期
+						<view class="picker">
+							<u-input placeholder="去设置" v-model="showDate" @click="selectDate" />
+							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
+						</view>
+					</view>
+				</u-radio>
+			</u-radio-group>
 		</view>
-		<selectDate @confirm="handleConfirm" @close="closeSelectDate" v-if="isSelectDate" />
+		<view class="foot">
+			<view class="btn" @click="save">
+				保存
+			</view>
+		</view>
+		<rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" />
 	</view>
 </template>
 <script>
-	import selectDate from '@/components/product/select_date.vue'
+	import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
 	export default {
 		components: {
-			selectDate
+			rangTime
 		},
 		data() {
 			return {
-				valid: '',
+				expirationDays: '',
 				isSelectDate: false,
 				selectedTime: {},
-				value: 'now'
+				value: 'now',
+				mode: 1,
+				availableStartDate: '',
+				availableEndDate: '',
+				showDate: ''
 			}
 		},
 		methods: {
 			//返回
 			back() {
+				console.log('1111')
 				uni.navigateBack({
 					delta: 1
 				});
 			},
-			// 处理 confirm 事件，接收子组件传递的时间段数据
-			handleConfirm(time) {
-				this.selectedTime = time; // 保存时间段数据
-				this.isSelectDate = false
-				console.log(this.selectedTime)
-			},
-			//隐藏弹窗
-			closeSelectDate() {
-				this.isSelectDate = false
-			},
 			// 选中某个单选框时，由radio时触发
 			radioChange(e) {
 				// console.log(e);
 			},
 			// 选中任一radio时，由radio-group触发
 			radioGroupChange(e) {
-				
 				console.log(e);
-				if(e=='date'){
+				if (e == 'date') {
 					this.valid = ''
 				}
+			},
+			onEndTimeChange(val) {
+				this.availableStartDate = val.startDate
+				this.availableEndDate = val.endDate
+				this.showDate = val.startDate + '-' + val.endDate
+				this.$forceUpdate(); // 强制刷新视图
+			},
+			selectDate() {
+				// this.isSelectDate = true
+				if (this.value == 'date') {
+					this.$refs.rangTime.open()
+				}
+			},
+			save() {
+				if (this.availableStartDate !== '' && this.availableEndDate !== '') {
+					uni.setStorage({
+						key: 'smdate',
+						data: {
+							availableStartDate: this.availableStartDate,
+							availableEndDate: this.availableEndDate
+						}
+					})
+						this.back()
+				} else if (this.expirationDays !== '') {
+					uni.setStorage({
+						key: 'smdate',
+						data: {
+							expirationDays: this.expirationDays
+						}
+					})
+						this.back()
+				} else {
+					uni.showToast({
+						title: '选择售卖时间',
+						icon: 'none'
+					});
+				}
 			}
 		}
 	}
@@ -87,31 +125,42 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		padding-bottom: 20rpx;
+		background: #F7F8FC;
+
 		.head {
 			width: 100%;
-			height: auto;
 			padding: 20rpx;
+			background-color: #fff;
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
-			background-color: #fff;
 			position: relative;
-
-			.cuIcon-back {
+		
+			.head_left {
 				font-size: 40rpx;
-				margin-right: 40rpx;
+			}
+		
+			.case {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				font-size: 36rpx;
+				font-weight: 600;
 			}
 		}
-		.content{
+
+		.content {
 			flex: 1;
+			padding: 24rpx;
+
 		}
+
 		.title {
 			width: 100%;
-			height: 80rpx;
 			font-weight: 600;
-			line-height: 80rpx;
-			border-bottom: 1px solid #ccc;
-			padding: 0rpx 20rpx;
+			font-size: 30rpx;
+			margin-bottom: 16rpx;
 		}
 
 		.now {
@@ -120,12 +169,49 @@
 			align-items: center;
 			justify-content: space-between;
 			box-sizing: border-box;
+			margin: 0;
+
+			.picker {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: end;
+				font-size: 28rpx;
+				color: #999999;
+
+				/deep/.u-input {
+					text-align: right !important;
+				}
+			}
 
 			input {
 				width: 100rpx;
 			}
 		}
+
+		.foot {
+			width: 100%;
+			height: 112rpx;
+			background-color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 24rpx;
+
+			.btn {
+				width: 100%;
+				height: 100%;
+				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+				border-radius: 75rpx;
+				font-size: 28rpx;
+				color: #FFFFFF;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
 	}
+
 	.btn {
 		width: 80%;
 		height: 80rpx;