H5/pzhgt.git - Gitblit

<template>
  <div class="box">
    <div class="head">添加/编辑商家</div>
    <div class="form-box">
      <el-form
        :model="os"
        :rules="rules"
        label-position="right"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <div class="fl-al">
          <el-form-item label="商家名称" prop="name">
            <el-input
              class="iw-250"
              size="mini"
              disabled
              v-model="os.name"
              placeholder="请输入"
              show-word-limit
              maxlength="25"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="商家logo">
          <div class="sec">
            <div class="avatar">
              <!-- <vUpload
                :pic="os.logo"
                :boxWidth="800"
                :boxHeight="400"
                :width="200"
                :height="200"
                :exp="['image']"
                @path="onUpload"
              ></vUpload> -->
              <el-image
                v-if="os.logo"
                fit="cover"
                style="width: 100px; height: 100px"
                :src="os.logo"
                :preview-src-list="[os.logo]"
              >
              </el-image>
            </div>
          </div>
        </el-form-item>
        <div class="fl-al">
          <el-form-item label="联系人" prop="contacts">
            <el-input
              class="iw-250"
              v-model="os.contacts"
              disabled
              size="mini"
              placeholder="请输入"
              show-word-limit
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idCard">
            <el-input
              v-model="os.idCard"
              size="mini"
              placeholder="请输入"
              disabled
              maxlength="18"
              class="iw-250"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="咨询电话" prop="phone">
          <el-input
            v-model="os.phone"
            size="mini"
            placeholder="请输入"
            disabled
            maxlength="11"
            class="iw-250"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="商家地址" prop="address">
          <!-- <div class="address-box">
            <Map ref="mapContent" @setLocation="setLocation" />
          </div> -->
          <div class="address-text">地址：{{ os.address }}</div>
          <!-- <el-input
            v-model="os.address"
            type="textarea"
            class="mr-t-10"
            placeholder="请输入"
            size="mini"
            maxlength="50"
            :rows="4"
            resize="none"
            @blur="addressBur"
            show-word-limit
          ></el-input> -->
        </el-form-item>
        <el-form-item label="营业时间" prop="beginAt">
          <el-time-picker
            is-range
            class="iw-250"
            arrow-control
            disabled
            size="mini"
            v-model="timeArr"
            @change="timeChange"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
          <div class="fl-al mr-t-20">
            <el-radio disabled v-model="os.period" label="EVERY_DAY"
              >每天</el-radio
            >
            <el-radio disabled v-model="os.period" label="WEEKDAY"
              >周一至周五</el-radio
            >
            <el-radio disabled v-model="os.period" label="WEEKEND"
              >周六、周日</el-radio
            >
          </div>
          <!-- <div class="tags-text">
            温馨提示：在此时间段以外，系统将展示为休息中
          </div> -->
        </el-form-item>
        <el-form-item label="商家介绍">
          <el-input
            type="textarea"
            disabled
            style="width: 500px"
            resize="none"
            placeholder="请输入商家介绍"
            maxlength="200"
            :rows="5"
            v-model="os.introduction"
          >
          </el-input>
        </el-form-item>
        <el-form-item required label="服务范围" prop="serviceIds">
          <div class="sevice-area">
            <div
              class="service-item"
              v-for="(i, ix) in serveList"
              :key="ix"
              :class="[i.type ? 'service-bg2' : 'service-bg1']"
            >
              {{ i.name }}
            </div>
          </div>
          <div class="tags-999">没找到？联系系统管理人员添加</div>
        </el-form-item>
        <el-form-item label="营业状态">
          <el-radio disabled v-model="os.businessStatus" :label="1"
            >在营</el-radio
          >
          <el-radio disabled v-model="os.businessStatus" :label="0"
            >关闭</el-radio
          >
          <div class="tags-text">温馨提示：关闭后将不会对居民再展示</div>
        </el-form-item>
        <el-form-item label="管理账号" prop="account" v-if="!editType">
          <el-input
            v-model="os.account"
            size="mini"
            placeholder="请输入"
            class="iw-250"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password" v-if="!editType">
          <el-input
            v-model="os.password"
            size="mini"
            type="password"
            placeholder="请输入"
            class="iw-250"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" @click="$router.back()">返回</el-button>
        </el-form-item>
        <!-- <el-form-item label="商家介绍 (选填) 最多9张">
          <div class="upImage">
            <div
              class="sec"
              v-for="(item, index) in os.mediaPaths"
              :key="index + '-s'"
            >
              <div class="avatar">
                <img :src="item" alt="" @error="onErrorimage" />
                <span
                  class="close el-icon-close"
                  @click="imageDel(item)"
                ></span>
              </div>
            </div>
            <div class="sec" v-if="os.mediaPaths.length < 9">
              <div class="avatar">
                <vUpload1
                  :boxWidth="800"
                  :boxHeight="400"
                  :width="200"
                  :height="200"
                  :exp="['image', 'video']"
                  more
                  slots
                  @path="onUpload1"
                >
                  <div class="db"><i class="el-icon-plus"></i><b>上传</b></div>
                </vUpload1>
              </div>
            </div>
          </div>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>
