退款功能

src/components/Setting.vue

@@ -1,224 +1,487 @@
 <template>
   <div class="setting" v-if="info">
     <template v-if="!settingFlag">
-        <div class="setting-top">
-            <div class="avator-box">
-            <el-image
-                :src="info.sys_user&&info.sys_user.image_url?info.sys_user.image_url:info.image_url?info.image_url:require('../assets/avatar.png')"
-                fit="cover" style="width:96px;height:96px;">
-            </el-image>
-            <a class="img-crop" v-if="page!=='personCheck'">
-                <upload :datafileList="infoForm.cover_image_list" :filleNumber="99" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" />
-            </a>
-            </div>
-            <div class="center">
-                <div class="info-items">
-                    <label>用户名：</label>
-                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.user_name:info.user_name}}</span>
-                </div>
-                <div class="info-items">
-                    <label>手机号码：</label>
-                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}</span>
-                </div>
-                <div class="info-items">
-                    <label>账号ID：</label>
-                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.id:info.id}}</span>
-                </div>
-                <div class="info-items">
-                    <label>邮箱：</label>
-                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.email?info.sys_user.email:info.email?info.email:'-'}}</span>
-                </div>
-                <div class="info-items">
-                    <label>{{page==='editPerson'||page==='personal'?'创建时间：':'注册时间：'}}</label>
-                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.create_time:info.register_time}}</span>
-                </div>
-                <div class="info-items" v-if="page==='editOrgPerson'||page==='personCheck'">
-                    <label>机构：</label>
-                    <span>{{info.org_name}}</span>
-                </div>
-            </div>
+      <div class="setting-top">
+        <div class="avator-box">
+          <el-image
+            :src="
+              info.sys_user && info.sys_user.image_url
+                ? info.sys_user.image_url
+                : info.image_url
+                ? info.image_url
+                : require('../assets/avatar.png')
+            "
+            fit="cover"
+            style="width: 96px; height: 96px"
+          >
+          </el-image>
+          <a class="img-crop" v-if="page !== 'personCheck'">
+            <upload
+              :datafileList="infoForm.cover_image_list"
+              :filleNumber="99"
+              :changeFillId="handleAvatarSuccess"
+              :fileName="'cover'"
+              :showList="true"
+              uploadType="image"
+            />
+          </a>
         </div>
