739 lines
23 KiB
Vue
739 lines
23 KiB
Vue
<template>
|
||
<div class="orderbox">
|
||
<div class="orderbox_left">
|
||
<div class="demo_tabs">
|
||
<div class="demo_tabs_div">
|
||
<el-input v-model="firstinput" placeholder="请输入手机号或编号" clearable />
|
||
<el-button style="margin-left: 10px;" type="primary" @click="memberaddshow = true">添加</el-button>
|
||
</div>
|
||
</div>
|
||
<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 class="orderbox_right_top_item">
|
||
<div class="orderbox_right_top_item_one">
|
||
<el-icon :size="24" style="color:#00b58d ;">
|
||
<CopyDocument />
|
||
</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_button">
|
||
<el-button style="width: 100%;" type="primary" @click="recharge = true">会员充值</el-button>
|
||
<el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger">取消</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="memberaddshow" title="添加会员" width="600" :before-close="memberaddshowclose">
|
||
<el-form ref="formRef" :rules="rules" :model="membrform" label-width="70px" hide-required-asterisk>
|
||
<el-form-item label="手机号" prop="phone">
|
||
<el-input v-model="membrform.phone" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="生日" prop="date1">
|
||
<el-col :span="11">
|
||
<el-date-picker v-model="membrform.date1" type="date" placeholder="请选择生日" style="width: 100%" />
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="性别">
|
||
<el-radio-group v-model="membrform.resource">
|
||
<el-radio label="男" />
|
||
<el-radio label="女" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="等级">
|
||
<el-select v-model="membrform.region" placeholder="请选择等级">
|
||
<el-option label="等级1" value="1" />
|
||
<el-option label="等级2" value="2" />
|
||
<el-option label="等级3" value="3" />
|
||
<el-option label="等级4" value="4" />
|
||
<el-option label="等级5" value="5" />
|
||
<el-option label="等级6" value="6" />
|
||
<el-option label="等级7" value="7" />
|
||
<el-option label="等级8" value="8" />
|
||
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button style="width: 100%;" type="primary" @click="onSubmit">确认</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
<el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
|
||
<div class="recharge_footer">
|
||
<div class="recharge_footer_item">
|
||
<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 class="recharge_footer_itemright">
|
||
<div class="recharge_footer_itemright_input">
|
||
<div>充值金额：</div>
|
||
<div v-if="moneys.money">{{ moneys.money ? moneys.money : '请输入充值金额' }}</div>
|
||
|
||
</div>
|
||
<div class='keyboard' @click.stop='_handleKeyPress'>
|
||
<div class='key-row'>
|
||
<div class='key-cell cell_b' data-num='7'>7</div>
|
||
<div class='key-cell cell_b' data-num='8'>8</div>
|
||
<div class='key-cell cell_b' data-num='9'>9</div>
|
||
<div class='key-cell cell_b' data-num='-1'></div>
|
||
</div>
|
||
<div class='key-row'>
|
||
<div class='key-cell cell_b' data-num='4'>4</div>
|
||
<div class='key-cell cell_b' data-num='5'>5</div>
|
||
<div class='key-cell cell_b' data-num='6'>6</div>
|
||
<div class='key-cell cell_b' data-num='-1'></div>
|
||
</div>
|
||
<div class='key-row'>
|
||
<div class='key-cell cell_b' data-num='1'>1</div>
|
||
<div class='key-cell cell_b' data-num='2'>2</div>
|
||
<div class='key-cell cell_b' data-num='3'>3</div>
|
||
<div class='key-cell cell_b' data-num='-1'></div>
|
||
</div>
|
||
<div class="key-zero-and-point">
|
||
<div class="a cell_b zero" data-num='0'>0</div>
|
||
<div class="a cell_b point" data-num='.'>.</div>
|
||
</div>
|
||
|
||
<div @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
|
||
<text data-num='D'>C</text>
|
||
</div>
|
||
|
||
<div class='key-confirm' style="background:green">
|
||
<div data-num='S'>
|
||
<div data-num='S' class="title">确认</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, watch, onMounted } from 'vue'
|
||
import { useRoute } from "vue-router"
|
||
import { ElMessage } from 'element-plus'
|
||
import { queryMembermember } from '@/api/member/index.js'
|
||
import { useUser } from "@/store/user.js"
|
||
const route = useRoute()//vue-router
|
||
const store = useUser()
|
||
const firstinput = ref('')//搜索输入框
|
||
const stored = ref(false)//储值余额
|
||
const handleClose = () => {
|
||
stored.value = !stored.value
|
||
}
|
||
const recharge = ref(false)//充值
|
||
const memberaddshow = ref(true) //添加会员
|
||
const memberaddshowclose = () => {
|
||
memberaddshow.value = !memberaddshow.value
|
||
}
|
||
const asyncqueryMembermember = async () => {
|
||
let res = await queryMembermember({
|
||
shopId: store.userInfo.shopId
|
||
})
|
||
console.log(res,'1111111')
|
||
}
|
||
const handlerecharge = () => {
|
||
recharge.value = !recharge.value
|
||
}
|
||
const tableData = [
|
||
{
|
||
date: '2016-05-03',
|
||
name: 'Tom',
|
||
address: '1s',
|
||
},
|
||
{
|
||
date: '2016-05-02',
|
||
name: 'Tom',
|
||
address: '1s',
|
||
},
|
||
{
|
||
date: '2016-05-04',
|
||
name: 'Tom',
|
||
address: '1s',
|
||
},
|
||
{
|
||
date: '2016-05-01',
|
||
name: 'Tom',
|
||
address: '1s',
|
||
},
|
||
]
|
||
const membrform = reactive({ //membrform 添加会员表单
|
||
phone: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: '',
|
||
})
|
||
const formRef = ref(null); //ref membrform
|
||
const rules = reactive({ // membrform验证
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: "请输入11位手机号码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
date1: [
|
||
{
|
||
type: 'date',
|
||
required: true,
|
||
message: '请选择生日日期',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: "请输入登录密码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
});
|
||
const onSubmit = () => {
|
||
formRef.value.validate(async (valid) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
// const params = {
|
||
// serialNumber: RandomNumBoth(1000, 9999),
|
||
// clientType: 'pc',
|
||
// loginName: form.phone,
|
||
// password: form.password
|
||
// }
|
||
|
||
// store.userlogin(params).then((res) => {
|
||
// loading.value = true;
|
||
// ElMessage.success("登录成功");
|
||
// setTimeout(() => {
|
||
// router.replace({
|
||
// name: "home",
|
||
// });
|
||
// }, 1000);
|
||
// }).catch(err => {
|
||
// loading.value = false
|
||
// });
|
||
}
|
||
});
|
||
console.log(membrform.name)
|
||
console.log('submit!')
|
||
}
|
||
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;
|
||
//清空键
|
||
case 'C':
|
||
_handleClearKey();
|
||
break;
|
||
//确认键
|
||
case 'S':
|
||
_handleConfirmKey();
|
||
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
|
||
}
|
||
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);
|
||
}
|
||
|
||
//处理清空键
|
||
const _handleClearKey = () => {
|
||
moneys.money = '';
|
||
}
|
||
const _handleConfirmKey = () => {
|
||
let S = moneys.money;
|
||
//未输入
|
||
if (!S.length || S == 0) {
|
||
ElMessage({
|
||
message: '请输入正确的数值',
|
||
type: 'warning',
|
||
})
|
||
return false;
|
||
}
|
||
//将 8. 这种转换成 8.00
|
||
if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
|
||
S = Number(S.substring(0, S.length - 1)).toFixed(2);
|
||
//保留两位
|
||
S = Number(S).toFixed(2);
|
||
this.$emit('confirmEvent', S); //提交参数
|
||
}
|
||
onMounted(() => {
|
||
asyncqueryMembermember()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.orderbox {
|
||
display: flex;
|
||
height: 100%;
|
||
|
||
.orderbox_left {
|
||
width: 60%;
|
||
height: 100%;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 16px 0;
|
||
|
||
.demo_tabs {
|
||
.demo_tabs_div {
|
||
padding: 0 20px;
|
||
display: flex;
|
||
}
|
||
|
||
.demo_tabs_box {
|
||
width: 100%;
|
||
padding: 10px 20px;
|
||
|
||
.demo_tabs_boxitem {
|
||
width: 100%;
|
||
padding: 6px 16px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// background: #eeeeee;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
.demo_tabs_boxitem_one {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.demo_tabs_boxitem_oneone {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
flex-direction: column;
|
||
height: 70px;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.demo_tabs_boxitem_onetow {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
flex-direction: column;
|
||
height: 70px;
|
||
justify-content: space-around;
|
||
}
|
||
}
|
||
}
|
||
|
||
.demo_tabs_boxitem_tow {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 70px;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.orderbox_right {
|
||
position: relative;
|
||
width: 40%;
|
||
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_button {
|
||
position: absolute;
|
||
width: 90%;
|
||
left: 50%;
|
||
bottom: 16px;
|
||
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: 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 {
|
||
padding-left: 20px;
|
||
width: 40%;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.keyboard {
|
||
width: 100%;
|
||
height: 40vh;
|
||
background: #FFFFFF;
|
||
|
||
.key-row {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
position: relative;
|
||
height: 10vh;
|
||
line-height: 10vh;
|
||
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.keyboard .key-cell {
|
||
flex: 1;
|
||
-webkit-box-flex: 1;
|
||
font-size: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.keyboard .key-confirm {
|
||
position: absolute;
|
||
text-align: center;
|
||
height: 30vh;
|
||
width: 25%;
|
||
line-height: 30vh;
|
||
color: #FFFFFF;
|
||
z-index: 5;
|
||
right: 0;
|
||
bottom: 0;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.keyboard .key-confirm2 {
|
||
position: absolute;
|
||
height: 10vh;
|
||
width: 25%;
|
||
line-height: 10vh;
|
||
z-index: 9999;
|
||
right: 0;
|
||
top: 60px;
|
||
font-size: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.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> |