feat: 企微助手 - 群活码 - 新建页面&选择群聊组件&新建接口联调

project/src/assets/config/interface_api.js

@@ -182,6 +182,10 @@ var api = {
   channel_trend_staffList: '/api/sq/staffList',
 
   groupCode_ruleList: '/api/qrcodeChatGroup/ruleList',
+  groupCode_setRule: '/api/qrcodeChatGroup/setRule',
+  groupCode_editRule: '/api/qrcodeChatGroup/editRule',
+  groupCode_ruleDetail: '/api/qrcodeChatGroup/ruleDetail',
+  groupCode_chatGroupList: '/api/chatGroup/chatGroupList',
 
   radar_addGroup: '/api/radar/radarGroupCreate',
   radar_groupList: '/api/radar/radarGroupList',

project/src/components/groupCode/components/chatGroupOptions.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="common-screen-item">
+    <el-popover append-to-body placement="bottom" trigger="click" v-model="dialogVisible">
+      <div
+        slot="reference"
+        :style="width ? 'width:' + width : ''"
+        :class="['common-screen-self-box', 'common-input-select', chatListResult.length ? 'common-input-select-hover' : '']"
+      >
+        <div :class="['common-screen-self-con', chatListResult.length ? '' : 'common-screen-self-placeholder']">
+          <div class="common-screen-self-con-div">
+            <span v-if="chatListResult.length">{{ chatListResultName }}</span>
+            <span v-else>请选择群聊</span>
+          </div>
+        </div>
+        <div class="common-screen-self-icon"><i class="el-icon-arrow-down" /></div>
+      </div>
+
+      <div class="flex" style="padding:10px" v-loading="loading">
+        <div class="propoverItem">
+          <self-input :reset="reset" :hasLabel="false" label_name="群名称" width="270px" style="margin-top: 0;" @inputChange="onChangeKeyword" />
+          <div class="allMember">全部群聊({{ chatList && chatList.length }}):</div>
+          <div class="memberBoxBig self-scrollbar-3">
+            <div class="memberBox" v-for="(item, idx) in chatList" :key="item.chat_id">
+              <div class="meberList">
+                <div class="memberItem" @click="handleSwitchChatItem(item, idx)">
+                  <div class="flex" style="flex:1">
+                    <i class="el-icon-chat-dot-round chat-icon" />
+                    <div class="memberInfo">
+                      <div class="name">{{ item.name }}</div>
+                      <!-- <div class="other">公告：{{ item.notice }}</div> -->
+                    </div>
+                  </div>
+                  <div :class="['checkbox', item.isSelected ? 'checkbox_active' : '']">
+                    <i class="el-icon-check" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="line" />
+
+        <div class="propoverItem" style="padding-left:20px">
+          <div class="title">已选择的群聊</div>
+          <div class="choice_result_top">
+            <div class="clear" @click="handleDelAllSelectedChat">全部清空</div>
+            <div class="result_num">已选择<span>{{ chatListSelected.length }}</span>个群</div>
+          </div>
+          <div class="member_result self-scrollbar-3">
+            <div class="memberItem" v-for="(item, idx) in chatListSelected" :key="item.chat_id">
+              <div class="flex" style="flex:1">
+                <i class="el-icon-chat-dot-round chat-icon" />
+                <div class="memberInfo">
+                  <div class="name">{{ item.name }}</div>
+                  <!-- <div class="other">公告：{{ item.notice }}</div> -->
+                </div>
+              </div>
+              <i class="el-icon-close" style="margin-left:10px" @click="handleDelSelectedChat(idx)" />
+            </div>
+          </div>
+          <div class="buttons">
+            <el-button type="primary" plain size="mini" @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" size="mini" @click="onClickConfirm">确定</el-button>
+          </div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import _lodash from 'lodash'
+import selfInput from '@/components/assembly/screen/input.vue'
+export default {
+  name: "chatGroupOptions",
+  components: {
+    selfInput,
+  },
+  props: {
+    width: {
+      type: String,
+      default: () => ''
+    },
+    chatListResult: { // 最终确认选择的群列表
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      reset: false,
+      loading: false,
+      dialogVisible: false, // 控制弹框显示
+      keyword: '',
+      chatList: [], // 可选择客户群列表
+      chatListSelected: [], // 已选择的群列表
+    }
+  },
+  computed: {
+    chatListResultName() {
+      const arr = this.chatListResult.map(c => c.name)
+      return arr.join(',')
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        this.handleGetChatList()
+      } else { // 清空搜索关键字
+        this.keyword = ''
+        this.reset = !this.reset
+      }
+    },
+  },
+  methods: {
+    // 获取"可选择客户群列表"
+    async handleGetChatList() {
+      console.log('handleGetChatList => ', )
+      try {
+        this.loading = true
+        this.chatList = []
+        const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.groupCode_chatGroupList, {
+          params: { keyword: this.keyword }
+        })
+        if (res && res.errno == 0) {
+          this.chatList = res.rst.map(item => ({
+            ...item,
+            isSelected: false
+          }))
+
+          // 如果父组件已有选择的结果 => 根据"最终确认选择的群列表"获取"已选列表"
+          if (this.chatListResult.length) {
+            this.handleGetChatListSelected()
+          }
+          // 根据"已选列表" => 回显"可选列表"的已选状态
+          this.handleGetIsSelectedChatStatus()
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    onChangeKeyword(val) {
+      this.keyword = val
+      this.handleGetChatList()
+    },
+    // 取消可选列表中所有的已选状态
+    handleCloseAllChatList() {
+      this.chatList.forEach(c => {
+        c.isSelected = false
+      })
+    },
+    // 根据"最终确认选择的群列表"获取"已选列表"
+    handleGetChatListSelected() {
+      this.chatListResult.forEach(item => {
+        const isFound = this.chatList.find(c => c.chat_id === item.chat_id)
+        if (isFound) {
+          const isHas = this.chatListSelected.find(c => c.chat_id === isFound.chat_id)
+          !isHas && this.chatListSelected.push(isFound)
+        }
+      })
+    },
+    // 根据"已选列表" => 回显"可选列表"的已选状态
+    handleGetIsSelectedChatStatus() {
+      this.handleCloseAllChatList()
+      this.chatListSelected.forEach(item => {
+        // 查找当前已选的索引
+        const idx = this.chatList.findIndex(chat => chat.chat_id === item.chat_id)
+        if (idx !== -1) this.chatList[idx].isSelected = true
+      })
+    },
+    // 监听点击"可选列表 - 项" => 切换已选状态
+    handleSwitchChatItem(currentChat, currentIdx) {
+      if (currentChat.isSelected) {
+        // 已选 => 取消 & 从 chatListSelected 列表中移除
+        this.chatList[currentIdx].isSelected = false
+        const delIdx = this.chatListSelected.findIndex(chat => chat.chat_id === currentChat.chat_id)
+        if (delIdx !== -1) this.chatListSelected.splice(delIdx, 1)
+      } else {
+        // 未选 => 选择 & 添加到 chatListSelected 列表
+        this.chatList[currentIdx].isSelected = true
+        this.chatListSelected = [...this.chatListSelected, currentChat]
+      }
+    },
+    // 监听点击"已选列表 - 项" => 删除 & 回显"可选列表"的已选状态
+    handleDelSelectedChat(currentDelIdx) {
+      this.chatListSelected.splice(currentDelIdx, 1)
+      this.handleGetIsSelectedChatStatus()
+    },
+    // 监听点击"全部清空" => 删除全部 & 回显"可选列表"的已选状态
+    handleDelAllSelectedChat() {
+      this.chatListSelected = []
+      this.handleGetIsSelectedChatStatus()
+    },
+    // 监听点击"确定"
+    onClickConfirm() {
+      if (!this.chatListSelected.length) {
+        this.$message.warning('请选择群聊')
+        return
+      }
+      this.$emit('change', _lodash.cloneDeep(this.chatListSelected))
+      this.dialogVisible = false
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.propoverItem {
+  width: 300px;
+  flex: 1;
+  height: 100%;
+
+  .allMember {
+    color: #666666;
+    font-size: 14px;
+    line-height: 20px;
+    margin-top: 17px;
+  }
+
+  .title {
+    color: #383e47;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+  }
+
+  .choice_result_top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 7px 0;
+
+    .clear {
+      color: #00b38a;
+      font-size: 13px;
+      line-height: 18px;
+      cursor: pointer;
+      font-weight: bold;
+    }
+
+    .result_num {
+      color: #333333;
+      font-size: 13px;
+      line-height: 18px;
+
+      span {
+        color: #00b38a;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .member_result {
+    height: 380px;
+    overflow-y: auto;
+    padding-right: 15px;
+    .memberItem {
+      margin: 20px 0;
+    }
+  }
+}
+
+.line {
+  width: 0.5px;
+  background: #c3cbd6;
+}
+
+.propoverItem,
+.line {
+  height: 478px;
+}
+
+.memberBoxBig {
+  height: 400px;
+  overflow-y: auto;
+}
+
+.memberBox {
+  display: flex;
+  margin-top: 10px;
+
+  .el-icon-caret-bottom {
+    color: #46a7ff;
+    cursor: pointer;
+    margin-right: 7px;
+    margin-top: 2px;
+    transition: all 0.3s;
+    display: block;
+    height: 14px;
+  }
+
+  .meberList {
+    flex: 1;
+    margin-right: 15px;
+
+    .department {
+      i {
+        color: #46a7ff;
+      }
+
+      span {
+        color: #383e47;
+        font-size: 14px;
+        line-height: 20px;
+        margin-left: 5px;
+        font-weight: bold;
+      }
+    }
+
+    .checkbox {
+      width: 15px;
+      height: 15px;
+      border: 1px solid #979797;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      margin-left: 10px;
+
+      i {
+        color: transparent;
+      }
+
+      &.checkbox_active {
+        i {
+          color: #ffffff;
+        }
+
+        background: #00b38a;
+        border-color: #00b38a;
+      }
+    }
+  }
+}
+
+.memberItem,
+.department {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.memberItem {
+  margin: 4px 0;
+
+  .memberImg {
+    width: 38px;
+    height: 38px;
+    border-radius: 4px;
+  }
+
+  .chat-icon {
+    font-size: 26px;
+  }
+
+  .memberInfo {
+    margin-left: 7px;
+    flex: 1;
+
+    .name {
+      color: #333333;
+      font-size: 13px;
+      line-height: 18px;
+    }
+
+    .other {
+      color: #898d92;
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}
+
+.reversalAnimation {
+  transform: rotate(-90deg);
+}
+
+.buttons {
+  text-align: right;
+  padding: 20px 0 10px;
+}
+</style>
+

project/src/components/groupCode/createGroupCode.vue

@@ -1,18 +1,349 @@
 <template>
-  <div>
-    新建群活码
+  <div class="create-wrap">
+    <!-- S 返回 -->
+    <div class="backBox" @click="$router.go(-1)">
+      <div class="back">
+        <i class="el-icon-back" />
+        <span>返回</span>
+      </div>
+    </div>
+    <!-- E 返回 -->
+    <!-- S 表单内容 -->
+    <div v-loading="loading" class="bg-ffffff createMassMsg" style="padding: 15px 30px;">
+      <!-- S 基础信息 -->
+      <h3 class="bigTitle">基础信息</h3>
+      <div class="regulations">
+        <label><em>*</em>渠道名称</label>
+        <el-input
+          v-model.trim="groupForm.name"
+          placeholder="请输入渠道名称"
+          style="width:300px"
+          maxlength="32"
+          size="small"
+          show-word-limit
+          clearable
+        />
+      </div>
+      <div class="regulations" style="align-items: center">
+        <label><em style="opacity: 0;">*</em>选择分组</label>
+        <el-select
+          v-model="groupForm.group_id"
+          size="small"
+          clearable
+          filterable
+          placeholder="请选择分组"
+          style="width: 300px"
+        >
+          <el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <div class="newGroupCss" @click="$refs.dialogGroupRef.dialogVisible = true">新建分组</div>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>选择群聊</label>
+        <chatGroupOptions
+          ref="chatGroupOptions"
+          style="margin: 0;"
+          width="300px"
+          :chatListResult="groupForm.chat_id_list"
+          @change="onChangeChatGroup"
+        />
+      </div>
+      <div class="regulations">
+        <label><em style="opacity: 0;">*</em>进群方式</label>
+        <el-radio-group v-model="groupForm.join_type">
+          <el-radio :label="1">顺序进群</el-radio>
+          <el-radio :label="2">随机进群</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="regulations" style="align-items: center">
+        <label>渠道群管理</label>
+        <div @click="handleShowLimitTips" class="limitBox">
+          <el-switch
+            v-model="groupForm.is_limit"
+            :disabled="!groupForm.chat_id_list.length"
+            active-color="#13ce66"
+            inactive-color="#ddd"
+            :active-value="1"
+            :inactive-value="0"
+            @change="onChangeSwitchLimit"
+          />
+        </div>
+      </div>
+      <div v-show="groupForm.is_limit" class="listBox">
+        <el-table border :data="groupForm.chat_id_list" tooltip-effect="dark" :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}" style="width: 100%">
+          <el-table-column label="群名称" align="center" prop="name" />
+          <el-table-column label="人数上限" align="center">
+            <template slot="header" slot-scope="scope">
+              <em style="color: #ff0000;">*</em>人数上限
+            </template>
+            <template slot-scope="{ row }">
+              <el-input size="mini" v-model="row.user_limit" />
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center">
+            <template slot-scope="{ row }">
+              <el-switch
+                v-model="row.status"
+                :active-value="1"
+                :inactive-value="0"
+                active-color="#13ce66"
+                inactive-color="#ddd"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="80px">
+            <template slot-scope="{ row, $index }">
+              <div class="c-00B38A pointer lMar8" @click="onClickDelChat(row, $index)">删除</div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- E 基础信息 -->
+
+      <!-- S 客服设置 -->
+      <div class="line" style="margin-top:20px"></div>
+      <h3 class="bigTitle">客服设置</h3>
+      <div class="regulations" style="align-items: center">
+        <label><em>*</em>生效成员</label>
+        <self-customerservice
+          title=''
+          width="300px"
+          source="channelCode"
+          ref="selfKefu"
+          style="margin:0;"
+          :afferent_users="groupForm.user_list"
+          @customerDefine="onChangeUserList"
+        />
+        <div class="user-tips">当客户点击客服时，会引导客户随机添加一名客服成员的企业微信</div>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>引导话术</label>
+        <el-input
+          v-model.trim="groupForm.leading_words"
+          placeholder="请输入引导话术"
+          style="width:300px"
+          maxlength="20"
+          size="small"
+          show-word-limit
+          clearable
+        />
+      </div>
+      <!-- E 客服设置 -->
+
+
+      <!-- S 按钮 -->
+      <div class="line" style="margin-top:20px" />
+      <div style="margin-top: 20px"><el-button type="primary" @click="onClickSave">保存</el-button></div>
+      <!-- E 按钮 -->
+    </div>
+    <!-- E 表单内容 -->
+
+    <!-- S 新建分组 - 弹框 -->
+    <dialogGroup
+      ref="dialogGroupRef"
+      :propsData="{ dialogTitle:'新建' }"
+      @init="handleGetGroupOptions"
+    />
+    <!-- E 新建分组 - 弹框 -->
   </div>
 </template>
 
 <script>
+import dialogGroup from './components/dialogGroup.vue'
+import chatGroupOptions from './components/chatGroupOptions.vue'
+import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+import Sortable from 'sortablejs'
+
 export default {
   name: "createGroupCode",
-  components: {},
+  components: {
+    dialogGroup,
+    chatGroupOptions,
+    selfCustomerservice,
+  },
   data() {
-    return {}
+    return {
+      loading: false,
+      groupOptions: [], // 分组选项
+      groupForm: {
+        name: '', // 渠道名称
+        group_id: '', // 分组id
+        chat_id_list: [], // 客户群列表
+        join_type: 1, // 进群方式
+        is_limit: 0, // 渠道群管理（是否设置群上限）
+        user_list: [], // 客服（生效成员） 数组回显 'a,b' => ['a', 'b']
+        leading_words: '', // 引导话术
+      }
+    }
+  },
+  computed: {
+    isEdit() {
+      const { id = '', type = '' } = this.$route.query
+      return id && type === 'edit'
+    },
+    isCopy() {
+      const { id = '', type = '' } = this.$route.query
+      return id && type === 'copy'
+    },
+  },
+  created() {
+    // 获取分组列表
+    this.handleGetGroupOptions()
+  },
+  mounted() {
+    // 表格行拖拽
+	  this.handleRowDrop()
+  },
+  methods: {
+    // 注册表格行拖拽事件
+    handleRowDrop() {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex == oldIndex) return
+          _this.groupForm.chat_id_list.splice(
+            newIndex,
+            0,
+            _this.groupForm.chat_id_list.splice(oldIndex, 1)[0]
+          )
+          const newArray = _this.groupForm.chat_id_list.slice(0)
+          _this.groupForm.chat_id_list = []
+          _this.$nextTick(() => {
+            _this.groupForm.chat_id_list = newArray
+            _this.$refs.chatGroupOptions.chatListSelected = [] // 重置群聊组件"已选列表"
+          })
+        }
+      })
+    },
+    // 点击保存按钮
+    async onClickSave() {
+      console.log('onClickSave this.groupForm => ', JSON.parse(JSON.stringify(this.groupForm)))
+      try {
+        // 表单判空校验
+        await this.handleFormValidate()
+        // 获取请求地址 & 参数
+        const { url, params } = this.handleGetParams()
+
+        console.log('params => ', JSON.parse(JSON.stringify(params)))
+        console.log('url => ', url)
+
+        this.loading = true
+        const { data: res } = await this.$axios.post(url, params)
+        console.log('res => ', res)
+        if (res && res.errno == 0) {
+          this.$message.success('保存成功')
+          this.$router.go(-1)
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err || '操作失败')
+        }
+      } catch (error) {
+        console.log('error => ', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    // 表单校验
+    handleFormValidate() {
+      const { name, chat_id_list, is_limit, user_list, leading_words } = this.groupForm
+      const isEmpty = chat_id_list.some(chat => Number(chat.user_limit) === 0)
+      return new Promise((resolve, reject) => {
+        if (!name) {
+          this.$message.warning('请输入渠道名称')
+          reject('表单校验未通过')
+        } else if (!chat_id_list.length) {
+          this.$message.warning('请选择群聊')
+          reject('表单校验未通过')
+        } else if (is_limit === 1 && isEmpty) {
+          this.$message.warning('请输入人数上限')
+          reject('表单校验未通过')
+        } else if (!user_list.length) {
+          this.$message.warning('请选择生效成员')
+          reject('表单校验未通过')
+        } else if (!leading_words) {
+          this.$message.warning('请输入引导话术')
+          reject('表单校验未通过')
+        } else {
+          resolve('表单校验通过')
+        }
+      })
+    },
+    // 整理请求参数
+    handleGetParams() {
+      const url = `${this.URL.BASEURL}${this.URL[this.isEdit ? 'groupCode_editRule' : 'groupCode_setRule']}`
+      const { name, group_id, join_type, is_limit, user_list, leading_words, chat_id_list } = this.groupForm
+      const params = {
+        name,
+        group_id,
+        join_type,
+        is_limit,
+        user_list: user_list.join(','),
+        leading_words,
+        chat_id_list: JSON.stringify(chat_id_list),
+      }
+
+      return { url, params }
+    },
+    // 获取分组列表
+    async handleGetGroupOptions() {
+      const { data: res = {} } = await this.$axios.get(this.URL.BASEURL + this.URL.channel_groupList, {
+        params: {
+          type: 2, // 1:渠道活码 2:群活码
+          page: 1,
+          pagesize: 500,
+        }
+      })
+      if (res && res.errno == 0) {
+        this.groupOptions = res.rst.data
+      } else if (res.errno != 4002) {
+        this.$message.warning(res.err)
+      }
+    },
+    // 渠道群管理提示
+    handleShowLimitTips() {
+      if (!this.groupForm.chat_id_list.length) {
+        this.$message.error('请先选择群聊')
+      }
+    },
+    onChangeSwitchLimit(){
+      if (!this.groupForm.chat_id_list.length) {
+        this.$message.error('请先选择群聊')
+        return
+      }
+    },
+    // 渠道群管理列表 - 删除
+    onClickDelChat(row, idx) {
+      this.groupForm.chat_id_list.splice(idx, 1)
+      this.$refs.chatGroupOptions.chatListSelected = [] // 重置群聊组件"已选列表"
+      // 列表为空 => 关闭"渠道群管理"按钮
+      if (!this.groupForm.chat_id_list.length) {
+        this.groupForm.is_limit = 0
+      }
+    },
+    // 监听"选择客服"(生效成员)变化
+    onChangeUserList(val) {
+      this.groupForm.user_list = Array.isArray(val) && val.length ? val : []
+    },
+    // 监听"选择群聊"变化
+    onChangeChatGroup(selectedChat) {
+      const { chat_id_list: currentChats } = this.groupForm
+      // 整理数据结构 => 初始化新选择的群聊数据
+      const newChats = selectedChat.map(s => ({
+        chat_id: s.chat_id,
+        name: s.name,
+        user_limit: 0,
+        enable: 1,
+        status: 1,
+      }))
+      // 在"当前页面的群聊列表"中查找是否已存在 => 去重后得到当前页面新群聊列表
+      newChats.forEach((newChat, idx) => {
+        const isFoundChat = currentChats.find(c => newChat.chat_id === c.chat_id)
+        if (isFoundChat) newChats.splice(idx, 1, isFoundChat)
+      })
+      this.groupForm.chat_id_list = [...newChats]
+      console.log('this.groupForm.chat_id_list => ', this.groupForm.chat_id_list)
+    },
   },
-  created(){},
-  methods:{},
 }
 </script>
 <style lang="scss">
@@ -28,7 +359,98 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-@import "../customOperate/create.scss";
+.backBox {
+  background: #ffffff;
+  padding: 15px;
+  margin-bottom: 10px;
+  .back {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333333;
+    cursor: pointer;
+    display: inline-block;
+  }
+}
+.bigTitle {
+  color: #333333;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: bold;
+}
+.createMassMsg{
+  width: 100%;
+  min-height: 400px;
+
+  .line {
+    width: 730px;
+    height: 1px;
+    background: #e9e9e9;
+    margin: 40px 0 20px;
+  }
+  .regulations {
+    display: flex;
+    align-items: flex-start;
+    margin-top: 28px;
+    label {
+      width: 100px;
+      color: #333333;
+      font-size: 14px;
+      line-height: 28px;
+      em {
+        color: #ff0000;
+      }
+    }
+    .user-tips {
+      color: #AAAAAA;
+      font-size: 13px;
+      margin-left: 20px;
+    }
+  }
+  .regulations2 {
+    label {
+      width: 70px;
+      line-height: 30px;
+    }
+  }
+}
+.detail_status{
+  line-height: 30px;
+  height: 30px;
+  padding: 3px 10px;
+  border-radius: 21px;
+  font-size: 12px;
+  margin-left: 20px;
+}
+.status_wait{
+  background: #FFF2ED;
+  border: 1px solid #FF864F;
+  color: #FF864F;
+}
+.status_del{
+  background: #FFF5F5;
+  border: 1px solid #FF604D;
+  color: #FF604D;
+}
+.status_fail{
+  background: #F4F4F4;
+  border: 1px solid #ADADAD;
+  color: #ADADAD;
+}
+.status_ing{
+  background: #F4FAFF;
+  border: 1px solid #007AFE;
+  color: #007AFE;
+}
+.status_success{
+  background: #EEFFF3;
+  border: 1px solid #00B38A;
+  color: #00B38A;
+}
+.splitLine {
+  width: 100%;
+  height: 10px;
+  background: #f5f6f8;
+}
 .listBox{
   margin-left: 90px;
   width: 730px;