group_web_merchant/src/views/store/storeUser/contractRenewal/detail.vue

<template>
  <div style="width: 100%; min-height: 100%; background-color: white">
    <div class="model">续约合同管理</div>
    <el-form :model="storeInfoModel" label-width="120px" ref="ruleFormRef" class="formBox">
      <el-row>
        <el-col :span="9" :offset="6">
          <el-form-item label="联系人">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.storeUserName" />
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.idCard" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.storePhone" />
          </el-form-item>
          <el-form-item label="商铺名称">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.storeName" />
          </el-form-item>
          <el-form-item label="经营板块">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.businessSectionName" />
          </el-form-item>
          <el-form-item label="经营种类">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.businessTypesName" />
          </el-form-item>
          <el-form-item label="门店营业状态">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.businessStatusStr" />
          </el-form-item>
          <el-form-item label="续约合同">
            <div style="display: flex; flex-wrap: wrap; gap: 10px">
              <template v-for="contractImage in storeInfoModel.renewContractImageList" :key="contractImage">
                <el-image
                  :src="contractImage"
                  style="height: 150px; cursor: pointer; border-radius: 13px"
                  @click="handlePictureCardPreview(contractImage)"
                />
              </template>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="提交时间">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.updateRenewContractTime" />
          </el-form-item>
          <el-form-item label="审核状态">
            <el-input :disabled="true" maxlength="50" value="待审核" />
          </el-form-item>
          <!-- <el-form-item label="拒绝原因" v-if="storeInfoModel.contractReason">
            <el-input :disabled="true" maxlength="50" v-model="storeInfoModel.contractReason" />
          </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>
    <div class="model">
      <el-button @click="goBack"> 返回 </el-button>
    </div>
  </div>
  <!--图片预览-->
  <el-dialog v-model="imagePopupVisible" title="预览" width="30%">
    <el-image style="width: 100%" :src="previewImage" fit="contain" />
  </el-dialog>
</template>

<script setup lang="tsx" name="ContractRenewalDetail">
import { ref, onMounted } from "vue";
import { StoreUser } from "@/api/interface";
import { ElMessage } from "element-plus";
import {
  getBusinessSection,
  getBusinessSectionTypes,
  getUnboundAccountList,
  saveStoreInfo,
  getStoreDetail,
  editStoreInfo,
  getInputPrompt,
  getDistrict
} from "@/api/modules/storeUser";
import { useRouter, useRoute } from "vue-router";
import type { FormInstance } from "element-plus";

const imagePopupVisible = ref(false);
const previewImage = ref("");

//文件上传地址
const uploadUrl = ref(`${import.meta.env.VITE_API_URL}/file/upload`);

const router = useRouter();
const route = useRoute();

//页面操作列是否禁用
const isDisabled = ref<boolean>(false);
//进入页面类型（新增：add,查看：show，编辑：edit）
//页面展开类型
const type = ref<String>("");
//页面id参数
const id = ref<String>("");

//商铺信息模块
const storeInfoModel = ref<StoreUser.ResStoreUserList>({
  //店铺名称
  storeName: "",
  //容纳人数
  storeCapacity: 1,
  //门店电话
  storeTel: "",
  //门店面积
  storeArea: "1",
  //是否连锁
  isChain: 1,
  //详细地址
  storeAddress: "",
  //门店简介
  storeBlurb: "",
  //经营板块
  businessSection: "1",
  //经营种类
  businessTypes: [],
  //营业执照
  fileList: [],
  //用户账号id
  userAccount: "",
  //门店状态
  storeStatus: "0",
  //门店营业状态
  businessStatus: "0",
  //行政区域
  district: []
});

//用户列表
const userOptions = ref<StoreUser.UserOptions[]>([]);

// 门店面积列表
const storeAreaList = ref<any[]>([
  { value: 1, label: "小于20平米" },
  { value: 2, label: "20~50平米" },
  { value: 3, label: "50~100平米" },
  { value: 4, label: "100~300平米" },
  { value: 5, label: "300~500平米" },
  { value: 6, label: "500~1000平米" },
  { value: 7, label: "大于1000平米" }
]);

// 经营板块列表
const businessSectionList = ref<any[]>([]);

//经营种类列表
const businessTypes = ref<any[]>([]);

// 门店状态列表
const storeStatusList = ref<any[]>([
  { value: 0, label: "正常" },
  { value: 1, label: "禁用" }
]);

// 门店营业状态列表
const businessStatusList = ref<any[]>([
  { value: 0, label: "正常营业" },
  { value: 1, label: "暂停营业" },
  { value: 2, label: "筹建中" },
  { value: 99, label: "永久关门" }
]);

//返回上一页
const goBack = () => {
  router.go(-1);
};

const handlePictureCardPreview = (url: string) => {
  previewImage.value = url;
  imagePopupVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();

onMounted(async () => {
  id.value = route.query.id as string;
  type.value = route.query.type as string;

  if (type.value != "add") {
    if (type.value == "show") {
      isDisabled.value = true;
    }
    try {
      let res = await getStoreDetail({ id: id.value });
      storeInfoModel.value = res.data;
    } catch (error) {
      ElMessage.error("获取详情失败");
    }
  }
});
</script>

<style scoped lang="scss">
.content {
  display: flex;
  width: 98%;
  height: 98%;
  margin: auto;
  .contentLeft {
    width: 50%;
  }
  .contentRight {
    width: 50%;
  }
}
.model {
  padding: 20px 0;
  margin-left: 50%;
  text-align: center;
  transform: translate(-60%, 0);
}
.formBox {
  width: 70%;
}
.table-box {
  height: auto !important;
}
</style>