ylrz_his_scrm_companyUI/src/views/store/components/packageOrderDetails.vue

<template>

  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      套餐订单详情
    </div>
<div class="content" v-if="item!=null">
   <div class="desct"></div>
   <div class="order-status" v-if="item!=null" >
             <el-steps  :active="item.status==3?item.status:item.status-1" align-center finish-status="success">
               <el-step title="待支付"></el-step>
               <el-step title="服务中"></el-step>
               <el-step title="已完成"></el-step>
             </el-steps>
   </div>
              <el-card shadow="never" style="margin-top: 15px">
                <div class="operate-container"  v-if="item!=null">
                  <span style="margin-left: 20px" class="color-danger">订单状态：
                     <el-tag prop="status" v-for="(ite, index) in statusOptions"    v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
                  </span>
             <!--     <div class="operate-button-container" v-if="item.status==2">
                     <el-button size="mini" @click="orderRefund()" v-hasPermi="['his:packageOrder:refund']">全部退款 </el-button>
                  </div> -->

                  <div class="operate-button-container" v-if="item.status==2 &&item.packageSubType!=3 &&item.packageSubType!=3&& item.inquiryRefundStatus==0" >
                     <el-button size="mini" @click="inquiryOrderRefund()" v-hasPermi="['his:packageOrder:refund']">问诊退款</el-button>
                  </div>

                  <div class="operate-button-container" v-if="item.status==2 &&item.packageSubType!=1 && item.storeRefundStatus==0" >
                     <el-button size="mini" @click="storeOrderRefund()" v-hasPermi="['his:packageOrder:refund']">商品退款</el-button>
                  </div>


                  <div class="operate-button-container"  v-if="item.storeOrderId!=null&&item.storeOrderId!=''">
                    <el-button size="mini"  @click="showStoreOrder()">商品订单</el-button>
                  </div>
                  <div class="operate-button-container"  v-if="item.inquiryOrderId!=null&&item.inquiryOrderId!=''">
                    <el-button size="mini"  @click="showInquiryOrder()">问诊订单</el-button>
                  </div>
         <!--         <div class="operate-button-container" v-if="item.refundStatus==1">
                     <el-button size="mini" @click="orderRefundAudit()" v-hasPermi="['his:packageOrder:refund']">退款审核</el-button>
                  </div> -->
                </div>
        <div class="desct">
         基本信息
        </div>
         <el-descriptions :column="3" border  >
               <el-descriptions-item label="订单号"><span v-if="item!=null">{{item.orderSn}}</span></el-descriptions-item>
               <el-descriptions-item label="套餐名称"><span v-if="item!=null">{{item.packageName}}</span></el-descriptions-item>
               <el-descriptions-item label="套餐价格"><span v-if="item!=null">{{item.totalPrice}}</span></el-descriptions-item>
               <el-descriptions-item label="医生名称"><span v-if="item!=null">{{item.doctorName}}</span></el-descriptions-item>
               <el-descriptions-item label="用户昵称"><span v-if="item!=null">{{item.nickName}}</span></el-descriptions-item>
               <el-descriptions-item label="用户电话"><span v-if="item!=null">{{item.phone}}</span>
                <el-button type="text" size="mini" @click="callNumber(0,0,0,item.orderId)" v-if="item.companyUserId == user.userId"  v-hasPermi="['store:packageOrder:callNumber']">拨号</el-button>
                <el-button type="text" size="mini" @click="handleSms(item.phone)" v-if="item.companyUserId == user.userId" v-hasPermi="['store:packageOrder:sendSms']">短信</el-button>
                <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['store:packageOrder:queryPhone']"></el-button>
               </el-descriptions-item>
               <el-descriptions-item label="是否支付"> <dict-tag :options="isPayOptions" :value="item.isPay"/></el-descriptions-item>
               <el-descriptions-item label="付款类别"> <dict-tag :options="payTypeOptions" :value="item.payType"/></el-descriptions-item>
               <el-descriptions-item label="套餐包类别"> <dict-tag :options="packageSubTypeOptions" :value="item.packageSubType"/></el-descriptions-item>
               <el-descriptions-item label="天数"><span v-if="item!=null">{{item.days}}</span></el-descriptions-item>
               <el-descriptions-item label="状态"> <dict-tag :options="statusOptions" :value="item.status"/></el-descriptions-item>
               <el-descriptions-item label="所属公司"><span v-if="item!=null">{{item.companyName}}</span></el-descriptions-item>
               <el-descriptions-item label="公司员工"><span v-if="item!=null">{{item.companyUserName}}</span></el-descriptions-item>
               <el-descriptions-item label="问诊退款状态"> <dict-tag :options="refundStatusOptions" :value="item.inquiryRefundStatus"/></el-descriptions-item>
               <el-descriptions-item label="药品退款状态"> <dict-tag :options="refundStatusOptions" :value="item.storeRefundStatus"/></el-descriptions-item>
               <el-descriptions-item label="退款状态"> <dict-tag :options="refundStatusOptions" :value="item.refundStatus"/></el-descriptions-item>
               <el-descriptions-item label="退款用户说明"><span v-if="item!=null">{{item.refundExplain}}</span></el-descriptions-item>
               <el-descriptions-item label="不退款的理由"><span v-if="item!=null">{{item.refundReason}}</span></el-descriptions-item>
               <el-descriptions-item label="退款时间"><span v-if="item!=null">{{item.refundTime}}</span></el-descriptions-item>
               <el-descriptions-item label="退款金额"><span v-if="item!=null">{{item.refundMoney}}</span></el-descriptions-item>
               <el-descriptions-item label="备注"><span v-if="item!=null">{{item.remark}}</span></el-descriptions-item>
               <el-descriptions-item label="支付时间"><span v-if="item!=null">{{item.startTime}}</span></el-descriptions-item>
               <el-descriptions-item label="开始时间"><span v-if="item!=null">{{item.payTime}}</span></el-descriptions-item>
               <el-descriptions-item label="结束时间"><span v-if="item!=null">{{item.finishTime}}</span></el-descriptions-item>
               <el-descriptions-item label="创建时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
         </el-descriptions>
       </el-card>
     </div>



   <div class="contentx" v-if="item!=null">
     <div class="desct">
       支付信息
     </div>
   <el-table
     border
     :data="pay"
     size="small"
     style="width: 100%;margin-top: 20px" >
       <el-table-column label="支付单号" align="center" prop="payCode" width="120px" />
       <el-table-column label="支付金额" align="center" prop="payMoney" />
       <el-table-column label="类型" align="center" prop="payTypeCode" />
       <el-table-column label="交易单号" align="center" prop="bankTransactionId" />
       <el-table-column label="银行流水号" align="center" prop="bankSerialNo" />
       <el-table-column label="创建时间" align="center" prop="createTime" />
       <el-table-column label="支付时间" align="center" prop="payTime" />
   </el-table>
          </div>

  <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
   <div class="desct">
       商品信息
      </div>
      <el-tooltip class="item" effect="dark" :content="showList ? '显示全部' : '隐藏'" placement="top" style="float: right;">
        <el-button size="mini" circle icon="el-icon-search" @click="showListD()" />
      </el-tooltip>
   <el-table border v-if="showProd!=null" :data="showProd" size="small" style="width: 100%;margin-top: 20px" >
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
            </template>
          </el-table-column>
          <el-table-column label="商品编码" width="300" align="center">
            <template slot-scope="scope">
              <p>{{JSON.parse(scope.row.jsonInfo).barCode}}</p>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300" align="center">
            <template slot-scope="scope">
              <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="240" align="center">
            <template slot-scope="scope">
              <p>￥{{JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="规格" width="240" align="center">
            <template slot-scope="scope">
              {{JSON.parse(scope.row.jsonInfo).sku}}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template slot-scope="scope">
              {{scope.row.num}}
            </template>
          </el-table-column>
          <el-table-column label="处方药" width="240" align="center">
            <template slot-scope="scope">
              {{scope.row.isPrescribe!=null&&scope.row.isPrescribe==1?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column label="小计"  align="center">
            <template slot-scope="scope" >
              ￥{{(scope.row.num*JSON.parse(scope.row.jsonInfo).price).toFixed(2)}}
            </template>
          </el-table-column>
        </el-table>
   </div>
        <div class="contentx" v-if="item!=null">
          <div class="desct">
            费用信息
          </div>
         <el-descriptions   :column="3" border  >
                   <el-descriptions-item label="商品合计"  ><span v-if="item.totalPrice!=null">￥{{item.totalPrice.toFixed(2)}} </span></el-descriptions-item>
                   <el-descriptions-item label="处方应付金额"  ><span v-if="item.payPrice!=null"> ￥{{item.payPrice.toFixed(2)}}</span></el-descriptions-item>
                  <el-descriptions-item label="运费" ><span v-if="item.payDelivery!=null">￥{{item.payDelivery.toFixed(2)}}</span></el-descriptions-item>
                  <el-descriptions-item label="优惠劵" ><span v-if="item.discountMoney!=null">￥{{item.discountMoney.toFixed(2)}}</span></el-descriptions-item>
                   <el-descriptions-item label="实付金额"  ><span v-if="item.payMoney!=null">￥{{item.payMoney.toFixed(2)}}</span></el-descriptions-item>
                   <el-descriptions-item label="代收金额" ><span v-if="item.payRemain!=null">￥{{item.payRemain.toFixed(2)}}</span></el-descriptions-item>
        </el-descriptions>
           </div>

       <!-- 首诊图片管理 -->
       <div class="contentx" v-if="item!=null">
         <div class="desct">
           首诊图片管理
           <el-button
             type="primary"
             size="mini"
             style="float: right; margin-top: -5px;"
             @click="showPatientImagesDialog"
             :disabled="item.status == 3"
           >
             管理首诊图片
           </el-button>
         </div>
       </div>

       <el-drawer
           :with-header="false"
           :append-to-body="true"
            size="75%"
             :title="show.title" :visible.sync="show.open"
             >
             <storeOrderDetails  ref="Details" />
        </el-drawer>

       <el-drawer
            :with-header="false"
            :append-to-body="true"
            size="75%"
             :title="inquiryOrderShow.title" :visible.sync="inquiryOrderShow.open">
         <inquiryOrderDetails  ref="inquiryOrderDetails" />
       </el-drawer>
      <el-dialog
           width="50%"
           title="退款审核"
           :visible.sync="auditVisible"
           append-to-body @close="auditCancel">
      <el-form ref="form" :model="refundForm" :rules="rules" label-width="120px">
                  <el-form-item label="审核" prop="deliveryCode">
                     <el-radio v-model="refundForm.refundStatus" label="2">同意</el-radio>
                      <el-radio v-model="refundForm.refundStatus" label="3">拒绝</el-radio>
                  </el-form-item>
                  <el-form-item label="拒绝理由" prop="deliveryName">
                    <el-input v-model="refundForm.refundReason" placeholder="请输入快递名称"  type="textarea"/>
                  </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="auditOk">确 定</el-button>
                          <el-button @click="auditCancel">取 消</el-button>
        </div>
          </el-dialog>
          <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
              <add-sms ref="sms" @close="closeSms()"></add-sms>
          </el-dialog>

          <!-- 首诊图片管理对话框 -->
          <el-dialog
            title="首诊图片管理"
            :visible.sync="patientImagesDialog.visible"
            width="80%"
            append-to-body
            @close="closePatientImagesDialog"
          >
            <div v-loading="patientImagesDialog.loading">
              <div style="margin-bottom: 20px;">
                <h4>当前首诊图片：</h4>
                <div v-if="patientImagesDialog.images.length > 0" class="image-gallery">
                  <div
                    v-for="(image, index) in patientImagesDialog.images"
                    :key="index"
                    class="image-item"
                  >
                    <img :src="image" class="thumbnail" @click="previewImage(image)" />
                    <div class="image-actions">
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="removeImage(index)"
                      ></el-button>
                    </div>
                  </div>
                </div>
                <div v-else style="color: #999; text-align: center; padding: 20px;">
                  暂无首诊图片
                </div>
              </div>

              <div style="margin-bottom: 20px;">
                <h4>添加新图片：</h4>
                <ImageUpload
                  v-model="patientImagesDialog.newImages"
                  :limit="10"
                  :file-size="5"
                  :file-type="['jpg', 'jpeg', 'png', 'gif']"
                />
              </div>
            </div>

            <div slot="footer" class="dialog-footer">
              <el-button @click="closePatientImagesDialog">取 消</el-button>
              <el-button type="primary" @click="savePatientImages" :loading="patientImagesDialog.saving">
                保 存
              </el-button>
            </div>
          </el-dialog>

          <!-- 图片预览对话框 -->
          <el-dialog
            title="图片预览"
            :visible.sync="previewDialog.visible"
            width="60%"
            append-to-body
          >
            <div style="text-align: center;">
              <img :src="previewDialog.image" style="max-width: 100%; max-height: 500px;" />
            </div>
          </el-dialog>
      </div>
</template>

<script>

import { listPackageOrder,storeRefund,inquiryRefund, payment,getPackageOrder, delPackageOrder,refundAudit, addPackageOrder,refund, updatePackageOrder, exportPackageOrder,getUserPhone, editPatientImages } from "@/api/store/packageOrder";
import { listOrderitem} from "@/api/store/storeOrder";
import storeOrderDetails from '../components/storeOrderDetails2.vue';
import inquiryOrderDetails from '../components/inquiryOrderDetails.vue';
import addSms from '../../crm/components/addSms.vue';
import ImageUpload from '@/components/ImageUpload/index.vue';
  export default {
    name: "patdetails",
    components: { storeOrderDetails,inquiryOrderDetails,addSms, ImageUpload },
    props:["data"],
    data() {

      return {
        addSms:{
        open:false,
        title:"发短信"
      },
        show:{
          open:false,
          title:"订单详情"
        },
        auditVisible:false,
        rules:{},
        inquiryOrderShow:{
          open:false,
          title:"订单详情"
        },
        showList:true,
        prod:null,
        showProd:null,
       // 状态字典
      isPayOptions: [],
      packageSubTypeOptions: [],
      productJson:[],
      refundForm:{
        orderId:null,
        refundReason:null,
        refundStatus:null,
      },
      // 状态字典
      statusOptions: [],
      refundStatusOptions: [],
        item:null,
      pay:[],
      // 患者图片管理对话框数据
      patientImagesDialog: {
        visible: false,
        loading: false,
        saving: false,
        images: [], // 当前患者图片列表
        newImages: '' // 新上传的图片
      },
      // 图片预览对话框数据
      previewDialog: {
        visible: false,
        image: ''
      }
      }
    },
    computed: {
      user(){
        return this.$store.state.user.user;
      }
    },
    created() {
    this.getDicts("sys_company_or").then(response => {
      this.isPayOptions = response.data;
    });
    this.getDicts("sys_package_order_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_refund_status").then(response => {
      this.refundStatusOptions = response.data;
    });
    this.getDicts("sys_package_pay_type").then(response => {
      this.payTypeOptions = response.data;
    });
    this.getDicts("sys_package_sub_type").then(response => {
      this.packageSubTypeOptions = response.data;
    });
    },
    methods: {
      closeSms(){
        this.addSms.open=false;
      },
      handleSms(mobile){
        this.addSms.open=true;
        var that=this;
        setTimeout(() => {
            that.$refs.sms.getPackageOrderId(this.item.orderId,mobile,3);
        }, 500);

      },
      handlePhone(){
        const orderId = this.item.orderId;
        getUserPhone(orderId).then(response =>{
            this.item.phone = response.userPhone;
        })
      },
      getDetails(orderId) {

          this.item=null;
          getPackageOrder(orderId).then(response => {
              this.item = response.data;
              payment(orderId).then(response => {
                  this.pay = response.data;
              });
              if(this.item.storeOrderId!=null){
              this.getlistOrderitem(this.item.storeOrderId)

              }



          });
      },
      showStoreOrder(){
            this.show.open=true;
              setTimeout(() => {
                   this.$refs.Details.getDetails(this.item.storeOrderId,this.item.nickName,null);
              }, 1);
      },
      showListD(){
        if(this.showList){
          this.showProd=this.prod
        }else{
          this.showProd=[this.prod[0]]
        }
        this.showList=this.showList?false:true;
      },
      orderRefundAudit(){
        this.refundForm.orderId=this.item.orderId;
        this.refundForm.refundReason=null;
        this.refundForm.refundStatus="2";
        this.auditVisible=true;
      },
      showInquiryOrder(){
            this.inquiryOrderShow.open=true;
            setTimeout(() => {
                 this.$refs.inquiryOrderDetails.getDetails(this.item.inquiryOrderId);
            }, 1);
      },
      auditCancel(){
        this.auditVisible=false;
      },
      auditOk(){
        refundAudit(this.refundForm).then(response => {
              this.msgSuccess("操作成功");
              getPackageOrder(this.item.orderId).then(response => {
                  this.item = response.data;
                  payment(orderId).then(response => {
                      this.pay = response.data;
                  });
              });
            });
            this.auditVisible=false;
      },
      getlistOrderitem(orderId){
        listOrderitem(orderId).then(response => {
            this.prod = response.rows;
            this.showProd=[this.prod[0]]
        });
      },
      orderRefund(){
          var that=this;
          this.$confirm('是否确认退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return refund(that.item.orderId);
          }).then(() => {
            this.msgSuccess("操作成功");
            getPackageOrder(that.item.orderId).then(response => {
                this.item = response.data;
                payment(orderId).then(response => {
                    this.pay = response.data;
                });
            });
          }).catch(function() {});
      },
      inquiryOrderRefund(){
          var that=this;
          this.$confirm('是否确认问诊退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return inquiryRefund(that.item.orderId);
          }).then(() => {
            this.msgSuccess("操作成功");
            getPackageOrder(that.item.orderId).then(response => {
                this.item = response.data;
                payment(orderId).then(response => {
                    this.pay = response.data;
                });
            });
          }).catch(function() {});
      },
      storeOrderRefund(){
          var that=this;
          this.$confirm('是否确认退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return storeRefund(that.item.orderId);
          }).then(() => {
            this.msgSuccess("操作成功");
            getPackageOrder(that.item.orderId).then(response => {
                this.item = response.data;
                payment(orderId).then(response => {
                    this.pay = response.data;
                });
            });
          }).catch(function() {});
      },
      // 显示患者图片管理对话框
      showPatientImagesDialog() {
        // 解析patientJson中的firstVisitImages字段
        if (this.item.patientJson) {
          try {
            const patientData = JSON.parse(this.item.patientJson);
            // 修改：imagesList参数接受的是图片的path字符串，可能包含多个路径用逗号分隔
            const imagesPath = patientData.firstVisitImages;
            if (imagesPath) {
              // 如果是字符串，按逗号分割成数组用于显示
              if (typeof imagesPath === 'string') {
                this.patientImagesDialog.images = imagesPath.split(',').filter(img => img.trim() !== '');
              } else {
                // 如果已经是数组，直接使用
                this.patientImagesDialog.images = imagesPath;
              }
            } else {
              this.patientImagesDialog.images = [];
            }
          } catch (e) {
            console.error('解析patientJson失败:', e);
            this.patientImagesDialog.images = [];
          }
        } else {
          this.patientImagesDialog.images = [];
        }

        // 重置新上传的图片
        this.patientImagesDialog.newImages = '';
        this.patientImagesDialog.visible = true;
      },

      // 关闭患者图片管理对话框
      closePatientImagesDialog() {
        this.patientImagesDialog.visible = false;
        this.patientImagesDialog.images = [];
        this.patientImagesDialog.newImages = '';
      },

      // 预览图片
      previewImage(image) {
        this.previewDialog.image = image;
        this.previewDialog.visible = true;
      },

      // 移除图片
      removeImage(index) {
        this.$confirm('确定要删除这张图片吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.patientImagesDialog.images.splice(index, 1);
          this.$message.success('删除成功');
        }).catch(() => {});
      },

      // 保存患者图片
      savePatientImages() {
        this.patientImagesDialog.saving = true;

        // 合并原有图片和新上传的图片
        let allImages = [...this.patientImagesDialog.images];

        // 如果有新上传的图片，添加到列表中
        if (this.patientImagesDialog.newImages) {
          const newImages = this.patientImagesDialog.newImages.split(',').filter(img => img.trim() !== '');
          allImages = [...allImages, ...newImages];
        }

        // 修改：根据后端API要求，imagesList参数应该是字符串类型
        // 将所有图片路径用逗号连接成一个字符串
        const imagesParam = allImages.join(',');

        console.log('保存患者图片，参数:', {
          orderId: this.item.orderId,
          imagesParam: imagesParam
        });

        // 调用API保存图片
        editPatientImages(this.item.orderId, imagesParam).then(response => {
          console.log('保存患者图片成功:', response);
          this.$message.success('保存成功');
          this.patientImagesDialog.saving = false;
          this.patientImagesDialog.visible = false;

          // 更新item中的patientJson
          if (this.item.patientJson) {
            try {
              const patientData = JSON.parse(this.item.patientJson);
              // 保存时保持与API一致的格式，存储字符串
              patientData.firstVisitImages = imagesParam;
              this.item.patientJson = JSON.stringify(patientData);
            } catch (e) {
              console.error('更新patientJson失败:', e);
            }
          }
        }).catch(error => {
          console.error('保存患者图片失败:', error);
          this.$message.error('保存失败: ' + (error.message || '未知错误'));
          this.patientImagesDialog.saving = false;
        }).finally(() => {
          // 确保无论成功还是失败，都重置saving状态
          if (this.patientImagesDialog.saving) {
            this.patientImagesDialog.saving = false;
          }
        });
      }
    }
  }
</script>
<style>
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .content{
      height: 100%;
      background-color: #fff;
     padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>
<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

/* 图片画廊样式 */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.image-item {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.thumbnail:hover {
  transform: scale(1.05);
}

.image-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-item:hover .image-actions {
  opacity: 1;
}
</style>