index.vue

<style lang="less" >
    #specimen{
        background: #f1f1f1;
        height:100%;
        .Header{
            height:250px;
            width:100%;
            img{
                width: 100%;
                height:100%;
            }
        }
        .INFO{
            background: white;
            margin-top:10px;
            padding: 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="Header">
            <img class="previewer-demo-img" v-for="(item, index) in hdr_src" :src="item.src" width="100" @click="show('hdr',index)" :key="index"/>
        </div>
        <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.sSdivecification}}</p></div>
                <div><p>成分</p><p>{{hdr.sComdivonent}}</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="hdr_src" ref="previewer1" :options="options" @on-index-change="logIndexChange"></previewer>
            <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 {
        hdr_src:[],
        dtl_src:[],
        iProjectId:'',
        sMaterialNo:'',
        hdr:{},
        dtl:[],
        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.sMaterialNo.split('.').map((x,y) => {
            this.sMaterialNo += String.fromCharCode(x)
        })
        await this.getSpeciminHdr();
        await this.getSpeciminDtl();
  },
  methods:{
    logIndexChange (arg) {
        console.log(arg)
    },
    show (type,index) {
        this.$refs[type == 'hdr' ? 'previewer1' : 'previewer2'].show(index)
    },
    error(item,index,type){
        if(type == 'hdr'){
            this.$set(this.hdr,'isErr',true)
        }else{
            this.$set(this.dtl[index],'isErr',true)
        }
    },
    async getSpeciminHdr(){
        let result = await this.request('getSpeciminHdr',{
            data:[
                {key: "url", value: "sMaterialName"},
                {key: "searchname", value: this.sMaterialNo}
            ]
        },true,{iProjectId:this.iProjectId,sUserName:'huansi'});
        if(this.hdr.length <= 0) return false;
        this.hdr = result[0];
        this.hdr.isErr = false;
        this.hdr_src.push({
            src: `https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${this.hdr.iIden}&m=${Math.random() / 9999}`,
        })
    },
    async getSpeciminDtl(){
        let result = await this.request('getSpeciminDtl',{
            data:[
                {key: "url", value: "getDetail"},
                {key: "iIden", value: this.hdr.iIden}
            ]
        },true,{iProjectId:this.iProjectId});
        result.map(x=>{
            x.tCreateTime = x.tCreateTime.replace(/-/g,'/').split('.')[0];
        })
        let data = result.sort((x,y)=>{
            return new Date(x.tCreateTime).getTime() - new Date(y.tCreateTime).getTime();
        })
        data.map(x=>{
            x.isErr = false;
            this.dtl_src.push({
                sColorName:x.sColorName,
                sColorNo:x.sColorNo,
                src:`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${x.iIden}&m=${Math.random() / 9999}`
            })
        })
        this.dtl = data;
    }
  }
}
</script>