feat: 客服

2026-07-20 15:31:52 +08:00
parent 0099ccaa60
commit 82a8043578
23 changed files with 5071 additions and 360 deletions
@@ -0,0 +1,129 @@
+<template>
+  <view class="context-card">
+    <image class="context-image" :src="image" mode="aspectFill" />
+    <view class="context-copy">
+      <text class="context-kind">{{ kindLabel }}</text>
+      <text class="context-title">{{ title }}</text>
+      <text class="context-meta">{{ meta }}</text>
+    </view>
+    <view class="context-actions">
+      <button class="context-send" :disabled="sending" @click="$emit('send')">{{ sending ? '发送中' : '发送' }}</button>
+      <button class="context-remove" @click="$emit('remove')">移除</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomerServiceContextCard',
+  props: {
+    context: { type: Object, required: true },
+    sending: { type: Boolean, default: false }
+  },
+  emits: ['send', 'remove'],
+  computed: {
+    isProduct() {
+      return this.context.type === 'product'
+    },
+    kindLabel() {
+      return this.isProduct ? '待咨询商品' : '待咨询订单'
+    },
+    image() {
+      const data = this.context.data || {}
+      return data.goodsMainGraph || data.mainGraph || data.image || '/uni_modules/hashmall-customer-service/static/image-placeholder.png'
+    },
+    title() {
+      const data = this.context.data || {}
+      return data.goodsName || data.name || (this.isProduct ? '商品信息' : '订单信息')
+    },
+    meta() {
+      const data = this.context.data || {}
+      if (!this.isProduct) return data.orderNo || data.no || '点击发送订单信息'
+      const price = data.currentPrice || data.price
+      return price ? `¥${price}` : '点击发送商品信息'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.context-card {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 18rpx 24rpx;
+  border-top: 1rpx solid #e7e7ec;
+  background: #fff;
+}
+
+.context-image {
+  width: 92rpx;
+  height: 92rpx;
+  flex: 0 0 92rpx;
+  border-radius: 14rpx;
+  background: #f5f5f7;
+}
+
+.context-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.context-kind {
+  color: #7934f6;
+  font-size: 21rpx;
+  font-weight: 600;
+}
+
+.context-title,
+.context-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.context-title {
+  margin-top: 4rpx;
+  color: #1a1a1d;
+  font-size: 26rpx;
+  font-weight: 600;
+}
+
+.context-meta {
+  margin-top: 4rpx;
+  color: #5f6068;
+  font-size: 22rpx;
+}
+
+.context-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.context-send,
+.context-remove {
+  min-width: 96rpx;
+  min-height: 52rpx;
+  padding: 0 14rpx;
+  border-radius: 26rpx;
+  font-size: 23rpx;
+  line-height: 52rpx;
+}
+
+.context-send {
+  background: #7934f6;
+  color: #fff;
+}
+
+.context-send[disabled] {
+  background: #c9b2f4;
+}
+
+.context-remove {
+  background: transparent;
+  color: #5f6068;
+}
+</style>