|
|
@@ -0,0 +1,214 @@
|
|
|
+<template>
|
|
|
+ <ion-page>
|
|
|
+ <ion-header class="header-theme2">
|
|
|
+ <ion-toolbar>
|
|
|
+ <ion-buttons slot="start">
|
|
|
+ <ion-icon :icon="arrowBackOutline" @click="onBack"></ion-icon>
|
|
|
+ </ion-buttons>
|
|
|
+ <ion-title>
|
|
|
+ 企业信息详情
|
|
|
+ </ion-title>
|
|
|
+ </ion-toolbar>
|
|
|
+ </ion-header>
|
|
|
+ <ion-content>
|
|
|
+ <div class="bw-vue-form">
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>企业名称</ion-label>
|
|
|
+ <ion-text>{{ dataModel.companyName }}</ion-text>
|
|
|
+ </div>
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>统一信用代码</ion-label>
|
|
|
+ <ion-text>{{ dataModel.companyCode }}</ion-text>
|
|
|
+ </div>
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>企业地址</ion-label>
|
|
|
+ <ion-text>{{ dataModel.companyAddress }}</ion-text>
|
|
|
+ </div>
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>所属驿站</ion-label>
|
|
|
+ <ion-text>{{ dataModel.siteName }}</ion-text>
|
|
|
+ </div>
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>联系人</ion-label>
|
|
|
+ <ion-text>{{ dataModel.userName }}</ion-text>
|
|
|
+ </div>
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>联系电话</ion-label>
|
|
|
+ <ion-text>{{ dataModel.userMobile }}</ion-text>
|
|
|
+ </div>
|
|
|
+ <div class="form-detail">
|
|
|
+ <ion-label>企业简介</ion-label>
|
|
|
+ <ion-text>{{ dataModel.companyDesc }}</ion-text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ion-content>
|
|
|
+ <ion-footer>
|
|
|
+ </ion-footer>
|
|
|
+ </ion-page>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+import {defineComponent, ref, reactive, watch, toRefs} from "vue";
|
|
|
+import {getCompanyById} from "@/api/company";
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import {onIonViewDidEnter} from "@ionic/vue";
|
|
|
+import {arrowBackOutline} from 'ionicons/icons';
|
|
|
+
|
|
|
+
|
|
|
+interface FormData{
|
|
|
+ dataModel:any
|
|
|
+}
|
|
|
+export default defineComponent({
|
|
|
+ name: 'CompanyMenu',
|
|
|
+ setup() {
|
|
|
+ const router = useRouter();
|
|
|
+ const route = useRoute();
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const formData = reactive<FormData>({
|
|
|
+ dataModel: {
|
|
|
+ companyID:null,
|
|
|
+ companyName:null
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const onBack=()=>{
|
|
|
+ router.push({path:'./list',query:{reload:1}});
|
|
|
+ };
|
|
|
+
|
|
|
+ const onPathForward = (pathValue:string,statusValue:any)=>{
|
|
|
+ router.push({path: pathValue, query: {reload:1,id:formData.dataModel.companyID,status:statusValue}});
|
|
|
+ };
|
|
|
+
|
|
|
+ const loadData = async (companyID:any)=>{
|
|
|
+ loading.value = true;
|
|
|
+ const reqData = await getCompanyById(companyID);
|
|
|
+ formData.dataModel = reqData;
|
|
|
+ console.log("dataModel",formData.dataModel);
|
|
|
+ loading.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const reload = (companyID:any) => {
|
|
|
+ loadData(companyID);
|
|
|
+ };
|
|
|
+
|
|
|
+ watch(() => route.query, () => {
|
|
|
+ if (route.query.reload) {
|
|
|
+ reload(route.query.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ onIonViewDidEnter(() => {
|
|
|
+ if (route.query.reload) {
|
|
|
+ reload(route.query.id)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...toRefs(formData),
|
|
|
+ arrowBackOutline,
|
|
|
+ route,
|
|
|
+ loading,
|
|
|
+ onPathForward,
|
|
|
+ onBack,
|
|
|
+ loadData,
|
|
|
+ router,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const companyID = this.route.query.id;
|
|
|
+ this.loadData(companyID);
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ion-item {
|
|
|
+ --border-width: 0;
|
|
|
+ --border-style: none;
|
|
|
+
|
|
|
+ ion-label, ion-input, ion-select, ion-datetime-button {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stepFlex {
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .stepFlex-item {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: -10px;
|
|
|
+
|
|
|
+ .stepFlex-item-label {
|
|
|
+ padding-top: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .stepFlex-item-label-title {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stepFlex-item-label-desc {
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #b9b9bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .greenCircle {
|
|
|
+ top: calc(50% - 15px);
|
|
|
+ left: calc(50% - 4px);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #31A2FE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .now {
|
|
|
+ top: calc(50% - 18px);
|
|
|
+ left: calc(50% - 8px);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #31A2FE;
|
|
|
+ border: 4px solid #c5e8f9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grayCircle {
|
|
|
+ top: calc(50% - 15px);
|
|
|
+ left: calc(50% - 4px);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .greenLine {
|
|
|
+ width: 100%;
|
|
|
+ top: calc(50% - 11px);
|
|
|
+ left: calc(50% - 2px);
|
|
|
+ height: 2px;
|
|
|
+ background-color: #31A2FE;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grayLine {
|
|
|
+ height: 0;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ width: 100%;
|
|
|
+ top: calc(50% - 11px);
|
|
|
+ left: calc(50% - 2px);
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
