1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/views/modules/c2c/c2c-order-other-msg.vue

New file
@@ -0,0 +1,939 @@
<template>
  <el-dialog
    title="订单详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handClose"
    width="1200px"
    class="transport-dialog"
  >
    <div class="allBox">
      <!-- 左侧详情 -->
      <div class="leftBox">
        <div class="minibox" v-if="roleList.direction == 'buy'">
          {{ roleList.c2c_user_nick_name }}向{{ roleList.username }}出售<span
            class="moneyText"
            >{{ roleList.coin_amount + roleList.symbol }}</span
          >
        </div>
        <div class="minibox" v-if="roleList.direction == 'sell'">
          {{ roleList.username }}向{{ roleList.c2c_user_nick_name }}出售<span
            class="moneyText"
            >{{ roleList.coin_amount + roleList.symbol }}</span
          >
        </div>
        <div class="miniMiddle">
          <div class="chetBox">
            <span class="cicle"></span>
            <div class="title">订单信息</div>
            <div class="miniTitle">
              <span class="titLeft">订单号</span>
              <span class="titRight">订单状态</span>
            </div>
            <div class="textTitle">
              <span class="textBush">{{ roleList.order_no }}</span>
              <span class="textFig yellow" v-if="roleList.state == '0'"
                >待付款</span
              >
              <span class="textFig yellow" v-if="roleList.state == '1'"
                >已付款</span
              >
              <span class="textFig red" v-if="roleList.state == '2'"
                >申诉中</span
              >
              <span class="textFig green" v-if="roleList.state == '3'"
                >已完成</span
              >
              <span class="textFig yellow" v-if="roleList.state == '4'"
                >已取消</span
              >
              <span class="textFig red" v-if="roleList.state == '5'"
                >已超时</span
              >
            </div>
          </div>
          <div class="chetBox">
            <span class="cicle"></span>
            <div class="title">价格</div>
            <div class="miniTitle">
              <span class="titLeft">单价</span>
              <span class="titRight">总价</span>
            </div>
            <div class="textTitle">
              <span class="textBush">{{
                roleList.symbol_value +
                roleList.currency +
                "/" +
                roleList.symbol
              }}</span>
              <span class="textFig green">{{
                roleList.amount + roleList.currency
              }}</span>
            </div>
          </div>
          <div class="chetBox">
            <span class="cicle"></span>
            <div class="title">时间</div>
            <div class="miniTitle">
              <span class="titLeft">下单时间</span>
              <span class="titRight" v-if="roleList.pay_time">付款时间</span>
            </div>
            <div class="textTitle">
              <span class="textBush">{{ roleList.create_time }}</span>
              <span class="textFigTwo">{{ roleList.pay_time }}</span>
            </div>
          </div>
          <div class="chetBox">
            <span class="cicle"></span>
            <div class="title">收款信息</div>
            <div class="miniTitle menuBox">
              <span class="titLeft">支付方式类型</span>
              <span class="textmela">{{ dataForm.method_type_name }}</span>
            </div>
            <div class="textTitle menuBox">
              <span class="titLeft">支付方式名称</span>
              <span class="textmela">{{ dataForm.method_name }}</span>
            </div>
            <div class="miniTitle menuBox">
              <span class="titLeft">真实姓名</span>
              <span class="textmela">{{ dataForm.real_name }}</span>
            </div>
            <div>
              <div
                class="miniTitle menuBox"
                v-for="(item, index) in list"
                :key="index"
              >
                <span class="titLeft">{{ item.param_name }}</span>
                <span class="textmela">{{ item.param_value }}</span>
              </div>
            </div>
            <!-- <div class="miniTitle" style="margin-top: 20px">
              <span class="titLeft">真实姓名</span>
              <span class="titRight" v-if="roleList.param_value1">{{
                roleList.param_name1
              }}</span>
              <span class="titRight" v-if="roleList.param_value2">{{
                roleList.param_name2
              }}</span>
              <span class="titRight" v-if="roleList.param_value3">{{
                roleList.param_name3
              }}</span>
              <span class="titRight" v-if="roleList.param_value4">{{
                roleList.param_name4
              }}</span>
              <span class="titRight" v-if="roleList.param_value5">{{
                roleList.param_name5
              }}</span>
              <span class="titRight" v-if="roleList.param_value6">{{
                roleList.param_name6
              }}</span>
              <span class="titRight" v-if="roleList.param_value7">{{
                roleList.param_name7
              }}</span>
              <span class="titRight" v-if="roleList.param_value8">{{
                roleList.param_name8
              }}</span>
              <span class="titRight" v-if="roleList.param_value9">{{
                roleList.param_name9
              }}</span>
              <span class="titRight" v-if="roleList.param_value10">{{
                roleList.param_name10
              }}</span>
              <span class="titRight" v-if="roleList.param_value11">{{
                roleList.param_name11
              }}</span>
              <span class="titRight" v-if="roleList.param_value12">{{
                roleList.param_name12
              }}</span>
              <span class="titRight" v-if="roleList.param_value13">{{
                roleList.param_name13
              }}</span>
              <span class="titRight" v-if="roleList.param_value14">{{
                roleList.param_name14
              }}</span>
              <span class="titRight" v-if="roleList.param_value15">{{
                roleList.param_name15
              }}</span>
            </div>
            <div class="textTitle">
              <span class="textBush">{{ roleList.real_name }}</span>
              <span class="textFigTwo" v-if="roleList.param_value1">{{
                roleList.param_value1
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value2">{{
                roleList.param_value2
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value3">{{
                roleList.param_value3
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value4">{{
                roleList.param_value4
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value5">{{
                roleList.param_value5
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value6">{{
                roleList.param_value6
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value7">{{
                roleList.param_value7
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value8">{{
                roleList.param_value8
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value9">{{
                roleList.param_value9
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value10">{{
                roleList.param_value10
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value11">{{
                roleList.param_value11
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value12">{{
                roleList.param_value12
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value13">{{
                roleList.param_value13
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value14">{{
                roleList.param_value14
              }}</span>
              <span class="textFigTwo" v-if="roleList.param_value15">{{
                roleList.param_value15
              }}</span>
            </div> -->
            <div v-if="roleList.qrcode" class="miniTitle" style="margin-top: 20px">
              <span class="titLeft">支付二维码</span>
            </div>
            <div v-if="roleList.qrcode">
              <img :src="roleList.qrcode" alt="" width="150" height="150" />
            </div>
          </div>
          <div class="chetBox">
            <span class="cicle"></span>
            <div class="title">操作</div>
            <div>
              <el-button
                type="primary"
                size="medium"
                v-if="
                  roleList.direction == 'buy' &&
                  (roleList.state == '1' ||
                    roleList.state == '2' ||
                    roleList.state == '5')
                "
                @click.stop="passtHandle(row, 'n')"
                >手动放行</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="medium"
                v-if="
                  roleList.direction == 'sell' &&
                  (roleList.state == '1' ||
                    roleList.state == '2' ||
                    roleList.state == '5')
                "
                @click.stop="passtHandle(row, 'n')"
                >已付款管理员手动放行</el-button
              >
              <el-button
                type="primary"
                size="medium "
                v-if="roleList.state == '0' && roleList.direction == 'buy'"
                @click.stop="passtHandle(row)"
                >一键通过</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="medium"
                v-if="
                  roleList.direction == 'sell' &&
                  (roleList.state == '0' || roleList.state == '2')
                "
                @click.stop="passtSellHandle(row)"
                >手动转账</el-button
              >
              <el-button
                type="text"
                size="medium"
                v-if="
                  roleList.state == '0' ||
                  roleList.state == '1' ||
                  roleList.state == '2' ||
                  
                  roleList.state == '5'
                "
                @click.stop="deletOrdeHandle(row)"
                style="margin-left: 70px"
                >取消订单</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧聊天框 -->
      <div class="rightBox">
        <div class="kefu">
          <div
            :isActive="true"
            :w="500"
            :h="620"
            v-on:resizing="resize"
            class="kefu-tuozhuai"
            @activated="activateEv"
            :isResizable="false"
            v-on:dragging="resize"
            :isDrag="false"
          >
            <div class="kefu-title">
              <div id="panel-header" class="header">
                <div class="module1 left-module left-1">
                  <div
                    style="
                      width: 100%;
                      height: 100%;
                      display: flex;
                      justify-content: space-between;
                    "
                  >
                    <div class="module" style="">
                      <div>
                        <span class="nickname">{{ dataForm.username }}</span>
                      </div>

                      <!-- <div>
                          <span class="nickname">{{ params.remarks ? '(' + params.remarks + ')' : '' }}</span>
                        </div> -->

                      <!-- <div class="pointer" style="height: auto;padding-left: 10px;" @click="editFriendRemarks(params)">
                          <img src="~@/assets/img/ri_delete-bin-3-line.png" width="24px" height="25px"/>
                        </div>

                        <div>
                          <span class="nickname">设置备注</span>
                        </div> -->
                    </div>

                    <!-- <div class="module" style="height: auto;display: flex;justify-content: flex-end;">
                        <div class="pointer" style="height: auto;margin-right: 40px;" @click="deleteChat(params)">
                          <i class="el-icon-delete"></i>
                        </div>
                        <div class="pointer" style="height: auto;margin-right: 20px;" @click="close()">
                          <img src="~@/assets/img/clear.png" width="28px" height="28px"/>
                        </div>       
                      </div> -->
                  </div>
                </div>
                <div class="module left-module left-2">
                  <span class="text1">UID:{{ dataForm.usercode }}</span>
                  <span class="text1"
                    >账户类型:<span style="color: #38e1a5">{{
                      dataForm.roleNameDesc
                    }}</span></span
                  >
                  <!-- <span class="text1">推荐人:{{ params.recom_parent_name }}</span> -->
                  <!-- <span class="text1">登录IP:{{ params.loginIp }}</span> -->
                  <span class="text1">订单时间:{{ dataForm.create_time }}</span>
                  <!-- <span class="text1">最后登录时间:{{ params.last_login_time }}</span> -->
                </div>
              </div>
              <!-- <span>在线客服</span> -->
              <!-- <img  src="@/assets/img/Group609.png" @click="show_kefu=false" /> -->
            </div>
            <div class="kegu-nrkegu-nr">
              <chat ref="chat" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDiog()">取消</el-button>
      <el-button type="primary" @click="closeDiog()">确定</el-button>
    </span>
    <!-- 取消订单 -->
    <passtpn
      v-if="passtpnVisible"
      @refreshDataList="getC2cManagerInfo"
      :append-to-body="true"
      ref="passtpnUpdate"
    >
    </passtpn>
    <!-- 取消订单 -->
    <deletMsg
      v-if="deletVisible"
      @refreshDataList="getC2cManagerInfo"
      :append-to-body="true"
      ref="deletUpdate"
    >
    </deletMsg>
        <!-- 手动转账 -->
        <passSelltpn
      v-if="passSelltpnVisible"
      @refreshDataList="getC2cManagerInfo"
      ref="passSelltUpdate"
    >
    </passSelltpn>
  </el-dialog>
