This commit is contained in:
parent
92dc991f5d
commit
db35f2d707
|
|
@ -1,7 +1,7 @@
|
|||
VITE_NOW_TYPE = 'dist'
|
||||
|
||||
# VITE_PUSH_URL = 'ws://192.168.1.22:8787'
|
||||
# VITE_BASE_URL = 'http://192.168.1.22:8546'
|
||||
VITE_PUSH_URL = 'ws://192.168.1.22:8787'
|
||||
VITE_BASE_URL = 'http://192.168.1.22:8546'
|
||||
|
||||
VITE_PUSH_URL ='wss://erp.lihaink.cn/pull'
|
||||
VITE_BASE_URL = 'https://erp.lihaink.cn'
|
||||
# VITE_PUSH_URL ='wss://erp.lihaink.cn/pull'
|
||||
# VITE_BASE_URL = 'https://erp.lihaink.cn'
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import request from '@/utils/axios.js'
|
||||
|
||||
/**
|
||||
* @description 获取余额和银行信息
|
||||
*/
|
||||
export function amountAccountApi() {
|
||||
return request.get(`/merchant/Merchant/amount_account`)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description 提现列表
|
||||
*/
|
||||
export function amountTakingListsApi(data) {
|
||||
return request.get(`/merchant/Merchant/taking_lists`, {params: data})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description 提现总次数和金额
|
||||
*/
|
||||
export function amountTakingInfoApi() {
|
||||
return request.get(`/merchant/Merchant/taking_info`)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 提现操作
|
||||
*/
|
||||
export function amountWithdrawApi(data) {
|
||||
return request.post(`/merchant/Merchant/withdraw`, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 7日订单统计
|
||||
*/
|
||||
export function financialRecordApi(data) {
|
||||
return request.get(`/financial/FinancialRecord/lists`, {params: data})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 余额明细
|
||||
*/
|
||||
export function financialRecordListsApi(data) {
|
||||
return request.get(`/financial/FinancialRecord/api_lists`, {params: data})
|
||||
}
|
||||
|
||||
|
|
@ -59,6 +59,7 @@ const list = ref([
|
|||
},
|
||||
{ name: "purchaseOrder", title: "采购订单", ico: "Van", count: 0 },
|
||||
{ name: "orderCount", title: "订单统计", ico: "DocumentRemove", count: 0 },
|
||||
{ name: "wallet", title: "余额提现", ico: "Wallet", count: 0 },
|
||||
// { name: "test", title: "打印", ico: "Tickets", count: 0 },
|
||||
]);
|
||||
const aup = () => {
|
||||
|
|
|
|||
|
|
@ -41,6 +41,12 @@ const routes = [
|
|||
meta: { title: '订单统计' },
|
||||
component: () => import('@/views/saleOrder/indexCount.vue'),
|
||||
},
|
||||
{
|
||||
path: '/wallet',
|
||||
name: 'wallet',
|
||||
meta: { title: '提现' },
|
||||
component: () => import('@/views/wallet/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'test',
|
||||
|
|
|
|||
|
|
@ -227,4 +227,4 @@ onUnmounted(() => {
|
|||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||
}
|
||||
</style>
|
||||
, onMounted, onUnmounted
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,9 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
orderListApi,
|
||||
orderStatusApi,
|
||||
orderLadingApi,
|
||||
cartListApi,
|
||||
statisticsApi,
|
||||
orderPriceApi,
|
||||
} from "@/api/store.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
import pay from "@/components/pay.vue";
|
||||
import { amountTakingListsApi, financialRecordApi } from "@/api/merchant.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const orderList = ref([]);
|
||||
const router = useRouter();
|
||||
|
||||
const tabPosition = ref(1); // 1-全部, 2-未收银
|
||||
const payRef = ref(null);
|
||||
|
||||
const where = ref({
|
||||
page_no: 1,
|
||||
|
|
@ -26,110 +11,26 @@ const where = ref({
|
|||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
|
||||
const getOrderList = () => {
|
||||
orderPriceApi(where.value).then((res) => {
|
||||
orderList.value = res.data;
|
||||
// total.value = res.data.count;
|
||||
financialRecordApi(where.value).then((res) => {
|
||||
orderList.value = res.data.lists;
|
||||
});
|
||||
};
|
||||
|
||||
// getOrderList();
|
||||
getOrderList();
|
||||
|
||||
const formData = ref({});
|
||||
const getStatistics = () => {
|
||||
loading.value = true;
|
||||
statisticsApi(userStore.userInfo.service.mer_id, {
|
||||
staff_id: userStore.userInfo.service.service_id,
|
||||
}).then((res) => {
|
||||
formData.value = res.data.data;
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// getStatistics();
|
||||
|
||||
const prevClick = (e) => {
|
||||
where.value.page_no = e;
|
||||
getOrderList();
|
||||
};
|
||||
|
||||
const nextClick = (e) => {
|
||||
where.value.page_no = e;
|
||||
getOrderList();
|
||||
};
|
||||
|
||||
const currentChange = (e) => {
|
||||
where.value.page_no = e;
|
||||
getOrderList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" element-loading-text="加载中" class="my-order">
|
||||
<div class="from" v-if="formData.today">
|
||||
<div class="form-card green">
|
||||
<div>{{ formData.today.payPrice }}</div>
|
||||
<div class="tips">今日线上收银金额</div>
|
||||
</div>
|
||||
<div class="form-card green">
|
||||
<div>{{ formData.yesterday.payPrice }}</div>
|
||||
<div class="tips">昨日线上收银金额</div>
|
||||
</div>
|
||||
<div class="form-card green">
|
||||
<div>{{ formData.month.payPrice }}</div>
|
||||
<div class="tips">本月线上收银金额</div>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<div>{{ (formData.today.cashPayment + formData.today.payPrice).toFixed(2) }}</div>
|
||||
<div class="tips">今日收银 线上+现金 总金额</div>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<div>{{ (formData.month.cashPayment + formData.month.payPrice).toFixed(2) }}</div>
|
||||
<div class="tips">本月收银 线上+现金 总金额</div>
|
||||
</div>
|
||||
<div class="form-card red">
|
||||
<div>{{ formData.today.cashPayment }}</div>
|
||||
<div class="tips">今日现金收银金额</div>
|
||||
</div>
|
||||
<div class="form-card red">
|
||||
<div>{{ formData.yesterday.cashPayment }}</div>
|
||||
<div class="tips">昨日现金收银金额</div>
|
||||
</div>
|
||||
<div class="form-card red">
|
||||
<div>{{ formData.month.cashPayment }}</div>
|
||||
<div class="tips">本月现金收银金额</div>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<div>
|
||||
{{ (formData.yesterday.cashPayment + formData.yesterday.payPrice).toFixed(2) }}
|
||||
</div>
|
||||
<div class="tips">昨日收银 线上+现金 总金额</div>
|
||||
</div>
|
||||
<!-- <div class="form-card">
|
||||
<div>{{formData.today.orderNum}}</div>
|
||||
<div class="tips">今日订单数</div>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<div>{{formData.yesterday.orderNum}}</div>
|
||||
<div class="tips">昨日订单数</div>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<div>{{formData.month.orderNum}}</div>
|
||||
<div class="tips">本月订单数</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table :data="orderList" style="width: 100%">
|
||||
<el-table-column prop="day" label="日期" width="260" />
|
||||
<el-table-column prop="total" label="订单数量" />
|
||||
<el-table-column prop="cash_payment" label="现金收银金额" />
|
||||
<el-table-column prop="pay_price" label="线上收银金额" />
|
||||
<el-table-column label="总金额">
|
||||
<template #default="scope">
|
||||
{{ (((+scope.row.pay_price || 0) + (+scope.row.cash_payment || 0))).toFixed(2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="record_date" label="时间" width="260" />
|
||||
<el-table-column prop="cashier_cash_total_amount" label="现金收银金额(元)" />
|
||||
<el-table-column prop="cashier_total_amount" label="线上收银金额(元)" />
|
||||
<el-table-column prop="platofrm_total_amount" label="平台订单金额(元)" />
|
||||
<el-table-column prop="total_amount" label="总金额(元)" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,255 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { amountTakingListsApi, financialRecordListsApi } from "@/api/merchant.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
import moment from "moment";
|
||||
|
||||
const where = ref({
|
||||
page_no: 1,
|
||||
page_size: 15,
|
||||
loadend: false,
|
||||
loading: false,
|
||||
create_time: "",
|
||||
start_time: ""
|
||||
});
|
||||
const changeDate = () => {
|
||||
where.value.page_no = 1;
|
||||
where.value.loadend = false;
|
||||
where.value.loading = false;
|
||||
goods_list.value = [];
|
||||
getOrderList();
|
||||
};
|
||||
|
||||
const listType = ref(1);
|
||||
const goods_list = ref([]);
|
||||
const getOrderList = () => {
|
||||
console.log("触底", !where.value.loadend , !where.value.loading);
|
||||
if (!where.value.loadend && !where.value.loading) {
|
||||
console.log("加载");
|
||||
where.value.loading = true;
|
||||
if (listType.value == 1)
|
||||
amountTakingListsApi({
|
||||
page_no: where.value.page_no,
|
||||
page_size: where.value.page_size,
|
||||
create_time: where.value.create_time,
|
||||
}).then((res) => {
|
||||
goods_list.value = [...goods_list.value, ...res.data.lists];
|
||||
if (res.data.lists.length < where.value.page_size)
|
||||
where.value.loadend = true;
|
||||
where.value.loading = false;
|
||||
where.value.page_no++;
|
||||
});
|
||||
if (listType.value == 2)
|
||||
financialRecordListsApi({
|
||||
page_no: where.value.page_no,
|
||||
page_size: where.value.page_size,
|
||||
start_time: moment(where.value.start_time || new Date()).format('YYYY-MM-DD'),
|
||||
// end_time: moment('2024-05-16').format('YYYY-MM-DD'),
|
||||
}).then((res) => {
|
||||
goods_list.value = [...goods_list.value, ...res.data.lists];
|
||||
if (res.data.lists.length < where.value.page_size)
|
||||
where.value.loadend = true;
|
||||
where.value.loading = false;
|
||||
where.value.page_no++;
|
||||
});
|
||||
}
|
||||
};
|
||||
getOrderList();
|
||||
|
||||
const changeListType = () => {
|
||||
where.value.page_no = 1;
|
||||
where.value.loadend = false;
|
||||
where.value.loading = false;
|
||||
goods_list.value = [];
|
||||
getOrderList();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
mitt.on("get-taking-lists", (res) => {
|
||||
where.value.page_no = 1;
|
||||
where.value.loadend = false;
|
||||
where.value.loading = false;
|
||||
goods_list.value = [];
|
||||
getOrderList();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
mitt.off("get-taking-lists");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="date">
|
||||
<div>
|
||||
<el-date-picker
|
||||
v-if="listType==1"
|
||||
v-model="where.create_time"
|
||||
type="month"
|
||||
placeholder="请选择月份"
|
||||
@change="changeDate"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-if="listType==2"
|
||||
v-model="where.start_time"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
@change="changeDate"
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-button type="primary" style="margin-left: 1rem">重置</el-button>
|
||||
</div>
|
||||
<el-radio-group v-model="listType" @change="changeListType">
|
||||
<el-radio-button label="提现记录" :value="1" />
|
||||
<el-radio-button label="余额明细" :value="2" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div
|
||||
class="table"
|
||||
v-loading="where.loading"
|
||||
v-infinite-scroll="getOrderList"
|
||||
infinite-scroll-distance="300"
|
||||
infinite-scroll-delay="300"
|
||||
style="overflow: auto"
|
||||
:infinite-scroll-immediate="false"
|
||||
v-if="listType==1"
|
||||
>
|
||||
<el-table :data="goods_list">
|
||||
<el-table-column
|
||||
prop="merchant_bank_info.is_own"
|
||||
label="账户类型"
|
||||
width="100"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{ row.merchant_bank_info.is_own ? "对公账户" : "个人账户" }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="银行卡">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{ row.merchant_bank_info.bank_info.name }} ({{
|
||||
row.merchant_bank_info.bank_code.slice(-4)
|
||||
}})
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="提现金额" width="150" />
|
||||
<el-table-column label="备注/凭证" width="200">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.arrival_proof">
|
||||
<el-image
|
||||
style="width: 3rem; height: 3rem; margin-right: 0.2rem"
|
||||
v-for="(item, index) in JSON.parse(row.arrival_proof)"
|
||||
:key="index"
|
||||
:src="item"
|
||||
:preview-src-list="JSON.parse(row.arrival_proof)"
|
||||
:initial-index="index"
|
||||
></el-image>
|
||||
</div>
|
||||
<div v-else>{{ row.fail_msg }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="提现状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.arrival_proof" type="success">已到账</el-tag>
|
||||
<el-tag v-else-if="row.is_check == 1" type="primary"
|
||||
>待转账</el-tag
|
||||
>
|
||||
<el-tag v-else-if="row.is_check == 0" type="info">待审核</el-tag>
|
||||
<el-tag v-else-if="row.is_check == 2" type="danger"
|
||||
>提现失败</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="提现时间" width="200" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="table"
|
||||
v-loading="where.loading"
|
||||
v-infinite-scroll="getOrderList"
|
||||
infinite-scroll-distance="500"
|
||||
infinite-scroll-delay="500"
|
||||
style="overflow: auto"
|
||||
:infinite-scroll-immediate="false"
|
||||
v-if="listType==2"
|
||||
>
|
||||
<el-table :data="goods_list">
|
||||
<el-table-column
|
||||
prop="number_sn"
|
||||
label="订单号"
|
||||
width="250"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="number" label="变动金额" width="180" />
|
||||
<el-table-column prop="financial_type" label="变动类型" width="180" />
|
||||
<el-table-column prop="create_time" label="时间" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-order {
|
||||
border-radius: 1.2rem;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.date {
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.detail {
|
||||
height: calc(100vh - 100px - 4rem);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.table {
|
||||
padding: 1rem;
|
||||
padding-bottom: 6rem;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.table-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: #777;
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
padding-top: 1rem;
|
||||
.info-item-title {
|
||||
flex-shrink: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
import { amountAccountApi, amountTakingInfoApi, amountWithdrawApi } from "@/api/merchant.js";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const info = ref({
|
||||
balance: 0,
|
||||
count: 0,
|
||||
total: 0
|
||||
});
|
||||
|
||||
const bankList = ref([]);
|
||||
const getInfo = () => {
|
||||
amountAccountApi().then((res) => {
|
||||
res.data.bank_list.forEach(item => {
|
||||
if(item.is_check){
|
||||
form.value.merchant_bank_id = item.id; //选择默认银行卡
|
||||
}
|
||||
});
|
||||
if(!form.value.merchant_bank_id) form.value.merchant_bank_id = res.data.bank_list[0].id;
|
||||
bankList.value = res.data.bank_list;
|
||||
info.value.balance = res.data.balance;
|
||||
});
|
||||
amountTakingInfoApi().then(res=>{
|
||||
info.value = Object.assign(info.value, res.data);
|
||||
})
|
||||
};
|
||||
|
||||
getInfo();
|
||||
|
||||
const form = ref({
|
||||
merchant_bank_id: '',
|
||||
amount: ''
|
||||
});
|
||||
const setForm = (e)=>{
|
||||
form.value.merchant_bank_id = e.id
|
||||
}
|
||||
|
||||
const submit = ()=>{
|
||||
if(+form.value.amount <= 0) {
|
||||
form.value.amount = '';
|
||||
return ElMessage.error('提现金额必须大于0');
|
||||
}
|
||||
if(+form.value.amount > +info.value.balance) {
|
||||
form.value.amount = info.value.balance;
|
||||
return ElMessage.error('提现金额不能大于余额');
|
||||
}
|
||||
amountWithdrawApi(form.value).then(res=>{
|
||||
form.value.amount = "";
|
||||
ElMessage.success('提现成功，等待管理员审核');
|
||||
mitt.emit('get-taking-lists')
|
||||
getInfo();
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="header-nav">
|
||||
<div class="nav-item">
|
||||
{{ "提现" }}
|
||||
</div>
|
||||
<div class="nav-body">
|
||||
<div class="my-money">
|
||||
<div>我的余额:</div>
|
||||
<div style="text-align: center; color: #2ec479;">
|
||||
<span>{{ info.balance }}</span>元
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-count">
|
||||
<div class="count">提现次数: <span>{{ info.count }}</span>次</div>
|
||||
<div class="money">累计提现到账: <span style="color: #ff4a00;"> {{ info.total }}</span>元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="order-lists"
|
||||
infinite-scroll-distance="300"
|
||||
infinite-scroll-delay="500"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<div
|
||||
class="item"
|
||||
:class="{ 'item-active': form.merchant_bank_id == item.id }"
|
||||
v-for="(item, index) in bankList"
|
||||
:key="index"
|
||||
@click="setForm(item, index)"
|
||||
>
|
||||
<div>
|
||||
提现至
|
||||
<span style="color:#1890ff;">{{item.bank_name}}({{item.bank_code.slice(-4)}})</span>
|
||||
<span class="own">{{ item.is_own==1?'对公':'个人' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 8.2rem;"></div>
|
||||
<div class="order-footer">
|
||||
<div class="input-btn">
|
||||
<el-input v-model="form.amount" placeholder="请输入提现金额" type="number"></el-input>
|
||||
<el-button class="btn" type="primary" @click="form.amount=info.balance">全部</el-button>
|
||||
</div>
|
||||
<div class="order-btn">
|
||||
<el-button class="btn" type="primary" @click="submit" :disabled="info.balance<=0">立即提现</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-order {
|
||||
border-radius: 1.2rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
width: 30rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
height: 7.5rem;
|
||||
|
||||
.nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-body {
|
||||
.my-money {
|
||||
padding: 0.4rem 0;
|
||||
height: 4rem;
|
||||
span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.my-count {
|
||||
height: 1.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-lists {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
.own{
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.2rem;
|
||||
background-color: #2ec479;
|
||||
color: #fff;
|
||||
margin-left: 1rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
}
|
||||
.item-active {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
.order-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -1px 0.625rem #eee;
|
||||
background-color: #fff;
|
||||
|
||||
.input-btn{
|
||||
display: flex;
|
||||
padding: 1rem 1.5rem;
|
||||
padding-bottom: 0;
|
||||
|
||||
.btn{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
height: 3.2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<script setup>
|
||||
import order from "./component/order.vue";
|
||||
import detail from "./component/detail.vue";
|
||||
import padding from "@/components/padding.vue";
|
||||
import { ref, nextTick } from "vue";
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="my-card">
|
||||
<order style="flex-shrink: 0;" ref="orderRef"/>
|
||||
<padding />
|
||||
<detail ref="detailRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.my-card {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
/* 修改滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 0.315rem; /* 设置滚动条的宽度 */
|
||||
}
|
||||
|
||||
/* 设置滚动条的轨道样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
||||
/* margin: 1.25rem 0; */
|
||||
}
|
||||
|
||||
/* 设置滚动条的滑块样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc; /* 设置滑块的背景色 */
|
||||
border-radius: 0.315rem; /* 设置滑块的圆角 */
|
||||
}
|
||||
|
||||
/* 设置滚动条鼠标悬停时的滑块样式 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue