商品添加

.env

@@ -7,13 +7,13 @@ NODE_ENV = 'production'
 VUE_APP_ENV = develop
 
 # 接口请求基地址
-VUE_APP_API_BASE_URL = https://delivery.ixiaokejia.com
+VUE_APP_API_BASE_URL = http://localhost:59982
 
 # 接口请求基地址
 VUE_APP_WEBSOCKET_BASE_URL = 
 
 # 图片基地址
-VUE_APP_IMAGE_BASE_URL = https://delivery.ixiaokejia.com
+VUE_APP_IMAGE_BASE_URL = http://localhost:59982
 VUE_APP_IMAGE_RESOURCE_URL = 
 
 # 微信小程序appId

.env.develop

@@ -7,13 +7,13 @@ NODE_ENV = 'production'
 VUE_APP_ENV = production
 
 # 接口请求基地址
-VUE_APP_API_BASE_URL = https://delivery.ixiaokejia.com
+VUE_APP_API_BASE_URL = http://localhost:59982
 
 # 接口请求基地址
 VUE_APP_WEBSOCKET_BASE_URL = 
 
 # 图片基地址
-VUE_APP_IMAGE_BASE_URL = https://delivery.ixiaokejia.com
+VUE_APP_IMAGE_BASE_URL = http://localhost:59982
 VUE_APP_IMAGE_RESOURCE_URL = 
 
 # 微信小程序appId

.env.production

@@ -7,13 +7,13 @@ NODE_ENV = 'production'
 VUE_APP_ENV = production
 
 # 接口请求基地址
-VUE_APP_API_BASE_URL = https://delivery.ixiaokejia.com
+VUE_APP_API_BASE_URL = http://localhost:59982
 
 # 接口请求基地址
 VUE_APP_WEBSOCKET_BASE_URL = 
 
 # 图片基地址
-VUE_APP_IMAGE_BASE_URL = https://delivery.ixiaokejia.com
+VUE_APP_IMAGE_BASE_URL = http://localhost:59982
 VUE_APP_IMAGE_RESOURCE_URL = 
 
 # 微信小程序appId

a.txt

@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL = https://delivery.ixiaokejia.com

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

@@ -1,286 +1,423 @@
 <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>
+    <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>
+                    <view class="load-box" v-if="viewLoading(upload)">
+                        <image src="/static/icon/loading.gif"></image>
+                    </view>
+                    <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)
-						}
-					});
+export default {
+    props: {
+        types: {
+            type: String,
+            default: "image",
+        },
+        value: {
+            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,
+        },
+        //上传图片大小 默认5M
+        upload_max: {
+            type: Number,
+            default: 5,
+        },
+    },
+    data() {
+        return {
+            // //上传的图片地址
+            // uploadImages: [],
+            //展示的图片地址
+            uploads: [],
+            // 超出限制数组
+            exceeded_list: [],
+
+            uploadUrl: "http://localhost:59982/Upload/Image",
+        };
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.uploads = val;
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        previewImage(e) {
+            var current = e.target.dataset.src;
+            uni.previewImage({
+                current: current,
+                urls: this.value,
+            });
+        },
+
+        viewLoading(str) {
+            if (str.indexOf("http://tmp/") !== -1) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        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
+                                ) {
+                                    let tempUrl = res.tempFiles[i].path;
+                                    this.uploads.push(tempUrl);
+                                    this.upload(tempUrl, (newUrl) => {
+                                        if (newUrl) {
+                                            let arr = [];
+                                            for (let item of this.uploads) {
+                                                if (item === tempUrl) {
+                                                    arr.push(newUrl);
+                                                } else {
+                                                    arr.push(item);
+                                                }
+                                            }
+                                            this.uploads = arr;
+                                            this.output();
+                                        } else {
+                                        }
+                                    });
+                                } else {
+                                    this.exceeded_list.push(
+                                        i === 0 ? 1 : i + 1
+                                    );
+                                    uni.showModal({
+                                        title: "提示",
+                                        content: `第${[
+                                            ...new Set(this.exceeded_list),
+                                        ].join(",")}张图片超出限制${
+                                            this.upload_max
+                                        }MB,已过滤`,
+                                    });
+                                }
+                            }
+                        },
+                        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;
+			// }
+			this.uploads.splice(index, 1);
+            this.output();
+            // uni.request({
+            //     url: this.deleteUrl,
+            //     method: "DELETE",
+            //     data: {
+            //         image: this.value[index],
+            //     },
+            //     success: (res) => {
+            //         if (res.data.status == 1) {
+            //             uni.showToast({
+            //                 title: "删除成功",
+            //             });
+            //             this.uploads.splice(index, 1);
+            //             this.output();
+            //         }
+            //     },
+            // });
+        },
+        upload(file, callback) {
+            let self = this;
+            if (!this.uploadUrl) {
+                uni.showModal({
+                    content: "请填写上传接口",
+                });
+                return;
+            }
+
+            uni.uploadFile({
+                header: {
+                    appId: self.config.appId,
+                    companyId: self.$store.state.user.user.companyId,
+                    userId: self.$store.state.user.user.id,
+                    Authorization: "Bearer " + self.token,
+                    StoreId: self.$store.state.common.curShop.id || "",
+                },
+                url: this.uploadUrl, //仅为示例，非真实的接口地址
+                filePath: file,
+                name: "file",
+                //请求参数
+                // formData: {
+                // 	'user': 'test'
+                // },
+                success: (uploadFileRes) => {
+                    let data = JSON.parse(uploadFileRes.data);
+                    if (data.success) {
+                        if (callback) {
+                            callback(data.data);
+                        }
+                        this.$emit("successImage", uploadFileRes);
+                    }
+                },
+                fail: () => {
+                    if (callback) {
+                        callback(false);
+                    }
+                },
+            });
+            // }
+        },
+
+        // 传输给父组件
+        output() {
+			const self = this;
+			let arr = [];
+			for(let item of self.uploads){
+				if(self.viewLoading(item)){
+
+				}else{
+					arr.push(item);
 				}
 			}
-		}
-	}
+            self.$emit("change", arr);
+        },
+    },
+    computed: {
+        token() {
+            return this.$store.state.user.token;
+        },
+    },
+};
 </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%;
