sports-merchant-minapp/src/subPack/Evaluation/index.vue

<template>
  <view class="h-screen overflow-y-scroll header box-border">
    <wd-navbar
      title="评价管理"
      fixed
      placeholder
      safeAreaInsetTop
      custom-style="background-color: transparent !important"
      :bordered="false"
      leftArrow
      @click-left="handleClickLeft"
    ></wd-navbar>
    <view class="px-32rpx">
      <view
        class="bg-white p-24rpx mb-20rpx rounded-32rpx"
        v-for="item in data"
        :key="item.id"
      >
        <view class="text-[rgba(0,0,0,0.7)] text-28rpx">评价(23)</view>
        <wd-divider color="#F0F0F0" custom-class="custom-divider"></wd-divider>
        <view class="flex items-center justify-between mt-2">
          <view class="flex items-center text-24rpx">
            <image
              src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg"
              class="w-60rpx h-60rpx rounded-full"
            ></image>
            <view class="ml-20rpx text-[rgba(0,0,0,0.9)]">张三</view>
            <view class="ml-20rpx text-[rgba(0,0,0,0.3)]">2021-01-01</view>
          </view>
          <view
            class="flex items-center justify-center text-white text-28rpx bg-#0074FF px-23rpx py-4rpx rounded-8rpx"
            >待审核</view
          >
        </view>
        <view class="flex items-center mt-16rpx">
          <text class="text-[rgba(0,0,0,0.3)] text-24rpx mr-20rpx">4.0</text>
          <wd-rate v-model="rate" readonly />
        </view>
        <view class="mt-20rpx text-[rgba(0,0,0,0.9)] text-28rpx"
          >詹姆四对孩子很有耐心，也非常照顾小朋友的情绪， 值得推荐！</view
        >
        <view class="mt-20rpx flex items-center justify-between">
          <image
            src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg"
            v-for="item in 3"
            class="w-202rpx h-200rpx rounded-32rpx"
          ></image>
        </view>
        <view class="mt-24rpx">
          <view class="bg-#F6F6F6 rounded-16rpx flex p-20rpx">
            <view class="text-[rgba(0,0,0,0.3)] text-24rpx">商家回复：</view>
            <view
              class="text-24rpx w-68%"
              :class="[currentId == item.id ? '' : 'truncate ']"
              >谢谢您的评价，我们会越来越好，谢谢额外企鹅王企鹅我去额外企鹅轻微青sadsadasdsadasdasdasdasdasd蛙</view
            >
            <view
              class="text-[rgba(0,0,0,0.3)] text-24rpx flex-1 text-center"
              @click="handleChange(item.id)"
              >{{ currentId == item.id ? "折叠" : "展开" }}</view
            >
          </view>
        </view>
        <view class="flex items-center justify-end mt-3">
          <view
            class="flex items-center justify-center text-white text-28rpx bg-#FDD143 px-23rpx py-4rpx rounded-8rpx"
            @click="handleHf"
            >回复</view
          >
        </view>
      </view>
    </view>
  </view>
  <wd-message-box selector="wd-message-box-slot" :closeOnClickModal="false">
    <view class="flex items-center justify-center w-full">
      <view
        class="rounded-32rpx border overflow-hidden w-80% h-236rpx border-#ccc border-solid py-30rpx flex items-center justify-center"
      >
        <textarea
          v-model="msgContent"
          placeholder="请输入回复内容"
          :show-confirm-bar="false"
          :maxlength="-1"
          class="w-300rpx p-30rpx overflow-y-scroll h-200rpx"
        />
      </view>
    </view>
  </wd-message-box>
</template>

<script setup lang="ts">
import { useMessage } from "wot-design-uni";
const message = useMessage("wd-message-box-slot");
const msgContent = ref();
const rate = ref(4);
const currentId = ref();
const data = ref([
  { id: 0 },
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
]);
function handleChange(id: number) {
  currentId.value == id ? (currentId.value = null) : (currentId.value = id);
}
function handleClickLeft() {
  uni.navigateBack();
}
function handleHf() {
  message
    .confirm({
      title: "回复",
      confirmButtonText: "提交",
      closeOnClickModal: false,
    })
    .then(() => {})
    .catch((error) => {
      console.log(error);
    });
}
</script>

<style>
.custom-divider {
  padding: 0 !important;
}
</style>
<route lang="json">
{
  "name": "Evaluation",
  "style": {
    "navigationBarTitleText": "评价",
    "navigationStyle": "custom"
  }
}
</route>