track.vue

<style lang="less" >
    #searchOrderTrack{
        height:100%;
        background:white;
        display:flex;
        flex-direction:column;
        .scrollContainer1{
            flex-grow: 1;
            height:1px;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            // padding-bottom: 42px;
        }
        .scrollContainer2{
            height:100%;
        }
        .basic{
            padding:0 20px;
            .Title{
                height:40px;
                display: flex;
                align-items: center;
            }
            .items{
                position: relative;
                margin-bottom:10px;
            }
            .items:before{
                content:"";
                position: absolute;
                left:-10px;
                border:2px solid #5cadff;
                height:100%;
            }
            .content{
                display: flex;
                line-height:25px;
                >div>span:first-child{
                    color:#aaa;
                    display: inline-block;
                    width:70px;
                }
                >div:nth-child(odd){
                    flex:1;
                    text-align: left;
                }
                >div:nth-child(even){
                    width:40%;
                    text-align: right;
                }
            }
        }
        
        .line{
            flex:1;
            border:0.5px solid #bbb;
            margin-left:15px;
        }
        .Table{
            margin-top:10px;
        }
        .btns{
            position: fixed;
            bottom:0;
            width:100%;
        }
    }
</style>

<template>
    <div id="searchOrderTrack">
        <div class="basic">
            <div class="Title">
                <span>基本信息</span>
                <div class="line"></div>
            </div> 
            <div>
                <div class="content">
                    <div><span>订单号：</span>{{hdr.sOrderNo}}</div>
                    <div>{{hdr.dReceivedDate}}</div>
                </div>
                <div class="content">
                    <div><span>客户：</span>{{hdr.sCustomerName}}</div>
                </div>
                <div class="content">
                    <div><span>产品：</span><span @click="routerToMaterialDetail" style="color:#5cadff;text-decoration:underline;">{{hdr.sSampleMaterialName}}，{{hdr.sSampleMaterialNo}}</span></div>
                </div>
                <div class="content">
                    <div><span>总数量：</span><span style="color:#5cadff;">{{nAllQty}}</span></div>
                    <div><span>总金额：</span><span style="color:#5cadff;">{{nAllAmount}}</span></div>
                </div>
            </div>
        </div>
        <div class="Table">
            <customerTable :columns="columns" :list="dtl" :tableStyle="tableStyle"></customerTable>  
        </div>
        <div class="scrollContainer2">
            <div class="basic" v-for="(v1,i1) in orderallmes" :key="i1"  style="font-size:12px;">
                <div class="Title">
                    <span>{{v1.sType}}</span>
                    <div class="line"></div>
                </div> 
                <div class="items" v-for="(v2,i2) in v1.child" :key="i2">
                    <div class="content">
                        <div><span>{{v1.sType.substr(0,2)}}单号：</span>{{v2.sBillNo}}</div>
                        <div>{{v2.dDate}}</div>
                    </div>
                    <div class="content">
                        <div><span>{{v1.sCheckItemName}}：</span>{{v2.sCheckItem}}</div>
                    </div>
                    <div class="content">
                        <div><span>产品：</span>{{v2.sMaterialNameSample}}</div>
                    </div>
                    <div class="content" v-for="(v3,i3) in v2.child" :key="i3" style="display:block;">
                        <div style="display:flex;lin-height:25px;">
                            <div style="display:flex;max-width:40%;width:40%;min-height:40%;flex:none;">
                                <span style="min-width:70px;display:inline-flex;align-items:center;">颜色：</span>
                                <div style="display:flex;flex-wrap:wrap;">
                                    <div style="width:100%;display:flex;align-items:center;">{{v3.sColorNo}}</div>
                                    <!-- <div style="width:100%;">色号</div> -->
                                </div>
                            </div>
                            <div style="max-width:30%;width:30%;min-height:30%;flex:none;display: flex;align-items: center;justify-content: flex-start;word-break:break-word;">
                                <span style="width:50px;min-width:50px;min-width:50px;">数量：</span>
                                <span style="color:#5cadff;text-align:left;">{{v3.nQty || 0}}{{v3.sUnit}}</span>
                            </div>
                            <div style="max-width:30%;width:30%;min-height:30%;flex:none;display: flex;align-items: center;justify-content: flex-end;">
                                <span style="width:50px;min-width:50px;min-width:50px;">金额：</span>
                                <span style="color:#5cadff;width:40%;max-with:40%;min-height:40%;word-break:break-word;text-align:left;">{{v3.nAmount || 0}}</span>
                            </div>
                        </div>
                        <div style="width:100%;text-align:left;display:flex;color:#FF8247;" v-if="!v2.isAll">
                            <span style="color:#FF8247;">摘要：</span>
                            <div style="flex:1;word-wrap: break-word;">{{v3.sRemark}}</div>
                        </div>
                    </div>
                    <div class="content" v-if="v2.isAll" style="line-height:normal;">
                        <div style="display:flex;color:#FF8247;">
                            <span style="color:#FF8247;">摘要：</span>
                            <div style="flex:1;word-wrap: break-word;">{{v2.sRemark}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="btns">
            <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="share">转发</x-button>
        </div>
        <div id="photo">
            <img class="imgDownload" :src="url" style="width:100%;">
        </div> -->
    </div>
</template>

<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'
import { XButton } from 'vux'

export default {
    name: 'searchOrderTrack',
    data () {
        return {
            host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
            // host:'http://192.168.4.40:5001',
            columns:[
                {
                    width:'20vw',
                    name:'颜色',
                    align:'center',
                    field:'sColorName',
                    fixed:true
                },
                {
                    width:'15vw',
                    name:'单价',
                    align:'center',
                    field:'nPrice',
                },
                {
                    width:'15vw',
                    name:'数量',
                    align:'center',
                    field:'nQty'
                },
                {
                    width:'15vw',
                    name:'金额',
                    align:'center',
                    field:'nAmount'
                },
                {
                    width:'35vw',
                    name:'摘要',
                    align:'center',
                    field:'sRemark'
                }
            ],
            tableStyle:{
                theadBgColor:'rgba(176,226,255,0.3)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'auto',
                tbodyTrBorderBottom:'0.5px solid #5cadff'
            },
            dtl:[],
            nAllQty:0,
            nAllAmount:0,
            orderallmes:[],
            url:"",
            direction:''
        }
    },
    async mounted(){
        window.d = this;
    },
    async activated(){
        // window.removeEventListener("resize", this.renderResize, false)
        // window.addEventListener("resize", this.renderResize, false)
        this.clean();
        await this.getDetail();
        await this.getOrderallmes();
    },
    computed:{
        ...mapState({
            hdr:state => state.searchOrder.hdr,
            userId:state => state.app.userId
        })
    },
    methods:{
        renderResize() {
            // 判断横竖屏
            let width = document.documentElement.clientWidth
            let height = document.documentElement.clientHeight
            if(width > height) {
                this.direction = 'cross'
            }else{
                this.direction = 'vertical';
            }
            // 做页面适配
            // 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
        },
        routerToMaterialDetail(){
            this.$store.dispatch('searchOrderSaveDtl',this.hdr);
            this.$router.push({name:'searchOrderMaterialDetail'})
            // this.$store.dispatch('searchOrderSaveHdr',this.hdr);
            // this.$router.push({name:'searchOrderDetail'})
        },
        async getDetail(){
            let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{
                uGUID:this.hdr.uGUID
            },true);
            
            if(res.length > 0){
                this.dtl = res[0].child;
                this.nAllAmount = res[0].nAllAmount;
                this.nAllQty = res[0].nAllQty;
            }
        },
        async getOrderallmes(){
            let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/orderallmes/`,{
                sOrderNo:this.hdr.sOrderNo
            },true);
            
            if(res.length > 0){
                this.orderallmes = res;
                for(let x of this.orderallmes){
                    x.child = x.child.filter(x=>x.sBillNo)
                }
                this.orderallmes = this.orderallmes.filter(x=>x.child.length > 0);

                this.orderallmes.map((x,i1)=>{
                    x.child.map((y,i2)=>{
                        let arr = Array.from(new Set((y.child.map(z=>z.sRemark))))
                        if(arr.length > 1){
                            y.isAll = false;
                        }else{
                            y.sRemark = arr.join('');
                            y.isAll = true;
                        }
                    })
                })
            }
        },
        clean(){
            this.orderallmes = [];
            this.dtl = [];
            this.nAllAmount = 0;
            this.nAllQty = 0;
        },
        share(){
            // wx.miniProgram.postMessage({ data: { imgBase64: imageUrl } })
　　　　　　　var shareContent = document.getElementById("searchOrderTrack");
            var that = this;
            html2canvas( shareContent,{
                onrendered: function(canvas){
                    var img = new Image();
                    img.src = canvas.toDataURL();
                    var url = img.src.replace('data:image/png;base64,','');
                    
                    wx.miniProgram.postMessage({ data: { imgBase64: url } })


                    // var triggerEvent = "touchstart";
                    // var blob=new Blob([''], {type:'application/octet-stream'});
                    // var url = URL.createObjectURL(blob);
                    // return false;
                    // var a = document.createElement('a');
                    // a.href = img.src;
                    // a.download = img.src.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
                    // var e = document.createEvent('MouseEvents');
                    // e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    // a.dispatchEvent(e);
                    // URL.revokeObjectURL(url);
                    // document.getElementById("photo").appendChild(img);
                }
            })
        },
    },
    components:{
        customerTable,
        XButton
    },
}
</script>