-	}
+.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;
+}
+.load-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+.load-box image {
+    width: 100%;
+    height: 100%;
+}
+.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/pages/manage/add-good-form.vue

@@ -1,16 +1,40 @@
 <template>
-    <div class="page" :class="{'page--iphoneX': iphoneX}">
+    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
         <div class="form-card">
+            <div class="head">
+                <div class="tit">基本信息</div>
+                <div class="switch"></div>
+            </div>
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
+                    店铺：
+                </div>
+                <div class="box">
+                    <picker
+                        :mode="'selector'"
+                        :range="storeList"
+                        :range-key="'name'"
+                        @change="pickerStoreChange"
+                    >
+                        <input
+                            type="text"
+                            v-model="baseInfo._storeName"
+                            :disabled="true"
+                            placeholder="请选择"
+                        />
+                    </picker>
+                </div>
+            </section>
+            <section class="form-item">
+                <div class="label">
+                    <span class="required hide">*</span>
                     商品条码：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <input type="text" v-model="baseInfo.barCode" />
                 </div>
                 <div class="tool code-tool">
-                    <span class="generate">生成</span>
                     <my-image
                         class="scan-img"
                         @click="scan"
@@ -18,73 +42,215 @@
                     ></my-image>
                 </div>
             </section>
+
+            <section class="form-item">
+                <div class="label">
+                    <span class="required">*</span>
+                    商品标题：
+                </div>
+                <div class="box">
+                    <input type="text" v-model="baseInfo.name" />
+                </div>
+            </section>
+
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
-                    商品名称：
+                    商品编码：
+                </div>
+                <div class="box">
+                    <input type="text" v-model="baseInfo.code" />
+                </div>
+                <div class="tool code-tool">
+                    <span class="generate" @click="generateCode('code')"
+                        >生成</span
+                    >
+                </div>
+            </section>
+
+            <section class="form-item">
+                <div class="label">
+                    <span class="required hide">*</span>
+                    商品描述：
                 </div>
                 <div class="box">
-                    <input type="text" />
+                    <textarea
+                        v-model="baseInfo.description"
+                        :maxlength="1048"
+                        :auto-height="true"
+                    ></textarea>
                 </div>
             </section>
+
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
                     分类：
                 </div>
                 <div class="box">
