|
|
@@ -1,308 +1,21 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
+ <view class="app-content">
|
|
|
+ <view class="app-round_bg"></view>
|
|
|
<!-- 客户信息 -->
|
|
|
- <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>
|
|
|
-
|
|
|
- <template v-if="data.member > 0">
|
|
|
- <app-vip-module
|
|
|
- class="level-img"
|
|
|
- :vipImg="`${constant.imgUrl}/retail/member/grade/${data.member}.png`"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <template v-if="data.mobile == ''">
|
|
|
- <app-vip-module
|
|
|
- class="level-img"
|
|
|
- :vipImg="`${constant.imgUrl}/retail/member/grade/customer.png`"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <app-vip-module
|
|
|
- class="level-img"
|
|
|
- :vipImg="`${constant.imgUrl}/retail/member/grade/member.png`"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="app-color-3">{{ data.id }}</div>
|
|
|
- </div>
|
|
|
- <div class="source-wrap">
|
|
|
- <i
|
|
|
- v-if="data.sourceType == 0"
|
|
|
- :class="[data.sourceType == 0? 'iconweixinlaiyuanColor' : '']"
|
|
|
- class="iconfont iconweixinlaiyuan"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- v-else-if="data.sourceType == 1"
|
|
|
- :class="[data.sourceType == 1? 'zhifubaoColor' : '']"
|
|
|
- class="iconfont iconzhifubao"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- v-else-if="data.sourceType == 2"
|
|
|
- :class="[data.sourceType == 2? 'app-color-4' : '']"
|
|
|
- class="iconfont iconxiaochengxu1"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- v-else-if="data.sourceType == 3"
|
|
|
- :class="[data.sourceType == 3? 'app-color-4' : '']"
|
|
|
- class="iconfont iconzhangshangcaifuyemianshoujiban344"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- v-else-if="data.sourceType == 4"
|
|
|
- :class="[data.sourceType == 4? 'app-color-4' : '']"
|
|
|
- class="iconfont iconwaimai"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- v-if="data.sourceType != 1"
|
|
|
- class="iconfont iconweixingongzhonghao"
|
|
|
- :class="[data.subscribe==1? 'app-color-4' : '']"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- @click="data.mobile&&callUp(data.mobile)"
|
|
|
- :class="['iconfont', 'iconshoujihao1',data.mobile?'mobileColor':'']"
|
|
|
- style="font-size:42rpx;"
|
|
|
- ></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 remark-wrap">
|
|
|
- <div class="app-blod"><span>标签</span><i class="iconfont icontianjiakehu" @click="setUserTag" style="float:right;font-size:40rpx;"></i></div>
|
|
|
- <div class="list-wrap">
|
|
|
-
|
|
|
- <span class="user_tag">常买散花</span>
|
|
|
- <span class="user_tag">企业客户</span>
|
|
|
- <span class="user_tag">生日送过</span>
|
|
|
-
|
|
|
- </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="userTagModal"
|
|
|
- @cancel="modalCancel"
|
|
|
- @click="userTagModalClick"
|
|
|
- :maskClosable="false"
|
|
|
- title="客户标签"
|
|
|
- padding="30rpx 30rpx"
|
|
|
- >
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <view style="padding:0 8px 10px 8px;">
|
|
|
- <span class="user_tag">恋人</span>
|
|
|
- <span class="user_tag">学生</span>
|
|
|
- <span class="user_tag">准婚</span>
|
|
|
- <span class="user_tag">同行</span>
|
|
|
- <span class="user_tag">常买散花</span>
|
|
|
- <span class="user_tag">企业客户</span>
|
|
|
- <span class="user_tag">生日送过</span>
|
|
|
- <span class="user_tag">酒店</span>
|
|
|
- <span class="user_tag">影楼</span>
|
|
|
- <span class="user_tag">开花艺课</span>
|
|
|
- <span class="user_tag">学员</span>
|
|
|
- </view>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
-
|
|
|
- <!-- 充值弹窗 -->
|
|
|
- <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"
|
|
|
- placeholder="请输入金额（元）"
|
|
|
- v-model="rechargeForm.rechargeAmount"
|
|
|
- :adjust-position="false"
|
|
|
- class="inp-input"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-label">确认密码</div>
|
|
|
- <div class="line-input">
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- 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="password"
|
|
|
- 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.member"
|
|
|
- :range="levelData.list"
|
|
|
- range-key="level"
|
|
|
- @change="changeLevelFn"
|
|
|
- class="inp-select"
|
|
|
- >
|
|
|
- <div v-if="upgradeForm.member">{{ 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>
|
|
|
+ <view class="module-com user-info">
|
|
|
+ <view>21212</view>
|
|
|
+ <view class="212">
|
|
|
+ 2121212
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import AppVipModule from "@/components/module/app-vip";
|
|
|
+// 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,
|
|
|
@@ -314,130 +27,18 @@ import {
|
|
|
export default {
|
|
|
name: "member-detail",
|
|
|
components: {
|
|
|
- AppVipModule,
|
|
|
+ // AppVipModule,
|
|
|
AppAvatarModule,
|
|
|
ModalModule
|
|
|
},
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- constant: this.$constant,
|
|
|
- // data
|
|
|
data: {},
|
|
|
- // modal
|
|
|
- rechargeModal: false,
|
|
|
- userTagModal: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'
|
|
|
- funtion: () => {
|
|
|
- this.$msg("即将开通...");
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- // 重置密码
|
|
|
- passwordForm: {
|
|
|
- password: ""
|
|
|
- },
|
|
|
- // 充值
|
|
|
- rechargeForm: {
|
|
|
- rechargeAmount: "",
|
|
|
- confirmPassword: ""
|
|
|
- },
|
|
|
- // 升级
|
|
|
- levelSelData: {},
|
|
|
- upgradeForm: {
|
|
|
- member: "",
|
|
|
- confirmPassword: ""
|
|
|
- },
|
|
|
- // 备注
|
|
|
- remarkForm: {
|
|
|
- remark: ""
|
|
|
- },
|
|
|
- remarkOperateData: {},
|
|
|
- // 订单
|
|
|
- orderMoreStatus: false,
|
|
|
- // 确认操作提示
|
|
|
- promptRemarkModal: false,
|
|
|
- promptModalText: "是否要删除该备注？"
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters({ levelData: "getLevel" })
|
|
|
+ // ...mapGetters({ levelData: "getLevel" })
|
|
|
},
|
|
|
onLoad() {},
|
|
|
methods: {
|
|
|
@@ -446,16 +47,12 @@ export default {
|
|
|
phoneNumber: phone //仅为示例
|
|
|
});
|
|
|
},
|
|
|
- //设置客户标签
|
|
|
- setUserTag(){
|
|
|
- this.userTagModal = true;
|
|
|
- },
|
|
|
init() {
|
|
|
this._getUserDet();
|
|
|
- getLevel();
|
|
|
+ // getLevel();
|
|
|
},
|
|
|
_getUserDet() {
|
|
|
- getUserDet({ userId: this.option.id }).then(res => {
|
|
|
+ getUserDet({ shopId: this.option.shopId }).then(res => {
|
|
|
if (this.$util.isEmpty(res.data)) {
|
|
|
return false;
|
|
|
}
|
|
|
@@ -466,131 +63,11 @@ export default {
|
|
|
this.fundsData[3].value = res.data.userAsset.totalExpend;
|
|
|
});
|
|
|
},
|
|
|
- _rechargeB() {
|
|
|
- rechargeB({
|
|
|
- userId: this.data.id,
|
|
|
- ...this.rechargeForm
|
|
|
- }).then(res => {
|
|
|
- this._getUserDet();
|
|
|
- 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.member = 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;
|
|
|
- }
|
|
|
- },
|
|
|
- userTagModalClick(e){
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel();
|
|
|
- } else {
|
|
|
- this.modalCancel();
|
|
|
- }
|
|
|
- },
|
|
|
- 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.userTagModal = false;
|
|
|
- this.passwordModal = false;
|
|
|
- this.upgradeModal = false;
|
|
|
- this.remarkModal = false;
|
|
|
- this.promptRemarkModal = false;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -598,11 +75,6 @@ export default {
|
|
|
|
|
|
<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 {
|
|
|
@@ -611,119 +83,13 @@ export default {
|
|
|
background-color: #fff;
|
|
|
box-shadow: 0px 6px 16px #ddd;
|
|
|
border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
// 用户信息
|
|
|
.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 {
|
|
|
- left: 70px;
|
|
|
- top: 3px;
|
|
|
- // top: -2px;
|
|
|
- // left: 26px;
|
|
|
- // font-weight: 400;
|
|
|
- // transform: scale(0.7);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .source-wrap {
|
|
|
- .iconfont {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .iconweixinlaiyuan.iconweixinlaiyuanColor {
|
|
|
- color: #35b801;
|
|
|
- }
|
|
|
- .iconzhifubao.zhifubaoColor {
|
|
|
- color: #00aaed;
|
|
|
- }
|
|
|
- .iconshoujihao1.mobileColor {
|
|
|
- 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;
|
|
|
- }
|
|
|
-}
|
|
|
-.user_tag{
|
|
|
- border:1px solid #CCCCCC;
|
|
|
- padding:5px 12px 5px 12px;
|
|
|
- border-radius:25px;
|
|
|
- color:#BBBBBB;
|
|
|
- margin-right:10px;
|
|
|
- margin-bottom:12px;
|
|
|
- display:inline-block;
|
|
|
- font-size:30rpx;
|
|
|
+ position: relative;
|
|
|
+ top: 51px;
|
|
|
}
|
|
|
</style>
|
zhengxin