解释一下列语句的语法,纯文本输出.<!
-- sy1\src\views\orderDetails\index.vue
-->
<template>
<div class="dashboard
-container">
<TabChange
:order
-statics="orderStatics"
:default
-activity="defaultActivity"
@tabChange="change"
/>
<div class="container" :class="{ hContainer: tableData.length }">
<!
-- 搜索项
-->
<div class="tableBar">
<label style="margin
-right: 10
px">订单号：</label>
<el
-input
v
-model="input"
placeholder="请填写订单号"
style="width: 15%"
clearable
@clear="init(orderStatus)"
@keyup.enter.native="initFun(orderStatus)"
/>
<label style="margin
-left: 20
px">手机号：</label>
<el
-input
v
-model="phone"
placeholder="请填写手机号"
style="width: 15%"
clearable
@clear="init(orderStatus)"
@keyup.enter.native="initFun(orderStatus)"
/>
<label style="margin
-left: 20
px">下单时间：</label>
<el
-date
-picker
v
-model="valueTime"
clearable
value
-format="yyyy
-MM
-dd HH:mm:ss"
range
-separator="至"
:default
-time="[&#
39;00:00:00&#
39;, &#
39;2
3:59:59&#
39;]"
type="daterange"
start
-placeholder="开始日期"
end
-placeholder="结束日期"
style="width: 25%; margin
-left: 10
px"
@clear="init(orderStatus)"
/>
<el
-button class="normal
-btn continue" @click="init(orderStatus, true)">
查询
</el
-button>
<el
-button
type="primary"
style="margin
-left: 20
px; background
-color: #ff6b
35; border
-color: #ff6b
35;"
@click="debugCreateOrder"
>
🐛 调试下单
</el
-button>
</div>
<el
-table
v
-if="tableData.length"
:data="tableData"
stripe
class="tableBox"
>
<el
-table
-column key="number" prop="number" label="订单号" />
<el
-table
-column
v
-if="[2,
3, 4].includes(orderStatus)"
key="orderDishes"
prop="orderDishes"
label="订单菜品"
/>
<el
-table
-column
v
-if="[0].includes(orderStatus)"
key="status"
prop="订单状态"
label="订单状态"
>
<template slot
-scope="{ row }">
<span>{{ getOrderType(row) }}</span>
</template>
</el
-table
-column>
<el
-table
-column
v
-if="[0, 5, 6].includes(orderStatus)"
key="consignee"
prop="consignee"
label="用户名"
show
-overflow
-tooltip
/>
<el
-table
-column
v
-if="[0, 5, 6].includes(orderStatus)"
key="phone"
prop="phone"
label="手机号"
/>
<el
-table
-column
v
-if="[0, 2,
3, 4, 5, 6].includes(orderStatus)"
key="address"
prop="address"
label="地址"
:class
-name="orderStatus === 6 ? &#
39;address&#
39; : &#
39;&#
39;"
/>
<el
-table
-column
v
-if="[0, 6].includes(orderStatus)"
key="orderTime"
prop="orderTime"
label="下单时间"
class
-name="orderTime"
min
-width="110"
/>
<el
-table
-column
v
-if="[6].includes(orderStatus)"
key="cancelTime"
prop="cancelTime"
class
-name="cancelTime"
label="取消时间"
min
-width="110"
/>
<el
-table
-column
v
-if="[6].includes(orderStatus)"
key="cancelReason"
prop="cancelReason"
label="取消原因"
class
-name="cancelReason"
:min
-width="[6].includes(orderStatus) ? 80 : &#
39;auto&#
39;"
/>
<el
-table
-column
v
-if="[5].includes(orderStatus)"
key="deliveryTime"
prop="deliveryTime"
label="送达时间"
/>
<el
-table
-column
v
-if="[2,
3, 4].includes(orderStatus)"
key="estimatedDeliveryTime"
prop="estimatedDeliveryTime"
label="预计送达时间"
min
-width="110"
/>
<el
-table
-column
v
-if="[0, 2, 5].includes(orderStatus)"
key="amount"
prop="amount"
label="实收金额"
align="center"
>
<template slot
-scope="{ row }">
<span>￥{{ (row.amount.toFixed(2) * 100) / 100 }}</span>
</template>
</el
-table
-column>
<el
-table
-column
v
-if="[2,
3, 4, 5].includes(orderStatus)"
key="remark"
prop="remark"
label="备注"
align="center"
/>
<el
-table
-column
v
-if="[2,
3, 4].includes(orderStatus)"
key="tablewareNumber"
prop="tablewareNumber"
label="餐具数量"
align="center"
min
-width="80"
/>
<el
-table
-column
prop="btn"
label="操作"
align="center"
:class
-name="orderStatus === 0 ? &#
39;operate&#
39; : &#
39;otherOperate&#
39;"
:min
-width="
[2,
3, 4].includes(orderStatus)
? 1
30
: [0].includes(orderStatus)
? 140
: &#
39;auto&#
39;
"
>
<template slot
-scope="{ row }">
<!
-- <el
-divider direction="vertical" />
-->
<div class="before">
<el
-button
v
-if="row.status === 2"
type="text"
class="blueBug"
@click="orderAccept(row), (isTableOperateBtn = true)"
>
接单
</el
-button>
<el
-button
v
-if="row.status ===
3"
type="text"
class="blueBug"
@click="cancelOrDeliveryOrComplete(
3, row.id)"
>
派送
</el
-button>
<el
-button
v
-if="row.status === 4"
type="text"
class="blueBug"
@click="cancelOrDeliveryOrComplete(4, row.id)"
>
完成
</el
-button>
</div>
<div class="middle">
<el
-button
v
-if="row.status === 2"
type="text"
class="delBut"
@click="orderReject(row), (isTableOperateBtn = true)"
>
拒单
</el
-button>
<el
-button
v
-if="[1,
3, 4, 5].includes(row.status)"
type="text"
class="delBut"
@click="cancelOrder(row)"
>
取消
</el
-button>
</div>
<div class="after">
<el
-button
type="text"
class="blueBug non"
@click="goDetail(row.id, row.status, row)"
>
查看
</el
-button>
</div>
</template>
</el
-table
-column>
</el
-table>
<Empty v
-else :is
-search="isSearch" />
<el
-pagination
v
-if="counts > 10"
class="pageList"
:page
-sizes="[10, 20,
30, 40]"
:page
-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="counts"
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
/>
</div>
<!
-- 查看弹框部分
-->
<el
-dialog
title="订单信息"
:visible.sync="dialogVisible"
width="5
3%"
:before
-close="handleClose"
class="order
-dialog"
>
<el
-scrollbar style="height: 100%">
<div class="order
-top">
<div>
<div style="display:
inline-block">
<label style="font
-size: 16
px">订单号：</label>
<div class="order
-num">
{{ diaForm.number }}
</div>
</div>
<div
style="display:
inline-block"
class="order
-status"
:class="{ status
3: [
3, 4].includes(dialogOrderStatus) }"
>
{{
orderList.filter((item) => item.value === dialogOrderStatus)[0]
.label
}}
</div>
</div>
<p><label>下单时间：</label>{{ diaForm.orderTime }}</p>
</div>
<div class="order
-middle">
<div class="user
-info">
<div class="user
-info
-box">
<div class="user
-name">
<label>用户名：</label>
<span>{{ diaForm.consignee }}</span>
</div>
<div class="user
-phone">
<label>手机号：</label>
<span>{{ diaForm.phone }}</span>
</div>
<div
v
-if="[2,
3, 4, 5].includes(dialogOrderStatus)"
class="user
-getTime"
>
<label>{{
dialogOrderStatus === 5 ? &#
39;送达时间：&#
39; : &#
39;预计送达时间：&#
39;
}}</label>
<span>{{
dialogOrderStatus === 5
? diaForm.deliveryTime
: diaForm.estimatedDeliveryTime
}}</span>
</div>
<div class="user
-address">
<label>地址：</label>
<span>{{ diaForm.address }}</span>
</div>
</div>
<div
class="user
-remark"
:class="{ orderCancel: dialogOrderStatus === 6 }"
>
<div>{{ dialogOrderStatus === 6 ? &#
39;取消原因&#
39; : &#
39;备注&#
39; }}</div>
<span>{{
dialogOrderStatus === 6
? diaForm.cancelReason || diaForm.rejectionReason
: diaForm.remark
}}</span>
</div>
</div>
<div class="dish
-info">
<div class="dish
-label">
菜品
</div>
<div class="dish
-list">
<div
v
-for="(item, index) in diaForm.orderDetailList"
:key="index"
class="dish
-item"
>
<div class="dish
-item
-box">
<span class="dish
-name">{{ item.name }}</span>
<span class="dish
-num">x{{ item.number }}</span>
</div>
<span class="dish
-price">￥{{ item.amount ? item.amount.toFixed(2) : &#
39;&#
39; }}</span>
</div>
</div>
<div class="dish
-all
-amount">
<label>菜品小计</label>
<span>￥{{
(diaForm.amount
- 6
- diaForm.packAmount).toFixed(2)
}}</span>
</div>
</div>
</div>
<div class="order
-bottom">
<div class="amount
-info">
<div class="amount
-label">
费用
</div>
<div class="amount
-list">
<div class="dish
-amount">
<span class="amount
-name">菜品小计：</span>
<span class="amount
-price">￥{{
((diaForm.amount
- 6
- diaForm.packAmount).toFixed(2) *
100) /
100
}}</span>
</div>
<div class="send
-amount">
<span class="amount
-name">派送费：</span>
<span class="amount
-price">￥{{ 6 }}</span>
</div>
<div class="package
-amount">
<span class="amount
-name">打包费：</span>
<span class="amount
-price">￥{{
diaForm.packAmount
? (diaForm.packAmount.toFixed(2) * 100) / 100
: &#
39;&#
39;
}}</span>
</div>
<div class="all
-amount">
<span class="amount
-name">合计：</span>
<span class="amount
-price">￥{{
diaForm.amount
? (diaForm.amount.toFixed(2) * 100) / 100
: &#
39;&#
39;
}}</span>
</div>
<div class="pay
-type">
<span class="pay
-name">支付渠道：</span>
<span class="pay
-value">{{
diaForm.payMethod === 1 ? &#
39;微信支付&#
39; : &#
39;支付宝支付&#
39;
}}</span>
</div>
<div class="pay
-time">
<span class="pay
-name">支付时间：</span>
<span class="pay
-value">{{ diaForm.checkoutTime }}</span>
</div>
</div>
</div>
</div>
</el
-scrollbar>
<span v
-if="dialogOrderStatus !== 6" slot="footer" class="dialog
-footer">
<el
-checkbox
v
-if="dialogOrderStatus === 2 && orderStatus === 2"
v
-model="isAutoNext"
>处理完自动跳转下一条</el
-checkbox>
<el
-button
v
-if="dialogOrderStatus === 2"
@click="orderReject(row), (isTableOperateBtn = false)"
>拒 单</el
-button>
<el
-button
v
-if="dialogOrderStatus === 2"
type="primary"
@click="orderAccept(row), (isTableOperateBtn = false)"
>接 单</el
-button>
<el
-button
v
-if="[1,
3, 4, 5].includes(dialogOrderStatus)"
@click="dialogVisible = false"
>返 回</el
-button>
<el
-button
v
-if="dialogOrderStatus ===
3"
type="primary"
@click="cancelOrDeliveryOrComplete(
3, row.id)"
>派 送</el
-button>
<el
-button
v
-if="dialogOrderStatus === 4"
type="primary"
@click="cancelOrDeliveryOrComplete(4, row.id)"
>完 成</el
-button>
<el
-button
v
-if="[1].includes(dialogOrderStatus)"
type="primary"
@click="cancelOrder(row)"
>取消订单</el
-button>
</span>
</el
-dialog>
<!
-- 拒单，取消弹窗
-->
<el
-dialog
:title="cancelDialogTitle + &#
39;原因&#
39;"
:visible.sync="cancelDialogVisible"
width="42%"
:before
-close="() => ((cancelDialogVisible = false), (cancelReason = &#
39;&#
39;))"
class="cancelDialog"
>
<el
-form label
-width="90
px">
<el
-form
-item :label="cancelDialogTitle + &#
39;原因：&#
39;">
<el
-select
v
-model="cancelReason"
:placeholder="&#
39;请选择&#
39; + cancelDialogTitle + &#
39;原因&#
39;"
>
<el
-option
v
-for="(item, index) in cancelDialogTitle === &#
39;取消&#
39;
? cancelrReasonList
: cancelOrderReasonList"
:key="index"
:label="item.label"
:value="item.label"
/>
</el
-select>
</el
-form
-item>
<el
-form
-item v
-if="cancelReason === &#
39;自定义原因&#
39;" label="原因：">
<el
-input
v
-model.trim="remark"
type="textarea"
:placeholder="&#
39;请填写您&#
39; + cancelDialogTitle + &#
39;的原因（限20字内）&#
39;"
maxlength="20"
/>
</el
-form
-item>
</el
-form>
<span slot="footer" class="dialog
-footer">
<el
-button @click=";(cancelDialogVisible = false), (cancelReason = &#
39;&#
39;)">取 消</el
-button>
<el
-button type="primary" @click="confirmCancel">确 定</el
-button>
</span>
</el
-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue } from &#
39;vue
-property
-decorator&#
39;
import HeadLable from &#
39;@/components/HeadLable/index.vue&#
39;
import InputAutoComplete from &#
39;@/components/InputAutoComplete/index.vue&#
39;
import TabChange from &#
39;./tabChange.vue&#
39;
import Empty from &#
39;@/components/Empty/index.vue&#
39;
import {
getOrderDetailPage,
queryOrderDetailById,
completeOrder,
deliveryOrder,
orderCancel,
orderReject,
orderAccept,
getOrderListBy,
} from &#
39;@/api/order&#
39;
@Component({
components: {
HeadLable,
InputAutoComplete,
TabChange,
Empty,
},
})
export default class extends Vue {
private defaultActivity: any = 0
private orderStatics = {}
private row = {}
private isAutoNext = true
private isTableOperateBtn = true
private currentPageIndex = 0 //记录查看详情数据的index
private orderId = &#
39;&#
39; //订单号
private input = &#
39;&#
39; //搜索条件的订单号
private phone = &#
39;&#
39; //搜索条件的手机号
private valueTime = []
private dialogVisible = false //详情弹窗
private cancelDialogVisible = false //取消，拒单弹窗
private cancelDialogTitle = &#
39;&#
39; //取消，拒绝弹窗标题
private cancelReason = &#
39;&#
39;
private remark = &#
39;&#
39; //自定义原因
private counts: number = 0
private page: number = 1
private pageSize: number = 10
private tableData = []
private diaForm = []
private isSearch: boolean = false
private orderStatus = 0 //列表字段展示所需订单状态,用于分页请求数据
private dialogOrderStatus = 0 //弹窗所需订单状态，用于详情展示字段
private cancelOrderReasonList = [
{
value: 1,
label: &#
39;订单量较多，暂时无法接单&#
39;,
},
{
value: 2,
label: &#
39;菜品已销售完，暂时无法接单&#
39;,
},
{
value:
3,
label: &#
39;餐厅已打烊，暂时无法接单&#
39;,
},
{
value: 0,
label: &#
39;自定义原因&#
39;,
},
]
private cancelrReasonList = [
{
value: 1,
label: &#
39;订单量较多，暂时无法接单&#
39;,
},
{
value: 2,
label: &#
39;菜品已销售完，暂时无法接单&#
39;,
},
{
value:
3,
label: &#
39;骑手不足无法配送&#
39;,
},
{
value: 4,
label: &#
39;客户电话取消&#
39;,
},
{
value: 0,
label: &#
39;自定义原因&#
39;,
},
]
private orderList = [
{
label: &#
39;全部订单&#
39;,
value: 0,
},
{
label: &#
39;待付款&#
39;,
value: 1,
},
{
label: &#
39;待接单&#
39;,
value: 2,
},
{
label: &#
39;待派送&#
39;,
value:
3,
},
{
label: &#
39;派送中&#
39;,
value: 4,
},
{
label: &#
39;已完成&#
39;,
value: 5,
},
{
label: &#
39;已取消&#
39;,
value: 6,
},
]
created() {
this.init(Number(this.$route.query.status) || 0)
}
mounted() {
//如果有值说明是消息通知点击进来的
if (
this.$route.query.orderId &&
this.$route.query.orderId !== &#
39;undefined&#
39;
) {
this.goDetail(this.$route.query.orderId, 2)
}
if (this.$route.query.status) {
this.defaultActivity = this.$route.query.status
}
// console.log(this.$route.query, &#
39;this.$route&#
39;)
}
initFun(orderStatus) {
this.page = 1
this.init(orderStatus)
}
change(activeIndex) {
if (activeIndex === this.orderStatus) return
this.init(activeIndex)
this.input = &#
39;&#
39;
this.phone = &#
39;&#
39;
this.valueTime = []
this.dialogOrderStatus = 0
this.$router.push(&#
39;/order&#
39;)
console.log(activeIndex, &#
39;接收到了子组件的index&#
39;)
}
//获取待处理，待派送，派送中数量
getOrderListBy
3Status() {
getOrderListBy({})
.then((res) => {
if (res.data.code === 1) {
this.orderStatics = res.data.data
} else {
this.$message.error(res.data.msg)
}
})
.catch((err) => {
this.$message.error(&#
39;请求出错了：&#
39; + err.message)
})
}
init(activeIndex: number = 0, isSearch?) {
this.isSearch = isSearch
const params = {
page: this.page,
pageSize: this.pageSize,
number: this.input || undefined,
phone: this.phone || undefined,
beginTime:
this.valueTime && this.valueTime.length > 0
? this.valueTime[0]
: undefined,
endTime:
this.valueTime && this.valueTime.length > 0
? this.valueTime[1]
: undefined,
status: activeIndex || undefined,
}
getOrderDetailPage({ ...params })
.then((res) => {
if (res.data.code === 1) {
this.tableData = res.data.data.records
this.orderStatus = activeIndex
this.counts = Number(res.data.data.total)
this.getOrderListBy
3Status()
if (
this.dialogOrderStatus === 2 &&
this.orderStatus === 2 &&
this.isAutoNext &&
!this.isTableOperateBtn &&
res.data.data.records.length > 1
) {
const row = res.data.data.records[0]
this.goDetail(row.id, row.status, row)
} else {
return null
}
} else {
this.$message.error(res.data.msg)
}
})
.catch((err) => {
this.$message.error(&#
39;请求出错了：&#
39; + err.message)
})
}
getOrderType(row: any) {
if (row.status === 1) {
return &#
39;待付款&#
39;
} else if (row.status === 2) {
return &#
39;待接单&#
39;
} else if (row.status ===
3) {
return &#
39;待派送&#
39;
} else if (row.status === 4) {
return &#
39;派送中&#
39;
} else if (row.status === 5) {
return &#
39;已完成&#
39;
} else if (row.status === 6) {
return &#
39;已取消&#
39;
} else {
return &#
39;退款&#
39;
}
}
// 查看详情
async goDetail(id: any, status: number, row?: any) {
// console.log(111, index, row)
this.diaForm = []
this.dialogVisible = true
this.dialogOrderStatus = status
this.orderId = id
const { data } = await queryOrderDetailById({ orderId: id })
this.diaForm = data.data
this.row = row || { id: this.$route.query.orderId, status: status }
if (this.$route.query.orderId) {
this.$router.push(&#
39;/order&#
39;)
}
}
//打开拒单弹窗
orderReject(row: any) {
this.cancelDialogVisible = true
this.orderId = row.id
this.dialogOrderStatus = row.status
this.cancelDialogTitle = &#
39;拒绝&#
39;
this.dialogVisible = false
this.cancelReason = &#
39;&#
39;
}
//接单
orderAccept(row: any) {
this.orderId = row.id
this.dialogOrderStatus = row.status
orderAccept({ id: this.orderId })
.then((res) => {
if (res.data.code === 1) {
this.$message.success(&#
39;操作成功&#
39;)
this.orderId = &#
39;&#
39;
// this.dialogOrderStatus = 0
this.dialogVisible = false
this.init(this.orderStatus)
} else {
this.$message.error(res.data.msg)
}
})
.catch((err) => {
this.$message.error(&#
39;请求出错了：&#
39; + err.message)
})
}
//打开取消订单弹窗
cancelOrder(row: any) {
this.cancelDialogVisible = true
this.orderId = row.id
this.dialogOrderStatus = row.status
this.cancelDialogTitle = &#
39;取消&#
39;
this.dialogVisible = false
this.cancelReason = &#
39;&#
39;
}
//确认取消或拒绝订单并填写原因
confirmCancel(type) {
if (!this.cancelReason) {
return this.$message.error(`请选择${this.cancelDialogTitle}原因`)
} else if (this.cancelReason === &#
39;自定义原因&#
39; && !this.remark) {
return this.$message.error(`请输入${this.cancelDialogTitle}原因`)
}
(this.cancelDialogTitle === &#
39;取消&#
39; ? orderCancel : orderReject)({
id: this.orderId,
// eslint
-disable
-next
-line standard/computed
-property
-even
-spacing
[this.cancelDialogTitle === &#
39;取消&#
39; ? &#
39;cancelReason&#
39; : &#
39;rejectionReason&#
39;]:
this.cancelReason === &#
39;自定义原因&#
39; ? this.remark : this.cancelReason,
})
.then((res) => {
if (res.data.code === 1) {
this.$message.success(&#
39;操作成功&#
39;)
this.cancelDialogVisible = false
this.orderId = &#
39;&#
39;
// this.dialogOrderStatus = 0
this.init(this.orderStatus)
} else {
this.$message.error(res.data.msg)
}
})
.catch((err) => {
this.$message.error(&#
39;请求出错了：&#
39; + err.message)
})
}
// 派送，完成
cancelOrDeliveryOrComplete(status: number, id: string) {
const params = {
status,
id,
}
;(status ===
3 ? deliveryOrder : completeOrder)(params)
.then((res) => {
if (res.data.code === 1) {
this.$message.success(&#
39;操作成功&#
39;)
this.orderId = &#
39;&#
39;
// this.dialogOrderStatus = 0
this.dialogVisible = false
this.init(this.orderStatus)
} else {
this.$message.error(res.data.msg)
}
})
.catch((err) => {
this.$message.error(&#
39;请求出错了：&#
39; + err.message)
})
}
handleClose() {
this.dialogVisible = false
}
// 调试下单功能
debugCreateOrder() {
const debugOrderData = {
addressBook: {
id: 1,
userId: 1,
consignee: &#
39;测试用户&#
39;,
phone: &#
39;1
38001
38000&#
39;,
sex: &#
39;1&#
39;,
provinceCode: &#
39;110000&#
39;,
provinceName: &#
39;北京市&#
39;,
cityCode: &#
39;110100&#
39;,
cityName: &#
39;北京市&#
39;,
districtCode: &#
39;110101&#
39;,
districtName: &#
39;东城区&#
39;,
detail: &#
39;测试地址详情&#
39;,
label: &#
39;公司&#
39;,
isDefault: 1
},
amount: 88.00,
estimatedDeliveryTime: new Date(Date.now() +
30 * 60 * 1000).toISOString().slice(0, 19).replace(&#
39;T&#
39;, &#
39; &#
39;),
payMethod: 1,
remark: &#
39;这是一个调试测试订单&#
39;,
shoppingCartList: [
{
name: &#
39;测试菜品&#
39;,
image: &#
39;https://via.placeholder.com/150&#
39;,
dishId: 1,
setmealId: null,
dishFlavor: &#
39;不辣&#
39;,
number: 2,
amount: 44.00
}
],
tablewareNumber: 1,
tablewareStatus: 1
}
// 模拟API调用创建订单
const loading = this.$loading({
lock: true,
text: &#
39;正在创建调试订单...&#
39;,
spinner: &#
39;el
-icon
-loading&#
39;,
background: &#
39;rgba(0, 0, 0, 0.7)&#
39;
})
// 模拟异步请求
setTimeout(() => {
loading.close()
this.$message.success(&#
39;调试订单创建成功！订单号: DEBUG&#
39; + Date.now())
// 刷新订单列表
this.init(this.orderStatus)
}, 1500)
}
private handleSizeChange(val: any) {
this.pageSize = val
this.init(this.orderStatus)
}
private handleCurrentChange(val: any) {
this.page = val
this.init(this.orderStatus)
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&
-container {
margin:
30
px;
// height: 100%;
min
-height: 700
px;
.container {
background: #fff;
position: relative;
z
-index: 1;
padding:
30
px 28
px;
border
-radius: 4
px;
// min
-height: 650
px;
height: calc(100%
- 55
px);
.tableBar {
// display: flex;
margin
-bottom: 20
px;
justify
-content: space
-between;
.tableLab {
span {
cursor: pointer;
display:
inline-block;
font
-size: 14
px;
padding: 0 20
px;
color: $gray
-2;
border
-right: solid 1
px $gray
-4;
}
}
}
.tableBox {
width: 100%;
border: 1
px solid $gray
-5;
border
-bottom: 0;
}
.pageList {
text
-align: center;
margin
-top:
30
px;
}
//查询黑色按钮样式
.normal
-btn {
background: #
333333;
color: white;
margin
-left: 20
px;
}
}
.hContainer {
height: auto !important;
}
}
}
.search
-btn {
margin
-left: 20
px;
}
.info
-box {
margin:
-15
px -44
px 20
px;
p {
display: flex;
height: 20
px;
line
-height: 20
px;
font
-size: 14
px;
font
-weight: 400;
color: #666666;
text
-align: left;
margin
-bottom: 14
px;
&:last
-child {
margin
-bottom: 0;
}
label {
width: 100
px;
display:
inline-block;
color: #666;
}
.des {
flex: 1;
color: #
333333;
}
}
}
.order
-top {
// height: 80
px;
border
-bottom: 1
px solid #e7e6e6;
padding
-bottom: 26
px;
padding
-left: 22
px;
padding
-right: 22
px;
// margin: 0
30
px;
display: flex;
justify
-content: space
-between;
align
-items: center;
.order
-status {
width: 57.25
px;
height: 27
px;
background: #
333333;
border
-radius: 1
3.5
px;
color: white;
margin
-left: 19
px;
text
-align: center;
line
-height: 27
px;
}
.status
3 {
background: #f56c6c;
}
p {
color: #
333;
label {
color: #666;
}
}
.order
-num {
font
-size: 16
px;
color: #2a2929;
font
-weight: bold;
display:
inline-block;
}
}
.order
-middle {
.user
-info {
min
-height: 140
px;
background: #fbfbfa;
margin
-top: 2
3px;
padding: 20
px 4
3px;
color: #
333;
.user
-info
-box {
min
-height: 55
px;
display: flex;
flex
-wrap: wrap;
.user
-name {
flex: 67%;
}
.user
-phone {
flex:
33%;
}
.user
-getTime {
margin
-top: 14
px;
flex: 80%;
label {
margin
-right:
3px;
}
}
label {
margin
-right: 17
px;
color: #666;
}
.user
-address {
margin
-top: 14
px;
flex: 80%;
label {
margin
-right:
30
px;
}
}
}
.user
-remark {
min
-height: 4
3px;
line
-height: 4
3px;
background: #fffbf0;
border: 1
px solid #fbe
396;
border
-radius: 4
px;
margin
-top: 10
px;
padding: 6
px;
display: flex;
align
-items: center;
div {
display:
inline-block;
min
-width: 5
3px;
height:
32
px;
background: #fbe
396;
border
-radius: 4
px;
text
-align: center;
line
-height:
32
px;
color: #
333;
margin
-right:
30
px;
// padding: 12
px 6
px;
}
span {
color: #f2a402;
line
-height: 1.15;
}
}
.orderCancel {
background: #ffffff;
border: 1
px solid #b6b6b6;
div {
padding: 0 10
px;
background
-color: #e5e4e4;
}
span {
color: #f56c6c;
}
}
}
.dish
-info {
// min
-height: 180
px;
display: flex;
flex
-wrap: wrap;
padding: 20
px 40
px;
border
-bottom: 1
px solid #e7e6e6;
.dish
-label {
color: #666;
}
.dish
-list {
flex: 80%;
display: flex;
flex
-wrap: wrap;
.dish
-item {
flex: 50%;
margin
-bottom: 14
px;
color: #
333;
.dish
-num {
}
.dish
-item
-box {
display:
inline-block;
width: 120
px;
}
}
}
.dish
-label {
margin
-right: 65
px;
}
.dish
-all
-amount {
flex: 1;
padding
-left: 92
px;
margin
-top: 10
px;
label {
color: #
333333;
font
-weight: bold;
margin
-right: 5
px;
}
span {
color: #f56c6c;
}
}
}
}
.order
-bottom {
.amount
-info {
// min
-height: 180
px;
display: flex;
flex
-wrap: wrap;
padding: 20
px 40
px;
padding
-bottom: 0
px;
.amount
-label {
color: #666;
margin
-right: 65
px;
}
.amount
-list {
flex: 80%;
display: flex;
flex
-wrap: wrap;
color: #
333;
// height: 65
px;
.dish
-amount,
.package
-amount,
.pay
-type {
display:
inline-block;
width:
300
px;
margin
-bottom: 14
px;
flex: 50%;
}
.send
-amount,
.all
-amount,
.pay
-time {
display:
inline-block;
flex: 50%;
padding
-left: 10%;
}
.package
-amount {
.amount
-name {
margin
-right: 14
px;
}
}
.all
-amount {
.amount
-name {
margin
-right: 24
px;
}
.amount
-price {
color: #f56c6c;
}
}
.send
-amount {
.amount
-name {
margin
-right: 10
px;
}
}
}
}
}
</style>
<style lang="scss">
.dashboard
-container {
.cancelReason {
padding
-left: 40
px;
}
.cancelTime {
padding
-left: 50
px;
}
.orderTime {
padding
-left: 50
px;
}
td.operate .cell {
.before,
.middle,
.after {
height:
39
px;
width: 48
px;
}
}
td.operate .cell,
td.otherOperate .cell {
display: flex;
flex
-wrap: nowrap;
justify
-content: center;
}
.order
-dialog {
.el
-dialog {
max
-height: 764
px !important;
display: flex;
flex
-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
max
-height: calc(100%
- 30
px);
max
-width: calc(100%
- 30
px);
}
.el
-dialog__body {
height: 520
px !important;
}
}
}
.el
-dialog__body {
padding
-top:
34
px;
padding
-left:
30
px;
padding
-right:
30
px;
}
.cancelDialog {
.el
-dialog__body {
padding
-left: 64
px;
}
.el
-select,
.el
-textarea {
width: 29
3px;
}
.el
-textarea textarea {
height: 114
px;
}
}
.el
-dialog__footer {
.el
-checkbox {
float: left;
margin
-left: 40
px;
}
.el
-checkbox__label {
color: #
333333 !important;
}
}
.empty
-box {
display: flex;
align
-items: center;
justify
-content: center;
img {
margin
-top: 0 !important;
}
}
</style>
博客介绍了去除间距的三种解决方法，其中第三种方法涉及html层面，并提供了详细参考链接https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/ 。
扫一扫
714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
