Merge branch 'master' into lihongxiao

common/router/modules/routes.js

@@ -63,6 +63,14 @@ const routes = [{
 			title: '全部服务',
 		},
 	},
+	{
+		//注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
+		path: '/pages/index/shop',
+		name: 'shop',
+		meta: {
+			title: '门店详情',
+		},
+	},
 	{
 		//注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
 		path: '/pages/product/index',

components/select_date.vue → components/product/select_date.vue

@@ -1,26 +1,27 @@
 <template>
-  <view class="popup-mask" @tap="closePopup">
-    <view class="popup-content" @tap.stop>
-      <view class="popup-header">
+  <view class="popup" @tap="closePopup">
+    <view class="model" @tap.stop>
+      <view class="title">
         <text>选择时间段</text>
+				<image src="/static/index/cut.png" mode="" @click="isAddGroup = false"></image>
       </view>
       <view class="popup-body">
         <view class="time-picker">
           <text>开始时间</text>
-          <picker mode="date" :value="startTime" @change="onStartTimeChange">
+         <!-- <picker mode="date" :value="startTime" @change="onStartTimeChange">
             <view class="picker">{{ startTime }}</view>
-          </picker>
+          </picker> -->
         </view>
         <view class="time-picker">
           <text>结束时间</text>
-          <picker mode="date" :value="endTime" @change="onEndTimeChange">
+          <!-- <picker mode="date" :value="endTime" @change="onEndTimeChange">
             <view class="picker">{{ endTime }}</view>
-          </picker>
+          </picker> -->
         </view>
       </view>
-      <view class="popup-footer">
-        <button @tap="closePopup">取消</button>
-        <button @tap="confirm">确定</button>
+      <view class="foot">
+        <view @tap="closePopup">取消</view>
+        <view @tap="confirm">确定</view>
       </view>
     </view>
   </view>
@@ -55,18 +56,44 @@ export default {
 };
 </script>
 
-<style>
-.popup-mask {
+<style lang="scss" scoped>
+.popup {
+  width: 100vw;
+  height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
   display: flex;
-  justify-content: center;
-  align-items: center;
-	z-index: 99;
+  align-items: end;
+  z-index: 99;
+	.model{
+		width: 100%;
+		background-color: #fff;
+		border-radius: 20rpx 20rpx 0rpx 0rpx;
+		padding: 0rpx 24rpx;
+		padding-bottom: 20rpx;
+		.title {
+			width: 100%;
+			height: 86rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			border-bottom: 1px solid #eeeeee;
+			margin-bottom: 24rpx;
+		
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				position: absolute;
+				right: 0px;
+			}
+		}
+		.foot{
+			
+		}
+	}
 }
 
 .popup-content {

pages.json

@@ -46,6 +46,10 @@
 			"path": "pages/index/full",
 			"style": {}
 		},
+		{
+			"path": "pages/index/shop",
+			"style": {}
+		},
 		{
 			"path": "pages/product/index",
 			"style": {}
@@ -296,26 +300,26 @@
 		"list": [{
 				"text": "首页",
 				"pagePath": "pages/index/index",
-				"iconPath": "",
-				"selectedIconPath": ""
+				"iconPath": "static/tabbar/index_tab.png",
+				"selectedIconPath": "static/tabbar/index_select_tab.png"
 			},
 			{
 				"text": "订单",
 				"pagePath": "pages/order/index",
-				"iconPath": "",
-				"selectedIconPath": ""
+				"iconPath": "static/tabbar/order_tab.png",
+				"selectedIconPath": "static/tabbar/order_select_tab.png"
 			},
-			{
+			{ 
 				"text": "消息",
 				"pagePath": "pages/identify/identify",
-				"iconPath": "",
-				"selectedIconPath": ""
+				"iconPath": "static/tabbar/msg_tab.png",
+				"selectedIconPath": "static/tabbar/msg_select_tab.png"
 			},
 			{
 				"text": "设置",
 				"pagePath": "pages/my/my",
-				"iconPath": "",
-				"selectedIconPath": ""
+				"iconPath": "static/tabbar/set_tab.png",
+				"selectedIconPath": "static/tabbar/set_select_tab.png"
 			}
 		]
 	},

pages/index/full.vue

@@ -22,7 +22,7 @@
 				订单管理
 			</view>
 			<view class="fun_box">
-				<view class="item" v-for="(item,index) in order" :key="index" @click="orderFunc(item)">
+				<view class="item " v-for="(item,index) in order" :key="index" @click="orderFunc(item)" style="margin: 0px;">
 					<image :src="item.url" mode=""></image>
 					{{item.name}}
 				</view>
@@ -33,7 +33,7 @@
 				财务对账
 			</view>
 			<view class="fun_box">
-				<view class="item" v-for="(item,index) in finance" :key="index">
+				<view class="item" v-for="(item,index) in finance" :key="index" style="margin: 0px;">
 					<image :src="item.url" mode=""></image>
 					{{item.name}}
 				</view>
@@ -202,7 +202,7 @@
 					display: flex;
 					align-items: center;
 					flex-direction: column;
-					margin-bottom: 20rpx;
+					// margin-bottom: 20rpx;
 					// margin-right: 40rpx;
 					font-size: 24rpx;
 					image {
@@ -211,7 +211,12 @@
 						margin-bottom: 10rpx;
 					}
 				}
-
+				.nomargin{
+					margin-bottom: 0px;
+				}
+				.item:nth-child(-n+5){
+					margin-bottom: 36rpx;
+				}
 			}
 		}
 	}

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="index">
 		<view class="head">
-			<view class="header">
+			<view class="header" @click="shopDetails">
 				<image src="/static/index/address.png" mode=""></image>
 				{{name}}
 				<image src="/static/index/down.png" mode=""></image>
@@ -49,18 +49,21 @@
 				<view class="item" v-for="(item,index) in msg" :key="index">
 					<view class="type">
 						<view class="img">
-							<image src="/static/index/deal.png" mode="" v-if="item.type=='交易信息'"></image>
-							<image src="/static/index/verify.png" mode="" v-if="item.type=='产品核销'"></image>
-							<image src="/static/index/client.png" mode="" v-if="item.type=='客户评价'"></image>
-							<image src="/static/index/system.png" mode="" v-if="item.type=='系统消息'"></image>
-							{{item.type}}
+							<image src="/static/index/deal.png" mode="" v-if="item.msgType=='1'"></image>
+							<image src="/static/index/verify.png" mode="" v-if="item.msgType=='2'"></image>
+							<image src="/static/index/client.png" mode="" v-if="item.msgType=='3'"></image>
+							<image src="/static/index/system.png" mode="" v-if="item.msgType=='4'"></image>
+							<span v-if="item.msgType=='1'">交易信息</span>
+							<span v-if="item.msgType=='2'">产品核销</span>
+							<span v-if="item.msgType=='3'">客户评价</span>
+							<span v-if="item.msgType=='4'">系统消息</span>
 						</view>
 						<view class="time">
-							{{item.time}}
+							{{item.msgDate}}
 						</view>
 					</view>
 					<view class="details">
-						{{item.msg}}
+						{{item.msgContent}}
 					</view>
 				</view>
 			</view>
@@ -81,43 +84,7 @@
 				income: '', //收益
 				name: '滨海广场店',
 				num: 222,
-				list: [{
-						thumb: "https://xxx.com/goods/1.jpg",
-					},
-					{
-						thumb: "https://xxx.com/goods/2.jpg",
-					},
-					{
-						thumb: "https://xxx.com/goods/3.jpg",
-					},
-					{
-						thumb: "https://xxx.com/goods/4.jpg",
-					},
-					{
-						thumb: "https://xxx.com/goods/5.jpg",
-					},
-				],
-				msg: [{
-						type: '交易信息',
-						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
-						time: '2025-12-13 13:00:00'
-					},
-					{
-						type: '产品核销',
-						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
-						time: '2025-12-13 13:00:00'
-					},
-					{
-						type: '客户评价',
-						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
-						time: '2025-12-13 13:00:00'
-					},
-					{
-						type: '系统消息',
-						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
-						time: '2025-12-13 13:00:00'
-					},
-				]
+				msg: []
 			}
 		},
 		onLoad: function() {
@@ -135,6 +102,12 @@
 					url: '/pages/scan/scan'
 				})
 			},