<script>
import vUpload from "com/upload/upload";
import vUpload1 from "com/upload/upload1";
import imageToVideo from "com/upload/default_video.png";
import Map from "../../../components/map/map.vue";
import EditorBar from "com/editor/editor"; //富文本组件
import {
  PHONE,
  SHENFENZHENG,
  PASSWORD,
  USER_NAME,
} from "../../../utils/validation";
import { objCopyPro } from "../../../utils/common";
export default {
  name: "edit",
  props: [],
  components: { vUpload, vUpload1, Map, EditorBar },
  data() {
    return {
      timeArr: "",
      os: {
        account: "", // 账号
        password: "", // 密码
        communityId: "", // 所属社区
        name: "", // 商家名称
        logo: "", // 商家logo
        lat: "", // lat
        lon: "", // lon
        contacts: "", // 联系人
        idCard: "", // 身份证号码
        phone: "", // 咨询电话
        address: "", // 商家地址
        beginAt: "", // 营业时间
        endAt: "", // 营业时间
        period: "EVERY_DAY", // 营业周期
        introduction: "", // 商家介绍
        serviceIds: [], // 服务范围
        businessStatus: 1, // 营业状态
      },
      rules: {
        communityId: [
          {
            required: true,
            message: "请选择社区",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入商家名称",
            trigger: "blur",
          },
        ],
        contacts: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "blur",
          },
        ],
        idCard: [
          {
            required: true,
            validator: SHENFENZHENG,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            validator: PHONE,
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入商家地址",
            trigger: "blur",
          },
        ],
        serviceIds: [
          {
            required: true,
            message: "请选择服务范围",
            trigger: "change",
          },
        ],
        beginAt: [
          {
            required: true,
            message: "请选择营业时间",
            trigger: "change",
          },
        ],
        account: [
          {
            required: true,
            validator: USER_NAME,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      }, // 表单验证
      value1: [],
      options: [],
      content: "",
      btnloading: false,
      serveList: [],
      communityList: [],
      editType: false,
    };
  },
  created() {
    this.init();
    this.$api.get(
      "convenient/service-category/all",
      { pageNum: 1, pageSize: 9999 },
      (e) => {
        e.forEach((item) => {
          item.type = false;
        });
        this.serveList = e;
        console.log(e);
        if (this.$route.query.id) {
          this.editType = true;
          this.edit(this.$route.query.id);
        } else {
          this.editType = false;
        }
      }
    );
  },
  mounted() {
    // this.$api.post(
    //   "communitymanager/pagecommunity",
    //   { pageNum: 1, pageSize: 9999 },
    //   (e) => {
    //     this.communityList = e.records;
    //   }
    // );
  },
  methods: {
    serviceHandle(i) {
      this.serveList[i].type = !this.serveList[i].type;
      this.serveData();
    },
    serveData() {
      const arr = [];
      this.serveList.forEach((item) => {
        if (item.type) {
          arr.push(item.id);
        }
      });
      this.os.serviceIds = arr;
      this.$refs["ruleForm"].validateField("serviceIds");
    },
    timeChange(val) {
      if (val) {
        this.os.beginAt = val[0];
        this.os.endAt = val[1];
      } else {
        this.os.beginAt = "";
        this.os.endAt = "";
      }
    },
    //编辑富文本
    onInputMessage(val) {
      this.os.introduction = val.html;
    },
    setLocation(val) {
      this.os.address = val.addr;
      this.os.lat = val.lat;
      this.os.lon = val.lng;
    },
    onErrorimage(e) {
      e.target.src = imageToVideo;
    },
    imageDel(n) {
      this.os.mediaPaths = this.os.mediaPaths.filter((r) => {
        return r !== n;
      });
    },
    sub() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            //编辑
            this.$api.put("convenient/merchant/put", this.os, (e) => {
              // console.log(e)
              demo.toast("编辑成功");
              this.$router.back();
            });
          } else {
            // 新增
            this.$api.post("convenient/merchant/add", this.os, (e) => {
              // console.log(e)
              demo.toast("新增成功");
              this.$router.back();
            });
          }
        }
      });
    },
    edit(id) {
      this.$api.get("convenient/merchant/get", { merchantId: id }, (e) => {
        this.os = objCopyPro(this.os, e);
        delete this.os.account;
        delete this.os.password;
        this.timeArr = [e.beginAt, e.endAt];
        this.content = e.introduction;
        e.serviceIds.forEach((i) => {
          this.serveList.forEach((item) => {
            if (item.id === i) {
              item.type = true;
            }
          });
        });
        // this.$nextTick(() => {
        //   this.$refs.mapContent.getLocation({
        //     val: e.address,
        //     l: e.lat,
        //     r: e.lon,
        //   });
        // });
      });
    },
    group(e) {
      //单选框 选择全市，自动选择全部服务范围
      // console.log(e)
      if (e == 1) {
        this.os.communityIds = [];
        this.options.map((item) => {
          this.os.communityIds.push(item.communityId);
        });
      }
    },
    select(e) {
      //选择框 服务范围标记：1-全攀枝花市，2-部分地区
      this.os.areaFlag = e.length === this.options.length ? 1 : 2;
      console.log(e);
    },
    init() {
      //查询所有社区
      this.$api.get("convenient/community", {}, (e) => {
        this.options = e;
        // console.log(e)
      });
    },
    onUpload(e) {
      this.os.logo = e;
      // console.log(e)
    },
    onUpload1(e, index) {
      // console.log(e);
      // console.log(index);
      // this.$set(this.os.mediaPaths, index, e);
      this.os.mediaPaths.push(e);
 
      // this.imgList[index] = e
    },
  },
  watch: {
    // 'os.comActVOS'
  },
  computed: {},
};
</script>
<style scoped lang="less">
.box {
  overflow: scroll;
  .sec {
    margin: 10px;
    .avatar {
      position: relative;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
      .close {
        position: absolute;
        background-color: tomato;
        color: #eee;
        width: 16px;
        height: 16px;
        right: -8px;
        top: -8px;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        border-radius: 50%;
      }
    }
  }
}
.head {
  padding-top: 10px;
  box-sizing: inherit;
  padding-right: 10px;
  font-weight: 700;
  font-size: 18px;
}
.form-box {
  padding-top: 20px;
  box-sizing: border-box;
  width: 600px;
}
.upImage {
  /*width: 100%;*/
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.iw-250 {
  width: 250px !important;
}
.fl-al {
  display: flex;
  align-items: center;
}
.address-box {
  width: 700px;
}
.mr-t-20 {
  padding-top: 10px;
}
.mr-t-10 {
  margin-top: 10px;
}
.sevice-area {
  display: flex;
  flex-wrap: wrap;
  width: 150%;
}
.service-item {
  margin: 0 10px 10px 0;
  padding: 0px 14px;
  cursor: pointer;
}
.service-bg1 {
  background-color: #999;
  color: #333;
}
.service-bg2 {
  background-color: rgb(233, 160, 160);
  color: rgb(241, 33, 33);
}
.tags-text {
  color: rgb(241, 30, 30);
}
.tags-999 {
  color: #999;
}
.no-find {
  cursor: pointer;
  color: rgb(36, 103, 230);
}
.address-text {
  width: 500px;
}
</style>