-                    <picker :mode="'multiSelector'" :range="cateList">
-                        <input
-                            type="text"
-                            :disabled="true"
-                            placeholder="请选择"
-                        />
-                    </picker>
+                    <div
+                        class="type-tip"
+                        v-if="cateList.length === 0"
+                        @touchstart.stop
+                    >
+                        请先选择店铺
+                    </div>
+                    <div
+                        class="type-item"
+                        v-for="(item, index) of typeList"
+                        :key="index"
+                    >
+                        <picker
+                            :mode="'multiSelector'"
+                            :range="cateList"
+                            :range-key="'name'"
+                            @columnchange="typeColumnchange"
+                            @change="pickerTypeChange($event, index)"
+                        >
+                            <input
+                                type="text"
+                                :disabled="true"
+                                :value="item.name"
+                                placeholder="请选择"
+                            />
+                        </picker>
+                        <span class="remove-text" @click="typeRemove(index)"
+                            >删除</span
+                        >
+                    </div>
+                    <div class="add-type" @click="addType">增加分类</div>
                 </div>
             </section>
+        </div>
+        <div class="form-card">
+            <div class="head">
+                <div class="tit">规格库存</div>
+                <div class="switch"></div>
+            </div>
+
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
-                    重量：
+                    价格：
                 </div>
                 <div class="box">
-                    <input type="digit" />
+                    <input type="digit" v-model="baseInfo.price" />
                 </div>
                 <div class="tool">
-                    <span class="">kg</span>
+                    <span class="">元</span>
                 </div>
             </section>
+
             <section class="form-item">
                 <div class="label">
-                    <span class="required">*</span>
-                    售价：
+                    <span class="required hide">*</span>
+                    进货价：
                 </div>
                 <div class="box">
-                    <input type="digit" />
+                    <input type="digit" v-model="baseInfo.supplyPrice" />
                 </div>
                 <div class="tool">
                     <span class="">元</span>
                 </div>
             </section>
+
             <section class="form-item">
                 <div class="label">
-                    <span class="required">*</span>
+                    <span class="required hide">*</span>
+                    成本：
+                </div>
+                <div class="box">
+                    <input type="digit" v-model="baseInfo.cost" />
+                </div>
+                <div class="tool">
+                    <span class="">元</span>
+                </div>
+            </section>
+
+            <section class="form-item">
+                <div class="label">
+                    <span class="required hide">*</span>
                     划线价：
                 </div>
                 <div class="box">
-                    <input type="digit" />
+                    <input type="digit" v-model="baseInfo.tagPrice" />
                 </div>
                 <div class="tool">
                     <span class="">元</span>
                 </div>
             </section>
+
+            <section class="form-item">
+                <div class="label">
+                    <span class="required">*</span>
+                    重量：
+                </div>
+                <div class="box">
+                    <input type="digit" v-model="baseInfo.weight" />
+                </div>
+                <div class="tool">
+                    <span class="">克</span>
+                </div>
+            </section>
+
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
                     库存：
                 </div>
                 <div class="box">
-                    <input type="number" />
+                    <input type="digit" v-model="baseInfo.stock" />
+                </div>
+            </section>
+
+            <section class="form-item">
+                <div class="label">
+                    <span class="required">*</span>
+                    sku编码：
+                </div>
+                <div class="box">
+                    <input type="digit" v-model="baseInfo.skuCode" />
+                </div>
+                <div class="tool code-tool">
+                    <span class="generate" @click="generateCode('skuCode')"
+                        >生成</span
+                    >
+                </div>
+            </section>
+        </div>
+
+        <div class="form-card img-card">
+            <section class="form-img-item">
+                <div class="tit"><span class="required">*</span>主图</div>
+                <div class="list">
+                    <easy-upload
+                        :types="'image'"
+                        v-model="baseInfo.mainImg"
+                        :uploadCount="1"
+                        @change="minImgChange"
+                    ></easy-upload>
+                </div>
+            </section>
+            <section class="form-img-item">
+                <div class="tit"><span class="required">*</span>封面图</div>
+                <div class="list">
+                    <easy-upload
+                        :types="'image'"
+                        v-model="productForm.images"
+                        :uploadCount="100"
+                        @change="imagesChange"
+                    ></easy-upload>
+                </div>
+            </section>
+            <section class="form-img-item">
+                <div class="tit"><span class="required">*</span>详情图</div>
+                <div class="list">
+                    <easy-upload
+                        :types="'image'"
+                        v-model="productForm.detailImages"
+                        :uploadCount="100"
+                        @change="detailImagesChange"
+                    ></easy-upload>
                 </div>
             </section>
         </div>
