💕💕作者：计算机源码社
💕💕个人简介：本人 八年开发经验，擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等，大家有这一块的问题可以一起交流！
💕💕学习资料、程序开发、技术解答、文档报告

1、选题背景

  近年来，随着人们生活水平的不断提高和城市化进程的加快，宠物市场呈现出蓬勃发展的态势。据统计，中国宠物行业市场规模已超过2000亿元，宠物饲养人数突破1亿。然而，传统的宠物服务模式已难以满足现代宠物主人对高效、便捷、多样化服务的需求。同时，宠物服务行业面临着信息不对称、服务质量参差不齐、管理效率低下等诸多问题。在此背景下，结合当前移动互联网技术的快速发展，特别是微信小程序的广泛应用，开发一个集宠物信息管理、服务预约、用品购买、在线咨询等功能于一体的综合性平台成为了必然趋势。基于SpringBoot、Vue、MySQL和微信小程序技术框架的宠物服务中心应运而生，旨在通过技术创新解决行业痛点，为宠物主人提供一站式服务解决方案，同时为服务提供商提供高效的管理工具，促进整个宠物服务生态系统的健康发展和数字化转型。

2、研究目的和意义

  本项目旨在开发一个基于微信小程序的宠物服务中心,以满足日益增长的宠物服务需求。随着人们生活水平的提高,宠物饲养已成为一种普遍现象,但传统的宠物服务模式往往存在信息不对称、服务质量参差不齐等问题。通过整合SpringBoot、Vue、MySQL等先进技术,结合微信小程序的便捷性和普及性,我们旨在构建一个全面、高效的宠物服务平台。该平台将为用户提供宠物信息管理、服务预约、用品购买、在线咨询等一站式服务,同时为管理员提供完善的后台管理功能。这不仅能提高服务效率,降低运营成本,还能为宠物主人和服务提供者搭建一个互信互利的桥梁,最终实现宠物服务行业的数字化转型和升级。
  开发基于微信小程序的宠物服务中心具有重要的社会和经济意义。它顺应了移动互联网时代的发展趋势,利用微信小程序的广泛覆盖率,能够快速触达大量用户,提高宠物服务的可及性和便利性。其次,通过整合各类宠物服务资源,如宠物医疗、美容、寄养等,平台能够标准化服务流程,提升服务质量,促进行业规范化发展。该平台的数据分析功能可为宠物行业提供valuable insights,助力相关企业优化经营策略,推动产业升级。从用户角度来看,这种一站式服务模式不仅节省了时间和精力,还能获得更专业、更个性化的宠物care建议。在促进经济发展的同时,平台还能培养人们对宠物的责任感,提高社会的文明程度。总的来说,这个项目不仅是对宠物服务行业的创新和改革,更是对现代城市生活方式的一种积极回应。

3、系统功能设计

基于微信小程序的宠物服务中心功能模块简介
1. 管理员功能模块
1.1 用户管理
管理员可以查看、编辑用户信息，以及控制用户账号的状态。这个模块确保了系统用户的有效管理和监控。
1.2 宠物类别管理
支持添加、编辑和删除宠物类别，为系统提供标准化的宠物分类。这有助于组织和检索宠物相关信息。
1.3 宠物信息管理
允许管理员查看和审核用户添加的宠物信息，确保信息的准确性和适当性。管理员可以编辑或删除不合规的信息。
1.4 服务类型管理
管理员可以设置和更新各种宠物服务类型，包括定价和描述。这为用户提供了清晰的服务选择。
1.5 服务中心管理
支持添加和管理服务中心的信息，包括位置、联系方式和可用服务。这确保了线下服务点的有效管理。
1.6 服务预约管理
允许查看和管理用户的服务预约，包括确认、取消和调整预约。这有助于优化服务资源分配。
1.7 用品分类管理
管理员可以创建和维护宠物用品的分类体系，便于用户浏览和购买。这提高了商品管理的效率。
1.8 宠物用品管理
支持添加、编辑和管理宠物用品信息，包括价格、库存等。这确保了商品信息的准确性和及时更新。
1.9 订单管理
允许查看和处理用户订单，包括发货、退款等操作。管理员还可以生成订单报表进行分析。
1.10 在线咨询管理
管理员可以查看和回复用户的咨询，并管理常见问题解答。这提高了客户服务的效率和质量。
2. 用户功能模块
2.1 添加宠物信息
用户可以输入自己宠物的基本信息，上传照片，记录健康状况。这为个性化服务提供了基础。
2.2 查看宠物服务类型
支持浏览和搜索各种宠物服务，查看详情和价格。用户可以方便地了解可用的服务选项。
2.3 预约宠物服务
用户可以选择服务类型、时间和地点进行预约。系统提供简单直观的预约流程。
2.4 查看宠物用品类型
支持浏览宠物用品分类，使用筛选和搜索功能查找商品。这为用户提供了便捷的购物体验。
2.5 购买宠物用品
用户可以查看商品详情，添加到购物车，并完成下单支付。整个购买流程简单易用。
2.6 在线咨询
允许用户提交咨询问题，查看历史记录，并接收回复通知。这提供了便捷的客户支持渠道。
2.7 查看个人订单
用户可以浏览自己的订单历史，查看详情，进行取消或退款操作。这方便用户管理自己的购买记录。

