初始化参股
This commit is contained in:
362
前端/pages/about/index.uvue
Normal file
362
前端/pages/about/index.uvue
Normal file
@@ -0,0 +1,362 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user