moxuan_takeaway_manage/src/views/servicePackage/servicePackage.vue

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="服务套餐" name="first">
      <div style="display: inline-block; width: 100%">
        <div
          style="position: relative; display: inline-block; margin: 10px 0px"
        >
          <span>套餐名称：</span>
          <el-input
            style="width: 150px"
            @keydown.enter.native="shopSelect"
            placeholder="请输入套餐名称"
            v-model="name"
          >
          </el-input
          >&nbsp;&nbsp;
        </div>
        <div
          style="position: relative; display: inline-block; margin: 10px 0px"
        >
          <span>套餐类型：</span>
          <el-select
            v-model="setType"
            placeholder="请选择套餐类型"
            style="width: 150px"
            @change="search()"
          >
            <el-option label="月度套餐" value="1"></el-option>
            <el-option label="季度套餐" value="2"></el-option>
            <el-option label="年度套餐" value="3"></el-option>
            <el-option label="自定义" value="4"></el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div
          style="position: relative; display: inline-block; margin: 10px 0px"
        >
          <span>套餐适用性别：</span>
          <el-select
            v-model="suitSex"
            placeholder="请选择套餐适用性别"
            style="width: 180px"
            @change="search()"
          >
            <el-option label="男生专区" value="1"></el-option>
            <el-option label="女生专区" value="2"></el-option> </el-select
          >&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <el-button
          style="margin-left: 15px"
          size="mini"
          type="primary"
          icon="document"
          @click="search"
          >查询
        </el-button>
        <el-button
          style="margin-left: 15px"
          size="mini"
          type="primary"
          icon="document"
          @click="clean"
          >重置
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="addSetmeal"
          >添加套餐
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="delSetmeal"
          >批量删除
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="setmealImp"
          >导出
        </el-button>
      </div>

      <el-table
        v-loading="tableDataLoading"
        :data="typeDatas.list"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编号" type="index" width="80">
        </el-table-column>
        <el-table-column label="套餐名称" prop="name"> </el-table-column>
        <el-table-column prop="shopCover" label="套餐图片" width="150">
          <template slot-scope="scope">
            <div style="display: inline-block; margin: 3px">
              <el-popover
                placement="top-start"
                title=""
                trigger="hover"
                v-for="(i, ind) in scope.row.imgsArr"
                :key="ind"
              >
                <img
                  style="width: 50px; height: 50px"
                  :src="i"
                  alt=""
                  slot="reference"
                />
                <img style="width: 300px; height: auto" :src="i" alt="" />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="套餐id" prop="phone" width="120">
        </el-table-column> -->

        <el-table-column label="套餐价格" prop="price"> </el-table-column>
        <el-table-column label="套餐详情" prop="putawayFlag">
          <template slot-scope="scope">
            <span
              @click="infoMeal(scope.row)"
              style="color: #56a9ff;cursor: pointer;"
              >详情</span
            >
          </template>
        </el-table-column>
        <el-table-column label="套餐类型" prop="errandMoney" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.setType == 1">月度套餐</span>
            <span v-if="scope.row.setType == 2">季度套餐</span>
            <span v-if="scope.row.setType == 3">年度套餐</span>
            <span v-if="scope.row.setType == 4">自定义</span>
          </template>
        </el-table-column>
        <el-table-column label="套餐适用性别" prop="suitSex" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.suitSex == 1">男</span>
            <span v-if="scope.row.suitSex == 2">女</span>
          </template>
        </el-table-column>
        <el-table-column label="套餐绑定规则" prop="ruleName">
        </el-table-column>
        <el-table-column label="时间段" prop="minimumDelivery" width="160">
          <template slot-scope="scope">
            <span
              >{{ scope.row.selfStartTime }} {{ scope.row.selfEndTime }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="有效期"
          prop="enableFullReductionFlag"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }} {{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="enableFullReductionFlag">
        </el-table-column>
        <el-table-column label="状态" prop="autoSendOrder">
          <template slot-scope="scope">
            <span v-if="scope.row.setStatus == 1">可用</span>
            <span v-if="scope.row.setStatus == 2">不可用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button
              :disabled="!isAuth('shopsList:update')"
              size="mini"
              type="primary"
              @click="updateMima(scope.row)"
              style="margin: 5px"
              >编辑
            </el-button>
            <el-button
              :disabled="!isAuth('shopsList:delete')"
              size="mini"
              type="danger"
              @click="deletes(scope.row)"
              style="margin: 5px"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="limit"
          :current-page="page"
          layout="total,sizes, prev, pager, next,jumper"
          :total="typeDatas.total"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="规则配置" name="third">
      <div style="position: relative; display: inline-block; margin: 10px 0px">
        <span>规格名称：</span>
        <el-input
          style="width: 150px"
          @keydown.enter.native="searchRule"
          placeholder="请输入套餐名称"
          v-model="ruleName"
          clearable
        >
        </el-input
        >&nbsp;&nbsp;
        <el-button
          style="margin-left: 15px"
          size="mini"
          type="primary"
          icon="document"
          @click="searchRule"
          >查询
        </el-button>
        <el-button
          style="margin-left: 15px"
          size="mini"
          type="primary"
          icon="document"
          @click="cleanRule"
          >重置
        </el-button>
        <el-button size="mini" type="primary" icon="document" @click="addRule"
          >添加
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="setRuleImp"
          >导出
        </el-button>
      </div>
      <el-table
        v-loading="tableDataLoading"
        :data="typeDatas1.list"
        row-key="id"
      >
        <!-- <el-table-column label="编号" type="index" width="80">
        </el-table-column> -->
        <el-table-column label="规格排序" prop="sort">
          <template slot-scope="scope">
            <!-- <el-input-number v-model="scope.sort" label="排序"></el-input-number> -->
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规则名称" prop="name"> </el-table-column>
        <el-table-column label="规则id" prop="id"> </el-table-column>
        <el-table-column label="套餐内容" prop="content"> </el-table-column>

        <el-table-column label="创建时间" prop="createTime"> </el-table-column>
        <el-table-column label="状态" prop="autoSendOrder">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="editSwitch(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              :disabled="!isAuth('shopsList:update')"
              size="mini"
              type="primary"
              @click="editRule(scope.row)"
              style="margin: 5px"
              >编辑
            </el-button>
            <el-button
              :disabled="!isAuth('shopsList:delete')"
              size="mini"
              type="danger"
              @click="delRule(scope.row)"
              style="margin: 5px"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 10px; float: right">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="limit1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next,jumper"
          :total="typeDatas1.total"
        >
        </el-pagination>
      </div>
    </el-tab-pane>

    <el-dialog
      :title="addSetmealTitle"
      customClass="setmeal"
      :visible.sync="addSetmealVisible"
      :before-close="cancelSetmeal"
      :close-on-click-modal="false"
    >
      <div v-loading="addSetmealLoading">
        <el-form :model="addSetmealForm" v-if="addSetmealShow">
          <div style="display: flex">
            <el-form-item label="套餐名称：">
              <el-input
                v-model="addSetmealForm.name"
                style="width: 200px"
                placeholder="请输入套餐名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="套餐子名称：">
              <el-input
                v-model="addSetmealForm.subName"
                style="width: 200px"
                placeholder="请输入套餐子名称"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="套餐价格：">
              <el-input
                v-model="addSetmealForm.price"
                style="width: 200px"
                placeholder="请输入套餐价格"
              ></el-input>
            </el-form-item>
            <el-form-item label="套餐原价：">
              <el-input
                v-model="addSetmealForm.originalPrice"
                style="width: 200px"
                placeholder="请输入套餐原价"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item label="套餐标签：">
              <el-tag
                style="margin-right: 5px"
                :key="tag"
                v-for="tag in addSetmealForm.setTagArr"
                closable
                :disable-transitions="false"
                @close="handleSetTagClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="setTagVisible"
                v-model="setTagValue"
                ref="saveSetTag"
                size="small"
                @blur="handleSetTagConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showSetTag"
                >添加标签</el-button
              >
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item label="服务标签：">
              <el-tag
                style="margin-right: 5px"
                :key="tag"
                v-for="tag in addSetmealForm.serviceTagArr"
                closable
                :disable-transitions="false"
                @close="handleServiceTagClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="serviceTagVisible"
                v-model="serviceTagValue"
                ref="saveServiceTag"
                size="small"
                @blur="handleServiceTagConfirm"
              >
              </el-input>
              <el-button
                style="display: inline-block;"
                v-else
                class="button-new-tag"
                size="small"
                @click="showServiceTag"
                >添加标签</el-button
              >
            </el-form-item>
          </div>
          <el-form-item>
            <div
              style="
              display: flex;
              align-items: center;
              margin: 2% 0;
              flex-flow: wrap;
            "
            >
              <span style="display: inline-block; text-align: left"
                >套餐图片：<br />(可上传多张)&nbsp;&nbsp;&nbsp;</span
              >

              <div v-for="(item, index) of potost" :key="index">
                <div style="position: relative; margin: 5px">
                  <img
                    :src="item"
                    class="avatar"
                    style="width: 148px; height: 148px"
                  />
                  <div @click="handleRemove(index)" class="divhove">
                    <i
                      class="el-icon-delete"
                      style="margin: 0; font-size: 18px; color: #fff"
                    ></i>
                  </div>
                </div>
              </div>
              <div class="imgs">
                <el-upload
                  :action="Tupiantou"
                  list-type="picture-card"
                  :show-file-list="false"
                  :on-success="handleUploadSuccess"
                  :on-progress="onprogress1"
                >
                  <el-progress
                    v-if="percentage1 > 0 && percentage1 < 100"
                    type="circle"
                    :percentage="percentage1"
                  >
                  </el-progress>
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
          </el-form-item>

          <!-- 套餐 -->
          <div
            style="background-color: #f5f5f5;border-radius: 4px;margin: 0 0 20px 0;"
            v-for="(item, index) in addSetmealForm.loversSetContentDTOS"
            :key="index"
          >
            <div style="display: flex;padding: 20px 0 0 15px;">
              <el-form-item label="套餐内容：">
                <el-input
                  v-model="item.contentName"
                  style="width: 200px"
                  placeholder="请输入套餐内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="排序：">
                <el-input-number
                  v-model="item.sort"
                  label="描述文字"
                  :min="0"
                  style="width: 150px;"
                ></el-input-number>
                <i
                  class="el-icon-circle-plus-outline"
                  @click="mealAdd(item, index)"
                  style="
                margin-left: 15px;
                font-size: 22px;
                color: #56a9ff;
                cursor: pointer;
              "
                ></i>
                <i
                  class="el-icon-delete"
                  @click="mealRemove(item, index)"
                  style="
                margin-left: 15px;
                font-size: 22px;
                color: #f56c6c;
                cursor: pointer;
              "
                ></i>
              </el-form-item>
            </div>
            <div
              v-for="(i, ind) in item.loversSetContentDetailDTOS"
              :key="ind"
              style="padding-top: 20px;display: flex;flex-wrap: wrap;border: 1px dotted red;"
            >
              <el-form-item label="店铺名称：" style="margin-left: 80px">
                <el-select
                  v-model="i.shop"
                  placeholder="请选择店铺名称"
                  style="width: 280px"
                  filterable
                  @change="shopNameChange($event, i)"
                >
                  <el-option
                    :label="j.shopName"
                    :value="`${j.shopId},${j.shopName}`"
                    v-for="j in shopData"
                    :key="j.shopId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品名称：">
                <el-select
                  v-model="i.goods"
                  placeholder="请选择商品名称"
                  style="width: 250px"
                  @change="goodsNameChange($event, i)"
                >
                  <el-option
                    :label="j.goodsName"
                    :value="`${j.goodsId},${j.goodsName}`"
                    v-for="j in i.goodsData"
                    :key="j.goodsId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="原价：" style="margin-left: 80px">
                <el-input
                  v-model="i.originalPrice"
                  style="width: 150px"
                  placeholder="请输入原价"
                  @change="viewupdate"
                ></el-input>
              </el-form-item>
              <el-form-item label="价格：">
                <el-input
                  v-model="i.price"
                  style="width: 150px"
                  placeholder="请输入价格"
                  @change="viewupdate"
                ></el-input>
              </el-form-item>
              <el-form-item label="数量：">
                <el-input-number
                  v-model="i.num"
                  label="描述文字"
                  :min="1"
                  style="width: 150px;"
                  @change="viewupdate"
                ></el-input-number>
                <i
                  class="el-icon-circle-plus-outline"
                  @click="storeAdd(item.loversSetContentDetailDTOS, ind)"
                  style="
                  margin-left: 15px;
                  font-size: 22px;
                  color: #56a9ff;
                  cursor: pointer;
                "
                ></i>
                <i
                  class="el-icon-delete"
                  @click="storeRemove(item.loversSetContentDetailDTOS, ind)"
                  style="
                  margin-left: 15px;
                  font-size: 22px;
                  color: #f56c6c;
                  cursor: pointer;
                "
                ></i>
              </el-form-item>
            </div>
          </div>

          <div style="display: flex">
            <el-form-item label="套餐类型：">
              <el-select
                v-model="addSetmealForm.setType"
                placeholder="请选择套餐类型"
                style="width: 180px"
                @change="setTypeChange"
              >
                <el-option label="月度套餐" :value="1"></el-option>
                <el-option label="季度套餐" :value="2"></el-option>
                <el-option label="年度套餐" :value="3"></el-option>
                <el-option label="自定义" :value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间段：" v-if="addSetmealForm.setType == 4">
              <el-date-picker
                @change="selfTimeChange"
                style="width: 380px"
                v-model="addSetmealForm.selfTime"
                type="datetimerange"
                unlink-panels
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :clearable="false"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item label="有效期：">
            <el-date-picker
              @change="timeChange"
              style="width: 380px"
              v-model="addSetmealForm.time"
              type="datetimerange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="套餐适用性别：">
              <el-select
                v-model="addSetmealForm.suitSex"
                placeholder="请选择套餐适用性别"
                style="width: 180px"
              >
                <el-option label="男生专区" :value="1"></el-option>
                <el-option label="女生专区" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单生成预约单时间：">
              选择的时间前
              <el-input
                v-model="addSetmealForm.subOrderGenerateTime"
                style="width: 100px"
                placeholder=""
              ></el-input>
              小时（保留一位小数）
            </el-form-item>
          </div>
          <el-form-item label="套餐绑定规则：">
            <el-select
              v-model="addSetmealForm.ruleId"
              placeholder="请选择套餐绑定规则"
              style="width: 180px"
            >
              <el-option
                :label="a.name"
                :value="a.id"
                v-for="a in roleData"
                :key="a.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="套餐状态："
            style="display: flex; align-items: center"
          >
            <el-switch
              style="display: block"
              v-model="addSetmealForm.setStatus"
              active-text="启用"
              inactive-text="关闭"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="amendSetmeal">确 定</el-button>
          <el-button @click="cancelSetmeal" style="margin-right: 20px;"
            >取 消</el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="套餐详情"
      customClass="setmeal"
      :visible.sync="infoVisible"
      :before-close="cancelInfo"
    >
      <!-- 套餐 -->
      <div
        style="background-color: #f5f5f5;border-radius: 4px;margin: 0 0 20px 0;padding-bottom: 20px;"
        v-for="(item, index) in infoList"
        :key="index"
      >
        <div style="display: flex;padding: 20px 0 0 15px;">
          <div style="margin-right: 30px;">
            <span>套餐内容：</span>
            <span style="font-size: 18px;font-weight: 600;">{{ item.contentName }}</span>
          </div>
          <div>
            <span>排序：</span>
            <span>{{ item.sort }}</span>
          </div>
        </div>
        <div
          v-for="(i, ind) in item.contentDetailList"
          :key="ind"
          style="padding-top: 20px;display: flex;flex-wrap: wrap;"
        >
          <div style="margin-left: 80px">
            <span>店铺名称：</span>
            <span style="font-size: 18px;font-weight: 600;">{{ i.shopName }}</span>
          </div>
          <div style="margin:0 30px;">
            <span>商品名称：</span>
            <span style="font-size: 18px;font-weight: 600;">{{ i.goodsName }}</span>
          </div>
          <div>
            <span>原价(元)：</span>
            <span style="font-size: 18px;font-weight: 600;">{{ i.detailOriginalPrice }}</span>
          </div>
          <div style="margin:0 30px;">
            <span>价格(元)：</span>
            <span style="font-size: 18px;font-weight: 600;">{{ i.detailPrice }}</span>
          </div>
          <div>
            <span>数量：</span>
            <span style="font-size: 18px;font-weight: 600;">{{ i.num }}</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="addRuleTitle"
      customClass="setRule"
      :visible.sync="addRuleVisible"
      :before-close="cancelRule"
      center
    >
      <el-form :model="addRuleForm">
        <el-form-item label="排序：">
          <el-input-number
            v-model="addRuleForm.sort"
            label="描述文字"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="规则名称：">
          <el-input
            v-model="addRuleForm.name"
            style="width: 200px"
            placeholder="请输入规则名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="规则内容：">
          <el-input
            v-model="addRuleForm.content"
            style="width: 450px"
            placeholder="请输入规则内容"
            type="textarea"
            :rows="6"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-switch
            v-model="addRuleForm.status"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRule">取 消</el-button>
        <el-button type="primary" @click="amendRule">确 定</el-button>
      </div>
    </el-dialog>
  </el-tabs>
</template>

<script>
import { jsonp } from "vue-jsonp";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
var geocoder,
  map,
  markersArray = [];
export default {
  data() {
    return {
      activeName: "first",
      name: "",
      setType: "",
      suitSex: "",
      limit: 10,
      page: 1,
      tableDataLoading: false,
      selectDataId: [],
      typeDatas: {
        list: [],
        total: 10
      },

      limit1: 10,
      page1: 1,
      ruleName: "",
      typeDatas1: {
        list: [],
        total: 10
      },

      // 添加套餐
      addSetmealVisible: false,
      addSetmealTitle: "",
      addSetmealForm: {
        id: "",
        name: "", //套餐名称
        subName: "", //套餐子名称
        setTagArr: [], //套餐标签;多个标签之间使用,分割
        setTag: "", //套餐标签;多个标签之间使用,分割
        serviceTagArr: [], //服务标签;多个标签之间使用,分割
        serviceTag: "", //服务标签;多个标签之间使用,分割
        price: 1.1, //价格
        originalPrice: 1.2, //原价
        imgs: [], //图片;多张图片使用,分割，第一张为主图
        setType: "", //套餐类型;1月度套餐，2季度套餐，3年度套餐，4自定义
        suitSex: "", //适用性别;1男、2女
        ruleId: 1, //规则id
        setStatus: "", //状态;1可用、2不可用
        subOrderGenerateTime: 1, //子订单生成时机;单位：小时
        time: "",
        startTime: "", //套餐开始时间
        endTime: "", //套餐结束时间
        selfTime: "",
        selfStartTime: "", //自定义时间段开始时间;type为4自定义时必填
        selfEndTime: "", //自定义时间段结束时间;type为4自定义时必填
        loversSetContentDTOS: [
          {
            loversSetId: "", //套餐id，修改时不能为空
            sort: 1, //排序
            contentName: "测试", //内容名称
            loversSetContentDetailDTOS: [
              {
                loversSetContentId: "", //情侣套餐内容id，修改时不能为空
                goodsData: [],
                goods: "",
                goodsId: "", //商品id
                goodsName: "", //商品名称
                shop: "",
                shopId: "", //店铺id
                shopName: "", //店铺名称
                num: "", //数量
                price: "", //价格
                originalPrice: "" //原价
              }
            ] //内容详情内容列表
          }
        ]
      },
      addSetmealLoading: false,
      addSetmealShow: false,
      shopData: [], // 店铺名称
      roleData: [], // 规格下拉列表
      // 套餐标签
      setTagVisible: false,
      setTagValue: "",
      // 服务标签
      serviceTagVisible: false,
      serviceTagValue: "",

      potost: [],
      percentage1: 0, //进度条

      addRuleTitle: "",
      addRuleVisible: false,
      addRuleForm: {
        sort: 1,
        content: "",
        name: "",
        status: "",
        id: ""
      },

      infoVisible: false,
      infoList: []
    };
  },
  methods: {
    // tabs切换
    handleClick(tab, event) {
      if (tab._props.label == "服务套餐") {
        this.page = 1;
        this.limit = 10;
        this.dataSelect();
      }
      if (tab._props.label == "规则配置") {
        this.page1 = 1;
        this.limit1 = 10;
        this.dataSelect1();
      }
    },

    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },

    handleSizeChange1(val) {
      this.limit1 = val;
      this.dataSelect1();
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.dataSelect1();
    },

    // 查询
    select() {
      this.page = 1;
      this.dataSelect();
    },

    // 获取商户数据
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/lover-set/page"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          name: this.name,
          setType: this.setType,
          suitSex: this.suitSex
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        data.data.list.forEach(i => {
          i.imgsArr = i.imgs.split(",");
        });
        this.typeDatas.list = data.data.list;
        this.typeDatas.total = data.data.totalCount;

        console.log(data.data, "情侣套餐分页数据");
      });
    },
    search() {
      this.dataSelect();
    },
    clean() {
      this.name = "";
      this.setType = "";
      this.suitSex = "";
      this.dataSelect();
    },

    //上传成功
    handleUploadSuccess(file, fileList) {
      // this.goodsPicture += file.data + ','
      console.log(file, "轮播图上传成功");
      // if(this.potost.length>=4){
      //   this.potost.shift()
      // }
      this.potost.unshift(file.data);
      this.addSetmealForm.imgs = this.potost.join(",");
    },
    onprogress1(event, file, fileList) {
      console.log("详情图上传进度", parseInt(event.percent));
      this.percentage1 = parseInt(event.percent);
    },
    handleRemove(index) {
      this.potost.splice(index, 1);
      this.addSetmealForm.imgs = this.potost.join(",");
      console.log("this.potost", this.potost);
    },

    // 添加套餐内容
    mealAdd(item, index) {
      this.addSetmealForm.loversSetContentDTOS.splice(index + 1, 0, {
        loversSetId: "",
        sort: index + 1, //排序
        contentName: "", //内容名称
        loversSetContentDetailDTOS: [
          {
            loversSetContentId: "",
            goodsData: [],
            goods: "", //商品id
            goodsId: "", //商品id
            goodsName: "", //商品名称
            shop: "", //店铺id
            shopId: "", //店铺id
            shopName: "", //店铺名称
            num: "", //数量
            price: "", //价格
            originalPrice: "" //原价
          }
        ] //内容详情内容列表
      });
      this.addSetmealForm.loversSetContentDTOS.forEach((j, jind) => {
        j.sort = jind + 1;
      });
    },
    // 删除套餐内容
    mealRemove(item, index) {
      if (this.addSetmealForm.loversSetContentDTOS.length > 1) {
        this.addSetmealForm.loversSetContentDTOS.splice(index, 1);
        this.addSetmealForm.loversSetContentDTOS.forEach((j, jind) => {
          j.sort = jind + 1;
        });
      } else {
        this.$message({
          message: "至少需要一个套餐",
          type: "warning",
          duration: 1500,
          onClose: () => {}
        });
      }
    },

    // 添加店铺名称
    storeAdd(i, ind) {
      console.log(i);
      i.splice(ind + 1, 0, {
        loversSetContentId: "",
        goodsData: [],
        goods: "", //商品id
        goodsId: "", //商品id
        goodsName: "", //商品名称
        shop: "", //店铺id
        shopId: "", //店铺id
        shopName: "", //店铺名称
        num: 1, //数量
        price: "", //价格
        originalPrice: "" //原价
      });
      this.viewupdate();
    },
    // 删除店铺名称
    storeRemove(i, ind) {
      if (i.length > 1) {
        i.splice(ind, 1);
      } else {
        this.$message({
          message: "套餐至少需要一个店铺",
          type: "warning",
          duration: 1500,
          onClose: () => {}
        });
      }
      this.viewupdate();
    },

    // 添加套餐
    addSetmeal() {
      this.addSetmealVisible = true;
      this.addSetmealShow = true;
      this.addSetmealTitle = "添加套餐";
      this.roleList();
      this.potost = [];
      this.addSetmealForm = {
        name: "", //套餐名称
        subName: "", //套餐子名称
        setTagArr: [], //套餐标签;多个标签之间使用,分割
        setTag: "", //套餐标签;多个标签之间使用,分割
        serviceTagArr: [], //服务标签;多个标签之间使用,分割
        serviceTag: "", //服务标签;多个标签之间使用,分割
        price: "", //价格
        originalPrice: "", //原价
        imgsArr: [], //图片;多张图片使用,分割，第一张为主图
        imgs: "", //图片;多张图片使用,分割，第一张为主图
        setType: "", //套餐类型;1月度套餐，2季度套餐，3年度套餐，4自定义
        suitSex: "", //适用性别;1男、2女
        ruleId: "", //规则id
        setStatus: "", //状态;1可用、2不可用
        subOrderGenerateTime: "", //子订单生成时机;单位：小时
        time: "",
        startTime: "", //套餐开始时间
        endTime: "", //套餐结束时间
        selfTime: "",
        selfStartTime: "", //自定义时间段开始时间;type为4自定义时必填
        selfEndTime: "", //自定义时间段结束时间;type为4自定义时必填
        loversSetContentDTOS: [
          {
            loversSetId: "", //套餐id，修改时不能为空
            sort: 1, //排序
            contentName: "", //内容名称
            loversSetContentDetailDTOS: [
              {
                loversSetContentId: "", //情侣套餐内容id，修改时不能为空
                goodsData: [],
                goods: "", //商品id
                goodsId: "", //商品id
                goodsName: "", //商品名称
                shop: "", //店铺id
                shopId: "", //店铺id
                shopName: "", //店铺名称
                num: 1, //数量
                price: "", //价格
                originalPrice: "" //原价
              }
            ] //内容详情内容列表
          }
        ]
      };
    },

    // 规格下拉列表接口
    updateMima(row) {
      console.log(row);
      this.addSetmealVisible = true; // 显示弹窗
      this.addSetmealLoading = true; // 加载数据
      this.addSetmealShow = false;
      this.addSetmealTitle = "编辑套餐";
      this.roleList();
      this.potost = row.imgs ? row.imgs.split(",") : [];

      // 用于存储所有接口的 Promise
      const promises = [];

      row.contentList.forEach(i => {
        i.loversSetid = i.contentId;
        i.loversSetContentDetailDTOS = [];
        i.contentDetailList.forEach(j => {
          // 将每个接口请求存入 promises 数组
          const promise = this.$http({
            url: this.$http.adornUrl("admin/goods/selectGoodsList"),
            method: "get",
            params: this.$http.adornParams({
              page: 1,
              limit: 10000,
              shopId: j.shopId,
              shopName: j.shopName
            })
          }).then(({ data }) => {
            if (data.code == 0) {
              console.log(data, "商品名称列表");
              i.loversSetContentDetailDTOS.push({
                loversSetContentId: j.contentDetailId, //情侣套餐内容id，修改时不能为空
                goodsData: data.data.list,
                goods: `${j.goodsId},${j.goodsName}`, //商品id
                goodsId: j.goodsId, //商品id
                goodsName: j.goodsName, //商品名称
                shop: `${j.shopId},${j.shopName}`, //店铺id
                shopId: j.shopId, //店铺id
                shopName: j.shopName, //店铺名称
                num: j.num, //数量
                price: j.detailPrice, //价格
                originalPrice: j.detailOriginalPrice //原价
              });
            }
          });
          promises.push(promise);
        });
      });

      // 等待所有接口完成后再显示弹窗
      Promise.all(promises).then(() => {
        this.addSetmealLoading = false; // 加载数据
        this.addSetmealShow = true;
        console.log(this.addSetmealForm, "编辑套餐数据加载完成");
      });

      this.addSetmealForm = {
        id: row.id,
        name: row.name, //套餐名称
        subName: row.subName, //套餐子名称
        setTagArr: row.setTag ? row.setTag.split(",") : [], //套餐标签;多个标签之间使用,分割
        setTag: row.setTag, //套餐标签;多个标签之间使用,分割
        serviceTagArr: row.serviceTag ? row.serviceTag.split(",") : [], //服务标签;多个标签之间使用,分割
        serviceTag: row.serviceTag, //服务标签;多个标签之间使用,分割
        price: row.price, //价格
        originalPrice: row.originalPrice, //原价
        imgsArr: row.imgs ? row.imgs.split(",") : [], //图片;多张图片使用,分割，第一张为主图
        imgs: row.imgs, //图片;多张图片使用,分割，第一张为主图
        setType: Number(row.setType), //套餐类型;1月度套餐，2季度套餐，3年度套餐，4自定义
        suitSex: Number(row.suitSex), //适用性别;1男、2女
        ruleId: row.ruleId, //规则id
        setStatus: Number(row.setStatus), //状态;1可用、2不可用
        subOrderGenerateTime: row.subOrderGenerateTime, //子订单生成时机;单位：小时
        time: [row.startTime, row.endTime],
        startTime: row.startTime, //套餐开始时间
        endTime: row.endTime, //套餐结束时间
        selfTime: [row.selfStartTime, row.selfEndTime],
        selfStartTime: row.selfStartTime, //自定义时间段开始时间;type为4自定义时必填
        selfEndTime: row.selfEndTime, //自定义时间段结束时间;type为4自定义时必填
        loversSetContentDTOS: row.contentList
      };
    },
    roleList() {
      this.$http({
        url: this.$http.adornUrl("admin/lovers-set-rule/useList"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        console.log(data, "规格下拉列表");
        if (data.code == 0) {
          this.roleData = data.data;
        }
      });
    },
    // 店铺名称列表接口
    shopList() {
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectAllShop"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000
        })
      }).then(({ data }) => {
        console.log(data, "店铺名称列表");
        if (data.code == 0) {
          this.shopData = data.data.list;
        }
      });
    },
    goodsList(shopId, shopName) {
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectGoodsList"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000,
          shopId: shopId,
          shopName: shopName
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          console.log(data, "商品名称列表");
          this.shopData = data.data.list;
        }
      });
    },
    shopNameChange(val, i) {
      this.addSetmealLoading = true;
      console.log(val, i);
      i.goods = "";
      i.originalPrice = "";
      i.price = "";
      i.num = 1;
      let arr = val.split(",");
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectGoodsList"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000,
          shopId: arr[0],
          shopName: arr[1]
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          console.log(data, "商品名称列表");
          i.goodsData = data.data.list;
          i.shopId = arr[0];
          i.shopName = arr[1];
          this.addSetmealForm = { ...this.addSetmealForm }; // 触发视图更新
          this.addSetmealLoading = false;
        }
      });
    },
    goodsNameChange(val, i) {
      this.addSetmealLoading = true;
      console.log(val, i);
      let arr = val.split(",");
      i.goodsId = arr[0];
      i.goodsName = arr[1];
      i.goodsData.forEach(a => {
        if (a.goodsId == arr[0]) {
          i.originalPrice = a.originalMoney;
          i.price = a.goodsMoney;
        }
      });
      this.addSetmealForm = { ...this.addSetmealForm }; // 触发视图更新
      this.addSetmealLoading = false;
    },
    // 触发视图更新
    viewupdate() {
      this.addSetmealForm = { ...this.addSetmealForm }; // 触发视图更新
      this.addSetmealLoading = false;
    },

    // 套餐标签
    handleSetTagClose(tag) {
      this.addSetmealForm.setTagArr.splice(
        this.addSetmealForm.setTagArr.indexOf(tag),
        1
      );
      this.addSetmealForm.setTag = this.addSetmealForm.setTagArr.join(",");
    },
    showSetTag() {
      this.setTagVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveSetTag.$refs.input.focus();
      });
    },
    handleSetTagConfirm() {
      let inputValue = this.setTagValue;
      if (inputValue) {
        this.addSetmealForm.setTagArr.push(inputValue);
      }
      this.setTagVisible = false;
      this.setTagValue = "";
      this.addSetmealForm.setTag = this.addSetmealForm.setTagArr.join(",");
    },

    // 服务标签
    handleServiceTagClose(tag) {
      this.addSetmealForm.serviceTagArr.splice(
        this.addSetmealForm.serviceTagArr.indexOf(tag),
        1
      );
      this.addSetmealForm.serviceTag = this.addSetmealForm.serviceTagArr.join(
        ","
      );
    },
    showServiceTag() {
      this.serviceTagVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveServiceTag.$refs.input.focus();
      });
    },
    handleServiceTagConfirm() {
      let inputValue = this.serviceTagValue;
      if (inputValue) {
        this.addSetmealForm.serviceTagArr.push(inputValue);
      }
      this.serviceTagVisible = false;
      this.serviceTagValue = "";
      this.addSetmealForm.serviceTag = this.addSetmealForm.serviceTagArr.join(
        ","
      );
    },
    setTypeChange(val){
      if(val==4){
        this.addSetmealForm.selfTime=[]
      }
    },
    // 改变时间段
    selfTimeChange(val) {
      this.addSetmealForm.selfStartTime = val[0];
      this.addSetmealForm.selfEndTime = val[1];
    },
    // 改变有效期
    timeChange(val) {
      this.addSetmealForm.startTime = val[0];
      this.addSetmealForm.endTime = val[1];
    },
    // 详情弹窗
    infoMeal(row) {
      console.log(row);
      this.infoVisible=true
      this.infoList=row.contentList
    },
    cancelInfo(){
      this.infoVisible=false
    },

    deletes(row) {
      this.$confirm(`确定删除此套餐?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`admin/lover-set/delete`),
          method: "post",
          data: this.$http.adornData([row.id])
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.dataSelect();
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "warning",
              duration: 1500,
              onClose: () => {}
            });
          }
        });
      });
    },
    handleSelectionChange(val) {
      let arr = [];
      val.forEach(i => {
        arr.push(i.id);
      });
      this.selectDataId = arr;
    },
    // 批量删除
    delSetmeal() {
      console.log(this.selectDataId);

      if (!this.selectDataId.length) {
        this.$message({
          message: "请勾选需要删除的数据",
          type: "warning",
          duration: 1500,
          onClose: () => {}
        });
        return false;
      }
      this.$http({
        url: this.$http.adornUrl(`admin/lover-set/delete`),
        method: "post",
        data: this.$http.adornData(this.selectDataId)
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    cancelSetmeal() {
      this.addSetmealVisible = false;
    },
    amendSetmeal() {
      console.log(this.addSetmealForm, "添加套餐参数");
      if (this.addSetmealForm.id) {
        this.$http({
          url: this.$http.adornUrl("admin/lover-set/update"),
          method: "post",
          data: this.$http.adornData(this.addSetmealForm)
        }).then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.dataSelect();
                this.addSetmealVisible = false;
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {}
            });
          }
        });
      } else {
        this.$http({
          url: this.$http.adornUrl("admin/lover-set/add"),
          method: "post",
          data: this.$http.adornData(this.addSetmealForm)
        }).then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.dataSelect();
                this.addSetmealVisible = false;
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {}
            });
          }
        });
      }
    },
    setmealImp() {},

    // 规则配置
    searchRule() {
      this.dataSelect1();
    },
    cleanRule() {
      this.ruleName = "";
      this.dataSelect1();
    },
    dataSelect1() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/lovers-set-rule/page"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page1,
          limit: this.limit1,
          name: this.ruleName
        })
      }).then(({ data }) => {
        console.log(data, "情侣套餐规则分页");
        this.tableDataLoading = false;

        this.typeDatas1.list = data.data.list;
        this.typeDatas1.total = data.data.totalCount;
      });
    },
    // 添加规则
    addRule() {
      this.addRuleVisible = true;
      this.addRuleTitle = "添加规则";
      this.addRuleForm.name = "";
      this.addRuleForm.sort = 1;
      this.addRuleForm.content = "";
      this.addRuleForm.status = 1;
      this.addRuleForm.id = "";
    },

    // 编辑规则
    editRule(row) {
      console.log(row);

      this.addRuleVisible = true;
      this.addRuleTitle = "编辑规则";
      this.addRuleForm.name = row.name;
      this.addRuleForm.sort = row.sort;
      this.addRuleForm.content = row.content;
      this.addRuleForm.status = row.status;
      this.addRuleForm.id = row.id;
    },
    // 编辑表格中的状态按钮
    editSwitch(row) {
      console.log(row);
      this.$http({
        url: this.$http.adornUrl("admin/lovers-set-rule/update"),
        method: "post",
        data: this.$http.adornData({
          id: row.id,
          name: row.name,
          sort: row.sort,
          content: row.content,
          status: row.status
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 500,
            onClose: () => {
              this.dataSelect1();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 500,
            onClose: () => {}
          });
        }
      });
    },
    delRule(row) {
      let delid = row.id;
      this.$confirm(`确定删除此规则?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`admin/lovers-set-rule/delete/${delid}`),
          method: "get",
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.dataSelect1();
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "warning",
              duration: 1500,
              onClose: () => {}
            });
          }
        });
      });
    },
    cancelRule() {
      this.addRuleVisible = false;
    },
    amendRule() {
      console.log("确定");
      if (this.addRuleForm.id) {
        this.$http({
          url: this.$http.adornUrl("admin/lovers-set-rule/update"),
          method: "post",
          data: this.$http.adornData({
            id: this.addRuleForm.id,
            name: this.addRuleForm.name,
            sort: this.addRuleForm.sort,
            content: this.addRuleForm.content,
            status: this.addRuleForm.status
          })
        }).then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addRuleForm.name = "";
                this.addRuleForm.sort = 1;
                this.addRuleForm.content = "";
                this.addRuleForm.status = "";
                this.dataSelect1();
                this.addRuleVisible = false;
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {}
            });
          }
        });
      } else {
        this.$http({
          url: this.$http.adornUrl("admin/lovers-set-rule/add"),
          method: "post",
          data: this.$http.adornData({
            name: this.addRuleForm.name,
            sort: this.addRuleForm.sort,
            content: this.addRuleForm.content,
            status: 1
          })
        }).then(({ data }) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addRuleForm.name = "";
                this.addRuleForm.sort = 1;
                this.addRuleForm.content = "";
                this.addRuleForm.status = "";
                this.dataSelect1();
                this.addRuleVisible = false;
              }
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              duration: 1500,
              onClose: () => {}
            });
          }
        });
      }
    },
    setRuleImp() {}
  },
  mounted() {
    this.dataSelect();
    this.shopList();
  }
};
</script>

