新增会员积分页面
This commit is contained in:
167
src/views/application/components/member_points/record.vue
Normal file
167
src/views/application/components/member_points/record.vue
Normal file
@@ -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>
|
||||||
197
src/views/application/components/member_points/setting.vue
Normal file
197
src/views/application/components/member_points/setting.vue
Normal file
@@ -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>
|
||||||
83
src/views/application/components/member_points/shop_add.vue
Normal file
83
src/views/application/components/member_points/shop_add.vue
Normal file
@@ -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>
|
||||||
42
src/views/application/components/member_points/shop_list.vue
Normal file
42
src/views/application/components/member_points/shop_list.vue
Normal file
@@ -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>
|
<template>
|
||||||
<div>会员积分</div>
|
<div class="app-container">
|
||||||
</template>
|
<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>
|
||||||
Reference in New Issue
Block a user