|
|
@@ -0,0 +1,355 @@
|
|
|
+<template>
|
|
|
+ <div class="hello">
|
|
|
+ <div class="topnav">
|
|
|
+ <img src="../../assets/img/icon_arrow.png" alt="" class="topnavIcon">
|
|
|
+ 订单管理
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="line">
|
|
|
+ <div class="lineTitleBox">
|
|
|
+ <div class="lineTitle">单据信息</div>
|
|
|
+ <div class="linestatus">订单状态</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">客户名称：</div>
|
|
|
+ <div class="linerowCont linerowCont2">PO20022600083635
|
|
|
+ <div class="copy">复制</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">订单编号：</div>
|
|
|
+ <div class="linerowCont">PO20022600083635</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">制单时间：</div>
|
|
|
+ <div class="linerowCont">2019-09-09 12:12:43 张三</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">支付状态：</div>
|
|
|
+ <div class="linerowCont">2019-09-09 12:12:43 张三</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">付款方式：</div>
|
|
|
+ <div class="linerowCont">2019-09-09 12:12:43 张三</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">支付日期：</div>
|
|
|
+ <div class="linerowCont">2019-09-09 12:12:43 张三</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">销售员：</div>
|
|
|
+ <div class="linerowCont">车裂文</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">仓库：</div>
|
|
|
+ <div class="linerowCont">车裂文</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">收货地址：</div>
|
|
|
+ <div class="linerowCont">王源 13287705608济南市历城区工业北路9898号</div>
|
|
|
+ </div>
|
|
|
+ <div class="linerow">
|
|
|
+ <div class="linerowName">销售备注：</div>
|
|
|
+ <div class="linerowCont">王源 13287705608济南市历城区工业北路9898号</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="line" style="margin-top: 0.2rem;">
|
|
|
+ <div class="lineTitleBox">
|
|
|
+ <div class="lineTitle">配件清单</div>
|
|
|
+ </div>
|
|
|
+ <div class="goodsLine" v-for="(item,index) in 3">
|
|
|
+ <div class="goodleft">
|
|
|
+ <div class="goodsName">耐诺思 铂金火花塞 单位</div>
|
|
|
+ <div class="goodsGg">UH908980 | 909990003</div>
|
|
|
+ <div class="goodsprice">￥783.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="goodsRighr">
|
|
|
+ <div class="goodsNum">x22</div>
|
|
|
+ <div class="goodsFh">发货 68</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="goodsTotal">
|
|
|
+ <div class="goodsTotalLine">
|
|
|
+ <div class="goodsTotalName">金额：</div>
|
|
|
+ <div class="goodsTotalNUm1">下单 <span class="span1">211</span> </div>
|
|
|
+ <div class="goodsTotalFh">发货 <span class="span2">0</span> </div>
|
|
|
+ </div>
|
|
|
+ <div class="goodsTotalLine">
|
|
|
+ <div class="goodsTotalName">数量：</div>
|
|
|
+ <div class="goodsTotalNUm1">下单 211</div>
|
|
|
+ <div class="goodsTotalFh">发货 0</div>
|
|
|
+ </div>
|
|
|
+ <div class="goodsTotalLine">
|
|
|
+ <div class="goodsTotalName">种类：</div>
|
|
|
+ <div class="goodsTotalNUm1">下单 211</div>
|
|
|
+ <div class="goodsTotalFh">发货 0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div style="height: 0.2rem;"></div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <div class="btmBtn1">关闭</div>
|
|
|
+ <div class="btmBtn1" @click="editShowBtn">编辑</div>
|
|
|
+ <div class="btmBtn1 btmcolor">提交</div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 0.2rem;"></div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <div class="btmBtn2">取消冻结额度</div>
|
|
|
+ <div class="btmBtn2 btmcolor">收款</div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 0.2rem;"></div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <div class="btmBtn2">关闭</div>
|
|
|
+ <div class="btmBtn2 btmcolor">审核</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <div class="stockBox" v-if="editShow" @click="edithide">
|
|
|
+ <div class="stockCont" @click.stop="">
|
|
|
+ <div class="stockTitle">编辑单据信息
|
|
|
+ <img src="../../assets/img/pop_icon_close.png" alt="" class="stockclose" @click="edithide">
|
|
|
+ </div>
|
|
|
+ <div class="tkline">
|
|
|
+ <div class="tklineLeft">支付方式</div>
|
|
|
+ <div class="tklineRight">
|
|
|
+ <div class="payType payActive">货到付款</div>
|
|
|
+ <div class="payType">线上支付</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tkline">
|
|
|
+ <div class="tklineLeft">收货地址</div>
|
|
|
+ <div class="tklineRight2">
|
|
|
+ 山东省济南市历下区舜华东路999号
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tkline">
|
|
|
+ <div class="tklineLeft">收货人</div>
|
|
|
+ <div class="tklineRight2">车裂文</div>
|
|
|
+ </div>
|
|
|
+ <div class="tkline">
|
|
|
+ <div class="tklineLeft">收货电话</div>
|
|
|
+ <div class="tklineRight2">15527399960</div>
|
|
|
+ </div>
|
|
|
+ <div class="tkline">
|
|
|
+ <div class="tklineLeft">销售备注</div>
|
|
|
+ <van-field v-model="value" label="" placeholder="请输入" style="padding-top: 0.25rem;"/>
|
|
|
+ </div>
|
|
|
+ <div class="tkBtmBox">
|
|
|
+ <div class="tkBtmBtn">保存</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'orderDetail',
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ editShow:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ edithide(){
|
|
|
+ this.editShow=false;
|
|
|
+ },
|
|
|
+ editShowBtn(){
|
|
|
+ this.editShow=true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped>
|
|
|
+.stockBox{
|
|
|
+ width: 100%;height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+ .stockCont{
|
|
|
+ height: 80vh;
|
|
|
+ margin-top: 20vh;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 0.32rem 0.32rem 0px 0px;
|
|
|
+ }
|
|
|
+ .stockTitle{
|
|
|
+ font-size: 0.30rem;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ padding-top: 0.42rem;
|
|
|
+ padding-left: 0.32rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 0.32rem;
|
|
|
+ }
|
|
|
+ .stockclose{
|
|
|
+ width: 0.28rem;height: 0.28rem;margin-top: 0.09rem;
|
|
|
+ }
|
|
|
+ .tkBtmBox{
|
|
|
+ width: 100vw;
|
|
|
+ height: 1.10rem;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -0.02rem 0.12rem 0px rgba(153,153,153,0.15);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .tkBtmBtn{
|
|
|
+ width: 7rem;line-height: 0.72rem;background: #3F90F7;border-radius: 0.08rem;
|
|
|
+ margin: 0 auto;margin-top: 0.19rem;
|
|
|
+ color: #FFFFFF;font-size: 0.28rem;text-align: center;
|
|
|
+ }
|
|
|
+.tkline{
|
|
|
+ display: flex;font-size: 0.26rem;
|
|
|
+ border-bottom: 1px solid #F5F5F5;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.tklineRight{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.tklineRight2{
|
|
|
+ line-height: 0.88rem;color: #3C3C3C;font-size: 0.26rem;
|
|
|
+}
|
|
|
+.tklineLeft{
|
|
|
+ padding-left: 0.25rem;
|
|
|
+ line-height: 0.88rem;
|
|
|
+ color: #666666;
|
|
|
+ width: 1.44rem;
|
|
|
+}
|
|
|
+.payType{
|
|
|
+ width: 1.54rem;
|
|
|
+ height: 0.56rem;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 0.28rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.56rem;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ margin-top: 0.16rem;
|
|
|
+ margin-right: 0.24rem;
|
|
|
+}
|
|
|
+.payActive{
|
|
|
+ width: 1.54rem;
|
|
|
+ height: 0.52rem;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 0.28rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.56rem;
|
|
|
+ color: #3F90F7;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ border: 0.02rem solid #3F90F7;
|
|
|
+ background: #F4F9FF;
|
|
|
+}
|
|
|
+.hello{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+.topnavIcon{
|
|
|
+ width: 0.3rem;height: 0.3rem;margin-right: 0.1rem;margin-top: 0.01rem;
|
|
|
+}
|
|
|
+.topnav{
|
|
|
+ display: flex;padding:0.18rem 0.24rem;color: #666666;line-height: 0.38rem;font-size: 0.26rem;
|
|
|
+}
|
|
|
+.box{
|
|
|
+ padding: 0 0.24rem;
|
|
|
+}
|
|
|
+.line{
|
|
|
+ padding: 0.3rem 0.2rem;background: #fff;
|
|
|
+ border-radius: 0.1rem;
|
|
|
+}
|
|
|
+.lineTitle{
|
|
|
+ font-weight: 500;font-size: 0.28rem;
|
|
|
+ color: #3C3C3C;line-height: 0.4rem;
|
|
|
+}
|
|
|
+.linestatus{
|
|
|
+ color: #3F90F7;font-size: 0.26rem;line-height: 0.4rem;
|
|
|
+}
|
|
|
+.lineTitleBox{
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+}
|
|
|
+.linerow{
|
|
|
+ display: flex;font-size: 0.26rem;color: #666666;line-height: 0.37rem;padding-top: 0.2rem;padding-bottom: 0.1rem;
|
|
|
+}
|
|
|
+.linerowCont{
|
|
|
+ color: #3C3C3C;
|
|
|
+}
|
|
|
+.linerowName{
|
|
|
+ width: 1.4rem;
|
|
|
+}
|
|
|
+.linerowCont2{
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+}
|
|
|
+.copy{
|
|
|
+ width: 0.77rem;background: #F4F5F7;text-align: center;color: #333333;
|
|
|
+ height: 0.36rem;border-radius: 0.22rem;line-height: 0.38rem;font-size: 0.24rem;
|
|
|
+ margin-left: 0.2rem;
|
|
|
+}
|
|
|
+.goodsLine{
|
|
|
+ display: flex;justify-content: space-between;
|
|
|
+ padding: 0.2rem 0;border-bottom: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+.goodsName{
|
|
|
+ color: #3C3C3C;line-height: 0.37rem;width: 5.4rem;font-size: 0.26rem;
|
|
|
+}
|
|
|
+.goodsGg{
|
|
|
+ color: #999999;font-size: 0.24rem;padding-top: 0.1rem;
|
|
|
+}
|
|
|
+.goodsprice{
|
|
|
+ color: #3C3C3C;font-size: 0.24rem;padding-top: 0.1rem;
|
|
|
+}
|
|
|
+.goodsNum{
|
|
|
+ color: #999999;font-size: 0.24rem;text-align: right;
|
|
|
+}
|
|
|
+.goodsFh{
|
|
|
+ color: #F19D01;font-size: 0.24rem;padding-top: 0.1rem;
|
|
|
+}
|
|
|
+.goodsTotalLine{
|
|
|
+ display: flex;color: #666666;
|
|
|
+ font-size: 0.26rem;padding-top: 0.24rem;
|
|
|
+}
|
|
|
+.goodsTotalName{
|
|
|
+ width:1.3rem ;
|
|
|
+}
|
|
|
+.goodsTotalNUm1{
|
|
|
+ width: 2.5rem;
|
|
|
+}
|
|
|
+.span1{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF4F00;
|
|
|
+ font-size: 0.32rem;
|
|
|
+}
|
|
|
+.span2{
|
|
|
+ color: #F19D01;font-size: 0.32rem;
|
|
|
+}
|
|
|
+.bottomBox{
|
|
|
+ width: 100%;display: flex;justify-content: space-around;
|
|
|
+ height: 0.98rem;background: #FFFFFF;
|
|
|
+}
|
|
|
+.btmBtn1{
|
|
|
+width: 2.12rem; height: 0.56rem;margin-top: 0.21rem;
|
|
|
+line-height: 0.6rem;text-align: center;
|
|
|
+border-radius: 0.36rem;color: #3C3C3C;font-size: 0.28rem;
|
|
|
+border: 0.02rem solid #DDDDDD;
|
|
|
+}
|
|
|
+
|
|
|
+.btmBtn2{
|
|
|
+ width: 3.34rem; height: 0.56rem;margin-top: 0.21rem;
|
|
|
+ line-height: 0.6rem;text-align: center;
|
|
|
+ border-radius: 0.36rem;color: #3C3C3C;font-size: 0.28rem;
|
|
|
+ border: 0.02rem solid #DDDDDD;
|
|
|
+}
|
|
|
+.btmcolor{
|
|
|
+ color: #3F90F7;border: 0.02rem solid #3F90F7;
|
|
|
+}
|
|
|
+</style>
|
