357 lines
10 KiB
Vue
357 lines
10 KiB
Vue
<template>
|
||
<view
|
||
class="container"
|
||
:class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
|
||
>
|
||
<navBar />
|
||
<view class="content">
|
||
<view class="title-container">
|
||
<view class="line"></view>
|
||
<view class="title">常见问题</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="infoBox" v-for="(item, index) in dataList" :key="index">
|
||
<view class="title" @click="handleShow(item)">
|
||
<view class="round"></view>
|
||
<view class="text">{{ item.title }}</view>
|
||
<view class="arrow" :class="{ active: item.show }">></view>
|
||
</view>
|
||
<template v-if="item.show">
|
||
<template v-for="(item2, index2) in item.title2" :key="index2">
|
||
<view class="title2" @click="handleExpend(item2,item)">
|
||
<view class="expend" :class="{ active: item2.expend }">{{ item2.expend ? "—" : "+" }}</view>
|
||
<view class="text">{{ item2.text }}</view>
|
||
</view>
|
||
<view class="preBox" :class="{ active: item2.expend }" v-show="item2.expend">
|
||
<text
|
||
class="pre"
|
||
v-for="(item3, index3) in item2.content"
|
||
:key="index3"
|
||
>
|
||
{{ item3 }}
|
||
</text>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import navBar from "@/components/navBar.vue";
|
||
import { ref } from "vue";
|
||
import { useMainStore } from "@/store/index.js";
|
||
import { projectInfo } from "@/config/index.js";
|
||
|
||
const { themeInfo, storeState } = useMainStore();
|
||
const dataList = ref([
|
||
{
|
||
title: "关于订仓",
|
||
show: false,
|
||
title2: [
|
||
{
|
||
text: "如何订仓",
|
||
expend: false,
|
||
content: [
|
||
`1. 关注「${projectInfo.name}」公众号-点击线上订仓-选择所需仓型-上传并提交个人或企业信息-支付，即可完成线上订仓。`,
|
||
`2. 关注「${projectInfo.name}」公众号-点击预约看仓-选择预约区域，或拨打客服电话${projectInfo.phone}预约看仓门店与时间，即可到现场看仓与订仓。`,
|
||
],
|
||
},
|
||
{
|
||
text: "仓型选择",
|
||
expend: false,
|
||
content: [
|
||
"小型仓（1-4立方）小型仓（1-4立方）",
|
||
"衣物仓（2-8立方）",
|
||
"中型仓（5-8立方）",
|
||
"大型仓（9-16立方）",
|
||
"特大仓（17-50立方）",
|
||
"玩具仓（1-4立方）",
|
||
],
|
||
},
|
||
{
|
||
text: "租金收费",
|
||
expend: false,
|
||
content: [
|
||
`「${projectInfo.name}」是按照仓体的体积（长*宽*高）来计算费用，具体以实际租仓体积为准，每个仓体的月租价格可在公众号线上订仓页面查询`,
|
||
],
|
||
},
|
||
{
|
||
text: "租期选择",
|
||
expend: false,
|
||
content: [
|
||
"1个月起租，可选择1~36个月灵活租期。",
|
||
],
|
||
},
|
||
{
|
||
text: "付款方式",
|
||
expend: false,
|
||
content: [
|
||
`1.线上远程订仓可使用微信支付，若需要其他支付方式请联系客服电话${projectInfo.phone}。`,
|
||
"2.现场订仓可使用微信、支付宝、现金等支付方式支付。"
|
||
],
|
||
},
|
||
{
|
||
text: "租仓所需证件",
|
||
expend: false,
|
||
content: [
|
||
"1.个人客户提供有效身份证明(身份证、港澳通行证、回乡证、台胞证、护照)",
|
||
"2.企业客户提供营业执照原件或复印件加盖公章，代办人身份证原件，公司授权委托书，加盖公章"
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "关于用仓与售后",
|
||
show: false,
|
||
title2: [
|
||
{
|
||
text: "一、使用迷你仓",
|
||
expend: false,
|
||
content: [
|
||
"1.成功订仓后会有专门客服与您联系，给您发送用仓指南。",
|
||
`2.您可自订单生效起随时把需要储存的物品自行存放到所订仓库，「${projectInfo.name}」是自助的专业智能仓储，因此不提供搬运服务。如您没有熟悉的搬运公司，我们可以友情推荐相关的合作搬运伙伴，费用需要您和搬运公司自行协商并另行支付。`,
|
||
"3.仓内工具自助区有配置平板车、登高梯、剪刀、封箱胶等工具。（使用后请放回原处）",
|
||
`4.「${projectInfo.name}」用仓时间为24小时自助智能存取。`,
|
||
`5.「${projectInfo.name}」只提供智能迷你仓仓储服务，不提供代签收、卸货、入仓、包装以及代收发快递等服务`
|
||
],
|
||
},
|
||
{
|
||
text: "二、仓型调整",
|
||
expend: false,
|
||
content: [
|
||
`因物品增加或减少而需要调整仓型，「${projectInfo.name}」可以随时为您进行调整，具体费用请联系客服人员${projectInfo.phone}`,
|
||
],
|
||
},
|
||
{
|
||
text: "三、仓位逾期",
|
||
expend: false,
|
||
content: [
|
||
`逾期的仓位，微信会给您发送提醒，「${projectInfo.name}」的客服也会在7天内与您电话或者微信联系，您可以选择续仓或退仓。`,
|
||
],
|
||
},
|
||
{
|
||
text: "四、续仓或退仓",
|
||
expend: false,
|
||
content: [
|
||
"租约期满需要续仓或退仓可联系客服电话或自行在公众号订单详情上操作。",
|
||
],
|
||
},
|
||
{
|
||
text: "五、如何换电池",
|
||
expend: false,
|
||
content: [
|
||
"找客服。",
|
||
],
|
||
},
|
||
{
|
||
text: "六、如何用充电宝",
|
||
expend: false,
|
||
content: [
|
||
"找客服。",
|
||
],
|
||
},
|
||
{
|
||
text: "如何申报维修",
|
||
expend: false,
|
||
content: [
|
||
"找客服。",
|
||
],
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: "关于安全卫生",
|
||
show: false,
|
||
title2: [
|
||
{
|
||
text: "一、禁存物品",
|
||
expend: false,
|
||
content: [
|
||
"禁止存放油漆、汽油、火柴、煤油、鞭炮、液压气体等易燃易爆危险品；",
|
||
"禁止存放动物、植物或其它生物及易腐烂物品。",
|
||
"禁止存放枪支弹药、毒品。",
|
||
"禁止存放产生异味、辐射、噪音的物品。",
|
||
"禁止存放国家相关法律明文禁止的物品。"
|
||
],
|
||
},
|
||
{
|
||
text: "二、环境安全",
|
||
expend: false,
|
||
content: [
|
||
"符合国际迷你仓行业标准",
|
||
`智能二维码仓库门禁，客户须有「${projectInfo.name}」授权的智能门禁权限才能进入仓库`,
|
||
"仓内一人一仓一锁，仓体独立，专属隐私保护",
|
||
"全国顶尖银行级智能红外线安防系统",
|
||
"24小时多方位云端实时监控",
|
||
"物业安保人员定时巡查仓库外围",
|
||
`「${projectInfo.name}」为每个仓位提供5000元保额的意外责任险`
|
||
],
|
||
},
|
||
{
|
||
text: "三、环境卫生",
|
||
expend: false,
|
||
content: [
|
||
"常年恒温恒湿。",
|
||
"定期专业清洁，保持仓内清洁整齐。",
|
||
"定期使用史伟莎进行整体消杀除虫。",
|
||
],
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: "其他注意事项",
|
||
show: false,
|
||
title2: [
|
||
{
|
||
text: "注意事项",
|
||
expend: false,
|
||
content: [
|
||
"禁止宠物入内",
|
||
"禁止仓内饮食、吸烟",
|
||
"禁止仓内留宿",
|
||
"请自行保管随身物品，锁好仓门",
|
||
`如果您对「${projectInfo.name}」有任何的意见或建议，请拨打客服热线${projectInfo.phone}，我们的客服人员会在第一时间帮忙解决您的问题。`
|
||
],
|
||
},
|
||
]
|
||
}
|
||
]);
|
||
const handleShow = (row) => {
|
||
let show = !row.show
|
||
dataList.value.forEach(item=>{
|
||
item.show = false
|
||
})
|
||
row.show = show
|
||
};
|
||
const handleExpend = (item,row) => {
|
||
let expend = !item.expend
|
||
row.title2.forEach(x=>{
|
||
x.expend = false
|
||
})
|
||
item.expend = expend;
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/static/style/theme.scss";
|
||
|
||
.container {
|
||
margin: 0;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
var(--right-linear),
|
||
var(--left-linear2)
|
||
);
|
||
background-attachment: fixed;
|
||
.content {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #fff;
|
||
.infoBox {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 8px;
|
||
|
||
.title {
|
||
padding: 10rpx 20rpx;
|
||
background-color: #cccccc1c;
|
||
border-radius: 8px;
|
||
}
|
||
.title,
|
||
.title2 {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 34px;
|
||
|
||
.round {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: var(--main-color);
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.text {
|
||
flex: 1;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #999;
|
||
transform: rotate(90deg) scaleX(0.5);
|
||
transition: transform 0.1s ease; // 平滑旋转
|
||
&.active {
|
||
transform: rotate(-90deg) scaleX(0.5);
|
||
}
|
||
}
|
||
|
||
&.title2 {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
|
||
.expend {
|
||
width: 60rpx;
|
||
text-align: center;
|
||
font-size: 22px;
|
||
margin-right: 8px;
|
||
color: #666;
|
||
&.active{
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.preBox {
|
||
background-color: #cccccc1c;
|
||
padding: 20rpx;
|
||
// max-height: 0; // 初始高度为 0
|
||
// overflow: hidden; // 隐藏溢出的内容
|
||
// transition: max-height 0.5s ease; // 设置高度过渡动画
|
||
// &.active{
|
||
// max-height: 1000px;
|
||
// }
|
||
}
|
||
.pre {
|
||
font-size: 14px;
|
||
color: #000;
|
||
display: block;
|
||
text-indent: 20px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap; // 保持换行和空格
|
||
word-wrap: break-word; // 长单词换行
|
||
}
|
||
}
|
||
.title-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 60rpx 60rpx;
|
||
margin-bottom: 40rpx;
|
||
.title {
|
||
margin: 0 20px;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
.line {
|
||
flex: 1;
|
||
height: 2px;
|
||
background-color: var(--main-color);
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|