4、系统页面设计

QQ截图20240815110139.png

QQ截图20240815110242.png

QQ截图20240815110258.png

QQ截图20240815110315.png

QQ截图20240815110326.png

QQ截图20240815110344.png

QQ截图20240815110354.png

QQ截图20240815110433.png

QQ截图20240815110450.png

QQ截图20240815110517.png

QQ截图20240815110539.png

5、参考文献

[1]陈宇佳.基于Web服务器的宠物托管服务管理系统设计[J].电脑编程技巧与维护,2024,(02):80-82+120.DOI:10.16184/j.cnki.comprg.2024.02.043.
[2]颜惠.基于Web的宠物店信息管理系统设计[J].软件,2023,44(02):147-149.
[3]平欣,宋育斌,孔维宾,等.基于GPS与微信小程序的智能宠物管理系统设计[J].软件导刊,2023,22(02):121-126.
[4]尹彭.基于微服务的社区物业管理系统的设计与实现[D].首都经济贸易大学,2022. DOI:10.27338/d.cnki.gsjmu.2022.000469.
[5]安琪.基于服务设计思维的城市流浪动物助养系统设计研究[D].北京化工大学,2022. DOI:10.26939/d.cnki.gbhgu.2022.001964.
[6]庄帅.宠物管理系统的设计及实现[J].福建电脑,2022,38(05):68-72.DOI:10.16707/j.cnki.fjpc.2022.05.017.
[7]游秋龙.NJ智能宠物管理系统商业计划书[D].厦门大学,2022. DOI:10.27424/d.cnki.gxmdu.2022.001007.
[8]吴进朝.宠物航空服务系统设计研究[D].福建工程学院,2021. DOI:10.27865/d.cnki.gfgxy.2021.000130.
[9]李悦,张丽娟,史忠超,等.移动互联网背景下宠物管家平台服务设计研究[C]//工业设计产业研究中心2019年论文汇编.西南科技大学;,2021:5. DOI:10.26914/c.cnkihy.2021.003612.
[10]蒋筱涵.基于服务设计理念的“宠友”APP设计实践探究[J].美与时代(上),2021,(02):44-47.DOI:10.16129/j.cnki.mysds.2021.02.016.
[11]王亚文,赵翠.基于SSM框架的社区宠物信息管理系统设计与分析[J].电脑编程技巧与维护,2021,(01):103-105.DOI:10.16184/j.cnki.comprg.2021.01.036.
[12]吴文洋,刘世宇.基于B/S架构宠物领养管理系统设计[J].软件,2020,41(11):85-87.
[13]马海珠.小型宠物店管理系统的设计[J].电脑知识与技术,2019,15(36):93-94+108.DOI:10.14004/j.cnki.ckt.2019.4297.
[14]王凯.服务设计思维下的宠物生活服务APP设计与研究[D].西安工程大学,2019. DOI:10.27390/d.cnki.gxbfc.2019.000016.
[15]杨莹.宠物托管数字化服务平台设计[D].中南大学,2014.

6、核心代码

