feat: 详情页主体

jsconfig.json

 {
+  "strict": true,
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"]
-    }
     },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.vue"
-  ],
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
   "vueCompilerOptions": {
     "target": 2
   }

package.json

@@ -67,6 +67,7 @@
     "@dcloudio/uni-quickapp-webview": "^2.0.2-3081220230817001",
     "@dcloudio/uni-stacktracey": "^2.0.2-3081220230817001",
     "@dcloudio/uni-stat": "^2.0.2-3081220230817001",
+    "@vue/composition-api": "^1.7.2",
     "@vue/shared": "^3.0.0",
     "core-js": "^3.8.3",
     "flyio": "^0.6.2",

src/api/url/index.js

@@ -7,5 +7,7 @@ export default {
   // 土地列表
   landList: '/postcard/api/land/v1.0/page',
   // 载体列表
-  carrierList: '/postcard/api/carrier/v1.0/page'
+  carrierList: '/postcard/api/carrier/v1.0/page',
+  // 产业园详情
+  industrialDetail: '/postcard/api/parkInfo/v1.0/detail'
 }

src/components/call-service/call-service.vue

+<template>
+  <u-popup
+    :show="showModal"
+    mode="center"
+    @close="close"
+    round="10"
+    :safeAreaInsetBottom="false"
+  >
+    <div class="content">
+      <p class="title c4d f32">{{ titleName }}</p>
+      <p class="c4d f32">{{ phoneInfo.name }}：{{ phoneInfo.phone }}</p>
+      <div class="btn-view" @click="call">拨打电话</div>
+    </div>
+  </u-popup>
+</template>
+<script>
+export default {
+  props: {
+    phoneInfo: {
+      type: Object,
+      default: () => {
+        return {
+          name: "客服中心",
+          phone: "18703707175",
+        };
+      },
+    },
+    showCallService: {
+      default: false,
+    },
+    titleName: {
+      type: String,
+      default: "联系我们",
+    },
+  },
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+  methods: {
+    close() {
+      this.showModal = false;
+    },
+    call() {
+      uni.makePhoneCall({
+        phoneNumber: this.phoneInfo.phone,
+      });
+    },
+  },
+  watch: {
+    showCallService() {
+      this.showModal = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 650rpx;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 10rpx;
+  text-align: center;
+  padding-top: 39rpx;
+}
+.title {
+  font-weight: 500;
+  margin-bottom: 80rpx;
+}
+.btn-view {
+  border-top: 1rpx solid #e6e6e6;
+  height: 112rpx;
+  box-sizing: border-box;
+  line-height: 111rpx;
+  font-size: 30rpx;
+  color: #bf0008;
+  margin-top: 98rpx;
+}
+</style>

src/main.js

@@ -3,8 +3,9 @@ import App from './App'
 import './uni.promisify.adaptor'
 import fetch from './utils/request.js'
 import store from './store'
-
+import VueCompositionAPI from '@vue/composition-api'
 import uView from 'uview-ui'
+
 Vue.use(uView)
 // 如此配置即可
 // uni.$u.config.unit = 'rpx'
@@ -16,6 +17,8 @@ uni.$u.setConfig({
 	},
 })
 
+Vue.use(VueCompositionAPI)
+
 
 Array.prototype.removeItem = function (val) {
   var index = this.indexOf(val);

src/pages/detail/components/CommonDetail.vue

+<template>
+  <div v-if="detail" class="common-detail">
+    <div>
+      <u-swiper
+        indicator
+        circular
+        :list="detail.imgUrlList"
+        :height="320"
+      ></u-swiper>
+    </div>
+    <div>
+      <slot :detail="detail"></slot>
+    </div>
+    <div class="common-detail__bottom-cell">
+      <div class="flex align-center">
+        <!-- todo 图标 -->
+        <image
+          class="common-detail__icon"
+          src="@/static/img/icon-share.png"
+        ></image>
+        <span>分享</span>
+      </div>
+      <div
+        class="flex align-center justify-center common-detail__contact-btn"
+        :class="{ disabled: !detail.contactPerson }"
+      >
+        <template v-if="!detail.contactPerson">
+          <!-- todo 图标 -->
+          <image
+            class="common-detail__icon"
+            src="@/static/img/icon-phone.png"
+          ></image>
+          <span class="common-detail__contact-content" @tap="handleContact"
+            >电话联系对接人</span
+          >
+        </template>
+        <span v-else class="common-detail__contact-content">暂无对接人</span>
+      </div>
+      <!-- 联系人弹窗 -->
+      <call-service
+        :phoneInfo="phoneInfo"
+        :showCallService="showCallService"
+        :titleName="callTitle"
+      ></call-service>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from "@vue/composition-api";
+import { detailType } from "@/utils/constant.js";
+import CallService from "@/components/call-service/call-service.vue";
+
+export default defineComponent({
+  name: "CommonDetail",
+  components: {
+    CallService,
+  },
+  props: {
+    detailType: {
+      type: String,
+    },
+    queryUrl: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      /** @type {IndustrialParkDetailResp} */
+      detail: null,
+      detailId: "",
+      callTitle: "",
+      phoneInfo: null,
+      showCallService: false,
+    };
+  },
+  computed: {
+    /** 详情类型名称 */
+    typeName() {
+      const config = {
+        [detailType.develop]: "开发区",
+        [detailType.carrier]: "载体",
+        [detailType.industrial]: "产业园",
+        [detailType.land]: "土地",
+      };
+      return config[this.detailType];
+    },
+    phone() {
+      // todo 联系人电话
+      return "";
+    },
+  },
+  mounted() {
+    this.detailId = this.$root.$mp.query.id || "132097";
+    this.init();
+  },
+  methods: {
+    init() {
+      this.initDetail();
+    },
+    async initDetail() {
+      try {
+        const result = await this.$fetch({
+          url: `${this.queryUrl}/${this.detailId}`,
+          methods: "get",
+        });
+        this.detail = result;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    handleContact() {
+      if (this.phone) {
+        this.callTitle = this.typeName + "对接人";
+        this.phoneInfo = {
+          name: this.detail.contactPerson,
+          phone: this.phone,
+        };
+      } else {
+        this.callTitle = "联系我们";
+        this.phoneInfo = {
+          name: "客服中心",
+          phone: "18703707175",
+        };
+      }
+      this.showCallService = !this.showCallService;
+    },
+  },
+});
+</script>
+<style lang="scss">
+.common-detail {
+  &__bottom-cell {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding: 20rpx 30rpx;
+    height: 120rpx;
+    background-color: white;
+  }
+  &__contact-btn {
+    margin-left: 20rpx;
+    width: 550rpx;
+    height: 80rpx;
+    background-color: #4374ef;
+    color: white;
+    font-size: 30rpx;
+    border-radius: 4px;
+    &.disabled {
+      background: #e6e6e6;
+      color: #bdbdbd;
+    }
+  }
+  &__contact-content {
+    margin-left: 20rpx;
+  }
+  &__icon {
+    width: 40rpx;
+    height: 40rpx;
+  }
+}
+</style>

src/pages/detail/industrialDetail.vue

+<template>
+  <div>
+    <CommonDetail detail-type="industrial" :queryUrl="queryUrl"></CommonDetail>
+  </div>
+</template>
+<script>
+import CommonDetail from "./components/CommonDetail.vue";
+import api from "@/api/url/index.js";
+
+export default {
+  name: "IndustrialDetail",
+  components: {
+    CommonDetail,
+  },
+  data() {
+    return {
+      queryUrl: api.industrialDetail,
+    };
+  },
+};
+</script>

src/type/common.d.ts

@@ -133,3 +133,17 @@ declare enum AuthStatus {
   /** 已回退 */
   back = 9,
 }
+
+/**
+ * 详情类型
+ */
+declare enum DetailType {
+  /** 开发区 */
+  develop = 'develop',
+  /** 产业园 */
+  industrial = 'industrial',
+  /** 土地 */
+  land = 'land',
+  /** 载体 */
+  carrier = 'carrier',
+}

src/utils/constant.js

+/**
+ * 详情类型
+ */
+export const detailType = {
+  /** 开发区 */
+  develop: "develop",
+  /** 产业园 */
+  industrial: "industrial",
+  /** 土地 */
+  land: "land",
+  /** 载体 */
+  carrier: "carrier",
+};

yarn.lock

@@ -2211,6 +2211,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/composition-api@^1.7.2":
+  version "1.7.2"
+  resolved "https://registry.npmmirror.com/@vue/composition-api/-/composition-api-1.7.2.tgz#0b656f3ec39fefc2cf40aaa8c12426bcfeae1b44"
+  integrity sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==
+
 "@vue/reactivity@3.3.12":
   version "3.3.12"
   resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.12.tgz#b4a62a7678ab20c1ef32f991342ddbb8532417da"