增加商品表单

src/App.vue

@@ -68,4 +68,7 @@
     page {
         background-color: #f8f8f8;
     }
+    .page--iphoneX{
+        padding-bottom: px(30);
+    }
 </style>

src/components/easy-upload/easy-upload.vue

@@ -0,0 +1,286 @@
+<template>
+	<view>
+		<view class="upload">
+			<block v-for="(upload,index) in uploads" :key="index">
+				<view class="uplode-file">
+					<image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image>
+					<image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>
+					<video v-if="types == 'video'" class="uploade-img" :src="upload" controls>
+						<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
+					</video>
+				</view>
+			</block>
+			<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">
+				<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
+				<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
+			</view>
+		</view>	
+		<!-- <button type="primary" v-if="types == 'image'" @tap="upload">上传</button> -->
+	</view>
+</template>
+
+<script>
+	export default{
+		props: {
+			types: {
+				type: String,
+				default: 'image'
+			},
+			dataList: {
+				type: Array,
+				default: function() {
+					return []
+				}
+			},
+			clearIcon: {
+				type: String,
+				default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
+			},
+			uploadIcon: {
+				type: String,
+				default: ''
+			},
+			uploadUrl: {
+				type: String,
+				default: ''
+			},
+			deleteUrl: {
+				type: String,
+				default: ''
+			},
+			uploadCount: {
+				type: Number,
+				default: 1
+			},
+			//上传图片大小 默认3M
+			upload_max: {
+				type: Number,
+				default: 3
+			}
+		},
+		data(){
+			return {
+				//上传的图片地址
+				uploadImages: [],
+				//展示的图片地址
+				uploads: [],
+				// 超出限制数组
+				exceeded_list: [],
+			}
+		},
+		watch:{
+			dataList:{
+				handler(val){
+					this.uploads = val;
+				},
+				immediate: true
+			}
+		},
+		methods:{
+			previewImage (e) {
+				var current = e.target.dataset.src
+				uni.previewImage({
+					current: current,
+					urls: this.dataList
+				})
+			},
+			chooseUploads(){
+				switch (this.types){
+					case 'image': 
+						uni.chooseImage({
+							count: this.uploadCount - this.uploads.length, //默认9
+							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+							sourceType: ['album', 'camera'], //从相册选择
+							success: (res) => {
+								for(let i = 0; i< res.tempFiles.length; i++){
+									if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){
+										this.uploads.push(res.tempFiles[i].path)
+										this.uploadImages.push(res.tempFiles[i].path)
+									}else {
+										this.exceeded_list.push(i === 0 ? 1 : i + 1);
+										uni.showModal({
+											title: '提示',
+											content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`
+										});
+									}
+								}
+								this.upload();
+							},
+							fail: (err) => {
+								uni.showModal({
+									content: JSON.stringify(err)
+								});
+							}
+						});
+					break;
+					case 'video' :
+						uni.chooseVideo({
+							sourceType: ['camera', 'album'],
+							success: (res) => {
+								if(Math.ceil(res.size / 1024) < this.upload_max * 1024){
+									this.uploads.push(res.tempFilePath)
+									uni.uploadFile({
+										url: this.uploadUrl, //仅为示例，非真实的接口地址
+										filePath: res.tempFilePath,
+										name: 'file',
+										//请求参数
+										formData: {
+											'user': 'test'
+										},
+										success: (uploadFileRes) => {
+											this.$emit('successVideo',uploadFileRes)
+										}
+									});
+								}else {
+									uni.showModal({
+										title: '提示',
+										content: `第${[...new Set(this.exceeded_list)].join(',')}张视频超出限制${this.upload_max}MB,已过滤`
+									});
+								}
+							},
+							fail: (err) => {
+								uni.showModal({
+									content: JSON.stringify(err)
+								});
+							}
+						});
+					break;
+				}
+			},
+			delImage(index){
+				//第一个是判断app或者h5的 第二个是判断小程序的
+				if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == 'http://tmp/'){
+					this.uploads.splice(index,1)
+					return;
+				};
+				if(!this.deleteUrl) {
+					uni.showModal({
+						content: '请填写删除接口'
+					});
+					return;
+				};
+				uni.request({
+					url: this.deleteUrl,
+					method: 'DELETE',
+					data: {
+						image: this.dataList[index]
+					},
+					success: res => {
+						if(res.data.status == 1) {
+							uni.showToast({
+								title: '删除成功'
+							})
+							this.uploads.splice(index,1)
+						}
+					},
+				});
+			},
+			upload(){
+				console.log(this.uploadUrl);
+				if(!this.uploadUrl) {
+					uni.showModal({
+						content: '请填写上传接口'
+					});
+					return;
+				};
+				for (let i of this.uploadImages) {
+					uni.uploadFile({
+						url: this.uploadUrl, //仅为示例，非真实的接口地址
+						filePath: i,
+						name: 'file',
+						//请求参数
+						formData: {
+							'user': 'test'
+						},
+						success: (uploadFileRes) => {
+							this.$emit('successImage',uploadFileRes)
+						}
+					});
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.upload {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+	.uplode-file {
+		margin: 10upx;
+		width: 210upx;
+		height: 210upx;
+		position: relative;
+	}
+	.uploade-img {
+		display: block;
+		width: 210upx;
+		height: 210upx;
+	}
+	.clear-one{
+		position: absolute;
+		top: -10rpx;
+		right: 0;
+	}
+	.clear-one-icon{
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		top: 0;
+		right: 0;
+		z-index: 9;
+	}
+	.uploader-input-box {
+		position: relative;
+		margin:10upx;
+		width: 208upx;
+		height: 208upx;
+		border: 2upx solid #D9D9D9;
+	}
+	.uploader-input-box:before,
+	.uploader-input-box:after {
+		content: " ";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		background-color: #D9D9D9;
+	}
+	.uploader-input-box:before {
+		width: 4upx;
+		height: 79upx;
+	}
+	.uploader-input-box:after {
+		width: 79upx;
+		height: 4upx;
+	}
+	.uploader-input-box:active {
+		border-color: #999999;
+	}
+	.uploader-input-box:active:before,
+	.uploader-input-box:active:after {
+		background-color: #999999;
+	}
+	.uploader-input {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+	}
+	.uploader-icon{
+		position: relative;
+		margin:10upx;
+		width: 208upx;
+		height: 208upx;
+	}
+	.uploader-icon .image-cion{
+		width: 100%;
+		height: 100%;
+	}
+</style>

src/components/easy-upload/readme.md

@@ -0,0 +1,42 @@
+### easy-upload 组件
+
+使用方法
+```js
+	<easy-upload
+	:dataList="imageList" uploadUrl="http://localhost:3000/upload" :types="category"
+	deleteUrl='http://localhost:3000/upload' :uploadCount="6"
+	@successImage="successImage" @successVideo="successvideo"
+	></easy-upload>
+
+	//使用 hbuilderX (easycom) 可以直接使用
+	//在data中绑定 
+	//imageList 对应上边绑定的imageList category对应上边的category
+	data() {
+		return {
+			imageList: [],
+			category: 'image'
+		}
+	},
+	
+```
+
+|  参数   | 类型  | 是否必填 | 参数描述
+|  ----  | ----  | ---- | ----
+| types  | String | 否 | 上传类型 image/video
+| dataList  | Array | 否 | 图片/视频数据展示
+| clearIcon  | String | 否 | 删除图标(可以换成自己的图片)
+| uploadIcon  | String | 否 | 上传图标(可以换成自己的图片)
+| uploadUrl  | String | 否 | 上传的接口
+| deleteUrl  | String | 否 | 删除的接口
+| uploadCount  | Number | 否 | 上传图片最大个数(默认为一张)
+| upload_max  | Number | 否 | 上传大小(默认为3M)
+| upload_max  | Number | 否 | 上传大小(默认为3M)
+| upload_max  | Number | 否 | 上传大小(默认为3M)
+
+|  事件  | 是否必填 | 参数描述
+|  ---- | ---- | ----
+| successImage  | 否 | 上传图片成功事件
+| successVideo  |  否 | 上传视频成功回调
+
+示例项目中有服务端代码 (node.js)
+

src/pages/manage/add-good-form.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="page">
+    <div class="page" :class="{'page--iphoneX': iphoneX}">
         <div class="form-card">
             <section class="form-item">
                 <div class="label">
@@ -9,8 +9,13 @@
                 <div class="box">
                     <input type="text" />
                 </div>
-                <div class="tool">
-                    <span class="unit">元</span>
+                <div class="tool code-tool">
+                    <span class="generate">生成</span>
+                    <my-image
+                        class="scan-img"
+                        @click="scan"
+                        src="/static/icon/scan.png"
+                    ></my-image>
                 </div>
             </section>
             <section class="form-item">
@@ -28,7 +33,13 @@
                     分类：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <picker :mode="'multiSelector'" :range="cateList">
+                        <input
+                            type="text"
+                            :disabled="true"
+                            placeholder="请选择"
+                        />
+                    </picker>
                 </div>
             </section>
             <section class="form-item">
@@ -37,7 +48,10 @@
                     重量：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <input type="digit" />
+                </div>
+                <div class="tool">
+                    <span class="">kg</span>
                 </div>
             </section>
             <section class="form-item">
@@ -46,7 +60,10 @@
                     售价：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <input type="digit" />
+                </div>
+                <div class="tool">
+                    <span class="">元</span>
                 </div>
             </section>
             <section class="form-item">
@@ -55,7 +72,10 @@
                     划线价：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <input type="digit" />
+                </div>
+                <div class="tool">
+                    <span class="">元</span>
                 </div>
             </section>
             <section class="form-item">
@@ -64,28 +84,172 @@
                     库存：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <input type="number" />
+                </div>
+            </section>
+        </div>
+
+        <div class="form-card">
+            <div class="head">
+                <div class="tit">其他信息</div>
+                <div class="switch">
+                    <switch :checked="showOther" @change="otherChange"></switch>
+                </div>
+            </div>
+            <block v-if="showOther">
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        模板详情：
+                    </div>
+                    <div class="box">
+                        <radio-group @change="tempChange">
+                            <label>
+                                <radio :value="true" />
+                                <text>是</text>
+                            </label>
+                            <label>
+                                <radio :value="false" />
+                                <text>否</text>
+                            </label>
+                        </radio-group>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        初始销量：
+                    </div>
+                    <div class="box">
+                        <input type="number" />
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        出售方式：
+                    </div>
+                    <div class="box">
+                        <picker :mode="'selector'" :range="sellType">
+                            <input type="text" :disabled="true"  placeholder="请选择"/>
+                        </picker>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        限购数：
+                    </div>
+                    <div class="box">
+                        <input type="number" />
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        供应商：
+                    </div>
+                    <div class="box">
+                        <picker :mode="'selector'" :range="supplierList">
+                            <input type="text" :disabled="true" placeholder="请选择"/>
+                        </picker>
+                    </div>
+                </section>
+            </block>
+        </div>
+
+        <div class="form-card img-card">
+            <section class="form-img-item">
+                <div class="tit">封面图</div>
+                <div class="list">
+                    <easy-upload :types="'image'" :dataList="coverImg" :uploadUrl="'http://localhost:3000/upload'" :uploadCount="1" @successImage="successImage"></easy-upload>
+                </div>
+            </section>
+            <section class="form-img-item">
+                <div class="tit">主图</div>
+                <div class="list">
+                    <easy-upload :types="'image'" :dataList="mainImg" :uploadUrl="'http://localhost:3000/upload'" :uploadCount="100" @successImage="successImage"></easy-upload>
+                </div>
+            </section>
+            <section class="form-img-item">
+                <div class="tit">详情图</div>
+                <div class="list">
+                    <easy-upload :types="'image'" :dataList="detailImg" :uploadUrl="'http://localhost:3000/upload'" :uploadCount="100" @successImage="successImage"></easy-upload>
                 </div>
             </section>
         </div>
+
+        <button type="button" class="btn">保存</button>
     </div>
 </template>
 
 <script>
 import MyImage from "../../components/image/index";
+import easyUpload from "../../components/easy-upload/easy-upload";
 
 export default {
     name: "",
-    components: { MyImage },
+    components: { MyImage,easyUpload },
 
     // 数据
     data() {
-        return {};
+        return {
+            cateList: [], // 分类列表
+            sellType:['立即开售','放入仓库'], // 出售方式
+            supplierList:['测试供应商'], // 供应商
+            showOther: true,
+            mainImg:[],
+            coverImg:[],
+            detailImg:[],
+        };
+    },
+
+    async onShow() {
+        this.cateList = [
+            [1, 2, 3, 4, 5],
+            ["一", "二", "三", "四", "五"],
+        ];
     },
 
-    async onShow() {},
     // 函数
-    methods: {},
+    methods: {
+        // 条码扫描
+        scan() {
+            let self = this;
+            wx.scanCode({
+                success(res) {
+                    console.log(res);
+                },
+                fail(res) {
+                    console.log("扫码失败：", res);
+                },
+            });
+        },
+
+        // 生成条码
+        generateBarCode() {
+            // 后台编码生成方式
+            const timestamp = Date.parse(new Date());
+        },
+
+        // 其他面板切换
+        otherChange(e) {
+            this.showOther = !this.showOther;
+        },
+
+        // 模板详情切换
+        tempChange(e) {
+            let val = e.target.value;
+            if (val === "true") {
+            } else {
+            }
+        },
+
+        // 上传成功
+        successImage(e){
+            console.log(e);
+        }
+    },
 
     // 数据计算
     computed: {},
@@ -99,13 +263,26 @@ export default {
 .form-card {
     background-color: #fff;
     padding: 0 px(30);
+    & ~ .form-card {
+        margin-top: px(25);
+    }
+    .head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: px(140);
+        background-color: #fbfbfb;
+        border-bottom: 1px solid #f1f1f1;
+        border-top: 1px solid #f1f1f1;
+        font-size: px(48);
+    }
 }
 .form-item {
     display: flex;
     font-size: px(44);
     height: px(140);
     align-items: center;
-    &~.form-item {
+    & ~ .form-item {
         border-top: 1px solid #f1f1f1;
     }
     .label {
@@ -125,8 +302,52 @@ export default {
         color: #999;
         margin-left: px(10);
     }
-    .required{
+    .required {
         color: #f00;
     }
 }
+.code-tool {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .scan-img {
+        flex-shrink: 0;
+        width: px(80);
+        height: px(80);
+        /deep/ img {
+            width: px(80);
+            height: px(80);
+        }
+    }
+    .generate {
+        color: #0097d1;
+        margin-right: px(30);
+        flex-shrink: 0;
+    }
+}
+radio-group{
+    label~label{
+        margin-left: px(40);
+    }
+}
+.img-card{
+    padding-top: px(30);
+    padding-bottom: px(30);
+}
+.form-img-item{
+    .tit{
+        padding: px(30);
+        font-size: px(44);
+    }
+    .list{
+
+    }
+}
+.btn{
+    margin-top: px(60);
+    background-color: rgb(0, 188, 38);
+    color: #fff;
+    border-radius: 0;
+    border: none;
+}
 </style>