| | |
| | | .ibox-content { |
| | | background-color: rgba(240, 242, 245, 1); |
| | | } |
| | | label { margin: 5px 0 !important; } |
| | | </style> |
| | | </head> |
| | | <div class="ibox-content" id="app"> |
| | | <el-container> |
| | | <el-header style="height: 210px; background-color: white; margin: 15px;"> |
| | | <el-row style="line-height: 60px; padding-top: 20px;"> |
| | | <el-col :span="1" style="font-size: 40px; color:#409EFF;"> |
| | | <i class="el-icon-s-order" type="primary"></i> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <h1 style="line-height: 60px; margin: 0 0;">订单号:{{order.orderNo}}</h1> |
| | | </el-col> |
| | | <el-col :span="5" style="float: right; margin-right: 10px;"> |
| | | <el-button type="info" @click="printf">打印</el-button> |
| | | <el-button type="danger" @click="toBack">返回</el-button> |
| | | <el-aside style="width: 300px; background-color: white; margin: 30px; padding: 10px;"> |
| | | <el-row style="border-bottom: #E4E7ED 1px solid;"> |
| | | <el-col :span="20" style="padding: 10px;"> |
| | | <el-row type="flex" align="middle"> |
| | | <el-col :span="6"> |
| | | <el-avatar :size="50" :src="circleUrl"></el-avatar> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <label>于谦(vip-3)</label> |
| | | <label>A00344</label> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <label>订单号: <span>S1234567890</span></label> |
| | | <label>下单顾问: <span>娟姐</span></label> |
| | | <label>消费门店: <span>星海店</span></label> |
| | | <label>订单时间: <span>2020-10-10 12:12</span></label> |
| | | <label>备 注: <span>这是一个好订单</span></label> |
| | | </el-row> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row class="order-info" type="flex" justify="space-around" style="height: 150px; padding: 30px 30px;"> |
| | | <el-col :span="5"> |
| | | <p>顾问姓名:{{order.staffName}}</p> |
| | | <p>会员姓名:{{order.vipName}}</p> |
| | | <p>会员编号:{{order.vipNo}}</p> |
| | | </el-col> |
| | | <el-col :span="5"> |
| | | <p>卡支付:{{order.cardPay}}</p> |
| | | <p>现金支付:{{order.cashPay}}</p> |
| | | <p>备注:{{order.remark}}</p> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-col :span="6"> |
| | | <p>欠款总额</p> |
| | | <h2>¥ {{order.arrears}}</h2> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <p>折后总额</p> |
| | | <h2>¥ {{order.zkTotal}}</h2> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <p>订单总额</p> |
| | | <h2>¥ {{order.total}}</h2> |
| | | </el-col> |
| | | <el-row style="padding: 10px; border-bottom: #E4E7ED 1px solid;"> |
| | | <el-col :span="20"> |
| | | <el-row type="flex" align="middle"> |
| | | <el-col :span="6"> |
| | | <el-avatar :size="50" :src="circleUrl"></el-avatar> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <label>于谦(vip-3)</label> |
| | | <label>A00344</label> |
| | | </el-col> |
| | | </el-row> |
| | | </el-col> |
| | | </el-row> |
| | | </el-header> |
| | | <el-main style="background-color: white; margin: 15px; padding: 20px 30px;"> |
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="商品" name="goods"> |
| | | <el-table :data="orderData" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="shoppingGoods.name" |
| | | label="商品名称" |
| | | width="300"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="price" |
| | | label="单价" |
| | | width="80"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="count" |
| | | label="购买数量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zkPrice" |
| | | label="折后金额"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="cardPay" |
| | | label="卡付款"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="cashPay" |
| | | label="现金付款"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="arrears" |
| | | label="欠款"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="业绩" name="yj">业绩</el-tab-pane> |
| | | </el-tabs> |
| | | </el-main> |
| | | </el-aside> |
| | | <el-main></el-main> |
| | | </el-container> |
| | | </div> |
| | | </body> |
| | |
| | | var app = new Vue({ |
| | | el : "#app", |
| | | data : { |
| | | activeName : "goods", |
| | | order : "", |
| | | orderItems : "", |
| | | cards : "", |
| | | orderData : [] |
| | | circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
| | | |
| | | }, |
| | | created : function() { |
| | | this.order = /*[[${order}]]*/ |
| | | this.orderItems = /*[[${orderItems}]]*/ |
| | | this.cards = /*[[${cards}]]*/ |
| | | |
| | | this.orderData = this.order.items; |
| | | }, |
| | | methods : { |
| | | handleClick(tab, event) { |
| | | }, |
| | | printf() { |
| | | var id = 1; |
| | | layer.open({ |