uni-app企业产品展示、介绍、联系页面

针对您提出的uni-app企业产品展示、介绍、联系页面的需求，以下是一个简化的代码示例，展示了如何使用uni-app框架构建一个包含产品展示、产品介绍和联系信息的基本页面结构。

1. 项目结构

假设您的项目结构如下：

- pages/
  - index/
    - index.vue       // 产品展示页面
  - intro/
    - intro.vue       // 产品介绍页面
  - contact/
    - contact.vue     // 联系页面
- App.vue
- main.js
- pages.json

2. pages.json

配置页面路径：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "产品展示"
      }
    },
    {
      "path": "pages/intro/intro",
      "style": {
        "navigationBarTitleText": "产品介绍"
      }
    },
    {
      "path": "pages/contact/contact",
      "style": {
        "navigationBarTitleText": "联系我们"
      }
    }
  ]
}

3. index.vue (产品展示页面)

<template>
  <view class="container">
    <swiper autoplay="true" interval="3000" indicator-dots="true">
      <swiper-item v-for="(product, index) in products" :key="index">
        <image :src="product.image" class="slide-image"></image>
      </swiper-item>
    </swiper>
    <navigator url="/pages/intro/intro">了解更多</navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { image: '/static/images/product1.jpg' },
        { image: '/static/images/product2.jpg' },
        { image: '/static/images/product3.jpg' }
      ]
    };
  }
};
</script>

<style>
.container { display: flex; flex-direction: column; align-items: center; }
.slide-image { width: 100%; height: 300px; }
</style>

4. intro.vue (产品介绍页面)

<template>
  <view>
    <text>这里是产品详细介绍</text>
    <navigator url="/pages/contact/contact">联系我们</navigator>
  </view>
</template>

5. contact.vue (联系页面)

<template>
  <view>
    <text>联系方式:</text>
    <text>电话: 123-456-7890</text>
    <text>邮箱: info@example.com</text>
    <button @click="sendEmail">发送邮件</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendEmail() {
      // 发送邮件的逻辑，可能需要调用后端接口或使用邮箱客户端
      uni.showToast({ title: '邮件发送中...', icon: 'loading' });
      setTimeout(() => {
        uni.showToast({ title: '邮件发送成功', icon: 'success' });
      }, 2000);
    }
  }
};
</script>

以上代码展示了如何使用uni-app创建一个简单的企业产品展示、介绍和联系页面。您可以根据需要进一步丰富页面内容和样式。