tyyx_mobile/src/pages/ysgc/detail.vue

<template>
  <div class="detailContent">
    <van-nav-bar left-arrow title="作品详情" @click-left="onClickLeft" />

    <div class="flex justify-between items-center px-3 mt-2">
      <div style="font-size: 15px;">{{detailInfo.yz_name}}</div>
      <div class="flex space-x-4 tip">
        <div @click="handleFinger">
          <van-icon :name="detailInfo.is_like==0 ? 'good-job-o' : 'good-job'" />
          <span>{{detailInfo.yz_like_num}}</span>
        </div>
        <div @click="handleLoveIcon">
          <van-icon :name="detailInfo.is_fav==0 ? 'like-o' : 'like'" />
          <span>{{detailInfo.yz_fav_num}}</span>
        </div>
      </div>
    </div>

    <div class="swiperContent m-2">
      <van-swipe class="mb-5">
        <van-swipe-item class="flex items-center justify-center" v-for="(item, index) in imageData" :key="index">
          <van-image :src="getFullUrl(item)" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="commentDiv px-5">
      <div class="flex justify-between items-center my-5">
        <van-rate class="my-2" v-model="star" color="#ffd21e" void-icon="star" void-color="#eee" size="16px" allow-half :readonly="disabled" />
        <van-button round type="success" size="small" :disabled="disabled" @click="handleComment">评价</van-button>
      </div>
      <div>
        <div v-for="(item, index) in evaluateData" :key="index">
          <div class="flex items-baseline space-x-4">
            <div class="user">{{item.yze_user_realname}}</div>
            <div class="time">{{item.create_time}}</div>
          </div>
          <van-rate class="my-2" v-model="item.yze_star" color="#ffd21e" void-icon="star" void-color="#eee" size="16px" allow-half readonly />
          <van-divider dashed></van-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getFullUrl } from '~/utils/helper';
import { ysgc_detail, ysgc_evaluate_list, ysgc_addEvaluate } from "./api.js";
import userInfo from '~/store/index';
import { useRouter } from 'vue-router';
const router = useRouter();
const parentId = ref(router.currentRoute.value.params.id);
const detailInfo = ref({});
const imageData = ref([]);
const star = ref(0);
const evaluateData = ref([]);
const disabled = ref(false);

const onClickLeft = () => history.back();

initDetailData();
function initDetailData() {

  ysgc_detail({ yz_id: parentId.value }).then((res) => {
    if (res.code == 1) {
      detailInfo.value = res.data.one_info;
      imageData.value = detailInfo.value.file_list;
      console.log(detailInfo.value)
    }
  })
}

initEvaluateData();
function initEvaluateData() {
  let obj = {
    yz_id: parentId.value,
    limit: "9999"
  }
  ysgc_evaluate_list(obj).then((res) => {
    if (res.code == 1) {
      evaluateData.value = res.data.page_data;
      disabled.value = res.template.check_myexist == 1 ? true : false;
    }
  })
}

const handleComment = () => {
  let obj = {
    yze_user_realname: user.user_realname,
    yze_star: this.pjInfo.yze_star,
    yz_id: id,
    yze_id: this.pjInfo.yze_id,
  }
  ysgc_addEvaluate(obj).then((res) => {
    if (res.code == 1) {
      evaluateData.value = res.data.page_data;
      disabled.value = res.template.check_myexist == 1 ? true : false;
    }
  })
}
</script>

<style lang="scss" scoped>
.detailContent {
  height: 100vh;
  background: #fcfeff;
  overflow: auto;
  .tip {
    color: #00a3ff;
    font-size: 12px;
    white-space: nowrap;
  }
  :deep(.swiperContent) {
    background: #f5f9f9;
    height: 60%;
    border-radius: 6px;
    .van-swipe {
      height: 100%;
    }
  }
  .commentDiv {
    .van-button--round {
      width: 80px;
      background: linear-gradient(90deg, #00a3ff, #57c38f);
      border: none;
    }
    .user {
      font-size: 14px;
      color: #171721;
    }
    .time {
      font-size: 12px;
      color: #8083a3;
    }
    .van-divider {
      margin: 8px 0;
    }
  }
}
</style>