-        <div class="setting-bottom">
-            <div class="tabs-box">
-                <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">基本信息</a>
-                <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)" v-if="page!=='personCheck'">安全设置</a>
-                <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)" v-if="page!=='personCheck'">{{page==='editPerson'||page==='personal'?'我的权限':'权限设置'}}</a>
-            </div>
-            <template v-if="tabsIndex===0">
-                <el-form :model="infoForm" :rules="rules" ref="ruleForm" label-width="150px" class="setting-form">
-                    <el-form-item label="用户名" prop="name">
-                        <el-input v-model="infoForm.name" disabled placeholder="请输入用户名" maxlength="20"></el-input>
-                    </el-form-item>
-                    <el-form-item label="真实姓名" prop="realName">
-                        <el-input v-model="infoForm.realName" placeholder="请输入真实姓名" @blur="handleTrim('infoForm','realName')" maxlength="20"></el-input>
-                    </el-form-item>
-                    <el-form-item label="性别" prop="sex">
-                        <el-radio-group v-model="infoForm.sex">
-                            <el-radio :label="1">男</el-radio>
-                            <el-radio :label="0">女</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="所在省市" prop="selectedOptions">
-                        <el-cascader
-                            size="medium"
-                            :options="$provinceCityList"
-                            v-model="infoForm.selectedOptions"
-                            @change="handleCity">
-                        </el-cascader>
-                    </el-form-item>
-                    <el-form-item label="备注" prop="desc">
-                        <el-input type="textarea" v-model="infoForm.desc" placeholder="请输入备注" maxlength="100" :rows="4" show-word-limit @blur="handleTrim('infoForm','desc')"></el-input>
-                    </el-form-item>
-                    <el-form-item v-if="page!=='personCheck'">
-                        <el-button type="primary" @click="onSubmit('ruleForm')" size="small" :loading="loading">保存</el-button>
-                        <el-button @click="onCancel('ruleForm')" size="small">取消</el-button>
-                    </el-form-item>
-                    <el-form-item v-else>
-                        <el-button type="primary" @click="handleAudit('up')" size="small" :loading="loading">通过</el-button>
-                        <el-button @click="handleAudit('down')" size="small">拒绝</el-button>
-                    </el-form-item>
-                </el-form>
-            </template>
-            <template v-if="tabsIndex===1">
-                <div class="safe-items">
-                    <label>登录密码</label>
-                    <div class="safe-items-right">
-                        <p class="hasContent">
-                            已设置。密码至少6位字符，支持数字和字母，且必须同时包含数字和大小写字母。
-                        </p>
-                        <!-- <p v-else class="noContent">
+        <div class="center">
+          <div class="info-items">
+            <label>用户名：</label>
+            <span>{{
+              page === "editPerson" || page === "personal"
+                ? info.sys_user.user_name
+                : info.user_name
+            }}</span>
+          </div>
+          <div class="info-items">
+            <label>手机号码：</label>
+            <span>{{
+              (page === "editPerson" || page === "personal") &&
+              info.sys_user.phone
+                ? info.sys_user.phone.substring(0, 3) +
+                  "******" +
+                  info.sys_user.phone.substring(9, 11)
+                : info.phone
+                ? info.phone.substring(0, 3) +
+                  "******" +
+                  info.phone.substring(9, 11)
+                : "-"
+            }}</span>
+          </div>
+          <div class="info-items">
+            <label>账号ID：</label>
+            <span>{{
+              page === "editPerson" || page === "personal"
+                ? info.sys_user.id
+                : info.id
+            }}</span>
+          </div>
+          <div class="info-items">
+            <label>邮箱：</label>
+            <span>{{
+              (page === "editPerson" || page === "personal") &&
+              info.sys_user.email
+                ? info.sys_user.email
+                : info.email
+                ? info.email
+                : "-"
+            }}</span>
+          </div>
+          <div class="info-items">
+            <label>{{
+              page === "editPerson" || page === "personal"
+                ? "创建时间："
+                : "注册时间："
+            }}</label>
+            <span>{{
+              page === "editPerson" || page === "personal"
+                ? info.sys_user.create_time
+                : info.register_time
+            }}</span>
+          </div>
+          <div
+            class="info-items"
+            v-if="page === 'editOrgPerson' || page === 'personCheck'"
+          >
+            <label>机构：</label>
+            <span>{{ info.org_name }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="setting-bottom">
+        <div class="tabs-box">
+          <a
+            :class="[tabsIndex === 0 ? 'active' : '']"
+            @click="handleChangeTabs(0)"
+            >基本信息</a
+          >
+          <a
+            :class="[tabsIndex === 1 ? 'active' : '']"
+            @click="handleChangeTabs(1)"
+            v-if="page !== 'personCheck'"
+            >安全设置</a
+          >
+          <a
+            :class="[tabsIndex === 2 ? 'active' : '']"
+            @click="handleChangeTabs(2)"
+            v-if="page !== 'personCheck'"
+            >{{
+              page === "editPerson" || page === "personal"
+                ? "我的权限"
+                : "权限设置"
+            }}</a
+          >
+        </div>
+        <template v-if="tabsIndex === 0">
+          <el-form
+            :model="infoForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="150px"
+            class="setting-form"
+          >
+            <el-form-item label="用户名" prop="name">
+              <el-input
+                v-model="infoForm.name"
+                disabled
+                placeholder="请输入用户名"
+                maxlength="20"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="真实姓名" prop="realName">
+              <el-input
+                v-model="infoForm.realName"
+                placeholder="请输入真实姓名"
+                @blur="handleTrim('infoForm', 'realName')"
+                maxlength="20"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="性别" prop="sex">
+              <el-radio-group v-model="infoForm.sex">
+                <el-radio :label="1">男</el-radio>
+                <el-radio :label="0">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="所在省市" prop="selectedOptions">
+              <el-cascader
+                size="medium"
+                :options="$provinceCityList"
+                v-model="infoForm.selectedOptions"
+                @change="handleCity"
+              >
+              </el-cascader>
+            </el-form-item>
+            <el-form-item label="备注" prop="desc">
+              <el-input
+                type="textarea"
+                v-model="infoForm.desc"
+                placeholder="请输入备注"
+                maxlength="100"
+                :rows="4"
+                show-word-limit
+                @blur="handleTrim('infoForm', 'desc')"
+              ></el-input>
+            </el-form-item>
+            <el-form-item v-if="page !== 'personCheck'">
+              <el-button
+                type="primary"
+                @click="onSubmit('ruleForm')"
+                size="small"
+                :loading="loading"
+                >保存</el-button
+              >
+              <el-button @click="onCancel('ruleForm')" size="small"
+                >取消</el-button
+              >
+            </el-form-item>
+            <el-form-item v-else>
+              <el-button
+                type="primary"
+                @click="handleAudit('up')"
+                size="small"
+                :loading="loading"
+                >通过</el-button
+              >
+              <el-button @click="handleAudit('down')" size="small"
+                >拒绝</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </template>
+        <template v-if="tabsIndex === 1">
+          <div class="safe-items">
+            <label>登录密码</label>
+            <div class="safe-items-right">
+              <p class="hasContent">
+                已设置。密码至少6位字符，支持数字和字母，且必须同时包含数字和大小写字母。
+              </p>
+              <!-- <p v-else class="noContent">
                         您暂未设置密码，密码可以有效的保护账号的安全。 
                         </p> -->
-                        <a @click="handleSetting('passwordFlag')">{{'修改'}}</a>
-                    </div>
-                </div>
-                <div class="safe-items">
-                    <label>绑定手机</label>
-                    <div class="safe-items-right">
-                        <p v-if="info.phone||info.sys_user&&info.sys_user.phone" class="hasContent">
-                            已绑定： {{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}
-                        </p>
-                        <p v-else class="noContent">
-                        您暂未绑定手机，绑定手机可以有效的保护账号的安全。 
-                        </p>
-                        <a @click="handleSetting('phoneFlag')">{{info.phone||info.sys_user&&info.sys_user.phone?'修改':'设置'}}</a>
-                    </div>
-                </div>
-                <div class="safe-items">
-                    <label>绑定邮箱</label>
-                    <div class="safe-items-right">
-                        <p v-if="info.email||info.sys_user&&info.sys_user.email" class="hasContent">
-                            已绑定： {{info.email||info.sys_user.email}}
-                        </p>
-                        <p v-else class="noContent">
-                        您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
-                        </p>
-                        <a @click="handleSetting('emailFlag')">{{info.email||info.sys_user&&info.sys_user.email?'修改':'设置'}}</a>
-                    </div>
-                </div>
-            </template>
-            <template v-if="tabsIndex===2&&(page==='editPerson'||page==='personal')">
-                <table class="step-table">
-                        <tr>
-                            <td rowspan="2" class="step-table-header">管理权限</td>
-                            <td>系统用户</td>
-                            <td>机构管理</td>
-                        </tr>
-                        <tr>
-                            <td><el-checkbox v-model="manageAuth" :label="10001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td><el-checkbox v-model="manageAuth" :label="10002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                        </tr>
-                    </table>
-                    <table class="step-table">
-                        <tr>
-                            <td rowspan="2" class="step-table-header">内容权限</td>
-                            <td class="td1">报纸管理</td>
-                            <td class="td1">画刊管理</td>
-                            <td class="td1">专辑管理</td>
-                            <td class="td1">评测管理</td>
-                            <td class="td1">练习册管理</td>
-                            <td class="td1">课程管理</td>
-                            <td class="td1">广告管理</td>
-                        </tr>
-                        <tr>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20003" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20004" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20005" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20006" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20007" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                        </tr>
-                    </table>
-                    <table class="step-table">
-                        <tr>
-                            <td rowspan="2" class="step-table-header">兑换码权限</td>
-                            <td>生成兑换码</td>
-                            <td>查看兑换码使用情况</td>
-                        </tr>
-                        <tr>
-                            <td><el-checkbox v-model="manageAuth" :label="30001"><br/></el-checkbox></td>
-                            <td>
-                                <el-radio-group v-model="codeAuth.viewCode" :disabled="page==='personal'?true:false">
-                                    <el-radio :label="1">全部</el-radio>
-                                    <el-radio :label="0">自己生成的</el-radio>
-                                </el-radio-group>
-                            </td>
-                        </tr>
-                    </table>
-                    <table class="step-table">
-                        <tr>
-                            <td rowspan="2" class="step-table-header">财务权限</td>
-                            <td>查看数据</td>
-                            <td>导出数据</td>
-                            <td>授权地区</td>
-                        </tr>
-                        <tr>
-                            <td><el-checkbox v-model="manageAuth" :label="40001" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td><el-checkbox v-model="manageAuth" :label="40002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
-                            <td>
-                                <el-cascader
-                                    :disabled="page==='personal'?true:false"
-                                    class="step-cascader"
-                                    size="medium"
-                                    :props="props"
-                                    collapse-tags
-                                    clearable
-                                    :options="$provinceCityListAll"
-                                    v-model="financeAuth.selectedOptions"
-                                    @change="handleCity">
-                                </el-cascader>
-                            </td>
-                        </tr>
-                    </table>
-                    <template v-if="page==='editPerson'">
-                        <el-button type="primary" @click="onSubmitAuth()" size="small" :loading="loading">保存</el-button>
-                        <el-button @click="onCancelAuth()" size="small">取消</el-button>
-                    </template>
-            </template>
-            <template v-if="tabsIndex===2&&page==='editOrgPerson'">
-                <el-form :model="managerForm" ref="managerForm" label-width="150px" class="setting-form">
-                    <el-form-item label="机构管理员" prop="is_manager">
-                        <el-radio-group v-model="managerForm.is_manager">
-                            <el-radio label="true">是</el-radio>
-                            <el-radio label="false">否</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" @click="onSubmitManager('managerForm')" size="small" :loading="loading">保存</el-button>
-                        <el-button @click="onCancel('managerForm')" size="small">取消</el-button>
-                    </el-form-item>
-                </el-form>
-            </template>
-        </div>
+              <a @click="handleSetting('passwordFlag')">{{ "修改" }}</a>
+            </div>
+          </div>
+          <div class="safe-items">
+            <label>绑定手机</label>
+            <div class="safe-items-right">
+              <p
+                v-if="info.phone || (info.sys_user && info.sys_user.phone)"
+                class="hasContent"
+              >
+                已绑定：
+                {{
+                  (page === "editPerson" || page === "personal") &&
+                  info.sys_user.phone
+                    ? info.sys_user.phone.substring(0, 3) +
+                      "******" +
+                      info.sys_user.phone.substring(9, 11)
+                    : info.phone
+                    ? info.phone.substring(0, 3) +
+                      "******" +
+                      info.phone.substring(9, 11)
+                    : "-"
+                }}
+              </p>
+              <p v-else class="noContent">
+                您暂未绑定手机，绑定手机可以有效的保护账号的安全。
+              </p>
+              <a @click="handleSetting('phoneFlag')">{{
+                info.phone || (info.sys_user && info.sys_user.phone)
+                  ? "修改"
+                  : "设置"
+              }}</a>
+            </div>
+          </div>
+          <div class="safe-items">
+            <label>绑定邮箱</label>
+            <div class="safe-items-right">
+              <p
+                v-if="info.email || (info.sys_user && info.sys_user.email)"
+                class="hasContent"
+              >
+                已绑定： {{ info.email || info.sys_user.email }}
+              </p>
+              <p v-else class="noContent">
+                您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
+              </p>
+              <a @click="handleSetting('emailFlag')">{{
+                info.email || (info.sys_user && info.sys_user.email)
+                  ? "修改"
+                  : "设置"
+              }}</a>
+            </div>
+          </div>
+        </template>
+        <template
+          v-if="
+            tabsIndex === 2 && (page === 'editPerson' || page === 'personal')
+          "
+        >
+          <table class="step-table">
+            <tr>
+              <td rowspan="2" class="step-table-header">管理权限</td>
+              <td>系统用户</td>
+              <td>机构管理</td>
+            </tr>
+            <tr>
+              <td>
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="10001"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td>
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="10002"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+            </tr>
+          </table>
+          <table class="step-table">
+            <tr>
+              <td rowspan="2" class="step-table-header">内容权限</td>
+              <td class="td1">报纸管理</td>
+              <td class="td1">画刊管理</td>
+              <td class="td1">专辑管理</td>
+              <td class="td1">评测管理</td>
+              <td class="td1">练习册管理</td>
+              <td class="td1">课程管理</td>
+              <td class="td1">广告管理</td>
+            </tr>
+            <tr>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20001"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20002"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20003"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20004"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20005"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20006"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="20007"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+            </tr>
+          </table>
+          <table class="step-table">
+            <tr>
+              <td rowspan="2" class="step-table-header">兑换码权限</td>
+              <td>生成兑换码</td>
+              <td>查看兑换码使用情况</td>
+            </tr>
+            <tr>
+              <td>
+                <el-checkbox v-model="manageAuth" :label="30001"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td>
+                <el-radio-group
+                  v-model="codeAuth.viewCode"
+                  :disabled="page === 'personal' ? true : false"
+                >
+                  <el-radio :label="1">全部</el-radio>
+                  <el-radio :label="0">自己生成的</el-radio>
+                </el-radio-group>
+              </td>
+            </tr>
+          </table>
+          <table class="step-table">
+            <tr>
+              <td rowspan="2" class="step-table-header">财务权限</td>
+              <td class="td1">查看数据</td>
+              <td class="td1">导出数据</td>
+              <td>授权地区</td>
+              <td class="td1">退款管理</td>
+            </tr>
+            <tr>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="40001"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="40002"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+              <td>
+                <el-cascader
+                  :disabled="page === 'personal' ? true : false"
+                  class="step-cascader"
+                  size="medium"
+                  :props="props"
+                  collapse-tags
+                  clearable
+                  :options="$provinceCityListAll"
+                  v-model="financeAuth.selectedOptions"
+                  @change="handleCity"
+                >
+                </el-cascader>
+              </td>
+              <td class="td1">
+                <el-checkbox
+                  v-model="manageAuth"
+                  :label="40003"
+                  :disabled="page === 'personal' ? true : false"
+                  ><br
+                /></el-checkbox>
+              </td>
+            </tr>
+          </table>
+          <template v-if="page === 'editPerson'">
+            <el-button
+              type="primary"
+              @click="onSubmitAuth()"
+              size="small"
+              :loading="loading"
+              >保存</el-button
+            >
+            <el-button @click="onCancelAuth()" size="small">取消</el-button>
+          </template>
+        </template>
+        <template v-if="tabsIndex === 2 && page === 'editOrgPerson'">
+          <el-form
+            :model="managerForm"
+            ref="managerForm"
+            label-width="150px"
+            class="setting-form"
+          >
+            <el-form-item label="机构管理员" prop="is_manager">
+              <el-radio-group v-model="managerForm.is_manager">
+                <el-radio label="true">是</el-radio>
+                <el-radio label="false">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="onSubmitManager('managerForm')"
+                size="small"
+                :loading="loading"
+                >保存</el-button
+              >
+              <el-button @click="onCancel('managerForm')" size="small"
+                >取消</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </template>
+      </div>
     </template>
-    <div class="setting-iframe" v-if="settingFlag&&passwordFlag">
-        <p class="title">
-            <i class="el-icon-arrow-left" @click="handleSetting('passwordFlag')"></i>
-            修改登录密码
-        </p>
-        <el-form :model="passwordForm" :rules="rulesPassword" ref="passwordForm" label-width="100px" class="passwordForm">
-            <!-- <el-form-item label="原始密码" prop="oldPwd">
+    <div class="setting-iframe" v-if="settingFlag && passwordFlag">
+      <p class="title">
+        <i
+          class="el-icon-arrow-left"
+          @click="handleSetting('passwordFlag')"
+        ></i>
+        修改登录密码
+      </p>
+      <el-form
+        :model="passwordForm"
+        :rules="rulesPassword"
+        ref="passwordForm"
+        label-width="100px"
+        class="passwordForm"
+      >
+        <!-- <el-form-item label="原始密码" prop="oldPwd">
                 <el-input v-model="passwordForm.oldPwd" :type="oldPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
                     <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('oldPwdFlag')" v-if="oldPwdFlag"></i>
                     <i slot="suffix" class="show-icon" @click="changeIcon('oldPwdFlag')" v-else>
@@ -226,70 +489,170 @@
                     </i>
                 </el-input>
             </el-form-item> -->
-            <el-form-item label="修改密码" prop="newPwd">
-                <el-input v-model="passwordForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('passwordForm','newPwd')" maxlength="20">
-                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
-                    <i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
-                        <svg-icon icon-class="eye-invisible"></svg-icon>
-                    </i>
-                </el-input>
-                <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
-            </el-form-item>
-            <el-form-item label="再次输入" prop="confirmPwd">
-                <el-input v-model="passwordForm.confirmPwd" :type="comfirmPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('passwordForm','confirmPwd')" maxlength="20">
-                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('comfirmPwdFlag')" v-if="comfirmPwdFlag"></i>
-                    <i slot="suffix" class="show-icon" @click="changeIcon('comfirmPwdFlag')" v-else>
-                        <svg-icon icon-class="eye-invisible"></svg-icon>
-                    </i>
-                </el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmitPassword('passwordForm')" size="small" :loading="loading">保存</el-button>
-                <el-button @click="onCancel('passwordForm')" size="small">取消</el-button>
-            </el-form-item>
-        </el-form>
+        <el-form-item label="修改密码" prop="newPwd">
+          <el-input
+            v-model="passwordForm.newPwd"
+            :type="newPwdFlag ? 'text' : 'password'"
+            autocomplete="off"
+            placeholder="请输入密码"
+            @blur="handleTrim('passwordForm', 'newPwd')"
+            maxlength="20"
+          >
+            <i
+              slot="suffix"
+              class="el-icon-view show-icon"
+              @click="changeIcon('newPwdFlag')"
+              v-if="newPwdFlag"
+            ></i>
+            <i
+              slot="suffix"
+              class="show-icon"
+              @click="changeIcon('newPwdFlag')"
+              v-else
+            >
+              <svg-icon icon-class="eye-invisible"></svg-icon>
+            </i>
+          </el-input>
+          <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
+        </el-form-item>
+        <el-form-item label="再次输入" prop="confirmPwd">
+          <el-input
+            v-model="passwordForm.confirmPwd"
+            :type="comfirmPwdFlag ? 'text' : 'password'"
+            autocomplete="off"
+            placeholder="请输入密码"
+            @blur="handleTrim('passwordForm', 'confirmPwd')"
+            maxlength="20"
+          >
+            <i
+              slot="suffix"
+              class="el-icon-view show-icon"
+              @click="changeIcon('comfirmPwdFlag')"
+              v-if="comfirmPwdFlag"
+            ></i>
+            <i
+              slot="suffix"
+              class="show-icon"
+              @click="changeIcon('comfirmPwdFlag')"
+              v-else
+            >
+              <svg-icon icon-class="eye-invisible"></svg-icon>
+            </i>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="onSubmitPassword('passwordForm')"
+            size="small"
+            :loading="loading"
+            >保存</el-button
+          >
+          <el-button @click="onCancel('passwordForm')" size="small"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
     </div>
-    <div class="setting-iframe" v-if="settingFlag&&phoneFlag">
-        <p class="title">
-            <i class="el-icon-arrow-left" @click="handleSetting('phoneFlag')"></i>
-            修改绑定手机
-        </p>
-        <el-form :model="phoneForm" :rules="rulesPhone" ref="phoneForm" label-width="100px" class="phoneForm">
-            <el-form-item label="原手机号" prop="oldPhone" v-if="phoneForm.oldPhone">
-                <el-input v-model="phoneForm.oldPhone" autocomplete="off" :disabled="phoneForm.oldPhone?true:false" placeholder="请输入完整手机号" @blur="handleTrim('phoneForm','oldPhone')" maxlength="20">
-                    <template slot="prepend">+86</template>
-                </el-input>
-            </el-form-item>
-            <el-form-item label="新手机号" prop="newPhone">
-                <el-input v-model="phoneForm.newPhone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('phoneForm','newPhone')" maxlength="20">
-                    <template slot="prepend">+86</template>
-                </el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmitPhone('phoneForm')" size="small" :loading="loading">保存</el-button>
-                <el-button @click="onCancel('phoneForm')" size="small">取消</el-button>
-            </el-form-item>
-        </el-form>
+    <div class="setting-iframe" v-if="settingFlag && phoneFlag">
+      <p class="title">
+        <i class="el-icon-arrow-left" @click="handleSetting('phoneFlag')"></i>
+        修改绑定手机
+      </p>
+      <el-form
+        :model="phoneForm"
+        :rules="rulesPhone"
+        ref="phoneForm"
+        label-width="100px"
+        class="phoneForm"
+      >
+        <el-form-item
+          label="原手机号"
+          prop="oldPhone"
+          v-if="phoneForm.oldPhone"
+        >
+          <el-input
+            v-model="phoneForm.oldPhone"
+            autocomplete="off"
+            :disabled="phoneForm.oldPhone ? true : false"
+            placeholder="请输入完整手机号"
+            @blur="handleTrim('phoneForm', 'oldPhone')"
+            maxlength="20"
+          >
+            <template slot="prepend">+86</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新手机号" prop="newPhone">
+          <el-input
+            v-model="phoneForm.newPhone"
+            autocomplete="off"
+            placeholder="请输入完整手机号"
+            @blur="handleTrim('phoneForm', 'newPhone')"
+            maxlength="20"
+          >
+            <template slot="prepend">+86</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="onSubmitPhone('phoneForm')"
+            size="small"
+            :loading="loading"
+            >保存</el-button
+          >
+          <el-button @click="onCancel('phoneForm')" size="small"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
     </div>
-    <div class="setting-iframe" v-if="settingFlag&&emailFlag">
-        <p class="title">
-            <i class="el-icon-arrow-left" @click="handleSetting('emailFlag')"></i>
-            修改安全邮箱
-        </p>
-        <el-form :model="emailForm" :rules="rulesEmail" ref="emailForm" label-width="100px" class="emailForm">
-            <el-form-item label="原邮箱" prop="email" v-if="emailForm.email">
-                <el-input v-model="emailForm.email" autocomplete="off" :disabled="emailForm.email?true:false" placeholder="请输入邮箱地址" @blur="handleTrim('emailForm','email')" maxlength="100">
-                </el-input>
-            </el-form-item>
-            <el-form-item label="新邮箱" prop="newEmail">
-                <el-input v-model="emailForm.newEmail" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('emailForm','newEmail')" maxlength="100">
-                </el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmitEmail('emailForm')" size="small" :loading="loading">保存</el-button>
-                <el-button @click="onCancel('emailForm')" size="small">取消</el-button>
-            </el-form-item>
-        </el-form>
+    <div class="setting-iframe" v-if="settingFlag && emailFlag">
+      <p class="title">
+        <i class="el-icon-arrow-left" @click="handleSetting('emailFlag')"></i>
+        修改安全邮箱
+      </p>
+      <el-form
+        :model="emailForm"
+        :rules="rulesEmail"
+        ref="emailForm"
+        label-width="100px"
+        class="emailForm"
+      >
+        <el-form-item label="原邮箱" prop="email" v-if="emailForm.email">
+          <el-input
+            v-model="emailForm.email"
+            autocomplete="off"
+            :disabled="emailForm.email ? true : false"
+            placeholder="请输入邮箱地址"
+            @blur="handleTrim('emailForm', 'email')"
+            maxlength="100"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新邮箱" prop="newEmail">
+          <el-input
+            v-model="emailForm.newEmail"
+            autocomplete="off"
+            placeholder="请输入邮箱地址"
+            @blur="handleTrim('emailForm', 'newEmail')"
+            maxlength="100"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="onSubmitEmail('emailForm')"
+            size="small"
+            :loading="loading"
+            >保存</el-button
+          >
+          <el-button @click="onCancel('emailForm')" size="small"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
     </div>
   </div>
 </template>
@@ -297,847 +660,949 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import Upload from "./Upload.vue"
+import Upload from "./Upload.vue";
 import { getLogin } from "@/api/ajax";
-import { getToken } from '@/utils/auth'
-import { mapState } from 'vuex';
+import { getToken } from "@/utils/auth";
+import { mapState } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Upload },
-  props: ["page","info"],
+  props: ["page", "info"],
   data() {
     //这里存放数据
     const validatePass = (rule, value, callback) => {
-        if (value === '') {
-            callback(new Error('请输入密码'));
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/;
+        let result = reg.test(value);
+        if (result) {
+          callback();
         } else {
-            let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/;
-            let result = reg.test(value);
-            if (result) {
-                callback();
-            } else {
-                callback(new Error('密码必须同时包含数字和大小写字母'));
-            }
-            
+          callback(new Error("密码必须同时包含数字和大小写字母"));
         }
+      }
     };
     const validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请再次输入密码'));
-        } else if (value !== this.passwordForm.newPwd) {
-          callback(new Error('两次输入密码不一致!'));
-        } else {
-          callback();
-        }
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.passwordForm.newPwd) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
     };
     const validatePhone = (rule, value, callback) => {
-        if (value === '') {
-            callback(new Error('请输入手机号'));
+      if (value === "") {
+        callback(new Error("请输入手机号"));
+      } else {
+        let reg = /^1[3-9]\d{9}$/;
+        let result = reg.test(value);
+        if (result) {
+          callback();
         } else {
-            let reg = /^1[3-9]\d{9}$/;
-            let result = reg.test(value);
-            if (result) {
-                callback();
-            } else {
-                callback(new Error('请输入正确的手机号'));
-            }
+          callback(new Error("请输入正确的手机号"));
         }
+      }
     };
     const validateEmail = (rule, value, callback) => {
-        if (value === '') {
-            callback(new Error('请输入邮箱地址'));
+      if (value === "") {
+        callback(new Error("请输入邮箱地址"));
+      } else {
+        let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+        let result = reg.test(value);
+        if (result) {
+          callback();
         } else {
-            let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
-            let result = reg.test(value);
-            if (result) {
-                callback();
-            } else {
-                callback(new Error('请输入正确的邮箱地址'));
-            }
+          callback(new Error("请输入正确的邮箱地址"));
         }
+      }
     };
     const validateProvince = (rule, value, callback) => {
-        if(value===[]){
-            callback(new Error('请选择所在省市'));
-        }else if(value.length===2){
-            if(value[0]===''||value[1]===''){
-                callback(new Error('请选择所在省市'));
-            }else{
-                callback();
-            }
-        }else {
-            callback();
+      if (value === []) {
+        callback(new Error("请选择所在省市"));
+      } else if (value.length === 2) {
+        if (value[0] === "" || value[1] === "") {
+          callback(new Error("请选择所在省市"));
+        } else {
+          callback();
         }
+      } else {
+        callback();
+      }
     };
     return {
-        show: false, // 编辑头像flag
-        tabsIndex: 0,
-        infoForm:{
-            cover_image_url: '',
-            cover_image_list: [],
-            cover_image_id: null,
-            name:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.user_name)):JSON.parse(JSON.stringify(this.info.user_name)),
-            realName:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.real_name)):JSON.parse(JSON.stringify(this.info.real_name)),
-            sex:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.sex)):JSON.parse(JSON.stringify(this.info.sex)),
-            selectedOptions: this.page==='editPerson'||this.page==='personal'?[JSON.parse(JSON.stringify(this.info.sys_user.province_id)),JSON.parse(JSON.stringify(this.info.sys_user.city_id))]:[JSON.parse(JSON.stringify(this.info.province_id)),JSON.parse(JSON.stringify(this.info.city_id))],
-            desc:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.memo)):JSON.parse(JSON.stringify(this.info.memo)),
-        },
-        rules: {
-            name: [
-                { required: true, message: '请输入用户名', trigger: 'blur' }
-            ],
-            selectedOptions: [
-                { type: 'array', required: true, validator: validateProvince, trigger: 'change' }
-            ],
-            sex:[
-                { required: true, message: '请选择性别', trigger: 'change' },
-            ],
-        },
-        settingFlag: false, // 修改设置
-        passwordFlag: false, // 修改密码
-        phoneFlag: false, // 修改手机
-        emailFlag: false, // 修改邮箱
-        passwordForm:{
-            newPwd:'', // 新密码
-            confirmPwd:'' // 确认密码
-        },
-        rulesPassword:{
-            newPwd:[
-                { required: true, validator: validatePass, trigger: 'blur' },
-                { min: 6, max: 16, message: '请输入 6-16 位密码，且必须同时包含数字和大小写字母', trigger:'change' },
-            ],
-            confirmPwd:[
-                { required: true, validator: validatePass2, trigger: 'blur' }
-            ]
-        },
-        oldPwdFlag: false, // 查看旧密码
-        newPwdFlag: false, // 查看新密码
-        comfirmPwdFlag: false, // 查看确认密码
-        phoneForm:{
-            oldPhone:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.phone)):JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
-            newPhone:'', // 新手机
-        },
-        rulesPhone:{
-            oldPhone:[
-                { required: true, validator: validatePhone, trigger: 'blur' },
-            ],
-            newPhone:[
-                { required: true, validator: validatePhone, trigger: 'blur' },
-            ]
-        },
-        time: 60, //获取验证码的时间
-        verificationCodeShow: false, //是否已经获取了验证码
-        times: 60, //获取验证码的时间
-        verificationCodesShow: false, //是否已经获取了验证码
-        timee: 60, //获取验证码的时间
-        verificationCodeeShow: false, //是否已经获取了验证码
-        emailForm:{
-            email:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.email)):JSON.parse(JSON.stringify(this.info.email)),
-            newEmail:''
-        },
-        rulesEmail:{
-            email:[
-                { required: true, validator: validateEmail, trigger: 'blur' },
-            ],
-            newEmail:[
-                { required: true, validator: validateEmail, trigger: 'blur' }
-            ]
-        },
-        manageAuth:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[], // 管理权限
-        codeAuth:{
-            auth:[],
-            viewCode:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
-        }, // 兑换码权限
-        financeAuth:{
-            auth: [],
-            selectedOptions:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.finance_popedom_data_scope)):[]
-        }, // 财务权限
-        props: { multiple: true },
-        loading: false,
-        id:this.$route.query.id?this.$route.query.id:'',
-        managerForm:{
-            is_manager: this.page==='editOrgPerson'?JSON.parse(JSON.stringify(this.info.is_manager)):"false"
-        }
-    }
+      show: false, // 编辑头像flag
+      tabsIndex: 0,
+      infoForm: {
+        cover_image_url: "",
+        cover_image_list: [],
+        cover_image_id: null,
+        name:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(JSON.stringify(this.info.sys_user.user_name))
+            : JSON.parse(JSON.stringify(this.info.user_name)),
+        realName:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(JSON.stringify(this.info.sys_user.real_name))
+            : JSON.parse(JSON.stringify(this.info.real_name)),
+        sex:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(JSON.stringify(this.info.sys_user.sex))
+            : JSON.parse(JSON.stringify(this.info.sex)),
+        selectedOptions:
+          this.page === "editPerson" || this.page === "personal"
+            ? [
+                JSON.parse(JSON.stringify(this.info.sys_user.province_id)),
+                JSON.parse(JSON.stringify(this.info.sys_user.city_id)),
+              ]
+            : [
+                JSON.parse(JSON.stringify(this.info.province_id)),
+                JSON.parse(JSON.stringify(this.info.city_id)),
+              ],
+        desc:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(JSON.stringify(this.info.sys_user.memo))
+            : JSON.parse(JSON.stringify(this.info.memo)),
+      },
+      rules: {
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        selectedOptions: [
+          {
+            type: "array",
+            required: true,
+            validator: validateProvince,
+            trigger: "change",
+          },
+        ],
+        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
+      },
+      settingFlag: false, // 修改设置
+      passwordFlag: false, // 修改密码
+      phoneFlag: false, // 修改手机
+      emailFlag: false, // 修改邮箱
+      passwordForm: {
+        newPwd: "", // 新密码
+        confirmPwd: "", // 确认密码
+      },
+      rulesPassword: {
+        newPwd: [
+          { required: true, validator: validatePass, trigger: "blur" },
+          {
+            min: 6,
+            max: 16,
+            message: "请输入 6-16 位密码，且必须同时包含数字和大小写字母",
+            trigger: "change",
+          },
+        ],
+        confirmPwd: [
+          { required: true, validator: validatePass2, trigger: "blur" },
+        ],
+      },
+      oldPwdFlag: false, // 查看旧密码
+      newPwdFlag: false, // 查看新密码
+      comfirmPwdFlag: false, // 查看确认密码
+      phoneForm: {
+        oldPhone:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(JSON.stringify(this.info.sys_user.phone))
+            : JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
+        newPhone: "", // 新手机
+      },
+      rulesPhone: {
+        oldPhone: [
+          { required: true, validator: validatePhone, trigger: "blur" },
+        ],
+        newPhone: [
+          { required: true, validator: validatePhone, trigger: "blur" },
+        ],
+      },
+      time: 60, //获取验证码的时间
+      verificationCodeShow: false, //是否已经获取了验证码
+      times: 60, //获取验证码的时间
+      verificationCodesShow: false, //是否已经获取了验证码
+      timee: 60, //获取验证码的时间
+      verificationCodeeShow: false, //是否已经获取了验证码
+      emailForm: {
+        email:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(JSON.stringify(this.info.sys_user.email))
+            : JSON.parse(JSON.stringify(this.info.email)),
+        newEmail: "",
+      },
+      rulesEmail: {
+        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
+        newEmail: [
+          { required: true, validator: validateEmail, trigger: "blur" },
+        ],
+      },
+      manageAuth:
+        this.page === "editPerson" || this.page === "personal"
+          ? JSON.parse(JSON.stringify(this.info.popedom_code_list))
+          : [], // 管理权限
+      codeAuth: {
+        auth: [],
+        viewCode:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(
+                JSON.stringify(this.info.data_scope.discount_code_view_scope)
+              )
+            : 0,
+      }, // 兑换码权限
+      financeAuth: {
+        auth: [],
+        selectedOptions:
+          this.page === "editPerson" || this.page === "personal"
+            ? JSON.parse(
+                JSON.stringify(this.info.data_scope.finance_popedom_data_scope)
+              )
+            : [],
+      }, // 财务权限
+      props: { multiple: true },
+      loading: false,
+      id: this.$route.query.id ? this.$route.query.id : "",
+      managerForm: {
+        is_manager:
+          this.page === "editOrgPerson"
+            ? JSON.parse(JSON.stringify(this.info.is_manager))
+            : "false",
+      },
+    };
   },
   //计算属性 类似于data概念
   computed: {
-    ...mapState(['$provinceCityList','$provinceCityListAll']),
+    ...mapState(["$provinceCityList", "$provinceCityListAll"]),
   },
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
-    handleAvatarSuccess(fileList,name) {
-        let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Image";
-        if(this.page==='editOrgPerson'){
-            MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Image";
-        }
-        let data = {
-            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-            image_id: fileList.length>0&&fileList[fileList.length-1].response&&fileList[fileList.length-1].response.file_info_list&&fileList[fileList.length-1].response.file_info_list[0]?fileList[fileList.length-1].response.file_info_list[0].file_id:''
-        }
-        getLogin(MethodName, data)
+    handleAvatarSuccess(fileList, name) {
+      let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Image";
+      if (this.page === "editOrgPerson") {
+        MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Image";
+      }
+      let data = {
+        id: this.page === "personal" ? JSON.parse(getToken()).user_id : this.id,
+        image_id:
+          fileList.length > 0 &&
+          fileList[fileList.length - 1].response &&
+          fileList[fileList.length - 1].response.file_info_list &&
+          fileList[fileList.length - 1].response.file_info_list[0]
+            ? fileList[fileList.length - 1].response.file_info_list[0].file_id
+            : "",
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            if(res.status===1){
-                this.$emit("getInfo")
-            }
-        }).catch((res) =>{
+          if (res.status === 1) {
+            this.$emit("getInfo");
+          }
         })
+        .catch((res) => {});
     },
     // 切换tabs