</template>

<script>
import { Debounce } from "@/utils/debounce";
import passtpn from "./c2c-ord-passtpn";
import { encrypt } from "@/utils/crypto";
import VueDragResize from "vue-drag-resize";
import Chat from "@/components/chat2";
import deletMsg from "./c2c-ord-delet";
import passSelltpn from "./c2c-ord-passtSellpn";
export default {
  data() {
    return {
      hasFreeCondition: 0,
      visible: false,
      row:'',
      list:[],
      addOrUpdateVisible: false,
      passSelltpnVisible:false,
      passtpnVisible: false,
      deletVisible: false,
      dataForm: {
        id: "",
      },
      roleList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      dataRule: {
        login_safeword: [
          { required: true, message: "资金密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: { VueDragResize, Chat, passtpn, deletMsg,passSelltpn },
  methods: {
    //拖拽事件
    resize(newRect) {},
    activateEv() {
      // 结局文本框无法输入的问题
      if (this.$refs["chat"] && this.$refs["chat"].$refs["input"]) {
        this.$refs["chat"].$refs["input"].focus();
      }
    },
    init(row) {
      console.log(row);
      this.row = row || ''
      this.dataForm = { ...row };
      this.getC2cManagerInfo();
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["chat"].init(this.dataForm);
      });
    },
    handClose() {
      this.$nextTick(() => {
        this.$refs["chat"].close();
      });
      this.list = [],
      this.roleList = []
      this.$emit("refreshDataList", this.page);
      this.$data.dataForm = JSON.parse(
        JSON.stringify(this.$options.data().dataForm)
      );
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate(); // 清除表单验证
      });
    },
    getC2cManagerInfo() {
      //获取详情
      this.$http({
        url: this.$http.adornUrl("/c2cOrder/detail"),
        method: "post",
        data: this.$http.adornData(
          Object.assign({
            order_no: this.dataForm.order_no,
          })
        ),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.roleList = data.data;
          this.formatData()
        }
      });
    },
    formatData() {
      let index = 1;
      console.log(this.roleList)
      Object.keys(this.roleList).forEach((key) => {
        if (key.indexOf("param_name") !== -1) {
          if (this.roleList[key] && this.roleList[key].length > 0) {
            this.list.push({
              ["param_name"]: this.roleList["param_name" + index],
              ["param_value"]: this.roleList["param_value" + index],
            });
            index++;
          }
        }
      });
      console.log(this.list)
    },
    passtHandle(row, n) {
      this.passtpnVisible = true;
      this.$nextTick(() => {
        this.$refs.passtpnUpdate.init(row, n);
      });
    },
    passtSellHandle(row) {
      this.passSelltpnVisible = true;
      this.$nextTick(() => {
        this.$refs.passSelltUpdate.init(row);
      });
    },
    deletOrdeHandle(row) {
      this.deletVisible = true;
      this.$nextTick(() => {
        this.$refs.deletUpdate.init(row);
      });
    },
    // 表单提交
    closeDiog() {
      this.visible = false;
      this.$emit("refreshDataList", this.page);
    },
  },
};
</script>