@@ -105,11 +271,17 @@
                     <div class="box">
                         <radio-group @change="tempChange">
                             <label>
-                                <radio :value="true" />
+                                <radio
+                                    :value="true"
+                                    :checked="productForm.useTemplate === true"
+                                />
                                 <text>是</text>
                             </label>
                             <label>
-                                <radio :value="false" />
+                                <radio
+                                    :value="false"
+                                    :checked="productForm.useTemplate === false"
+                                />
                                 <text>否</text>
                             </label>
                         </radio-group>
@@ -117,11 +289,11 @@
                 </section>
                 <section class="form-item">
                     <div class="label">
-                        <span class="required">*</span>
+                        <span class="required hide">*</span>
                         初始销量：
                     </div>
                     <div class="box">
-                        <input type="number" />
+                        <input type="number" v-model="baseInfo.initialSale" />
                     </div>
                 </section>
                 <section class="form-item">
@@ -130,56 +302,52 @@
                         出售方式：
                     </div>
                     <div class="box">
-                        <picker :mode="'selector'" :range="sellType">
-                            <input type="text" :disabled="true"  placeholder="请选择"/>
+                        <picker
+                            :mode="'selector'"
+                            :range="sellType"
+                            :range-key="'key'"
+                            @change="pickerStatusChange"
+                        >
+                            <input
+                                type="text"
+                                :disabled="true"
+                                v-model="baseInfo._statusName"
+                                placeholder="请选择"
+                            />
                         </picker>
                     </div>
                 </section>
                 <section class="form-item">
                     <div class="label">
-                        <span class="required">*</span>
+                        <span class="required hide">*</span>
                         限购数：
                     </div>
                     <div class="box">
-                        <input type="number" />
+                        <input
+                            type="number"
+                            v-model="baseInfo.maxBuyableCount"
+                        />
                     </div>
                 </section>
-                <section class="form-item">
+                <!-- <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="请选择"/>
+                            <input
+                                type="text"
+                                :disabled="true"
+                                placeholder="请选择"
+                            />
                         </picker>
                     </div>
-                </section>
+                </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>
+        <button type="button" class="btn" @click="save">保存</button>
     </div>
 </template>
 