-    handleChangeTabs(value){
-        this.tabsIndex = value
-        let breadcrumb = []
-        if(this.page==='editOrgPerson'){
-            breadcrumb = [
-                {
-                    icon:'school-line',
-                    url:'',
-                    text:''
-                },
-                {
-                    icon:'',
-                    url:'',
-                    text:'机构管理'
-                },
-                {
-                    icon:'',
-                    url:'',
-                    text:this.info.org_name
-                },
-                {
-                    icon:'',
-                    url:'',
-                    notLink: true,
-                    text:value===0?'人员信息':value===1?'安全设置':'权限设置'
-                }
-            ]
-            this.$emit("changeBread",breadcrumb)
-        }
+    handleChangeTabs(value) {
+      this.tabsIndex = value;
+      let breadcrumb = [];
+      if (this.page === "editOrgPerson") {
+        breadcrumb = [
+          {
+            icon: "school-line",
+            url: "",
+            text: "",
+          },
+          {
+            icon: "",
+            url: "",
+            text: "机构管理",
+          },
+          {
+            icon: "",
+            url: "",
+            text: this.info.org_name,
+          },
+          {
+            icon: "",
+            url: "",
+            notLink: true,
+            text:
+              value === 0 ? "人员信息" : value === 1 ? "安全设置" : "权限设置",
+          },
+        ];
+        this.$emit("changeBread", breadcrumb);
+      }
     },
     // 级联选择器
-    handleCity(value){
-        // console.log(value)
+    handleCity(value) {
+      // console.log(value)
     },
     // 提交表单
-    onSubmit(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
-            if(this.page==='editOrgPerson'){
-                MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_BaseInfo";
-            }
-            let data = {
-                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-                user_name: this.infoForm.name,
-                real_name: this.infoForm.realName,
-                sex: this.infoForm.sex,
-                city_id: this.infoForm.selectedOptions[1],
-                memo: this.infoForm.desc
-            }
-            getLogin(MethodName, data)
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName =
+            "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
+          if (this.page === "editOrgPerson") {
+            MethodName =
+              "/OrgServer/Client/PersonManager/UpdatePerson_BaseInfo";
+          }
+          let data = {
+            id:
+              this.page === "personal"
+                ? JSON.parse(getToken()).user_id
+                : this.id,
+            user_name: this.infoForm.name,
+            real_name: this.infoForm.realName,
+            sex: this.infoForm.sex,
+            city_id: this.infoForm.selectedOptions[1],
+            memo: this.infoForm.desc,
+          };
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    this.$emit("getInfo")
-                }
-            }).catch((res) =>{
-                this.loading = false
+              this.loading = false;
+              if (res.status === 1) {
+                this.$emit("getInfo");
+              }
             })
