update

mobile-code/src/components/plugin/dropdown-list.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="tui-selected-class tui-dropdown-list" :style="{width: width+'rpx', height:selectHeight?selectHeight+'rpx':'auto'}">
+		<slot name="selectionbox"></slot>
+		<view class="tui-dropdown-view" :class="[show?'tui-dropdownlist-show':'']" :style="{background:bgcolor,height:show?height+'rpx':0,top:top+'rpx'}">
+			<slot name="dropdownbox"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiDropdownList',
+	props: {
+		// 控制显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色
+		bgcolor: {
+			type: String,
+			default: 'none'
+		},
+		// top  rpx
+		top: {
+			type: Number,
+			default: 0
+		},
+		// 下拉框宽度
+		width: {
+			type: Number,
+			default: 200
+		},
+		// 下拉框高度 rpx
+		height: {
+			type: Number,
+			default: 0
+		},
+		// 选择框高度 单位rpx
+		selectHeight: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.tui-dropdown-list {
+		position: relative;
+	}
+
+	.tui-dropdown-view {
+		width: 100%;
+		overflow: hidden;
+		position: absolute;
+		z-index: 9999;
+		left: 0;
+		/* opacity: 0; */
+		visibility: hidden;
+		transition: all 0.2s ease-in-out;
+
+	}
+
+	.tui-dropdownlist-show {
+		/* opacity: 1; */
+		visibility: visible;
+	}
+</style>

mobile-code/src/pages/goodsManage/category.vue

@@ -1,13 +1,57 @@
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<!-- 编辑 -->
+		<modal-module :show="modifyModal" @cancel="modalCancel" @click="modalClick" title="编辑" padding="30rpx 30rpx">
+			<template v-slot:content>
+				<div class="app-modal-input-wrap modify-modal">
+					<div class="inp-list-line">
+						<div class="line-label">分类名称</div>
+						<div class="line-input">
+							<input type="text" :adjust-position="false" class="inp-input" placeholder="填价格，图片可当商品卖(选填)">
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">排序</div>
+						<div class="line-input">
+							<input type="text" :adjust-position="false" class="inp-input" placeholder="默认排序最新在前面">
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">启用状态</div>
+						<div class="line-input" style="justify-content: flex-start">
+							<switch checked @change="switchChangeFn" />
+						</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
+	</div>
 </template>
 
 <script>
+import ModalModule from '@/components/plugin/modal'
 export default {
-	name: 'category-manage'
+	name: 'category-manage',
+	components: {
+		ModalModule
+	},
+	data() {
+		return {
+			modifyModal: true
+		}
+	},
+	methods: {
+		switchChangeFn() {}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
-
+// 编辑弹窗
+.modify-modal {
+	.line-label {
+		width: 140px;
+		flex-shrink: 0;
+	}
+}
 </style>

mobile-code/src/pages/goodsManage/img-store.vue

@@ -1,6 +1,53 @@
 <template>
-	<div class="app-content">
-		<!-- 图片上传成功！ -->
+	<div class="app-content" @click="dropdownShow = false">
+		<!-- bar -->
+		<div class="bar-wrap">
+			<dropdown-list :show="dropdownShow" :top="60" :width="400" :height="400">
+				<template v-slot:selectionbox>
+					<div class="sel-open-btn" @click.stop="dropdownShow = true">
+						<span>全部</span>
+						<i class="iconfont iconsanjiao_xia"></i>
+					</div>
+				</template>
+				<template v-slot:dropdownbox>
+					<div class="sel-list-wrap">
+						<scroll-view scroll-y class="tui-dropdown-scroll">
+							<div class="sel-list">花束</div>
+							<div class="sel-list">花盒</div>
+							<div class="sel-list">开业花篮</div>
+						</scroll-view>
+					</div>
+				</template>
+			</dropdown-list>
+			<div>
+				<i class="iconfont iconfenxiang1"></i>
+				<span>分享</span>
+			</div>
+		</div>
+		<!-- list -->
+		<div class="list-wrap">
+			<div class="list" v-for="(item, index) in 10" :key="index">
+				<div class="list-img">
+					<img src="../../static/images/extension.png" alt="" mode="widthFix" >
+				</div>
+				<div class="list-det">
+					<div class="app-size-28">天使没人</div>
+					<div class="flex-center-between">
+						<div v-if="index == 4" class="app-price">￥8551</div>
+						<div v-else class="app-color-3">暂无</div>
+						<div>
+							<i class="iconfont iconcaozuo"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- button -->
+		<div class="app-footer">
+			<button class="admin-button-com middle default">查看分类</button>
+			<button class="admin-button-com middle blue">新增</button>
+		</div>
+		<!-- 图片上传成功弹窗！ -->
 		<modal-module :show="settingModal" :custom="true" @cancel="modalCancel" @click="modalClick" padding="30rpx 30rpx">
 			<template>
 				<div class="upload-confirm-wrap">
@@ -34,8 +81,8 @@
 					</div>
 					<!-- button -->
 					<div class="redeem-btn">
-						<div class="admin-button-com default big" @click="modalCancel">取消</div>
-						<div class="admin-button-com blue big">确定</div>
+						<button class="admin-button-com default big" @click="modalCancel">取消</button>
+						<button class="admin-button-com blue big">确定</button>
 					</div>
 				</div>
 			</template>
@@ -45,13 +92,16 @@
 
 <script>
 import ModalModule from '@/components/plugin/modal'
+import DropdownList from '@/components/plugin/dropdown-list'
 export default {
 	name: 'image-store',
 	components: {
-		ModalModule
+		ModalModule,
+		DropdownList
 	},
 	data() {
 		return {
+			dropdownShow: false,
 			settingModal: false,
 			// modal 选择分类
 			selBtnData: [
@@ -88,6 +138,75 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+	.app-content {
+		min-height: calc(100vh - 200px);
+		padding-top: 100px;
+		padding-bottom: 100px;
+	}
+	// bar
+	.bar-wrap {
+		position: fixed;
+		top: 0;
+		width: 100%;
+		height: 80px;
+		background-color: #fff;
+		@include disFlex(center, space-between);
+		font-size: 28px;
+		color: $fontColor2;
+		& > div {
+			padding: 0 30px;
+		}
+		.iconfont {
+			color: $fontColor2;
+		}
+		.iconsanjiao_xia {
+			font-size: 24px;
+			margin-left: 10px;
+		}
+		.iconfenxiang1 {
+			font-size: 36px;
+			margin-right: 10px;
+		}
+		// 下拉框
+		.sel-open-btn {
+			padding-left: 30px;
+		}
+		.sel-list-wrap {
+			background-color: #fff;
+			box-shadow: 6px 6px 10px #cccccc;
+			.sel-list {
+				padding: 20px 30px;
+				// border-top: 1px solid $borderColor;
+			}
+		}
+	}
+	// list
+	.list-wrap {
+		@include disFlex(flex-start, flex-start);
+		flex-wrap: wrap;
+		.list {
+			width: 30%;
+			margin-left: 2.5%;
+			margin-bottom: 20px;
+			background-color: #fff;
+			.list-det {
+				padding: 10px;
+				& > div {
+					margin-top: 10px;
+				}
+				.iconfont {
+					color: $fontColor3;
+				}
+			}
+		}
+	}
+	// 按钮
+	.app-footer {
+		justify-content: space-evenly;
+		.admin-button-com {
+			width: 46%;
+		}
+	}
 	// 弹窗
 	.upload-confirm-wrap {
 		.modal-tit {
@@ -127,7 +246,7 @@ export default {
 			margin-top: 40px;
 			width: 100%;
 			.admin-button-com {
-				width: 40%;
+				width: 48%;
 			}
 		}
 	}

mobile-code/src/static/iconfont/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 1525256 */
-  src: url('https://at.alicdn.com/t/font_1525256_5tb21npupq.eot');
-  src: url('https://at.alicdn.com/t/font_1525256_5tb21npupq.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_1525256_5tb21npupq.svg#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.eot');
+  src: url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_1525256_gpszk1blxa.svg#iconfont') format('svg');
 }
 
 .iconfont {
@@ -24,6 +24,14 @@
   content: "\e607";
 }
 
+.iconsanjiao_xia:before {
+  content: "\e631";
+}
+
+.iconsanjiaoshang:before {
+  content: "\e643";
+}
+
 .iconcaidan:before {
   content: "\e65d";
 }