<style lang="scss" scoped>
.transport-dialog .table-con .el-form-item {
  margin-top: 16px;
  margin-bottom: 16px !important;
}
.allBox {
  width: 100%;
  overflow: hidden;
}
.leftBox {
  width: 550px;
  float: left;
}
.rightBox {
  width: 500px;
  float: right;
  padding: 30px;
  height: 600px;
  // background: yellow;
}
.moneyText {
  font-size: 20px;
}
.minibox {
  height: 50px;
  line-height: 50px;
  letter-spacing: 1px;
  border-bottom: 1px solid #eaecef;
}
.miniMiddle {
  margin-top: 20px;
  overflow: hidden;
  min-height: 800px;
  border-left: 1px solid #eaecef;
}
.cicle {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #1d91ff;
  border-radius: 50%;
  position: absolute;
  left: 13px;
  margin-top: 3px;
}
.chetBox {
  padding-left: 10px;
  margin-bottom: 40px;
}
.title {
  font-size: 17px;
  color: black;
  margin-bottom: 10px;
  font-weight: 540;
}
.titLeft {
  float: left;
  color: #727a89;
  font-size: 14px;
}
.titRight {
  float: right;
  color: #727a89;
}
.textBush {
  float: left;
  font-size: 16px;
  color: black;
}
.textFig {
  float: right;
  font-size: 19px;
}
.textFigTwo {
  float: right;
  font-size: 16px;
  color: black;
}
.textTitle {
  overflow: hidden;
  width: 400px;
}
.miniTitle {
  overflow: hidden;
  margin-bottom: 10px;
  width: 400px;
}
</style>

