861 lines
22 KiB
Vue
861 lines
22 KiB
Vue
<template>
|
||
<div class="content">
|
||
<div class="cart_wrap card" v-loading="cartLoading">
|
||
<div class="menu_top">
|
||
<div class="menu" @click="pendingCartModalRef.show()">
|
||
<el-icon class="icon">
|
||
<TakeawayBox />
|
||
</el-icon>
|
||
<el-text class="t">({{ pendingCartNum }})</el-text>
|
||
</div>
|
||
<div class="number" @click="takeFoodCodeRef.show()">
|
||
<el-text class="t">{{ masterId }}</el-text>
|
||
</div>
|
||
<div class="select_user" @click="quickCashHandle"
|
||
v-if="!global.orderMemberInfo.telephone && !global.tableInfo.id">
|
||
<div class="left">
|
||
<el-icon class="icon">
|
||
<WalletFilled />
|
||
</el-icon>
|
||
<el-text class="t">快捷收银</el-text>
|
||
</div>
|
||
<el-icon class="arrow">
|
||
<ArrowRight />
|
||
</el-icon>
|
||
</div>
|
||
<div class="select_user" v-else @click="clearMember">
|
||
<div class="left">
|
||
<el-icon class="icon">
|
||
<UserFilled />
|
||
</el-icon>
|
||
<div class="t_wrap" :class="{ 'big_text': global.orderMemberInfo.telephone && global.tableInfo.id }">
|
||
<div class="t" v-if="global.orderMemberInfo.telephone">
|
||
会员：{{ global.orderMemberInfo.telephone }}
|
||
</div>
|
||
<div class="t" v-if="global.tableInfo.id">
|
||
台桌：{{ global.tableInfo.name }}
|
||
<span v-if="global.tableInfo.num">/{{ global.tableInfo.num }}人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-icon class="arrow">
|
||
<Close />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="shop_operation">
|
||
<div class="shop_list">
|
||
<template v-for="(arr, index) in cartList" :key="index">
|
||
<el-divider v-if="arr.placeNum">{{ `第${arr.placeNum}次下单` }}</el-divider>
|
||
<div class="item" :class="{ active: item.active }" :key="item.id" v-for="(item, i) in arr.info"
|
||
@click="selectCartItemHandle(item, index, i)">
|
||
<div class="name_wrap">
|
||
<span>{{ item.name }}</span>
|
||
<div class="price">
|
||
<span :class="{ dis: item.discountSaleAmount }">￥{{ item.salePrice }}</span>
|
||
<span v-if="item.discountSaleAmount">
|
||
￥{{ formatDecimal(item.salePrice - item.discountSaleAmount, 2, true) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="sku_list" v-if="item.skuName">
|
||
<div class="tag" v-for="item in item.skuName.split(',')">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<div class="num">
|
||
<div class="left">
|
||
<div class="icon_item zen" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
|
||
<span class="t">赠</span>
|
||
</div>
|
||
<div class="icon_item bao" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
|
||
<span class="t">包</span>
|
||
</div>
|
||
<div class="icon_item tui" v-if="item.status == 'return'">
|
||
<span class="t">退</span>
|
||
</div>
|
||
<div class="icon_item lin" v-if="item.isTemporary == 1">
|
||
<span class="t">临</span>
|
||
</div>
|
||
<div class="icon_item zhe" v-if="item.discountSaleAmount">
|
||
<span class="t">折</span>
|
||
</div>
|
||
<div class="icon_item chu" v-if="item.isPrint == 0">
|
||
<span class="t">免厨打印</span>
|
||
</div>
|
||
</div>
|
||
<el-text class="t">X{{ formatDecimal(item.number, 2, true) }}</el-text>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="empty">
|
||
<el-empty description="请选择商品" v-if="!cartList.length" />
|
||
</div>
|
||
</div>
|
||
<!-- 购物车操作栏 -->
|
||
<cartOperation :item="cartListActiveItem" @confirm="(res) => addCart(res, 'edit')" @delete="delCartHandle"
|
||
@pending="pendingCart" @clearCart="clearCartHandle" />
|
||
</div>
|
||
<div class="footer">
|
||
<div class="top">
|
||
<div class="left" @click="allSelectedHandle"
|
||
v-if="JSON.parse(shopStore.info.eatModel).some(item => item == 'take-out')">
|
||
<div class="selected">
|
||
<div class="selected_round" v-if="!allSelected"></div>
|
||
<el-icon class="icon" v-else>
|
||
<CircleCheckFilled />
|
||
</el-icon>
|
||
</div>
|
||
<el-text class="t">打包(￥{{ cartInfo.packAmount || 0 }})</el-text>
|
||
</div>
|
||
<div class="left" v-else></div>
|
||
<div class="num-wrap">
|
||
<!-- 共{{ cartInfo.productNum || 0 }}种商品 -->
|
||
共<el-text>{{
|
||
cartInfo.productSum || 0
|
||
}}件</el-text>，￥{{ formatDecimal(cartInfo.totalAmount || 0) }}
|
||
</div>
|
||
</div>
|
||
<div class="btm">
|
||
<el-button icon="Edit" @click="remarkRef.show()"></el-button>
|
||
<div class="button">
|
||
<div class="btn" v-if="shopStore.info.registerType == 'restaurant'">
|
||
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
|
||
@click="createOrderHandle(0)">
|
||
<template v-if="!createOrderLoading">
|
||
仅下单</template>
|
||
<template v-else>下单中...</template>
|
||
</el-button>
|
||
</div>
|
||
<div class="btn" v-if="shopStore.info.registerType != 'restaurant' || cartList.length">
|
||
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
|
||
@click="createOrderHandle(1)">
|
||
<template v-if="!createOrderLoading">
|
||
去结算</template>
|
||
<template v-else>下单中...</template>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="shop_manage card">
|
||
<!-- 分类/商品列表 -->
|
||
<goods ref="goodsRef" :masterId="masterId" @success="addCart" @loading="cartLoading = true" />
|
||
<!-- ©银收客 v{{ packageData.version }} -->
|
||
</div>
|
||
</div>
|
||
<!-- 备注 -->
|
||
<remarkModal ref="remarkRef" @success="(e) => (remark = e)" />
|
||
<!-- 修改取餐号 -->
|
||
<takeFoodCode />
|
||
<el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
|
||
<member :membershow="'1'"></member>
|
||
</el-drawer>
|
||
<takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
|
||
<!-- 结算订单 -->
|
||
<settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark"
|
||
:masterId="masterId" :orderInfo="orderInfo" @paySuccess="createCodeAjax(1)" />
|
||
<!-- 快捷收银 -->
|
||
<fastCashier ref="fastCashierRef" type="0" />
|
||
<!-- 挂起订单 -->
|
||
<pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
|
||
<!-- 检查版本升级 -->
|
||
<updateDialog />
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "home",
|
||
};
|
||
</script>
|
||
<script setup>
|
||
import { onMounted, ref } from "vue";
|
||
import { useRoute } from 'vue-router'
|
||
import { useUser } from "@/store/user.js";
|
||
import { useGlobal } from '@/store/global.js'
|
||
|
||
import updateDialog from '@/components/updateDialog.vue'
|
||
import remarkModal from "@/components/remarkModal.vue";
|
||
import takeFoodCode from "@/components/takeFoodCode.vue";
|
||
import cartOperation from "@/views/home/components/cartOperation.vue";
|
||
import settleAccount from "@/views/home/components/settleAccount.vue";
|
||
import fastCashier from "@/views/home/components/fastCashier.vue";
|
||
import pendingCartModal from "@/views/home/components/pendingCartModal.vue";
|
||
import useStorage from '@/utils/useStorage'
|
||
import { formatDecimal } from '@/utils/index.js'
|
||
|
||
import {
|
||
createCart,
|
||
queryCart,
|
||
createCode,
|
||
packall,
|
||
delCart,
|
||
cartStatus,
|
||
clearCart,
|
||
createOrder,
|
||
} from "@/api/product";
|
||
|
||
import { orderChoseCount } from '@/api/table.js'
|
||
|
||
import { queryShopInfo, staffPermission } from '@/api/user.js'
|
||
|
||
// 商品列表
|
||
import goods from "@/views/home/components/goods.vue";
|
||
import member from "@/views/member/index.vue";
|
||
import { ElMessage } from "element-plus";
|
||
|
||
import { useShop } from '@/store/shop.js'
|
||
|
||
const shopStore = useShop()
|
||
|
||
const global = useGlobal()
|
||
|
||
const route = useRoute()
|
||
|
||
const membershow = ref(false);
|
||
const store = useUser();
|
||
const remarkRef = ref(null);
|
||
const takeFoodCodeRef = ref(null);
|
||
const goodsRef = ref(null);
|
||
const pendingCartModalRef = ref(null);
|
||
const settleAccountRef = ref(null);
|
||
const fastCashierRef = ref(null);
|
||
|
||
const allSelected = ref(false);
|
||
|
||
const remark = ref("");
|
||
const cartListActive = ref(0);
|
||
const cartListActiveItem = ref({})
|
||
const cartList = ref([]);
|
||
const cartInfo = ref({});
|
||
const cartLoading = ref(false);
|
||
|
||
const orderInfo = ref({});
|
||
const createOrderLoading = ref(false);
|
||
|
||
// 取餐码
|
||
const masterId = ref("");
|
||
|
||
// 挂单量
|
||
const pendingCartNum = ref(0);
|
||
|
||
// 快捷收银
|
||
async function quickCashHandle() {
|
||
try {
|
||
await staffPermission('yun_xu_shou_kuan')
|
||
fastCashierRef.value.show()
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 生成订单
|
||
async function createOrderHandle(t = 0) {
|
||
try {
|
||
createOrderLoading.value = true;
|
||
await staffPermission('yun_xu_xia_dan')
|
||
const res = await createOrder({
|
||
masterId: masterId.value,
|
||
shopId: store.userInfo.shopId,
|
||
remark: remark.value,
|
||
vipUserId: global.orderMemberInfo.id || '',
|
||
tableId: global.tableInfo.qrcode || '',
|
||
type: t,
|
||
seatNum: global.tableInfo.num
|
||
});
|
||
createOrderLoading.value = false;
|
||
|
||
// 订单数据
|
||
orderInfo.value = res;
|
||
|
||
if (shopStore.info.registerType == 'restaurant' && t == 0) {
|
||
ElMessage.success('下单成功')
|
||
queryCartAjax()
|
||
} else {
|
||
settleAccountRef.value.show();
|
||
}
|
||
|
||
// if (global.tableInfo.id && t == 0) {
|
||
// ElMessage.success('下单成功')
|
||
// global.setOrderTable({})
|
||
// createCodeAjax(1)
|
||
// } else {
|
||
// orderInfo.value = res;
|
||
// settleAccountRef.value.show();
|
||
// }
|
||
} catch (error) {
|
||
console.log(error);
|
||
createOrderLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// 清空购物车
|
||
async function clearCartHandle() {
|
||
try {
|
||
await clearCart({
|
||
shopId: store.userInfo.shopId,
|
||
masterId: masterId.value,
|
||
tableId: global.tableInfo.qrcode || ''
|
||
});
|
||
cartListActiveItem.value = {}
|
||
queryCartAjax();
|
||
|
||
// 清除商品所有红点
|
||
goodsRef.value.clearDot()
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 恢复挂单
|
||
async function pendingCartHandle(item) {
|
||
const nItem = { ...item };
|
||
if (cartList.value.length) {
|
||
// 当购物车有数据时，先挂起当前购物车
|
||
await pendingCart({ masterId: masterId.value });
|
||
}
|
||
masterId.value = nItem.masterId;
|
||
await pendingCart(nItem, false);
|
||
await queryCartAjax();
|
||
}
|
||
|
||
// 挂单
|
||
async function pendingCart(params, status = true) {
|
||
try {
|
||
cartLoading.value = true;
|
||
await cartStatus({
|
||
shopId: store.userInfo.shopId,
|
||
masterId: params.masterId,
|
||
status: status,
|
||
uuid: params.uuid,
|
||
vipUserId: global.orderMemberInfo.id || '',
|
||
tableId: global.tableInfo.qrcode || '',
|
||
orderId: params.orderId
|
||
});
|
||
if (status && cartList.value.length) {
|
||
await createCodeAjax();
|
||
setTimeout(() => {
|
||
cartLoading.value = false;
|
||
}, 500);
|
||
} else {
|
||
setTimeout(() => {
|
||
cartLoading.value = false;
|
||
}, 500);
|
||
}
|
||
} catch (error) {
|
||
cartLoading.value = false;
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 删除购物车
|
||
async function delCartHandle(params) {
|
||
try {
|
||
cartLoading.value = true;
|
||
await delCart({
|
||
masterId: params.masterId,
|
||
cartId: params.id,
|
||
});
|
||
cartListActiveItem.value = {}
|
||
await queryCartAjax();
|
||
cartLoading.value = false;
|
||
cartListActive.value = 0;
|
||
} catch (error) {
|
||
cartLoading.value = false;
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 赠送打包操作
|
||
function giftPackHandle(key, item) {
|
||
item[key] = false;
|
||
addCart(item, "edit");
|
||
}
|
||
|
||
// 打包全选
|
||
const allSelectedHandle = async () => {
|
||
if (!cartList.value.length) return;
|
||
allSelected.value = !allSelected.value;
|
||
await packall({
|
||
shopId: store.userInfo.shopId,
|
||
status: allSelected.value,
|
||
masterId: masterId.value,
|
||
});
|
||
queryCartAjax();
|
||
};
|
||
|
||
// 确认取餐号
|
||
async function takeFoodCodeSuccess(code) {
|
||
if (cartList.value.length) {
|
||
await pendingCart({
|
||
masterId: masterId.value,
|
||
uuid: cartList.value[0].uuid,
|
||
});
|
||
}
|
||
masterId.value = `#${code}`;
|
||
queryCartAjax();
|
||
}
|
||
|
||
// 从购物车选择商品
|
||
function selectCartItemHandle(row, index, i) {
|
||
cartList.value.map(item => {
|
||
item.info.map(val => {
|
||
if (val.id == row.id) {
|
||
val.active = true
|
||
cartListActiveItem.value = val
|
||
} else {
|
||
val.active = false
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 选择完规格开始添加购物车
|
||
async function addCart(params = {}, type = "add") {
|
||
console.log(params);
|
||
|
||
try {
|
||
cartLoading.value = true;
|
||
if (params.isTemporary) {
|
||
await createCodeAjax()
|
||
cartLoading.value = false;
|
||
} else {
|
||
let skuId = ''
|
||
if (params.skuList && params.skuList.length) {
|
||
skuId = params.skuList[0].id
|
||
} else {
|
||
skuId = type == "add" ? params.id : params.skuId
|
||
}
|
||
|
||
const res = await createCart({
|
||
productId: params.productId,
|
||
masterId: masterId.value,
|
||
tableId: global.tableInfo.qrcode || '',
|
||
vipUserId: global.orderMemberInfo.id || '',
|
||
shopId: store.userInfo.shopId,
|
||
// skuId: type == "add" ? params.id : params.skuId,
|
||
skuId: skuId,
|
||
number: params.number || 1,
|
||
isPack: params.isPack || "false",
|
||
isGift: params.isGift || "false",
|
||
cartId: type == "add" ? "" : params.id,
|
||
uuid: params.uuid || store.userInfo.uuid,
|
||
type: type,
|
||
groupProductIdList: params.groupProductIdList || []
|
||
});
|
||
cartLoading.value = false;
|
||
masterId.value = res;
|
||
goodsRef.value.updateData();
|
||
queryCartAjax();
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
cartLoading.value = false;
|
||
}
|
||
}
|
||
|
||
// 获取购物车商品
|
||
async function queryCartAjax() {
|
||
try {
|
||
const res = await queryCart({
|
||
masterId: masterId.value,
|
||
shopId: store.userInfo.shopId,
|
||
tableId: global.tableInfo.qrcode || '',
|
||
vipUserId: global.orderMemberInfo.id || ''
|
||
});
|
||
|
||
if (!res.list.length) {
|
||
cartListActiveItem.value = {}
|
||
}
|
||
|
||
res.list.map((item, index) => {
|
||
item.info.map((val, i) => {
|
||
if (i == 0 && index == 0) {
|
||
val.active = true
|
||
if (!cartListActiveItem.value.id) {
|
||
cartListActiveItem.value = val
|
||
}
|
||
} else {
|
||
val.active = false
|
||
}
|
||
})
|
||
})
|
||
|
||
cartList.value = res.list;
|
||
|
||
if (cartListActiveItem.value.id) {
|
||
selectCartItemHandle(cartListActiveItem.value)
|
||
}
|
||
|
||
cartInfo.value = res.amount;
|
||
pendingCartNum.value = res.num;
|
||
goodsRef.value.updateData();
|
||
|
||
let i = 0;
|
||
res.list.map((item) => {
|
||
if (item.isPack == "true") {
|
||
i++;
|
||
}
|
||
});
|
||
if (i == res.list.length) {
|
||
allSelected.value = true;
|
||
} else {
|
||
allSelected.value = false;
|
||
}
|
||
} catch (error) {
|
||
console.log("获取购物车商品", error);
|
||
}
|
||
}
|
||
|
||
// 增加点餐人数
|
||
async function addTableNum() {
|
||
try {
|
||
const res = await orderChoseCount({
|
||
masterId: masterId.value,
|
||
shopId: store.userInfo.shopId,
|
||
tableId: global.tableInfo.qrcode,
|
||
num: global.tableInfo.num
|
||
})
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 获取取餐码
|
||
async function createCodeAjax(type = "0") {
|
||
try {
|
||
// if (!process.env.VITE_DEV_SERVER_URL) {
|
||
// masterId.value = '#20'
|
||
// } else {
|
||
// const res = await createCode({
|
||
// shopId: store.userInfo.shopId
|
||
// })
|
||
// masterId.value = res.code
|
||
// }
|
||
if (global.tableInfo.masterId) {
|
||
masterId.value = global.tableInfo.masterId
|
||
} else {
|
||
const res = await createCode({
|
||
shopId: store.userInfo.shopId,
|
||
type: type,
|
||
tableId: global.tableInfo.qrcode || '',
|
||
});
|
||
masterId.value = res.code;
|
||
}
|
||
|
||
if (global.tableInfo.num) {
|
||
await addTableNum()
|
||
}
|
||
await queryCartAjax();
|
||
|
||
if (type == 1) {
|
||
// 结算订单 清楚商品所有红点
|
||
goodsRef.value.clearDot()
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 清除本地会员/台桌信息
|
||
function clearMember() {
|
||
global.setOrderMember({})
|
||
global.setOrderTable({})
|
||
createCodeAjax()
|
||
}
|
||
|
||
onMounted(() => {
|
||
createCodeAjax()
|
||
shopStore.queryShopInfo()
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.cart_wrap {
|
||
flex: 1.5;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.menu_top {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
height: var(--el-component-size-large);
|
||
|
||
.menu {
|
||
background-color: var(--el-color-warning);
|
||
color: #fff;
|
||
width: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
font-size: var(--el-font-size-base);
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
.t {
|
||
color: #fff;
|
||
margin-left: 4px;
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
}
|
||
|
||
.number {
|
||
width: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--el-color-info-light-7);
|
||
// padding-left: var(--el-font-size-base);
|
||
|
||
.t {
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
}
|
||
|
||
.select_user {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: var(--el-color-info-light-8);
|
||
padding: 0 10px;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
color: var(--el-color-primary);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.t_wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
&.big_text {
|
||
.t {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.t {
|
||
font-size: var(--el-font-size-base);
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
.arrow {
|
||
color: #999;
|
||
font-size: 16px;
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop_operation {
|
||
flex: 1;
|
||
display: flex;
|
||
|
||
.shop_list {
|
||
flex: 1;
|
||
height: calc(100vh - 40px - 60px - 80px);
|
||
overflow-y: auto;
|
||
border-right: 1px solid #ececec;
|
||
|
||
.item {
|
||
padding: var(--el-font-size-base);
|
||
|
||
&.active {
|
||
background-color: var(--primary-color-hover);
|
||
}
|
||
|
||
&:not(:last-child) {
|
||
border-bottom: 1px solid #ececec;
|
||
}
|
||
|
||
.name_wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: var(--el-font-size-base);
|
||
|
||
.dis {
|
||
color: #999;
|
||
font-size: 12px;
|
||
text-decoration: line-through;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
|
||
.sku_list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-top: 10px;
|
||
|
||
.tag {
|
||
padding: 2px 6px;
|
||
background-color: var(--el-color-danger);
|
||
color: #fff;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.num {
|
||
padding-top: var(--el-font-size-base);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding-right: 10px;
|
||
|
||
.icon_item {
|
||
$size: 20px;
|
||
height: $size;
|
||
padding: 0 6px;
|
||
border-radius: 2px;
|
||
background-color: #e2e2e2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
|
||
&.zen {
|
||
background-color: #FFB0B1;
|
||
color: #FF4D4F;
|
||
}
|
||
|
||
&.bao {
|
||
background-color: #52C41A;
|
||
}
|
||
|
||
&.tui {
|
||
background-color: var(--el-color-danger);
|
||
}
|
||
|
||
&.lin {
|
||
background-color: var(--el-color-warning);
|
||
}
|
||
|
||
&.zhe {
|
||
background-color: var(--primary-color);
|
||
}
|
||
|
||
&.chu {
|
||
background-color: #ffe7ba;
|
||
color: #e69f1c;
|
||
}
|
||
|
||
span {
|
||
font-size: inherit;
|
||
color: inherit;
|
||
}
|
||
}
|
||
}
|
||
|
||
.t {
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
padding: var(--el-font-size-base);
|
||
border-top: 1px solid #ececec;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.selected {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
top: 1px;
|
||
|
||
.icon {
|
||
display: block;
|
||
font-size: var(--el-font-size-base);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.selected_round {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
border: 1px solid #ddd;
|
||
}
|
||
}
|
||
|
||
.t {
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.btm {
|
||
$h: 70px;
|
||
display: flex;
|
||
height: $h;
|
||
padding-top: var(--el-font-size-base);
|
||
gap: var(--el-font-size-base);
|
||
|
||
.editor {
|
||
width: $h;
|
||
border: 1px solid #ececec;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #555;
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
|
||
.button {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: var(--el-font-size-base);
|
||
|
||
.btn {
|
||
flex: 1;
|
||
}
|
||
|
||
.js {
|
||
.t {
|
||
color: #fff;
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop_manage {
|
||
flex: 3;
|
||
margin-left: var(--el-font-size-base);
|
||
height: 100%;
|
||
}
|
||
</style>
|