|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 顶部图片和标题 -->
|
|
|
<view class="header-section">
|
|
|
<image
|
|
|
class="header-image"
|
|
|
src="/static/imgs/indexImg.png"
|
|
|
mode="aspectFill"
|
|
|
></image>
|
|
|
<view class="header-overlay">
|
|
|
<view class="header-title">生成电梯图纸</view>
|
|
|
<view class="header-subtitle">
|
|
|
选择模板并设置参数，快速生成专业电梯施工图
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 选择图纸模板 -->
|
|
|
<view class="section">
|
|
|
<view class="section-title">选择图纸模板</view>
|
|
|
<uv-skeletons
|
|
|
v-if="loading"
|
|
|
:loading="loading"
|
|
|
:skeleton="[
|
|
|
{
|
|
|
type: 'flex',
|
|
|
num: 2,
|
|
|
gap: '20rpx',
|
|
|
children: [
|
|
|
{
|
|
|
type: 'custom',
|
|
|
num: 1,
|
|
|
gap: '20rpx',
|
|
|
style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;',
|
|
|
},
|
|
|
{
|
|
|
type: 'custom',
|
|
|
num: 1,
|
|
|
gap: '20rpx',
|
|
|
style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
]"
|
|
|
></uv-skeletons>
|
|
|
<view class="template-grid" v-else>
|
|
|
<view
|
|
|
class="template-item"
|
|
|
:class="{ active: currentTemplate.id === item.id }"
|
|
|
@click="selectTemplate(item)"
|
|
|
v-for="item in templateList"
|
|
|
:key="item.id"
|
|
|
>
|
|
|
<view class="tag" v-if="item.price_cents">
|
|
|
¥ {{ item.price_cents / 100 }}
|
|
|
</view>
|
|
|
<view class="template-name">{{ item.name }}</view>
|
|
|
<view class="template-desc">{{ item.description }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 设置参数 -->
|
|
|
<view class="section" v-if="has_access">
|
|
|
<view class="section-title">设置参数</view>
|
|
|
<uv-skeletons
|
|
|
v-if="params_loading"
|
|
|
:loading="params_loading"
|
|
|
:skeleton="[
|
|
|
{
|
|
|
type: 'line',
|
|
|
num: 3,
|
|
|
gap: '20rpx',
|
|
|
},
|
|
|
]"
|
|
|
></uv-skeletons>
|
|
|
<view class="form" v-else>
|
|
|
<!-- 按分类展示参数 -->
|
|
|
<view
|
|
|
v-for="(params, category) in groupedParams"
|
|
|
:key="category"
|
|
|
class="param-category"
|
|
|
>
|
|
|
<view class="category-title">{{ category }}</view>
|
|
|
<uv-form
|
|
|
labelAlign="left"
|
|
|
labelWidth="auto"
|
|
|
labelPosition="left"
|
|
|
:model="formField"
|
|
|
:rules="rules"
|
|
|
ref="form"
|
|
|
>
|
|
|
<uv-form-item
|
|
|
:prop="item.name"
|
|
|
:label="item.name + '：'"
|
|
|
v-for="item in params"
|
|
|
:key="item.name"
|
|
|
>
|
|
|
<div class="required" v-if="item.required" style="color: #f12323">
|
|
|
*
|
|
|
</div>
|
|
|
<uv-input
|
|
|
@click="openPicker(item)"
|
|
|
@input="handleInputChange(item)"
|
|
|
@blur="validateNumberRange(item)"
|
|
|
:readonly="item.type === 'select' || item.name === '土建图号'"
|
|
|
:type="item.type === 'number' ? 'digit' : 'text'"
|
|
|
v-model="item.value"
|
|
|
color="#000"
|
|
|
border="bottom"
|
|
|
:placeholderStyle="{ color: '#666778' }"
|
|
|
:placeholder="item.type === 'number' ? `范围：${item.min} - ${item.max === 0 ? '不限' : item.max}` : (item.name === '土建图号'
|
|
|
? '自动生成'
|
|
|
: '请输入')"
|
|
|
></uv-input>
|
|
|
<!-- 数字范围提示 -->
|
|
|
<!-- <view
|
|
|
v-if="
|
|
|
item.type === 'number' &&
|
|
|
(item.min !== undefined || item.max !== undefined)
|
|
|
"
|
|
|
class="number-range-hint"
|
|
|
>
|
|
|
<text v-if="item.min !== undefined && item.max !== undefined">
|
|
|
范围：{{ item.min }} - {{ item.max }}
|
|
|
</text>
|
|
|
<text v-else-if="item.min !== undefined">
|
|
|
最小值：{{ item.min }}
|
|
|
</text>
|
|
|
<text v-else-if="item.max !== undefined">
|
|
|
最大值：{{ item.max }}
|
|
|
</text>
|
|
|
</view> -->
|
|
|
</uv-form-item>
|
|
|
</uv-form>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="section" v-else>
|
|
|
<div class="status">
|
|
|
申请状态：{{ get_access_status(currentTemplate.access_status) }}
|
|
|
</div>
|
|
|
<uv-button
|
|
|
size="small"
|
|
|
v-if="currentTemplate.access_status !== 'pending'"
|
|
|
@click="openApplyModal"
|
|
|
text="申请权限"
|
|
|
color="#3F70FF"
|
|
|
></uv-button>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部按钮 -->
|
|
|
<view class="bottom-actions">
|
|
|
<uv-button
|
|
|
:loading="generating"
|
|
|
@click="modalRefOpen"
|
|
|
text="生成图纸"
|
|
|
color="#3F70FF"
|
|
|
></uv-button>
|
|
|
<uv-button @click="bugFeedback" text="bug反馈"></uv-button>
|
|
|
<uv-button @click="viewHistory" text="查看记录" color="#df9d5d"></uv-button>
|
|
|
</view>
|
|
|
<uv-modal
|
|
|
ref="modalRef"
|
|
|
showCancelButton
|
|
|
content="确定生成图纸？"
|
|
|
@confirm="confirmGenerate"
|
|
|
></uv-modal>
|
|
|
<uv-modal
|
|
|
ref="applyModalRef"
|
|
|
showCancelButton
|
|
|
title="申请权限"
|
|
|
@confirm="confirmApply"
|
|
|
@cancel="cancelApply"
|
|
|
>
|
|
|
<view class="apply-modal-content">
|
|
|
<view class="apply-label">申请理由：</view>
|
|
|
<uv-textarea
|
|
|
v-model="applyReason"
|
|
|
placeholder="请输入申请理由"
|
|
|
maxlength="200"
|
|
|
count
|
|
|
></uv-textarea>
|
|
|
</view>
|
|
|
</uv-modal>
|
|
|
<!-- 悬浮窗 -->
|
|
|
<view class="floating-btn" @click="openComplaintModal">
|
|
|
<view class="floating-text">投诉与</view>
|
|
|
<view class="floating-text">纠纷</view>
|
|
|
</view>
|
|
|
<!-- 客户投诉与纠纷处理机制弹窗 -->
|
|
|
<uv-modal
|
|
|
ref="complaintModalRef"
|
|
|
title="客户投诉与纠纷处理机制说明"
|
|
|
confirmText="我知道了"
|
|
|
@confirm="closeComplaintModal"
|
|
|
>
|
|
|
<scroll-view scroll-y class="complaint-content">
|
|
|
<view class="complaint-text">
|
|
|
<view class="p">为规范平台交易秩序，保障用户合法权益，结合我司图纸生成、电子图纸、设计方案等虚拟数字类产品的业务特性，特建立完善的客户投诉及纠纷处理机制，具体如下：</view>
|
|
|
<view class="h3">一、业务及退款规则说明</view>
|
|
|
<view class="p">我司提供的图纸生成服务为虚拟数字类产品，具有可复制、易传播、交付即生效的属性，产品一经生成并交付用户，无法进行回收、撤回或二次销售。</view>
|
|
|
<view class="p">因此在产品正常交付、内容符合约定、无质量问题的情况下，不支持无理由退款。相关规则已在商品详情页、订单页、支付确认环节进行显著提示，用户完成支付即视为已充分知晓并同意。</view>
|
|
|
<view class="h3">二、投诉受理渠道</view>
|
|
|
<view class="p">用户可通过以下渠道提交投诉与售后申请，确保问题及时反馈：</view>
|
|
|
<view class="p">客服电话：<text class="phone-link" @click="callService">13666500395</text></view>
|
|
|
<view class="h3">三、投诉响应时效</view>
|
|
|
<view class="p">收到用户投诉后，工作日2小时内响应，非工作日当天内响应；<br/>一般投诉问题24小时内处理完毕并反馈结果；<br/>复杂争议类问题48小时内给出解决方案。</view>
|
|
|
<view class="h3">四、客诉分类处理方案</view>
|
|
|
<view class="p">【支付异常类】针对重复扣款、支付成功未到账、订单异常等情况，经核实后立即原路全额退款或补发对应服务，确保用户资金不受损失。</view>
|
|
|
<view class="p">【产品质量类】若图纸生成错误、内容缺失、未达到服务标准，优先为用户重新生成、修改完善或补发，保障用户正常使用。</view>
|
|
|
<view class="p">【服务争议类】对已正常交付、无质量问题的退款申请，将依据订单记录、交付凭证、用户协议耐心解释沟通；如确属特殊情况，将在核实后按公司流程审慎处理。</view>
|
|
|
<view class="p">【恶意投诉类】对已使用产品后恶意申请退款的行为，将留存完整凭证，按支付平台规则合理举证，维护正常经营秩序。</view>
|
|
|
<view class="h3">五、退款执行规范</view>
|
|
|
<view class="p">确需退款的场景，一律按原支付渠道原路退回，退款时限遵循支付平台规定，不设置不合理门槛，不拖延、不拒付。</view>
|
|
|
<view class="h3">六、长效管理机制</view>
|
|
|
<view class="p">我司将持续完善售前提示、服务说明及售后流程，主动降低投诉发生率，积极配合支付平台监督管理，妥善处理各类交易纠纷，保障交易安全与用户体验。</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</uv-modal>
|
|
|
<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted, nextTick, computed } from "vue";
|
|
|
import {
|
|
|
onShow,
|
|
|
onLoad,
|
|
|
onShareAppMessage,
|
|
|
onShareTimeline,
|
|
|
onReachBottom,
|
|
|
onPullDownRefresh,
|
|
|
} from "@dcloudio/uni-app";
|
|
|
import { useAuthStore, useUserStore } from "@/store";
|
|
|
import RPC from "@/utils/request";
|
|
|
import { usePermission } from "@/hooks/usePermission";
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
const authStore = useAuthStore();
|
|
|
const userStore = useUserStore();
|
|
|
const loading = ref(false);
|
|
|
const params_loading = ref(false);
|
|
|
|
|
|
const has_access = ref(false);
|
|
|
const applyModalRef = ref(null);
|
|
|
const applyReason = ref("");
|
|
|
const applyLoading = ref(false);
|
|
|
|
|
|
const complaintModalRef = ref(null);
|
|
|
const openComplaintModal = () => {
|
|
|
complaintModalRef.value.open();
|
|
|
};
|
|
|
const closeComplaintModal = () => {
|
|
|
complaintModalRef.value.close();
|
|
|
};
|
|
|
|
|
|
const callService = () => {
|
|
|
uni.makePhoneCall({
|
|
|
phoneNumber: '13666500395'
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 根据category分组参数
|
|
|
const groupedParams = computed(() => {
|
|
|
if (!currentTemplate.value.params) return {};
|
|
|
|
|
|
const enabledParams = currentTemplate.value.params.filter(
|
|
|
(item) => item.enabled
|
|
|
);
|
|
|
const grouped = {};
|
|
|
|
|
|
enabledParams.forEach((param) => {
|
|
|
const category = param.category || "默认";
|
|
|
if (!grouped[category]) {
|
|
|
grouped[category] = [];
|
|
|
}
|
|
|
grouped[category].push(param);
|
|
|
});
|
|
|
|
|
|
return grouped;
|
|
|
});
|
|
|
|
|
|
const get_access_status = (access_status) => {
|
|
|
let str = "";
|
|
|
if (access_status === "none") {
|
|
|
str = "无权限";
|
|
|
} else if (access_status === "pending") {
|
|
|
str = "等待审批...";
|
|
|
} else if (access_status === "rejected") {
|
|
|
str = "已拒绝";
|
|
|
} else if (access_status === "approved") {
|
|
|
str = "已同意";
|
|
|
} else {
|
|
|
str = access_status;
|
|
|
}
|
|
|
return str;
|
|
|
};
|
|
|
|
|
|
const bugFeedback = () => {
|
|
|
uni.navigateTo({
|
|
|
url: "/pagesA/bug-feedback/bug-feedback",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const modalRefOpen = () => {
|
|
|
if (!has_access.value) {
|
|
|
uni.showToast({
|
|
|
title: "模板无权限使用",
|
|
|
icon: "error",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
let flag = false;
|
|
|
let name;
|
|
|
currentTemplate.value.params
|
|
|
?.filter((item) => item.enabled)
|
|
|
.forEach((item) => {
|
|
|
if (item.required && !item.value) {
|
|
|
flag = true;
|
|
|
name = item.name;
|
|
|
}
|
|
|
});
|
|
|
if (flag) {
|
|
|
uni.showToast({
|
|
|
title: `请检查【${name}】`,
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
modalRef.value.open();
|
|
|
};
|
|
|
|
|
|
const currentParams = ref(null);
|
|
|
const openPicker = (item) => {
|
|
|
console.log(item);
|
|
|
if (item.type !== "select") return;
|
|
|
currentParams.value = item;
|
|
|
columns.value = [item.options.split(",")];
|
|
|
picker.value.open();
|
|
|
};
|
|
|
const picker = ref(null);
|
|
|
const columns = ref([[]]);
|
|
|
const confirm = (val) => {
|
|
|
console.log(val);
|
|
|
currentParams.value.value = val.value[0];
|
|
|
// 如果修改的是土建图型号，需要重新生成土建图号
|
|
|
// if (currentParams.value.name === "土建图型号") {
|
|
|
// nextTick(() => {
|
|
|
// generateDrawingNumber();
|
|
|
// });
|
|
|
// }
|
|
|
};
|
|
|
|
|
|
// 打开申请权限弹框
|
|
|
const openApplyModal = () => {
|
|
|
applyReason.value = "";
|
|
|
applyModalRef.value.open();
|
|
|
};
|
|
|
|
|
|
// 确认申请权限
|
|
|
const confirmApply = async () => {
|
|
|
if (!applyReason.value.trim()) {
|
|
|
uni.showToast({
|
|
|
title: "请输入申请理由",
|
|
|
icon: "error",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
applyLoading.value = true;
|
|
|
try {
|
|
|
await RPC.post("/template_access_apply", {
|
|
|
template_id: currentTemplate.value.id,
|
|
|
reason: applyReason.value.trim(),
|
|
|
});
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "申请已提交",
|
|
|
icon: "success",
|
|
|
});
|
|
|
applyModalRef.value.close();
|
|
|
applyReason.value = "";
|
|
|
getList();
|
|
|
} catch (error) {
|
|
|
uni.showToast({
|
|
|
title: "申请失败，请重试",
|
|
|
icon: "error",
|
|
|
});
|
|
|
} finally {
|
|
|
applyLoading.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 取消申请
|
|
|
const cancelApply = () => {
|
|
|
applyReason.value = "";
|
|
|
};
|
|
|
|
|
|
// 处理输入变化
|
|
|
const handleInputChange = (item) => {
|
|
|
// 如果修改的是土建图型号，需要重新生成土建图号
|
|
|
// if (item.name === "土建图型号") {
|
|
|
// nextTick(() => {
|
|
|
// generateDrawingNumber();
|
|
|
// });
|
|
|
// }
|
|
|
};
|
|
|
|
|
|
// 验证数字范围
|
|
|
const validateNumberRange = (item) => {
|
|
|
if (item.type !== "number" || !item.value) return;
|
|
|
|
|
|
const value = parseFloat(item.value);
|
|
|
|
|
|
// 检查是否为有效数字
|
|
|
if (isNaN(value)) {
|
|
|
uni.showToast({
|
|
|
title: `${item.name}必须为数字`,
|
|
|
icon: "error",
|
|
|
});
|
|
|
item.value = "";
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 检查最小值
|
|
|
if (item.min !== undefined && value < item.min) {
|
|
|
uni.showToast({
|
|
|
title: `${item.name}不能小于${item.min}`,
|
|
|
icon: "error",
|
|
|
});
|
|
|
item.value = item.min.toString();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 检查最大值
|
|
|
if (item.max !== undefined && item.max !== 0 && value > item.max) {
|
|
|
uni.showToast({
|
|
|
title: `${item.name}不能大于${item.max}`,
|
|
|
icon: "error",
|
|
|
});
|
|
|
item.value = item.max.toString();
|
|
|
return;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 生成土建图号
|
|
|
const generateDrawingNumber = () => {
|
|
|
const params = currentTemplate.value.params;
|
|
|
if (!params) return;
|
|
|
|
|
|
// 找到土建图型号和土建图号字段
|
|
|
// const modelParam = params.find((p) => p.name === "土建图型号");
|
|
|
const numberParam = params.find((p) => p.name === "土建图号");
|
|
|
|
|
|
if (!numberParam) return;
|
|
|
|
|
|
// 获取当前年份和月份
|
|
|
// const now = new Date();
|
|
|
// const year = now.getFullYear().toString().slice(-2); // 取年份后两位
|
|
|
// const month = (now.getMonth() + 1).toString().padStart(2, "0"); // 月份补零
|
|
|
|
|
|
// 生成4位随机数字+字母
|
|
|
const randomPart = generateRandomCode();
|
|
|
|
|
|
// 组合生成土建图号：GSE400-V25-10-0002A
|
|
|
numberParam.value = dayjs().format('YYYYMMDDHHmmss') + randomPart;
|
|
|
};
|
|
|
|
|
|
// 生成随机编码（4位数字+1位字母）
|
|
|
const generateRandomCode = () => {
|
|
|
const numbers = Math.floor(Math.random() * 10000)
|
|
|
.toString()
|
|
|
.padStart(4, "0");
|
|
|
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
|
const letter = letters.charAt(Math.floor(Math.random() * letters.length));
|
|
|
return numbers;
|
|
|
};
|
|
|
|
|
|
const generating = ref(false);
|
|
|
const modalRef = ref(null);
|
|
|
const confirmGenerate = () => {
|
|
|
const params = {};
|
|
|
let flag = false;
|
|
|
let name = "";
|
|
|
currentTemplate.value.params
|
|
|
?.filter((item) => item.enabled)
|
|
|
.forEach((item) => {
|
|
|
if (item.required && !item.value) {
|
|
|
flag = true;
|
|
|
name = item.name;
|
|
|
}
|
|
|
params[item.name] = item.value;
|
|
|
});
|
|
|
if (flag) {
|
|
|
uni.showToast({
|
|
|
title: `请检查【${name}】`,
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
RPC.post("/template_create_task", {
|
|
|
template_id: currentTemplate.value.id,
|
|
|
template_data: params,
|
|
|
}).then(() => {
|
|
|
uni.showToast({
|
|
|
title: "图纸开始生成",
|
|
|
icon: "success",
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
uni.navigateTo({
|
|
|
url: "/pagesA/generate-record/generate-record",
|
|
|
});
|
|
|
}, 1000);
|
|
|
modalRef.value.close();
|
|
|
});
|
|
|
};
|
|
|
const templateList = ref([]);
|
|
|
const currentTemplate = ref({});
|
|
|
const getList = () => {
|
|
|
loading.value = true;
|
|
|
RPC.post("/template/list_with_access", {
|
|
|
page: 1,
|
|
|
limit: -1,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
templateList.value = (res.rows || []).filter((item) => item.enabled && item.has_access);
|
|
|
currentTemplate.value = templateList.value[0]
|
|
|
? JSON.parse(JSON.stringify(templateList.value[0]))
|
|
|
: {};
|
|
|
if (currentTemplate.value.has_access) {
|
|
|
params_loading.value = true;
|
|
|
has_access.value = true;
|
|
|
RPC.post("/template/detail", { id: currentTemplate.value.id })
|
|
|
.then((res) => {
|
|
|
currentTemplate.value.params = res?.params;
|
|
|
generateDrawingNumber()
|
|
|
})
|
|
|
.finally(() => {
|
|
|
params_loading.value = false;
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.finally(() => {
|
|
|
loading.value = false;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 选择模板
|
|
|
const selectTemplate = (item) => {
|
|
|
currentTemplate.value = JSON.parse(JSON.stringify(item));
|
|
|
has_access.value = currentTemplate.value.has_access;
|
|
|
if (currentTemplate.value.has_access) {
|
|
|
params_loading.value = true;
|
|
|
RPC.post("/template/detail", { id: currentTemplate.value.id })
|
|
|
.then((res) => {
|
|
|
currentTemplate.value.params = res?.params;
|
|
|
// 如果有土建图型号，自动生成土建图号
|
|
|
nextTick(() => {
|
|
|
generateDrawingNumber();
|
|
|
});
|
|
|
})
|
|
|
.finally(() => {
|
|
|
params_loading.value = false;
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const form = ref(null);
|
|
|
const formField = ref({
|
|
|
phone: "",
|
|
|
password: "",
|
|
|
});
|
|
|
const rules = ref({
|
|
|
// 'phone': {
|
|
|
// required: true,
|
|
|
// message: '请填写手机号',
|
|
|
// trigger: ['blur', 'change']
|
|
|
// },
|
|
|
// 'password': {
|
|
|
// required: true,
|
|
|
// message: '请填写验证码',
|
|
|
// trigger: ['blur', 'change']
|
|
|
// }
|
|
|
});
|
|
|
|
|
|
// 查看历史记录
|
|
|
const viewHistory = () => {
|
|
|
uni.navigateTo({
|
|
|
url: "/pagesA/generate-record/generate-record",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 分享给朋友
|
|
|
onShareAppMessage((data) => {
|
|
|
console.log("🚀 ~ onShareAppMessage ~ data:", data);
|
|
|
return {
|
|
|
title: "电梯图纸生成平台",
|
|
|
path: "/pages/index/index",
|
|
|
};
|
|
|
});
|
|
|
|
|
|
// 分享到朋友圈
|
|
|
onShareTimeline((data) => {
|
|
|
console.log("🚀 ~ onShareTimeline ~ data:", data);
|
|
|
return {
|
|
|
title: "电梯图纸生成平台",
|
|
|
query: "a=1&b=2",
|
|
|
};
|
|
|
});
|
|
|
|
|
|
onLoad(() => {
|
|
|
console.log("index-onLoad");
|
|
|
});
|
|
|
onShow(async () => {
|
|
|
getList();
|
|
|
console.log("test page onShow");
|
|
|
const hasPermission = await usePermission();
|
|
|
console.log(hasPermission ? "已登录" : "跳转登录");
|
|
|
// 以下开始写业务逻辑...
|
|
|
if (!hasPermission) {
|
|
|
authStore.signOut();
|
|
|
uni.$uv.route("/pages/login/login");
|
|
|
}
|
|
|
});
|
|
|
onPullDownRefresh(() => {
|
|
|
getList();
|
|
|
uni.stopPullDownRefresh();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
font-size: 14px;
|
|
|
min-height: 100vh;
|
|
|
background-color: #f8f8f8;
|
|
|
padding-bottom: 52px;
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
padding-bottom: 102px;
|
|
|
/* H5环境下需要更多空间 (50px按钮 + 50px tabBar + 2px间距) */
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.header-section {
|
|
|
position: relative;
|
|
|
height: 200px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.header-image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.header-overlay {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 0;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
color: white;
|
|
|
width: 70%;
|
|
|
transform: translate(0, -50%);
|
|
|
padding: 20px 10px;
|
|
|
|
|
|
.header-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 8px;
|
|
|
color: #bd9e85;
|
|
|
}
|
|
|
|
|
|
.header-subtitle {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.section {
|
|
|
margin: 16px;
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 16px;
|
|
|
|
|
|
.section-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.status {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.template-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 12px;
|
|
|
max-height: 200px;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
.template-item {
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-radius: 8px;
|
|
|
padding: 16px 12px;
|
|
|
text-align: center;
|
|
|
transition: all 0.3s;
|
|
|
position: relative;
|
|
|
|
|
|
.tag {
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
left: 0;
|
|
|
padding: 2px 8px;
|
|
|
border-radius: 0 0 10px 0;
|
|
|
font-size: 14px;
|
|
|
color: white;
|
|
|
background: #00caef;
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
border-color: #4285f4;
|
|
|
background-color: #f0f7ff;
|
|
|
}
|
|
|
|
|
|
.template-name {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
margin: 8px 0 4px;
|
|
|
}
|
|
|
|
|
|
.template-desc {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom-actions {
|
|
|
z-index: 999;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
background: #fff;
|
|
|
height: 50px;
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 16px;
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
bottom: 50px;
|
|
|
/* H5环境下给tabBar留出空间 */
|
|
|
/* #endif */
|
|
|
}
|
|
|
|
|
|
.apply-modal-content {
|
|
|
padding: 20px 0;
|
|
|
width: 100%;
|
|
|
|
|
|
.apply-label {
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.number-range-hint {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
margin-top: 4px;
|
|
|
padding-left: 0;
|
|
|
}
|
|
|
|
|
|
.param-category {
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.category-title {
|
|
|
font-size: 15px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 16px;
|
|
|
padding-bottom: 8px;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: -1px;
|
|
|
width: 30px;
|
|
|
height: 2px;
|
|
|
background: #3f70ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.floating-btn {
|
|
|
position: fixed;
|
|
|
right: 16px;
|
|
|
bottom: 120px;
|
|
|
/* #ifdef H5 */
|
|
|
bottom: 170px;
|
|
|
/* #endif */
|
|
|
width: 56px;
|
|
|
height: 56px;
|
|
|
background: linear-gradient(135deg, #3f70ff, #5c8aff);
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
color: white;
|
|
|
box-shadow: 0 4px 12px rgba(63, 112, 255, 0.4);
|
|
|
z-index: 99;
|
|
|
font-size: 12px;
|
|
|
|
|
|
.floating-text {
|
|
|
line-height: 1.2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.complaint-content {
|
|
|
max-height: 60vh;
|
|
|
padding: 0 10px 10px;
|
|
|
|
|
|
.complaint-text {
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
line-height: 1.6;
|
|
|
|
|
|
.h3 {
|
|
|
font-size: 15px;
|
|
|
font-weight: bold;
|
|
|
margin-top: 16px;
|
|
|
margin-bottom: 8px;
|
|
|
color: #111;
|
|
|
}
|
|
|
|
|
|
.p {
|
|
|
margin-bottom: 8px;
|
|
|
text-align: justify;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.phone-link {
|
|
|
color: #3f70ff;
|
|
|
text-decoration: underline;
|
|
|
display: inline-block;
|
|
|
padding: 0 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.bottom-actions {
|
|
|
.uv-button-wrapper {
|
|
|
width: 30%;
|
|
|
}
|
|
|
}
|
|
|
</style> |
