修改茶株游戏

src/api/games.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+/**
+ * 修改游戏
+ * @param pram
+ */
+export function gamesUpdateApi(data) {
+    return request({
+        url: `admin/game/update?id=${data.id}`,
+        method: 'POST',
+        data
+    })
+}

src/views/marketing/lottery/config/index.vue

@@ -34,39 +34,6 @@
             <el-form-item label="每次光照阶梯" prop="everySunlightStair">
               <!-- 动态光照阶梯 -->
 
-
-                <el-table :data="specsData.rule.everySunlightStair" style="width: 100%" border>
-                  <el-table-column prop="begin" label="阳光最低区间">
-                    <template #default="scope">
-                      <el-input-number
-                        v-model="scope.row.begin"
-                        :min="0"
-                        placeholder="最低值"
-                        @change="validateRules"
-                      />
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="end" label="阳光最高区间">
-                    <template #default="scope">
-                      <el-input-number
-                        v-model="scope.row.end"
-                        :min="0"
-                        placeholder="最高值"
-                        @change="validateRules"
-                      />
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="sunlight" label="阳光值">
-                    <template #default="scope">
-                      <el-input-number
-                        v-model="scope.row.sunlight"
-                        :min="0"
-                        placeholder="阳光值"
-                      />
-                    </template>
-                  </el-table-column>
-                </el-table>
-              <el-button type="primary" @click="addRule" class="mt10">添加规则</el-button>
             </el-form-item>
             <el-form-item label="总浇水量" prop="waterTotal">
               <el-input-number v-model="specsData.rule.waterTotal" :min="0"></el-input-number>
@@ -86,7 +53,6 @@
       <!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> -->
     </div>
     <el-table
-      v-loading="dataListLoading"
       :data="specsData.items"
       style="width: 100%;">
       <el-table-column
@@ -98,19 +64,41 @@
       </el-table-column>
       <el-table-column
       width="150"
-      prop="title"
+      prop="productName"
       header-align="center"
       align="center"
-      label="领养标题">
+      label="认领标题">
     </el-table-column>
+      <el-table-column
+        width="150"
+        prop="title"
+        header-align="center"
+        align="center"
+        label="认领副标题">
+      </el-table-column>
+
       <el-table-column
         prop="productImage"
         header-align="center"
         align="center"
         label="茶株封面">
+        <template slot-scope="scope">
+          <div class="demo-image__preview">
+            <el-image
+              style="width: 36px; height: 36px"
+              :src="scope.row.productImage"
+              :preview-src-list="[scope.row.productImage]"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="productPrice"
+        header-align="center"
+        align="center"
+        label="茶株价格">
       </el-table-column>
       <el-table-column
-
         prop="gardener"
         header-align="center"
         align="center"
@@ -123,7 +111,6 @@
         label="土壤">
       </el-table-column>
       <el-table-column
-
         prop="humidity"
         header-align="center"
         align="center"
@@ -134,18 +121,45 @@
         header-align="center"
         align="center"
         label="树苗图">
+        <template slot-scope="scope">
+          <div class="demo-image__preview">
+            <el-image
+              style="width: 36px; height: 36px"
+              :src="scope.row.smallImage"
+              :preview-src-list="[scope.row.smallImage]"
+            />
+          </div>
+        </template>
       </el-table-column>
       <el-table-column
         prop="growImage"
         header-align="center"
         align="center"
         label="成长图">
+        <template slot-scope="scope">
+          <div class="demo-image__preview">
+            <el-image
+              style="width: 36px; height: 36px"
+              :src="scope.row.growImage"
+              :preview-src-list="[scope.row.growImage]"
+            />
+          </div>
+        </template>
       </el-table-column>
       <el-table-column
         prop="bigImage"
         header-align="center"
         align="center"
         label="成熟图">
+        <template slot-scope="scope">
+          <div class="demo-image__preview">
+            <el-image
+              style="width: 36px; height: 36px"
+              :src="scope.row.bigImage"
+              :preview-src-list="[scope.row.bigImage]"
+            />
+          </div>
+        </template>
       </el-table-column>
 
       <el-table-column
@@ -154,14 +168,12 @@
         align="center"
         label="领养总数">
       </el-table-column>
-
       <el-table-column
         prop="allNum"
         header-align="center"
         align="center"
         label="已领养数量">
       </el-table-column>
-
       <el-table-column
         prop="fruitNum"
         header-align="center"
@@ -174,7 +186,6 @@
         align="center"
         label="种植地点">
       </el-table-column>
