VAVABUY/pages/chat/modules/consultCard.vue

<template>
  <Theme>
    <view
      class="consult-card__wrap"
      :style="{
        background: props.background,
        ...props.styles,
      }"
    >
      <view class="consult-card__body">
        <view class="consult-card__avatar">
          <image src="@/static/chat/consult_avatar.png" mode="widthFix"></image>
        </view>
        <view class="consult-card__title">
          <text>{{ $t("VAVABUY专属官方客服") }}</text>
        </view>
        <!-- <view class="consult-card__label" @click="showModal">
          <text>{{ $t("付费咨询") }}?</text>
          <text class="consult-card__label--underline"></text>
        </view> -->
      </view>
      <view class="consult-card__bg">
        <image src="@/static/chat/consult_bg_2.png" mode="widthFix"></image>
      </view>
    </view>

    <Popup
      ref="tipPopupRef"
      mode="center"
      class="consult_pay_tip_popup"
      title="服务说明"
    >
      <template #content>
        <view class="consult_pay_body">
          <view
            class="consult_pay_content"
            v-html="$t('page.user_chat.tipPopupContentForPay')"
          ></view>
        </view>
      </template>
      <template #footer>
        <view class="consult_pay_footer">
          <view class="consult_pay_footer-btn" @click="onClose">{{
            $t("取消")
          }}</view>
          <view
            class="consult_pay_footer-btn consult_pay_footer-btn__confirm"
            @click="onConfirm"
            >{{ $t("支付") }}</view
          >
        </view>
      </template>
    </Popup>
  </Theme>
</template>

<script setup>
import { ref, inject } from "vue";
import { storeToRefs } from "pinia";
import { Modal } from "@/utils";
import Popup from "@/components/popup.vue";
import { useMessageStore } from "@/store";

const props = defineProps({
  background: {
    type: String,
    default: "transparent",
  },
  styles: {
    type: Object,
    default() {
      return {};
    },
  },
});

const channelID = inject("channel");
const tipPopupRef = ref(null);

function showModal() {
  tipPopupRef.value && tipPopupRef.value.open();
}

function onClose() {
  tipPopupRef.value && tipPopupRef.value.close();
}

function onConfirm() {
  uni.navigateTo({
    url: `/pages/shop/payment?type=service&oid=${channelID.value}`,
  });
  tipPopupRef.value && tipPopupRef.value.close();
}
</script>

<style lang="less" scoped>
.consult-card__wrap {
  --top: 80rpx;
  --top-up: -80rpx;
}

.consult-card__wrap {
  padding-top: var(--top);
  position: relative;
  background-color: transparent;
}

.consult-card__body {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;

  .consult-card__avatar {
    overflow: hidden;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .consult-card__title {
    margin: 16rpx 0 8rpx;
    // color: #FFE8D5;
    font-size: 28rpx;
    font-weight: 500;
    background: linear-gradient(180deg, #ffe8d5 0%, #d7a16c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;
  }

  .consult-card__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #ffe8d5 0%, #d7a16c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: underline;
    font-size: 24rpx;
    font-weight: 500;

    .consult-card__label--underline {
      width: 100%;
      height: 2rpx;
      background: linear-gradient(180deg, #ffe8d5 0%, #d7a16c 100%);
    }
  }
}

.consult-card__bg {
  overflow: hidden;
  width: 100%;
  height: auto;
  border-radius: 20rpx;
  image {
    width: 100%;
  }
}

.consult_pay_content {
  text-indent: 2em;
  // text-align: justify;
  line-height: 1.4;
}

.consult_pay_footer {
  display: flex;
  justify-content: space-around;

  .consult_pay_footer-btn {
    padding: 12rpx 46rpx;
    border: 1rpx solid #333;
    border-radius: 12rpx;
  }

  .consult_pay_footer-btn__confirm {
    background-color: var(--black);
    color: var(--light);
  }
}
</style>

<style lang="less" scoped>
.consult_pay_tip_popup :deep(.u-popup__content) {
  width: 85%;
}

.consult_pay_tip_popup :deep(.pop .top) {
  justify-content: center;
}
</style>