ImagePreview实现H5查看大图（vue+cube-ui）----先看黄颜色

郜联
2023-12-01
需求：现在很多手机app都不用原生态开发，我们可以使用手机前端ui框架实现。例如：本案例使用的是vue+cube-ui，那我们要实现在手机上查看大图，即点击图片，图片放大，可以对图片进行缩放，如果有多张，可以滑动切换。下面直接上代码：
  <template>
    <div class="container">
      <div class="header">
        <div class="back" @click="goBack()"><img src="../assets/back-icon.png"></div>
        <div class="title">材料管理</div>
        <div class="operate" @click="toFilterPage">
          <span class="operateText">筛选</span>
        </div>
      </div>
      <div class="tab">
        <div class="tab-item" @click="changeData(0)">进场记录
          <div class="tab-line"></div>
        </div>
        <div class="tab-item" @click="changeData(1)">领用记录
          <div class="tab-line"></div>
        </div>
      </div>
      <div class="wrapper" ref="wrapper">
        <ul class="content">
          <li v-for="(item, index) in dataList">
            <div :class="item.checkResult == 'Y' ? 'item-list-y' : 'item-list-n' ">
              <div class="list-title">单号：{{item.mioNo}}{{item.mooNo}}
                <span v-if="item.checkResult == 'Y' && item.mioProduct" class="check-y">合格</span>
                <span v-if="item.checkResult == 'N' && item.mioProduct" class="check-n">不合格</span>
              </div>
              <div class="list-text" v-if="item.mioProduct">进场时间：{{item.createDate.split(" ")[0]}}<span style="float: right;">验收人：{{item.name}}</span></div>
              <div class="list-text" v-if="item.mooPlace">领用时间：{{item.createDate.split(" ")[0]}}<span style="float: right;">领用人：{{item.name}}</span></div>
              <div class="list-text" v-if="item.mioProduct">生产厂家：{{item.mioProduct}}</div>
              <div class="list-text" v-if="item.remarks" style="line-height: 18px!important;">备注说明：{{item.remarks}}</div>
              <div class="list-text" v-if="item.mooPlace">施工部位：{{item.mooPlace}}</div>
              <div class="stuff-list">
                <div class="stuff-div" v-for="(subItem, subIndex) in item.detailList">
                    <img :src="rootPath+subItem.miodPic | imgStringFilter" @click="showImagePreview(subItem.miodPic)">
                    <div class="stuff-info">
                      <div class="stuff-text">材料：<span>{{subItem.materialName}}</span></div>
                      <div class="stuff-text">数量：<span>{{subItem.materialNum}}</span></div>
                      <div class="stuff-text">型号：<span>{{subItem.materialType}}</span></div>
                    </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="add" @touchstart="intoAdd"><span>{{addText}}</span></div>
      </div>
      <div class="noInfo" v-show="isShow">暂无数据</div>
      <div class="loadingDiv" :style="{display:show}">
        <cube-loading :size="40"></cube-loading>
      </div>
    </div>
  </template>
  <script>
    import BScroll from 'better-scroll';
    import axios from 'axios';
    import ImagePreview from "cube-ui";
    import qs from 'qs';
    export default {
      data () {
        return {
          imgs: [{url: '../assets/bg.png'}, {url: '../assets/device1.png'}, {url: '../assets/bg.png'}],
          imgs1: ['/SmartSitesApp/assets/bg.png', './SmartSitesApp/assets/device1.png', '/SmartSitesApp/assets/bg.png'],
          addTextList:["+ 进场验收","+ 领用单"],
          tabFlag: 0,
          qryParam: {},
          loadFlag: false,
          pageNum: 1,
          pageSize: 15,
          dataList: [],
          addText:"",
          show: 'none',
          isShow: false,
          pageEnd: false,
          tabPage: 0,
  
          mioNo: '',
          startDate: '',
          endDate: '',
          mioProduct: '',
          createId: '',
  
          mioNo1: '',
          startDate1: '',
          endDate1: '',
          createId1: '',
  
          rootPath: '',
        }
      },
      //过滤器
      filters:{
        //截取分号前面的字符串
        imgStringFilter:function(value){
          return value.split(';')[0];
        }
      },
      methods: {
        showImagePreview(picStr){
            var imgs = [];
            imgs = picStr.split(';');
            var path = this.rootPath;
            for(var i=0; i<imgs.length; i++){
                imgs[i] = path + imgs[i];
            }
            this.preview = this.$createImagePreview({
              imgs: imgs
            });
          this.preview.show();
        },
        goBack(){
          this.$router.back(-1);
        },
        showMessage(txt, type){
          const toast = this.$createToast({
            txt: txt,
            type: type,
            time: 2000,
          });
          toast.show();
        },
        showErrMessage(txt){
          const toast = this.$createToast({
            txt: txt,
            time: 2000,
            type: 'error'
          });
          toast.show();
        },
        changeData(val){
          this.isShow = false;
          this.pageNum = 1;
          this.pageEnd = false;
          /*if (this.tabFlag == val) {
            return false;
          }*/
          this.tabFlag = val;
          $(".tab-item").removeClass("tab-sel");
          $(".tab-item:eq(" + val + ")").addClass("tab-sel");
          if (val == 0) {
            this.tabPage = 0;
            this.getIntoRecordData();
          }
          else {
            this.tabPage = 1;
            this.getNeckRecordData();
          }
          this.addText = this.addTextList[val];
        },
        getNeckRecordData(){
          let that = this;
          that.show = "flex";
          let deptId = this.$store.state.deptId;
          let projectId = this.$store.state.projectId;
          let param = {"deptId":deptId, "projectId":projectId, "startDate": that.startDate1, "endDate": that.endDate1, mioNo: that.mioNo1, createrId: that.createId1};
          let qryParam ={"pageNum": that.pageNum, "pageSize": that.pageSize, "param": JSON.stringify(param)};
          axios.post('/SmartSitesApp/stuff/neckRecord.do',qs.stringify(qryParam),{withCredentials:true })
            .then(response => {
              that.show = "none";
              let status = response.status;
              if (status == 200) {
                let data = response.data;
                if (data.code == 200) {
                  var data = data.data;
                  if(data.path){
                    that.rootPath = data.path;
                  }
                  let dataLists = data.rows;
                  var totalCount = dataLists.length;
  
                  if (that.pageNum == 1) {
                    if (totalCount > 0) {
                      that.dataList = dataLists;
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.dataList = [];
                      that.isShow = true;
                      $(".container").css("background-color", "#F7F7F7");
                      that.pageEnd = true;
                    }
                  }
                  else {
                    if (totalCount > 0) {
                      that.dataList = that.dataList.concat(dataLists);
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.pageEnd = true;
                    }
                  }
                  that.$nextTick(() => {
                    that.pullingDownUp();
                  });
                }else {
                  that.showErrMessage(data.msg);
                }
              }else{
                that.showErrMessage("服务错误");
              }
            })
            .catch(err => {
              that.show = "none";
            });
        },
        getIntoRecordData(){
          let that = this;
          that.show = "flex";
          let deptId = this.$store.state.deptId;
          let projectId = this.$store.state.projectId;
          let param = {"deptId":deptId, "projectId":projectId, "startDate": that.startDate,"endDate": that.endDate, mioNo: that.mioNo, createrId: that.createId, mioProduct: that.mioProduct};
          let qryParam ={"pageNum": that.pageNum, "pageSize": that.pageSize, "param": JSON.stringify(param)};
          axios.post('/SmartSitesApp/stuff/intoRecord.do',qs.stringify(qryParam),{withCredentials:true })
            .then(response => {
              that.show = "none";
              let status = response.status;
              if (status == 200) {
                let data = response.data;
                if (data.code == 200) {
                  var data = data.data;
                  if(data.path){
                    that.rootPath = data.path;
                  }
                  let dataLists = data.rows;
                  var totalCount = dataLists.length;
  
                  if (that.pageNum == 1) {
                    if (totalCount > 0) {
                      that.dataList = dataLists;
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.dataList = [];
                      that.isShow = true;
                      $(".container").css("background-color", "#F7F7F7");
                      that.pageEnd = true;
                    }
                  }
                  else {
                    if (totalCount > 0) {
                      that.dataList = that.dataList.concat(dataLists);
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.pageEnd = true;
                    }
                  }
                  that.$nextTick(() => {
                    that.pullingDownUp();
                  });
                }else {
                  that.showErrMessage(data.msg);
                }
              }else{
                that.showErrMessage("服务错误");
              }
            })
            .catch(err => {
              that.show = "none";
            });
        },
        loadData(){
          if(this.tabFlag == 0){
            if (!this.pageEnd) {
              this.getIntoRecordData();
            }
            else {
              this.showErrMessage("已加载全部数据");
            }
          }else if(this.tabFlag == 1){
            if (!this.pageEnd) {
              this.getNeckRecordData();
            }
            else {
              this.showErrMessage("已加载全部数据");
            }
          }
        },
        pullingDownUp(){
          this.scroll.finishPullDown();
          this.scroll.finishPullUp();
          this.scroll.refresh() //重新计算元素高度
        },
        intoAdd(){
            if(this.addText == this.addTextList[0]){
              this.$router.push("addInspectOrder");
            }else{
              this.$router.push("addUseOrder");
            }
        },
        toFilterPage(){
          this.$router.push({name:"filterPage",params:{"tabPage": this.tabPage}});
        }
      },
      destroyed: function () {
        localStorage.setItem("filterMaterial", null);
      },
      mounted(){
        this.tabPage = 0;
        let that = this;
        var screenWidth = $(window).width();
        $(".add").css("margin-left",(screenWidth-120)/2);
        this.addText = this.addTextList[0];//进场验收添加按钮
        //选项卡切换到进场记录
        $(".tab-item").removeClass("tab-sel");
        $(".tab-item:eq(0)").addClass("tab-sel");
        this.$nextTick(function () {
          that.scroll = new BScroll(that.$refs.wrapper, {bounce: true, momentum: true, click: true});
          that.scroll.on('scrollEnd', () => {
            if (that.scroll.y <= (that.scroll.maxScrollY)) {
              that.loadData();
            }
          })
        });
  
        try{
          var filterMaterial = JSON.parse(localStorage.getItem("filterMaterial"));
  
          that.tabPage = filterMaterial.tabPage!=undefined&&filterMaterial.tabPage!=null ? filterMaterial.tabPage : 0;
          if(that.tabPage == 0){
            that.mioNo = filterMaterial.orderNo;
            that.startDate = filterMaterial.startTime;
            that.endDate = filterMaterial.endTime;
            that.mioProduct = filterMaterial.productName;
            that.createId = filterMaterial.staffId;
          }else if(that.tabPage == 1){
            that.mioNo1 = filterMaterial.orderNo;
            that.startDate1 = filterMaterial.startTime;
            that.endDate1 = filterMaterial.endTime;
            that.createId1 = filterMaterial.staffId;
          }
  
        }catch(e){
  
        }
        if(that.tabPage == 0){
          that.changeData(0);
        }else if(that.tabPage == 1){
          that.changeData(1)
        }
      }
    }
  </script>
  <style scoped>
    .noInfo {
      margin-top: 10px;
      position: absolute !important;
      font-size: 16px;
      color: #808080;
      width: 100%;
      top: 100px;
      height: calc(100% - 130px);
      background: #fff;
      padding-top: 20px;
    }
    .loadingDiv{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper {
      width: 100%;
      height: calc(100% - 118px);
      overflow: auto;
      margin-top: 10px;
    }
    .item-list-y {
      background-color: #fff;
      margin: 10px 10px 0 10px;
      padding: 10px 10px;
      border-top: 3px solid #5595cf;
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2), 5px 0 5px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.2);
      text-align: left;
    }
    .item-list-n {
      background-color: #fff;
      margin: 10px 10px 0 10px;
      padding: 10px 10px;
      border-top: 3px solid #c7625c;
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2), 5px 0 5px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.2);
      text-align: left;
    }
    .check-y{
       color: #5595cf;
      float: right;
      font-size: 13px;
    }
    .check-n{
      color: #c7625c;
      float: right;
      font-size: 13px;
    }
    .list-text
    {
      color:#9e9e9e;
      padding-top:3px;
      font-size: 13px;
      line-height: 26px;
    }
    .stuff-list
    {
      background-color:#f9f9f9;
      margin:10px 0 0px 0;
    }
    .stuff-div
    {
      height:64px;
      position:relative;
      border-top:1px dashed #e9e9e9;
    }
    .stuff-div img
    {
       position: absolute;
       left:10px;
       width:47px;
       height:47px;
       top:10px;
    }
    .stuff-info
    {
      position: absolute;
      left:80px;
      top:0px;
      padding-top:4px;
    }
    .stuff-text
    {
       color:#9e9e9e;
       line-height:20px;
      font-size: 13px;
    }
    .stuff-text span
    {
        text-align:left;
        float:none;
    }
    .add{
      position: absolute;
      bottom: 10px;
      z-index: 9999;
      background-color: #169BD5;
      color: white;
      width: 120px;
      font-size: 14px;
      padding: 10px 0px;
      border-radius: 20px;
    }
    .tab{
      border-bottom: 1px solid #e8e8e8;
      height: 38px!important;
    }
    .tab-item{
      font-size: 13px;
      height: 33px;
      line-height: 32px;
    }
    .list-title{
      font-size: 13px;
      line-height: 26px;
    }
    .tab-sel .tab-line{
      height: 2px;
    }
  </style>
这是我工作中开发的页面，是一个完整的案例，上面有js、css，这里面还缺少路由的配置，之所以我这里没有提供的原因是我相信进来看案例的读者一定是有相关开发经验的。
这是重点：本案例主要是实现大图查看，所以读者只需要在其中抽取图片相关的代码，例如<img :src=“rootPath+subItem.miodPic | imgStringFilter” @click=“showImagePreview(subItem.miodPic)”>，函数的实现在下面也可以找到，在使用ImagePreview的时候一定要导入依赖import ImagePreview from “cube-ui”;当然这些都是细节。希望可以帮到大家！
ImagePreview实现H5查看大图（vue+cube-ui）----先看黄颜色

相关阅读

相关文章

相关问答

相关文档