+			//跳转至门店详情页
+			shopDetails(){
+				uni.navigateTo({
+					url: '/pages/index/shop'
+				})
+			},
 			scanRecord() {
 				uni.navigateTo({
 					url: '/pages/scan/record'
@@ -142,17 +115,35 @@
 			},
 			gettodayData() {
 				this.$http.get("/merchant/app/home/todayData?merchantId=" + '111', {}).then(res => {
-					console.log(res)
 					if (res.data.code == 200) {
 						this.income = res.data.result.income
 						this.newCustomer = res.data.result.newCustomer
 						this.numberOrders = res.data.result.numberOrders
 					}
 				})
+			},
+			getMessage(){
+				this.$http.get("/merchant/app/home/realMessage?merchantId=" + '111', {}).then(res => {
+					if (res.data.code == 200) {
+						this.msg = res.data.result.records
+					// 	this.income = res.data.result.income
+					// 	this.newCustomer = res.data.result.newCustomer
+					// 	this.numberOrders = res.data.result.numberOrders
+					}
+				})
 			}
 		},
 		mounted() {
 			this.gettodayData()
+			this.getMessage()
+			// let info = 
+			let that = this
+			uni.getStorage({
+				key: 'login_user_info',
+				success: function (res) {
+					that.name = res.data.merchantName
+				}
+			});
 		}
 	}
 </script>
