update

mobile-code/src/pages/ad/list.vue

@@ -17,8 +17,10 @@
 								<span :style="{color: true ? '#09BB07' : '#FF0000'}">启用</span>
 							</div>
 						</div>
-						<div class="operate-icon">
-							<i class="iconfont" :class="[ operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
+						<div class="operate-icon-wrap">
+							<div class="operate-icon">
+								<i class="iconfont" :class="[ operateIndex == index ? 'iconcaozuojihuo' : 	'iconcaozuo']"></i>
+							</div>
 						</div>
 					</div>
 				</div>

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

@@ -1,13 +1,152 @@
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<!-- 商品基本信息 -->
+		<div class="module-com input-line-wrap">
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title required">名称</div>
+				<input v-model="form.receiveUserName" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="50" type="number" />
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">已售</div>
+				<input v-model="form.receiveUserName" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="50" type="number" />
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">库存</div>
+				<input v-model="form.receiveUserName" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="50" type="number" />
+			</tui-list-cell>
+			<tui-list-cell class="line-cell category-wrap" :hover="false">
+				<div class="tui-title">类型</div>
+				<div class="tui-input">
+					<button class="admin-button-com default" v-for="(item, index) in 6" :key="index">M</button>
+				</div>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">价格</div>
+				<input v-model="form.receiveUserName" placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入" maxlength="50" type="number" />
+				<div class="tui-prompt">元</div>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :arrow="true">
+				<div class="tui-title">分类</div>
+				<div v-if="form.receiveFullAddress" class="tui-input">{{ form.receiveFullAddress }}</div>
+				<div v-else class="tui-placeholder">请选择</div>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">节假日自动涨价</div>
+				<label for="autoPrice" class="tui-input">
+					<checkbox id="autoPrice" class="ljd-checkbox" checked @change="giftChange"></checkbox>
+					<span>需要</span>
+				</label>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">配送方式</div>
+				<label for="autoPrice" class="tui-input">
+					<checkbox id="autoPrice" class="ljd-checkbox" checked @change="giftChange"></checkbox>
+					<span>到店自提</span>
+				</label>
+			</tui-list-cell>
+			<tui-list-cell class="line-cell" :hover="false">
+				<div class="tui-title">运费</div>
+				<radio-group class="tui-input flex-center-between" @change="radioChange">
+					<label class="list" for="customLink">
+						<radio id="customLink" value="自定义链接" checked="checked" />
+						<span class="checkbox-text">按距离收费</span>
+					</label>
+					<label class="list" for="goodsLink">
+						<radio id="goodsLink" value="链接商品" />
+						<span class="checkbox-text">免运费</span>
+					</label>
+				</radio-group>
+			</tui-list-cell>
+		</div>
+		<!-- 商品图片 -->
+		<div class="module-com input-line-wrap goods-wrap">
+			<div class="module-tit">
+				<span>商品图片</span>
+				<span class="app-color-3">（最多上传4张）</span>
+			</div>
+			<div class="module-det">
+				<app-uploader :multiple="false" ref="appUploader" :imgList.sync="imgList" />
+			</div>
+		</div>
+		<!-- 商品简介 -->
+		<div class="module-com input-line-wrap summary-wrap">
+			<div class="module-tit">商品简介</div>
+			<div class="module-det">
+				<textarea class="goods-summary" placeholder-class="phcolor" @blur="bindTextAreaBlur" placeholder="请输入商品简介" />
+			</div>
+		</div>
+		<!-- button -->
+		<div class="app-footer">
+			<button class="admin-button-com middle default">上架出售</button>
+			<button class="admin-button-com middle blue">加入仓库</button>
+		</div>
+	</div>
 </template>
 
 <script>