-
       <el-table-column
         prop="bigImage"
         header-align="center"
@@ -182,17 +193,6 @@
         label="成熟图">
       </el-table-column>
 
-
-
-     <el-table-column
-        prop="createTime"
-        header-align="center"
-        align="center"
-        label="创建时间">
-      </el-table-column>
-
-
-
       <el-table-column
         fixed="right"
         header-align="center"
@@ -200,26 +200,186 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <router-link  :to=" { path: '/marketing/coupon/list/saveTree/'+ scope.row.id } ">
+          <el-button type="text" size="small" class="mr10"  @click="update(scope.$index,scope.row)">修改</el-button>
-            <el-button type="text" size="small" class="mr10" >详情</el-button>
-          </router-link>
-
         </template>
       </el-table-column>
     </el-table>
+    <div class="mt20"></div>
+    <el-button type="primary" @click="submit()">提交修改</el-button>
+    <el-dialog
+      title="提示"
+      :visible.sync="visible"
+      width="80%"
+    >
+      <el-form :model="teaPlants" :rules="rules" ref="formRef" label-width="120px" class="game-form">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="茶株标题" prop="productName">
+              <el-input v-model="teaPlants.productName" placeholder="请输入茶株标题"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="茶株副标题" prop="title">
+              <el-input v-model="teaPlants.title" placeholder="请输入茶株副标题"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="茶株图" prop="productImage">
+              <div class="upLoadPicBox" @click="modalPicTap('1','pi5')">
+                <div v-if="teaPlants.productImage" class="pictrue"><img :src="teaPlants.productImage"></div>
+                <div v-else class="upLoad">
+                  <i class="el-icon-camera cameraIconfont"/>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="茶株价格" prop="productPrice">
+              <el-input-number v-model="teaPlants.productPrice" :min="0" :precision="2" placeholder="请输入茶株价格"></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="发放数量" prop="allNum">
+              <el-input-number v-model="teaPlants.allNum" :min="0" placeholder="请输入发放数量"></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="果实数" prop="fruitNum">
+              <el-input-number v-model="teaPlants.fruitNum" :min="0" placeholder="请输入果实数"></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="养护人" prop="gardener">
+              <el-input v-model="teaPlants.gardener" placeholder="请输入养护人"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="土壤" prop="soil">
+              <el-input v-model="teaPlants.soil" placeholder="请输入土壤类型"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="湿度" prop="humidity">
+              <el-input v-model="teaPlants.humidity" placeholder="请输入湿度"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="小苗阶段图" prop="smallImage">
+              <div class="upLoadPicBox" @click="modalPicTap('1','pi1')">
+                <div v-if="teaPlants.smallImage" class="pictrue"><img :src="teaPlants.smallImage"></div>
+                <div v-else class="upLoad">
+                  <i class="el-icon-camera cameraIconfont"/>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="成长阶段图" prop="growImage">
+              <div class="upLoadPicBox" @click="modalPicTap('1','pi2')">
+                <div v-if="teaPlants.growImage" class="pictrue"><img :src="teaPlants.growImage"></div>
+                <div v-else class="upLoad">
+                  <i class="el-icon-camera cameraIconfont"/>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="成熟阶段图" prop="bigImage">
+              <div class="upLoadPicBox" @click="modalPicTap('1','pi3')">
+                <div v-if="teaPlants.bigImage" class="pictrue"><img :src="teaPlants.bigImage"></div>
+                <div v-else class="upLoad">
+                  <i class="el-icon-camera cameraIconfont"/>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="热门新品图" prop="hotImage">
+              <div class="upLoadPicBox" @click="modalPicTap('1','pi4')">
+                <div v-if="teaPlants.hotImage" class="pictrue"><img :src="teaPlants.hotImage"></div>
+                <div v-else class="upLoad">
+                  <i class="el-icon-camera cameraIconfont"/>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="种植位置" prop="treePlace">
+          <el-input v-model="teaPlants.treePlace" placeholder="请输入种植位置"></el-input>
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <el-input type="textarea" v-model="teaPlants.content" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <el-form-item label="热门显示天数" prop="hotDay">
+          <el-input-number v-model="teaPlants.hotDay" :min="0" :max="30" placeholder="请输入热门显示天数"></el-input-number>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing";
-
+import {gamesUpdateApi} from "@/api/games";
 export default {
   data() {
     return {
-      dataList: {},
+      visible:false,
-      dataListLoading: false,
       gameFrom: {},
-      specsData: {}
+      specsData: {},
+      teaPlants:{},
+      rules: {
+        title: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
+        productId: [
+          { required: true, message: '请输入商品编号', trigger: 'blur' },
+          { type: 'number', message: '商品编号必须是数字', trigger: 'blur' },
+        ],
+        productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
+        productImage: [{ required: true, message: '请输入商品图链接', trigger: 'blur' }],
+        productPrice: [
+          { required: true, message: '请输入商品价值', trigger: 'blur' },
+          { type: 'number', message: '商品价值必须是数字', trigger: 'blur' },
+        ],
+        allNum: [
+          { required: true, message: '请输入总共数量', trigger: 'blur' },
+          { type: 'number', message: '总共数量必须是数字', trigger: 'blur' },
+        ],
+        outNum: [
+          { required: true, message: '请输入支出数量', trigger: 'blur' },
+          { type: 'number', message: '支出数量必须是数字', trigger: 'blur' },
+        ],
+        fruitNum: [
+          { required: true, message: '请输入果实数', trigger: 'blur' },
+          { type: 'number', message: '果实数必须是数字', trigger: 'blur' },
+        ],
+        treePlace: [{ required: true, message: '请输入种植地点', trigger: 'blur' }],
+        gardener: [{ required: true, message: '请输入养护人', trigger: 'blur' }],
+        soil: [{ required: true, message: '请输入土壤类型', trigger: 'blur' }],
+        humidity: [{ required: true, message: '请输入湿度', trigger: 'blur' }],
+        content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
+        smallImage: [{ required: true, message: '请输入小苗阶段图链接', trigger: 'blur' }],
+        growImage: [{ required: true, message: '请输入成长阶段图链接', trigger: 'blur' }],
+        bigImage: [{ required: true, message: '请输入成熟阶段图链接', trigger: 'blur' }],
+        hotImage: [{ required: true, message: '请输入热门新品图链接', trigger: 'blur' }],
+        hotDay: [
+          { required: true, message: '请输入热门新品显示天数', trigger: 'blur' },
+          { type: 'number', message: '热门新品显示天数必须是数字', trigger: 'blur' },
+        ],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+      },
     }
   },
   mounted() {
@@ -227,46 +387,82 @@ export default {
   },
 
   methods: {
+    submitForm() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.gameFrom[this.teaPlants.index] = this.teaPlants
+          delete  this.teaPlants.index
+          this.visible = false
+        }
+      });
+    },
+    //修改茶株
+    update(index,row){
+     this.teaPlants = row
+     this.teaPlants.index = index
+     this.visible = true
+    },
+
+    //最终提交
+    submit(){
+      //把items和rule改成str
+      this.gameFrom.items = JSON.stringify(this.specsData.items)
+      this.gameFrom.rule = JSON.stringify(this.specsData.rule)
+      this.gameFrom.cid =  this.specsData.cid
+      this.gameFrom.id =  this.specsData.id
+
+      //todo
+      this.gameFrom.image ="123"
+      this.gameFrom.name ="茶株游戏"
+
+      gamesUpdateApi(this.gameFrom).then(res =>{
+        console.log(res)
+      })
+
+    },
+    modalPicTap(tit, num) {
+      const _this = this;
+      this.$modalUpload(function (img) {
+        if (tit === '1') {
+          switch (num) {
+            case 'pi1':
+              _this.form.smallImage = img[0].sattDir;
+              break;
+            case 'pi2':
+              _this.form.growImage = img[0].sattDir;
+              break;
+            case 'pi3':
+              _this.form.bigImage = img[0].sattDir;
+              break;
+            case 'pi4':
+              _this.form.hotImage = img[0].sattDir;
+              break;
+            case 'pi5':
+              _this.form.productImage = img[0].sattDir;
+              break;
+          }
+        }
+      }, tit, 'content');
+    },
     // 列表
     getDataList() {
       marketingGameListApi({cid: 748}).then(res => {
-        this.dataListLoading = false
         this.getInfo(res.list[0].id)
-      }).catch(res => {
-        this.dataListLoading = false
       })
     },
     getInfo(id) {
       marketingGameInfoListApi({id: id}).then(res => {
-        console.log(res)
         this.specsData = res
-
         if (this.specsData.rule.everySunlightStair === null) {
           this.specsData.rule.everySunlightStair = []
         }
       })
     },
-
   }
 }
 </script>
 
 <style scoped>
 
-.pictrue {
-  width: 58px;
-  height: 58px;
-  border: 1px dotted rgba(0, 0, 0, 0.1);
-  margin-right: 0px;
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-
-}
 
 </style>