@@ -189,30 +357,91 @@ import easyUpload from "../../components/easy-upload/easy-upload";
 
 export default {
     name: "",
-    components: { MyImage,easyUpload },
+    components: { MyImage, easyUpload },
 
     // 数据
     data() {
         return {
+            sellType: [
+                { key: "立即出售", value: 1 },
+                { key: "放入仓库", value: 0 },
+            ], // 出售方式
+            supplierList: ["测试供应商"], // 供应商
+            storeList: [], // 店铺列表
             cateList: [], // 分类列表
-            sellType:['立即开售','放入仓库'], // 出售方式
-            supplierList:['测试供应商'], // 供应商
-            showOther: true,
-            mainImg:[],
-            coverImg:[],
-            detailImg:[],
+            showOther: true, // 显示其他
+
+            // 选中的分类列表
+            typeList: [{}],
+
+            // 基本信息表, _为前端临时用
+            baseInfo: {
+                storeId: "", // 店铺id
+                _storeName: "", // 店铺名 前台显示用
+                barCode: "", // 条码
+                name: "", // 标题
+                code: "", // 编码
+                description: "", // 描述
+                productTypeIds: [], // 分类
+
+                price: "", // 价格
+                supplyPrice: "", // 进货价
+                cost: "", // 成本
+                tagPrice: "", //划线价，单位为分
+                weight: "", //商品重量，单位为g
+                stock: "", // 库存
+                skuCode: "", // sku编码
+
+                initialSale: 0, // 初始销量
+                status: 1, // 出售方式 0-放入仓库（即没有上架），1-立即出售（即上架）
+                _statusName: "立即出售",
+                maxBuyableCount: 0, // 限购数
+
+                mainImage: "", // 主图 300 *300
+            },
+            productForm: {
+                useTemplate: false, // 是否使用模板
+
+                images: [], // 封面图
+                detailImages: [], // 详情图
+            },
+            mainImg: [],
+            coverImg: [],
+            detailImg: [],
         };
     },
-
-    async onShow() {
-        this.cateList = [
-            [1, 2, 3, 4, 5],
-            ["一", "二", "三", "四", "五"],
-        ];
+    onLoad() {
+        this.getStore();
     },
 
+    async onShow() {},
+
     // 函数
     methods: {
+        // 获取店铺
+        getStore() {
+            this.api.get("/Store/GetShopList").then((res) => {
+                this.storeList = res.data;
+            });
+        },
+
+        // 获取分类
+        getClassify(storeId) {
+            this.api
+                .get("/Product/GetProductType", {
+                    storeId,
+                })
+                .then((res) => {
+                    let arr = [res.data];
+                    if (res.data[0].children) {
+                        arr.push(res.data[0].children);
+                    } else {
+                        arr.push([]);
+                    }
+                    this.cateList = arr;
+                });
+        },
+
         // 条码扫描
         scan() {
             let self = this;
@@ -226,10 +455,11 @@ export default {
             });
         },
 
-        // 生成条码
-        generateBarCode() {
+        // 生成编码
+        generateCode(file) {
             // 后台编码生成方式
             const timestamp = Date.parse(new Date());
+            this.baseInfo[file] = timestamp;
         },
 
         // 其他面板切换
@@ -241,14 +471,186 @@ export default {
         tempChange(e) {
             let val = e.target.value;
             if (val === "true") {
+                this.productForm.useTemplate = true;
             } else {
+                this.productForm.useTemplate = false;
             }
         },
 
-        // 上传成功
-        successImage(e){
-            console.log(e);
-        }
+        // 主图
+        minImgChange(e) {
+            this.baseInfo.mainImage = e[0] || "";
+        },
+
+        // 封面图
+        imagesChange(e) {
+            this.productForm.images = e;
+        },
+
+        // 详情图
+        detailImagesChange(e) {
+            this.productForm.detailImages = e;
+        },
+
+        // picker变化
+        // 店铺
+        pickerStoreChange(e) {
+            let index = e.target.value;
+            let val = this.storeList[index];
+            this.baseInfo.storeId = val.id;
+            this.baseInfo._storeName = val.name;
+            this.typeList = [{}];
+            this.cateList = [];
+            this.getClassify(val.id);
+        },
+
+        // 分类
+        addType() {
+            this.typeList.push({});
+        },
+        typeRemove(i) {
+            this.typeList.splice(i, 1);
+            this.typeList = [...this.typeList];
+        },
+        pickerTypeChange(e, typeListIndex) {
+            console.log(e.detail);
+            let index1 = e.detail.value[0] || 0;
+            let index2 = e.detail.value[1] || 0;
+            let name = this.cateList[0][index1].name;
+            let id = this.cateList[0][index1].id;
+            if (this.cateList[1].length) {
+                name += "/" + this.cateList[1][index2].name;
+                id = this.cateList[1][index2].id;
+            }
+            console.log(name, id);
+            this.typeList[typeListIndex].name = name;
+            this.typeList[typeListIndex].id = id;
+            this.typeList = [...this.typeList];
+            let ids = [];
+            for (let item of this.typeList) {
+                if (item.id) {
+                    ids.push(item.id);
+                }
+            }
+            this.baseInfo.productTypeIds = ids;
+        },
+        typeColumnchange(e) {
+            let column = e.detail.column;
+            let index = e.detail.value;
+            if (column === 0) {
+                let val = this.cateList[0][index];
+                if (val.children) {
+                    this.cateList[1] = val.children;
+                } else {
+                    this.cateList[1] = [];
+                }
+                this.$forceUpdate();
+            }
+        },
+
+        // 出售方式
+        pickerStatusChange(e) {
+            let index = e.target.value;
+            let val = this.sellType[index];
+            this.baseInfo.status = val.value;
+            this.baseInfo._statusName = val.key;
+        },
+
+        // 保存
+        save() {
+            let requiredFile1 = [
+                {
+                    key: "storeId",
+                    msg: "请选择店铺",
+                },
+                {
+                    key: "name",
+                    msg: "请输入商品标题",
+                },
+                {
+                    key: "code",
+                    msg: "请输入商品编码",
+                },
+                {
+                    key: "productTypeIds",
+                    type: "array",
+                    msg: "请选择分类",
+                },
+                {
+                    key: "price",
+                    msg: "请输入价格",
+                },
+                {
+                    key: "weight",
+                    msg: "请输入重量",
+                },
+                {
+                    key: "stock",
+                    msg: "请输入库存",
+                },
+                {
+                    key: "skuCode",
+                    msg: "请输入sku编码",
+                },
+                {
+                    key: "mainImage",
+                    msg: "请上传主图",
+                },
+            ];
+            let requiredFile2 = [
+                {
+                    key: "images",
+                    type: "array",
+                    msg: "请上传封面图",
+                },
+                {
+                    key: "detailImages",
+                    type: "array",
+                    msg: "请上传详情图",
+                },
+            ];
+
+            for (let item of requiredFile1) {
+                if (item.type === "array") {
+                    if (this.baseInfo[item.key].length === 0) {
+                        return this.fn.showToast(item.msg);
+                    }
+                } else {
+                    if (!this.baseInfo[item.key]) {
+                        return this.fn.showToast(item.msg);
+                    }
+                }
+            }
+
+            for (let item of requiredFile2) {
+                if (item.type === "array") {
+                    if (this.productForm[item.key].length === 0) {
+                        return this.fn.showToast(item.msg);
+                    }
+                } else {
+                    if (!this.productForm[item.key]) {
+                        return this.fn.showToast(item.msg);
+                    }
+                }
+            }
+
+            let sendData = {
+                baseInfo: {
+                    ...this.baseInfo,
+                    companyId:'0520aa13-517d-4f69-88ef-c0b543372af7'
+                },
+                ...this.productForm,
+                hotSaleRecommendIds:[],
+                businessRecommendIds:[],
+                participated:false,
+                video:''
+            };
+            sendData.baseInfo.price = Number(sendData.baseInfo.price)* 100;
+            sendData.baseInfo.supplyPrice = Number(sendData.baseInfo.supplyPrice)* 100;
+            sendData.baseInfo.cost = Number(sendData.baseInfo.cost)* 100;
+            sendData.baseInfo.tagPrice = Number(sendData.baseInfo.tagPrice)* 100;
+            this.api.post("/product/SaveEdit", sendData).then((res) => {});
+        },
     },
 
     // 数据计算
@@ -277,11 +679,20 @@ export default {
         font-size: px(48);
     }
 }
+.required {
+    color: #f00;
+    font-size: px(44);
+    &.hide {
+        visibility: hidden;
+    }
+}
 .form-item {
     display: flex;
-    font-size: px(44);
-    height: px(140);
+    min-height: px(140);
+    padding: px(30) 0;
+    box-sizing: border-box;
     align-items: center;
+    font-size: px(44);
     & ~ .form-item {
         border-top: 1px solid #f1f1f1;
     }
@@ -293,6 +704,7 @@ export default {
     }
     .box {
         width: 100%;
+        position: relative;
         input {
             width: 100%;
         }
@@ -302,8 +714,10 @@ export default {
         color: #999;
         margin-left: px(10);
     }
-    .required {
-        color: #f00;
+    textarea,
+    input {
+        max-width: 100%;
+        width: 100%;
     }
 }
 .code-tool {
@@ -325,29 +739,61 @@ export default {
         flex-shrink: 0;
     }
 }
-radio-group{
-    label~label{
+radio-group {
+    label ~ label {
         margin-left: px(40);
     }
 }
-.img-card{
+.img-card {
     padding-top: px(30);
     padding-bottom: px(30);
 }
-.form-img-item{
-    .tit{
+.form-img-item {
+    .tit {
         padding: px(30);
         font-size: px(44);
     }
-    .list{
-
+    .list {
     }
 }
-.btn{
+.btn {
     margin-top: px(60);
     background-color: rgb(0, 188, 38);
     color: #fff;
     border-radius: 0;
     border: none;
 }
+.add-type {
+    width: 100%;
+    font-size: px(40);
+    color: #0097d1;
+    padding: px(20) 0;
+}
+.type-item {
+    padding: px(20) 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f1f1f1;
+    .remove-text {
+        color: red;
+        flex-shrink: 0;
+        margin-left: px(20);
+    }
+}
+.type-tip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    font-size: px(44);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
 </style>