feature_20250828_竞品店维护

src/router/index.js

@@ -161,6 +161,12 @@ const router = new VueRouter({
           component: () => import('@/views/storeManagement/FSQStoreEdit.vue'),
           meta: { title: '仿石漆', keepAlive: true },
         },
+        {
+          path: '/competingStoresDetail',
+          name: 'competingStoresDetail',
+          component: () => import('@/views/storeManagement/competingStoresDetail.vue'),
+          meta: { title: '竞品门店', keepAlive: true },
+        },
       ],
     },
     {

src/views/storeManagement/competingStoresDetail.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="FSQStoreDetail">
+    <div class="header">
+      <van-nav-bar class="navBar" title="客户详情" left-arrow @click-left="onClickLeft">
+      </van-nav-bar>
+    </div>
+    <div class="content">
+      <van-form ref="tabstoreVal" readonly :scroll-to-error="true" :show-error="false">
+        <van-field readonly :value="fromData.storeCode" label="编号">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          v-model="fromData.storeName"
+          label="名称"
+          placeholder="请输入名称"
+          :rules="[{ required: true, message: '请输入名称' }]">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="fromData.storeCategoryName"
+          label="类型"
+          placeholder="点击选择类型">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          v-model="fromData.orgName"
+          label="销售部"
+          placeholder="请输入销售部"
+          :rules="[{ required: true, message: '请输入销售部' }]">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-row style="border-bottom: 1px solid #ebedf0">
+          <van-field
+            rows="1"
+            autosize
+            type="textarea"
+            readonly
+            clickable
+            name="picker"
+            :value="fromData.chainName"
+            label="经销商名称"
+            placeholder="点击选择经销商名称"
+            :rules="[
+              {
+                required: true,
+                message: '请选择经销商',
+              },
+            ]">
+            <template #left-icon>
+              <span class="van-f-red"></span>
+            </template>
+          </van-field>
+        </van-row>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="fromData.provinceName"
+          label="省(州)"
+          placeholder="点击选择省(州)">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="fromData.cityName"
+          label="城市"
+          placeholder="点击选择城市">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="fromData.districtName"
+          label="区(县)"
+          placeholder="点击选择区(县)">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="fromData.townName"
+          label="街道"
+          placeholder="点击选择街道">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          v-model="fromData.addressLine"
+          label="地址"
+          placeholder="请输入地址"
+          rows="1"
+          autosize
+          type="textarea"
+          :rules="[
+            {
+              required: true,
+              message: '请输入地址',
+            },
+          ]">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field readonly v-model="fromData.cityLevel" label="城市等级" />
+        <van-field readonly v-model="fromData.contactName" label="联系人">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field
+          type="tel"
+          v-model="fromData.telephone"
+          label="电话号码"
+          placeholder="请输入电话号码">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+        <van-field readonly v-model="fromData.salesmanName" label="销售员" placeholder="销售员">
+          <template #left-icon>
+            <span class="van-f-red"></span>
+          </template>
+        </van-field>
+      </van-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getById } from '@/api/index';
+export default {
+  data() {
+    return {
+      fromData: {
+        storeCode: '',
+        storeName: '',
+        telephone: '',
+        storeCategoryName: '',
+        provinceName: '',
+        cityName: '',
+        districtName: '',
+        addressLine: '',
+        orgName: '',
+        chainName: '',
+        townName: '',
+        contactName: '',
+        salesmanName: '',
+        cityLevel: '',
+      },
+    };
+  },
+  activated() {
+    this.toastLoading(0, '加载中...', true);
+    // 获取详情
+    this.getDetail();
+  },
+  methods: {
+    editorFn() {
+      this.$router.push({
+        path: '/FSQStoreEdit',
+        query: { id: this.$route.query.id },
+      });
+    },
+    getDetail() {
+      getById({ storeId: this.$route.query.id }).then((res) => {
+        this.toastLoading().clear();
+        if (res.code == 200) {
+          this.fromData = res.data;
+        }
+      });
+    },
+    onClickLeft() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.FSQStoreDetail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  .header {
+    height: 46px;
+  }
+  .content {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+</style>