app/pages/mine/openShop/ThirdApply.vue

<template>
  <div class="person-msg">
    <u-form ref="thirdForm" :model="form" :rules="rules" :label-width="200">
      <h4>基础信息</h4>
      <u-form-item prop="storeName" label="店铺名称">
        <u-input
          type="text"
          v-model="form.storeName"
          placeholder="请填写店铺名称"
        />
      </u-form-item>

      <u-form-item prop="storeLogo" label="店铺logo">
        <!-- <Upload
          ref="uploadLogo"
          :show-upload-list="false"
          :on-success="handleSuccess"
          :format="['jpg', 'jpeg', 'png', 'gif']"
          :max-size="2048"
          :before-upload="beforeUpload"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :on-error="uploadErr"
          multiple
          :action="action"
          :headers="accessToken"
        >
          <Button type="info" :loading="uploadLoading">上传logo</Button>
        </Upload> -->

        <u-upload
          :header="{ accessToken: storage.getAccessToken() }"
          max-count="1"
          :action="action"
          @on-uploaded="onUploadedtwo"
          @on-remove="onRemove"
          style="margin-left: 30px"
        ></u-upload>
        <div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
      </u-form-item>
      <u-form-item prop="goodsManagementCategory" label="店铺经营类目">
        <u-checkbox-group
          @change="checkboxGroupChange"
          style="margin-left: 30px"
        >
          <u-checkbox
            v-model="item.checked"
            v-for="(item, index) in cateList"
            :key="index"
            :name="item.id"
            >{{ item.name }}</u-checkbox
          >
        </u-checkbox-group>
      </u-form-item>
      <u-form-item prop="storeCenter" label="店铺所在地">
        <u-input
          v-model="form.___path"
          type="select"
          @click="showPicker"
          placeholder="请选择所在地区"
        />
      </u-form-item>

      <u-form-item prop="storeAddressDetail" label="店铺详细地址">
        <u-input
          type="text"
          v-model="form.storeAddressDetail"
          placeholder="请填写店铺详细地址"
        />
      </u-form-item>
      <u-form-item prop="storeDesc" label="店铺简介">
        <u-input
          type="textarea"
          v-model="form.storeDesc"
          maxlength="200"
          show-word-limit
          :rows="4"
          placeholder="请输入店铺简介"
        />
      </u-form-item>

      <u-form-item>
        <!-- <button @click="uni.navigateBack()" :style="{background:'#F50505'}">返回</button> -->
        <button
          type="primary"
          :style="{ background: '#FE3C3C' }"
          @click="next"
          class="bunem"
        >
          提交平台审核
        </button>
      </u-form-item>
    </u-form>
    <!-- <Modal title="View Image" v-model="visible">
      <img :src="previewPicture" v-if="visible" style="width: 100%" />
    </Modal> -->
    <!-- <lili-map ref="liliMap" @getAddress="getAddress" :useApi="false"></lili-map> -->
    <m-city
      :provinceData="list"
      headTitle="区域选择"
      ref="cityPicker"
      @funcValue="getpickerParentValue"
      pickerSize="4"
    ></m-city>
    <u-toast ref="uToast" />
  </div>