-          } else {
-            return false;
-          }
-        });
+            .catch((res) => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
     },
     // 取消 恢复到修改前状态
-    onCancel(formName){
-        this.$refs[formName].resetFields();
+    onCancel(formName) {
+      this.$refs[formName].resetFields();
     },
     // 修改设置
-    handleSetting(flag){
-        this.settingFlag = !this.settingFlag
-        this[flag] = !this[flag]
-        let breadcrumb = []
-        if(this.page==='editPerson'){
-            if(this[flag]){
-                breadcrumb = [
-                    {
-                        icon:'contacts-line',
-                        url:'',
-                        text:''
-                    },
-                    {
-                        icon:'',
-                        url:'',
-                        text:'系统用户'
-                    },
-                    {
-                        icon:'',
-                        url:'',
-                        notLink: true,
-                        text:'安全设置'
-                    },
-                    {
-                        icon:'',
-                        url:'',
-                        text:flag==='passwordFlag'?'修改密码':flag==='phoneFlag'?'绑定手机':'安全邮箱'
-                    }
-                ]
-            }else{
-                breadcrumb = [
-                    {
-                        icon:'contacts-line',
-                        url:'',
-                        text:''
-                    },
-                    {
-                        icon:'',
-                        url:'',
-                        text:'系统用户'
-                    },
-                    {
-                        icon:'',
-                        url:'',
-                        text:'编辑'
-                    }
-                ]
-            }
-            this.$emit("changeBread",breadcrumb)
+    handleSetting(flag) {
+      this.settingFlag = !this.settingFlag;
+      this[flag] = !this[flag];
+      let breadcrumb = [];
+      if (this.page === "editPerson") {
+        if (this[flag]) {
+          breadcrumb = [
+            {
+              icon: "contacts-line",
+              url: "",
+              text: "",
+            },
+            {
+              icon: "",
+              url: "",
+              text: "系统用户",
+            },
+            {
+              icon: "",
+              url: "",
+              notLink: true,
+              text: "安全设置",
+            },
+            {
+              icon: "",
+              url: "",
+              text:
+                flag === "passwordFlag"
+                  ? "修改密码"
+                  : flag === "phoneFlag"
+                  ? "绑定手机"
+                  : "安全邮箱",
+            },
+          ];
+        } else {
+          breadcrumb = [
+            {
+              icon: "contacts-line",
+              url: "",
+              text: "",
+            },
+            {
+              icon: "",
+              url: "",
+              text: "系统用户",
+            },
+            {
+              icon: "",
+              url: "",
+              text: "编辑",
+            },
+          ];
         }
+        this.$emit("changeBread", breadcrumb);
+      }
     },
-    changeIcon(flag){
-        this[flag] = !this[flag]
+    changeIcon(flag) {
+      this[flag] = !this[flag];
     },
     // 修改密码提交表单
-    onSubmitPassword(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Password";
-            if(this.page==='editOrgPerson'){
-                MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Password";
-            }
-            let data = {
-                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-                password: this.passwordForm.newPwd
-            }
-            getLogin(MethodName, data)
+    onSubmitPassword(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName =
+            "/OrgServer/Manager/SysUserManager/UpdateSysUser_Password";
+          if (this.page === "editOrgPerson") {
+            MethodName =
+              "/OrgServer/Client/PersonManager/UpdatePerson_Password";
+          }
+          let data = {
+            id:
+              this.page === "personal"
+                ? JSON.parse(getToken()).user_id
+                : this.id,
+            password: this.passwordForm.newPwd,
+          };
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    this.$message.success("修改成功")
-                    this.$emit("getInfo")
-                    this.handleSetting('passwordFlag')
-                }
-            }).catch((res) =>{
-                this.loading = false
+              this.loading = false;
+              if (res.status === 1) {
+                this.$message.success("修改成功");
+                this.$emit("getInfo");
+                this.handleSetting("passwordFlag");
+              }
             })
-          } else {
-            return false;
-          }
-        });
+            .catch((res) => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
     },
     // 修改手机提交表单