@@ -166,9 +157,8 @@
 		.head {
 			width: 100%;
 			height: 272rpx;
-			background: linear-gradient(90deg, #E6FFFF 0%, #CEF7FF 40%, #A3CEFE 73%, #BCD6FF 100%), linear-gradient(#F7F8FC 0%, rgba(247, 248, 252, 0) 100%, );
+			background: linear-gradient(90deg, #E6FFFF 0%, #CEF7FF 40%, #A3CEFE 73%, #BCD6FF 100%), linear-gradient(to bottom , #F7F8FC 0%, rgba(247,248,252,0) 100%);
 			padding: 20rpx;
-
 			.header {
 				width: 100%;
 				height: 112rpx;

pages/index/shop.vue

@@ -0,0 +1,550 @@
+<template>
+	<view class="shop">
+		<view class="head">
+			<span class="cuIcon-back" @click="back"></span>
+			<view class="case">
+				门店详情
+			</view>
+		</view>
+		<view class="center">
+			<view class="data">
+				<view class="title">
+					门店信息
+					<span></span>
+				</view>
+				<view class="content">
+					<view class="img">
+						<image :src="'http://192.168.0.36:8080/jeecg-boot/'+shopData.headPhoto" mode=""></image>
+					</view>
+					<view class="name">
+						{{shopData.storeName}}
+						<view class="avg">
+							<u-rate :count="count" v-model="shopData.commentGradeAvg" active-icon="heart-fill" inactive-icon="heart"
+								:disabled="true"></u-rate>
+							<span>{{shopData.commentGradeAvg}}分</span>
+						</view>
+						<span v-if="shopData.merchantStatus == 1">营业中</span>
+						<span v-if="shopData.merchantStatus == 2" style="color: #FF8024;">歇业中</span>
+						<span v-if="shopData.merchantStatus == 3" style="color: #999999;">门店关闭</span>
+					</view>
+				</view>
+				<view class="address">
+					<view class="area">{{shopData.locality}}</view>
+					<view class="details">
+						<span>{{shopData.address}}</span>
+						<image src="/static/index/addressblue.png" mode=""></image>
+					</view>
+				</view>
+				<view class="institution">
+					经营机构 <span>{{shopData.corporateName}}</span>
+				</view>
+			</view>
+		</view>
+		<view class="food">
+			<view class="business" @click="isPopup = true">
+				<image src="/static/index/business.png" mode=""></image>营业管理
+			</view>
+			<view class="edit">
+				<image src="/static/index/edit.png" mode=""></image>编辑门店
+			</view>
+		</view>
+		<view class="popup" v-if="isPopup">
+			<view class="model">
+				<view class="title">
+					营业管理
+					<image src="/static/index/cut.png" mode="" @click="closePopup"></image>
+				</view>
+				<view class="btnList">
+					<view class="box">
+						<view class="btn" :class="currentIndex==index?'select':''" v-for="(item,index) in btnList" :key="index"
+							@click="toggle(item,index)">
+							{{item.name}}
+							<image src="/static/index/select.png" mode="" v-if="currentIndex==index"></image>
+						</view>
+					</view>
+
+					<view class="affirm" v-if="currentIndex ==1">
+						当前门店确定歇业？
+					</view>
+					<view class="affirm" v-if="currentIndex ==2">
+						关闭门店前需保证没有还未使用的有效服务券哦！
+					</view>
+				</view>
+				<view class="sub">
+					<view class="cancel" @click="closePopup">
+						取消
+					</view>
+					<view class="submit">
+						确定
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="popup res" v-if="isSuccess">
+			<view class="content">
+				<view class="title">
+					<span v-if="status == 1">正常营业</span>
+					<span v-if="status == 2">门店歇业</span>
+					<span v-if="status == 3|| status == 4">关闭门店</span>
+				</view>
+				<view class="center">
+					<image src="/static/index/start.png" mode="" v-if="status == 1"></image>
+					<image src="/static/index/rest.png" mode="" v-if="status == 2"></image>
+					<image src="/static/index/close.png" mode="" v-if="status == 3"></image>
+					<span v-if="shopData.merchantStatus == 1">恭喜发财，开业大吉！</span>
+					<span v-if="shopData.merchantStatus == 2">当前门店关闭成功</span>
+					<span v-if="shopData.merchantStatus == 3">当前门店已歇业</span>
+					<view class="error" v-if="shopData.merchantStatus == 3|| shopData.merchantStatus == 4">
+						当前门店还存在有效服务券<br />
+						暂时无法关闭门店
+					</view>
+				</view>
+				<view class="btn" :class="dynamicClass" @click="isSuccess = false">
+					确定
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				btnList: [{
+						name: '正常营业', 
+					},
+					{
+						name: '门店歇业', 
+					}, 
+					{
+						name: '关闭门店', 
+					}
+				],
+				currentIndex: 0,
+				isPopup: false,
+				dynamicClass: 'start',
+				status: 3,
+				isSuccess: false,
+				count: 5,
+				shopData: {},
+				shopStatus:null
+			}
+		},
+		methods: {
+			//返回
+			back() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			//切换状态
+			toggle(item, index) {
+				this.currentIndex = index
+			},
+			getShopData() {
+				this.$http.get("/merchant/localMerchantInfo/queryById?id=" + '1887039799020273666').then(res => {
+					if (res.data.code == 200) {
+						this.shopData = res.data.result
+						this.shopStatus = res.data.result.merchantStatus
+						this.currentStatus()
+					}
+				})
+			},
+			currentStatus(){
+				if(this.shopStatus ==1){
+					this.currentIndex = 0
+				}else if(this.shopStatus ==2){
+					this.currentIndex = 1
+				} else if(this.shopStatus ==3){
+					this.currentIndex = 2
+				}
+			},
+			closePopup(){
+				this.isPopup = false
+				this.currentStatus()
+			}
+		},
+		mounted() {
+			this.getShopData()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		width: 100%;
+		height: 100%;
+	}
+
+	.shop {
+		width: 100%;
+		height: 100%;
+		background: #F7F8FC;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		.head {
+			width: 100%;
+			height: 112rpx;
+			padding: 20rpx;
+			display: flex;
+			align-items: center;
+			background: linear-gradient(180deg, #FFF9F1 0%, #FFFFFF 100%);
+			position: relative;
+
+			.cuIcon-back {
+				font-size: 40rpx;
+				margin-right: 40rpx;
+			}
+
+			.case {
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				font-size: 36rpx;
+				font-weight: 500;
+			}
+		}
+
+		.center {
+			width: 100%;
+			flex: 1;
+			padding: 0px 24rpx;
+
+			.data {
+				width: 100%;
+				background: #FFFFFF;
+				box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
+				border-radius: 16rpx;
+				margin: 20rpx auto;
+				padding: 20rpx 16rpx;
+
+				.title {
+					font-size: 28rpx;
+					position: relative;
+					margin-bottom: 16rpx;
+
+					span {
+						display: block;
+						width: 108rpx;
+						height: 5rpx;
+						background: linear-gradient(90deg, #88BFFF 0%, #449AFF 100%);
+						border-radius: 8rpx;
+						position: absolute;
+						bottom: 5rpx;
+					}
+				}
+
+				.content {
+					display: flex;
+					height: 140rpx;
+
+					.img {
+						margin-right: 20rpx;
+						width: 140rpx;
+						height: 140rpx;
+
+						image {
+							width: 140rpx;
+							height: 140rpx;
+
+						}
+					}
+
+					.name {
+						height: 100%;
+						font-size: 32rpx;
+						font-weight: 600;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.avg {
+							height: 23rpx;
+							display: flex;
+							align-items: center;
+							margin-top: 8rpx;
+
+							span {
+								font-size: 32rpx;
+								color: #FD4912;
+								margin-left: 10rpx;
+							}
+						}
+
+						span {
+							display: block;
+							height: 49rpx;
+							font-size: 34rpx;
+							color: #53CC48;
+							line-height: 40rpx;
+						}
+					}
+				}
+
+				.address {
+					margin-top: 32rpx;
+					border-bottom: 1px solid #eee;
+					padding-bottom: 16rpx;
+
+					.area {
+						height: 39rpx;
+						font-size: 26rpx;
+						color: #333333;
+						line-height: 30rpx;
+					}
+
+					.details {
+						display: flex;
+						justify-content: space-between;
+
+						span {
+							display: block;
+							width: 534rpx;
+							font-size: 24rpx;
+							color: #666666;
+							line-height: 28rpx;
+							margin-top: 8rpx;
+						}
+
+						image {
+							width: 48rpx;
+							height: 48rpx;
+						}
+					}
+				}
+
+				.institution {
+					height: 55rpx;
+					font-size: 26rpx;
+					color: #232832;
+					border-bottom: 1px solid #eee;
+					padding-bottom: 16rpx;
+					margin-top: 16rpx;
+
+					span {
+						margin-left: 20rpx;
+					}
+				}
+			}
+		}
+
+		.food {
+			width: 100%;
+			height: 112rpx;
+			background: #FFFFFF;
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			font-size: 28rpx;
+			color: #FFFFFF;
+
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 10rpx;
+			}
+
+			.business {
+				width: 324rpx;
+				height: 76rpx;
+				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+				border-radius: 12rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.edit {
+				width: 324rpx;
+				height: 76rpx;
+				background: linear-gradient(90deg, #FFA05B 0%, #FF7918 100%);
+				border-radius: 12rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		.popup {
+			width: 100vw;
+			height: 100vh;
+			position: fixed;
+			top: 0;
+			left: 0;
+			background: rgba(0, 0, 0, 0.4);
+			display: flex;
+			align-items: end;
+
+			.model {
+				width: 100%;
+				background-color: #fff;
+				border-radius: 20rpx 20rpx 0rpx 0rpx;
+				padding: 0rpx 24rpx;
+				padding-bottom: 20rpx;
+
+				.title {
+					width: 100%;
+					height: 86rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-bottom: 1px solid #EEEEEE;
+					position: relative;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						position: absolute;
+						right: 0px;
+					}
+				}
+
+				.btnList {
+					width: 100%;
+					height: 193rpx;
+					border-bottom: 1px solid #EEEEEE;
+					padding-top: 24rpx;
+
+					.box {
+						display: flex;
+						justify-content: space-between;
+
+						.btn {
+							width: 196rpx;
+							height: 66rpx;
+							border-radius: 4rpx;
+							border: 1px solid #C2C2C2;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							font-size: 26rpx;
+							position: relative;
+
+							image {
+								width: 24rpx;
+								height: 24rpx;
+								position: absolute;
+								top: 0;
+								right: 0;
+							}
+						}
+
+						.select {
+							background: rgba(68, 154, 255, 0.1);
+							border: 1px solid #449AFF;
+							color: #2983EC;
+						}
+					}
+
+					.affirm {
+						width: 100%;
+						font-size: 24rpx;
+						color: #666666;
+						line-height: 28rpx;
+						text-align: center;
+						margin-top: 24rpx;
+					}
+				}
+
+				.sub {
+					display: flex;
+					justify-content: space-between;
+					margin-top: 16rpx;
+
+					.cancel {
+						width: 205rpx;
+						height: 76rpx;
+						border-radius: 54rpx;
+						border: 1px solid #CCCCCC;
+						font-size: 28rpx;
+						color: #999999;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+
+					.submit {
+						width: 443rpx;
+						height: 76rpx;
+						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+						border-radius: 53rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #FFFFFF;
+					}
+				}
+			}
+		}
+
+		.res {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.content {
+				width: 570rpx;
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				padding: 0px 24rpx;
+				padding-bottom: 16rpx;
+
+				.title {
+					width: 100%;
+					height: 86rpx;
+					font-size: 32rpx;
+					color: #333333;
+					font-weight: 600;
+					border-bottom: 1px solid #EEEEEE;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.center {
+					font-size: 30rpx;
+					color: #333333;
+					line-height: 35rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					padding-top: 28rpx;
+					border-bottom: 1px solid #EEEEEE;
+					padding-bottom: 40rpx;
+					margin-bottom: 16rpx;
+
+					image {
+						width: 100rpx;
+						height: 100rpx;
+						margin-bottom: 10rpx;
+					}
+				}
+
+				.btn {
+					width: 320rpx;
+					height: 68rpx;
+					border-radius: 66rpx;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin: 0rpx auto;
+				}
+
+				.start {
+					background: #53CC48;
+				}
+
+				.rest {
+					background: #FF8024;
+				}
+			}
+		}
+	}
+</style>

pages/product/creatProduct.vue

@@ -5,18 +5,92 @@
 			<view class="case">
 				创建商品
 			</view>
-			<view class="step">
-				{{schedule}}/2
-			</view>
 		</view>
 		<view class="content">
-			<u-form :model="form" ref="uForm" v-if="schedule ==1">
-				<view class="titl ">
-					基本信息
+			<view class="form" v-if="schedule ==1">
+				<view class="titl">
+					基础信息
+				</view>
+				<view class="item">
+					<view class="label">
+						商品分类<span>*</span>
+					</view>
+					<view class="picker" @click="isSelectType = true">
+						<span v-if="showText == ''">选择商品分类</span>
+						<span v-else style="color: #333333;">{{showText}}</span>
+						<u-icon name="arrow-right"></u-icon>
+					</view>
+				</view>
+				<view class="item">
+					<view class="label">
+						商品名称<span>*</span>
+					</view>
+					<view class="picker">
+						<u-input v-model="form.productName" placeholder="输入商品名称" />
+					</view>
+				</view>
+				<view class="item upload">
+					<view class="label">
+						商品封面图<span>*</span>
+					</view>
+					<view class="tips">
+						支持jpg、png格式，尺寸为00px*00px
+					</view>
+					<u-upload ref="uUpload" :action="action" :file-list="fileList" max-count="1" width="140rpx"
+						height="140rpx"></u-upload>
+				</view>
+				<view class="item upload">
+					<view class="label">
+						商品详情图<span>*</span>
+					</view>
+					<view class="tips">
+						支持jpg、png格式，尺寸为00px*00px，最多20张
+					</view>
+					<u-upload :action="action" :file-list="fileList" max-count="20" width="140rpx" height="140rpx"></u-upload>
+				</view>
+				<view class="item">
+					<view class="label">
+						原价<span>*</span>
+					</view>
+					<view class="picker">
+						<u-input v-model="form.price" placeholder="输入商品原价" />
+					</view>
+					<view class="unit">
+						元
+					</view>
+				</view>
+				<view class="item">
+					<view class="label">
+						实际售价<span>*</span>
+					</view>
+					<view class="picker">
+						<u-input type="num" v-model="form.soldPrice" placeholder="输入客户实际支付价" />
+					</view>
+					<view class="unit">
+						元
+					</view>
+				</view>
+				<view class="item">
+					<view class="label">
+						组合套餐
+					</view>
+					<view class="picker set" @click="goGroup">
+						去设置
+						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
+					</view>
+				</view>
+			</view>
+			<!-- <u-form :model="form" ref="uForm" v-if="schedule ==1"
+				style="background-color: #fff;padding: 16rpx;border-radius: 16rpx;">
+				<view class="titl">
+					基础信息
 				</view>
-				<u-form-item label="商品分类" label-width="200">
+				<u-form-item style="display: flex;">
+					<label>
+						商品分类 <span style="color: red;">*</span>
+					</label>
 					<picker v-model="form.sex" :range="genderOptions" range-key="label" @change="onGenderChange">
-						<view>{{ form.sex || '请选择分类' }}</view>
+						<view class="">{{ form.sex || '请选择分类' }}</view>
 					</picker>
 				</u-form-item>
 				<u-form-item label="商品名称" label-width="200"><u-input v-model="form.intro" /></u-form-item>
@@ -33,38 +107,66 @@
 						设置组合套餐
 					</view>
 				</u-form-item>
-			</u-form>
-			<u-form :model="form" ref="uForm" v-if="schedule == 2">
+			</u-form> -->
+			<view class="form" v-if="schedule == 2">
 				<view class="titl ">
 					售卖/使用信息
 				</view>
-				<u-form-item label="售卖时间" label-width="200">
-					<!-- <picker v-model="form.sex" :range="genderOptions" range-key="label" @change="onGenderChange">
-						<view>{{ form.sex || '请选择售卖时间段' }}</view>
-					</picker> -->
-					<view class="" @click="isSelectDate = true">
-						请选择售卖时间段
+				<view class="item">
+					<view class="label">
+						售卖时间<span>*</span>
 					</view>
-				</u-form-item>
-				<u-form-item label="库存" label-width="200"><u-input v-model="form.intro" /></u-form-item>
-				<u-form-item label="可用时间" label-width="200">
-					<view class="" @click="setUsable">
+					<view class="picker set inp" @click="isSelectDate = true">
 						去设置
+						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
 					</view>
-				</u-form-item>
-				<u-form-item label="预约规则" label-width="200">
-					<view class="" @click="setRule">
-						去设置
+				</view>
+				<view class="item">
+					<view class="label">
+						库存<span>*</span>
 					</view>
-				</u-form-item>
-				<u-form-item label="退款规则" label-width="200">
-					<view class="" @click="setUsable">
+					<view class="picker set">
+						<u-input v-model="form.productName" placeholder="输入库存数量" />
+					</view>
+				</view>
+				<view class="item">
+					<view class="label">
+						可用时间<span>*</span>
+					</view>
+					<view class="picker set">
 						去设置
+						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
 					</view>
-				</u-form-item>
-				<u-form-item label="使用说明" label-position="top" label-width="200"><u-input type="textarea"
-						v-model="form.intro" /></u-form-item>
-			</u-form>
+				</view>
+				<view class="item">
+					<view class="label">
+						需要预约<span>*</span>
+					</view>
+					<view class="picker set">
+						<u-switch v-model="form.checked" style="margin-left:8rpx;" size="28"></u-switch>
+					</view>
+				</view>
+				<view class="item">
+					<view class="label">
+						退款规则
+					</view>
+					<view class="picker set">
+						请选择
+						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
+					</view>
+				</view>
+				<view class="item upload">
+					<view class="label">
+						使用说明
+					</view>
+					<view class="textarea">
+						<u-input v-model="form.num" type="textarea" placeholder="输入库存数量" maxlength="500" />
+					</view>
+					<view class="num">
+						0/500
+					</view>
+				</view>
+			</view>
 		</view>
 		<view class="btn">
 			<view class="next" @click="next" v-if="schedule==1">
@@ -80,12 +182,45 @@
 			</view>
 		</view>
 		<selectDate @confirm="handleConfirm" @close="closeSelectDate" v-if="isSelectDate" />
-		<refund v-if="isRefund" saveRule="saveFound" @closeRule="cutRule"/>
+		<refund v-if="isRefund" saveRule="saveFound" @closeRule="cutRule" />
+		<view class="popup" v-if="isSelectType">
+			<view class="model">
+				<view class="title">
+					商品品类
+					<image src="/static/index/cut.png" mode="" @click="closePopup"></image>
+				</view>
+				<view class="tree">
+					<view class="left">
+						<view class="item" :class="currentLeft == index?'active':''" v-for="(item,index) in treeLeft" :key="item.id"
+							@click="selectLeft(item,index)">
+							{{item.name}}
+						</view>
+					</view>
+					<view class="left border">
+						<view class="item" :class="currentCenter == index?'active':''" v-for="(item,index) in treeCenter"
+							:key="item.id" @click="selectRight(item,index)">
+							{{item.name}}
+						</view>
+					</view>
+					<view class="left">
+						<view class="item" :class="currentRight == index?'active':''" v-for="(item,index) in treeRight"
+							:key="item.id" @click="selectLast(item,index)">
+							{{item.name}}
+						</view>
+					</view>
+				</view>
+				<view class="sub">
+					<view class="submit" @click="selectType">
+						确定
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import selectDate from '@/components/select_date.vue'
+	import selectDate from '@/components/product/select_date.vue'
 	import refund from '@/components/refund.vue'
 	export default {
 		components: {
@@ -95,10 +230,14 @@
 		data() {
 			return {
 				form: {
-					name: '',
+					productName: '',
+					productImage: '',
 					intro: '',
-					sex: ''
+					sex: '',
+					checked: false,
+					num: 0
 				},
+				action: 'http://192.168.0.52:8080/jeecg-boot/sys/common/upload', //图片上传地址
 				checkboxList: [{
 						name: '苹果',
 						checked: false,
@@ -115,7 +254,6 @@
 						disabled: false
 					}
 				],
-
 				genderOptions: [{
 						label: '男',
 						value: 'male'
@@ -129,12 +267,22 @@
 						value: 'other'
 					}
 				],
-				schedule: 1,
+				schedule: 1, //进度
 				fileList: [],
 				selectedTime: null,
 				isSelectDate: false,
-				isRefund:true,
-				selectedRules:null
+				isRefund: false,
+				selectedRules: null,
+				isSelectType: false,
+				treeLeft: [], //一级列表
+				treeCenter: [], //二级列表
+				treeRight: [], //三级列表
+				currentLeft: null, //一级选中
+				currentCenter: null, //二级选中
+				currentRight: null, //三级选中
+				productType: [], //选中的商品分类id
+				selectTypeList: [], //选中的商品分类名称
+				showText: ''
 			}
 		},
 		methods: {
@@ -146,6 +294,13 @@
 			//下一步
 			next() {
 				this.schedule += 1
+				let files = [];
+				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
+				files = this.$refs.uUpload.lists.filter(val => {
+					return val.progress == 100;
+				})
+				this.form.productImage = files[0].response.message
+				console.log(this.form.productImage)
 			},
 			// 跳转至组合商品页
 			goGroup() {
@@ -176,18 +331,86 @@
 				})
 			},
 			//跳转至预约规则
-			setRule(){
+			setRule() {
 				uni.navigateTo({
 					url: '/pages/product/rule'
 				})
 			},
-			saveFound(rules){
-				 this.selectedRules = rules; // 保存退款规则
-				 this.selectedRules = false
+			saveFound(rules) {
+				this.selectedRules = rules; // 保存退款规则
+				this.selectedRules = false
+			},
+			cutRule() {
+				this.isRefund = false
+			},
+			//获取商品分类一级列表
+			getLeftTree() {
+				this.$http.get("/sys/category/childList?pid=" + '1889836358116098050', {}).then(res => {
+					if (res.data.code == 0) {
+						this.treeLeft = res.data.result
+						if (this.treeLeft[0]) {
+							this.getCenterTree(this.treeLeft[0].id)
+						}
+					}
+				})
 			},
-			cutRule(){
-				 this.isRefund = false
+			//获取商品分类二级列表
+			getCenterTree(id) {
+				this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
+					if (res.data.code == 0) {
+						this.treeCenter = res.data.result
+						if (this.treeCenter[0]) {
+							this.getRightTree(this.treeCenter[0].id)
+						}
+					}
+				})
+			},
+			//获取商品分类三级列表
+			getRightTree(id) {
+				this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
+					if (res.data.code == 0) {
+						this.treeRight = res.data.result
+					}
+				})
+			},
+			//选中一级
+			selectLeft(item, index) {
+				this.showText = ''
+				this.productType = []
+				this.selectTypeList = []
+				this.currentLeft = index
+				this.currentCenter = null
+				this.currentRight = null
+				this.productType.push(item.id)
+				this.selectTypeList.push(item.name)
+				this.getCenterTree(item.id)
+			},
+			//选中二级
+			selectRight(item, index) {
+				this.currentCenter = index
+				this.currentRight = null
+				this.productType.push(item.id)
+				this.selectTypeList.push(item.name)
+				this.getRightTree(item.id)
+			},
+			//选中三级
+			selectLast(item, index) {
+				this.productType.push(item.id)
+				this.selectTypeList.push(item.name)
+				this.currentRight = index
+			},
+			//确定分类
+			selectType() {
+				this.isSelectType = false
+				this.showText = this.selectTypeList.join('·')
+			},
+			//关闭选择分类弹窗
+			closePopup() {
+				this.isSelectType = false
 			}
+		},
+		mounted() {
+			this.getLeftTree()
 		}
 	}
 </script>
@@ -196,10 +419,15 @@
 	.creat {
 		width: 100vw;
 		height: 100vh;
+		background: #F7F8FC;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 
 		.head {
 			width: 100%;
-			padding: 20rpx;
+			height: 112rpx;
+			padding: 32rpx 24rpx;
 			display: flex;
 			align-items: center;
 			background-color: #fff;
@@ -210,6 +438,15 @@
 				margin-right: 40rpx;
 			}
 
+			.case {
+				font-size: 36rpx;
+				font-weight: 600;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+
 			.step {
 				position: absolute;
 				right: 20rpx;
@@ -218,30 +455,111 @@
 
 		.content {
 			width: 100%;
-			background-color: #fff;
-			padding: 20rpx;
+			flex: 1;
+			padding: 24rpx;
 
 			.titl {
 				width: 100%;
-				height: 60rpx;
+				// height: 60rpx;
+				font-weight: 500;
+				margin-bottom: 16rpx;
+			}
+
+			.form {
 				background-color: #fff;
-				// padding: 20rpx;
-				border-bottom: 1px solid #eee;
+				padding: 16rpx;
+				border-radius: 16rpx;
+
+				.item {
+					width: 100%;
+					height: 58rpx;
+					border-bottom: 1px solid #EEEEEE;
+					display: flex;
+					// align-items: center;
+					padding-bottom: 16rpx;
+					margin-bottom: 16rpx;
+
+					.label {
+						margin-right: 20rpx;
+						font-weight: 600;
+						font-size: 28rpx;
+						min-width: 126rpx;
+
+						span {
+							color: red;
+						}
+					}
+
+					.picker {
+						flex: 1;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						font-size: 28rpx;
+						color: #999999;
+					}
+
+					.set {
+						display: flex;
+						justify-content: end;
+
+						/deep/.u-input {
+							text-align: right !important;
+						}
+					}
+				}
+
+				.upload {
+					display: block;
+					height: auto;
+
+					.tips {
+						font-size: 20rpx;
+						color: #999999;
+						margin-bottom: 16rpx;
+						margin-top: 10rpx;
+					}
+				}
+
+				.textarea {
+					width: 100%;
+					height: 196rpx;
+					background: #F7F8FC;
+					border-radius: 4rpx;
+					padding: 12rpx 16rpx;
+					font-size: 26rpx;
+					margin-top: 12rpx;
+				}
+
+				.num {
+					width: 100%;
+					text-align: right;
+					font-size: 24rpx;
+					color: #999999;
+					margin-top: 6rpx;
+				}
 			}
 		}
 
 		.btn {
 			width: 100%;
-			height: 80rpx;
+			height: 112rpx;
 			background-color: #fff;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 
 			.next {
-				width: 80%;
-				height: 70rpx;
-				background-color: #eee;
+				width: 672rpx;
+				height: 76rpx;
+				border-radius: 54rpx;
+				border: 1px solid #449AFF;
 				margin: 0 auto;
-				text-align: center;
-				line-height: 70rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 28rpx;
+				color: #449AFF;
 			}
 
 			.handle {
@@ -250,21 +568,117 @@
 				justify-content: space-around;
 
 				.back {
-					width: 30%;
-					height: 70rpx;
-					border: 1px solid #ccc;
-					text-align: center;
-					line-height: 70rpx;
+					width: 205rpx;
+					height: 76rpx;
+					border-radius: 54rpx;
+					border: 1px solid #449AFF;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 28rpx;
+					color: #449AFF;
 				}
 
 				.submit {
-					width: 50%;
-					height: 70rpx;
-					border: 1px solid #ccc;
-					text-align: center;
-					line-height: 70rpx;
+					width: 443rpx;
+					height: 76rpx;
+					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+					border-radius: 53rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 28rpx;
+					color: #FFFFFF;
 				}
 			}
 		}
+
+		.popup {
+			width: 100vw;
+			height: 100vh;
+			position: fixed;
+			top: 0;
+			left: 0;
+			background: rgba(0, 0, 0, 0.4);
+			display: flex;
+			align-items: end;
+			z-index: 99;
+
+			.model {
+				width: 100%;
+				background-color: #fff;
+				border-radius: 20rpx 20rpx 0rpx 0rpx;
+				padding: 0rpx 24rpx;
+				padding-bottom: 20rpx;
+
+				.title {
+					width: 100%;
+					height: 86rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-bottom: 1px solid #EEEEEE;
+					position: relative;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						position: absolute;
+						right: 0px;
+					}
+				}
+
+				.tree {
+					display: flex;
+					max-height: 546rpx;
+
+					.left {
+						overflow-y: auto;
+
+						.item {
+							width: 224rpx;
+							height: 78rpx;
+							padding: 20rpx;
+							font-size: 26rpx;
+						}
+
+						.active {
+							background: rgba(68, 154, 255, 0.1);
+							color: #2983EC;
+						}
+					}
+
+					.border {
+						border-left: 1px solid #eeeeee;
+						border-right: 1px solid #eeeeee;
+					}
+				}
+
+				.sub {
+					display: flex;
+					justify-content: space-between;
+					margin-top: 16rpx;
+					border-top: 1px solid #eeeeee;
+					padding-top: 16rpx;
+
+					.submit {
+						width: 672rpx;
+						height: 76rpx;
+						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+						border-radius: 53rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #FFFFFF;
+					}
+				}
+			}
+		}
+	}
+
+	/deep/.u-upload__button {
+		width: 250rpx !important;
+		height: 250rpx !important;
 	}
 </style>

pages/product/group.vue

@@ -1,48 +1,72 @@
 <template>
 	<view class="group">
 		<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">
-			<view class="add_group" @click="isAddGroup = true">
-				+添加商品组
-			</view>
-			<view class="list" v-for="(item,index) in groupList" :key="index">
-				<view class="name">{{item.name}}</view>
-				<view class="single" v-for="(row,ind) in item.singleList">
-					{{row.name}}{{row.num}}{{row.unit}}{{row.price}}元
-					<span class="cuIcon-deletefill" @click="remove(index,ind)"></span>
+			<view class="center">
+				<view class="title">
+					组合套餐
+				</view>
+				<view class="list" v-for="(item,index) in groupList" :key="index">
+					<view class="name">{{item.name}}</view>
+					<view class="single" v-for="(row,ind) in item.singleList">
+						<view class="single_name">
+							{{row.name}}
+						</view>
+						<view class="single_price">
+							{{row.num}}{{row.unit}}/{{row.price}}元
+							<!-- <span class="cuIcon-deletefill"></span> -->
+							<span @click="remove(index,ind)">删除</span>
+						</view>
+					</view>
+					<view class="handle">
+						<view class="delete" @click="deleteGroup(index)">
+							删除
+						</view>
+						<view class="addSingle" @click="addSingle(item,index)">
+							添加单品
+						</view>
+					</view>
 				</view>
-				<view class="addSingle" @click="addSingle(item,index)">
-					+添加单品
+				<view class="add_group" @click="isAddGroup = true">
+					<image src="/static/product/add.png" mode=""></image>
+					添加商品组
 				</view>
 			</view>
-
 		</view>
 		<view class="foot">
-			保存
+			<view class="btn" @click="save">
+				保存
+			</view>
 		</view>
-		<view class="add_popup" v-if="isAddGroup">
-			<view class="center">
+		<!-- 添加商品组 -->
+		<view class="popup" v-if="isAddGroup">
+			<view class="model">
 				<view class="title">
 					输入商品组名称
+					<image src="/static/index/cut.png" mode="" @click="isAddGroup = false"></image>
 				</view>
 				<view class="inp">
 					<u-input v-model="name" placeholder="限30字" />
 				</view>
 				<view class="btn">
-					<u-button @click="cancel">取消</u-button>
-					<u-button @click="addGroup">确定</u-button>
+					<view class="cancel" @click="cancel">取消</view>
+					<view class="sub" @click="addGroup">确定</view>
 				</view>
 			</view>
 		</view>
-		<view class="add_popup" v-if="isAddSingle">
-			<view class="center">
+		<!-- 添加单品 -->
+		<view class="popup" v-if="isAddSingle">
+			<view class="model">
 				<view class="title">
 					添加单品
+					<image src="/static/index/cut.png" mode="" @click="isAddSingle = false"></image>
 				</view>
 				<view class="inp">
 					<view class="single">
@@ -59,9 +83,9 @@
 					</view>
 				</view>
 				<view class="btn">
-					<u-button @click="cancelSingle">取消</u-button>
-					<u-button @click="continu">确定并继续添加</u-button>
-					<u-button @click="subSingle">确定</u-button>
+					<view class="cancel" @click="cancelSingle">取消</view>
+					<view class="continue" @click="continu">确定并继续添加</view>
+					<view class="subSingle" @click="subSingle">确定</view>
 				</view>
 			</view>
 		</view>
@@ -82,13 +106,14 @@
 					unit: '',
 					price: ''
 				},
-				singleIndex: null
+				singleIndex: null,//商品组下标
 			}
 		},
 		methods: {
 			//添加商品组
 			addGroup() {
 				if (this.name !== '') {
+					this.isAddGroup = false
 					this.groupList.push({
 						name: this.name,
 						singleList: []
@@ -111,12 +136,6 @@
 			//继续添加单品
 			continu() {
 				this.subSingle()
-				this.single = {
-					name: '',
-					num: '',
-					unit: '',
-					price: ''
-				}
 			},
 			//取消添加单品
 			cancelSingle() {
@@ -134,17 +153,31 @@
 				this.groupList[this.singleIndex].singleList.push(this.single)
 				this.isAddGroup = false
 				this.isAddSingle = false
+				this.single = {
+					name: '',
+					num: '',
+					unit: '',
+					price: ''
+				}
 			},
 			//删除单品
 			remove(index, ind) {
 				this.groupList[index].singleList.splice(ind, 1)
 			},
+			//删除商品组
+			deleteGroup(index){
+					this.groupList.splice(index,1)
+			},
 			//返回
-			back(){
+			back() {
 				uni.navigateBack({
-					 delta: 1
+					delta: 1
 				});
 			},
+			//保存
+			save(){
+				console.log(this.groupList)
+			}
 		}
 	}
 </script>
@@ -156,40 +189,71 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		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;
 			}
 		}
 
 		.content {
 			width: 100%;
 			flex: 1;
-			padding-top: 20rpx;
+			padding: 20rpx;
 			overflow-y: auto;
 
-			.add_group {
-				width: 85%;
-				height: 70rpx;
+			.center {
 				background-color: #fff;
-				margin: 0 auto;
-				text-align: center;
-				line-height: 70rpx;
+				padding: 16rpx 20rpx;
+
+				.title {
+					font-size: 28rpx;
+					font-weight: 600;
+					margin-bottom: 20rpx;
+				}
+			}
+
+			.add_group {
+				width: 100%;
+				height: 135rpx;
+				margin: 20rpx auto 0px;
+				background: #F7F8FC;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				font-size: 22rpx;
+				color: #449AFF;
+
+				image {
+					width: 52rpx;
+					height: 52rpx;
+				}
 			}
 
 			.list {
-				width: 85%;
+				width: 100%;
 				// height: 70rpx;
-				background-color: #fff;
-				margin: 0 auto;
+				background: #F7F8FC;
+				border-radius: 8rpx;
 				margin-top: 20rpx;
 				border-radius: 20rpx;
 				padding: 20rpx;
@@ -199,69 +263,177 @@
 					height: 40rpx;
 					// padding: 20rpx;
 					font-weight: 600;
-					margin-bottom: 20rpx;
+					margin-bottom: 16rpx;
 				}
 
 				.single {
 					width: 100%;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-				}
+					// display: flex;
+					// align-items: center;
+					// justify-content: space-between;
+					margin-bottom: 16rpx;
+
+					.single_name {
+						width: 100%;
+						font-size: 26rpx;
+					}
+
+					.single_price {
+						font-size: 24rpx;
+						color: #888888;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
 
-				.addSingle {
+						span {
+							display: block;
+							width: 112rpx;
+							height: 47rpx;
+							background: #FFFFFF;
+							border-radius: 4rpx;
+							border: 1px solid #EEEEEE;
+							text-align: center;
+							line-height: 47rpx;
+							font-size: 24rpx;
+						}
+					}
+				}
+				.handle{
 					width: 100%;
-					text-align: center;
+					display: flex;
+					justify-content: space-between;
+					.delete{
+						width: 45%;
+						height: 61rpx;
+						background: rgba(243,79,79,0.1);
+						border-radius: 12rpx;
+						border: 1px solid #F34F4F;
+						font-size: 28rpx;
+						color: #F34F4F;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+					.addSingle {
+						width: 45%;
+						height: 61rpx;
+						background: rgba(68, 154, 255, 0.1);
+						border-radius: 12rpx;
+						border: 1px solid #449AFF;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
 				}
 			}
 		}
 
 		.foot {
-			width: 90%;
-			height: 100rpx;
-			text-align: center;
-			line-height: 100rpx;
-			margin: 20rpx auto;
+			width: 100%;
+			height: 112rpx;
 			background-color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.operate {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0px 20rpx;
+			
+				.delete {
+					width: 205rpx;
+					height: 76rpx;
+					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+					border-radius: 49rpx;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-right: 24rpx;
+					margin-left: 140rpx;
+				}
+			
+				.all {
+					width: 25%;
+					// height: 60rpx;
+					// border: 1px solid #999;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+			
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 10rpx;
+					}
+				}
+			}
+
+			.btn {
+				width: 672rpx;
+				height: 76rpx;
+				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+				border-radius: 75rpx;
+				font-size: 28rpx;
+				color: #FFFFFF;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
 		}
 
-		.add_popup {
+		.popup {
+			width: 100vw;
+			height: 100vh;
 			position: fixed;
-			width: 100%;
-			height: 100%;
-			background: rgba(0, 0, 0, 0.4);
-			z-index: 99;
 			top: 0;
 			left: 0;
+			background: rgba(0, 0, 0, 0.4);
 			display: flex;
-			flex-direction: column;
-			justify-content: end;
+			align-items: end;
+			z-index: 99;
 
-			.center {
+			.model {
 				width: 100%;
-				// height: 250rpx;
 				background-color: #fff;
-				border-radius: 20rpx 20rpx 0px 0rpx;
+				border-radius: 20rpx 20rpx 0rpx 0rpx;
+				padding: 0rpx 24rpx;
+				padding-bottom: 20rpx;
 
 				.title {
 					width: 100%;
-					height: 50rpx;
-					text-align: center;
-					line-height: 50rpx;
+					height: 86rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+					border-bottom: 1px solid #eeeeee;
+					margin-bottom: 24rpx;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						position: absolute;
+						right: 0px;
+					}
 				}
 
 				.inp {
 					width: 100%;
-					// height: 100rpx;
-					border-top: 1px solid #ccc;
-					border-bottom: 1px solid #ccc;
-					padding: 20rpx;
+					min-height: 68rpx;
+					background: #F7F8FC;
+					border-radius: 4rpx;
 
+					//
 					.single {
 						width: 100%;
+						padding: 0rpx 20rpx;
 						display: flex;
 						align-items: center;
-						justify-content: space-between;
+						// justify-content: space-between;
 						background-color: #eee;
 						margin-bottom: 20rpx;
 					}
@@ -273,8 +445,62 @@
 					display: flex;
 					justify-content: space-around;
 					align-items: center;
+					border-top: 1px solid #eeeeee;
+					margin-top: 24rpx;
+
+					.cancel {
+						width: 205rpx;
+						height: 76rpx;
+						border-radius: 54rpx;
+						border: 1px solid #CCCCCC;
+						font-size: 28rpx;
+						color: #999999;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+
+					.sub {
+						width: 443rpx;
+						height: 76rpx;
+						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+						border-radius: 53rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #FFFFFF;
+					}
+
+					.continue {
+						width: 232rpx;
+						height: 76rpx;
+						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+						border-radius: 53rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #FFFFFF;
+					}
+
+					.subSingle {
+						width: 232rpx;
+						height: 76rpx;
+						background: linear-gradient(90deg, #FFA05B 0%, #FF7918 100%);
+						border-radius: 49rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 28rpx;
+						color: #FFFFFF;
+					}
 				}
 			}
 		}
 	}
+
+	/deep/.u-input {
+		text-align: right !important;
+	}
 </style>

pages/product/index.vue

@@ -3,9 +3,9 @@
 		<view class="head">
 			<view class="handle">
 				<view class="head_left">
-					<span class="cuIcon-back"></span>
-					<span>商品管理</span>
+					<span class="cuIcon-back" @click="back"></span>
 				</view>
+				<span class="center">商品管理</span>
 				<view class="head_right">
 					<span class="cuIcon-search" @click="goSearch"></span>
 					<view class="manage" @click="manage">
@@ -16,8 +16,9 @@
 
 			<view class="type">
 				<view class="type_item" :class="currentIndex == index?'active':''" v-for="(item,index) in typeList" :key="index"
-					@click="select(item,index)">
-					{{item.type}}{{item.num}}
+					@click="selectType(item,index)">
+					{{item.type}}({{item.num}})
+					<span class="line" v-if="currentIndex == index"></span>
 				</view>
 			</view>
 		</view>
@@ -25,40 +26,82 @@
 		<view class="list">
 			<view class="product_item" v-for="(item,index) in productList" :key="index" @click="goDetails(item)">
 				<view class="status">
-					<span>已售：{{item.num}}</span>
-					<span>库存：{{item.inventory}}</span>
-					<span>{{item.status}}</span>
+					<span class="round" v-if="item.productStatus =='1'">售卖中</span>
+					<span class="round no" v-if="item.productStatus =='0'" style="color:#666666 ;">未上架</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>
 				<view class="details">
 					<view class="img">
 						<image :src="item.url" mode=""></image>
 					</view>
 					<view class="data">
-						<span>{{item.name}}</span>
-						<span>售卖时间：{{item.time}}</span>
+						<span>{{item.productName}}</span>
+						<!-- <span>售卖时间：{{item.time}}</span> -->
+						<view class="repertory">库存：不限 <span></span> 销量：{{item.soldQuantity}}</view>
 						<view class="price">
-							￥{{item.price}}
-							<span>￥{{item.oldPrice}}</span>
+							<span style="font-size: 22rpx;margin: 0px;">￥</span>{{item.soldPrice}}
+							<span style="color:#999 ;font-size: 22rpx; text-decoration: line-through;">￥{{item.price}}</span>
 						</view>
 					</view>
-					<view class="tag">
-						<span>组合套餐</span>
-						<span class="frame" v-if="isManage"></span>
+					<view class="tag" v-if="isManage" @click.stop="select(item)">
+						<!-- <span>组合套餐</span> -->
+						<!-- <span class="frame"></span> -->
+						<image src="/static/product/select.png" mode="" v-if="item.select"></image>
+						<image src="/static/product/round.png" mode="" v-else></image>
+					</view>
+				</view>
+				<view class="btn_box">
+					<view class="delist">
+						下架
+					</view>
+					<view class="edit delist">
+						编辑
 					</view>
 				</view>
 			</view>
 		</view>
 		<view class="creat">
-			
 			<view class="operate" v-if="isManage">
-				<view class="all">全选</view>
-				<view class="all">删除</view>
-				<view class="all">下架</view>
+				<view class="all" @click="allSelect">
+					<image src="/static/product/select.png" mode="" v-if="isAll"></image>
+					<image src="/static/product/round.png" mode="" v-else></image>
+					全选
+				</view>
+				<view class="delete">删除</view>
+				<view class="delete delist">下架</view>
 			</view>
 			<view class="btn" @click="creatProduct" v-else>
+				<image src="/static/product/product.png" mode=""></image>
 				创建商品
 			</view>
 		</view>
+		<view class="popup" v-if="isDelete">
+			<view class="content">
+				<view class="title">
+					<span>删除商品</span>
+				</view>
+				<view class="center">
+					<image src="/static/index/close.png" mode="" v-if="canBeDelete"></image>
+					<image src="/static/product/error.png" mode="" v-else></image>
+					<view class="error" v-if="canBeDelete">
+						确定要删除？
+					</view>
+					<view class="error" v-else>
+						当前门店还存在有效服务券<br />
+						<span style="margin-top: 12rpx;">暂时无法关闭门店</span>
+					</view>
+				</view>
+				<view class="sub" @click="isSuccess = false">
+					<view class="button">
+						确定
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -66,8 +109,12 @@
 	export default {
 		data() {
 			return {
-				isManage:false,
+				isManage: false,
 				currentIndex: 0,
+				productStatus:0,//商品状态，默认1售卖中，0未上架,2审核中，3未通过
+				isAll: false,
+				isDelete: false,
+				canBeDelete: true,
 				typeList: [{
 						type: '售卖中',
 						num: 21
@@ -83,51 +130,75 @@
 					{
 						type: '未通过',
 						num: 6
-					},
-					{
-						type: '待处理',
-						num: 2
-					},
+					}
 				],
-				productList: [{
-					num: 6,
-					inventory: '不限',
-					status: '售卖中',
-					url: '/static/avatar_girl.png',
-					name: '洗车服务',
-					time: '2021.12.12-2023.12.23',
-					price: 12.00,
-					oldPrice: 13.00
-				}]
+				productList: []
 			}
 		},
 		methods: {
+			//返回
+			back() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
 			//切换分类
-			select(item, index) {
+			selectType(item, index) {
 				this.currentIndex = index
 			},
 			//是否管理商品
-			manage(){
+			manage() {
 				this.isManage = !this.isManage
 			},
 			// 跳转至搜索页面
-			goSearch(){
+			goSearch() {
 				uni.navigateTo({
-					url:'/pages/product/search'
+					url: '/pages/product/search'
 				})
 			},
 			//跳转至详情
-			goDetails(item){
+			goDetails(item) {
 				uni.navigateTo({
-					url:'/pages/product/details'
+					url: '/pages/product/details'
 				})
 			},
 			//跳转至创建商品
-			creatProduct(){
+			creatProduct() {
 				uni.navigateTo({
-					url:'/pages/product/creatProduct'
+					url: '/pages/product/creatProduct'
+				})
+			},
+			select(item) {
+				item.select = !item.select
+			},
+			allSelect() {
+
+				if (this.isAll) {
+					this.isAll = false
+					this.productList.forEach(item => {
+						item.select = false
+					})
+				} else {
+					this.isAll = true
+					this.productList.forEach(item => {
+						item.select = true
+					})
+				}
+			},
+			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)
+					}
 				})
 			}
+		},
+		mounted() {
+			this.getProductList()
 		}
 	}
 </script>
@@ -139,36 +210,49 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
+		background: #F7F8FC;
 
 		.head {
 			width: 100%;
-			height: 160rpx;
-			background-color: #fff;
+			background: linear-gradient(87deg, #FFFFFF 0%, #A3CDFF 100%), linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
 
 			.handle {
+				height: 112rpx;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				padding: 20rpx;
+				padding: 0px 24rpx;
+				position: relative;
+
+				.head_left {
+					font-size: 40rpx;
+				}
 
-				.head_left {}
+				.center {
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%, -50%);
+					font-size: 36rpx;
+					font-weight: 600;
+				}
 
 				.head_right {
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
-					span{
-						width: 80rpx;
-						height: 50rpx;
+
+					span {
+						width: 40rpx;
+						height: 40rpx;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 					}
+
 					.manage {
 						// width: 150rpx;
-						margin-left: 40rpx;
-						padding: 5rpx 10rpx;
-						border: 1px solid #999;
+						margin-left: 28rpx;
 					}
 				}
 			}
@@ -176,18 +260,29 @@
 			.type {
 				display: flex;
 				background-color: #fff;
-				border-top: 1px solid #999;
 
 				.type_item {
-					width: 20%;
-					height: 80rpx;
+					width: 25%;
+					height: 75rpx;
 					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;
+					}
 				}
 
 				.active {
-					background-color: #999;
+					color: #333;
 				}
 			}
 		}
@@ -195,40 +290,102 @@
 		.list {
 			width: 100%;
 			flex: 1;
-			padding: 0px 20rpx;
-			margin-top: 20rpx;
+			// padding: 0px 20rpx;
+			overflow-y: auto;
 
 			.product_item {
 				width: 100%;
 				background-color: #fff;
 				border-radius: 20rpx;
+				padding: 20rpx 40rpx;
+				margin-top: 20rpx;
 
 				.status {
 					display: flex;
-					justify-content: space-between;
-					border-bottom: 1px solid #ccc;
-					padding: 20rpx;
+					align-items: center;
+
+					.round {
+						display: flex;
+						align-items: center;
+						color: #49A03F;
+					}
+
+					.round::before {
+						content: "";
+						display: inline-block;
+						width: 9rpx;
+						height: 9rpx;
+						background: #49A03F;
+						border-radius: 50%;
+						margin-right: 8rpx;
+					}
+
+					.no {
+						color: #666666;
+					}
+
+					.no::before {
+						content: "";
+						display: inline-block;
+						width: 9rpx;
+						height: 9rpx;
+						background: #666666;
+						border-radius: 50%;
+						margin-right: 8rpx;
+					}
+
+					.line {
+						display: block;
+						width: 1rpx;
+						height: 20rpx;
+						background: #d9d9d9;
+						margin: 0 12rpx;
+					}
 				}
 
 				.details {
+					width: 100%;
+					height: auto;
+					min-height: 132rpx;
+					height: 132rpx;
 					display: flex;
 					align-items: center;
-					height: 150rpx;
-					padding: 20rpx;
+					margin-top: 20rpx;
 
 					.img {
-						width: 100rpx;
-						margin-right: 20rpx;
+						margin-right: 16rpx;
+
 						image {
-							width: 100rpx;
-							height: 100rpx;
+							width: 132rpx;
+							height: 132rpx;
 						}
 					}
 
 					.data {
 						flex: 1;
+						height: 100%;
 						display: flex;
 						flex-direction: column;
+						justify-content: space-between;
+						font-weight: 600;
+						font-style: 28rpx;
+
+						.repertory {
+							font-size: 24rpx;
+							display: flex;
+							align-items: center;
+							color: #666;
+							font-weight: 400;
+
+							span {
+								display: block;
+								width: 1rpx;
+								height: 20rpx;
+								background: #d9d9d9;
+								margin: 0 12rpx;
+							}
+						}
+
 						.price {
 							display: flex;
 							align-items: center;
@@ -239,22 +396,51 @@
 								font-size: 26rpx;
 								margin-left: 20rpx;
 								font-weight: 400;
+
 							}
 						}
 					}
 
 					.tag {
-						height: 100%;
+						width: 40rpx;
+						height: 40rpx;
 						display: flex;
 						flex-direction: column;
 						align-items: center;
-						.frame{
-							display: block;
+
+						image {
 							width: 40rpx;
 							height: 40rpx;
-							border: 1px solid #ccc;
 						}
 					}
+
+				}
+
+				.btn_box {
+					width: 100%;
+					display: flex;
+					justify-content: end;
+					align-items: center;
+					margin-top: 20rpx;
+
+					.delist {
+						width: 100rpx;
+						height: 50rpx;
+						border-radius: 8rpx;
+						border: 1px solid #CCCCCC;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						font-size: 26rpx;
+						color: #666666;
+					}
+
+					.edit {
+						margin-left: 20rpx;
+						background: rgba(68, 154, 255, 0.05);
+						border: 1px solid #449AFF;
+						color: #449AFF;
+					}
 				}
 			}
 		}
@@ -268,24 +454,148 @@
 			align-items: center;
 
 			.btn {
-				width: 50%;
-				height: 80rpx;
+				width: 672rpx;
+				height: 76rpx;
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				background-color: #ccc;
+				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+				border-radius: 75rpx;
+				font-size: 28rpx;
+				color: #FFFFFF;
+
+				image {
+					width: 40rpx;
+					height: 40rpx;
+					margin-right: 10rpx;
+				}
 			}
-			.operate{
+
+			.operate {
 				width: 100%;
 				display: flex;
-				justify-content: space-around;
-				.all{
+				// justify-content: space-between;
+				align-items: center;
+				padding: 0px 20rpx;
+
+				.delete {
+					width: 205rpx;
+					height: 76rpx;
+					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+					border-radius: 49rpx;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-right: 24rpx;
+					margin-left: 140rpx;
+				}
+
+				.delist {
+					margin-left: 0rpx;
+					background: linear-gradient(90deg, #FFA05B 0%, #FF7918 100%);
+				}
+
+				.all {
 					width: 25%;
-					height: 60rpx;
-					border: 1px solid #999;
+					// height: 60rpx;
+					// border: 1px solid #999;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 10rpx;
+					}
+				}
+			}
+		}
+
+		.popup {
+			width: 100vw;
+			height: 100vh;
+			position: fixed;
+			top: 0;
+			left: 0;
+			background: rgba(0, 0, 0, 0.4);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.content {
+				width: 570rpx;
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				padding: 0px 24rpx;
+				padding-bottom: 16rpx;
+
+				.title {
+					width: 100%;
+					height: 86rpx;
+					font-size: 32rpx;
+					color: #333333;
+					font-weight: 600;
+					border-bottom: 1px solid #EEEEEE;
 					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.center {
+					font-size: 30rpx;
+					color: #333333;
+					line-height: 35rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
 					justify-content: center;
+					padding-top: 28rpx;
+					border-bottom: 1px solid #EEEEEE;
+					padding-bottom: 40rpx;
+					margin-bottom: 16rpx;
+
+					.error {
+						text-align: center;
+					}
+
+					image {
+						width: 100rpx;
+						height: 100rpx;
+						margin-bottom: 10rpx;
+					}
+				}
+
+				.sub {
+					width: 320rpx;
+					height: 68rpx;
+					border-radius: 66rpx;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					display: flex;
 					align-items: center;
+					justify-content: center;
+					margin: 0rpx auto;
+
+					.button {
+						width: 320rpx;
+						height: 68rpx;
+						background: #449AFF;
+						border-radius: 66rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+
+				.start {
+					background: #53CC48;
+				}
+
+				.rest {
+					background: #FF8024;
 				}
 			}
 		}

pages/product/usable.vue

@@ -27,16 +27,14 @@
 			</u-radio>
 		</u-radio-group>
 	</view>
-
 		<view class="btn">
 			保存
 		</view>
 		<selectDate @confirm="handleConfirm" @close="closeSelectDate" v-if="isSelectDate" />
 	</view>
 </template>
-
 <script>
-	import selectDate from '@/components/select_date.vue'
+	import selectDate from '@/components/product/select_date.vue'
 	export default {
 		components: {
 			selectDate