+import TuiListCell from '@/components/plugin/list-cell'
+import AppUploader from '@/components/app-uploader'
 export default {
-	name: 'goods-add'
+	name: 'goods-add',
+	components: {
+		TuiListCell,
+		AppUploader
+	},
+	data() {
+		return {
+			form: {},
+			imgList: []
+		}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
-
+	.app-content {
+		min-height: calc(100vh - 100px);
+		padding-bottom: 100px;
+	}
+	// 公共模块
+	.module-com {
+		margin-bottom: 20px;
+		background-color: #fff;
+		color: $fontColor2;
+		.module-tit {
+			padding: 20px 30px;
+			font-size: 28px;
+			// font-weight: 600;
+			// border-bottom: 1px solid $borderColor;
+		}
+		.module-det {
+			padding: 0 30px;
+		}
+	}
+	.category-wrap {
+		align-items: flex-start;
+		.tui-input {
+			@include disFlex(center, flex-start);
+			flex-wrap: wrap;
+			.admin-button-com {
+				width: 104px;
+				margin-left: 20px;
+				margin-bottom: 20px;
+				&:nth-child(4n + 1) {
+					margin-left: 0;
+				}
+			}
+		}
+	}
+	.summary-wrap {
+		.goods-summary {
+			height: 400px;
+			// font-size: 24px;
+		}
+	}
+	// button
+	.app-footer {
+		justify-content: space-evenly;
+		.admin-button-com {
+			width: 46%;
+		}
+	}
 </style>

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

@@ -1,57 +1,188 @@
 <template>
 	<div class="app-content">
-		<!-- 编辑 -->
+		<!-- list -->
+		<div class="list-wrap">
+			<div class="list" v-for="(item, index) in 10" :key="index">
+				<div class="list-index">1</div>
+				<div class="list-img">
+					<img src="../../static/images/extension.png" alt mode="center" />
+				</div>
+				<div class="list-det">
+					<div class="app-size-28 app-color-0">天使美人</div>
+					<div>红色</div>
+					<div class="list-operate">
+						<div class="operate-det">
+							<span>商品数: 19</span>
+							<span>销量: 1982</span>
+						</div>
+						<div class="operate-icon-wrap">
+							<div class="operate-icon">
+								<i class="iconfont" :class="[ index == 0 ? 'iconcaozuojihuo' : 	'iconcaozuo']"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- button -->
+		<div class="app-footer">
+			<button class="admin-button-com middle blue" @click="$util.pageTo('/pages/goodsManage/add')">添加分类</button>
+		</div>
+		<!-- modify -->
 		<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="填价格，图片可当商品卖(选填)">
+							<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 flex-strat">
+							<app-uploader :multiple="false" ref="appUploader" :imgList.sync="imgList" />
 						</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="默认排序最新在前面">
+							<input type="text" :adjust-position="false" class="inp-input" placeholder="默认排序最新在前面" />
 						</div>
 					</div>
-					<div class="inp-list-line">
+					<div class="inp-list-line switch-wrap">
 						<div class="line-label">启用状态</div>
-						<div class="line-input" style="justify-content: flex-start">
+						<div class="line-input flex-strat">
 							<switch checked @change="switchChangeFn" />
 						</div>
 					</div>
 				</div>
 			</template>
 		</modal-module>
+		<!-- operate -->
+		<operate-module v-show="true" :top="176" :right="30" :btnData="btnData" />
 	</div>
 </template>
 
 <script>
 import ModalModule from '@/components/plugin/modal'
+import AppUploader from '@/components/app-uploader'
+import OperateModule from '@/pages/admin/components/module/operate'
 export default {
 	name: 'category-manage',
 	components: {
-		ModalModule
+		ModalModule,
+		AppUploader,
+		OperateModule
 	},
 	data() {
 		return {
-			modifyModal: true
+			modifyModal: false,
+			imgList: [],
+			btnData: [
+				{
+					text: '编辑',
+					icon: 'iconbianji',
+					click: () => {
+						this.operateDelFn()
+					}
+				},
+				{
+					text: '启用',
+					icon: true ? 'iconqiyong' : 'iconjinyong',
+					click: () => {
+						this.operateDelFn()
+					}
+				},
+				{
+					text: '编辑',
+					icon: 'iconshanchu1',
+					click: () => {
+						this.operateDelFn()
+					}
+				},
+				{
+					text: '分享',
+					icon: 'iconfenxiang1',
+					click: () => {
+						this.operateDelFn()
+					}
+				}
+			]
 		}
 	},
 	methods: {
+		modalCancel() {
+			this.modifyModal = false
+		},
 		switchChangeFn() {}
 	}
 }
 </script>
 
 <style lang="scss" scoped>
-// 编辑弹窗
-.modify-modal {
-	.line-label {
-		width: 140px;
-		flex-shrink: 0;
+	.app-content {
+		min-height: calc(100vh - 100px);
+		padding-bottom: 100px;
+	}
+	// list
+	.list-wrap {
+		background-color: #fff;
+		.list {
+			@include disFlex(center, flex-start);
+			padding: 30px 0;
+			margin: 0 30px;
+			color: $fontColor3;
+			border-bottom: 1px solid $borderColor;
+			.list-index {
+				width: 50px;
+			}
+			.list-img {
+				width: 130px;
+				height: 130px;
+				img {
+					height: 100%;
+				}
+			}
+			.list-det {
+				width: calc(100% - 200px);
+				margin-left: 20px;
+				& > div {
+					margin-top: 14px;
+					&:first-child {
+						margin-top: 0;
+					}
+				}
+				.list-operate {
+					@include disFlex(center, space-between);
+					.operate-det {
+						& > span {
+							margin-left: 60px;
+							&:first-child {
+								margin-left: 0;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	// button
+	.app-footer {
+		justify-content: flex-end;
+		.admin-button-com {
+			width: 200px;
+			margin-right: 30px;
+		}
+	}
+	// 编辑弹窗
+	.modify-modal {
+		.line-label {
+			width: 140px;
+			flex-shrink: 0;
+		}
+		.switch-wrap {
+			margin-top: 30px;
+		}
 	}
-}
 </style>

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

@@ -35,8 +35,10 @@
 					<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 class="operate-icon-wrap">
+							<div class="operate-icon">
+								<i class="iconfont" :class="[ operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
+							</div>
 						</div>
 					</div>
 				</div>

mobile-code/src/static/css/common.scss

@@ -133,10 +133,10 @@ body {
 .input-line-wrap {
     // 是否必填
     .required::before {
-        content: '*';
-        color: #F04545;
+        content: "*";
+        color: #f04545;
         font-size: 28px;
-        margin-right: 8px;;
+        margin-right: 8px;
     }
     // 公共
     .line-cell {
@@ -167,15 +167,15 @@ body {
         .tui-placeholder {
             color: #ccc;
         }
-        .phcolor {
-            color: #ccc;
-        }
         .tui-prompt {
             flex-shrink: 0;
             color: $fontColor2;
             margin-left: 20px;
         }
     }
+    .phcolor {
+        color: #ccc;
+    }
     .prompt-text {
         color: $fontColor3;
         margin-top: 20px;
@@ -216,6 +216,9 @@ body {
         .line-input {
             width: 100%;
             @include disFlex(center, center);
+            &.flex-strat {
+                justify-content: flex-start;
+            }
             .inp-input,
             .inp-select {
                 width: 100%;
@@ -236,7 +239,7 @@ body {
                     height: 20px;
                     width: 20px;
                     border-width: 2px 2px 0 0;
-                    border-color: #BBBBBB;
+                    border-color: #bbbbbb;
                     border-style: solid;
                     transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
                     position: absolute;
@@ -256,16 +259,25 @@ body {
 
 // ======================= admin 操作弹窗 公共 =========================
 
-.operate-icon {
+.operate-icon-wrap {
     position: relative;
-    top: 20px;
-    left: 20px;
-    padding: 20px;
-    .iconcaozuojihuo {
-    	color: $mainColor;
+    width: 36px;
+    height: 36px;
+    .operate-icon {
+        position: absolute;
+        bottom: -18px;
+        left: -18px;
+        padding: 20px;
+        .iconcaozuojihuo {
+            color: $mainColor;
+        }
     }
 }
 
+.app-margin-left-20 {
+    margin-left: 20px;
+}
+
 // 带统计字数文本域
 .textarea_wrap {
     position: relative;

mobile-code/src/static/css/reset.scss

@@ -53,8 +53,21 @@ uni-picker .uni-picker-item {
 // 	display: block;
 // }
 
+// 修改radio大小
+.uni-radio-wrapper {
+    .uni-radio-input {
+        width: 42px;
+        height: 42px;
+    }
+    .uni-radio-input-checked {
+        background-color: $mainColor !important;
+        border-color: $mainColor !important;
+    }
+}
+
+// 修改checkbox 样式
 .ljd-checkbox,.ljd-checkbox .uni-checkbox-input {
-    width: 46px;
+    // width: 46px;
     height: 46px;
     border-radius: 50% !important;
 }
@@ -65,6 +78,10 @@ uni-picker .uni-picker-item {
 	border: none !important;
 }
 
+.ljd-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
+    font-size: 36px;
+}
+
 img {
     width: 100%;
     height: auto;