<template>
<view class="content">
    <view :style='{"minHeight":"100vh","width":"100%","padding":"0 0 132rpx","position":"relative","background":"url(http://codegen.caihongy.cn/20221112/286392d539b94f04bcf52c9a98e1d573.png) no-repeat right top,url(http://codegen.caihongy.cn/20221112/e866eac60553442587c2b20f0b4f151b.png) no-repeat right bottom,#fdfaf0","height":"auto"}'>
        <form :style='{"width":"100%","padding":"100rpx 40rpx","background":"none","display":"block","height":"auto"}' class="app-update-pv">
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">服务名称</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.fuwumingcheng" v-model="ruleForm.fuwumingcheng" placeholder="服务名称"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">服务类型</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.fuwuleixing" v-model="ruleForm.fuwuleixing" placeholder="服务类型"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="" @tap="fuwutupianTap">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">服务图片</view>
                <image :style='{"width":"80rpx","borderRadius":"100%","objectFit":"cover","display":"block","height":"80rpx"}' class="avator" v-if="ruleForm.fuwutupian" :src="baseUrl+ruleForm.fuwutupian.split(',')[0]" mode="aspectFill"></image>
                <image :style='{"width":"80rpx","borderRadius":"100%","objectFit":"cover","display":"block","height":"80rpx"}' class="avator" v-else src="../../static/gen/upload.png" mode="aspectFill"></image>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">可约时间</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.keyueshijian" v-model="ruleForm.keyueshijian" placeholder="可约时间"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">服务价格</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.fuwujiage" v-model="ruleForm.fuwujiage" placeholder="服务价格"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">折扣</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.zhekou" v-model="ruleForm.zhekou" placeholder="折扣"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">总价格</view>
                <view :style='{"padding":"0px 24rpx","margin":"0px","lineHeight":"80rpx","fontSize":"28rpx","color":"rgb(0, 0, 0)","flex":"1"}' class="right-input">
                    {{zongjiage}}
                </view>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">预约时间</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' v-model="ruleForm.yuyueshijian" placeholder="预约时间" @tap="toggleTab('yuyueshijian')"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class=" select">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">订单状态</view>
                <picker :style='{"width":"100%","flex":"1","height":"auto"}' @change="dingdanzhuangtaiChange" :value="dingdanzhuangtaiIndex" :disabled="true" :range="dingdanzhuangtaiOptions">
                    <view :style='{"width":"100%","lineHeight":"80rpx","fontSize":"28rpx","color":"rgb(255, 170, 51)"}' class="uni-input">{{ruleForm.dingdanzhuangtai?ruleForm.dingdanzhuangtai:"请选择订单状态"}}</view>
                </picker>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">账号</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.zhanghao" v-model="ruleForm.zhanghao" placeholder="账号"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">姓名</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.xingming" v-model="ruleForm.xingming" placeholder="姓名"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">手机</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.shouji" v-model="ruleForm.shouji" placeholder="手机"></input>
            </view>
            <view :style='{"padding":"12rpx 0","margin":"0 0 24rpx 0","borderColor":"#ccc","alignItems":"center","borderWidth":"0 0 2rpx 0","display":"flex","width":"100%","borderStyle":"dashed","height":"auto"}' class="">
                <view :style='{"width":"160rpx","padding":"0 20rpx 0 0","lineHeight":"80rpx","fontSize":"28rpx","color":"#333","textAlign":"right"}' class="title">地址</view>
                <input :style='{"border":"0","padding":"0px 24rpx","margin":"0px","color":"rgb(0, 0, 0)","borderRadius":"8rpx","flex":"1","background":"rgba(255, 255, 255, 0)","fontSize":"28rpx","height":"80rpx"}' :disabled="ro.dizhi" v-model="ruleForm.dizhi" placeholder="地址"></input>
            </view>
            
            <!-- 否 -->
 

            
            
            <view :style='{"width":"100%","margin":"40rpx 0 0 0","justifyContent":"space-between","display":"flex","height":"auto"}' class="btn" >
                <button :style='{"border":"0","padding":"0px","margin":"0","color":"rgb(255, 255, 255)","borderRadius":"8rpx","background":"rgb(255, 170, 51)","width":"48%","lineHeight":"80rpx","fontSize":"28rpx","height":"80rpx"}' @tap="onSubmitTap" class="bg-red">提交</button>
            </view>
        </form>

        <w-picker mode="dateTime" step="1" :current="false" :hasSecond="false" @confirm="yuyueshijianConfirm" ref="yuyueshijian" themeColor="#333333"></w-picker>
    </view>
</view>
</template>

