新增会员积分页面
This commit is contained in:
parent
a2d21b3776
commit
c0c3eeeb44
|
|
@ -0,0 +1,167 @@
|
|||
<!-- 兑换记录 -->
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-form :model="query" inline label-position="left">
|
||||
<el-form-item>
|
||||
<el-input placeholder="订单编号/核销码" v-model="query.name" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="query.cateId" placeholder="领取方式" style="width: 140px;">
|
||||
<el-option label="自取" :value="1"></el-option>
|
||||
<el-option label="邮寄" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="query.cateId" placeholder="状态" style="width: 140px;">
|
||||
<el-option label="自取" :value="1"></el-option>
|
||||
<el-option label="邮寄" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
|
||||
value-format="yyyy-MM-dd HH:mm:ss">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="collect_wrap">
|
||||
<div class="item">
|
||||
<div class="icon_wrap" style="--bg-color:#ADDBBC">
|
||||
<i class="icon el-icon-s-goods"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="m">￥1231</div>
|
||||
<div class="t">总订单数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon_wrap" style="--bg-color:#8CC4FC">
|
||||
<i class="icon el-icon-s-goods"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="m">￥0.00</div>
|
||||
<div class="t">已支付金额</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="订单编号"></el-table-column>
|
||||
<el-table-column label="用户名"></el-table-column>
|
||||
<el-table-column label="商品"></el-table-column>
|
||||
<el-table-column label="使用积分"></el-table-column>
|
||||
<el-table-column label="支付金额"></el-table-column>
|
||||
<el-table-column label="领取方式"></el-table-column>
|
||||
<el-table-column label="状态"></el-table-column>
|
||||
<el-table-column label="下单时间"></el-table-column>
|
||||
<el-table-column label="操作"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
name: '',
|
||||
cateId: '',
|
||||
createdAt: []
|
||||
},
|
||||
tableData: {
|
||||
sort: 'createdAt,desc',
|
||||
list: [],
|
||||
page: 0,
|
||||
size: 30,
|
||||
loading: false,
|
||||
total: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetHandle() {
|
||||
|
||||
},
|
||||
getTableData() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collect_wrap {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
.item {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
|
||||
.icon_wrap {
|
||||
$size: 34px;
|
||||
$border: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: $size + $border;
|
||||
height: $size + $border;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--bg-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 10px;
|
||||
|
||||
.m {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
||||
<el-form-item label="是否消费赠送积分">
|
||||
<el-switch v-model.trim="form.isOpenYhq" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="费赠送积分" v-if="form.isOpenYhq">
|
||||
<el-input v-model="form.num" style="width: 300px;">
|
||||
<template slot="prepend">每消费</template>
|
||||
<template slot="append">元赠送1积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启下单积分抵扣" style="margin-top: 50px;">
|
||||
<el-switch v-model.trim="form.isOpenYhq" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="下单积分抵扣门槛">
|
||||
<el-input v-model="form.num" style="width: 300px;">
|
||||
<template slot="append">积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="下单最高抵扣比例">
|
||||
<el-input v-model="form.num" style="width: 300px;">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="下单抵扣积分比例">
|
||||
<el-input v-model="form.num" style="width: 300px;">
|
||||
<template slot="prepend">1元等于</template>
|
||||
<template slot="append">积分</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启积分商城" style="margin-top: 50px;">
|
||||
<el-switch v-model.trim="form.isOpenYhq" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示样式">
|
||||
<div class="style_wrap">
|
||||
<div class="item style1" :class="{ active: styleActive == 1 }" @click="styleActive = 1">
|
||||
<div class="row">
|
||||
<div class="cover"></div>
|
||||
<div class="info">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cover"></div>
|
||||
<div class="info">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item style2" :class="{ active: styleActive == 2 }" @click="styleActive = 2">
|
||||
<div class="row">
|
||||
<div class="cover"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cover"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cover"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cover"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
isOpenYhq: 1,
|
||||
num: ''
|
||||
},
|
||||
styleActive: 1,
|
||||
rules: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.style_wrap {
|
||||
display: flex;
|
||||
width: 350px;
|
||||
gap: 50px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
$color: #3F9EFF;
|
||||
|
||||
&.active {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
.cover {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
&.style1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.row {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.cover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding-left: 10px;
|
||||
|
||||
.line {
|
||||
flex: 1;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 80%;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
|
||||
.row:nth-child(1) {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
.row:nth-child(2) {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
|
||||
.row:nth-child(3) {
|
||||
grid-area: 2 / 1 / 3 / 2;
|
||||
}
|
||||
|
||||
.row:nth-child(4) {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.cover {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!-- 添加积分商品/优惠券 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="form.id ? '编辑商品' : '添加商品'" :visible.sync="dialogVisible" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="奖品类型">
|
||||
<el-radio-group v-model="form.registerType">
|
||||
<el-radio label="munchies">实物商品</el-radio>
|
||||
<el-radio label="restaurant">优惠券</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片">
|
||||
<div class="img_list">
|
||||
<div class="item" v-for="item in form.imgList" :key="item.id">
|
||||
<img class="img" :src="item.url">
|
||||
</div>
|
||||
<div class="item" @click="$refs.addImg.show()">
|
||||
<i class="icon el-icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<addImg ref="addImg" @successEvent="e => form.imgList.push(e[0])" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addImg from "@/views/product/components/addImages.vue";
|
||||
export default {
|
||||
components: {
|
||||
addImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: '',
|
||||
registerType: 'munchies',
|
||||
imgList: []
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.img_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px dashed #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #F7F7FA;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
color: #DDDFE6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div><el-button type="primary" @click="$refs.ShopAdd.show()">添加商品</el-button></div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="商品"></el-table-column>
|
||||
<el-table-column label="所需积分"></el-table-column>
|
||||
<el-table-column label="额外价格「元」"></el-table-column>
|
||||
<el-table-column label="总数"></el-table-column>
|
||||
<el-table-column label="库存"></el-table-column>
|
||||
<el-table-column label="操作"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 添加积分商品/积分 -->
|
||||
<ShopAdd ref="ShopAdd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShopAdd from './shop_add.vue'
|
||||
export default {
|
||||
components: { ShopAdd },
|
||||
data() {
|
||||
return {
|
||||
tableData: {
|
||||
sort: 'createdAt,desc',
|
||||
list: [],
|
||||
page: 0,
|
||||
size: 30,
|
||||
loading: false,
|
||||
total: 0
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.head-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,36 @@
|
|||
<template>
|
||||
<div>会员积分</div>
|
||||
</template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="基本设置" name="1"></el-tab-pane>
|
||||
<el-tab-pane label="商品设置" name="2"></el-tab-pane>
|
||||
<el-tab-pane label="兑换记录" name="3"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<Setting v-if="activeName == 1" />
|
||||
<ShopList v-if="activeName == 2" />
|
||||
<Record v-if="activeName == 3" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Setting from './components/member_points/setting.vue'
|
||||
import ShopList from './components/member_points/shop_list.vue'
|
||||
import Record from './components/member_points/record.vue'
|
||||
export default {
|
||||
components: {
|
||||
Setting,
|
||||
ShopList,
|
||||
Record
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: '3'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-tabs) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue