363 lines
7.3 KiB
Plaintext
363 lines
7.3 KiB
Plaintext
<template>
|
||
<view class="page">
|
||
<scroll-view class="page-scroll" scroll-y>
|
||
<!-- 公司Logo和名称 -->
|
||
<view class="header-section">
|
||
<view class="company-logo">
|
||
<text class="logo-text">优艺家</text>
|
||
</view>
|
||
<text class="company-name">{{ companyInfo.name }}</text>
|
||
<text class="company-slogan">{{ companyInfo.slogan }}</text>
|
||
</view>
|
||
|
||
<!-- 公司介绍 -->
|
||
<view class="section">
|
||
<section-header title="公司简介"></section-header>
|
||
<view class="intro-card">
|
||
<text class="intro-text">{{ companyInfo.description }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我们的优势 -->
|
||
<view class="section">
|
||
<section-header title="我们的优势"></section-header>
|
||
<view class="features-grid">
|
||
<view class="feature-item" v-for="item in companyInfo.features" :key="item.title">
|
||
<view class="feature-icon-bg">
|
||
<text class="feature-icon">✓</text>
|
||
</view>
|
||
<text class="feature-title">{{ item.title }}</text>
|
||
<text class="feature-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="section">
|
||
<section-header title="联系我们"></section-header>
|
||
<view class="contact-card">
|
||
<view class="contact-item" @click="callPhone">
|
||
<view class="contact-icon-bg">
|
||
<text class="contact-icon">📞</text>
|
||
</view>
|
||
<view class="contact-info">
|
||
<text class="contact-label">客服电话</text>
|
||
<text class="contact-value">{{ companyInfo.phone }}</text>
|
||
</view>
|
||
<text class="contact-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="contact-item" @click="copyWechat">
|
||
<view class="contact-icon-bg">
|
||
<text class="contact-icon">💬</text>
|
||
</view>
|
||
<view class="contact-info">
|
||
<text class="contact-label">微信号</text>
|
||
<text class="contact-value">{{ companyInfo.wechat }}</text>
|
||
</view>
|
||
<text class="contact-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="contact-item" @click="openLocation">
|
||
<view class="contact-icon-bg">
|
||
<text class="contact-icon">📍</text>
|
||
</view>
|
||
<view class="contact-info">
|
||
<text class="contact-label">公司地址</text>
|
||
<text class="contact-value">{{ companyInfo.address }}</text>
|
||
</view>
|
||
<text class="contact-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="contact-item">
|
||
<view class="contact-icon-bg">
|
||
<text class="contact-icon">🕐</text>
|
||
</view>
|
||
<view class="contact-info">
|
||
<text class="contact-label">营业时间</text>
|
||
<text class="contact-value">{{ companyInfo.workTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部间距 -->
|
||
<view class="bottom-space"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { getCompanyInfo } from '@/api/index.uts'
|
||
|
||
// 特色类型
|
||
type FeatureItem = {
|
||
title : string
|
||
desc : string
|
||
}
|
||
|
||
// 公司信息类型
|
||
type CompanyInfo = {
|
||
name : string
|
||
slogan : string
|
||
description : string
|
||
phone : string
|
||
wechat : string
|
||
address : string
|
||
workTime : string
|
||
features : FeatureItem[]
|
||
}
|
||
|
||
// 公司信息
|
||
const companyInfo = ref<CompanyInfo>({
|
||
name: '优艺家沙发翻新',
|
||
slogan: '让旧沙发焕发新生',
|
||
description: '',
|
||
phone: '400-888-8888',
|
||
wechat: 'youyijia2026',
|
||
address: '',
|
||
workTime: '',
|
||
features: []
|
||
})
|
||
|
||
// 获取公司信息
|
||
const fetchCompanyInfo = async () => {
|
||
try {
|
||
const res = await getCompanyInfo()
|
||
const data = res.data as UTSJSONObject
|
||
|
||
const featuresData = data['features'] as UTSJSONObject[]
|
||
const features = featuresData.map((item) : FeatureItem => {
|
||
return {
|
||
title: item['title'] as string,
|
||
desc: item['desc'] as string
|
||
} as FeatureItem
|
||
})
|
||
|
||
companyInfo.value = {
|
||
name: data['name'] as string,
|
||
slogan: data['slogan'] as string,
|
||
description: data['description'] as string,
|
||
phone: data['phone'] as string,
|
||
wechat: data['wechat'] as string,
|
||
address: data['address'] as string,
|
||
workTime: data['workTime'] as string,
|
||
features: features
|
||
} as CompanyInfo
|
||
} catch (e) {
|
||
console.error('获取公司信息失败', e)
|
||
}
|
||
}
|
||
|
||
// 拨打电话
|
||
const callPhone = () => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: companyInfo.value.phone,
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '拨打电话失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 复制微信号
|
||
const copyWechat = () => {
|
||
uni.setClipboardData({
|
||
data: companyInfo.value.wechat,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '微信号已复制',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 打开位置
|
||
const openLocation = () => {
|
||
uni.openLocation({
|
||
latitude: 31.2,
|
||
longitude: 121.5,
|
||
name: companyInfo.value.name,
|
||
address: companyInfo.value.address,
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '无法打开地图',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
onLoad(() => {
|
||
fetchCompanyInfo()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.page {
|
||
flex: 1;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.page-scroll {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.header-section {
|
||
background: linear-gradient(135deg, #D4A574 0%, #B8895A 100%);
|
||
padding: 60rpx 32rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.company-logo {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.logo-text {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #D4A574;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.company-slogan {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
/* 通用section */
|
||
.section {
|
||
padding: 0 24rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
/* 公司介绍 */
|
||
.intro-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.intro-text {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
/* 优势 */
|
||
.features-grid {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.feature-item {
|
||
width: 50%;
|
||
padding: 24rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.feature-icon-bg {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-color: #D4A574;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 40rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.feature-desc {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 联系方式 */
|
||
.contact-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.contact-item {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 32rpx;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #EBEEF5;
|
||
}
|
||
|
||
.contact-item:last-child {
|
||
border-bottom-width: 0;
|
||
}
|
||
|
||
.contact-icon-bg {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
background-color: #FDF6EE;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.contact-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.contact-label {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.contact-value {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.contact-arrow {
|
||
font-size: 36rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 底部间距 */
|
||
.bottom-space {
|
||
height: 60rpx;
|
||
}
|
||
</style>
|