<script>
    import wPicker from "@/components/w-picker/w-picker.vue";
    import xiaEditor from '@/components/xia-editor/xia-editor';
    export default {
        data() {
            return {
                cross:'',
                ruleForm: {
                fuwumingcheng: '',
                fuwuleixing: '',
                fuwutupian: '',
                keyueshijian: '',
                fuwujiage: '',
                zhekou: '',
                zongjiage: '',
                yuyueshijian: '',
                    dingdanzhuangtai: '未受理',
                zhanghao: '',
                xingming: '',
                shouji: '',
                dizhi: '',
                shhf: '',
                ispay: '',
                userid: '',
                },
                dingdanzhuangtaiOptions: [],
                dingdanzhuangtaiIndex: 0,
                // 登陆用户信息
                user: {},
                                ro:{
                                   fuwumingcheng : false,
                                   fuwuleixing : false,
                                   fuwutupian : false,
                                   keyueshijian : false,
                                   fuwujiage : false,
                                   zhekou : false,
                                   zongjiage : false,
                                   yuyueshijian : false,
                                   dingdanzhuangtai : false,
                                   zhanghao : false,
                                   xingming : false,
                                   shouji : false,
                                   dizhi : false,
                                   sfsh : false,
                                   shhf : false,
                                   ispay : false,
                                   userid : false,
                                },
            }
        },
        components: {
            wPicker,
            xiaEditor
        },
        computed: {
            baseUrl() {
                return this.$base.url;
            },


            zongjiage:{
            get: function () {
                return 1*this.ruleForm.fuwujiage*this.ruleForm.zhekou
            }
            },

        },
        async onLoad(options) {
            this.ruleForm.yuyueshijian = this.$utils.getCurDateTime();

            let table = uni.getStorageSync("nowTable");
            // 获取用户信息
            let res = await this.$api.session(table);
            this.user = res.data;
            
            // ss读取
            this.ruleForm.zhekou = this.user.zhekou
            this.ro.zhekou = true;
            this.ruleForm.zhanghao = this.user.zhanghao
            this.ro.zhanghao = true;
            this.ruleForm.xingming = this.user.xingming
            this.ro.xingming = true;
            this.ruleForm.shouji = this.user.shouji
            this.ro.shouji = true;
            this.ruleForm.dizhi = this.user.dizhi
            this.ro.dizhi = true;

            this.ro.dingdanzhuangtai = true;

            // 自定义下拉框值
            this.dingdanzhuangtaiOptions = "未受理,进行中,已完成".split(',')

            // 如果有登陆，获取登陆后保存的userid
            this.ruleForm.userid = uni.getStorageSync("userid")
            if (options.refid) {
                // 如果上一级页面传递了refid，获取改refid数据信息
                this.ruleForm.refid = options.refid;
                this.ruleForm.nickname = uni.getStorageSync("nickname");
            }
            // 如果是更新操作
            if (options.id) {
                this.ruleForm.id = options.id;
                // 获取信息
                res = await this.$api.info(`fuwuyuyue`, this.ruleForm.id);
                this.ruleForm = res.data;
            }
            // 跨表
            this.cross = options.cross;
            if(options.cross){
                var obj = uni.getStorageSync('crossObj');
                for (var o in obj){
                    if(o=='fuwumingcheng'){
                    this.ruleForm.fuwumingcheng = obj[o];
                    this.ro.fuwumingcheng = true;
                    continue;
                    }
                    if(o=='fuwuleixing'){
                    this.ruleForm.fuwuleixing = obj[o];
                    this.ro.fuwuleixing = true;
                    continue;
                    }
                    if(o=='fuwutupian'){
                    this.ruleForm.fuwutupian = obj[o].split(",")[0];
                    this.ro.fuwutupian = true;
                    continue;
                    }
                    if(o=='keyueshijian'){
                    this.ruleForm.keyueshijian = obj[o];
                    this.ro.keyueshijian = true;
                    continue;
                    }
                    if(o=='fuwujiage'){
                    this.ruleForm.fuwujiage = obj[o];
                    this.ro.fuwujiage = true;
                    continue;
                    }
                    if(o=='zhekou'){
                    this.ruleForm.zhekou = obj[o];
                    this.ro.zhekou = true;
                    continue;
                    }
                    if(o=='zongjiage'){
                    this.ruleForm.zongjiage = obj[o];
                    this.ro.zongjiage = true;
                    continue;
                    }
                    if(o=='yuyueshijian'){
                    this.ruleForm.yuyueshijian = obj[o];
                    this.ro.yuyueshijian = true;
                    continue;
                    }
                    if(o=='dingdanzhuangtai'){
                    this.ruleForm.dingdanzhuangtai = obj[o];
                    this.ro.dingdanzhuangtai = true;
                    continue;
                    }
                    if(o=='zhanghao'){
                    this.ruleForm.zhanghao = obj[o];
                    this.ro.zhanghao = true;
                    continue;
                    }
                    if(o=='xingming'){
                    this.ruleForm.xingming = obj[o];
                    this.ro.xingming = true;
                    continue;
                    }
                    if(o=='shouji'){
                    this.ruleForm.shouji = obj[o];
                    this.ro.shouji = true;
                    continue;
                    }
                    if(o=='dizhi'){
                    this.ruleForm.dizhi = obj[o];
                    this.ro.dizhi = true;
                    continue;
                    }
                    if(o=='userid'){
                    this.ruleForm.userid = obj[o];
                    this.ro.userid = true;
                    continue;
                    }
                }
            }
            this.styleChange()
        },
        methods: {
            styleChange() {
                this.$nextTick(()=>{
                    // document.querySelectorAll('.app-update-pv . .uni-input-input').forEach(el=>{
                    //   el.style.backgroundColor = this.addUpdateForm.input.content.backgroundColor
                    // })
                })
            },

            // 多级联动参数


            // 日长控件选择日期时间
            yuyueshijianConfirm(val) {
                console.log(val)
                this.ruleForm.yuyueshijian = val.result;
                this.$forceUpdate();
            },

            // 下拉变化
            dingdanzhuangtaiChange(e) {
                this.dingdanzhuangtaiIndex = e.target.value
                this.ruleForm.dingdanzhuangtai = this.dingdanzhuangtaiOptions[this.dingdanzhuangtaiIndex]
            },

            fuwutupianTap() {
                let _this = this;
                this.$api.upload(function(res) {
                    _this.ruleForm.fuwutupian = 'upload/' + res.file;
                    _this.$forceUpdate();
                    _this.$nextTick(()=>{
                        _this.styleChange()
                    })
                });
            },

            getUUID () {
                return new Date().getTime();
            },
            async onSubmitTap() {

                this.ruleForm.zongjiage = this.zongjiage

//跨表计算判断
                var obj;
                if(this.ruleForm.fuwujiage&&(!this.$validate.isIntNumer(this.ruleForm.fuwujiage))){
                    this.$utils.msg(`服务价格应输入整数`);
                    return
                }
                if(this.ruleForm.zongjiage&&(!this.$validate.isNumber(this.ruleForm.zongjiage))){
                    this.$utils.msg(`总价格应输入数字`);
                    return
                }
                if(this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
                    this.$utils.msg(`手机应输入手机格式`);
                    return
                }
                //更新跨表属性
                   var crossuserid;
                   var crossrefid;
                   var crossoptnum;
                if(this.cross){
                    var statusColumnName = uni.getStorageSync('statusColumnName');
                    var statusColumnValue = uni.getStorageSync('statusColumnValue');
                    if(statusColumnName!='') {
                        if(!obj) {
                            obj = uni.getStorageSync('crossObj');
                        }
                        if(!statusColumnName.startsWith("[")) {
                            for (var o in obj){
                                if(o==statusColumnName){
                                    obj[o] = statusColumnValue;
                                }

                            }
                            var table = uni.getStorageSync('crossTable');
                            await this.$api.update(`${table}`, obj);
                        } else {
                               crossuserid=Number(uni.getStorageSync('userid'));
                               crossrefid=obj['id'];
                               crossoptnum=uni.getStorageSync('statusColumnName');
                               crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");
                        }
                    }
                }
                if(crossrefid && crossuserid) {
                    this.ruleForm.crossuserid=crossuserid;
                    this.ruleForm.crossrefid=crossrefid;
                    let params = {
                        page: 1,
                        limit:10,
                        crossuserid:crossuserid,
                        crossrefid:crossrefid,
                    }
                    let res = await this.$api.list(`fuwuyuyue`, params);
                    if (res.data.total >= crossoptnum) {
                        this.$utils.msg(uni.getStorageSync('tips'));
                        return false;
                    } else {
                //跨表计算
                        if(this.ruleForm.id){
                            await this.$api.update(`fuwuyuyue`, this.ruleForm);
                        }else{
                            await this.$api.add(`fuwuyuyue`, this.ruleForm);
                        }
                        this.$utils.msgBack('提交成功');
                    }
                } else {
                //跨表计算
                    if(this.ruleForm.id){
                        await this.$api.update(`fuwuyuyue`, this.ruleForm);
                    }else{
                        await this.$api.add(`fuwuyuyue`, this.ruleForm);
                    }
                    this.$utils.msgBack('提交成功');
                }
            },
            optionsChange(e) {
                this.index = e.target.value
            },
            bindDateChange(e) {
                this.date = e.target.value
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            toggleTab(str) {
                this.$refs[str].show();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        min-height: calc(100vh - 44px);
        box-sizing: border-box;
    }
</style>