index.vue

<style lang="less" >
    #specimen{
        background: #f1f1f1;
        height:100%;
        .INFO{
            background: white;
            padding: 0 10px;
            .CONTENT{
                >div{
                    display: flex;
                    border-bottom: 1px solid #F8F8F8;
                    >p{
                        margin:0;padding:0;
                        height:30px;
                        line-height: 30px;
                    }
                    >p:first-child{
                        width:80px;
                        color:#999999
                    }
                }
            }
        }
        .detail{
            margin-top:10px;
            background: #fffeeb;
            padding:20px;
            >div{
                margin-bottom:20px;
                p{
                    margin:0;text-align:center;height:30px;line-height:30px;
                    font-weight: bold;
                }
            }
            >div:last-child{
                margin-bottom:0;
            }
            .detailImg{
                width:100%;
                height:200px;
                border-top-left-radius: 40px;
                border-bottom-right-radius: 40px;
            }
            
        }
    }
</style>

<template>
    <div id="specimen">
        <div class="INFO">
            <div class="CONTENT">
                <div><p>产品编号</p><p>{{hdr.sMaterialNo}}</p></div>
                <div><p>产品名称</p><p>{{hdr.sMaterialName}}</p></div>
                <div><p>规格</p><p>{{hdr.sConstruction}}</p></div>
                <div><p>成份</p><p>{{hdr.sComponent}}</p></div>
                <div><p>幅宽</p><p>{{hdr.sWidth}}</p></div>
                <div><p>克重</p><p>{{hdr.sGMWT}}</p></div>
            </div>
        </div>
        <div class="detail">
            <img src="../../../assets/fabric.jpg" style="width:100%;margin-bottom:10px;"/>
            <div v-for="(item, index) in dtl_src" :key="index">
                <p style="">— {{item.sColorName}}({{item.sColorNo}}) —</p>
                <img class="previewer-demo-img detailImg" :src="item.src" width="100" @click="show('dtl',index)" />
            </div>
        </div>
        <div v-transfer-dom>
            <previewer :list="dtl_src" ref="previewer2" :options="options" @on-index-change="logIndexChange"></previewer>
        </div>
    </div>
</template>

<script>
import Util from '@/libs/util.js';
import {Previewer , TransferDom} from 'vux';

export default {
  name: 'specimen',
  data () {
    return {
        dtl_src:[],
        iProjectId:'',
        uGuid:'',
        hdr:{},
        dtl:[],
        host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
        options: {
            getThumbBoundsFn (index) {
                // find thumbnail element
                let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                // get window scroll Y
                let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                // optionally get horizontal scroll
                // get position of element relative to viewport
                let rect = thumbnail.getBoundingClientRect()
                // w = width
                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                // Good guide on how to get element coordinates:
                // http://javascript.info/tutorial/coordinates
            }
        }
    }
  },
  directives: {
    TransferDom
  },
  components:{
      Previewer
  },
  async mounted(){
        this.iProjectId = this.$route.params.iProjectId;
        this.$route.params.uGuid.split('.').map((x,y) => {
            this.uGuid += String.fromCharCode(x)
        })
        window.data = this;
        await this.getList();
  },
  methods:{
    logIndexChange (arg) {
        console.log(arg)
    },
    show (type,index) {
        this.$refs[type == 'hdr' ? 'previewer1' : 'previewer2'].show(index)
    },
    error(item,index,type){
        this.$set(this.dtl[index],'isErr',true)
    },
    async getList(){
        this.apiGet(`${this.host}${this.$route.params.userId}/goods/onesample/${this.uGuid}/`,{},true).then(res=>{
            this.hdr = res.header;
            this.dtl = res.childs;
            res.childs.map(v=>{
                v.isErr = false;
                this.dtl_src.push({
                    sColorName:v.sColorName,
                    sColorNo:v.sColorNo,
                    src:`${this.host}${this.$route.params.userId}/goods/image_click/?uGuid=${v.uPictureGuid}&iType=2&random=${Math.random()}`
                })
            })
        })
    },
  }
}
</script>