nowwa-system/vue-admin-template-master/src/views/shop/setStore/index.vue

<template>
  <el-card class="box-card">
    <h3>新建门店</h3>
    <div class="wrapper">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
        :inline="true"
        size="medium"
      >
        <el-row>
          <el-col :span="9">
            <el-form-item label="门店名称" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="Nowwa挪瓦咖啡(测试店)"
              ></el-input>
              <span class="tip">严格按照此命名，替换测试二字</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店类别" prop="category">
              <el-select v-model="ruleForm.category" placeholder="门店类别">
                <el-option
                  v-for="item in categoryArr"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            <el-form-item label="营业时间" prop="businesshour">
              <el-time-picker
                is-range
                value-format="HH:mm"
                format="HH:mm"
                v-model="ruleForm.businesshour"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="banner">
              <el-input
                v-model="ruleForm.banner"
                placeholder="门店banner"
              ></el-input>
              <span class="tip">请先用上传工具上传，也可以在上传后再改</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8"
            ><el-form-item label="城市(地级市)" prop="city">
              <el-input v-model="ruleForm.city" placeholder="成都市"></el-input>
              <!-- <span class="tip">城市(地级市)</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="区县、县级市" prop="district">
              <el-input
                v-model="ruleForm.district"
                placeholder="青羊区"
              ></el-input>
              <!-- <span class="tip">区县、县级市</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="ruleForm.address"
                placeholder="青羊区春熙路1号"
                @keyup.enter.native="gettxLng"
              ></el-input>
              <!-- <span class="tip">以区县开头什么路多少号</span> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="腾讯地图纬度" prop="txlat">
              <el-input
                v-model="ruleForm.txlat"
                type="number"
                placeholder="腾讯地图纬度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="腾讯地图经度" prop="txlng">
              <el-input
                type="number"
                v-model="ruleForm.txlng"
                placeholder="腾讯地图经度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="高德地图纬度" prop="gdlat">
              <el-input
                type="number"
                v-model="ruleForm.gdlat"
                placeholder="高德地图纬度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高德地图经度" prop="gdlng">
              <el-input
                type="number"
                v-model="ruleForm.gdlng"
                placeholder="高德地图经度"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="老板姓名" prop="contactname">
              <el-input
                v-model="ruleForm.contactname"
                placeholder="老板姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="老板手机" prop="takeawayphone">
              <el-input
                type="number"
                v-model="ruleForm.takeawayphone"
                placeholder="老板手机，仅作记录"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="运营手机号" prop="contactphone">
              <el-input
                type="tel"
                v-model="ruleForm.contactphone"
                placeholder="运营手机号"
              ></el-input>
              <span class="tip">用来登录商家端小程序</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> </el-row>
        <el-row>
          <el-col>
            <el-form-item label="k4或k6机器码">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag, 'k4')"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm('k4')"
                @blur="handleInputConfirm('k4')"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput('k4')"
                >+</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="k5">
              <el-tag
                :key="tag"
                v-for="tag in k5_dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag, 'k5')"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="k5_inputVisible"
                v-model="k5_inputValue"
                ref="k5_saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm('k5')"
                @blur="handleInputConfirm('k5')"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput('k5')"
                >+</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <!-- ------------------------------ -->

        <div class="upload-box">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>

      <div class="upload-tip">
        <div>温馨提示：</div>
        <div class="pd-20">
          <div>
            <el-link
              type="primary"
              target="_blank"
              href="https://lbs.qq.com/getPoint/"
              >腾讯地图地址</el-link
            >
          </div>
          <div>
            <el-link
              type="primary"
              target="_blank"
              href="https://lbs.amap.com/tools/picker"
              >高德地图地址</el-link
            >
          </div>
          <div>
            如需上传banner，请上传至 nowwa/shop_banner/ 目录<el-link
              href="https://help.aliyun.com/document_detail/195868.html?spm=a2c4g.11186623.6.620.74d062e7wbqjEy"
              target="_blank"
              type="success"
              >图片上传工具下载</el-link
            >
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { createShop } from "@/api/shop.js";
const categoryArr = [
  {
    label: "支持外送和自提",
    value: 1
  },
  {
    label: "仅外卖",
    value: 2
  },
  {
    label: "仅自提",
    value: 3
  },
  {
    label: "2.0/3.0门店",
    value: 9
  }
];
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      // k46
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      // k5
      k5_dynamicTags: [],
      k5_inputVisible: false,
      k5_inputValue: "",

      categoryArr,
      ruleForm: {
        name: "",
        city: "",
        district: "",
        address: "",
        txlat: null,
        txlng: null,
        gdlat: null,
        gdlng: null,
        category: null,
        contactname: "",
        contactphone: "",
        takeawayphone: "",
        businesshour: "",
        k46: "",
        k5: "",
        banner: ""
      },
      rules: {
        name: [{ required: true, message: " ", trigger: "blur" }],
        city: [{ required: true, message: " ", trigger: "blur" }],
        district: [{ required: true, message: " ", trigger: "blur" }],
        address: [{ required: true, message: " ", trigger: "blur" }],
        // banner: [{ required: true, message: " ", trigger: "blur" }],
        txlat: [{ required: true, message: " ", trigger: "blur" }],
        txlng: [{ required: true, message: " ", trigger: "blur" }],
        gdlat: [{ required: true, message: " ", trigger: "blur" }],
        gdlng: [{ required: true, message: " ", trigger: "blur" }],
        category: [{ required: true, message: " ", trigger: "change" }],
        contactname: [{ required: true, message: " ", trigger: "blur" }],
        contactphone: [
          {
            required: true,
            validator: checkPhone,
            message: " ",
            trigger: "blur"
          }
        ],
        takeawayphone: [
          {
            required: true,
            validator: checkPhone,
            message: " ",
            trigger: "blur"
          }
        ],
        businesshour: [{ required: true, message: " ", trigger: "change" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("ddd");
          console.log(this.dynamicTags);
          console.log(this.k5_dynamicTags);
          if (!this.dynamicTags.length || !this.k5_dynamicTags.length) {
            return this.$message({
              message: "请添加对应的机器码！",
              type: "error"
            });
          }
          createShop({
            ...this.ruleForm,
            businesshour: this.ruleForm.businesshour.join("-"),
            banner: "nowwa/shop_banner/" + this.ruleForm.banner,
            k46: this.dynamicTags.join(";"),
            k5: this.k5_dynamicTags.join(";")
          })
            .then(res => {
              console.log(res);
              if (res === "OK") {
                this.$message({
                  message: "创建成功！",
                  type: "success"
                });
                this.resetForm("ruleForm");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message({
                message: "提交的数据有误！",
                type: "error"
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(this.dynamicTags);
      this.dynamicTags = [];
      this.k5_dynamicTags = [];
      console.log(this.k5_dynamicTags);
    },
    // 获取腾讯经纬度
    gettxLng() {
      // console.log(this.ruleForm);
      // let { city, district, address } = this.ruleForm;
      // if (!city || !district || !address) {
      //   return;
      // }
      // this.$axios({
      //   method: "get",
      //   url: `https://apis.map.qq.com/ws/geocoder/v1/?address=${city}${district}${address}&key=36IBZ-VI53O-FJHW2-SV2NP-USSAE-GFBUS`,
      //   dataType: "JSONP"
      // })
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(err => {
      //     console.log("catch", err);
      //   });
    },
    handleClose(tag, name) {
      if (name == "k4") {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      }
      if (name === "k5") {
        this.k5_dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      }
    },

    showInput(name) {
      if (name === "k4") {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      }
      if (name === "k5") {
        this.k5_inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.k5_saveTagInput.$refs.input.focus();
        });
      }
    },

    handleInputConfirm(name) {
      if (name === "k4") {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
      }
      if (name === "k5") {
        let inputValue = this.k5_inputValue;
        if (inputValue) {
          this.k5_dynamicTags.push(inputValue);
        }
        this.k5_inputVisible = false;
        this.k5_inputValue = "";
      }
    }
  },
  computed: {}
};
</script>

<style scoped>
.box-card {
  margin: 20px;
}
.wrapper {
  /* width: 800px; */
  padding: 20px;
}
.tip {
  color: #999;
}
input {
  width: 220px !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.upload-box {
  padding: 40px 0;
}
.pd-20 {
  padding: 20px;
}
</style>