nuxtProject/pages/cpyfw/index.vue

<template>
    <div class="client-cpyfw-page">
      <div :style="{backgroundImage: 'url(' + bannerDefault + ')'}" class="client-banner-box"></div>
      <!-- 产品体验 -->
      <div class="client-container">
        <h4 class="client-title">产品体验</h4>
        <div class="client-cpty-box">
          <!-- 家政公司 -->
          <div class="cpty-card-box" @click="tyBtn">
            <img :src="tyImg1"/>
            <h3 class="title">家政公司</h3>
            <p class="desc">家政人员培训，全流程管理</p>
          </div>

          <!-- 家政人员 -->
          <div class="cpty-card-box" @click="tyBtn">
            <img :src="tyImg2"/>
            <h3 class="title">家政人员</h3>
            <p class="desc">家政类课程学习，家政工作推荐</p>
          </div>

          <!-- 管理端 -->
          <div class="cpty-card-box" @click="tyBtn">
            <img :src="tyImg3"/>
            <h3 class="title">管理端</h3>
            <p class="desc">灵活创建，数据化维护</p>
          </div>
        </div>
      </div>

      <!-- 功能强大的家政管理系统 -->
      <div class="jzgl-box" :style="{backgroundImage: 'url(' + jzglBj + ')'}">
        <h4 class="client-title">功能强大的家政管理系统</h4>
        <div class="client-container">
          <p class="jzgl-box-text">
            《家政学》家政管理系统以“全流程数字化、服务标准化、管理智能化”为核心，通过四大端的协同联动，覆盖家政服务从“需求发起-人员匹配-服务执行-评价结算”的全链条，解决行业痛点。
          </p>
        </div>
      </div>

      <!-- img list -->
      <div class="client-products-services cpyfw-products-services">
        <div class="client-container">
          <div class="products-services-box website-row-reverse ptb30">
            <img :src="productsImg1" alt="多端协同，信息实时同步" />
            <div class="products-services-content">
              <h5>多端协同，信息实时同步</h5>
              <p><b>订单无缝流转:</b>户主在"户主端"下单后，订单实时同步至"家政公司管理端"，公司分配后，"用户端(家政人员)"立即收到接单通知，避免信息延迟导致的订单流失。</p>
              <p><b>状态实时更新:</b>家政人员标记"服务中"后，户主端可查看实时服务进度;服务完成后，订单状态同步至管理后台，财务端可立即触发结算流程，实现"服务-结算"无缝衔接。</p>
            </div>
          </div>
        </div>
        <div class="client-container">
          <div class="products-services-box ptb30">
            <img :src="productsImg2" alt="全流程标准化，降低服务风险" />
            <div class="products-services-content">
              <h5>全流程标准化，降低服务风险</h5>
              <p><b>人员标准化:</b>家政人员需完成身份认证、资质上传(如健康证、技能证书)、培训考核后才可接单，管理后台实时审核，确保人员合规。</p>
              <p><b>服务标准化:</b>内置各服务类型的标准流程，家政人员可按流程执行，户主可对照标准验收，减少服务纠纷。</p>
              <p><b>合同标准化:</b>户主端下单后自动生成电子合同，包含服务范围、费用、权责等核心条款，支持在线签署与存档,避免口头约定的法律风险。</p>
            </div>
          </div>
        </div>
        <div class="client-container ptb30">
          <div class="products-services-box website-row-reverse">
            <img :src="productsImg3" alt="智能化工具，提升效率与体验" />
            <div class="products-services-content">
              <h5>智能化工具，提升效率与体验</h5>
              <p><b>智能匹配:</b>基于"户主需求+家政人员技能+服务区域"三重维度，系统完成人员匹配，相比人工筛选效率提升80%。</p>
              <p><b>智能预警:</b>若订单长时间未接单、家政人员迟到，系统自动向家政公司发送预警，及时介入处理。</p>
              <p><b>智能数据分析:</b>家政公司管理端可自动分析"高需求服务类型""客户流失原因""人员绩效短板"，为运营优化提供数据支撑;管理后台可实时监控行业动态，辅助资源调配。</p>
            </div>
          </div>
        </div>
        <div class="client-container">
          <div class="products-services-box ptb30">
            <img :src="productsImg4" alt="安全可靠，保障各方权益" />
            <div class="products-services-content">
              <h5>安全可靠，保障各方权益</h5>
              <p><b>数据安全:</b>采用云端加密存储技术，客户信息、订单数据、财务记录均经过多重加密，防止信息泄露;支持定期数据备份，避免数据丢失。</p>
              <p><b>资金安全:</b>户主端支付的订单费用先由系统托管，服务完成且户主确认无误后，再结算至家政公司，保障户主资金安全;家政人员的收入明细可实时查询，结算记录永久存档，避免薪资纠纷。</p>
              <p><b>服务安全:</b>对接家政人员背景调查接口(如身份核验、不良记录查询)，从源头降低服务风险;户主可实时查看家政人员的位置轨迹(服务期间)，增强安全感。</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 家政人员-->
      <div class="cpyfw-jzry-box" :style="{backgroundImage: 'url(' + jzBj + ')'}">
        <div class="client-container jzry-content-box">
            <div class="jzry-card">
              <img :src="jzImg1"/>
              <div>
                <h3 class="card-title">家政人员</h3>
                <p class="card-desc">家政类课程学习，家政工作推荐</p>
              </div>
            </div>

            <div class="jzry-card">
              <img :src="jzImg2"/>
              <div>
                <h3 class="card-title">家政公司</h3>
                <p class="card-desc">降本、提效、拓客三管齐下</p>
              </div>
            </div>

            <div class="jzry-card">
              <img :src="jzImg3"/>
              <div>
                <h3 class="card-title">管理后台</h3>
                <p class="card-desc">灵活创建，数据化维护</p>
              </div>
            </div>
            <img :src="jzImg4" class="jzry-img">
        </div>
      </div>

      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="telDl"
        @close="delDlClose"
        title="家政学"
        class="cpty-dialog"
        center>
        <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
          <el-form-item  prop="xingming" label="姓名：">
            <el-input v-model="telChangeDate.xingming" placeholder="请输入姓名" class="dialog-input-tel"></el-input>
          </el-form-item>
          <el-form-item  prop="shouji" label="手机号：">
            <el-input v-model="telChangeDate.shouji" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
          </el-form-item>
          <el-form-item  prop="gongsi" label="家政公司名称：">
            <el-input v-model="telChangeDate.gongsi" placeholder="请输入家政公司名称" class="dialog-input-tel"></el-input>
          </el-form-item>
        </el-form>
        <div class="cpty-submit-btn" @click="dialogSave">提交</div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
      name:       'gywm',
      layout:     'templateA',
      data() {
        return {
          bannerDefault:   require(`~/static/images/website/banner/cx-banner-cp.png`),
          // 产品体验
          tyImg1:   require(`~/static/images/website/product/cpty-icon1.png`),
          tyImg2:   require(`~/static/images/website/product/cpty-icon2.png`),
          tyImg3:   require(`~/static/images/website/product/cpty-icon3.png`),
          jzglBj:   require(`~/static/images/website/product/row-bj1.png`),
          // img list
          productsImg1:   require(`~/static/images/website/product/cp-img1.png`),
          productsImg2:   require(`~/static/images/website/product/cp-img2.png`),
          productsImg3:   require(`~/static/images/website/product/cp-img3.png`),
          productsImg4:   require(`~/static/images/website/product/cp-img4.png`),
          // 家政人员
          jzImg1:   require(`~/static/images/website/product/cp-icon1.png`),
          jzImg2:   require(`~/static/images/website/product/cp-icon2.png`),
          jzImg3:   require(`~/static/images/website/product/cp-icon3.png`),
          jzBj:   require(`~/static/images/website/product/row-bj2.png`),
          jzImg4:   require(`~/static/images/website/product/cp-img5.png`),

          // dialog
          telChangeDate:   {
            xingming:'',
            shouji:'',
            gongsi:'',
          },
          telDl: false,
          telRules:        {
            xingming:          [
              { trigger: 'blur', required: true, message: '请输入姓名' },
            ],
            shouji:          [
              { trigger: 'blur', required: true, message: '请输入手机号' },
            ],
            gongsi:          [
              { trigger: 'blur', required: true, message: '请输入家政公司名称' },
            ],
        },
        }},
      head(){
        return {
          title: '家政学',
        }
      },
      methods:    {
        tyBtn(){

          this.telDl = true;

        },
        delDlClose(){
          this.telChangeDate.gongsi = ''
          this.telChangeDate.shouji = ''
          this.telChangeDate.xingming = ''
        },
        dialogSave(){
          let req = {
            gongsi:this.telChangeDate.gongsi,
            shouji:this.telChangeDate.shouji,
            xingming:this.telChangeDate.xingming
          }
          this.$refs['ruleTelForm'].validate((valid) => {
            if (valid) {
              this.$axios.$post('/common/client/web/msg/add',req).then(res=>{
                if (res.code === 0 ) {
                  this.$message.success("添加成功");
                  this.telDl = false;
                } else {
                  this.$message.error("添加失败");
                  return false
                }
              });
            }

          });
        }
      }
    };
</script>

<style scoped>

</style>