卢龙web端功能迁移
This commit is contained in:
		
							
								
								
									
										237
									
								
								project/lulong/AppIntegratingSupermarket/components/addGoods.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										237
									
								
								project/lulong/AppIntegratingSupermarket/components/addGoods.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,237 @@ | ||||
| <template> | ||||
|   <ai-detail class="appgoods"> | ||||
|     <template slot="title"> | ||||
|       <ai-title :title="id ? '编辑商品' : '添加商品'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"> | ||||
|       </ai-title> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-card title="基本信息"> | ||||
|         <template #content> | ||||
|           <el-form class="ai-form" :model="form" label-width="120px" ref="form"> | ||||
|             <el-form-item style="width: 100%" label="商品名称" prop="title" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]"> | ||||
|               <el-input type="input" size="small" v-model="form.title" clearable placeholder="请输入商品名称" :maxlength="50" show-word-limit></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item style="width: 100%" label="商品类型" prop="type" :rules="[{required: true, message: '请选择商品类型', trigger: 'change'}]"> | ||||
|               <ai-select | ||||
|                 v-model="form.type" | ||||
|                 placeholder="请选择商品类型" | ||||
|                 :selectList="dict.getDict('integralSGType')" | ||||
|                 @change="onChange"> | ||||
|               </ai-select> | ||||
|             </el-form-item> | ||||
|             <el-form-item  style="width: 100%" label="商品类型说明" prop="typeExplain"> | ||||
|               <el-input type="input" size="small" v-model="form.typeExplain" clearable placeholder="请输入商品类型说明" maxlength="50" show-word-limit></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item style="width: 100%" label="商品图片" prop="picUrl" :rules="[{required: true, message: '请选择商品图片', trigger: 'change'}]"> | ||||
|               <ai-uploader | ||||
|                 :instance="instance" | ||||
|                 isShowTip | ||||
|                 isCrop | ||||
|                 :cropOps="{ | ||||
|                   fixedNumber: [1, 1] | ||||
|                 }" | ||||
|                 v-model="form.picUrl" | ||||
|                 :limit="1"> | ||||
|                 <template slot="tips"> | ||||
|                   <p>建议尺寸:400*400,支持上传jpg/png格式图片,最多上传一张,单个图片大小不超过10M</p> | ||||
|                 </template> | ||||
|               </ai-uploader> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="零售价格" prop="retailPrice" :rules="[{required: true, message: '请输入零售价格', trigger: 'change'}]"> | ||||
|               <el-input-number style="width: 200px;" size="small" :precision="2" type="input" v-model="form.retailPrice" clearable placeholder="请输入零售价格" :min="0"></el-input-number> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-if="form.type === '2'" label="小程序appid" prop="jdAppid" :rules="[{required: true, message: '请输入京东小程序appid', trigger: 'blur'}]"> | ||||
|               <el-input type="input" size="small" v-model="form.jdAppid" clearable placeholder="请输入京东小程序appid"></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-if="form.type === '2'" style="width: 100%" label="小程序路径" prop="jdUrl" :rules="[{required: true, message: '请输入小程序路径', trigger: 'blur'}]"> | ||||
|               <el-input type="input" size="small" v-model="form.jdUrl" clearable placeholder="请输入小程序路径"></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-if="form.type === '1'" label="商品链接" prop="jdUrl" :rules="[{required: true, message: '请输入商品链接', trigger: 'blur'}]"> | ||||
|               <el-input type="input" size="small" v-model="form.jdUrl" clearable placeholder="请输入商品链接"></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item  style="width: 100%" label="商品描述" prop="description"> | ||||
|               <el-input type="textarea" :rows="4" size="small" v-model="form.description" clearable placeholder="请输入商品描述"></el-input> | ||||
|             </el-form-item> | ||||
|           </el-form> | ||||
|         </template> | ||||
|       </ai-card> | ||||
|     </template> | ||||
|     <template #footer> | ||||
|       <el-button @click="cancel">取消</el-button> | ||||
|       <el-button type="primary" @click="confirm">提交</el-button> | ||||
|     </template> | ||||
|   </ai-detail> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|   export default { | ||||
|     name: 'Add', | ||||
|  | ||||
|     props: { | ||||
|       instance: Function, | ||||
|       dict: Object, | ||||
|       params: Object | ||||
|     }, | ||||
|  | ||||
|     data () { | ||||
|       return { | ||||
|         form: { | ||||
|           typeExplain: '', | ||||
|           title: '', | ||||
|           description: '', | ||||
|           type: '', | ||||
|           jdUrl: '', | ||||
|           jdAppid: 'wx91d27dbf599dff74', | ||||
|           retailPrice: undefined, | ||||
|           picUrl: [] | ||||
|         }, | ||||
|         girdList: [], | ||||
|         cropOps: { | ||||
|           width: '800px', | ||||
|           height: '800px' | ||||
|         }, | ||||
|         id: '' | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     created () { | ||||
|       if (this.params && this.params.id) { | ||||
|         this.id = this.params.id | ||||
|         this.getInfo(this.params.id) | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     methods: { | ||||
|       getInfo (id) { | ||||
|         this.instance.post(`/app/appintegralsupermarketgoods/queryDetailById?id=${id}`).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.form = res.data | ||||
|             this.form.picUrl = [{ | ||||
|               url: res.data.picUrl | ||||
|             }] | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       onChange () { | ||||
|         if (this.form.type === '2') { | ||||
|           this.form.jdUrl = 'pages/gold/item/pages/detail/index?sku=60626768856&sourceType=wx-zhongwei&ea_ptag=17078.27.755' | ||||
|         } else { | ||||
|           this.form.jdUrl = '' | ||||
|         } | ||||
|       }, | ||||
|  | ||||
|       confirm () { | ||||
|         this.$refs.form.validate((valid) => { | ||||
|           if (valid) { | ||||
|             this.instance.post(`/app/appintegralsupermarketgoods/addOrUpdate`, { | ||||
|               ...this.form, | ||||
|               picUrl: this.form.picUrl[0].url, | ||||
|               id: this.params.id || '' | ||||
|             }).then(res => { | ||||
|               if (res.code == 0) { | ||||
|                 this.$message.success('提交成功') | ||||
|                 setTimeout(() => { | ||||
|                   this.cancel(true) | ||||
|                 }, 600) | ||||
|               } | ||||
|             }) | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       cancel (isRefresh) { | ||||
|         this.$emit('change', { | ||||
|           type: 'GoodsList', | ||||
|           isRefresh: !!isRefresh | ||||
|         }) | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   .appgoods { | ||||
|     .AppAnnounceDetail-select { | ||||
|       display: flex; | ||||
|       align-items: center; | ||||
|       min-height: 32px; | ||||
|       line-height: 1; | ||||
|       background: #F5F5F5; | ||||
|       border-radius: 4px; | ||||
|       border: 1px solid #D0D4DC; | ||||
|       cursor: pointer; | ||||
|       overflow: hidden; | ||||
|       transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | ||||
|  | ||||
|       &:hover { | ||||
|         border-color: #26f; | ||||
|       } | ||||
|  | ||||
|       & > i { | ||||
|         flex: 1; | ||||
|         height: 100%; | ||||
|         line-height: 32px; | ||||
|         padding: 0 12px; | ||||
|         color: #888888; | ||||
|         font-size: 14px; | ||||
|         font-style: normal; | ||||
|         border-right: 1px solid #D0D4DC; | ||||
|         background: #fff; | ||||
|       } | ||||
|  | ||||
|       .AppAnnounceDetail-select__input { | ||||
|         position: absolute; | ||||
|         left: 0; | ||||
|         top: 0; | ||||
|         z-index: -1; | ||||
|         opacity: 0; | ||||
|         height: 100%; | ||||
|       } | ||||
|  | ||||
|       .select-right { | ||||
|         height: 100%; | ||||
|         padding: 0 12px; | ||||
|         color: #222222; | ||||
|         font-size: 12px; | ||||
|         cursor: pointer; | ||||
|         transition: all ease 0.3s; | ||||
|  | ||||
|         &:hover { | ||||
|           opacity: 0.5; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .select-left { | ||||
|         display: flex; | ||||
|         flex-wrap: wrap; | ||||
|         flex: 1; | ||||
|         padding: 5px 0 0px 12px; | ||||
|         border-right: 1px solid #D0D4DC; | ||||
|         border-radius: 4px 0 0 4px; | ||||
|         background: #fff; | ||||
|  | ||||
|         em { | ||||
|           height: 22px; | ||||
|           line-height: 22px; | ||||
|           margin: 0 4px 5px 0; | ||||
|           color: #222222; | ||||
|           font-size: 12px; | ||||
|           font-style: normal; | ||||
|         } | ||||
|  | ||||
|         span { | ||||
|           height: 22px; | ||||
|           line-height: 22px; | ||||
|           margin: 0 4px 5px 0; | ||||
|           padding: 0 8px; | ||||
|           font-size: 12px; | ||||
|           color: #222222; | ||||
|           background: #F3F4F7; | ||||
|           border-radius: 2px; | ||||
|           border: 1px solid #D0D4DC; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user