• 需求:现在很多手机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”;当然这些都是细节。希望可以帮到大家!

Logo

前往低代码交流专区

更多推荐