This commit is contained in:
魏啾
parent
56f9d83447
commit
e0ade277dc
10
src/App.vue
10
src/App.vue
|
|
@ -88,6 +88,16 @@ html {
|
||||||
top: 10px !important;
|
top: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-drawer__header {
|
||||||
|
// padding: 0 !important;
|
||||||
|
margin-bottom: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-drawer__body {
|
||||||
|
padding: 0 var(--el-drawer-padding-primary) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.el-textarea {
|
.el-textarea {
|
||||||
font-size: var(--el-font-size-base) !important;
|
font-size: var(--el-font-size-base) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,492 @@
|
||||||
|
<template>
|
||||||
|
<div class="orderbox">
|
||||||
|
<div class="orderbox_left">
|
||||||
|
<el-table :data="tableData" height="90%" style="width: 100%;margin-top: 10px;">
|
||||||
|
<el-table-column prop="date" label="昵称" width="" />
|
||||||
|
<el-table-column prop="name" label="手机" width="" />
|
||||||
|
<el-table-column prop="address" label="编号" />
|
||||||
|
<el-table-column prop="address" label="等级" />
|
||||||
|
|
||||||
|
<el-table-column prop="address" label="积分" />
|
||||||
|
<el-table-column prop="address" label="余额" />
|
||||||
|
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right">
|
||||||
|
<div class="orderbox_right_top">
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>会员昵称：</span>
|
||||||
|
<span>admin</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>手机号码：</span>
|
||||||
|
<span>1999999999999</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>会员编号：</span>
|
||||||
|
<span>1245</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_topdiv">
|
||||||
|
<span>会员等级：</span>
|
||||||
|
<span>未设置</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item">
|
||||||
|
<div class="orderbox_right_top_item_one">
|
||||||
|
<el-icon :size="24" style="color:#ffbc42 ;">
|
||||||
|
<Money />
|
||||||
|
</el-icon>
|
||||||
|
<span class="orderbox_right_top_item_onespan">会员积分</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item_tow">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item" @click="stored = true">
|
||||||
|
<div class="orderbox_right_top_item_one">
|
||||||
|
<el-icon :size="24" style="color:#00b58d ;">
|
||||||
|
<Box />
|
||||||
|
</el-icon>
|
||||||
|
<span class="orderbox_right_top_item_onespan">储值余额</span>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_top_item_tow">
|
||||||
|
<span>0</span>
|
||||||
|
<el-icon size="10">
|
||||||
|
<ArrowRight />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_input">
|
||||||
|
<el-input placeholder="请输入会员手机号或者编号" v-model="moneys.money" clearable @input="inputChange"></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_inputkeyboard">
|
||||||
|
<div class='keyboard'>
|
||||||
|
<div class='key-row'>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='1'>1</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='2'>2</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='3'>3</el-button>
|
||||||
|
</div>
|
||||||
|
<div class='key-row'>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='4'>4</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='5'>5</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='6'>6</el-button>
|
||||||
|
</div>
|
||||||
|
<div class='key-row'>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='7'>7</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='8'>8</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='9'>9</el-button>
|
||||||
|
</div>
|
||||||
|
<div class='key-row'>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='.'>.</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='0'>0</el-button>
|
||||||
|
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
|
||||||
|
data-num='D'>c</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="orderbox_right_button">
|
||||||
|
<el-button style="width: 35%;" @click="recharge = true">添加会员</el-button>
|
||||||
|
<el-button style="width: 60%;" type="primary"
|
||||||
|
@click="onSubmit">确认</el-button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
|
||||||
|
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
|
||||||
|
<div class="dialog_footer_left">
|
||||||
|
<span>微信用户</span>
|
||||||
|
<span>2021-02-22 18:05:53</span>
|
||||||
|
</div>
|
||||||
|
<div class="dialog_footer_right">
|
||||||
|
<span>19000</span>
|
||||||
|
<span>26300</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
|
||||||
|
<div class="recharge_footer">
|
||||||
|
<div class="recharge_footer_item">
|
||||||
|
qq
|
||||||
|
</div>
|
||||||
|
<div class="recharge_footer_itemright">
|
||||||
|
<div class="recharge_footer_itemright_input">
|
||||||
|
<div>充值金额：</div>
|
||||||
|
<div v-if="moneys.money">{{ moneys.money ? moneys.money : '请输入充值金额' }}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, watch } from 'vue'
|
||||||
|
import { useRoute } from "vue-router"
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import lodash_ from 'lodash'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
||||||
|
const stored = ref(false)//储值余额
|
||||||
|
// const inputChange = lodash_.debounce(function (e) {
|
||||||
|
// productqueryCommodityInfoAjax()
|
||||||
|
// }, 500)
|
||||||
|
const handleClose = () => {
|
||||||
|
stored.value = !stored.value
|
||||||
|
}
|
||||||
|
const recharge = ref(false)//充值
|
||||||
|
|
||||||
|
const onSubmit = () => {
|
||||||
|
ElMessage({
|
||||||
|
message: '请输入订单号查询',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handlerecharge = () => {
|
||||||
|
recharge.value = !recharge.value
|
||||||
|
}
|
||||||
|
const tableData = [
|
||||||
|
{
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: 'Tom',
|
||||||
|
address: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: 'Tom',
|
||||||
|
address: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: 'Tom',
|
||||||
|
address: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: 'Tom',
|
||||||
|
address: '1',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const moneys = reactive({
|
||||||
|
money: ''
|
||||||
|
})
|
||||||
|
const _handleKeyPress = (e) => {
|
||||||
|
console.log('点击传e', e.target.dataset.num);
|
||||||
|
let num = e.target.dataset.num;
|
||||||
|
console.log(num)
|
||||||
|
//不同按键处理逻辑
|
||||||
|
// -1 代表无效按键，直接返回
|
||||||
|
if (num == -1) return false;
|
||||||
|
switch (String(num)) {
|
||||||
|
//小数点
|
||||||
|
case '.':
|
||||||
|
_handleDecimalPoint();
|
||||||
|
break;
|
||||||
|
//删除键
|
||||||
|
case 'D':
|
||||||
|
_handleDeleteKey();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
_handleNumberKey(num);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
watch(() => moneys.money, (newVal, oldVal) => {
|
||||||
|
console.log(`New: ${newVal}, Old: ${oldVal}`)
|
||||||
|
})
|
||||||
|
//处理数字
|
||||||
|
const _handleNumberKey = (num) => {
|
||||||
|
if (moneys.money.length == 10) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log(num, 247)
|
||||||
|
let S = moneys.money;
|
||||||
|
//如果有小数点且小数点位数不小于2
|
||||||
|
if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
|
||||||
|
moneys.money = S + num;
|
||||||
|
//没有小数点
|
||||||
|
if (!(S.indexOf('.') > -1)) {
|
||||||
|
//如果第一位是0，只能输入小数点
|
||||||
|
if (num == 0 && S.length == 0)
|
||||||
|
moneys.money = '0.';
|
||||||
|
else {
|
||||||
|
if (S.length && Number(S.charAt(0)) === 0) return;
|
||||||
|
moneys.money = S + num;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//处理小数点函数
|
||||||
|
const _handleDecimalPoint = () => {
|
||||||
|
//如果包含小数点，直接返回
|
||||||
|
if (moneys.money.indexOf('.') > -1) return false;
|
||||||
|
//如果小数点是第一位，补0
|
||||||
|
if (!moneys.money.length) {
|
||||||
|
moneys.money = '0.';
|
||||||
|
} else {
|
||||||
|
//如果不是，添加一个小数点
|
||||||
|
moneys.money = moneys.money + '.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//处理删除键
|
||||||
|
const _handleDeleteKey = () => {
|
||||||
|
let S = moneys.money;
|
||||||
|
//如果没有输入，直接返回
|
||||||
|
if (!S.length) return false;
|
||||||
|
//否则删除最后一个
|
||||||
|
moneys.money = S.substring(0, S.length - 1);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.orderbox {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.orderbox_left {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 16px 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right {
|
||||||
|
position: relative;
|
||||||
|
width: 30%;
|
||||||
|
padding: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.orderbox_right_top {
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
background: #8b008b;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.orderbox_right_topdiv:nth-child(1) {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_topdiv {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_top_item {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
padding: 6px 10px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.orderbox_right_top_item_one {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.orderbox_right_top_item_onespan {
|
||||||
|
color: black;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_top_item_tow {
|
||||||
|
color: black;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_input {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_inputkeyboard {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.keyboard {
|
||||||
|
width: 100%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
|
.key-row {
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
position: relative;
|
||||||
|
height: 8vh;
|
||||||
|
line-height: 8vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyboard .key-cell {
|
||||||
|
flex: 1;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
font-size: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderbox_right_button {
|
||||||
|
position: absolute;
|
||||||
|
width: 90%;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog_footer:nth-child(1) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog_footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
|
||||||
|
.dialog_footer_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
span:nth-child(1) {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog_footer_right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
span:nth-child(1) {
|
||||||
|
color: #fc3d3d;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge_footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.recharge_footer_item {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge_footer_itemright {
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
.recharge_footer_itemright_input {
|
||||||
|
width: 100%;
|
||||||
|
background: #333333;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0 6px;
|
||||||
|
display: flex;
|
||||||
|
height: 60px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
div:nth-child(1) {
|
||||||
|
color: #56792e;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-child(2) {
|
||||||
|
color: #88937c;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-zero-and-point {
|
||||||
|
display: flex;
|
||||||
|
height: 10vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 75%;
|
||||||
|
font-size: 30px;
|
||||||
|
|
||||||
|
.zero {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 66.66%;
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 33.33%;
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.key-cell:active {
|
||||||
|
color: white;
|
||||||
|
background: black; //黑色
|
||||||
|
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
||||||
|
}
|
||||||
|
|
||||||
|
.a:active,
|
||||||
|
.key-confirm2:active {
|
||||||
|
color: white;
|
||||||
|
background: black; //黑色
|
||||||
|
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<div class="number">
|
<div class="number">
|
||||||
<el-text class="t">#2</el-text>
|
<el-text class="t">#2</el-text>
|
||||||
</div>
|
</div>
|
||||||
<div class="select_user">
|
<div class="select_user" @click="membershow = true">
|
||||||
<el-icon class="icon">
|
<el-icon class="icon">
|
||||||
<UserFilled />
|
<UserFilled />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
|
|
@ -127,6 +127,9 @@
|
||||||
<remarkModal ref="remarkRef" />
|
<remarkModal ref="remarkRef" />
|
||||||
<!-- 修改取餐号 -->
|
<!-- 修改取餐号 -->
|
||||||
<takeFoodCode />
|
<takeFoodCode />
|
||||||
|
<el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
|
||||||
|
<member></member>
|
||||||
|
</el-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
@ -137,9 +140,9 @@ import takeFoodCode from '@/components/takeFoodCode.vue'
|
||||||
|
|
||||||
// 商品列表
|
// 商品列表
|
||||||
import goods from '@/views/home/components/goods.vue'
|
import goods from '@/views/home/components/goods.vue'
|
||||||
|
import member from '@/views/home/components/member.vue'
|
||||||
|
const membershow = ref(false)
|
||||||
const remarkRef = ref(null)
|
const remarkRef = ref(null)
|
||||||
|
|
||||||
const allSelected = ref(false)
|
const allSelected = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -81,6 +81,18 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
|
||||||
|
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
|
||||||
|
<div class="dialog_footer_left">
|
||||||
|
<span>微信用户</span>
|
||||||
|
<span>2021-02-22 18:05:53</span>
|
||||||
|
</div>
|
||||||
|
<div class="dialog_footer_right">
|
||||||
|
<span>19000</span>
|
||||||
|
<span>26300</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog> -->
|
||||||
<el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
|
<el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
|
||||||
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
|
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
|
||||||
<div class="dialog_footer_left">
|
<div class="dialog_footer_left">
|
||||||
|
|
@ -92,12 +104,14 @@
|
||||||
<span>26300</span>
|
<span>26300</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
|
<el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
|
||||||
<div class="recharge_footer">
|
<div class="recharge_footer">
|
||||||
<div class="recharge_footer_item">
|
<div class="recharge_footer_item">
|
||||||
qq
|
<div class="recharge_footer_items" v-for="(item, index) in 6" :key="index">
|
||||||
|
<div>充1000送300</div>
|
||||||
|
<div>充1000.00到13000.00</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="recharge_footer_itemright">
|
<div class="recharge_footer_itemright">
|
||||||
<div class="recharge_footer_itemright_input">
|
<div class="recharge_footer_itemright_input">
|
||||||
|
|
@ -158,7 +172,7 @@ const stored = ref(false)//储值余额
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
stored.value = !stored.value
|
stored.value = !stored.value
|
||||||
}
|
}
|
||||||
const recharge = ref(true)//充值
|
const recharge = ref(false)//充值
|
||||||
|
|
||||||
const onSubmit = () => {
|
const onSubmit = () => {
|
||||||
if (firstinput.value) {
|
if (firstinput.value) {
|
||||||
|
|
@ -177,22 +191,22 @@ const tableData = [
|
||||||
{
|
{
|
||||||
date: '2016-05-03',
|
date: '2016-05-03',
|
||||||
name: 'Tom',
|
name: 'Tom',
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
address: '1s',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: '2016-05-02',
|
date: '2016-05-02',
|
||||||
name: 'Tom',
|
name: 'Tom',
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
address: '1s',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: '2016-05-04',
|
date: '2016-05-04',
|
||||||
name: 'Tom',
|
name: 'Tom',
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
address: '1s',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: '2016-05-01',
|
date: '2016-05-01',
|
||||||
name: 'Tom',
|
name: 'Tom',
|
||||||
address: 'No. 189, Grove St, Los Angeles',
|
address: '1s',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const moneys = reactive({
|
const moneys = reactive({
|
||||||
|
|
@ -477,11 +491,38 @@ const _handleConfirmKey = () => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.recharge_footer_item {
|
.recharge_footer_item {
|
||||||
width: 50%;
|
width: 60%;
|
||||||
|
background: #f2f2f2;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-flow: wrap;
|
||||||
|
|
||||||
|
.recharge_footer_items {
|
||||||
|
background: #187ead;
|
||||||
|
padding: 16px 22px;
|
||||||
|
width: 45%;
|
||||||
|
height: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
div:nth-child(1) {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-child(2) {
|
||||||
|
color: #bad9e7;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.recharge_footer_itemright {
|
.recharge_footer_itemright {
|
||||||
width: 50%;
|
padding-left: 20px;
|
||||||
|
width: 40%;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue