|
|
@@ -1,284 +1,295 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <app-tabs :tabs="tabs" :isFixed="true" :isAdd="true" addIcon="iconshezhi" addText="设置" @add="pageTo('/admin/interest/setting')" :isBoxShadow="false" :currentTab="form.status" @change="change" itemWidth="25%" :padding="0" />
|
|
|
- <div class="input-wrap">
|
|
|
- <!-- <div class="map-search"> -->
|
|
|
- <app-search-module
|
|
|
- :val="form.search"
|
|
|
- placeholder="请输入商品名称"
|
|
|
- :isBtn="true"
|
|
|
- @search="searchFn" />
|
|
|
- <!-- </div> -->
|
|
|
- <!-- <div class="app-size-26">搜索</div> -->
|
|
|
- </div>
|
|
|
- <!-- list -->
|
|
|
- <div class="list-wrap">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
- <div>
|
|
|
- <app-avatar-module :src="item.userAvatar" :width="110" />
|
|
|
- </div>
|
|
|
- <div class="list-right">
|
|
|
- <div class="flex-center-between">
|
|
|
- <div class="app-size-30 app-color-0">{{ item.userName }}</div>
|
|
|
- <div>{{ item.status | constantfilter('INVITE_STATUS') }}</div>
|
|
|
- </div>
|
|
|
- <div class="list-info">
|
|
|
- <div class="list-info-left">
|
|
|
- <div>介绍人：{{ item.introUserName }}</div>
|
|
|
- <div class="list-remark" v-if="item.status == 0 && item.addTime">
|
|
|
- <span>{{ item.addTime | formatTime }}</span>
|
|
|
- <span class="list-remark-prompt">领券</span>
|
|
|
- </div>
|
|
|
- <div class="list-remark" v-if="item.status == 1 && item.orderTime">
|
|
|
- <span>{{ item.orderTime | formatTime }}</span>
|
|
|
- <span class="list-remark-prompt">下单{{ item.price }}</span>
|
|
|
- </div>
|
|
|
- <div class="list-remark" v-if="item.status == 2 && item.giveTime">
|
|
|
- <span>{{ item.giveTime | formatTime }}</span>
|
|
|
- <span class="list-remark-prompt">兑奖</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="admin-button-com blue" v-if="item.status == 1" @click="redeemFn">兑奖</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
- </block>
|
|
|
- </div>
|
|
|
- <!-- 兑奖弹窗 -->
|
|
|
- <modal-module :show="redeemModal" :custom="true" :maskClosable="false" @click="modalClick" padding="30rpx 30rpx">
|
|
|
- <template>
|
|
|
- <div class="redeem-wrap">
|
|
|
- <div class="redeem-list-wrap">
|
|
|
- <!-- 新用户 -->
|
|
|
- <div class="list">
|
|
|
- <div class="list-tag">
|
|
|
- <img :src="`${constant.imgUrl}/retail/interest/new-member.png`" alt mode="widthFix" />
|
|
|
- </div>
|
|
|
- <div class="list-left">
|
|
|
- <app-avatar-module :src="redeemData.userAvatar" :width="100" />
|
|
|
- </div>
|
|
|
- <div class="list-right">
|
|
|
- <div class="app-color-0 app-size-30 app-blod">{{ redeemData.userName }}</div>
|
|
|
- <div>普通客户</div>
|
|
|
- <div>
|
|
|
- <span class="list-time">{{ redeemData.orderTime | formatTime }}</span>
|
|
|
- <span>下单: {{ redeemData.amount }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 介绍人 -->
|
|
|
- <div class="list">
|
|
|
- <div class="list-tag">
|
|
|
- <img :src="`${constant.imgUrl}/retail/interest/introducer.png`" alt mode="widthFix" />
|
|
|
- </div>
|
|
|
- <div class="list-left">
|
|
|
- <app-avatar-module :src="redeemData.introUserAvatar" :width="100" />
|
|
|
- </div>
|
|
|
- <div class="list-right">
|
|
|
- <div class="app-color-0 app-size-30 app-blod">{{ redeemData.introUserName }}</div>
|
|
|
- <div>普通客户</div>
|
|
|
- <div>
|
|
|
- <span class="list-time">累计邀请: {{ redeemData.inviteNum }}</span>
|
|
|
- <span>介绍下单数: {{ redeemData.orderNum }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 总览 -->
|
|
|
- <div class="redeem-total">
|
|
|
- <span>奖励：</span>
|
|
|
- <span class="app-price">￥{{ redeemData.prize }}</span>
|
|
|
- </div>
|
|
|
- <div class="redeem-btn">
|
|
|
- <div class="admin-button-com default big" @click="modalCancel">取消</div>
|
|
|
- <div class="admin-button-com blue big" @click="confirmGive">确认发奖</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- </div>
|
|
|
+ <div class="app-content">
|
|
|
+ <app-tabs
|
|
|
+ :tabs="tabs"
|
|
|
+ :isFixed="true"
|
|
|
+ :isAdd="true"
|
|
|
+ addIcon="iconshezhi"
|
|
|
+ addText="设置"
|
|
|
+ @add="pageTo('/admin/interest/setting')"
|
|
|
+ :isBoxShadow="false"
|
|
|
+ :currentTab="form.status"
|
|
|
+ @change="change"
|
|
|
+ itemWidth="25%"
|
|
|
+ :padding="0"
|
|
|
+ />
|
|
|
+ <div class="input-wrap">
|
|
|
+ <app-search-module :val="form.search" placeholder="请输入名称/手机号" :isBtn="true" @search="searchFn" />
|
|
|
+ </div>
|
|
|
+ <!-- list -->
|
|
|
+ <div class="list-wrap">
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
+ <div>
|
|
|
+ <app-avatar-module :src="item.userAvatar" :width="110" />
|
|
|
+ </div>
|
|
|
+ <div class="list-right">
|
|
|
+ <div class="flex-center-between">
|
|
|
+ <div class="app-size-30 app-color-0">{{ item.userName }}</div>
|
|
|
+ <div>{{ item.status | constantfilter('INVITE_STATUS') }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-info">
|
|
|
+ <div class="list-info-left">
|
|
|
+ <div>介绍人：{{ item.introUserName }}</div>
|
|
|
+ <div class="list-remark" v-if="item.status == 0 && item.addTime">
|
|
|
+ <span>{{ item.addTime | formatTime }}</span>
|
|
|
+ <span class="list-remark-prompt">领券</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-remark" v-if="item.status == 1 && item.orderTime">
|
|
|
+ <span>{{ item.orderTime | formatTime }}</span>
|
|
|
+ <span class="list-remark-prompt">下单{{ item.price }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-remark" v-if="item.status == 2 && item.giveTime">
|
|
|
+ <span>{{ item.giveTime | formatTime }}</span>
|
|
|
+ <span class="list-remark-prompt">兑奖</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="admin-button-com blue" v-if="item.status == 1" @click="redeemFn">兑奖</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ <!-- 兑奖弹窗 -->
|
|
|
+ <modal-module
|
|
|
+ :show="redeemModal"
|
|
|
+ :custom="true"
|
|
|
+ :maskClosable="false"
|
|
|
+ @click="modalClick"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <div class="redeem-wrap">
|
|
|
+ <div class="redeem-list-wrap">
|
|
|
+ <!-- 新用户 -->
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-tag">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/interest/new-member.png`" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ <div class="list-left">
|
|
|
+ <app-avatar-module :src="redeemData.userAvatar" :width="100" />
|
|
|
+ </div>
|
|
|
+ <div class="list-right">
|
|
|
+ <div class="app-color-0 app-size-30 app-blod">{{ redeemData.userName }}</div>
|
|
|
+ <div>普通客户</div>
|
|
|
+ <div>
|
|
|
+ <span class="list-time">{{ redeemData.orderTime | formatTime }}</span>
|
|
|
+ <span>下单: {{ redeemData.amount }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 介绍人 -->
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-tag">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/interest/introducer.png`" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ <div class="list-left">
|
|
|
+ <app-avatar-module :src="redeemData.introUserAvatar" :width="100" />
|
|
|
+ </div>
|
|
|
+ <div class="list-right">
|
|
|
+ <div class="app-color-0 app-size-30 app-blod">{{ redeemData.introUserName }}</div>
|
|
|
+ <div>普通客户</div>
|
|
|
+ <div>
|
|
|
+ <span class="list-time">累计邀请: {{ redeemData.inviteNum }}</span>
|
|
|
+ <span>介绍下单数: {{ redeemData.orderNum }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 总览 -->
|
|
|
+ <div class="redeem-total">
|
|
|
+ <span>奖励：</span>
|
|
|
+ <span class="app-price">￥{{ redeemData.prize }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="redeem-btn">
|
|
|
+ <div class="admin-button-com default big" @click="modalCancel">取消</div>
|
|
|
+ <div class="admin-button-com blue big" @click="confirmGive">确认发奖</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AppTabs from '@/components/plugin/tabs'
|
|
|
-import AppSearchModule from '@/components/module/app-search'
|
|
|
-import AppAvatarModule from '@/components/module/app-avatar'
|
|
|
-import ModalModule from '@/components/plugin/modal'
|
|
|
-import AppWrapperEmpty from '@/components/app-wrapper-empty'
|
|
|
-import { list } from '@/mixins'
|
|
|
+import AppTabs from "@/components/plugin/tabs";
|
|
|
+import AppSearchModule from "@/components/module/app-search";
|
|
|
+import AppAvatarModule from "@/components/module/app-avatar";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import { list } from "@/mixins";
|
|
|
// api
|
|
|
-import { getListB, getDet, give } from '@/api/invite'
|
|
|
+import { getListB, getDet, give } from "@/api/invite";
|
|
|
export default {
|
|
|
- name: 'admin-invite',
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- AppSearchModule,
|
|
|
- AppAvatarModule,
|
|
|
- ModalModule,
|
|
|
- AppWrapperEmpty
|
|
|
- },
|
|
|
- mixins: [list],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- constant: this.$constant,
|
|
|
- form: {
|
|
|
- status: 0,
|
|
|
- search: ''
|
|
|
- },
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '全部'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '待下单'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '待兑奖'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已兑奖'
|
|
|
- }
|
|
|
- ],
|
|
|
- // 兑奖
|
|
|
- redeemModal: false,
|
|
|
- // 兑奖数据
|
|
|
- redeemData: {}
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function() {
|
|
|
- // this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async init() {
|
|
|
- this._list()
|
|
|
- },
|
|
|
- searchFn(e) {
|
|
|
- // this.form.search = e
|
|
|
- this._list()
|
|
|
- },
|
|
|
- _list() {
|
|
|
- let params = JSON.parse(JSON.stringify(this.form))
|
|
|
- params.status = params.status - 1
|
|
|
- return getListB(params).then(res => {
|
|
|
- this.completes(res)
|
|
|
- })
|
|
|
- },
|
|
|
- change(e) {
|
|
|
- if (this.form.status == e.index) {
|
|
|
- return false
|
|
|
- } else {
|
|
|
- this.form.status = e.index
|
|
|
- this.resetList()
|
|
|
- this._list()
|
|
|
- }
|
|
|
- },
|
|
|
- modalCancel() {
|
|
|
- this.redeemModal = false
|
|
|
- },
|
|
|
- modalClick() {},
|
|
|
- // 查看详情
|
|
|
- redeemFn(item) {
|
|
|
- getDet({ id: item.id }).then(res => {
|
|
|
- this.redeemData = res.data
|
|
|
- this.redeemModal = true
|
|
|
- })
|
|
|
- },
|
|
|
- // 兑奖
|
|
|
- confirmGive() {
|
|
|
- give({ id: this.redeemData.id }).then(res => {
|
|
|
- this.$msg('兑奖成功!')
|
|
|
- this.modalCancel()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ name: "admin-invite",
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ AppSearchModule,
|
|
|
+ AppAvatarModule,
|
|
|
+ ModalModule,
|
|
|
+ AppWrapperEmpty
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ form: {
|
|
|
+ status: 0,
|
|
|
+ search: ""
|
|
|
+ },
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "全部"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待下单"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待兑奖"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已兑奖"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 兑奖
|
|
|
+ redeemModal: false,
|
|
|
+ // 兑奖数据
|
|
|
+ redeemData: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ // this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async init() {
|
|
|
+ this._list();
|
|
|
+ },
|
|
|
+ searchFn(e) {
|
|
|
+ // this.form.search = e
|
|
|
+ this._list();
|
|
|
+ },
|
|
|
+ _list() {
|
|
|
+ let params = JSON.parse(JSON.stringify(this.form));
|
|
|
+ params.status = params.status - 1;
|
|
|
+ return getListB(params).then(res => {
|
|
|
+ this.completes(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ change(e) {
|
|
|
+ if (this.form.status == e.index) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.form.status = e.index;
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.redeemModal = false;
|
|
|
+ },
|
|
|
+ modalClick() {},
|
|
|
+ // 查看详情
|
|
|
+ redeemFn(item) {
|
|
|
+ getDet({ id: item.id }).then(res => {
|
|
|
+ this.redeemData = res.data;
|
|
|
+ this.redeemModal = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 兑奖
|
|
|
+ confirmGive() {
|
|
|
+ give({ id: this.redeemData.id }).then(res => {
|
|
|
+ this.$msg("兑奖成功!");
|
|
|
+ this.modalCancel();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .app-content {
|
|
|
- padding-top: 210px;
|
|
|
- }
|
|
|
- // 搜索框
|
|
|
- .input-wrap {
|
|
|
- position: fixed;
|
|
|
- top: 80px;
|
|
|
- left: 0;
|
|
|
- width: calc(100% - 50px);
|
|
|
- background-color: #fff;
|
|
|
- padding: 22px 20px 22px 30px;
|
|
|
- border-top: 1px solid $borderColor;
|
|
|
- }
|
|
|
- // list
|
|
|
- .list-wrap {
|
|
|
- width: 100%;
|
|
|
- color: $fontColor3;
|
|
|
- background-color: #fff;
|
|
|
- .list {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- width: calc(100% - 60px);
|
|
|
- padding: 30px 0;
|
|
|
- margin: 0 30px;
|
|
|
- border-bottom: 1px solid $borderColor;
|
|
|
- .list-right {
|
|
|
- width: calc(100% - 130px);
|
|
|
- .list-info {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- margin-top: 10px;
|
|
|
- .list-remark {
|
|
|
- margin-top: 10px;
|
|
|
- .list-remark-prompt {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .admin-button-com {
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // module
|
|
|
- .redeem-wrap {
|
|
|
- .redeem-list-wrap {
|
|
|
- .list {
|
|
|
- position: relative;
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- padding: 28px 20px;
|
|
|
- color: $fontColor3;
|
|
|
- box-shadow: 0px 1px 16px 0px rgba(238, 238, 238, 1);
|
|
|
- border-radius: 10px;
|
|
|
- .list-tag {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
- .list-right {
|
|
|
- margin-left: 20px;
|
|
|
- & > div:first-child {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- & > div {
|
|
|
- margin-top: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .redeem-total {
|
|
|
- margin: 30px 0 50px;
|
|
|
- text-align: center;
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
- .redeem-btn {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- width: 100%;
|
|
|
- .admin-button-com {
|
|
|
- width: 40%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.app-content {
|
|
|
+ padding-top: 210px;
|
|
|
+}
|
|
|
+// 搜索框
|
|
|
+.input-wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 80px;
|
|
|
+ left: 0;
|
|
|
+ width: calc(100% - 50px);
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 22px 20px 22px 30px;
|
|
|
+ border-top: 1px solid $borderColor;
|
|
|
+}
|
|
|
+// list
|
|
|
+.list-wrap {
|
|
|
+ width: 100%;
|
|
|
+ color: $fontColor3;
|
|
|
+ background-color: #fff;
|
|
|
+ .list {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ padding: 30px 0;
|
|
|
+ margin: 0 30px;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ .list-right {
|
|
|
+ width: calc(100% - 130px);
|
|
|
+ .list-info {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ margin-top: 10px;
|
|
|
+ .list-remark {
|
|
|
+ margin-top: 10px;
|
|
|
+ .list-remark-prompt {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .admin-button-com {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// module
|
|
|
+.redeem-wrap {
|
|
|
+ .redeem-list-wrap {
|
|
|
+ .list {
|
|
|
+ position: relative;
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ padding: 28px 20px;
|
|
|
+ color: $fontColor3;
|
|
|
+ box-shadow: 0px 1px 16px 0px rgba(238, 238, 238, 1);
|
|
|
+ border-radius: 10px;
|
|
|
+ .list-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .list-right {
|
|
|
+ margin-left: 20px;
|
|
|
+ & > div:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .redeem-total {
|
|
|
+ margin: 30px 0 50px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ .redeem-btn {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ width: 100%;
|
|
|
+ .admin-button-com {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
shish