-    onSubmitPhone(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Phone";
-            if(this.page==='editOrgPerson'){
-                MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Phone";
-            }
-            let data = {
-                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-                phone: this.phoneForm.newPhone
-            }
-            getLogin(MethodName, data)
+    onSubmitPhone(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName =
+            "/OrgServer/Manager/SysUserManager/UpdateSysUser_Phone";
+          if (this.page === "editOrgPerson") {
+            MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Phone";
+          }
+          let data = {
+            id:
+              this.page === "personal"
+                ? JSON.parse(getToken()).user_id
+                : this.id,
+            phone: this.phoneForm.newPhone,
+          };
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    this.$message.success("修改成功")
-                    this.$emit("getInfo")
-                    this.handleSetting('phoneFlag')
-                    this.phoneForm.oldPhone = JSON.parse(JSON.stringify(this.phoneForm.newPhone))
-                    this.phoneForm.newPhone = ''
-                }
-            }).catch((res) =>{
-                this.loading = false
+              this.loading = false;
+              if (res.status === 1) {
+                this.$message.success("修改成功");
+                this.$emit("getInfo");
+                this.handleSetting("phoneFlag");
+                this.phoneForm.oldPhone = JSON.parse(
+                  JSON.stringify(this.phoneForm.newPhone)
+                );
+                this.phoneForm.newPhone = "";
+              }
             })