</template>
<script>
import storage from "@/utils/storage.js";
import { upload } from "@/api/common.js";
import { applyThird } from "@/api/goods";
import gkcity from "@/components/m-city/m-city.vue";
import { getCategoryList, getMon } from "@/api/goods.js";
export default {
  components: {
    "m-city": gkcity,
  },
  data() {
    return {
      cateList: [],
      list: [
        {
          id: "",
          localName: "请选择",
          children: [],
        },
      ],
      storage: storage,
      loading: false, // 加载状态
      uploadLoading: false, // 上传加载状态
      action: upload, // 上传地址
      accessToken: {}, // 验证token
      previewPicture: "", // 预览图片
      address: "", // 回显地址
      visible: false, // 图片预览
      form: {
        // 表单数据
        storeLogo: [],
      },
      rules: {
        // 验证规则
        goodsManagementCategory: [
          { required: true, message: "请选择店铺经营类目" },
        ],
        storeName: [{ required: true, message: "请填写店铺名称" }],
        storeLogo: [{ required: true, message: "请上传店铺logo" }],
        storeDesc: [{ required: true, message: "请填写店铺简介" }],
        storeCenter: [{ required: true, message: "请选择店铺位置" }],
        storeAddressIdPath: [{ required: true, message: "请选择店铺位置" }],
        storeAddressDetail: [{ required: true, message: "请输入店铺详细地址" }],
      },
      categoryList: [], // 分类数据
    };
  },
  methods: {
    checkboxGroupChange(e) {
      this.form.goodsManagementCategory = e;
      this.form.goodsManagementCategory =
        this.form.goodsManagementCategory.join(",");
      console.log(this.form);
    },
    getCategoryList() {
      getCategoryList(0).then((res) => {
        res.data.result.forEach((item) => {
          item.checked = false; // 初始化每个项目的checked属性为false
        });
        this.cateList = res.data.result;
      });
    },
    showPicker() {
      this.$refs.cityPicker.show();
    },
    // 三级地址联动回调
    getpickerParentValue(e) {
      // 将需要绑定的地址设置为空，并赋值
      this.form.storeAddressIdPath = [];
      this.form.storeAddressPath = [];
      let name = "";

      e.forEach((item, index) => {
        if (item.id) {
          // 遍历数据
          this.form.storeAddressIdPath.push(item.id);
          this.form.storeAddressPath.push(item.localName);
          name += item.localName;
          this.form.___path = name;
        }
        if (index == e.length - 1) {
          //如果是最后一个
          let _town = item.children.filter((_child) => {
            return _child.id == item.id;
          });
          this.$set(
            this.form,
            "storeCenter",
            _town[0].center.split(",")[0] + "," + _town[0].center.split(",")[1]
          );
          this.form.storeAddressIdPath = this.form.storeAddressIdPath.join(",");
          this.form.storeAddressPath = this.form.storeAddressPath.join(",");
        }
      });
      console.log(this.form);
    },

    // 店铺logo
    onUploadedtwo(lists) {
      lists.forEach((item) => {
        this.form.storeLogo.push(item.response.result);
      });
    },
    onRemove(lists) {
      this.form.storeLogo = [];
    },
    // 下一步
    next() {
      this.$refs.thirdForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let params = JSON.parse(JSON.stringify(this.form));
          params.storeLogo = this.form.storeLogo.toString();
          params.goodsManagementCategory =
            this.form.goodsManagementCategory.toString();

          applyThird(params)
            .then((res) => {
              this.loading = false;
              // uni.showToast({
              //   title: "请正确输入",
              //   icon: "none",
              //   duration: 1500,
              // });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/tabbar/user/my",
                });
              }, 1000);
            })
            .catch(() => {
              uni.showToast({
                title: "请正确输入",
                icon: "none",
                duration: 1500,
              });
              this.loading = false;
            });
        } else {
          uni.showToast({
            title: "请正确输入",
            icon: "none",
            duration: 1500,
          });
          console.log("error");
        }
      });
    },
  },
  mounted() {
    this.getCategoryList();
  },
};
</script>
<style lang="scss" scoped>
.person-msg {
  padding: 10px;
}
h4 {
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  font-weight: bold;
  color: #333;
  font-size: 14px;
  line-height: 40px;
  text-align: left;
}
.ivu-input-wrapper {
  width: 300px;
}
.img-list {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: auto;
  position: relative;
  .cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    width: inherit;
    height: inherit;
    align-items: center;
    justify-content: space-around;
    i {
      color: #fff;
      font-size: 30px;
      cursor: pointer;
    }
  }
  &:hover .cover {
    display: flex;
  }
}
.describe {
  font-size: 12px;
  color: #999;
}
.bunem {
  width: 309px;
  margin-top: 20px;
  height: 32px;
  display: flex;
  align-items: #ffffff;
  margin-bottom: 35px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
::v-deep {
  .u-checkbox__icon-wrap--checked {
    border-color: #fe3c3c !important;
    background-color: #fe3c3c !important;
  }
}
</style>