<style>
#app {
  min-height: 100vh;
  overflow-x: hidden;
}
body {
  margin: 0;
}
/* 客服 */
.service-box {
  bottom: 1px;
  cursor: pointer;
}
.vdr.active:before {
  display: none;
}

/* .item-dropdown-wrapper.el-dropdown-menu,.quotes-dropdown.el-dropdown-menu {
  background: #24282D !important;
  border: 1px solid #24282D !important;
}

.popper__arrow {
  border-bottom-color: #24282D !important;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #24282D !important;
} */

.item-dropdown-wrapper .el-dropdown-menu__item:focus,
.item-dropdown-wrapper .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: transparent !important;
  color: #1d91ff !important;
}

.quotes-dropdown.el-dropdown-menu {
  padding: 0 !important;
}

.quotes-dropdown .el-dropdown-menu__item {
  min-width: 60px !important;
  padding: 6px 13px !important;
}

.quotes-dropdown .el-dropdown-menu__item:hover {
  background: #2c3138 !important;
}
</style>
<style scoped>
.kefu {
  cursor: pointer;
}
.embed-responsive-item {
  width: 100%;
  height: 100%;
  border: none;
}
.kefu-title {
  width: 100%;
  height: 87px;
  position: relative;
  text-align: center;
  background: linear-gradient(
    90.3deg,
    rgba(45, 45, 53, 0.71) 0.21%,
    #23232e 99.83%
  );
  border-radius: 10px 10px 0px 0px;
}
.kegu-nrkegu-nr {
  width: 100%;
  height: 559px;
}
.kefu-title span {
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 61px;
  color: #ffffff;
}
.kefu-title img {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 21px;
  top: 16px;
}

