| | |
| | | .ibox-content { |
| | | background-color: rgba(240, 242, 245, 1); |
| | | } |
| | | label { margin: 5px 0 !important; } |
| | | label { |
| | | width: 100%; |
| | | margin: 5px 0 !important; |
| | | } |
| | | </style> |
| | | </head> |
| | | <div class="ibox-content" id="app"> |
| | | <el-container> |
| | | <el-aside style="width: 300px; background-color: white; margin: 30px; padding: 10px;"> |
| | | <el-aside style="width: 300px; background-color: white; 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 :span="7"> |
| | | <el-avatar :size="60" :src="circleUrl"></el-avatar> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <el-col :span="10" style="margin-left: 10px;"> |
| | | <label>于谦(vip-3)</label> |
| | | <label>A00344</label> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-row style="line-height: 20px;"> |
| | | <label>订单号: <span>S1234567890</span></label> |
| | | <label>下单顾问: <span>娟姐</span></label> |
| | | <label>消费门店: <span>星海店</span></label> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | <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 :span="24"> |
| | | <el-row> |
| | | <el-col :span="6" style="text-align: right;"> |
| | | <label>总金额</label> |
| | | <label>整单折扣</label> |
| | | <label style="font-size: 14px;">应收金额</label> |
| | | <label>欠款</label> |
| | | <label>已还</label> |
| | | <label>退款</label> |
| | | </el-col> |
| | | <el-col :span="10"> |
| | | <label>于谦(vip-3)</label> |
| | | <label>A00344</label> |
| | | <el-col :span="14" style="text-align: right;"> |
| | | <label>¥ 92</label> |
| | | <label>¥ -12</label> |
| | | <label>¥ 80</label> |
| | | <label>¥ 30</label> |
| | | <label>¥ 30</label> |
| | | <label>¥ 20</label> |
| | | </el-col> |
| | | </el-row> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="padding: 10px; border-bottom: #E4E7ED 1px solid;"> |
| | | <el-col :span="24"> |
| | | <el-row> |
| | | <h3>收款明细</h3> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="6" style="text-align: right;"> |
| | | <label>微信</label> |
| | | <label>支付宝</label> |
| | | <label>银行卡</label> |
| | | <label>欠款</label> |
| | | </el-col> |
| | | <el-col :span="14" style="text-align: right;"> |
| | | <label>¥ 92</label> |
| | | <label>¥ 12</label> |
| | | <label>¥ 80</label> |
| | | <label>¥ 20</label> |
| | | </el-col> |
| | | </el-row> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row type="flex" justify="center" style="margin: 20px;"> |
| | | <el-button size="medium" type="primary">打印</el-button> |
| | | </el-row> |
| | | </el-aside> |
| | | <el-main></el-main> |
| | | <el-main style="background-color: white; margin-right: 15px; margin-left: 15px; padding: 20px 30px;"> |
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="订单明细" name="first"> |
| | | <el-row> |
| | | <el-button size="medium" type="primary">退款</el-button> |
| | | </el-row> |
| | | <el-table |
| | | :data="orderItems" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | type="index" |
| | | width="50"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="goodsNo" |
| | | label="产品编号" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="goodsName" |
| | | label="产品名称" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="goodsType" |
| | | label="产品类型"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="price" |
| | | label="单价"> |
| | | </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="zkTotal" |
| | | label="小计"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="业绩设置" name="second"> |
| | | <el-table |
| | | :data="achieveItems" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | type="index" |
| | | width="50"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="goodsNo" |
| | | label="产品编号" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="goodsName" |
| | | label="产品名称" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="goodsType" |
| | | label="收款"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="price" |
| | | label="业绩类型"> |
| | | </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="zkTotal" |
| | | label="员工"> |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" size="small">分享</el-button> |
| | | <el-button type="text" size="small">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="交易流水" name="third"> |
| | | <el-table |
| | | :data="flowItems" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | type="index" |
| | | width="50"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="orderNo" |
| | | label="订单号" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="flowContent" |
| | | label="交易内容" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="flowType" |
| | | label="交易类型"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="amount" |
| | | label="交易金额"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="payMethod" |
| | | label="支付方式"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="flowNo" |
| | | label="流水号"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-main> |
| | | </el-container> |
| | | </div> |
| | | </body> |
| | |
| | | var app = new Vue({ |
| | | el : "#app", |
| | | data : { |
| | | activeName : "first", |
| | | circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
| | | orderItems : [], |
| | | achieveItems : [], |
| | | flowItems : [], |
| | | |
| | | }, |
| | | created : function() { |
| | |
| | | content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id] |
| | | }); |
| | | }, |
| | | handleClick() { |
| | | |
| | | }, |
| | | toBack() { |
| | | MTools.closeForm(); |
| | | }, |