-          } else {
-            return false;
-          }
-        });
+            .catch((res) => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
     },
     // 修改邮箱
-    onSubmitEmail(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Email";
-            if(this.page==='editOrgPerson'){
-                MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Email";
-            }
-            let data = {
-                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-                email: this.emailForm.newEmail
-            }
-            getLogin(MethodName, data)
+    onSubmitEmail(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName =
+            "/OrgServer/Manager/SysUserManager/UpdateSysUser_Email";
+          if (this.page === "editOrgPerson") {
+            MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Email";
+          }
+          let data = {
+            id:
+              this.page === "personal"
+                ? JSON.parse(getToken()).user_id
+                : this.id,
+            email: this.emailForm.newEmail,
+          };
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    this.$message.success("修改成功")
-                    this.$emit("getInfo")
-                    this.handleSetting('emailFlag')
-                    this.emailForm.email = JSON.parse(JSON.stringify(this.emailForm.newEmail))
-                    this.emailForm.newEmail = ''
-                }
-            }).catch((res) =>{
-                this.loading = false
+              this.loading = false;
+              if (res.status === 1) {
+                this.$message.success("修改成功");
+                this.$emit("getInfo");
+                this.handleSetting("emailFlag");
+                this.emailForm.email = JSON.parse(
+                  JSON.stringify(this.emailForm.newEmail)
+                );
+                this.emailForm.newEmail = "";
+              }
             })
-          } else {
-            return false;
-          }
-        });
+            .catch((res) => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
     },
     // 去掉前后空格
-    handleTrim(form,fild){
-        this[form][fild] = this[form][fild].trim()
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
     },
     // 修改权限
