pay-customer/src/pages/index/components/AiInput.vue

<template>
  <view class="ai_contents">
    <view class="ai_contents_center">
      <view class="ai_contents_header">
        <image
          src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KN3YX35D5WJ22MQ1GH4X6BF0.png"
          mode="heightFix"
        />
        <text>我是客服邻邻，遇到问题了，可以问我哦～ </text>
      </view>
      <view class="ai_contents_input" @click="handleInputChange">
        <view class="ai_input"> 点击联系在线客服 </view>
        <uni-icons type="arrow-right" size="20" color="#A4A4A4"></uni-icons>
      </view>
      <view class="ai_footer">
        <scroll-view scroll-x="true" style="height: 80rpx">
          <view
            v-for="(i, index) in quickActions"
            :key="`item_${index}`"
            class="items"
            @click="handleInputChange(i)"
          >
            <view class="items_center">
              <image :src="`/static/svg/${i.icon}`" mode="heightFix" />
              {{ i.label }}
            </view>
          </view>
          <!-- <view class="items">
            <view class="items_center">
              <image src="/static/svg/FWJF.svg" mode="heightFix" />
              我要报修
            </view>
          </view>
          <view class="items">
            <view class="items_center">
              <image src="/static/svg/GDCX.svg" mode="heightFix" />
              工单查询
            </view>
          </view>
          <view class="items">
            <view class="items_center">
              <image src="/static/svg/QBGL.svg" mode="heightFix" />
              社区服务
            </view>
          </view> -->
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { showToast } from '@/common/libraries/naviHelper'
import { getStyleColorInfo, getStyleColorValueInfo } from '@/common/libraries/getPageConfig'
import { quickActions, QuickAction } from '@/common/libraries/public'
import userLoginStatus from '@/common/libraries/userUserLogin'
import { useWeAppAuthStore } from '@/common'
const auth = useWeAppAuthStore()

const handleInputChange = (i?: QuickAction) => {
  if (!userLoginStatus?.onBindPhone()) {
    return false
  }
  if (!auth.data?.selected_house?.asset_projects_id) {
    showToast('请绑定房屋')
    return false
  }
  uni.navigateTo({
    url: `/pages/ai/chat?message=${i?.message || ""}`
  })
}
</script>

<style lang="scss" scoped>
.ai_contents {
  background-color: #fff;
  padding: 6rpx;
  border-radius: 20rpx;
  height: 320rpx;
  margin: 30rpx;
  .ai_contents_center {
    border-radius: 20rpx;
    background:
      linear-gradient(307deg, rgb(255, 137, 24, 0.06) -1%, rgba(255, 255, 255, 0) 29%),
      linear-gradient(243deg, rgb(75, 72, 255, 0.06) 1%, rgba(255, 255, 255, 0) 20%),
      linear-gradient(303deg, rgba(255, 255, 255, 0) 71%, rgb(40, 26, 255, 0.08) 100%),
      linear-gradient(
        231deg,
        rgba(255, 255, 255, 0) 76%,
        rgba(255, 105, 0, 0.06) 98%,
        rgb(255, 145, 68, 0.06) 98%
      );
    width: 100%;
    height: 100%;
    button {
      padding: 0;
      margin: 0 30rpx;
      text-align: left;
      display: flex;
      align-items: center;

      background-color: transparent;
      height: 90rpx;
      border-radius: 100rpx;
      box-shadow: 0px 4px 10px 3px rgba(231, 231, 231, 0.3);
    }
  }
  .ai_contents_header {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 28rpx;
    padding: 0 0 0 50rpx;
    image {
      width: 56rpx;
      height: 130rpx;
      position: relative;
      margin-top: -22rpx;
    }
    text {
      padding: 5rpx 0 0 15rpx;
    }
  }
  .ai_contents_input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 15rpx 20rpx;
    margin: 5rpx 30rpx;
    box-shadow: 0px 4px 10px 0px rgba(231, 231, 231, 0.3);
    .ai_input {
      flex: 1;
      font-size: 28rpx;
      color: #666;

      input {
        height: 100%;
      }
    }
  }
  .ai_footer {
    padding: 25rpx 0 0 0;
    white-space: nowrap;
    .items {
      background-color: #fff;
      box-shadow: 0px 0px 6px 3px rgba(199, 199, 199, 0.1);
      border-radius: 10rpx;
      display: inline-block;
      height: 70rpx;
      color: #3d3d3d;
      font-size: 24rpx;
      padding: 0 20rpx;
      margin-right: 15rpx;
      &:first-child {
        margin-left: 30rpx;
      }
      &:last-child {
        margin-right: 30rpx;
      }
      .items_center {
        display: flex;
        align-items: center;
        height: 100%;
      }
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
}
</style>