print-package-app/pages/device-info/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="设备信息"></uni-nav-bar>
    <view class="flex-col group_4">
      <view class="flex-col group_5">
        <view class="flex-col items-center group_6">
          <swiper class="swiper" @change="changeSwiper">
            <swiper-item v-for="(item, index) in info.imgItemList" :key="index">
              <image mode="aspectFit" :src="item.url" class="image" @click="preview(item.url)" />
            </swiper-item>
          </swiper>
          <view class="flex-col items-center text-wrapper">
            <text>{{ swiperCurrent + 1 }}/{{ info.imgItemList.length }}</text>
          </view>
        </view>
        <view class="flex-col section_1">
          <text class="text_5">{{ info.name || '设备' }}</text>
          <text class="text_6">
            {{ info.machineDescribe || '没有描述' }}
          </text>
        </view>
      </view>
      <view class="flex-row section_2" v-if="operation == 'edit'">
        <view class="flex-col items-center text-wrapper_1" @click="deleteDevice">
          <text>删除</text>
        </view>
        <view class="flex-col items-center text-wrapper_2" @click="go2('device-operation', { operation: 'edit', id: info.id })">
          <text>编辑</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getEquipmentInfo, removeDevice } from '@/apis/deviceApi.js'
export default {
  data() {
    return {
      info: { imgItemList: [] },
      id: null,
      swiperCurrent: 0,
      operation: 'edit'
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
    }
    if (options.operation) {
      this.operation = options.operation
    }
  },
  onShow() {
    if (this.id) {
      getEquipmentInfo({ id: this.id }).then((res) => {
        if (res) {
          this.info = res
        }
      })
    }
  },
  methods: {
    go2,
    back,
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current
    },
    preview(url) {
      let urls = info.imgItemList.map((img) => img.url)
      uni.previewImage({
        current: url,
        urls: urls
      })
    },
    // 删除当前设备
    deleteDevice() {
      uni.showModal({
        title: '提示',
        content: '确定要删除该设备吗？',
        success: (res) => {
          if (res.confirm) {
            removeDevice({ idList: [this.id] }).then((res) => {
              if (res) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                  duration: 2000
                })
                setTimeout(() => {
                  back()
                }, 2000)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .group_4 {
    flex: 1 1 auto;
    overflow-y: auto;
    .group_5 {
      .group_6 {
        width: 750rpx;
        height: 440rpx;
        .swiper {
          width: 100%;
          height: 100%;
          .image {
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
          }
        }
        color: rgb(255, 255, 255);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
        position: relative;

        .text-wrapper {
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 20rpx;
          width: 64rpx;
          position: absolute;
          right: 32rpx;
          bottom: 60rpx;
        }
      }
      .section_1 {
        margin-top: -40rpx;
        padding: 32rpx 30rpx 100rpx 32rpx;
        background-image: linear-gradient(
          180deg,
          rgb(255, 255, 255) 0%,
          rgb(255, 255, 255) 0%,
          rgb(253, 253, 254) 30.62%,
          rgba(247, 248, 250, 0) 100%,
          rgba(247, 248, 250, 0) 100%
        );
        border-radius: 40rpx 40rpx 0px 0px;
        position: relative;
        .text_5 {
          color: rgb(0, 0, 0);
          font-size: 36rpx;
          font-weight: 500;
          line-height: 50rpx;
          white-space: nowrap;
        }
        .text_6 {
          margin-top: 20rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          text-align: left;
        }
      }
    }
    .section_2 {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16rpx 28rpx;
      background-color: rgb(255, 255, 255);
      .text-wrapper_1 {
        padding: 21rpx 0;
        color: rgb(245, 34, 45);
        font-size: 30rpx;
        font-weight: 500;
        line-height: 42rpx;
        white-space: nowrap;
        border-radius: 10rpx;
        width: 270rpx;
        height: 88rpx;
        border: solid 2rpx rgb(245, 34, 45);
      }
      .text-wrapper_2 {
        margin-left: 24rpx;
        padding: 23rpx 0;
        flex: 1 1 auto;
        color: rgb(255, 255, 255);
        font-size: 30rpx;
        font-weight: 500;
        line-height: 42rpx;
        white-space: nowrap;
        background-color: rgb(0, 122, 255);
        border-radius: 10rpx;
        height: 88rpx;
      }
    }
  }
}
</style>