-    onSubmitAuth(){
-        this.loading = true
-        let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Popedom";
-        let finance_popedom_data_scope = {}
-        if(this.financeAuth.selectedOptions.length>0){
-            if(this.financeAuth.selectedOptions[0][0]&&this.financeAuth.selectedOptions[0][0]==='0'){
-                finance_popedom_data_scope.is_all = 'true'
-            }else{
-                finance_popedom_data_scope.is_all = 'false'
-                let province_id_list = []
-                let city_id_list = []
-                this.financeAuth.selectedOptions.forEach(item => {
-                    if(province_id_list.indexOf(item[0])===-1){
-                        province_id_list.push(item[0])
-                    }
-                    city_id_list.push(item[1]?item[1]:'')
-                });
-                finance_popedom_data_scope.province_id_list = province_id_list
-                finance_popedom_data_scope.city_id_list = city_id_list
-            }
-        }
-        let data = {
-            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-            popedom_code_list: this.manageAuth,
-            data_scope:{
-                discount_code_view_scope:this.codeAuth.viewCode,
-                finance_popedom_data_scope: finance_popedom_data_scope
+    onSubmitAuth() {
+      this.loading = true;
+      let MethodName =
+        "/OrgServer/Manager/SysUserManager/UpdateSysUser_Popedom";
+      let finance_popedom_data_scope = {};
+      if (this.financeAuth.selectedOptions.length > 0) {
+        if (
+          this.financeAuth.selectedOptions[0][0] &&
+          this.financeAuth.selectedOptions[0][0] === "0"
+        ) {
+          finance_popedom_data_scope.is_all = "true";
+        } else {
+          finance_popedom_data_scope.is_all = "false";
+          let province_id_list = [];
+          let city_id_list = [];
+          this.financeAuth.selectedOptions.forEach((item) => {
+            if (province_id_list.indexOf(item[0]) === -1) {
+              province_id_list.push(item[0]);
             }
+            city_id_list.push(item[1] ? item[1] : "");
+          });
+          finance_popedom_data_scope.province_id_list = province_id_list;
+          finance_popedom_data_scope.city_id_list = city_id_list;
         }
-        getLogin(MethodName, data)
+      }
+      let data = {
+        id: this.page === "personal" ? JSON.parse(getToken()).user_id : this.id,
+        popedom_code_list: this.manageAuth,
+        data_scope: {
+          discount_code_view_scope: this.codeAuth.viewCode,
+          finance_popedom_data_scope: finance_popedom_data_scope,
+        },
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            if(res.status===1){
-                this.$message.success("修改成功")
-            }
-        }).catch((res) =>{
-            this.loading = false
+          this.loading = false;
+          if (res.status === 1) {
+            this.$message.success("修改成功");
+          }
         })
+        .catch((res) => {
+          this.loading = false;
+        });
     },
     // 取消权限
-    onCancelAuth(){
-        this.handleUserAuth()
-        // this.manageAuth = []
-        // this.codeAuth.viewCode = 0
-        // this.financeAuth.selectedOptions = []
+    onCancelAuth() {
+      this.handleUserAuth();
+      // this.manageAuth = []
+      // this.codeAuth.viewCode = 0
+      // this.financeAuth.selectedOptions = []
     },
     // 赋值权限
-    handleUserAuth(){
-        if(this.page==='editPerson'||this.page==='personal'){
-            this.manageAuth = this.info.popedom_code_list?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[]
-            this.codeAuth.viewCode = this.info.data_scope.discount_code_view_scope?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
-            if(this.info.data_scope.finance_popedom_data_scope&&this.info.data_scope.finance_popedom_data_scope.is_all==='true'){
-                this.financeAuth.selectedOptions = ['0']
-            }else{
-                let arr = []
-                this.info.data_scope.finance_popedom_data_scope.city_id_list.forEach(item=>{
-                    arr.push([item.substring(0,2),item])
-                })
-                this.financeAuth.selectedOptions = arr
+    handleUserAuth() {
+      if (this.page === "editPerson" || this.page === "personal") {
+        this.manageAuth = this.info.popedom_code_list
+          ? JSON.parse(JSON.stringify(this.info.popedom_code_list))
+          : [];
+        this.codeAuth.viewCode = this.info.data_scope.discount_code_view_scope
+          ? JSON.parse(
+              JSON.stringify(this.info.data_scope.discount_code_view_scope)
+            )
+          : 0;
+        if (
+          this.info.data_scope.finance_popedom_data_scope &&
+          this.info.data_scope.finance_popedom_data_scope.is_all === "true"
+        ) {
+          this.financeAuth.selectedOptions = ["0"];
+        } else {
+          let arr = [];
+          this.info.data_scope.finance_popedom_data_scope.city_id_list.forEach(
+            (item) => {
+              arr.push([item.substring(0, 2), item]);
             }
+          );
+          this.financeAuth.selectedOptions = arr;
         }
+      }
     },
     // 修改管理员权限
-    onSubmitManager(){
-        this.loading = true
-        let MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Popedom";
-        let data = {
-            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
-            is_manager: this.managerForm.is_manager,
-        }
-        getLogin(MethodName, data)
+    onSubmitManager() {
+      this.loading = true;
+      let MethodName = "/OrgServer/Client/PersonManager/UpdatePerson_Popedom";
+      let data = {
+        id: this.page === "personal" ? JSON.parse(getToken()).user_id : this.id,
+        is_manager: this.managerForm.is_manager,
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            if(res.status===1){
-                this.$message.success("修改成功")
-            }
-        }).catch((res) =>{
-            this.loading = false
+          this.loading = false;
+          if (res.status === 1) {
+            this.$message.success("修改成功");
+          }
         })
+        .catch((res) => {
+          this.loading = false;
+        });
     },
     // 通过 拒绝
     handleAudit(type) {
       let Mname = "/OrgServer/Client/PersonManager/AuditPerson";
       let data = {
-        id_list: [this.id]
+        id_list: [this.id],
       };
-      if (type==='up') {
+      if (type === "up") {
         // 下架状态
         data.is_pass = "true";
-      } else if (type==='down') {
+      } else if (type === "down") {
         data.is_pass = "false";
       }
-      getLogin(Mname, data).then(res => {
+      getLogin(Mname, data).then((res) => {
         this.$message.success("操作成功");
-        this.$router.go(-1)
+        this.$router.go(-1);
       });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    if(this.info){
-        this.handleUserAuth()
+    if (this.info) {
+      this.handleUserAuth();
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.setting{
-    height: 100%;
-    &-top{
-        margin: 0 0 12px 0;
-        background: #FFFFFF;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        padding: 22px 40px;
-        .avator-box{
-            width: 96px;
-            height: 96px;
-            position: relative;
-            .img-crop{
-                position: absolute;
-                // padding: 4px;
-                width: 30px;
-                height: 30px;
-                right: -4px;
-                bottom: -4px;
-                border-radius: 50%;
-                display: block;
-                text-align: center;
-                font-size: 0;
-                border: 2px solid #FFFFFF;
-                background: #F2F3F5 url("../assets/camera.png") center no-repeat;
-                background-size: 12px;
-            }
-            .el-image{
-                border-radius: 50%;
-                overflow: hidden;
-            }
-        }
-        .center{
-            flex: 1;
-            display: flex;
-            flex-flow: wrap;
-            margin-top: 12px;
-            .info-items{
-                margin-bottom: 12px;
-                width: 40%;
-            }
-            label{
-                font-weight: 400;
-                font-size: 14px;
-                line-height: 22px;
-                color: #86909C;
-                width: 156px;
-                text-align: right;
-                display: inline-block;
-                padding-right: 10px;
-            }
-            span{
-                font-size: 14px;
-                line-height: 22px;
-                color: #1D2129;
-            }
-        }
+.setting {
+  height: 100%;
+  &-top {
+    margin: 0 0 12px 0;
+    background: #ffffff;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 22px 40px;
+    .avator-box {
+      width: 96px;
+      height: 96px;
+      position: relative;
+      .img-crop {
+        position: absolute;
+        // padding: 4px;
+        width: 30px;
+        height: 30px;
+        right: -4px;
+        bottom: -4px;
+        border-radius: 50%;
+        display: block;
+        text-align: center;
+        font-size: 0;
+        border: 2px solid #ffffff;
+        background: #f2f3f5 url("../assets/camera.png") center no-repeat;
+        background-size: 12px;
+      }
+      .el-image {
+        border-radius: 50%;
+        overflow: hidden;
+      }
     }
-    &-bottom{
-        padding: 24px;
-        background: #FFFFFF;
-        border-radius: 4px;
-        min-height: calc(100vh - 270px);
-        .tabs-box{
-            display: flex;
-            padding-bottom: 16px;
-            a{
-                font-size: 14px;
-                line-height: 22px;
-                color: #4E5969;
-                border-radius: 100px;
-                padding: 5px 16px;
-                margin-right: 12px;
-                &:hover{
-                    background: #F2F3F5;
-                }
-                &.active{
-                    background: #F2F3F5;
-                    font-weight: 500;
-                    color: #165DFF;
-                }
-            }
+    .center {
+      flex: 1;
+      display: flex;
+      flex-flow: wrap;
+      margin-top: 12px;
+      .info-items {
+        margin-bottom: 12px;
+        width: 40%;
+      }
+      label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #86909c;
+        width: 156px;
+        text-align: right;
+        display: inline-block;
+        padding-right: 10px;
+      }
+      span {
+        font-size: 14px;
+        line-height: 22px;
+        color: #1d2129;
+      }
+    }
+  }
+  &-bottom {
+    padding: 24px;
+    background: #ffffff;
+    border-radius: 4px;
+    min-height: calc(100vh - 270px);
+    .tabs-box {
+      display: flex;
+      padding-bottom: 16px;
+      a {
+        font-size: 14px;
+        line-height: 22px;
+        color: #4e5969;
+        border-radius: 100px;
+        padding: 5px 16px;
+        margin-right: 12px;
+        &:hover {
+          background: #f2f3f5;
         }
-        .btn{
-            margin-left: 16px;
-        }
-        .safe-items{
-            display: flex;
-            width: 100%;
-            padding: 30px 20px 13px 20px;
-            label{
-                font-weight: 500;
-                font-size: 14px;
-                line-height: 22px;
-                color: #4E5969;
-            }
-            &-right{
-                border-bottom: 1px solid #E5E6EB;
-                padding-bottom: 20px;
-                flex: 1;
-                margin-left: 16px;
-                display: flex;
-                justify-content: space-between;
-                p{
-                    margin: 0;
-                    font-weight: 400;
-                    font-size: 14px;
-                    line-height: 22px;
-                    color: #4E5969;
-                    &.noContent{
-                        color: #86909C;
-                    }
-                }
-                a{
-                    font-weight: 400;
-                    font-size: 14px;
-                    line-height: 22px;
-                    color: #165DFF;
-                }
-            }
+        &.active {
+          background: #f2f3f5;
+          font-weight: 500;
+          color: #165dff;
         }
+      }
     }
-    &-iframe{
-        width: 100%;
-        height: 100%;
-        background: #FFFFFF;
-        padding: 24px;
-        .title{
-            margin: 0;
-            font-weight: 400;
-            font-size: 20px;
-            line-height: 28px;
-            color: #000000;
-            .el-icon-arrow-left{
-                margin-right: 8px;
-                cursor: pointer;
-            }
-        }
-        .passwordForm,.phoneForm,.emailForm{
-            padding-top: 40px;
-            .show-icon{
-                cursor: pointer;
-                color: #4E5969;
-            }
+    .btn {
+      margin-left: 16px;
+    }
+    .safe-items {
+      display: flex;
+      width: 100%;
+      padding: 30px 20px 13px 20px;
+      label {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+        color: #4e5969;
+      }
+      &-right {
+        border-bottom: 1px solid #e5e6eb;
+        padding-bottom: 20px;
+        flex: 1;
+        margin-left: 16px;
+        display: flex;
+        justify-content: space-between;
+        p {
+          margin: 0;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          color: #4e5969;
+          &.noContent {
+            color: #86909c;
+          }
         }
-        .code-input{
-            width: 268px;
-            .el-input__inner{
-                border-radius: 2px 0 0 2px;
-            }
+        a {
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          color: #165dff;
         }
+      }
     }
-}
-.step-table{
-    border: 1px solid #E5E6EB;
-    border-collapse: collapse;
-    font-size: 14px;
-    line-height: 22px;
-    color: #1D2129;
-    text-align: center;
-    margin-bottom: 24px;
-    &-header{
-        background: #F7F8FA;
-        width: 120px !important;
-        color: #86909C;
-        font-weight: 500;
+  }
+  &-iframe {
+    width: 100%;
+    height: 100%;
+    background: #ffffff;
+    padding: 24px;
+    .title {
+      margin: 0;
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 28px;
+      color: #000000;
+      .el-icon-arrow-left {
+        margin-right: 8px;
+        cursor: pointer;
+      }
     }
-    td{
-        height: 40px;
-        width: 260px;
-        border: 1px solid #E5E6EB;
-        &.td1{
-            width: 130px;
-        }
+    .passwordForm,
+    .phoneForm,
+    .emailForm {
+      padding-top: 40px;
+      .show-icon {
+        cursor: pointer;
+        color: #4e5969;
+      }
     }
-    .step-cascader{
-        width: 250px;
-        height: 32px;
-        line-height: 32px;
+    .code-input {
+      width: 268px;
+      .el-input__inner {
+        border-radius: 2px 0 0 2px;
+      }
+    }
+  }
+}
+.step-table {
+  border: 1px solid #e5e6eb;
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 22px;
+  color: #1d2129;
+  text-align: center;
+  margin-bottom: 24px;
+  &-header {
+    background: #f7f8fa;
+    width: 120px !important;
+    color: #86909c;
+    font-weight: 500;
+  }
+  td {
+    height: 40px;
+    width: 260px;
+    border: 1px solid #e5e6eb;
+    &.td1 {
+      width: 130px;
     }
+  }
+  .step-cascader {
+    width: 250px;
+    height: 32px;
+    line-height: 32px;
+  }
 }
-.tips{
-    margin: 0;
-    color: #86909C;
-    font-size: 12px;
-    line-height: 20px;
+.tips {
+  margin: 0;
+  color: #86909c;
+  font-size: 12px;
+  line-height: 20px;
 }
 </style>
 <style lang="scss">
-.setting{
-    .el-input,.el-textarea{
-        width: 360px;
-    }
-    .el-input__inner{
-        height: 32px;
-        color: #1D2129;
-        background: #F2F3F5;
-        border: none;
-    }
-    .el-textarea__inner,.el-input-group__prepend{
-        color: #1D2129;
-        background: #F2F3F5;
-        border: none;
-    }
-    .el-input__count{
-        background: #F2F3F5;
-    }
-    .el-form-item__label{
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 32px;
-        color: #4E5969;
-    }
-    .el-form-item__content,.el-input__icon{
-        line-height: 32px;
-        color: #4E5969 !important;
-    }
-    .el-form-item{
-        margin-bottom: 20px;
-    }
-    .el-radio__input.is-checked+.el-radio__label{
-        color: #165DFF;
-    }
-    .el-radio__input.is-checked .el-radio__inner{
-        background: #165DFF;
-        border-color: #165DFF;
-    }
-    .el-button--primary{
-        background: #165DFF;
-        border-color: #165DFF;
-        border-radius: 2px;
-        &:hover{
-            background: #4080FF;
-            border-color: #4080FF;
-        }
-        &:focus{
-            background: #0E42D2;
-            border-color: #0E42D2;
-        }
-    }
-    .el-button--default{
-        background: #F2F3F5;
-        border-radius: 2px;
-        border: none;
-        color: #4E5969;
-        height: 32px;
-        &:hover{
-            background: #E5E6EB;
-        }
-        &:focus{
-            background: #C9CDD4;
-        }
+.setting {
+  .el-input,
+  .el-textarea {
+    width: 360px;
+  }
+  .el-input__inner {
+    height: 32px;
+    color: #1d2129;
+    background: #f2f3f5;
+    border: none;
+  }
+  .el-textarea__inner,
+  .el-input-group__prepend {
+    color: #1d2129;
+    background: #f2f3f5;
+    border: none;
+  }
+  .el-input__count {
+    background: #f2f3f5;
+  }
+  .el-form-item__label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 32px;
+    color: #4e5969;
+  }
+  .el-form-item__content,
+  .el-input__icon {
+    line-height: 32px;
+    color: #4e5969 !important;
+  }
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  .el-radio__input.is-checked + .el-radio__label {
+    color: #165dff;
+  }
+  .el-radio__input.is-checked .el-radio__inner {
+    background: #165dff;
+    border-color: #165dff;
+  }
+  .el-button--primary {
+    background: #165dff;
+    border-color: #165dff;
+    border-radius: 2px;
+    &:hover {
+      background: #4080ff;
+      border-color: #4080ff;
     }
-    .setting-form{
-        padding-top: 26px;
+    &:focus {
+      background: #0e42d2;
+      border-color: #0e42d2;
     }
-    .code-box{
-        .el-form-item__content{
-            display: flex;
-        }
+  }
+  .el-button--default {
+    background: #f2f3f5;
+    border-radius: 2px;
+    border: none;
+    color: #4e5969;
+    height: 32px;
+    &:hover {
+      background: #e5e6eb;
     }
-    .code-input{
-        height: 32px;
-        .el-input__inner{
-            border-radius: 4px 0 0 4px;
-        }
+    &:focus {
+      background: #c9cdd4;
     }
-    .sendCode{
-        border-radius: 0 4px 4px 0;
-        margin-top: 1px;
-        width: 92px;
+  }
+  .setting-form {
+    padding-top: 26px;
+  }
+  .code-box {
+    .el-form-item__content {
+      display: flex;
     }
-    .el-input-group__prepend{
-        width: 54px;
-        height: 32px;
-        border: none;
-        background: #F2F3F5;
-        border-radius: 2px 0px 0px 2px;
-        line-height: 32px;
-        text-align: center;
-        padding: 0;
+  }
+  .code-input {
+    height: 32px;
+    .el-input__inner {
+      border-radius: 4px 0 0 4px;
     }
-    .el-input-group--prepend{
-        display: flex;
-        .el-input__inner{
-            margin-left: 8px;
-            flex: 1;
-        }
+  }
+  .sendCode {
+    border-radius: 0 4px 4px 0;
+    margin-top: 1px;
+    width: 92px;
+  }
+  .el-input-group__prepend {
+    width: 54px;
+    height: 32px;
+    border: none;
+    background: #f2f3f5;
+    border-radius: 2px 0px 0px 2px;
+    line-height: 32px;
+    text-align: center;
+    padding: 0;
+  }
+  .el-input-group--prepend {
+    display: flex;
+    .el-input__inner {
+      margin-left: 8px;
+      flex: 1;
     }
-    .step-cascader{
-        .el-input{
-            width: 100% !important;
-        }
+  }
+  .step-cascader {
+    .el-input {
+      width: 100% !important;
     }
-    .upload{
-        width: 30px;
-        height: 30px;
-        overflow: hidden;
-        .upload-demo{
-            opacity: 0;
-            width: 100% !important;
-        }
+  }
+  .upload {
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+    .upload-demo {
+      opacity: 0;
+      width: 100% !important;
     }
+  }
 }
-</style>
+</style>

src/views/personalCenter/components/OrderList.vue

@@ -110,24 +110,62 @@
           </div>
         </template>
       </el-table-column>
-      <!-- <el-table-column
-            prop="status"
-            label="操作"
-            width="150"
-            fixed='right'>
-            <template slot-scope="scope">
-                <template v-if="scope.row.operate==='1'">
-                    <a class="apply">申请退款</a>
-                </template>
-                <template v-if="scope.row.operate==='3'">
+      <el-table-column prop="status" label="退款申请状态" width="112">
+        <template
+          slot-scope="scope"
+          v-if="scope.row.is_has_refund_apply === 'true'"
+        >
+          <div class="status-box">
+            <span
+              :style="{
+                background: refundStatusList[scope.row.refund_apply_status].bg,
+              }"
+            ></span>
+            <b
+              :style="{
+                color:
+                  refundStatusList[scope.row.refund_apply_status].textColor,
+              }"
+              >{{ refundStatusList[scope.row.refund_apply_status].text }}</b
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="refund_apply_submit_time"
+        label="退款申请时间"
+        width="165"
+      >
+      </el-table-column>
+      <el-table-column prop="refund_amount" label="退款金额" width="100">
+        <template slot-scope="scope" v-if="scope.row.refund_apply_status === 2">
+          <span>￥{{ scope.row.refund_amount | cutMoneyFiter }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="操作" width="100" fixed="right">
+        <template slot-scope="scope">
+          <template
+            v-if="
+              scope.row.order_status === 1 &&
+              scope.row.is_use_discount_code === 'false' &&
+              (scope.row.is_has_refund_apply === 'false' ||
+                (scope.row.is_has_refund_apply === 'true' &&
+                  scope.row.refund_apply_status === 1))
+            "
+          >
+            <a class="apply" @click="handleApply(scope.row, scope.$index)"
+              >申请退款</a
+            >
+          </template>
+          <!-- <template v-if="scope.row.operate==='3'">
                     <a class="order-detail"><svg-icon icon-class="question-line"></svg-icon>详情</a>
                 </template>
                 <template v-if="scope.row.operate==='4'">
                     <a class="order-detail"><svg-icon icon-class="question-line"></svg-icon>详情</a>
                     <a class="apply">申请退款</a>
-                </template>
-            </template>
-        </el-table-column> -->
+                </template> -->
+        </template>
+      </el-table-column>
     </el-table>
     <el-pagination
       background
@@ -140,6 +178,21 @@
       :total="total_count"
     >
     </el-pagination>
+    <div
+      class="kefu-box"
+      v-if="kefuShow"
+      @mouseover="kefuCode = true"
+      @mouseleave="kefuCode = false"
+    >
+      <div v-if="kefuCode">
+        <img src="../../../assets/21st-kefu-code.jpg" />
+        <span>扫一扫，添加客服微信</span>
+      </div>
+
+      <div v-else>
+        <img class="kefu-img" src="../../../assets/kefu.png" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -171,22 +224,39 @@ export default {
           bg: "#165DFF",
           textColor: "#1D2129",
         },
-        3: {
+        5: {
           text: "已退款",
           bg: "#EF21DA",
           textColor: "#EF21DA",
         },
-        4: {
+        3: {
           text: "支付失败",
           bg: "#FF7D00",
           textColor: "#1D2129",
         },
         0: {
-          text: "申请退款中",
+          text: "未支付",
           bg: "#F53F3F",
           textColor: "#F53F3F",
         },
       },
+      refundStatusList: {
+        2: {
+          text: "审核通过",
+          bg: "#00B42A",
+          textColor: "#1D2129",
+        },
+        0: {
+          text: "待审核",
+          bg: "#165DFF",
+          textColor: "#1D2129",
+        },
+        1: {
+          text: "驳回",
+          bg: "#FF7D00",
+          textColor: "#1D2129",
+        },
+      },
       typeList: {
         2: {
           text: "报纸",
@@ -229,6 +299,8 @@ export default {
       dataSort: {},
       tableLoading: false,
       tableHeight: "", // 表格高度
+      kefuShow: true, // 是否显示客服
+      kefuCode: false, // 显示客服二维码
     };
   },
   //计算属性 类似于data概念
@@ -317,6 +389,31 @@ export default {
           this.tableLoading = false;
         });
     },
+    // 申请退款
+    handleApply(obj, index) {
+      let updataData = JSON.parse(JSON.stringify(obj));
+      this.$confirm("确定申请退款吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let Mname = "/ShopServer/Client/OrderManager/SubmitOrderRefundApply";
+          let data = {
+            order_id: obj.id,
+          };
+          getLogin(Mname, data).then((res) => {
+            if (res.status === 1) {
+              this.$message({
+                type: "success",
+                message: "申请成功!",
+              });
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {});
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -385,7 +482,7 @@ export default {
   .apply {
     font-size: 14px;
     line-height: 22px;
-    color: #86909c;
+    color: #165dff;
   }
   .items-type {
     padding: 1px 8px;
@@ -406,5 +503,25 @@ export default {
     margin-left: 8px;
     cursor: pointer;
   }
+  .kefu-box {
+    position: fixed;
+    right: 0;
+    bottom: 300px;
+    z-index: 3;
+    cursor: pointer;
+    background: #ffffff;
+    img {
+      width: 150px;
+    }
+    .kefu-img {
+      width: 60px;
+    }
+    span {
+      display: block;
+      text-align: center;
+      font-size: 12px;
+      line-height: 1.4;
+    }
+  }
 }
 </style>