<style scope>
.imgs {
  position: relative;
  border-radius: 6px;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  display: inline-block;
}

.dels {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.dels .el-icon-delete {
  line-height: 148px;
  padding-left: 58px;
  font-size: 25px;
  color: #fff;
}

.imgs:hover .dels {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  opacity: 0.5;
}

.bqList {
  padding: 4px 14px;
  margin: 4px;
  border: 1px solid #efefef;
  font-size: 12px;
  color: #999;
  border-radius: 4px;
  margin-right: 15px;
}

.delss {
  display: none;
  position: relative;
}

.delss .el-icon-delete {
  position: absolute;
  top: 0;
}

.bqList:hover .delss {
  display: initial;
  opacity: 0.5;
}

.tj {
  padding: 6px !important;
  margin: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.divs img {
  width: 100%;
}
/* //参与活动 */
.canquxiao {
  margin-top: 20px;
  margin-left: 287px;
  width: 76px;
  height: 35px;
  opacity: 1;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  color: rgba(0, 0, 0, 1);
  text-align: center;
}
.canqueding {
  margin-top: -35px;
  margin-left: 407px;
  width: 76px;
  height: 35px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(62, 142, 247, 1);
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.setmeal {
  width: 1000px;
  margin: 45px auto !important;
}
.setmeal .el-form-item {
  display: flex;
  margin: 0 40px 20px 0;
}
.setmeal .dialog-footer {
  display: flex;
  flex-direction: row-reverse;
}
.setmeal .divhove {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: default;
  text-align: center;
  padding-top: 43%;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.setmeal .divhove:hover {
  opacity: 0.8;
}

.setRule {
  width: 600px;
}

</style>