709 lines
22 KiB
Vue
709 lines
22 KiB
Vue
<template>
|
||
<div class="orderbox">
|
||
<div class="orderbox_left">
|
||
<div class="demo_tabs" v-if="props.membershow == '0'">
|
||
<div class="demo_tabs_div">
|
||
<el-input v-model="tableData.phone" placeholder="请输入手机号或编号" @input="inputChange" clearable />
|
||
<el-button style="margin-left: 10px;" type="primary" @click="memberaddshow = true">添加</el-button>
|
||
</div>
|
||
</div>
|
||
<el-table :data="tableData.list" style="width: 100%;margin-top: 10px;height:80%;"
|
||
:row-class-name="tableRowClassName" @cell-click="cellclicktableData">
|
||
<el-table-column prop="name" label="昵称" />
|
||
<el-table-column prop="telephone" label="手机" width="200px" />
|
||
<el-table-column prop="code" label="编号" width="150px" />
|
||
<el-table-column prop="level" label="等级" />
|
||
<el-table-column prop="levelConsume" label="积分" />
|
||
<el-table-column prop="amount" label="余额" />
|
||
</el-table>
|
||
<el-pagination layout="prev, pager, next, jumper" style="margin-top: 20px;" :total="Number(tableData.total)"
|
||
@current-change="handleCurrentChange" />
|
||
</div>
|
||
<div class="orderbox_right">
|
||
<div class="orderbox_right_top">
|
||
<div class="orderbox_right_topdiv">
|
||
<span>会员昵称：</span>
|
||
<span>{{ tableData.list[datarow].name }}</span>
|
||
</div>
|
||
<div class="orderbox_right_topdiv">
|
||
<span>手机号码：</span>
|
||
<span>{{ tableData.list[datarow].telephone }}</span>
|
||
</div>
|
||
<div class="orderbox_right_topdiv">
|
||
<span>会员编号：</span>
|
||
<span>{{ tableData.list[datarow].code }}</span>
|
||
</div>
|
||
<div class="orderbox_right_topdiv">
|
||
<span>会员等级：</span>
|
||
<span>{{ tableData.list[datarow].level }}</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">{{ tableData.list[datarow].levelConsume }}</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>{{ tableData.list[datarow].amount }}</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_input" style="margin-top:20px ;" v-if="props.membershow == '1'">
|
||
<el-input placeholder="请输入会员手机号或者编号" v-model="tableData.phone" clearable @input="inputChange"></el-input>
|
||
</div>
|
||
<keyboard v-if="props.membershow == '1'" @consumeFees="consumeFees"></keyboard>
|
||
<div class="orderbox_right_button" v-if="props.membershow == '0'">
|
||
<router-link to="/" style="width: 35%;">
|
||
<el-button style="width: 100%;" @click="recharge = true">创建订单</el-button>
|
||
</router-link>
|
||
<el-button style="width: 60%;" type="primary">账户充值</el-button>
|
||
</div>
|
||
<div class="orderbox_right_button" v-if="props.membershow == '1'">
|
||
<router-link to="/" style="width: 35%;">
|
||
<el-button style="width: 100%;" @click="memberaddshowclose">添加会员</el-button>
|
||
</router-link>
|
||
<el-button style="width: 60%;" type="primary">确认</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
|
||
<add :flowingwater='flowingwater' />
|
||
</el-dialog>
|
||
<el-dialog v-model="memberaddshow" title="添加会员" width="600" :before-close="memberaddshowclose"
|
||
@open="membrform = { ...resetMembrform }">
|
||
<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="nickName">
|
||
<el-input v-model="membrform.nickName" />
|
||
</el-form-item>
|
||
<el-form-item label="生日" prop="birthDay">
|
||
<el-col :span="11">
|
||
<el-date-picker v-model="membrform.birthDay" type="date" placeholder="请选择生日" style="width: 100%" />
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="性别" prop="sex">
|
||
<el-radio-group v-model="membrform.sex">
|
||
<el-radio :label="1">男</el-radio>
|
||
<el-radio :label="2">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="等级" prop="level">
|
||
<el-select v-model="membrform.level" 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-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button style="width: 100%;" type="primary" @click="createMembermemberSubmit">确认</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
<el-dialog v-model="recharge" title="会员充值" width="400" :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">{{ moneys ? moneys : '请输入充值金额' }}</div>
|
||
|
||
</div>
|
||
<div class='keyboard'>
|
||
<cwxeyboard @confirmEvent="confirmEvent" @consumeFee="consumeFee" btn-color="orange" title="支付">
|
||
</cwxeyboard>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, watch, onMounted } from 'vue'
|
||
import { ElMessage, dayjs } from 'element-plus'
|
||
import { queryMembermember, createMembermember, memberqueryMemberAccount, accountPaymember } from '@/api/member/index.js'
|
||
import { useUser } from "@/store/user.js"
|
||
import lodash from 'lodash'
|
||
import add from '@/views/member/components/add.vue'
|
||
import cwxeyboard from '@/components/cwx-keyboard/cwx-keyboard.vue'
|
||
import keyboard from '@/views/home/components/keyboard.vue'
|
||
const store = useUser()
|
||
const stored = ref(false)//储值余额
|
||
const handleClose = async () => {
|
||
stored.value = !stored.value
|
||
}
|
||
const props = defineProps({//首页传值
|
||
membershow: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '提示'
|
||
}
|
||
})
|
||
const flowingwater = reactive({//获取流水初始化
|
||
total: '',
|
||
list: []
|
||
})
|
||
const consumeFee = (e) => { //接收子组件值 并赋值给父组件
|
||
moneys.value = e
|
||
}
|
||
const consumeFees = (e) => {
|
||
tableData.phone = e
|
||
|
||
}
|
||
const confirmEvent = async () => {//子组件 确认按钮
|
||
try {
|
||
let res = await accountPaymember({
|
||
shopId: store.userInfo.shopId,
|
||
memberId: tableData.list[datarow.value].id,
|
||
amount: moneys.value
|
||
})
|
||
if (res == null) {
|
||
recharge.value = false
|
||
ElMessage({
|
||
message: '充值成功',
|
||
type: 'success',
|
||
})
|
||
resetMembrform.value = { ...membrform.value }
|
||
asyncqueryMembermember()
|
||
}
|
||
} catch (error) {
|
||
|
||
}
|
||
}
|
||
const MemberAccount = async () => {//获取流水
|
||
try {
|
||
let res = await memberqueryMemberAccount({
|
||
memberId: tableData.list[datarow.value].id,
|
||
page: 1,
|
||
pageSize: 10
|
||
})
|
||
flowingwater.total = res.total
|
||
flowingwater.list = res.list
|
||
} catch (error) {
|
||
ElMessage({
|
||
message: '获取失败',
|
||
type: 'error',
|
||
})
|
||
}
|
||
}
|
||
const recharge = ref(false)//充值
|
||
const memberaddshow = ref(false) //添加会员
|
||
const memberaddshowclose = () => {
|
||
memberaddshow.value = !memberaddshow.value
|
||
}
|
||
const tableData = reactive({//表格数据
|
||
list: [{
|
||
name: "",
|
||
amount: "",
|
||
levelConsume: "",
|
||
level: "",
|
||
code: "",
|
||
telephone: ""
|
||
}],
|
||
page: 1,
|
||
pageSize: 10,
|
||
phone: '',
|
||
total: ''
|
||
})
|
||
const inputChange = lodash.debounce(function () { //搜索手机号
|
||
asyncqueryMembermember()
|
||
}, 500)
|
||
const asyncqueryMembermember = async () => {//会员列表数据
|
||
let res = await queryMembermember({
|
||
shopId: store.userInfo.shopId,
|
||
page: tableData.page,
|
||
pageSize: 10,
|
||
phone: tableData.phone
|
||
})
|
||
if (res) {
|
||
tableData.list = res.list
|
||
tableData.total = res.total
|
||
MemberAccount()
|
||
}
|
||
}
|
||
const tableRowClassName = ({ row, rowIndex }) => {//动态给tab加样式
|
||
if (rowIndex === datarow.value) {
|
||
return 'warning-row'
|
||
} return ''
|
||
}
|
||
const datarow = ref(0) //初始化右边
|
||
const cellclicktableData = (row, column, cell, event) => {
|
||
const index = tableData.list.findIndex(item => item.id == row.id)
|
||
datarow.value = index
|
||
}
|
||
const handleCurrentChange = (val) => { //页码
|
||
tableData.page = val
|
||
datarow.value = 0
|
||
asyncqueryMembermember()
|
||
}
|
||
const handlerecharge = () => {
|
||
recharge.value = !recharge.value
|
||
}
|
||
const resetMembrform = ref({})
|
||
const membrform = ref({ //membrform 添加会员表单
|
||
phone: '',
|
||
nickName: '',
|
||
level: '',
|
||
birthDay: '',
|
||
sex: '',
|
||
level: ''
|
||
})
|
||
const formRef = ref(null); //ref membrform
|
||
const rules = reactive({ // membrform验证
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: "请输入11位手机号码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
nickName: [
|
||
{
|
||
required: true,
|
||
message: "请输入昵称",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
sex: [
|
||
{
|
||
required: true,
|
||
message: "请选择性别",
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
level: [
|
||
{
|
||
required: true,
|
||
message: "请选择等级",
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
birthDay: [
|
||
{
|
||
type: 'date',
|
||
required: true,
|
||
message: '请选择生日日期',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
});
|
||
const createMembermemberSubmit = async () => { ///添加会员
|
||
formRef.value.validate(async (valid) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
|
||
let res = await createMembermember({
|
||
shopId: store.userInfo.shopId,
|
||
phone: membrform.value.phone,
|
||
nickName: membrform.value.nickName,
|
||
sex: membrform.value.sex,
|
||
level: membrform.value.level,
|
||
birthDay: dayjs(membrform.value.birthDay).format("YYYY-MM-DD")
|
||
})
|
||
if (res == null) {
|
||
|
||
memberaddshowclose()
|
||
ElMessage({
|
||
message: '添加成功',
|
||
type: 'success',
|
||
})
|
||
asyncqueryMembermember()
|
||
}
|
||
|
||
|
||
}
|
||
});
|
||
}
|
||
const moneys = ref('')// 钱数
|
||
onMounted(() => {
|
||
// resetMembrform.value = { ...membrform.value }
|
||
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;
|
||
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: 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: 100%;
|
||
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> |