::v-deep .kefu-title .date {
  color: #fff !important;
}
.kefu-tuozhuai {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  outline: none;
  background: #ffffff;
  border-radius: 10px;
}

.kefu-tuozhuai:before {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>

<style lang="less" scoped>
.pointer {
  cursor: pointer;
}

.header {
  // max-width: 1450px;
  // max-width: 1290px;
  width: auto;
  height: 87px;
  background-color: #2e2f33;
  // display: flex;
}

#panel-header {
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom: 1px solid #f5eeee;
  color: #ffffff;

  .module1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .module {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .left-1 {
    background: linear-gradient(90deg, #121212 0%, #2f3032 51.04%, #6e6f75 100%),
      linear-gradient(0deg, #393939, #393939);
    // width: 1171px;
    height: 55px;
    // top: 204px;
    // left: 720px;
    border-radius: 0px 10px 0px 0px;
  }

  .left-2 {
    background-color: #2e2f33;
    // width: 1171px
    height: 32px;
    // top: 259px
    // left: 720px
  }

  .left-module {
    padding-right: 0px;

    .nickname {
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: 500;
      line-height: 25px;
      letter-spacing: 0em;
      text-align: center;

      padding-left: 10px;
    }

    .text1 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 17px;
      letter-spacing: 0em;
      text-align: center;

      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 500;
      line-height: 17px;
      letter-spacing: 0em;
      text-align: center;

      padding-left: 10px;
    }
  }

  .center-module {
    flex-direction: column;
    justify-content: center;

    .online {
      color: #cccccc;
      font-weight: 300;
      font-size: 15px;

      &.color {
        color: #1890ff;
      }

      .online-status {
        position: relative;
        top: -1px;
        display: inline-block;
        width: 6px;
        height: 6px;
        vertical-align: middle;
        border-radius: 50%;
        position: relative;
        background-color: #1890ff;
        margin-right: 5px;

        &:after {
          position: absolute;
          top: -1px;
          left: -1px;
          width: 100%;
          height: 100%;
          border: 1px solid #1890ff;
          border-radius: 50%;
          -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
          animation: antStatusProcessing 1.2s ease-in-out infinite;
          content: "";
        }
      }
    }

    .keyboard-status {
      height: 20px;
      line-height: 18px;
      font-size: 10px;
      animation: inputfade 600ms infinite;
      -webkit-animation: inputfade 600ms infinite;
    }
  }

  .right-module {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    p {
      cursor: pointer;
      margin: 0 8px;
      font-size: 20px;
      color: #828f95;
      &:active i {
        font-size: 26px;
        transform: scale(1.3);
        transition: ease 0.5s;
        color: red;
      }
    }
  }
}

/* css 动画 */
@keyframes inputfade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes inputfade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.5;
  }

  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.5;
  }

  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}
.textmela {
  float: right;
  font-size: 16px;
  color: black;
}
.menuBox {
  border-bottom: 1px dashed #ece9e9;
  margin-top: 25px;
}
</style>