qianzhi-message/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

<template>
  <div class="custom">
    <!-- {{ isCustom }} -->
    <template v-if="isCustom.businessID === 'product_message'">
      <div class="evaluate">
        <div @click="product(isCustom)">
          <div class="left">
            <img
              :src="isCustom.pic"
              style="width: 80px; height: 80px; border-radius: 10px"
            />
            <div class="right">
              <div class="label">
                {{ isCustom.spuName }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx">
                {{ isCustom.price }}元/{{ isCustom.unit }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-else-if="isCustom.businessID === 'modify_order_cost'">
      <div class="evaluate">
        <span style="font-size: 36rpx; line-height: 44rpx"
          >老板,请及时修改订单费用！</span
        >
        <div @click="productOrder(isCustom)" style="margin-top: 10px">
          <div class="left">
            <img
              :src="isCustom.pic"
              style="width: 80px; height: 80px; border-radius: 10px"
            />
            <div class="right">
              <div class="label">
                {{ isCustom.spuName }}
              </div>

              <div style="font-weight: 400; font-size: 28rpx" v-if="userType == 0">
                {{ isCustom.price }}元/{{ isCustom.unit }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-else>
                {{
                  isCustom.goodsAmount + isCustom.serviceFee + isCustom.freightFee
                }}元/{{ isCustom.unit }}
              </div>
            </div>
          </div>
          <div style="line-height: 32px; margin-top: 10px">
            <div>
              <span class="name">姓名 :</span>
              <span class="value">{{ isCustom.consigneeContactName }}</span>
            </div>
            <div>
              <span class="name">电话 :</span>
              <span class="value">{{ isCustom.consigneeContactMobile }}</span>
            </div>
            <div>
              <span class="name">地址 :</span>
              <span class="value">{{ isCustom.consigneeAddressDetail }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-else-if="isCustom.businessID === 'reminder_pay'">
      <div class="evaluate">
        <span style="font-size: 36rpx; line-height: 44rpx">亲,请及时付款！</span>
        <div @click="productOrder(isCustom)" style="margin-top: 10px">
          <div class="left">
            <img
              :src="isCustom.pic"
              style="width: 80px; height: 80px; border-radius: 10px"
            />
            <div class="right">
              <div class="label">
                {{ isCustom.spuName }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-if="userType == 0">
                {{ isCustom.price }}元/{{ isCustom.unit }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-else>
                {{
                  isCustom.goodsAmount + isCustom.serviceFee + isCustom.freightFee
                }}元/{{ isCustom.unit }}
              </div>
            </div>
          </div>
          <div style="line-height: 32px; margin-top: 10px">
            <div>
              <span class="name">姓名 :</span>
              <span class="value">{{ isCustom.consigneeContactName }}</span>
            </div>
            <div>
              <span class="name">电话 :</span>
              <span class="value">{{ isCustom.consigneeContactMobile }}</span>
            </div>
            <div>
              <span class="name">地址 :</span>
              <span class="value">{{ isCustom.consigneeAddressDetail }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === 'order_deliver_goods'">
      <div class="evaluate">
        <span style="font-size: 36rpx; line-height: 44rpx">老板,请尽快发货！</span>
        <div @click="productOrder(isCustom)" style="margin-top: 10px">
          <div class="left">
            <img
              :src="isCustom.pic"
              style="width: 80px; height: 80px; border-radius: 10px"
            />
            <div class="right">
              <div class="label">
                {{ isCustom.spuName }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-if="userType == 0">
                {{ isCustom.price }}元/{{ isCustom.unit }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-else>
                {{
                  isCustom.goodsAmount + isCustom.serviceFee + isCustom.freightFee
                }}元/{{ isCustom.unit }}
              </div>
            </div>
          </div>
          <div style="line-height: 32px; margin-top: 10px">
            <div>
              <span class="name">姓名 :</span>
              <span class="value">{{ isCustom.consigneeContactName }}</span>
            </div>
            <div>
              <span class="name">电话 :</span>
              <span class="value">{{ isCustom.consigneeContactMobile }}</span>
            </div>
            <div>
              <span class="name">地址 :</span>
              <span class="value">{{ isCustom.consigneeAddressDetail }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === 'order_pay'">
      <div class="evaluate">
        <span style="font-size: 36rpx; line-height: 44rpx"
          >订单价格已修改,请及时付款！</span
        >
        <div @click="productOrder(isCustom)" style="margin-top: 10px">
          <div class="left">
            <img
              :src="isCustom.pic"
              style="width: 80px; height: 80px; border-radius: 10px"
            />
            <div class="right">
              <div class="label">
                {{ isCustom.spuName }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-if="userType == 0">
                {{ isCustom.price }}元/{{ isCustom.unit }}
              </div>
              <div style="font-weight: 400; font-size: 28rpx" v-else>
                {{
                  isCustom.goodsAmount + isCustom.serviceFee + isCustom.freightFee
                }}元/{{ isCustom.unit }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <span v-html="content.custom" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { watchEffect, ref } from "../../../../adapter-vue";
import { TUITranslateService, IMessageModel } from "@tencentcloud/chat-uikit-engine";
import { isUrl, JSONToObject } from "../../../../utils/index";
import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
import { ICustomMessagePayload } from "../../../../interface";
import Icon from "../../../common/Icon.vue";
import star from "../../../../assets/icon/star-light.png";
import * as mesApi from "@/api/message/index";
interface Props {
  messageItem: IMessageModel;
  content: any;
}

const props = withDefaults(defineProps<Props>(), {
  messageItem: undefined,
  content: undefined,
});

const custom = ref();
const message = ref<IMessageModel>();
const extension = ref();
const isCustom = ref<ICustomMessagePayload>({
  businessID: "",
});

watchEffect(() => {
  custom.value = props.content;
  message.value = props.messageItem;
  const { payload } = props.messageItem;
  isCustom.value = payload.data || "";
  isCustom.value = JSONToObject(payload.data);

  if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
    extension.value = JSONToObject(payload.extension);
  }
});
const openLink = (url: any) => {
  window.open(url);
};
// const productOrderPay = async (record) => {
//   let userid = uni.getStorageSync("userId");
//   if (userid == record.shopOwnerId) {
//     let res = await mesApi.default.orderDetail(record.orderId);
//     if (res.code == 200) {
//       let item = res.data;
//       webUni.webView.navigateTo({
//         url: `/subpages/my/product-orders/sell-order-details?id=${item.id}&item=${item.consigneeAddress.contact.contactMobile}&orderStatus=${item.orderStatus}&transportStatus=${item.transportStatus}&invoiceStatus=${item.invoiceStatus}&currentIndex=1`,
//       });
//     }
//     console.log(res);
//   } else {
//     webUni.webView.navigateTo({
//       url: `/subpages/my/product-orders/buy-order-details?id=` + record.orderId,
//     });
//   }
// };
const userType = ref();
const productOrder = async (record) => {
  let userid = uni.getStorageSync("userId");
  if (userid == record.shopOwnerId) {
    userType.value = 1;
    let res = await mesApi.default.orderDetail(record.orderId);
    if (res.code == 200) {
      let item = res.data;
      webUni.webView.navigateTo({
        url: `/subpages/my/product-orders/sell-order-details?id=${item.orderId}&item=${item.consigneeAddress.contact.contactMobile}&orderStatus=${item.orderStatus}&transportStatus=${item.transportStatus}&invoiceStatus=${item.invoiceStatus}&currentIndex=1`,
      });
    }
    console.log(res);
  } else {
    userType.value = 0;
    webUni.webView.navigateTo({
      url: `/subpages/my/product-orders/buy-order-details?id=` + record.orderId,
    });
  }
};

const product = (record) => {
  webUni.webView.navigateTo({
    url: `/subpages/home/carpoolGoods/product-details?id=` + record.id,
  });
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/common";

.name {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
.value {
  font-size: 16px;
  margin-right: 10px;
}
a {
  color: #679ce1;
}

.custom {
  font-size: 14px;

  h1 {
    font-size: 14px;
    color: #000;
  }

  h1,
  a,
  p {
    font-size: 14px;
  }

  .evaluate {
    min-width: 240px;
    width: 240px;
    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #7a7a7d29;
      border-radius: 15px;
      padding: 15px;
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 75px;
      width: 70%;
      justify-content: center;
      line-height: 25px;
      margin-left: 10px;
      .label {
        font-weight: bold;
        font-size: 14px;
        width: 100px;
        height: auto;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    ul {
      display: flex;
      padding: 10px 0;
    }

    &-list {
      display: flex;
      flex-direction: row;

      &-item {
        padding: 0 2px;
      }
    }
  }

  .order {
    display: flex;

    main {
      padding-left: 5px;

      p {
        font-family: PingFangSC-Regular;
        width: 145px;
        line-height: 17px;
        font-size: 14px;
        color: #999;
        letter-spacing: 0;
        margin-bottom: 6px;
        word-break: break-word;
      }

      span {
        font-family: PingFangSC-Regular;
        line-height: 25px;
        color: #ff7201;
      }
    }

    img {
      width: 67px;
      height: 67px;
    }
  }
}
</style>