|
|
@@ -1,527 +1,604 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <!-- 客户信息 -->
|
|
|
- <div class="module-com user-info">
|
|
|
- <div class="user-wrap">
|
|
|
- <app-avatar-module :src="data.avatarUrl" />
|
|
|
- <div class="user-top-right">
|
|
|
- <div>
|
|
|
- <div class="flex-center">
|
|
|
- <span class="app-size-32">{{ data.userName }}</span>
|
|
|
- <app-vip-module class="level-img" v-if="data.isMember == 1" :text="`VIP${data.userAsset.memberLevel}`" />
|
|
|
- </div>
|
|
|
- <div class="app-color-3">{{ data.id }}</div>
|
|
|
- </div>
|
|
|
- <div class="source-wrap">
|
|
|
- <i v-if="data.source == 0" class="iconfont iconweixinlaiyuan"></i>
|
|
|
- <i v-if="data.source == 1" class="iconfont iconzhifubao"></i>
|
|
|
- <i class="iconfont iconweixingongzhonghao" :class="[data.subscribe? 'app-color-4' : '']"></i>
|
|
|
- <i v-if="data.mobile" class="iconfont iconshoujihao1"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="user-bottom">
|
|
|
- <div class="data-list" v-for="(item, index) in fundsData" :key="index">
|
|
|
- <div class="app-size-30 app-bold">{{ item.value }}</div>
|
|
|
- <div class="app-color-3">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 客户按钮 -->
|
|
|
- <div class="module-com tabs-wrap">
|
|
|
- <div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="pageTo(item)">
|
|
|
- <div class="tabs-img">
|
|
|
- <img :src="item.img" alt mode="widthFix" />
|
|
|
- </div>
|
|
|
- <div class="tabs-name">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 备注 -->
|
|
|
- <div class="module-com remark-wrap" v-if="!$util.isEmpty(data.remarkList)">
|
|
|
- <div class="app-blod">备注</div>
|
|
|
- <div class="list-wrap">
|
|
|
- <div class="list-line" v-for="(item, index) in data.remarkList" :key="index">
|
|
|
- <div>{{ item.remark }}</div>
|
|
|
- <div @click="delRemarkFn(item)">
|
|
|
- <i class="iconfont icondelete"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 消费记录 -->
|
|
|
- <div class="module-com remark-wrap" v-if="!$util.isEmpty(data.orderList)">
|
|
|
- <div class="app-blod">消费记录</div>
|
|
|
- <div class="list-wrap">
|
|
|
- <block v-for="(item, index) in data.orderList" :key="index">
|
|
|
- <div class="list-line" v-if="index < 3 || orderMoreStatus">
|
|
|
- <div class="flex-center">
|
|
|
- <div class="time">{{ item.createTime }}</div>
|
|
|
- <div>{{ item.orderName }}</div>
|
|
|
- </div>
|
|
|
- <div class="price">￥{{ item.actPrice }}</div>
|
|
|
- </div>
|
|
|
- </block>
|
|
|
- </div>
|
|
|
- <div class="more-text" v-if="!orderMoreStatus" @click="orderMoreFn">更多 ></div>
|
|
|
- </div>
|
|
|
- <!-- 充值弹窗 -->
|
|
|
- <modal-module :show="rechargeModal" @cancel="modalCancel" @click="rechargeModalClick" :maskClosable="false" title="充值" padding="30rpx 30rpx">
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-label">充值金额</div>
|
|
|
- <div class="line-input">
|
|
|
- <input type="text" v-model="rechargeForm.rechargeAmount" :adjust-position="false" class="inp-input" />
|
|
|
- <div class="inp-prompt">元</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-label">确认密码</div>
|
|
|
- <div class="line-input">
|
|
|
- <input type="text" v-model="rechargeForm.confirmPassword" :adjust-position="false" class="inp-input" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- <!-- 修改密码弹窗 -->
|
|
|
- <modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="重置密码" padding="30rpx 30rpx">
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-label">重置密码</div>
|
|
|
- <div class="line-input">
|
|
|
- <input type="text" v-model="passwordForm.password" :adjust-position="false" class="inp-input" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- <!-- 升级 -->
|
|
|
- <modal-module :show="upgradeModal" @cancel="modalCancel" @click="upgradeModalClick" :maskClosable="false" title="升级" padding="30rpx 30rpx">
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-label">请选择等级</div>
|
|
|
- <div class="line-input">
|
|
|
- <picker mode="selector" :value="upgradeForm.memberLevel" :range="levelData.list" range-key="level" @change="changeLevelFn" class="inp-select">
|
|
|
- <div v-if="upgradeForm.memberLevel">{{ levelSelData.level }}</div>
|
|
|
- <div class="tui-placeholder" v-else>请选择</div>
|
|
|
- </picker>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-label">确认密码</div>
|
|
|
- <div class="line-input">
|
|
|
- <input type="text" v-model="upgradeForm.confirmPassword" class="inp-input" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- <!-- 添加备注 -->
|
|
|
- <modal-module :show="remarkModal" @cancel="modalCancel" @click="remarkModalClick" :maskClosable="false" title="添加备注" padding="30rpx 30rpx">
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <div class="inp-list-line">
|
|
|
- <textarea v-model="remarkForm.remark" placeholder-style="phcolor" placeholder="请填写备注内容，如客户喜好，消费情况等" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- <!-- 删除备注弹窗 -->
|
|
|
- <modal-module :show="promptRemarkModal" @cancel="modalCancel" @click="promptModalClick" :content="promptModalText" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
|
|
|
- </div>
|
|
|
+ <div class="app-content">
|
|
|
+ <!-- 客户信息 -->
|
|
|
+ <div class="module-com user-info">
|
|
|
+ <div class="user-wrap">
|
|
|
+ <app-avatar-module :src="data.avatarUrl" />
|
|
|
+ <div class="user-top-right">
|
|
|
+ <div>
|
|
|
+ <div class="flex-center">
|
|
|
+ <span class="app-size-32">{{ data.userName }}</span>
|
|
|
+ <app-vip-module
|
|
|
+ class="level-img"
|
|
|
+ v-if="data.member >= 0"
|
|
|
+ :text="`VIP${data.userAsset.member}`"
|
|
|
+ :vipImgUrl="`${constant.imgUrl}/retail/interest/vip.png`"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="app-color-3">{{ data.id }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="source-wrap">
|
|
|
+ <i v-if="data.source == 0" class="iconfont iconweixinlaiyuan"></i>
|
|
|
+ <i v-if="data.source == 1" class="iconfont iconzhifubao"></i>
|
|
|
+ <i
|
|
|
+ class="iconfont iconweixingongzhonghao"
|
|
|
+ :class="[data.subscribe? 'app-color-4' : '']"
|
|
|
+ ></i>
|
|
|
+ <i v-if="data.mobile" class="iconfont iconshoujihao1"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="user-bottom">
|
|
|
+ <div class="data-list" v-for="(item, index) in fundsData" :key="index">
|
|
|
+ <div class="app-size-30 app-bold">{{ item.value }}</div>
|
|
|
+ <div class="app-color-3">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 客户按钮 -->
|
|
|
+ <div class="module-com tabs-wrap">
|
|
|
+ <div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="pageTo(item)">
|
|
|
+ <div class="tabs-img">
|
|
|
+ <img :src="item.img" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ <div class="tabs-name">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 备注 -->
|
|
|
+ <div class="module-com remark-wrap" v-if="!$util.isEmpty(data.remarkList)">
|
|
|
+ <div class="app-blod">备注</div>
|
|
|
+ <div class="list-wrap">
|
|
|
+ <div class="list-line" v-for="(item, index) in data.remarkList" :key="index">
|
|
|
+ <div>{{ item.remark }}</div>
|
|
|
+ <div @click="delRemarkFn(item)">
|
|
|
+ <i class="iconfont icondelete"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 消费记录 -->
|
|
|
+ <div class="module-com remark-wrap" v-if="!$util.isEmpty(data.orderList)">
|
|
|
+ <div class="app-blod">消费记录</div>
|
|
|
+ <div class="list-wrap">
|
|
|
+ <block v-for="(item, index) in data.orderList" :key="index">
|
|
|
+ <div class="list-line" v-if="index < 3 || orderMoreStatus">
|
|
|
+ <div class="flex-center">
|
|
|
+ <div class="time">{{ item.createTime }}</div>
|
|
|
+ <div>{{ item.orderName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="price">￥{{ item.actPrice }}</div>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ <div class="more-text" v-if="!orderMoreStatus" @click="orderMoreFn">更多 ></div>
|
|
|
+ </div>
|
|
|
+ <!-- 充值弹窗 -->
|
|
|
+ <modal-module
|
|
|
+ :show="rechargeModal"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="rechargeModalClick"
|
|
|
+ :maskClosable="false"
|
|
|
+ title="充值"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ >
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="app-modal-input-wrap">
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <div class="line-label">充值金额</div>
|
|
|
+ <div class="line-input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="rechargeForm.rechargeAmount"
|
|
|
+ :adjust-position="false"
|
|
|
+ class="inp-input"
|
|
|
+ />
|
|
|
+ <div class="inp-prompt">元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <div class="line-label">确认密码</div>
|
|
|
+ <div class="line-input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="rechargeForm.confirmPassword"
|
|
|
+ :adjust-position="false"
|
|
|
+ class="inp-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ <!-- 修改密码弹窗 -->
|
|
|
+ <modal-module
|
|
|
+ :show="passwordModal"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="passwordModalClick"
|
|
|
+ :maskClosable="false"
|
|
|
+ title="重置密码"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ >
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="app-modal-input-wrap">
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <div class="line-label">重置密码</div>
|
|
|
+ <div class="line-input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="passwordForm.password"
|
|
|
+ :adjust-position="false"
|
|
|
+ class="inp-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ <!-- 升级 -->
|
|
|
+ <modal-module
|
|
|
+ :show="upgradeModal"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="upgradeModalClick"
|
|
|
+ :maskClosable="false"
|
|
|
+ title="升级"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ >
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="app-modal-input-wrap">
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <div class="line-label">请选择等级</div>
|
|
|
+ <div class="line-input">
|
|
|
+ <picker
|
|
|
+ mode="selector"
|
|
|
+ :value="upgradeForm.memberLevel"
|
|
|
+ :range="levelData.list"
|
|
|
+ range-key="level"
|
|
|
+ @change="changeLevelFn"
|
|
|
+ class="inp-select"
|
|
|
+ >
|
|
|
+ <div v-if="upgradeForm.memberLevel">{{ levelSelData.level }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择</div>
|
|
|
+ </picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <div class="line-label">确认密码</div>
|
|
|
+ <div class="line-input">
|
|
|
+ <input type="text" v-model="upgradeForm.confirmPassword" class="inp-input" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ <!-- 添加备注 -->
|
|
|
+ <modal-module
|
|
|
+ :show="remarkModal"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="remarkModalClick"
|
|
|
+ :maskClosable="false"
|
|
|
+ title="添加备注"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ >
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="app-modal-input-wrap">
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <textarea
|
|
|
+ v-model="remarkForm.remark"
|
|
|
+ placeholder-style="phcolor"
|
|
|
+ placeholder="请填写备注内容，如客户喜好，消费情况等"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ <!-- 删除备注弹窗 -->
|
|
|
+ <modal-module
|
|
|
+ :show="promptRemarkModal"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="promptModalClick"
|
|
|
+ :content="promptModalText"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ ></modal-module>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import AppVipModule from '@/components/module/app-vip'
|
|
|
-import AppAvatarModule from '@/components/module/app-avatar'
|
|
|
-import ModalModule from '@/components/plugin/modal'
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import AppVipModule from "@/components/module/app-vip";
|
|
|
+import AppAvatarModule from "@/components/module/app-avatar";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
// api
|
|
|
-import { getLevel } from '@/utils/config'
|
|
|
-import { getUserDet, remarkAdd, remarkDel, upgrade, rechargeB, resetPassword } from '@/api/member'
|
|
|
+import { getLevel } from "@/utils/config";
|
|
|
+import {
|
|
|
+ getUserDet,
|
|
|
+ remarkAdd,
|
|
|
+ remarkDel,
|
|
|
+ upgrade,
|
|
|
+ rechargeB,
|
|
|
+ resetPassword
|
|
|
+} from "@/api/member";
|
|
|
export default {
|
|
|
- name: 'member-detail',
|
|
|
- components: {
|
|
|
- AppVipModule,
|
|
|
- AppAvatarModule,
|
|
|
- ModalModule
|
|
|
- },
|
|
|
- props: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- constant: this.$constant,
|
|
|
- // data
|
|
|
- data: {},
|
|
|
- // modal
|
|
|
- rechargeModal: false,
|
|
|
- passwordModal: false,
|
|
|
- upgradeModal: false,
|
|
|
- remarkModal: false,
|
|
|
- // 用户资金情况
|
|
|
- fundsData: [
|
|
|
- {
|
|
|
- name: '消费次数',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '累计消费(¥)',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '成长值',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '余额',
|
|
|
- value: 0
|
|
|
- }
|
|
|
- ],
|
|
|
- // tab按钮
|
|
|
- tabsData: [
|
|
|
- {
|
|
|
- name: '优惠券',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-1.png`,
|
|
|
- funtion: () => {
|
|
|
- this.$msg('功能开发中...')
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '邀请有礼',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-2.png`,
|
|
|
- funtion: () => {
|
|
|
- this.$msg('功能开发中...')
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '消费登记',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-3.png`,
|
|
|
- funtion: () => {
|
|
|
- this.$msg('功能开发中...')
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '备注',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-4.png`,
|
|
|
- funtion: () => {
|
|
|
- this.remarkModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '充值',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-5.png`,
|
|
|
- funtion: () => {
|
|
|
- this.rechargeModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '重置密码',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-6.png`,
|
|
|
- funtion: () => {
|
|
|
- this.passwordModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '升级',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-7.png`,
|
|
|
- funtion: () => {
|
|
|
- this.upgradeModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '发消息',
|
|
|
- img: `${this.$constant.imgUrl}/retail/member/tab-icon-8.png`,
|
|
|
- url: '/pages/chat/index'
|
|
|
- }
|
|
|
- ],
|
|
|
- // 重置密码
|
|
|
- passwordForm: {
|
|
|
- password: ''
|
|
|
- },
|
|
|
- // 充值
|
|
|
- rechargeForm: {
|
|
|
- rechargeAmount: 0,
|
|
|
- confirmPassword: ''
|
|
|
- },
|
|
|
- // 升级
|
|
|
- levelSelData: {},
|
|
|
- upgradeForm: {
|
|
|
- memberLevel: '',
|
|
|
- confirmPassword: ''
|
|
|
- },
|
|
|
- // 备注
|
|
|
- remarkForm: {
|
|
|
- remark: ''
|
|
|
- },
|
|
|
- remarkOperateData: {},
|
|
|
- // 订单
|
|
|
- orderMoreStatus: false,
|
|
|
- // 确认操作提示
|
|
|
- promptRemarkModal: false,
|
|
|
- promptModalText: '是否要删除该备注？'
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({ levelData: 'getLevel' })
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- // this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this._getUserDet()
|
|
|
- getLevel()
|
|
|
- },
|
|
|
- // api
|
|
|
- _getUserDet() {
|
|
|
- getUserDet({ userId: this.option.id }).then(res => {
|
|
|
- if (this.$util.isEmpty(res.data)) return false
|
|
|
- this.data = res.data
|
|
|
- this.fundsData[0].value = res.data.userAsset.totalBuyNum
|
|
|
- this.fundsData[1].value = res.data.userAsset.totalExpend
|
|
|
- this.fundsData[2].value = res.data.userAsset.growth
|
|
|
- this.fundsData[3].value = res.data.userAsset.balance
|
|
|
- })
|
|
|
- },
|
|
|
- _rechargeB() {
|
|
|
- rechargeB({
|
|
|
- userId: this.data.id,
|
|
|
- ...this.rechargeForm
|
|
|
- }).then(res => {
|
|
|
- this.$msg('充值成功！')
|
|
|
- this.modalCancel()
|
|
|
- })
|
|
|
- },
|
|
|
- _upgrade() {
|
|
|
- upgrade({
|
|
|
- userId: this.data.id,
|
|
|
- ...this.upgradeForm
|
|
|
- }).then(res => {
|
|
|
- this.$msg('升级成功！')
|
|
|
- this.modalCancel()
|
|
|
- })
|
|
|
- },
|
|
|
- _resetPassword() {
|
|
|
- resetPassword({
|
|
|
- userId: this.data.id,
|
|
|
- ...this.passwordForm
|
|
|
- }).then(res => {
|
|
|
- this.$msg('重置成功！')
|
|
|
- this.modalCancel()
|
|
|
- })
|
|
|
- },
|
|
|
- _remarkAdd() {
|
|
|
- remarkAdd({
|
|
|
- userId: this.data.id,
|
|
|
- ...this.remarkForm
|
|
|
- }).then(res => {
|
|
|
- this.$msg('添加成功！')
|
|
|
- this.modalCancel()
|
|
|
- this._getUserDet()
|
|
|
- })
|
|
|
- },
|
|
|
- _delRemark() {
|
|
|
- remarkDel({ id: this.remarkOperateData.id }).then(res => {
|
|
|
- this.$msg('删除成功！')
|
|
|
- this.modalCancel()
|
|
|
- this._getUserDet()
|
|
|
- })
|
|
|
- },
|
|
|
- // operate ===========================
|
|
|
- orderMoreFn() {
|
|
|
- this.orderMoreStatus = false
|
|
|
- },
|
|
|
- delRemarkFn(item) {
|
|
|
- this.remarkOperateData = item
|
|
|
- this.promptModalText = '是否要删除该备注？'
|
|
|
- this.promptRemarkModal = true
|
|
|
- },
|
|
|
- // 弹窗按钮
|
|
|
- changeLevelFn(e) {
|
|
|
- this.levelSelData = this.levelData.list[e.detail.value]
|
|
|
- this.upgradeForm.memberLevel = this.levelSelData.level
|
|
|
- },
|
|
|
- passwordModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
- this.modalCancel()
|
|
|
- this.promptModalText = '确认重置密码？'
|
|
|
- this.promptRemarkModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- upgradeModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
- this.modalCancel()
|
|
|
- this.promptModalText = '确认升级？'
|
|
|
- this.promptRemarkModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- rechargeModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
- this.modalCancel()
|
|
|
- this.promptModalText = '确认充值？'
|
|
|
- this.promptRemarkModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- remarkModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
- this._remarkAdd()
|
|
|
- }
|
|
|
- },
|
|
|
- promptModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
- if (this.promptModalText == '是否要删除该备注？') {
|
|
|
- this._delRemark()
|
|
|
- }
|
|
|
- if (this.promptModalText == '确认升级？') {
|
|
|
- this._upgrade()
|
|
|
- }
|
|
|
- if (this.promptModalText == '确认充值？') {
|
|
|
- this._rechargeB()
|
|
|
- }
|
|
|
- if (this.promptModalText == '确认重置密码？') {
|
|
|
- this._resetPassword()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- modalCancel() {
|
|
|
- this.rechargeModal = false
|
|
|
- this.passwordModal = false
|
|
|
- this.upgradeModal = false
|
|
|
- this.remarkModal = false
|
|
|
- this.promptRemarkModal = false
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ name: "member-detail",
|
|
|
+ components: {
|
|
|
+ AppVipModule,
|
|
|
+ AppAvatarModule,
|
|
|
+ ModalModule
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ // data
|
|
|
+ data: {},
|
|
|
+ // modal
|
|
|
+ rechargeModal: false,
|
|
|
+ passwordModal: false,
|
|
|
+ upgradeModal: false,
|
|
|
+ remarkModal: false,
|
|
|
+ // 用户资金情况
|
|
|
+ fundsData: [
|
|
|
+ {
|
|
|
+ name: "消费次数",
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "累计消费(¥)",
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "成长值",
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "余额",
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // tab按钮
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ name: "优惠券",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-1.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.$msg("功能开发中...");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "邀请有礼",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-2.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.$msg("功能开发中...");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "消费登记",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-3.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.$msg("功能开发中...");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "备注",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-4.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.remarkModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "充值",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-5.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.rechargeModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "重置密码",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-6.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.passwordModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "升级",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-7.png`,
|
|
|
+ funtion: () => {
|
|
|
+ this.upgradeModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "发消息",
|
|
|
+ img: `${this.$constant.imgUrl}/retail/member/tab-icon-8.png`,
|
|
|
+ url: "/pages/chat/index"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 重置密码
|
|
|
+ passwordForm: {
|
|
|
+ password: ""
|
|
|
+ },
|
|
|
+ // 充值
|
|
|
+ rechargeForm: {
|
|
|
+ rechargeAmount: 0,
|
|
|
+ confirmPassword: ""
|
|
|
+ },
|
|
|
+ // 升级
|
|
|
+ levelSelData: {},
|
|
|
+ upgradeForm: {
|
|
|
+ memberLevel: "",
|
|
|
+ confirmPassword: ""
|
|
|
+ },
|
|
|
+ // 备注
|
|
|
+ remarkForm: {
|
|
|
+ remark: ""
|
|
|
+ },
|
|
|
+ remarkOperateData: {},
|
|
|
+ // 订单
|
|
|
+ orderMoreStatus: false,
|
|
|
+ // 确认操作提示
|
|
|
+ promptRemarkModal: false,
|
|
|
+ promptModalText: "是否要删除该备注？"
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ levelData: "getLevel" })
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this._getUserDet();
|
|
|
+ getLevel();
|
|
|
+ },
|
|
|
+ // api
|
|
|
+ _getUserDet() {
|
|
|
+ getUserDet({ userId: this.option.id }).then(res => {
|
|
|
+ if (this.$util.isEmpty(res.data)) return false;
|
|
|
+ this.data = res.data;
|
|
|
+ this.fundsData[0].value = res.data.userAsset.totalBuyNum;
|
|
|
+ this.fundsData[1].value = res.data.userAsset.totalExpend;
|
|
|
+ this.fundsData[2].value = res.data.userAsset.growth;
|
|
|
+ this.fundsData[3].value = res.data.userAsset.balance;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _rechargeB() {
|
|
|
+ rechargeB({
|
|
|
+ userId: this.data.id,
|
|
|
+ ...this.rechargeForm
|
|
|
+ }).then(res => {
|
|
|
+ this.$msg("充值成功！");
|
|
|
+ this.modalCancel();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _upgrade() {
|
|
|
+ upgrade({
|
|
|
+ userId: this.data.id,
|
|
|
+ ...this.upgradeForm
|
|
|
+ }).then(res => {
|
|
|
+ this.$msg("升级成功！");
|
|
|
+ this.modalCancel();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _resetPassword() {
|
|
|
+ resetPassword({
|
|
|
+ userId: this.data.id,
|
|
|
+ ...this.passwordForm
|
|
|
+ }).then(res => {
|
|
|
+ this.$msg("重置成功！");
|
|
|
+ this.modalCancel();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _remarkAdd() {
|
|
|
+ remarkAdd({
|
|
|
+ userId: this.data.id,
|
|
|
+ ...this.remarkForm
|
|
|
+ }).then(res => {
|
|
|
+ this.$msg("添加成功！");
|
|
|
+ this.modalCancel();
|
|
|
+ this._getUserDet();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _delRemark() {
|
|
|
+ remarkDel({ id: this.remarkOperateData.id }).then(res => {
|
|
|
+ this.$msg("删除成功！");
|
|
|
+ this.modalCancel();
|
|
|
+ this._getUserDet();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // operate ===========================
|
|
|
+ orderMoreFn() {
|
|
|
+ this.orderMoreStatus = false;
|
|
|
+ },
|
|
|
+ delRemarkFn(item) {
|
|
|
+ this.remarkOperateData = item;
|
|
|
+ this.promptModalText = "是否要删除该备注？";
|
|
|
+ this.promptRemarkModal = true;
|
|
|
+ },
|
|
|
+ // 弹窗按钮
|
|
|
+ changeLevelFn(e) {
|
|
|
+ this.levelSelData = this.levelData.list[e.detail.value];
|
|
|
+ this.upgradeForm.memberLevel = this.levelSelData.level;
|
|
|
+ },
|
|
|
+ passwordModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ this.modalCancel();
|
|
|
+ this.promptModalText = "确认重置密码？";
|
|
|
+ this.promptRemarkModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ upgradeModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ this.modalCancel();
|
|
|
+ this.promptModalText = "确认升级？";
|
|
|
+ this.promptRemarkModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rechargeModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ this.modalCancel();
|
|
|
+ this.promptModalText = "确认充值？";
|
|
|
+ this.promptRemarkModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ remarkModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ this._remarkAdd();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ promptModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ if (this.promptModalText == "是否要删除该备注？") {
|
|
|
+ this._delRemark();
|
|
|
+ }
|
|
|
+ if (this.promptModalText == "确认升级？") {
|
|
|
+ this._upgrade();
|
|
|
+ }
|
|
|
+ if (this.promptModalText == "确认充值？") {
|
|
|
+ this._rechargeB();
|
|
|
+ }
|
|
|
+ if (this.promptModalText == "确认重置密码？") {
|
|
|
+ this._resetPassword();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.rechargeModal = false;
|
|
|
+ this.passwordModal = false;
|
|
|
+ this.upgradeModal = false;
|
|
|
+ this.remarkModal = false;
|
|
|
+ this.promptRemarkModal = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
- .app-content {
|
|
|
- background-image: url('../../static/images/member/bg.png');
|
|
|
- background-size: 100% 330px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding-top: 30px;
|
|
|
- padding-bottom: 30px;
|
|
|
- }
|
|
|
- // 公共
|
|
|
- .module-com {
|
|
|
- margin: 0 30px 20px;
|
|
|
- padding: 20px;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0px 6px 16px #ddd;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- // 用户信息
|
|
|
- .user-info {
|
|
|
- padding: 40px 30px 50px;
|
|
|
- .user-wrap {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- margin-bottom: 60px;
|
|
|
- .user-top-right {
|
|
|
- @include disFlex(flex-start, space-between);
|
|
|
- width: calc(100% - 120px);
|
|
|
- .flex-center {
|
|
|
- margin-bottom: 14px;
|
|
|
- .level-img {
|
|
|
- margin-left: 10px;
|
|
|
- width: 80px;
|
|
|
- /deep/.vip-text {
|
|
|
- top: -2px;
|
|
|
- left: 26px;
|
|
|
- font-weight: 400;
|
|
|
- transform: scale(0.7);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .source-wrap {
|
|
|
- .iconfont {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .iconweixinlaiyuan {
|
|
|
- color: #35b801;
|
|
|
- }
|
|
|
- .iconzhifubao {
|
|
|
- color: #00aaed;
|
|
|
- }
|
|
|
- .iconshoujihao1 {
|
|
|
- color: #fc2e47;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .user-bottom {
|
|
|
- width: 100%;
|
|
|
- @include disFlex(center, space-between);
|
|
|
- .data-list {
|
|
|
- text-align: center;
|
|
|
- .app-size-30 {
|
|
|
- margin-bottom: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // tabs
|
|
|
- .tabs-wrap {
|
|
|
- padding: 40px 10px;
|
|
|
- @include disFlex(center, center);
|
|
|
- flex-wrap: wrap;
|
|
|
- .tabs-list {
|
|
|
- width: 25%;
|
|
|
- margin-bottom: 50px;
|
|
|
- text-align: center;
|
|
|
- .tabs-img {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- margin: 0 auto 14px;
|
|
|
- img {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .tabs-name {
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- &:nth-child(n + 5) {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 备注
|
|
|
- .remark-wrap {
|
|
|
- .list-wrap {
|
|
|
- margin-top: 24px;
|
|
|
- .list-line {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- margin-top: 10px;
|
|
|
- padding: 16px 20px;
|
|
|
- background-color: #f7f7f8;
|
|
|
- color: $fontColor2;
|
|
|
- border-radius: 4px;
|
|
|
- .iconfont {
|
|
|
- color: $fontColor3;
|
|
|
- }
|
|
|
- .time {
|
|
|
- margin-right: 70px;
|
|
|
- }
|
|
|
- .price {
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .more-text {
|
|
|
- margin-top: 24px;
|
|
|
- text-align: center;
|
|
|
- color: $fontColor3;
|
|
|
- }
|
|
|
- }
|
|
|
+.app-content {
|
|
|
+ background-image: url("../../static/images/member/bg.png");
|
|
|
+ background-size: 100% 330px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+}
|
|
|
+// 公共
|
|
|
+.module-com {
|
|
|
+ margin: 0 30px 20px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 6px 16px #ddd;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+// 用户信息
|
|
|
+.user-info {
|
|
|
+ padding: 40px 30px 50px;
|
|
|
+ .user-wrap {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .user-top-right {
|
|
|
+ @include disFlex(flex-start, space-between);
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ .flex-center {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ .level-img {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 80px;
|
|
|
+ /deep/.vip-text {
|
|
|
+ top: -2px;
|
|
|
+ left: 26px;
|
|
|
+ font-weight: 400;
|
|
|
+ transform: scale(0.7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .source-wrap {
|
|
|
+ .iconfont {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .iconweixinlaiyuan {
|
|
|
+ color: #35b801;
|
|
|
+ }
|
|
|
+ .iconzhifubao {
|
|
|
+ color: #00aaed;
|
|
|
+ }
|
|
|
+ .iconshoujihao1 {
|
|
|
+ color: #fc2e47;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-bottom {
|
|
|
+ width: 100%;
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ .data-list {
|
|
|
+ text-align: center;
|
|
|
+ .app-size-30 {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// tabs
|
|
|
+.tabs-wrap {
|
|
|
+ padding: 40px 10px;
|
|
|
+ @include disFlex(center, center);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .tabs-list {
|
|
|
+ width: 25%;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ text-align: center;
|
|
|
+ .tabs-img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin: 0 auto 14px;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-name {
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ &:nth-child(n + 5) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 备注
|
|
|
+.remark-wrap {
|
|
|
+ .list-wrap {
|
|
|
+ margin-top: 24px;
|
|
|
+ .list-line {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ background-color: #f7f7f8;
|
|
|
+ color: $fontColor2;
|
|
|
+ border-radius: 4px;
|
|
|
+ .iconfont {
|
|
|
+ color: $fontColor3;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ margin-right: 70px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .more-text {
|
|
|
+ margin-top: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: $fontColor3;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
shish