moxuan_takeaway_shanghu_manage/src/views/user/userDetail1.vue

<template>
  <div>
    <div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
      <a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
        <icon-svg name="jiantou" style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"></icon-svg>
        返回
      </a>
      <span style="display: inline-block;margin: 0 15px;color: #D9D9D9;">|</span>
      <span>用户详情</span>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户详情" name="first">
        <div class="detailtabel">
          <div class="table_main">
            <table>
              <tbody>
                <tr>
                  <th>本月下单数量</th>
                  <td>{{ tablenum.orderMonth ? `${tablenum.orderMonth}单` : '0单' }}</td>
                  <th>本月充值金额</th>
                  <td>{{ tablenum.topUpMonth ? `${tablenum.topUpMonth}元` : '0元' }}</td>
                  <th>骑手收入</th>
                  <td class="border-rt">
                    {{ tablenum.riderMoney ? `${tablenum.riderMoney}元` : '0元' }}
                  </td>
                  <!-- <th>本月邀请数量</th>
                  <td class = "border-rt">{{ tablenum.inviteCount ? `${tablenum.inviteCount}人` : '0人' }}</td> -->
                </tr>
                <!-- <tr>
                  <th>本月派单数量</th>
                  <td>{{ tablenum.helpTakeCount ? `${tablenum.helpTakeCount}笔` : '0笔' }}</td>
                  <th>本月提现金额</th>
                  <td>{{ tablenum.cashOutMoney ? `${tablenum.cashOutMoney}元` : '0元' }}</td>
                  <th>openId</th>
                  <td class = "border-rt">{{ tableData.openId ? tableData.openId : '未绑定' }}</td>
                </tr> -->
                <tr>
                  <th>本月接单数量</th>
                  <td>{{ tablenum.joinOrderMonth ? `${tablenum.joinOrderMonth}单` : '0单' }}</td>
                  <!-- <th>用户状态</th>
                  <td>
                    <span v-if="tableData.status == 1 ">正常</span>
                    <span v-if="tableData.status == 2 " style="color: #f56c6c;">禁用</span>
                    <el-button size="mini" type="danger" style="color: #4f9dec;background: #fff;border: none;"
                      :disabled="!isAuth('userList:updateStatus')" @click="stateChange(tableData.userId)">更改状态
                    </el-button>
                  </td> -->
                  <th>余额</th>
                  <td style="color: rgb(245, 108, 108)">
                    {{ tablemoney.money ? `${tablemoney.money}元` : '0元' }}
                    <el-button size="mini" type="danger" style="color: #4f9dec;background: #fff;border: none;"
                      :disabled="!isAuth('userList:updateMoney')" @click="rechargenone(tableData.userId,1)">修改余额
                    </el-button>
                  </td>
                  <th>本月提现金额</th>
                  <td class="border-rt">
                    {{ tableData.cashMoney ? `${tablenum.cashMoney}元` : '0元'}}
                  </td>

                </tr>

                <tr>
                  <th>创建时间</th>
                  <td>{{tableData.createTime}}</td>
                  <th>积分</th>
                  <td style="color: rgb(245, 108, 108)">
                    {{ tablemoney.integralNum ? `${tablemoney.integralNum}分` : '0分' }}
                    <el-button size="mini" type="danger" style="color: #4f9dec;background: #fff;border: none;"
                      :disabled="!isAuth('userList:updateMoney')" @click="updateJf(tableData.userId)">修改积分
                    </el-button>
                  </td>
                  <th>骑手保证金</th>
                  <td class="border-rt">
                    {{ tablemoney.cashDeposit ? `${tablemoney.cashDeposit}元` : '0元' }}
                    <el-button size="mini" type="danger" style="color: #4f9dec;background: #fff;border: none;"
                      :disabled="!isAuth('userList:updateMoney')" @click="rechargenone(tableData.userId,2)">修改
                    </el-button>
                  </td>
                </tr>
                <tr>
                  <th>骑手余额</th>
                  <td>
                  {{ tablemoney.balance ? `${tablemoney.balance}元` : '0元' }}
                  <el-button size="mini" type="danger" style="color: #4f9dec;background: #fff;border: none;"
                    :disabled="!isAuth('userList:updateMoney')" @click="rechargenone(tableData.userId,3)">修改
                  </el-button>
                  </td>
                  <th>邀请码</th>
                  <td>{{ tablenum.invitationCode}}</td>
                  <th>收款二维码</th>
                  <td class="border-rt">
                    <el-popover placement="top-start" title="" trigger="hover">
                    	<img style="width: 50px; height: 50px" :src="tablemoney.cashQrCode" alt=""
                    		slot="reference">
                    	<img style="width: 300px; height: 300px" :src="tablemoney.cashQrCode" alt="">
                    </el-popover>
                  </td>
                </tr>
                <tr>
                  <th>用户状态</th>
                  <td>
                    <span v-if="tableData.status == 1 ">正常</span>
                    <span v-if="tableData.status == 2 " style="color: #f56c6c;">禁用</span>
                    <el-button size="mini" type="danger" style="color: #4f9dec;background: #fff;border: none;"
                      :disabled="!isAuth('userList:updateStatus')" @click="stateChange(tableData.userId)">更改状态
                    </el-button>
                  </td>
                  <th>邀请人邀请码</th>
                  <td>{{ tablenum.inviterCode }}</td>
                  <th></th>
                  <td class="border-rt"></td>
                </tr>
                <tr>
                  <th>openId</th>
                  <td>{{ tableData.openId ? tableData.openId : '未绑定' }}</td>
                  <th>手机号</th>
                  <td>{{ tableData.phone ? tableData.phone : '未绑定' }}</td>
                  <th>图像</th>
                  <td class="border-rt">
                    <img
                      :src="tableData.avatar ? tableData.avatar : 'https://www.daweilinli.com/sqx_fast/logo.png'"
                      width="80" height="80" />
                  </td>
                </tr>
                <tr>
                  <th>微信名称</th>
                  <td>{{ tableData.userName }}</td>
                  <th>支付宝账号</th>
                  <td>{{ tableData.zhiFuBao ? tableData.zhiFuBao : '未绑定' }}</td>
                  <th>支付宝姓名</th>
                  <td class="border-rt">{{ tableData.zhiFuBaoName ? tableData.zhiFuBaoName : '未绑定' }}</td>
                </tr>
                <tr>
                  <th>是否是骑手</th>
                  <td>
                    <span>{{tableData.userType==2?'是':'否'}}</span>
                  </td>
                  <th>是否实名</th>
                  <td>
                    <span>{{tableData.checkCertification==1?'是':'否'}}</span>
                  </td>
                  <th>是否是新用户</th>
                  <td class="border-rt">
                    <span>{{tableData.newUserFlag==1?'是':'否'}}</span>
                  </td>
                </tr>
                <tr>
                	<th>骑手openId</th>
                	<td>
                		<span>{{tableData.riderOpenId}}</span>
                	</td>
                	<th>骑手微信openId</th>
                	<td>
                		<span>{{tableData.riderWxOpenId}}</span>
                	</td>
                	<th>保证金订单号</th>
                	<td class="border-rt">
                		<span>{{tableData.checkNumber}}</span>
                	</td>
                </tr>
                <tr>
                  <th>渠道来源</th>
                  <td>{{tableData.platform}}</td>
                  <th>身份证号</th>
                  <td>{{tableData.identityCardNumber}}</td>
                  <th>更新时间</th>
                  <td class="border-rt"> {{tableData.updateTime}}</td>
                </tr>
                <tr>
                  <th>身份证正面照</th>
                  <td>
                    <img :src="tableData.identityCardFront" width="80" height="80" />
                  </td>
                  <th>身份证背面照</th>
                  <td>
                    <img :src="tableData.identityCardVerso" width="80" height="80" />
                  </td>
                  <th>手持身份证照</th>
                  <td class="border-rt">
                    <img :src="tableData.selfIdentityCard" width="80" height="80" />
                  </td>
                </tr>
                <tr>
                  <th class="border-bt">是否是店铺管理员</th>
                  <td class="border-bt">
                    {{tableData.shopAdminFlag==1?'是':'否'}}
                  </td>
                  <th class="border-bt">是否是会员</th>
                  <td class="border-bt">{{tableData.isVip==1?'是':'否'}}</td>
                  <th class="border-bt">会员到期时间</th>
                  <td class="border-bt border-rt">
                    {{tableData.vipExpirationTime}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <!--      <el-tab-pane label = "用户消息" name = "third">
              <el-table v-loading = "tableDataLoading" :data = "userData.list">
                <el-table-column prop = "id" label = "编号" width = "80">
                </el-table-column>
                <el-table-column prop = "userName" label = "用户名称">
                </el-table-column>
                <el-table-column prop = "title" label = "消息标题">
                </el-table-column>
                <el-table-column prop = "content" label = "消息内容" width = "280">
                </el-table-column>
                <el-table-column prop = "createAt" label = "创建时间" width = "150">
                </el-table-column>
              </el-table>
              <div style = "text-align: center;margin-top: 10px;">
                <el-pagination @size-change = "handleSizeChange1" @current-change = "handleCurrentChange1" :page-sizes = "[10,  20, 30, 50, 100]"
                               :page-size = "limit" :current-page = "page" layout = "total,sizes, prev, pager, next"
                               :total = "userData.totalCount">
                </el-pagination>
              </div>
            </el-tab-pane>-->
      <!-- <el-tab-pane label="任务消息" name="fifth">
        <el-table
        v-loading="tableDataLoading"
          :data="userData.list">
        <el-table-column
         prop="id"
         label="编号"
         width="80">
         </el-table-column>
         <el-table-column
          prop="userName"
          label="用户名称">
          </el-table-column>
          <el-table-column
           prop="title"
           label="消息标题">
           </el-table-column>
          <el-table-column
          prop="content"
          label="消息内容"
          width="280">
          </el-table-column>
          <el-table-column
          prop="createAt"
          label="创建时间"
          width="150">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :page-sizes="[10, 20, 30,50,100]"
            :page-size="limit"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="userData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane> -->
      <!--			<el-tab-pane label="提现记录" name="sixth">
              <el-table
              v-loading="tableDataLoading"
                :data="withdrawData.list">
              <el-table-column
               prop="id"
               label="编号"
               width="80">
               </el-table-column>
               <el-table-column
                prop="zhifubao"
                label="支付宝账号">
                </el-table-column>
                <el-table-column
                 prop="zhifubaoName"
                 label="支付宝名称">
                 </el-table-column>
                <el-table-column
                prop="money"
                label="提现金额">
                <template slot-scope="scope">
                  <span style="color: #f56c6c;">{{scope.row.money}}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="orderNumber"
                label="付款编号">
                </el-table-column>
                <el-table-column
                prop="createAt"
                label="创建时间">
                </el-table-column>
                <el-table-column
                prop="outAt"
                label="结束时间">
                </el-table-column>
                <el-table-column
                 fixed='right'
                prop="state"
                label="状态"
                width="100">
                <template slot-scope="scope">
                  <span style="color: #4f9dec;" v-if="scope.row.state === 1 ">提现成功</span>
                  <span style="color: #4f9dec;" v-if="scope.row.state === -1 ">已退款</span>
                </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                 :page-sizes="[10, 20, 30,50,100]"
                 :page-size="limit"
                  :current-page="page"
                  layout="total,sizes, prev, pager, next"
                  :total="walletData.totalCount">
                </el-pagination>
              </div>
            </el-tab-pane>-->
      <el-tab-pane label="钱包明细" name="eighth">
        <el-table v-loading="tableDataLoading" :data="walletData.records">
          <el-table-column prop="id" label="编号" width="100">
          </el-table-column>
          <el-table-column prop="title" label="标题">
          </el-table-column>
          <el-table-column prop="content" label="内容">
          </el-table-column>
          <el-table-column prop="money" label="金额" width="100">
            <template slot-scope="scope">
              <span style="color: #f56c6c;" v-if="scope.row.type==2">- {{ scope.row.money }}</span>
              <span style="color: #008200;" v-if="scope.row.type==1">+ {{ scope.row.money }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3"
            :page-sizes="[10, 20, 30,50,100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="walletData.total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="充值明细" name="seventh">
        <div style="display: inline-block;">
          <span>开始时间：</span>
          <el-date-picker style="width: 200px;margin-left: 10px;" v-model="startTime" align="right" type="datetime"
            default-time="00:00:00" placeholder="选择开始时间">
          </el-date-picker>&nbsp;&nbsp;&nbsp;
          <span>截止时间：</span>
          <el-date-picker style="width: 200px;margin-left: 10px;" v-model="endTime" align="right" type="datetime"
            default-time="23:59:59" placeholder="选择截止时间">
          </el-date-picker>
          <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="timeDate2">查询
          </el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="rechargeData.list">
          <el-table-column prop="id" label="编号" width="50">
          </el-table-column>
          <el-table-column prop="orderId" label="充值订单号" width="200">
          </el-table-column>
          <el-table-column prop="money" label="充值金额">
          </el-table-column>
          <el-table-column prop="userId" label="会员编号">
          </el-table-column>
          <!-- <el-table-column label = "分类">
            <template slot-scope = "scope">
              <span style = "color: #4f9dec;cursor: pointer;" v-if = "scope.row.classify == 1">微信</span>
              <span style = "color: #4f9dec;cursor: pointer;" v-if = "scope.row.classify == 2">支付宝</span>
            </template>
          </el-table-column> -->
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.state == 0">待支付</span>
              <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.state == 1">支付成功</span>
              <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.state == 2">支付失败</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="170">
          </el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="170">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange4" @current-change="handleCurrentChange4"
            :page-sizes="[10, 20, 30,50,100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="rechargeData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="积分明细" name="jifen">
        <el-table v-loading="tableDataLoading" :data="jifenData.list">
          <el-table-column prop="id" label="编号" width="100">
          </el-table-column>
          <!-- <el-table-column prop = "title" label = "标题" width = "120">
          </el-table-column> -->
          <el-table-column prop="content" label="内容">
          </el-table-column>
          <el-table-column prop="num" label="金额" width="100">
            <template slot-scope="scope">
              <span style="color: #006600;" v-if="scope.row.type==1">+ {{ scope.row.num }}</span>
              <span style="color: #f56c6c;" v-if="scope.row.type==2">- {{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30,50,100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="jifenData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的订单" name="tenth">
        <el-table v-loading="tableDataLoading" :data="takeData.list">
          <el-table-column prop="orderId" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="shopName" label="商铺信息"  width="300">
            <template slot-scope="scope">
                <div>店铺名称：{{scope.row.shopName}}</div>
                <div>店铺电话：{{scope.row.shopPhone}}</div>
                <div>店铺地址：{{scope.row.detailedAddress}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="orderType" label="订单类型">
            <template slot-scope="scope">
              <div>{{scope.row.orderType==1?'到店取餐':'外卖配送'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容" width="300">
            <template slot-scope="scope">
              <div>
                <div v-for="(item,index) in scope.row.orderGoodsList" :key="index">
                  <span>{{index+1}}.
                    商品名：{{item.goodsName}},</span><span>数量：{{item.goodsNum}},</span><span>规格：{{item.skuMessage}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="riderNickName" label="骑手昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
          <!-- <el-table-column prop="payMoney" label="支付金额" width="100"></el-table-column> -->
          <el-table-column prop="goodsPriceZ" label="商品总价" width="100">
          </el-table-column>
          <el-table-column prop="couponMoney" label="优惠金额" width="100">
            <template slot-scope="scope">
              <div>
                <div>
                  <span>{{scope.row.couponMoney?scope.row.couponMoney:'0'}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="packMoney" label="打包费" width="100"></el-table-column>
          <el-table-column prop="errandMoney" label="跑腿费" width="100"></el-table-column>
          <el-table-column prop="payMoney" label="支付金额" width="100"></el-table-column>
          <el-table-column prop="remark" label="订单备注" width="150">
          </el-table-column>
          <el-table-column prop="payTime" label="支付时间"></el-table-column>
          <el-table-column prop="orderCode" label="取餐号" width="100"></el-table-column>
          <el-table-column fixed="right" prop="status" label="状态" width="100">
            <!-- <template slot-scope="scope">
              <span style="color: #4f9dec;" v-if="scope.row.status === 0 ">待结算</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 1 ">待支付</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 3 ">待取餐</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 4 ">已完成</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 5 ">已取消</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 6 ">制作中</span>
            </template> -->
            <template slot-scope="scope">
              <span style="color: #4f9dec;" v-if="scope.row.status === 0 ">待结算</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 1 ">待支付</span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 3 ">
                {{scope.row.orderType==1?'待取餐':'待配送'}}
              </span>
              <span style="color: #4f9dec;" v-if="scope.row.status === 4 ">已完成</span>
              <span style="color: #999;" v-if="scope.row.status === 5 ">已取消</span>
              <span style="color: #999;" v-if="scope.row.status === 6 ">制作中</span>
              <span style="color: #999;" v-if="scope.row.status === 7 ">商家待接单</span>
              <span style="color: #999;" v-if="scope.row.status === 8 ">商家已拒单</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange6" @current-change="handleCurrentChange6"
            :page-sizes="[10, 20, 30,50,100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="takeData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的消息" name="message">
        <!-- <div style = "float: right;margin-right:2%;">
          <el-button style = "margin: 10px 0;" size = "mini" type = "primary" icon = "document" @click = "magNotice">消息推送</el-button>
        </div> -->
        <el-table v-loading="tableDataLoading" :data="userData.list">
          <el-table-column fixed prop="id" label="编号" width="80">
          </el-table-column>
          <!-- <el-table-column prop="userName" label="用户名称">
          </el-table-column> -->
          <el-table-column prop="title" label="消息标题">
          </el-table-column>
          <el-table-column prop="content" label="消息内容" width="280">
          </el-table-column>
          <el-table-column prop="createAt" label="创建时间">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
            :page-sizes="[10, 20, 30,50,100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="userData.totalCount">
          </el-pagination>
        </div>
        <!-- 消息推送 -->
        <el-dialog title="消息推送" :visible.sync="dialogFormVisible" center>
          <div style="margin-bottom: 10px;">
            <span style="width: 200px;display: inline-block;text-align: right;">消息标题：</span>
            <el-input style="width: 50%;" v-model="title" placeholder="请输入消息标题"></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span
              style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">消息内容：</span>
            <el-input style="width: 50%;" type="textarea" rows="4" v-model="content" placeholder="请输入消息内容"></el-input>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="magNoticeTo()">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane label="我的优惠券" name="youhuiquan">
        <el-table v-loading="tableDataLoading" :data="youhuiquanData.list">
          <el-table-column prop="id" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="couponName" label="优惠券名称">
          </el-table-column>
          <el-table-column prop="couponPicture" label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.couponPicture" alt="" width="40" height="40">
            </template>
          </el-table-column>
          <el-table-column prop="money" label="优惠券金额">
          </el-table-column>
          <el-table-column prop="minMoney" label="最低消费">
          </el-table-column>
          <el-table-column prop="needIntegral" label="兑换积分">
          </el-table-column>
          <el-table-column prop="createTime" label="领取时间">
          </el-table-column>
          <el-table-column prop="expirationTime" label="过期时间">
          </el-table-column>
          <el-table-column prop="expirationTime" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status==0">待使用</span>
              <span v-else-if="scope.row.status==1">已使用</span>
              <span v-else-if="scope.row.status==2">已失效</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange7" @current-change="handleCurrentChange7"
            :page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="youhuiquanData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的地址" name="dizhi">
        <div style="display: inline-block;">
          <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="adddates(0)">添加
          </el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="dizhiData.list">
          <el-table-column prop="addressId" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="userName" label="用户姓名" width="100">
          </el-table-column>
          <el-table-column prop="userPhone" label="用户电话" width="120">
          </el-table-column>
          <el-table-column prop="money" label="详细地址">
            <template slot-scope="scope">
              <span>{{scope.row.address}}({{scope.row.addressDetail}})</span>
            </template>
          </el-table-column>
          <el-table-column prop="minMoney" label="是否默认" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.addressDefault==0">否</span>
              <span v-else-if="scope.row.addressDefault==1">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="adddates(scope.row)">
                编辑
              </el-button>
              <el-button size="mini" type="danger" @click="deleteStair(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange8" @current-change="handleCurrentChange8"
            :page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next" :total="dizhiData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的发布" name="fadan">
        <div>
          <!-- <div style="position: relative;display: inline-block;">
      			<span>标题名称：</span>
      			<el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入标题名称"
      				v-model="search">
      			</el-input>&nbsp;&nbsp;
      		</div> -->
          <!-- <el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="phoneSelect">查询
      		</el-button>
      		<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="cleans2">重置
      		</el-button> -->
        </div>
        <el-table v-loading="tableDataLoading" :data="fadanData.list">

          <el-table-column fixed prop="id" label="编号" width="80" fixed="left">
            <template slot-scope="scope">
              <div>{{scope.$index +1}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="shipAddressDetail" label="任务类型" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.indentType=='1'">帮我送</div>
              <div v-if="scope.row.indentType=='2'">帮我取</div>
              <div v-if="scope.row.indentType=='3'">同城帮买</div>
              <div v-if="scope.row.indentType=='4'">同城服务</div>
              <div v-if="scope.row.indentType=='5'">同城外卖</div>
            </template>
          </el-table-column>
          <el-table-column prop="productDetails" label="帮买物品" width="150">
          </el-table-column>
          <el-table-column prop="deilveryAddressDetail" label="地址" width="300">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">取货地址：</span>
                <span v-if="scope.row.indentType=='3'">帮买地址：</span>
                <div v-if="scope.row.indentType!='5'">
                  {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
                </div>
                <div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">
                  <div>联系人：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
                </div>
                <div v-if="scope.row.indentType=='5'">
                  <div>取货商铺：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
                  <div>
                    <span>商铺地址：</span>
                    {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
                  </div>
                </div>
              </div>
              <br />
              <div v-if="scope.row.userName">
                <div><span>收货地址:</span>
                  {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}{{scope.row.userAddressDetail}}
                </div>
                <div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="riderNickName" label="骑手昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
          <el-table-column prop="serviceDetails" label="服务详情"></el-table-column>
          <el-table-column prop="serviceType" label="服务类型"></el-table-column>
          <!-- <el-table-column prop="tool" label="是否自备配件"></el-table-column> -->
          <el-table-column prop="buyType" label="购买时间">
          </el-table-column>
          <el-table-column prop="prepayMoney" label="预估商品费用">
          </el-table-column>
          <el-table-column prop="redPacketAmount" label="红包">
          </el-table-column>
          <el-table-column prop="tip" label="小费">
          </el-table-column>
          <el-table-column prop="itemCode" label="收货码">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="200">
          </el-table-column>
          <el-table-column prop="riderMoney" label="跑腿费">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column prop="state" label="状态" fixed="right" width="160">
            <template slot-scope="scope">
              <div v-if="scope.row.indentState=='0'">未支付</div>
              <div v-if="scope.row.indentState=='1'">未支付</div>
              <div v-if="scope.row.indentState=='2'">已支付</div>
              <div v-if="scope.row.indentState=='3'">骑手已接单</div>
              <div v-if="scope.row.indentState=='4'">骑手已取货/购买</div>
              <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
              <div v-if="scope.row.indentState=='6'">订单已完成</div>
              <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
              <div v-if="scope.row.indentState=='8'">用户取消订单</div>
              <div v-if="scope.row.indentState=='9'">骑手取消订单</div>
              <div v-if="scope.row.indentState=='10'">已下架</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
            :page-sizes="[10, 15, 20]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="fadanData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的接单" name="jiedan">
        <div>
          <!-- <div style="position: relative;display: inline-block;">
      			<span>标题名称：</span>
      			<el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入标题名称"
      				v-model="search">
      			</el-input>&nbsp;&nbsp;
      		</div>
      		<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="phoneSelect">查询
      		</el-button>
      		<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="cleans2">重置
      		</el-button> -->
        </div>
        <el-table v-loading="tableDataLoading" :data="userDataJ.list">

          <el-table-column fixed prop="id" label="编号" width="80" fixed="left">
            <template slot-scope="scope">
              <div>{{scope.$index +1}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="indentType" label="任务类型" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.indentType=='1'">帮我送</div>
              <div v-if="scope.row.indentType=='2'">帮我取</div>
              <div v-if="scope.row.indentType=='3'">同城帮买</div>
              <div v-if="scope.row.indentType=='4'">同城服务</div>
              <div v-if="scope.row.indentType=='5'">同城外卖</div>
            </template>
          </el-table-column>
          <el-table-column prop="productDetails" label="物品/服务" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.indentType=='1'">帮送物品：{{scope.row.remarks}}</div>
              <div v-if="scope.row.indentType=='2'">帮取物品：{{scope.row.remarks}}</div>
              <div v-if="scope.row.indentType=='3'">帮买物品：{{scope.row.productDetails}}</div>
              <div v-if="scope.row.indentType=='4'">服务详情：{{scope.row.serviceDetails}}</div>
              <div v-if="scope.row.indentType=='5'">外卖详情：{{scope.row.serviceDetails}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="deilveryAddressDetail" label="地址" width="300">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">取货地址：</span>
                <span v-if="scope.row.indentType=='3'">帮买地址：</span>
                <div v-if="scope.row.indentType!='5'">
                  {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
                </div>
                <div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">
                  <div>联系人：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
                </div>
                <div v-if="scope.row.indentType=='5'">
                  <div>取货商铺：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
                  <div>
                    <span>商铺地址：</span>
                    {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
                  </div>
                </div>
              </div>
              <br />
              <div v-if="scope.row.userName">
                <div><span>收货地址:</span>
                  {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}{{scope.row.userAddressDetail}}
                </div>
                <div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="serviceDetails" label="服务详情"></el-table-column> -->
          <el-table-column prop="serviceType" label="服务类型"></el-table-column>
          <!-- <el-table-column prop="tool" label="是否自备配件"></el-table-column> -->
          <el-table-column prop="buyType" label="帮买方式">
            <template slot-scope="scope">
              <div v-if="scope.row.buyType=='0'">就近帮买</div>
              <div v-if="scope.row.buyType=='1'">指定地点帮买</div>
            </template>
          </el-table-column>
          <el-table-column prop="prepayMoney" label="预估商品费用">
          </el-table-column>
          <el-table-column prop="redPacketAmount" label="红包">
          </el-table-column>
          <el-table-column prop="tip" label="小费">
          </el-table-column>
          <el-table-column prop="errandMoney" label="跑腿费">
          </el-table-column>
          <el-table-column prop="platformMoney" label="平台收入">
          </el-table-column>
          <el-table-column prop="riderMoney" label="总费用">
          </el-table-column>
          <el-table-column prop="itemCode" label="收货码">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="200">
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column prop="state" label="状态" fixed="right" width="160">
            <template slot-scope="scope">
              <div v-if="scope.row.indentState=='0'">未支付</div>
              <div v-if="scope.row.indentState=='1'">未支付</div>
              <div v-if="scope.row.indentState=='2'">已支付</div>
              <div v-if="scope.row.indentState=='3'">骑手已接单</div>
              <div v-if="scope.row.indentState=='4'">骑手已取货/购买</div>
              <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
              <div v-if="scope.row.indentState=='6'">订单已完成</div>
              <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
              <div v-if="scope.row.indentState=='8'">用户取消订单</div>
              <div v-if="scope.row.indentState=='9'">骑手取消订单</div>
              <div v-if="scope.row.indentState=='10'">已下架</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange9" @current-change="handleCurrentChange9"
            :page-sizes="[10, 15, 20]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="userDataJ.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的申诉" name="ninth">
        <div style="margin-right:2%;">
          <span>状态：</span>
          <el-select v-model="complaintState" style="width:150px;margin-left: 10px;" @change="animeDat(complaintState)">
            <el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <div style="position: relative;display: inline-block;">
            <span>订单编号：</span>
            <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入订单编号" v-model="indentNumber">
            </el-input>&nbsp;&nbsp;
          </div>
          <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">查询
          </el-button>
          <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans">重置
          </el-button>
        </div>
        <el-table v-loading="tableDataLoading" :data="sendData.list">
          <el-table-column fixed prop="illegalId" label="编号" width="80">
            <!-- <template slot-scope="scope">
      				<span>{{scope.$index+1}}</span>
      			</template> -->
          </el-table-column>
          <el-table-column prop="indentNumber" label="订单号" width="200" align="center">
          </el-table-column>
          <el-table-column prop="illegal" label="投诉类型" width="150">
            <!-- <template slot-scope="scope">
      				<div v-if="scope.row.complaintType=='1'">取消订单</div>
      				<div v-if="scope.row.complaintType=='2'">拒绝系统推单</div>
      				<div v-if="scope.row.complaintType=='3'">残损违规</div>
      			</template> -->
          </el-table-column>
          <el-table-column prop="wrongExplain" label="违规说明"></el-table-column>
          <el-table-column prop="resultHanding" label="处理结果" width="120" align="center">
          </el-table-column>
          <el-table-column prop="complaintTime" label="投诉时间" width="100"></el-table-column>
          <!-- <el-table-column prop="appealType" label="申诉类型" width="100">
      			<template slot-scope="scope">
      				<div v-if="scope.row.appealType=='1'">取消订单</div>
      				<div v-if="scope.row.appealType=='2'">拒绝系统推单</div>
      				<div v-if="scope.row.appealType=='3'">残损违规</div>
      			</template>
      		</el-table-column> -->
          <el-table-column prop="appealMessage" label="申诉理由" align="center">
          </el-table-column>
          <el-table-column prop="appealTime" label="申诉时间" width="100"></el-table-column>
          <el-table-column prop="complaintState" label="申诉状态" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.complaintState=='1'">可申诉</span>
              <span v-if="scope.row.complaintState=='2'">申诉中</span>
              <span v-if="scope.row.complaintState=='3'">申诉未通过</span>
              <!-- <span v-if="scope.row.complaintState=='4'">申诉未通过</span> -->
              <span v-if="scope.row.complaintState=='4'">申诉通过</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange5" @current-change="handleCurrentChange5"
            :page-sizes="[10, 15, 20]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="sendData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="跑腿收益统计" name="shouyi">
        <div>
          <span>时间类型：</span>
          <el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
            <el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
          <el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right" type="datetime"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间" @change="animeOrder">
          </el-date-picker>
        </div>
        <div>
          <el-row>
            <el-col :span="6" class="cards">
              <div class="box">
                <div class="box_num">
                  <div class="box_color">收益统计</div>
                  <div class="text_color">
                    <span>{{tableData2.incomeday ? tableData2.incomeday : 0}}</span>元
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="cards">
              <div class="box">
                <div class="box_num">
                  <div class="box_color">订单数量</div>
                  <div class="text_color">
                    <span>{{tableData2.indentCount ? tableData2.indentCount : 0}}</span>单
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData3.list">
          <el-table-column fixed prop="indentId" label="编号" width="80" fixed="left">
            <!-- <template slot-scope="scope">
      				<div>{{scope.$index +1}}</div>
      			</template> -->
          </el-table-column>
          <el-table-column prop="shipAddressDetail" label="任务类型" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.indentType=='1'">帮我送</div>
              <div v-if="scope.row.indentType=='2'">帮我取</div>
              <div v-if="scope.row.indentType=='3'">同城帮买</div>
              <div v-if="scope.row.indentType=='4'">同城服务</div>
              <div v-if="scope.row.indentType=='5'">同城外卖</div>
            </template>
          </el-table-column>
          <el-table-column prop="deilveryAddressDetail" label="地址" width="300">
           <template slot-scope="scope">
             <div>
               <span v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">取货地址：</span>
               <span v-if="scope.row.indentType=='3'">帮买地址：</span>
               <div v-if="scope.row.indentType!='5'">
                 {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
               </div>
               <div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">
                 <div>联系人：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
               </div>
               <div v-if="scope.row.indentType=='5'">
                 <div>取货商铺：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
                 <div>
                   <span>商铺地址：</span>
                   {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
                 </div>
               </div>
             </div>
             <br />
             <div v-if="scope.row.userName">
               <div><span>收货地址:</span>
                 {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}{{scope.row.userAddressDetail}}
               </div>
               <div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
             </div>
           </template>
          </el-table-column>
          <el-table-column prop="redPacketAmount" label="红包">
            <template slot-scope="scope">
              <span>{{scope.row.redPacketAmount?scope.row.redPacketAmount:'0'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tip" label="小费">
            <template slot-scope="scope">
              <span>{{scope.row.tip?scope.row.tip:'0'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="itemCode" label="收货码">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="200">
          </el-table-column>
          <el-table-column prop="riderMoney" label="收益(跑腿费+小费)" width="180" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
          <el-table-column prop="state" label="状态" fixed="right">
            <template slot-scope="scope">
              <div v-if="scope.row.indentState=='0'">未支付</div>
              <div v-if="scope.row.indentState=='1'">未支付</div>
              <div v-if="scope.row.indentState=='2'">已支付</div>
              <div v-if="scope.row.indentState=='3'">骑手已接单</div>
              <div v-if="scope.row.indentState=='4'">骑手已取货/购买</div>
              <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
              <div v-if="scope.row.indentState=='6'">订单已完成</div>
              <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
              <div v-if="scope.row.indentState=='8'">用户取消订单</div>
              <div v-if="scope.row.indentState=='9'">骑手取消订单</div>
              <div v-if="scope.row.indentState=='10'">已下架</div>
            </template>
          </el-table-column>

        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange10" @current-change="handleCurrentChange10"
            :page-sizes="[10, 15, 20]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="tableData3.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="保证金管理" name="qishoushouyi">
        <el-table v-loading="tableDataLoading" :data="baozhengjinData.list">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column fixed prop="id" label="编号" width="80">
          </el-table-column>
          <!-- <el-table-column prop = "nickName" label = "用户昵称" width = "120">
      			<template slot-scope="scope">
      				<div style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">{{scope.row.nickName?scope.row.nickName:'未绑定'}}</div>
      			</template>
      		</el-table-column> -->
          <el-table-column prop="money" label="保证金" width="100">
            <template slot-scope="scope">
              <span style="color: #f56c6c;" v-if="scope.row.type==2">- {{ scope.row.money }}</span>
              <span style="color: #008200;" v-if="scope.row.type==1">+ {{ scope.row.money }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="phone" label="手机号" width="150">
            <template slot-scope="scope">
              <span>{{scope.row.phone ? scope.row.phone : '暂无'}}</span>
            </template>
          </el-table-column> -->

          <el-table-column prop="title" label="标题">
          </el-table-column>
          <el-table-column prop="content" label="内容">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column prop="type" label="状态" width="100" fixed="right">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">已交保证金</span>
              <span v-if="scope.row.type == 2">已退保证金</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange11" @current-change="handleCurrentChange11"
            :page-sizes="[10, 15, 20]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="baozhengjinData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="骑手聊天记录" name="qsltjl">
        <el-table v-loading="tableDataLoading" :data="liaotianData.list">
         <el-table-column prop="ordersId" label="编号" width="80">
         </el-table-column>
         <el-table-column prop="shopName" label="商户名称">
         </el-table-column>
         <el-table-column prop="title" label="用户头像">
           <template slot-scope="scope">
             <div >
               <el-popover placement="top-start" title="" trigger="hover">
                 <img style="width: 50px; height: 50px" :src="scope.row.shopCover" alt="" slot="reference">
                 <img style="width: 200px; height: 200px" :src="scope.row.shopCover" alt="">
               </el-popover>
             </div>
           </template>
         </el-table-column>
          <el-table-column prop="content" label="信息内容" width="280">
            <template slot-scope="scope">
              <div v-if="scope.row.messageType==1">{{scope.row.content}}</div>
              <div v-if="scope.row.messageType==2">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px" :src="scope.row.content" alt="" slot="reference">
                  <img style="width: 200px; height: 200px" :src="scope.row.content" alt="">
                </el-popover>
              </div>
              <div v-if="scope.row.messageType==3">
                <audio :src="scope.row.content" type="audio/wav" controls="controls"></audio>
              </div>
              <div v-if="scope.row.messageType==4">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px"
                    :src="'https://www.daweilinli.com/emoji/'+scope.row.content" alt="" slot="reference">
                  <img style="width: 200px; height: 200px"
                    :src="'https://www.daweilinli.com/emoji/'+scope.row.content" alt="">
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column fixed='right' label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="complainDetails(scope.row)">聊天内容
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange13" @current-change="handleCurrentChange13"
            :page-sizes="[10, 20, 30, 50, 100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="liaotianData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户聊天记录" name="yhltjl">
        <el-table v-loading="tableDataLoading" :data="liaotianData.list">
          <el-table-column prop="ordersId" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="shopName" label="商户名称">
          </el-table-column>
          <el-table-column prop="title" label="用户头像">
            <template slot-scope="scope">
              <div >
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px" :src="scope.row.shopCover" alt="" slot="reference">
                  <img style="width: 200px; height: 200px" :src="scope.row.shopCover" alt="">
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="信息内容" width="280">
            <template slot-scope="scope">
              <div v-if="scope.row.messageType==1">{{scope.row.content}}</div>
              <div v-if="scope.row.messageType==2">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px" :src="scope.row.content" alt="" slot="reference">
                  <img style="width: 200px; height: 200px" :src="scope.row.content" alt="">
                </el-popover>
              </div>
              <div v-if="scope.row.messageType==3">
                <audio :src="scope.row.content" type="audio/wav" controls="controls"></audio>
              </div>
              <div v-if="scope.row.messageType==4">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px"
                    :src="'https://www.daweilinli.com/emoji/'+scope.row.content" alt="" slot="reference">
                  <img style="width: 200px; height: 200px"
                    :src="'https://www.daweilinli.com/emoji/'+scope.row.content" alt="">
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column fixed='right' label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="complainDetails(scope.row)">聊天内容
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange14" @current-change="handleCurrentChange14"
            :page-sizes="[10, 20, 30, 50, 100]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="liaotianData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!-- 不可提现添加金额 -->
      <el-dialog title="修改金额" :visible.sync="dialogFormVisible1" center>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">修改类型：</span>
          <el-radio-group v-model="type">
            <el-radio :label="1">添加</el-radio>
            <el-radio :label="2">减少</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">金额：</span>
          <el-input style="width:50%;" v-model="money" type="number" :min="0" :max="100" :controls="false"
            placeholder="请输入金额"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="StairNoticeTo1()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 不可提现添加金额 -->
      <el-dialog title="修改积分" :visible.sync="dialogFormVisible3" center>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">修改类型：</span>
          <el-radio-group v-model="type">
            <el-radio :label="1">添加</el-radio>
            <el-radio :label="2">减少</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">积分：</span>
          <el-input style="width:50%;" v-model="jifen" type="number" :min="0" :max="100" :controls="false"
            placeholder="请输入积分"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="StairNoticeTo2()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加修改商铺 -->
      <el-dialog :title="titles" :visible.sync="dialogFormVisible2" center>

        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">用户姓名：</span>
          <el-input v-model="userName" style="width:45%;" placeholder="请输入用户姓名">
          </el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">用户电话：</span>
          <el-input v-model="userPhone" style="width:45%;" placeholder="请输入用户电话"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">所在地区：</span>
          <el-input v-model="address" style="width:45%;" placeholder="请输入所在地区">
          </el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">详细地址：</span>
          <el-input v-model="addressDetail" style="width:45%;" placeholder="请输入详细地址"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">维度：</span>
          <el-input v-model="latitude" style="width:45%;" placeholder="请输入维度"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">经度：</span>
          <el-input v-model="longitude" style="width:45%;" placeholder="请输入经度"></el-input>
        </div>
        <div style="margin-bottom: 10px;">
          <span style="width: 200px;display: inline-block;text-align: right;">是否默认：</span>
          <el-radio-group v-model="addressDefault">
            <el-radio :label="1">默认</el-radio>
            <el-radio :label="0">不默认</el-radio>
          </el-radio-group>
        </div>
        <div>
          <div id="container" style="width:80%;height:500px;margin-left: 10%;"></div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="addmissionNoticeTo()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 聊天内容 -->
      <el-dialog title="聊天内容" :visible.sync="dialogFormVisible4" center>
        <el-table v-loading="tableDataLoading1" :data="huihuaData.list">
          <el-table-column prop="userName" label="用户昵称">
            <template slot-scope="scope">
              <div v-if="scope.row.shopId" >
                {{ scope.row.shopName}}
              </div>
              <div v-else style="color: #4f9dec;cursor: pointer;"  @click="details(scope.row)">
                {{scope.row.userName ? scope.row.userName : scope.row.riderName}}
              </div>

            </template>
          </el-table-column>
          <el-table-column prop="title" label="用户头像">
            <template slot-scope="scope">
              <!-- <div v-if="scope.row.avatar == null || scope.row.avatar == ''">
                暂无图片
              </div> -->
              <div >
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px" :src="scope.row.shopCover?scope.row.shopCover:scope.row.riderAvatar?scope.row.riderAvatar:scope.row.userAvatar" alt="" slot="reference">
                  <img style="width: 200px; height: 200px" :src="scope.row.shopCover?scope.row.shopCover:scope.row.riderAvatar?scope.row.riderAvatar:scope.row.userAvatar" alt="">
                </el-popover>
              </div>
            </template>

          </el-table-column>
          <el-table-column prop="content" label="信息内容" width="280">
            <template slot-scope="scope">
              <div v-if="scope.row.messageType==1">{{scope.row.content}}</div>
              <div v-if="scope.row.messageType==2">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px" :src="scope.row.content" alt="" slot="reference">
                  <img style="width: 200px; height: 200px" :src="scope.row.content" alt="">
                </el-popover>
              </div>
              <div v-if="scope.row.messageType==3">
                <audio :src="scope.row.content" type="audio/wav" controls="controls"></audio>
              </div>
              <div v-if="scope.row.messageType==4">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img style="width: 50px; height: 50px"
                    :src="'https://www.daweilinli.com/emoji/'+scope.row.content" alt="" slot="reference">
                  <img style="width: 200px; height: 200px"
                    :src="'https://www.daweilinli.com/emoji/'+scope.row.content" alt="">
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange12" @current-change="handleCurrentChange12"
            :page-sizes="[10, 20, 30, 50, 100]" :page-size="limit1" :current-page="page1"
            layout="total,sizes, prev, pager, next" :total="huihuaData.totalCount">
          </el-pagination>
        </div>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
  import {
    jsonp
  } from 'vue-jsonp'
  var geocoder, map, markersArray = [];
  export default {
    data() {
      return {
        openValue: 1,
        closeValue: 0,
        state: 0,
        limit: 10,
        page: 1,
        limit1: 10,
        page1: 1,
        userId: '',
        money: '',
        title: '',
        content: '',
        phone: '',
        startTime: '',
        endTime: '',
        invitationCode: '',
        feiDatamin: '',
        info: {
          stockDate: this.getNowTime(), //日期
        },
        info2: {
          stockDate2: this.getNowTime2(), //日期
        },
        tablejifen: '',
        autonymData: {},
        tablemoney: {},
        tablenum: {},
        tableData: {},
        youhuiquanData: {},
        dizhiData: {},
        userData: [],
        tableDatamin: [],
        withdrawData: [],
        walletData: [],
        jifenData: {},
        rechargeData: [],
        sendData: [],
        takeData: [],
        activeName: 'first',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        dialogFormVisible4: false,
        dialogFormVisible3:false,
        tableDataLoading: true,
        tableDataLoading1: false,
        relation_id: '',
        relationId: '',
        tkstatus: '',
        invitation: '',
        nowMonthOver: '',
        lastMonthOver: '',
        nowMonthPaid: '',
        lastMonthPaid: '',
        nowMonthOrderNumber: '',
        nowDayOrderNumber: '',
        hasCash: '',
        type: '',
        titles: '添加地址',
        addressId: '',
        userName: '',
        userPhone: '',
        addressDetail: '',
        address: '',
        addressDefault: '',
        longitude: '', //维度
        latitude: '', //经度
        tableData2: {},
        tableData3: {},
        baozhengjinData: {},
        flag: 'day',
        flags: [{
          value: 'day',
          label: '按天查询'
        }, {
          value: 'month',
          label: '按月查询'
        }, {
          value: 'year',
          label: '按年查询'
        }],
        userDataJ: {},
        fadanData: {},
        complaintState: '',
        statesnum: [{
            label: '全部',
            value: ''
          },
          {
            label: '可申诉',
            value: 1
          },
          {
            label: '不可申诉',
            value: 2
          },
          {
            label: '审核中',
            value: 3
          },
          {
            label: '审核未通过',
            value: 4
          },
          {
            label: '审核已通过',
            value: 5
          },
        ],
        indentNumber: '',
        chatConversationId: '',
        liaotianData: {},
        huihuaData: {},
        jifen:'',
        classIndex:'',
      }
    },
    methods: {
      // 返回上一级
      prev() {
        this.$router.back()
      },
      // 详情跳转
      updates(userId) {
        this.$router.push({
          path: '/userDetail',
          query: {
            userId: userId
          }
        })
      },
      // 详情跳转
      details(row) {
        if (!row.shopId) {

        }
        let userId = row.userId ? row.userId : row.riderId
        this.$router.push({
          path: '/userDetail1',
          query: {
            userId: userId
          }
        })
      },
      //处理默认选中当前日期
      getNowTime() {
        var now = new Date()
        var year = now.getFullYear() //得到年份
        var month = now.getMonth() //得到月份
        var date = now.getDate() //得到日期
        var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
        var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
        var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
        month = month + 1
        month = month.toString().padStart(2, '0')
        date = date.toString().padStart(2, '0')
        var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
        return defaultDate
        this.$set(this.info, 'stockDate', defaultDate)
      },
      //处理默认选中当前日期
      getNowTime2() {
        var now = new Date()
        var year = now.getFullYear() //得到年份
        var month = now.getMonth() - now.getMonth() //得到月份
        var date = now.getDate() - now.getDate() + 1 //得到日期
        var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
        var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
        var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
        month = month + 1
        month = month.toString().padStart(2, '0')
        date = date.toString().padStart(2, '0')
        var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
        return defaultDate
        this.$set(this.info, 'stockDate', defaultDate)
      },
      // tabs切换
      handleClick(tab, event) {
        if (tab._props.label == '用户详情') {
          this.dataSelect()
        }
        if (tab._props.label == '直属') {
          this.limit = 10
          this.page = 1
          this.teamSelect()
        }
        if (tab._props.label == '非直属') {
          this.limit = 10
          this.page = 1
          this.feiSelect()
        }
        if (tab._props.label == '用户消息') {
          this.limit = 10
          this.page = 1
          this.state = 5
          this.userSelect()
        }
        if (tab._props.label == '任务消息') {
          this.state = 6
          this.userSelect()
        }
        if (tab._props.label == '提现记录') {
          this.limit = 10
          this.page = 1
          this.withdrawSelect()
        }
        if (tab._props.label == '钱包明细') {
          this.limit = 10
          this.page = 1
          this.walletSelect()
        }
        if (tab._props.label == '积分明细') {
          this.limit = 10
          this.page = 1
          this.jifenSelect()
        }
        if (tab._props.label == '充值明细') {
          this.limit = 10
          this.page = 1
          this.startTime = ''
          this.endTime = ''
          this.rechargeSelect()
        }
        if (tab._props.label == '我的订单') {
          this.limit = 10
          this.page = 1
          this.state = 0
          this.takeSelect()
        }
        if (tab._props.label == '我的消息') {
          this.limit = 10
          this.page = 1
          this.state = 8
          this.flag = 1
          this.userSelect()
        }
        if (tab._props.label == '我的优惠券') {
          this.limit = 10
          this.page = 1
          this.youhuiquanSelect()
        }
        if (tab._props.label == '我的地址') {
          this.limit = 10
          this.page = 1
          this.dizhiSelect()
        }
        if (tab._props.label == '保证金管理') {
          this.limit = 10
          this.page = 1
          this.flag = ''
          this.dataSelect1()
        }
        if (tab._props.label == '我的发布') {
          this.limit = 10
          this.page = 1
          this.InformationSelect()
        }
        if (tab._props.label == '我的接单') {
          this.limit = 10
          this.page = 1
          this.InformationSelect1()
        }
        if (tab._props.label == '我的申诉') {
          this.limit = 10
          this.page = 1
          this.state = 0
          this.sendSelect()
        }
        if (tab._props.label == '跑腿收益统计') {
          this.page = 1
          this.limit = 10
          this.flag = ''
          this.taskData()
        }
        if (tab._props.label == '用户聊天记录') {
          this.limit = 10
          this.page = 1
          this.liaotianSelect()
        }
        if (tab._props.label == '骑手聊天记录') {
          this.limit = 10
          this.page = 1
          this.liaotianSelectQs()
        }
      },
      // 消息推送
      magNotice() {
        this.dialogFormVisible = true
      },
      // 消息推送
      magNoticeTo() {
        if (this.title == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入标题',
            type: 'warning'
          })
          return
        }
        if (this.content == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入内容',
            type: 'warning'
          })
          return
        }
        this.$http({
          url: this.$http.adornUrl('cash/sendMsg'),
          method: 'get',
          params: this.$http.adornParams({
            'title': this.title,
            'content': this.content,
            'phone': this.phone,
            'flag': this.flag
          })
        }).then(({
          data
        }) => {
          this.dialogFormVisible = false
          if (data.code == -100) {
            this.$message({
              message: data.msg,
              type: 'error',
              duration: 1500,
              onClose: () => {
                this.title = ''
                this.content = ''
                this.userSelect()
              }
            })
          }
          if (data.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.title = ''
                this.content = ''
                this.userSelect()
              }
            })
          }
        })
      },
      handleSizeChange(val) {
        this.limit = val
        this.jifenSelect()
      },
      handleCurrentChange(val) {
        this.page = val
        this.jifenSelect()
      },
      handleSizeChange1(val) {
        this.limit = val
        this.userSelect()
      },
      handleCurrentChange1(val) {
        this.page = val
        this.userSelect()
      },
      handleSizeChange2(val) {
        this.limit = val
        this.withdrawSelect()
      },
      handleCurrentChange2(val) {
        this.page = val
        this.withdrawSelect()
      },
      handleSizeChange3(val) {
        this.limit = val
        this.walletSelect()
      },
      handleCurrentChange3(val) {
        this.page = val
        this.walletSelect()
      },
      handleSizeChange4(val) {
        this.limit = val
        this.rechargeSelect()
      },
      handleCurrentChange4(val) {
        this.page = val
        this.rechargeSelect()
      },
      handleSizeChange5(val) {
        this.limit = val
        this.sendSelect()
      },
      handleCurrentChange5(val) {
        this.page = val
        this.sendSelect()
      },
      handleSizeChange6(val) {
        this.limit = val
        this.takeSelect()
      },
      handleCurrentChange6(val) {
        this.page = val
        this.takeSelect()
      },
      handleSizeChange7(val) {
        this.limit = val
        this.youhuiquanSelect()
      },
      handleCurrentChange7(val) {
        this.page = val
        this.youhuiquanSelect()
      },
      handleSizeChange8(val) {
        this.limit = val
        this.dizhiSelect()
      },
      handleCurrentChange8(val) {
        this.page = val
        this.dizhiSelect()
      },
      handleSizeChange11(val) {
        this.limit = val
        this.dataSelect1()
      },
      handleCurrentChange11(val) {
        this.page = val
        this.dataSelect1()
      },
      handleSizeChange9(val) {
        this.limit = val
        this.InformationSelect1()
      },
      handleCurrentChange9(val) {
        this.page = val
        this.InformationSelect1()
      },
      handleSizeChange10(val) {
        this.limit = val
        this.taskData()
      },
      handleCurrentChange10(val) {
        this.page = val
        this.taskData()
      },
      handleSizeChange12(val) {
        this.limit1 = val
        this.neirongSelect(this.chatConversationId)
      },
      handleCurrentChange12(val) {
        this.page1 = val
        this.neirongSelect(this.chatConversationId)
      },
      handleSizeChange13(val) {
        this.limit = val
        this.liaotianSelectQs()
      },
      handleCurrentChange13(val) {
        this.page = val
        this.liaotianSelectQs()
      },
      handleSizeChange14(val) {
        this.limit = val
        this.liaotianSelect()
      },
      handleCurrentChange14(val) {
        this.page = val
        this.liaotianSelect()
      },
      timeDate2() {
        this.rechargeSelect()
      },
      // 可提现金额
      withdraw(id, val) {
        if (val == 0) {
          this.$message({
            message: '可提现金额为0元',
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.dataSelect()
            }
          })
        } else {
          this.$confirm(`确定要推送提现消息吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl(`user/notification/${id}`),
              method: 'post',
              data: this.$http.adornData({})
            }).then(({
              data
            }) => {
              this.$message({
                message: '推送成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            })
          }).catch(() => {})
        }

      },
      // 不可提现金额充值
      rechargenone(userId,index) {
        this.type = ''
        this.money = ''
        this.classIndex = index
        this.dialogFormVisible1 = true
      },
      StairNoticeTo1() {
        let userId = this.$route.query.userId
        if (this.type == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择修改类型',
            type: 'warning'
          })
          return
        }

        if (this.money == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入金额',
            type: 'warning'
          })
          return
        }
        if(this.classIndex==1){
          if (this.type == 2) {
            if (this.money > this.tablemoney.money) {
              this.$notify({
                title: '提示',
                duration: 1800,
                message: '最高金额为' + this.tablemoney.money,
                type: 'warning'
              })
              return
            }
          }
          var urls = 'admin/dataCentre/addUserMoney'
        }
        if(this.classIndex==2){
          var urls = 'admin/dataCentre/updateCashDeposit'
        }
        if(this.classIndex==3){
          var urls = 'admin/dataCentre/updateUserBalance'
        }


        this.$http({
          url: this.$http.adornUrl(urls+`?userId=` + userId + '&money=' + this.money +
            '&type=' + this.type),
          method: 'get',
          data: this.$http.adornData({})
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.money = ''
                this.dataSelect()
              }
            })
            this.dialogFormVisible1 = false
          } else {
            this.$message.error(data.msg)
          }

        })
      },
      // 积分修改
      updateJf() {
        this.type = ''
        this.jifen = ''
        this.dialogFormVisible3 = true
      },
      StairNoticeTo2() {
        let userId = this.$route.query.userId
        if (this.type == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择修改类型',
            type: 'warning'
          })
          return
        }

        if (this.jifen == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入积分',
            type: 'warning'
          })
          return
        }
        this.$http({
          url: this.$http.adornUrl(`admin/userintegral/addAdminIntegral?userId=` + userId + '&sum=' + this.jifen +
            '&type=' + this.type),
          method: 'post',
          data: this.$http.adornData({})
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.$message({
              message: '修改积分成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.jifen = ''
                this.dataSelect()
              }
            })
            this.dialogFormVisible3 = false
          } else {
            this.$message.error(data.msg)
          }

        })
      },
      // 更改状态
      stateChange(userId) {
        this.$confirm(`确定要更改用户状态吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`user/updateUserStatusByUserId?userId=${userId}`),
            method: 'get',
            data: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 获取数据列表
      dataSelect() {
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/selectUserById'),
          method: 'get',
          params: this.$http.adornParams({
            'userId': userId
          })
        }).then(({
          data
        }) => {
          if (data.code === 0) {
            let returnData = data.data
            this.tablenum = returnData
            this.tablemoney = returnData
            this.tableData = returnData
            this.phone = returnData.phone
            this.invitationCode = returnData.invitationCode
          }
        })
      },
      // 获取团队成员
      teamSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('user/selectInviteByUserIdLists'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.tableDatamin = returnData
        })
      },
      // 非直属
      feiSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('user/selectInvitationCodeByUserIdLists'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'invitationCode': this.invitationCode
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.feiDatamin = returnData
        })
      },
      // 获取用户/任务消息
      userSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('message/selectMessageByUserId'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId,
            'state': this.state
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.userData = returnData
        })
      },
      // 获取用户提现记录
      withdrawSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('/user/selectPayDetails'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId,
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.withdrawData = returnData
        })
      },
      // 获取钱包明细
      walletSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('Details/queryUserMoneyDetails'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.walletData = returnData
        })
      },
      // 积分明细
      jifenSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/selectSignIn'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.jifenData = returnData
        })
      },

      // 获取充值明细
      rechargeSelect() {
        if (this.endTime == '') {
          this.endTime = this.info.stockDate
        }
        if (this.startTime == '') {
          this.startTime = this.info2.stockDate2
        }
        let userId = this.$route.query.userId
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/paydetails/selectPayDetails'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'endTime': this.endTime,
            'startTime': this.startTime,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.tableDataLoading = false
            let returnData = data.data
            this.rechargeData = returnData
          }
          if (data.code == 500) {
            this.$message({
              message: data.msg,
              type: 'error',
              duration: 2500,
              onClose: () => {
                this.tableDataLoading = false
              }
            })
          }
        })
      },
      // 获取申诉
      sendSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/errandComplaint/findAllAppeal'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'indentNumber': this.indentNumber,
            'complaintState': this.complaintState,
            'illegalId': '',
            'userId': userId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.tableDataLoading = false
            let returnData = data.data
            this.sendData = returnData
          }
        })
      },
      // 获取派单
      takeSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/selectOrderDetails'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            // 'status': this.state,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          console.log(returnData)
          // returnData.list.forEach(res=> {
          //   res.goodsMessage = JSON.parse(res.goodsMessage)
          // })
          this.takeData = returnData
          for (var i in this.takeData.list) {
            this.takeData.list[i].goodsPriceZ = 0
            for (var j in this.takeData.list[i].orderGoodsList) {
              this.takeData.list[i].orderGoodsList[j].goodsPriceZ = (this.takeData.list[i].orderGoodsList[j]
                .goodsPrice * this.takeData.list[i].orderGoodsList[j].goodsNum)

              this.takeData.list[i].goodsPriceZ = this.takeData.list[i].goodsPriceZ + this.takeData.list[i]
                .orderGoodsList[j].goodsPriceZ
            }


          }
        })
      },
      // 我的优惠券
      youhuiquanSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/selectCouponByUserId'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId,
            'status': ''
          })
        }).then(({
          data
        }) => {
          console.log(data)
          this.tableDataLoading = false
          let returnData = data.data
          this.youhuiquanData = returnData
        })
      },
      // 我的地址
      dizhiSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/address/selectAddressList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          console.log(data)
          this.tableDataLoading = false
          let returnData = data.data
          this.dizhiData = returnData
        })
      },
      // 添加地址
      adddates(row) {
        this.dialogFormVisible2 = true
        this.userId = this.$route.query.userId
        this.titles = '添加地址'
        if (row != 0) {
          this.missions = row
          this.titles = '修改地址'
          this.address = row.address
          this.latitude = row.lat
          this.longitude = row.lng
          this.addressId = row.addressId
          this.addressDetail = row.addressDetail
          this.userName = row.userName
          this.userPhone = row.userPhone
          this.addressDefault = Number(row.addressDefault)
        } else {
          this.address = ''
          this.latitude = ''
          this.longitude = ''
          this.addressId = ''
          this.addressDetail = ''
          this.userName = ''
          this.userPhone = ''
          this.isDefault = 0
        }
        console.log(this.userId)

        this.getMyLocation();
        return
        // this.$router.push({
        //   path: '/addressAdd',
        //   query: {
        //     missions: row,
        //     userid: userId
        //   }
        // })
      },
      // 删除地址
      deleteStair(row) {
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`admin/address/deleteAddress/?addressId=${row.addressId}`),
            method: 'post',
            params: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dizhiSelect()
              }
            })
          })
        })
      },
      // 确定添加
      addmissionNoticeTo() {
        // this.select()
        if (this.address == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '地址详情不能为空',
            type: 'warning'
          });
          return
        }
        if (this.addressDefault === '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择地址是否默认',
            type: 'warning'
          });
          return
        }
        // toString()
        let urls = ''
        if (this.titles == '添加地址') {
          urls = 'admin/address/insertAddress'
        } else {
          urls = 'admin/address/updateAddress'
        }
        let that = this
        setTimeout(function() {
          that.$http({
            url: that.$http.adornUrl(urls),
            method: 'post',
            data: that.$http.adornData({
              'address': that.address,
              'addressDetail': that.addressDetail,
              'lat': that.latitude,
              'lng': that.longitude,
              'addressId': that.addressId,
              'addressDefault': that.addressDefault,
              'userId': that.userId,
              'userName': that.userName,
              'userPhone': that.userPhone
            })
          }).then(({
            data
          }) => {
            console.log('提交结果', data)
            that.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                that.dialogFormVisible2 = false
                that.address = ''
                that.isDefault = 0
                that.storeAddre = '请选择城市'
                that.dizhiSelect()
              }
            })

          })
        }, 1000)

      },
      //定位获得当前位置信息
      getMyLocation() {

        var geolocation = new qq.maps.Geolocation("ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75", "来点小收入");
        geolocation.getIpLocation(this.showPosition, this.showErr);
        //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
      },
      showPosition(position) {
        console.log(position);
        // this.latitude = position.lat;
        // this.longitude = position.lng;
        // this.city = position.city;

        this.setMap();

        // this.setMap1();

      },
      showErr(e) {
        console.log("定位失败", e);
        this.getMyLocation(); //定位失败再请求定位，测试使用
      },
      //位置信息在地图上展示
      setMap() {
        //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        //设置地图中心点
        var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
        //定义工厂模式函数
        var myOptions = {
          zoom: 13, //设置地图缩放级别
          center: myLatlng, //设置中心点样式
          mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
        }
        // //获取dom元素添加地图信息
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);
        //给地图添加点击事件

        //给定位的位置添加图片标注
        var marker = new qq.maps.Marker({
          position: myLatlng,
          map: map
        });
        // `````````````
        var that = this;
        if (that.longitude == '') {
          var center = new qq.maps.LatLng(34.34281541842994, 108.93970884382725);
        } else {
          var center = new qq.maps.LatLng(that.latitude, that.longitude);
        }
        var map = new qq.maps.Map(document.getElementById("container"), {
          center: center,
          zoom: 13
        });
        var marker = new qq.maps.Marker({
          position: center,
          map: map
        });
        var latlngBounds = new qq.maps.LatLngBounds();
        qq.maps.event.addListener(map, "click", function(event) {
          console.log(event, qq.maps);
          that.longitude = event.latLng.getLng(); // 经度
          that.latitude = event.latLng.getLat(); // 纬度
          jsonp('https://apis.map.qq.com/ws/geocoder/v1/?location=' + event.latLng.getLat() + ',' + event.latLng
            .getLng() + '&key=ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75&get_poi=1&output=jsonp', {
              myCustomUrlParam: 'veryNice'
            }).then(response => {
            console.log('response', response)
            that.address = response.result.address
            that.addressDetail = response.result.formatted_addresses.recommend

          }).catch(error => {
            // handle error
          }).then(() => {
            // always executed
          });
          if (markersArray) {
            for (let i in markersArray) {
              markersArray[i].setMap(null);
            }
          }
          var marker = new qq.maps.Marker({
            map: map,
            position: event.latLng
          });
          markersArray.push(marker);

        });
        geocoder = new qq.maps.Geocoder({
          complete: function(result) {
            console.log(result);
            that.longitude = result.detail.location.lng;
            that.latitude = result.detail.location.lat;
            map.setCenter(result.detail.location);
            var marker = new qq.maps.Marker({
              map: map,
              position: result.detail.location
            });
            markersArray.push(marker);
          }
        });

      },
      //位置信息在地图上展示
      setMap1() {
        //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        //设置地图中心点
        var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
        //定义工厂模式函数
        var myOptions = {
          zoom: 13, //设置地图缩放级别
          center: myLatlng, //设置中心点样式
          mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
        }
        // //获取dom元素添加地图信息
        var maps = new qq.maps.Map(document.getElementById("aaa"), myOptions);
        //给地图添加点击事件

        //给定位的位置添加图片标注
        var marker3 = new qq.maps.Marker({
          position: myLatlng,
          map: maps
        });
        // `````````````
        var that = this;
        if (that.longitude == '') {
          var center1 = new qq.maps.LatLng(34.34281541842994, 108.93970884382725);
        } else {
          var center1 = new qq.maps.LatLng(that.latitude, that.longitude);
        }

        var maps = new qq.maps.Map(document.getElementById("aaa"), {
          center: center1,
          zoom: 13
        });
        var marker4 = new qq.maps.Marker({
          position: center1,
          map: maps
        });
        var latlngBounds = new qq.maps.LatLngBounds();
        qq.maps.event.addListener(maps, "click", function(event) {
          console.log(event, qq.maps);
          that.longitude = event.latLng.getLng(); // 经度
          that.latitude = event.latLng.getLat(); // 纬度
          jsonp('https://apis.map.qq.com/ws/geocoder/v1/?location=' + event.latLng.getLat() + ',' + event.latLng
            .getLng() + '&key=ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75&get_poi=1&output=jsonp', {
              myCustomUrlParam: 'veryNice'
            }).then(response => {
            console.log('response', response)
            that.address = response.result.formatted_addresses.recommend

          }).catch(error => {
            // handle error
          }).then(() => {
            // always executed
          });
          if (markersArray) {
            for (let i in markersArray) {
              markersArray[i].setMap(null);
            }
          }
          var marker1 = new qq.maps.Marker({
            map: maps,
            position: event.latLng
          });
          markersArray.push(marker1);

        });
        geocoder = new qq.maps.Geocoder({
          complete: function(result) {
            console.log(result);
            that.longitude = result.detail.location.lng;
            that.latitude = result.detail.location.lat;
            map.setCenter(result.detail.location);
            var marker2 = new qq.maps.Marker({
              map: maps,
              position: result.detail.location
            });
            markersArray.push(marker2);
          }
        });

      },
      // 地图定位
      select() {
        console.log(this.address)
        let that = this
        jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address==' + that.address +
          '&key=ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75&get_poi=1&output=jsonp', {
            myCustomUrlParam: 'veryNice'
          }).then(response => {
          // handle success
          console.log('response`````', response)
          that.longitude = response.result.location.lng; // 经度
          that.latitude = response.result.location.lat; // 纬度
          that.address = response.result.title
          that.setMap()
          that.setMap1()
        }).catch(error => {
          // handle error
        }).then(() => {
          // always executed
        });
      },
      // 获取数据列表
      dataSelect1() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/selectCashDeposit'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'type': '',
            'phone': '',
            'userId': userId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.baozhengjinData = returnData
        })
      },
      // 我的发布信息数据
      InformationSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/findUserAddIndent'),
          method: 'get',
          params: this.$http.adornParams({
            'userId': userId,
            'page': this.page,
            'limit': this.limit,
            // 'search': this.search,
            // 'classify':this.classifyIds,
            // 'status':this.statusId,
            // 'phone':this.myPhone
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          for (var i in data.data.list) {
            if (data.data.list[i].img) {
              data.data.list[i].imgs = data.data.list[i].img.split(',')
            }

          }
          let returnData = data.data
          this.fadanData = returnData


        })
      },
      // 我的接单
      InformationSelect1() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('admin/dataCentre/findUserReceivingIndent'),
          method: 'get',
          params: this.$http.adornParams({
            'userId': userId,
            'page': this.page,
            'limit': this.limit,
            // 'search': this.search,
            // 'classify':this.classifyIds,
            // 'status':this.statusId,
            // 'phone':this.myPhone
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          for (var i in data.data.records) {
            if (data.data.records[i].img) {
              data.data.records[i].imgs = data.data.records[i].img.split(',')
            }

          }
          let returnData = data.data
          this.userDataJ = returnData


        })
      },
      // 查询资源列表
      select() {
        this.page = 1
        this.limit = 10
        this.sendSelect()
      },
      // 重置资源列表
      cleans() {
        this.indentNumber = ''
        this.complaintState = ''
        this.page = 1
        this.sendSelect()
      },
      // select选择事件
      animeDat(state) {
        this.page = 1
        this.complaintState = state
        console.log(state)
        this.sendSelect()
      },
      // 订单分析选择日期
      animeOrder() {
        console.log('info', this.info)
        this.taskData()
        // this.colonel()
      },
      // 订单分析年月日
      orderfenxi(value) {
        this.page = 1
        let vanumber = value
        this.flag = value
        this.taskData()

      },
      //任务分析
      taskData() {
        let userId = this.$route.query.userId
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/tbindent/findIncome'),
          method: 'get',
          params: this.$http.adornParams({
            'date': this.info.stockDate,
            'dateType': this.flag,
            'page': this.page,
            'limit': this.limit,
            'userId': userId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.tableData2 = returnData;
          this.tableData3 = returnData.pageUtils;
        })
      },
      // 我的聊天会话
      liaotianSelect() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('shop/ordersChat/selectOrdersChatPageShop'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'userId': userId,
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.liaotianData = returnData;
        })
      },
      // 骑手聊天会话
      liaotianSelectQs() {
        this.tableDataLoading = true
        let userId = this.$route.query.userId
        this.$http({
          url: this.$http.adornUrl('shop/ordersChat/selectOrdersChatPageShop'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'riderId': userId,
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.liaotianData = returnData;
        })
      },
      // 聊天内容
      complainDetails(row) {
        this.chatConversationId = row.ordersId
        this.neirongSelect(this.chatConversationId)
        this.dialogFormVisible4 = true
      },
      // 获取聊天内容列表
      neirongSelect(chatConversationId) {
        this.tableDataLoading1 = true
        this.$http({
          url: this.$http.adornUrl('shop/ordersChat/selectGameChatDetails'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page1,
            'limit': this.limit1,
            'ordersId': this.chatConversationId,
            'content': this.content
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading1 = false
          let returnData = data.data;
          this.huihuaData = returnData
        })
      },
    },
    mounted() {
      this.dataSelect()
    },
    watch: {
      '$route': 'dataSelect'
    }
  }
</script>

<style scoped="scoped">
  .detailtabel h2 {
    margin-top: 0;
  }

  .detailtabel .table_main table {
    width: 100%;
  }

  .detailtabel .table_main {
    border: 1px solid #e8e8e8;
  }

  .detailtabel table tr {
    border-bottom: 1px solid #e8e8e8;
  }

  .detailtabel table tr th {
    background-color: #fafafa;
    padding: 16px 24px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
  }

  .detailtabel table tr td {
    padding: 16px 24px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
  }

  .detailtabel table th {
    color: rgba(0, 0, 0, .85);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
  }

  .border-rt {
    border-right: none !important;
  }

  .border-bt {
    border-bottom: none !important;
  }

  .box {
    padding: 44px;
    border: 1px solid #eee;
    margin: 15px 10px;
  }

  .box_num {
    font-size: 14px;
    color: #66b1ff;
  }

  .box_num .box_color {
    color: #333;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .box_num div span {
    font-size: 20px;
    margin-left: 5px;
  }

  .text_color {
    color: #4f9dec;
  }

  .text_color span {
    margin-right: 5px;
  }
</style>