积分商品

project/pidu/app/AppGoods/components/Add.vue

@@ -1,23 +1,17 @@
 <template>
-  <ai-detail>
+  <ai-detail class="appgoods">
     <template slot="title">
-      <ai-title :title="pageTitle" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      <ai-title title="添加商品" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
       </ai-title>
     </template>
     <template slot="content">
       <ai-card title="基本信息">
         <template #content>
           <el-form :model="form" label-width="120px" ref="form">
-            <el-form-item label="标题" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
-              <el-input type="input" v-model="form.title" clearable placeholder="请输入..." maxlength="30" show-word-limit></el-input>
+            <el-form-item label="商品名称" prop="title" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
+              <el-input type="input" v-model="form.title" clearable placeholder="请输入商品名称" maxlength="30" show-word-limit></el-input>
             </el-form-item>
-            <el-form-item prop="areaId" label="发布地区" :rules="[{required: true, message: '请选择地区', trigger: 'change'}]">
-              <ai-area-select clearable always-show :instance="instance" v-model="form.areaId" :disabled-level="disabledLevel"></ai-area-select>
-            </el-form-item>
-            <el-form-item label="正文" prop="content" :rules="[{required: true, message: '请输入内容', trigger: 'change'}]">
-              <ai-editor v-model="form.content" :instance="instance"/>
-            </el-form-item>
-            <el-form-item label="缩略图" prop="thumbUrl">
+            <el-form-item label="商品图片" prop="thumbUrl">
               <ai-uploader
                 :instance="instance"
                 isShowTip
@@ -31,6 +25,46 @@
                 </template>
               </ai-uploader>
             </el-form-item>
+            <el-form-item label="商品单价" prop="title" :rules="[{required: true, message: '请输入商品单价', trigger: 'blur'}]">
+              <el-input-number type="input" v-model="form.title" clearable placeholder="请输入商品单价" :min="0"></el-input-number>
+            </el-form-item>
+            <el-form-item label="商品库存" prop="title" :rules="[{required: true, message: '请输入商品库存', trigger: 'blur'}]">
+              <el-input-number type="input" v-model="form.title" clearable placeholder="请输入商品库存" :min="0"></el-input-number>
+            </el-form-item>
+            <el-form-item label="商品名称" prop="title" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
+              <el-radio-group v-model="form.title">
+                <el-radio :label="3">不限</el-radio>
+                <el-radio :label="6">仅指定网格可见</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="商品名称" prop="title" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
+              <el-radio-group v-model="form.title">
+                <el-radio :label="3">不限</el-radio>
+                <el-radio :label="6">仅指定网格可见</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="选择网格" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择网格', trigger: 'change' }]">
+              <ai-picker
+                :instance="instance"
+                multiple
+                dialogTitle="选择网格"
+                :ops="{label: 'girdName'}"
+                pageTitle="网格"
+                action="/app/appgirdinfo/girdList"
+                v-model="form.wxGroups"
+                @pick="onPick"
+                @change="onSelcetChange">
+                <div class="AppAnnounceDetail-select">
+                  <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.wxGroupsName"></el-input>
+                  <div class="select-left" v-if="form.wxGroups.length">
+                    <span v-for="(item, index) in form.girdList" :key="index" v-if="index < 9">{{ item }}</span>
+                    <em v-if="form.girdList.length > 9">等{{ form.girdList.length }}个</em>
+                  </div>
+                  <i v-if="!form.wxGroups.length">请选择</i>
+                  <div class="select-right">{{ form.wxGroups.length ? '重新选择' : '选择' }}</div>
+                </div>
+              </ai-picker>
+            </el-form-item>
           </el-form>
         </template>
       </ai-card>
@@ -61,11 +95,14 @@
           title: '',
           content: '',
           areaId: '',
+          wxGroupsName: '',
           createUnitName: '',
+          wxGroups: [],
           createUserName: '',
           status: '',
           thumbUrl: []
         },
+        girdList: [],
         cropOps: {
           width: "336px",
           height: "210px"
@@ -98,6 +135,19 @@
         })
       },
 
+      onPick (e) {
+        this.form.girdList = e.map(v => v.girdName)
+      },
+
+      onSelcetChange (e) {
+        if (e.length) {
+          this.form.wxGroupsName = '1'
+        } else {
+          this.form.wxGroupsName = ''
+          this.form.wxGroups = []
+        }
+      },
+
       confirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
@@ -122,7 +172,7 @@
 
       cancel (isRefresh) {
         this.$emit('change', {
-          type: 'list',
+          type: 'List',
           isRefresh: !!isRefresh
         })
       }
@@ -131,4 +181,87 @@
 </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>