mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
417 lines
12 KiB
Vue
417 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
<!-- <tabs></tabs> -->
|
||
<div class="rc-top"></div>
|
||
<tabs :crumbs="crumbs"></tabs>
|
||
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
|
||
<div class="rc-column">
|
||
<!-- <div class="rc-title">
|
||
<img src="../../assets/image/rc-cat.png" alt="" />
|
||
<span>{{ userorder }}</span>
|
||
</div> -->
|
||
<div class="rc-max-width--xl">
|
||
<div class="rc-center"><img :src="userimage" /></div>
|
||
</div>
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="rc-login">
|
||
<div class="rc-unlogin">
|
||
<div class="rc-people" @click="opendialog()"><img src="../../assets/image/rc-people.png" alt="" /></div>
|
||
<div class="rc-userlogin">
|
||
<div v-if="!islogin">
|
||
<span>{{ usertitle }}</span>
|
||
<em>{{ userorder }}</em>
|
||
</div>
|
||
<nuxt-link :to="`/userlogin/login/`"><span v-if="islogin">登录/注册</span></nuxt-link>
|
||
</div>
|
||
</div>
|
||
<div class="rc-islogin">
|
||
<nuxt-link :to="`/personal/usermember/`" class="ts-right-arr"><span>会员权益</span></nuxt-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="online bold"></div>
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="usercord">
|
||
<em>当前积分:{{ rcrcord || 0 }}</em>
|
||
<span class="ts-right-arr" @click="userinter">积分明细</span>
|
||
</div>
|
||
|
||
<div class="rc-cordd">
|
||
<span>距离升级还差:</span>
|
||
<span class="lackOfPoint">{{ rcvalue }}</span>
|
||
<div class="block">
|
||
<div class="ts-point-tag rc-md-up">0</div>
|
||
<div class="r-block" ref="userblock"></div>
|
||
<!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
|
||
</div>
|
||
<div class="rc-value">
|
||
<span>0</span>
|
||
<span>5000</span>
|
||
<span>10000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="online bold"></div>
|
||
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="rc-order">
|
||
<em>我的订单</em>
|
||
|
||
<span class="ts-right-arr" @click="findall">查看全部</span>
|
||
</div>
|
||
<div class="rc-obligation rc-max-width--lg">
|
||
<ul>
|
||
<li v-for="(item, index) in prefecture" :key="index" @click="obligation(item, index)">
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="online bold"></div>
|
||
|
||
<div class="rc-max-width--xl ts-special-padding">
|
||
<div class="rc-usermain">
|
||
<h2>服务工具</h2>
|
||
<div class="rc-buymain rc-max-width--lg ts-special-padding">
|
||
<div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(item, index)">
|
||
<div class="rc-cord">
|
||
<img :src="item.buyimage" alt="" />
|
||
<em>{{ item.title }}</em>
|
||
</div>
|
||
<div class="rc-load">
|
||
<span>{{ item.usertitle }}</span>
|
||
<img src="../../assets/image/rc-left.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="online bold"></div>
|
||
<div class="ts-btn" v-if="!islogin"><div class="ts-standard-btn center" @click="logout">退出登录</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="dialogInfo1" hegight="700px" :before-close="handleClose" @open="open">
|
||
<div class="rc-full-width rc-max-width--xl rc-text--center">
|
||
<div class="rc-title rc-text--center rc-margin-bottom--md"><img src="../../assets/error.png" alt="" /></div>
|
||
<div class="rc-logmain">
|
||
<h3>温馨提示</h3>
|
||
<span>{{ usermessage }}</span>
|
||
</div>
|
||
|
||
<div class="userer">
|
||
<img src="/images/qrcode-aichong.jpg" alt="" class="rc-margin-y--xs" />
|
||
<span>微信扫一扫，识别二维码</span>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<FixRight></FixRight>
|
||
<MyFooter></MyFooter>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from '~/components/header.vue';
|
||
import MyFooter from '~/components/rc-footer.vue';
|
||
import FixRight from '~/components/fixed-right.vue';
|
||
import tabs from '@/components/tabs.vue';
|
||
import { mapMutations, mapState } from 'vuex';
|
||
export default {
|
||
middleware: 'metaTitle',
|
||
// middleware: 'metaTitle',
|
||
meta: { title: '个人中心' },
|
||
data() {
|
||
return {
|
||
crumbs: [
|
||
{
|
||
path: '/personal/mypersonal'
|
||
}
|
||
],
|
||
userlog: false,
|
||
islogin: false,
|
||
dialogInfo1: false,
|
||
userid: null,
|
||
usertitle: '',
|
||
rcvalue: 5000,
|
||
usermessage: '关注皇家爱宠荟，修改个人资料',
|
||
userimage: require('../../assets/image/rc-new.png'),
|
||
userlogin: '登录注册',
|
||
userorder: '新手铲屎官',
|
||
prefecture: [
|
||
{
|
||
title: '待付款',
|
||
ordernum: '2',
|
||
catimage: require('../../assets/image/rc-obligation.png')
|
||
},
|
||
{
|
||
title: '待发货',
|
||
ordernum: '2',
|
||
catimage: require('../../assets/image/rc-pending.png')
|
||
},
|
||
{
|
||
title: '待收货',
|
||
ordernum: '2',
|
||
catimage: require('../../assets/image/rc-wait.png')
|
||
}
|
||
],
|
||
|
||
personallist: [
|
||
{
|
||
title: '积分商城',
|
||
ordernum: '0',
|
||
buyimage: require('../../assets/image/rc-integral.png'),
|
||
usertitle: '点击进入爱宠荟'
|
||
},
|
||
{
|
||
title: '优惠券',
|
||
ordernum: '1',
|
||
buyimage: require('../../assets/image/rc-discount.png'),
|
||
usertitle: '查看详情'
|
||
},
|
||
{
|
||
title: '收货地址',
|
||
ordernum: '2',
|
||
buyimage: require('../../assets/image/rc-address.png'),
|
||
usertitle: '查看详情'
|
||
}
|
||
],
|
||
rcrcord: '',
|
||
value: [4, 8]
|
||
};
|
||
},
|
||
components: {
|
||
Myheader,
|
||
MyFooter,
|
||
tabs,
|
||
FixRight
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
userInfo : state => state.user.userInfo,
|
||
loginState : state => state.login.loginState,
|
||
})
|
||
},
|
||
watch:{
|
||
userInfo(newVal){
|
||
// console.log('22222userInfo=',newVal)
|
||
// console.log('this.loginState=',this.loginState)
|
||
this.islogin = !this.loginState;
|
||
if(newVal && this.loginState){
|
||
this.loginState && this.setUserInfoData(newVal);
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations(['logoutSystem', 'checkIsLogin']),
|
||
logout() {
|
||
this.$store.dispatch('logout',this);
|
||
this.logoutSystem();
|
||
this.$router.push({
|
||
path: '/'
|
||
});
|
||
},
|
||
userinter() {
|
||
let user = this.$store.state.userInfo;
|
||
if (!user) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return;
|
||
} else {
|
||
this.$router.push({
|
||
path: '/personal/integral/',
|
||
query: {
|
||
stype: 1
|
||
}
|
||
});
|
||
}
|
||
},
|
||
findall() {
|
||
let user = this.userInfo;
|
||
if ( user && this.loginState) {
|
||
this.$router.push({
|
||
path: '/personal/useraddress/',
|
||
query: {
|
||
stype: 0
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return;
|
||
}
|
||
},
|
||
//地址的跳转
|
||
obligation(item, index) {
|
||
let user = this.userInfo;
|
||
// console.log(!user , !this.loginState,'22222');
|
||
// return false;
|
||
if (!user && !this.loginState) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return;
|
||
} else {
|
||
if (item.title == '待付款') {
|
||
this.$router.push({
|
||
path: '/personal/useraddress',
|
||
query: {
|
||
stype: 1
|
||
}
|
||
});
|
||
} else if (item.title == '待发货') {
|
||
this.$router.push({
|
||
path: '/personal/useraddress',
|
||
query: {
|
||
stype: 2
|
||
}
|
||
});
|
||
} else if (item.title == '待收货') {
|
||
this.$router.push({
|
||
path: '/personal/useraddress',
|
||
query: {
|
||
stype: 3
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
handleClose() {
|
||
this.dialogInfo1 = false;
|
||
console.log(this.dialogInfo1);
|
||
},
|
||
open() {},
|
||
ifadroind() {
|
||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||
var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
|
||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os';
|
||
var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
|
||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
|
||
var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb';
|
||
var bIsAndroid = sUserAgent.match(/android/i) == 'android';
|
||
var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
|
||
var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
|
||
|
||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||
if (this.userlog == true) {
|
||
(this.usermessage = '关注皇家爱宠荟，修改个人资料'), (this.dialogInfo1 = true);
|
||
} else {
|
||
this.dialogInfo1 = false;
|
||
this.usermessage = '关注皇家爱宠荟，兑换更多福利';
|
||
}
|
||
return false;
|
||
} else {
|
||
this.dialogInfo1 = false;
|
||
return true;
|
||
}
|
||
},
|
||
openaddress(item, index) {
|
||
let user = this.userInfo;
|
||
if (user == undefined || user == null || user == '') {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '您还未登录'
|
||
});
|
||
return;
|
||
} else {
|
||
if (item.title == '收货地址') {
|
||
this.$router.push({
|
||
path: `/useraddress/openaddress/`
|
||
});
|
||
}
|
||
if (index == 0) {
|
||
this.userlog = true;
|
||
_hmt.push([
|
||
'_trackCustomEvent',
|
||
'jump_to_crmMiniApp',
|
||
{
|
||
type: '积分商城'
|
||
}
|
||
]);
|
||
let isMobile = this.ifadroind();
|
||
if (isMobile) window.location.href = 'weixin://dl/business/?t=BE1OA2AngRs';
|
||
}
|
||
if (index == 1) {
|
||
this.$router.push({
|
||
path: `/personal/discount/`
|
||
});
|
||
}
|
||
}
|
||
},
|
||
opendialog() {
|
||
this.ifadroind();
|
||
},
|
||
/* 初始化设置用户信息 */
|
||
setUserInfoData(userInfo){
|
||
// console.log(this.loginState,userInfo,'2222');
|
||
let userwidth = 0;
|
||
this.userid = userInfo;
|
||
this.islogin = false;
|
||
this.usertitle = this.userid.memberName;
|
||
this.rcrcord = this.userid.availiblePoint;
|
||
if (this.userid.memberLevel == 1) {
|
||
let userlength = this.userid.availiblePoint.toString().length;
|
||
this.userimage = require('../../assets/image/rc-new.png');
|
||
this.userorder = '新手铲屎官';
|
||
this.uservalue = 5000; //新手总积分
|
||
this.rcvalue = this.uservalue - this.userid.availiblePoint; //新手总积分减去本身的积分
|
||
if (userlength == 1 || userlength == 2 || userlength == 3 || userlength == 4) {
|
||
userwidth = this.userid.availiblePoint / 100;
|
||
console.log(userwidth);
|
||
}
|
||
} else if (this.userid.memberLevel == 2) {
|
||
this.userimage = require('../../assets/image/rc-new2.png');
|
||
this.userorder = '资深铲屎官';
|
||
this.uservalue = 10000;
|
||
this.rcvalue = this.uservalue - this.userid.availiblePoint;
|
||
userwidth = this.userid.availiblePoint / 100;
|
||
} else if (this.userid.memberLevel == 3) {
|
||
this.userimage = require('../../assets/image/rc-new1.png');
|
||
this.userorder = '金牌铲屎官';
|
||
this.usrnewlist = this.goldmedal;
|
||
userwidth = 100;
|
||
}
|
||
this.$refs.userblock.style.width = userwidth + '%';
|
||
let tagEle = document.querySelector('.ts-point-tag');
|
||
if (tagEle) {
|
||
tagEle.innerText = this.userid.availiblePoint;
|
||
let tagEleLeft = userwidth - 1;
|
||
if (tagEleLeft <= 0) tagEleLeft = 0;
|
||
tagEle.style.left = tagEleLeft + '%';
|
||
}
|
||
if (this.userid == undefined || this.userid == '' || this.userid == null) {
|
||
this.islogin = true;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.checkIsLogin();
|
||
this.$store.dispatch('checkLoginState',this);
|
||
this.ifadroind();
|
||
let user = this.userInfo;
|
||
this.islogin = !this.loginState;
|
||
if (user && this.loginState) {
|
||
this.setUserInfoData(user);
|
||
} else {
|
||
this.userid = '';
|
||
}
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import url('@/assets/css/global.less');
|
||
@import url('@/assets/css/mypersonal.less');
|
||
</style>
|
||
|