475 lines
17 KiB
Vue
475 lines
17 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 头部 -->
|
||
<view class="userHead" v-if="isUser">
|
||
<navigator hover-class="none" class="userHead-img" url="/pages/setUpForm/form_submit?type=avatar">
|
||
<image :src="userInfo.avatar" mode="aspectFill"></image>
|
||
<view class="userHead-edit">
|
||
<text>编辑头像</text>
|
||
</view>
|
||
</navigator>
|
||
|
||
<view class="userHead-text">
|
||
<view class="userHead-name" v-if="userInfo.identity">
|
||
<view class="userHead-nickn">
|
||
{{userInfo.nickname}}
|
||
</view>
|
||
<view class="userHead-tips default" v-if="userInfo.identity.identity_id == 0">
|
||
{{ userInfo.identity.name }}
|
||
</view>
|
||
<view class="userHead-tips super" v-else-if="userInfo.identity.identity_id == 1">
|
||
<image src="/static/img/user_identity_00.png"></image><text>{{ userInfo.identity.name }}</text>
|
||
</view>
|
||
<view class="userHead-tips sage" v-else>
|
||
<image src="/static/img/user_identity_01.png"></image><text>{{ userInfo.identity.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="userHead-tel">
|
||
{{userInfo.username}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="userHead" @click="userLogin" v-else>
|
||
<image class="userHead-img no-userHead" src="https://card.ysd-bs.com/storage/materials/2021/09/01/default_cover.png" mode="aspectFill"></image>
|
||
<view class="userHead-text">
|
||
<view class="userHead-login">
|
||
去登录
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的会员卡 -->
|
||
<view class="userCard">
|
||
<view class="userCard-title">我的会员卡</view>
|
||
<view class="userCard-cont">
|
||
<view class="userCard-clip">
|
||
<swiper class="userCard-swiper" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration" :current="swiper.current">
|
||
<swiper-item class="userCard-item" @click="swiperNav" :data-type="('silver')">
|
||
<image class="userCard-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_00.png" mode="scaleToFill"></image>
|
||
<view class="userCard-parice" style="color: #676869" v-if="isUser"><text>可用余额：</text>{{ userInfo.account.silver }}</view>
|
||
</swiper-item>
|
||
<swiper-item class="userCard-item" @click="swiperNav" :data-type="('drill')">
|
||
<image class="userCard-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_02.png" mode="scaleToFill"></image>
|
||
<view class="userCard-parice" style="color: #192b4c" v-if="isUser"><text>可用余额：</text>{{ userInfo.account.drill }}</view>
|
||
</swiper-item>
|
||
<swiper-item class="userCard-item" @click="swiperNav" :data-type="('balance')" v-if="userInfo.identity.identity_id != 0">
|
||
<image class="userCard-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_01.png" mode="scaleToFill"></image>
|
||
<view class="userCard-parice" style="color: #ff8f00" v-if="isUser"><text>可用余额：</text>{{ userInfo.account.balance }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<image src="/static/icon/arrow_left.png" class="userCard-arrow-left" @click="rightSee('nextImg')"></image>
|
||
<image src="/static/icon/arrow_right.png" class="userCard-arrow-right" @click="rightSee('prevImg')"></image>
|
||
</view>
|
||
<view class="userCard-tips">
|
||
滑动切换，查看更多权益
|
||
<image src="/static/icon/arrow_tips.png"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的服务 -->
|
||
<view class="userCard">
|
||
<view class="userCard-title">我的服务</view>
|
||
<view class="userOrder">
|
||
<view class="userOrder-label" @click="userNav('/pages/coupon/coupon')">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userCoupon.png"></image>
|
||
</view>
|
||
<text>我的卡券</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/packet/packet')">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userOrder_06.png"></image>
|
||
</view>
|
||
<text>红包领取</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/site/index')">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userSite.png"></image>
|
||
</view>
|
||
<text>收货地址</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/activate/activate')">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userOrder_05.png"></image>
|
||
</view>
|
||
<text>实体卡激活</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的订单 -->
|
||
<view class="userCard">
|
||
<view class="userCard-title">兑换订单</view>
|
||
<view class="userOrder userOrder-label-new">
|
||
<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=welfareGoods')">
|
||
<view class="userOrder-icon">
|
||
<image src="/static/img/userOrder_00.png"></image>
|
||
</view>
|
||
<text>福利券订单</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=welfare')">
|
||
<view class="userOrder-icon">
|
||
<image src="/static/img/userOrder_01.png"></image>
|
||
</view>
|
||
<text>福利商品订单</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=rightsCoupons')">
|
||
<view class="userOrder-icon">
|
||
<image src="/static/img/userOrder_02.png"></image>
|
||
</view>
|
||
<text>权益券订单</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=rights')">
|
||
<view class="userOrder-icon">
|
||
<image src="/static/img/userOrder_03.png"></image>
|
||
</view>
|
||
<text>权益商品订单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的工具 -->
|
||
<view class="userCard" v-if="isUser">
|
||
<view class="userCard-title">我的工具</view>
|
||
<view class="userOrder">
|
||
<view class="userOrder-label" @click="userNav('/pages/userStored/index')" v-if="userInfo.identity.identity_id != 0">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userOrder_07.png"></image>
|
||
</view>
|
||
<text>储值分享</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/userGoods/index')" v-if="userInfo.identity.identity_id != 0">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userOrder_08.png"></image>
|
||
</view>
|
||
<text>产品分享</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/favour/favour')">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userOrder_09.png"></image>
|
||
</view>
|
||
<text>红包赠予</text>
|
||
</view>
|
||
<view class="userOrder-label" @click="userNav('/pages/setUpForm/index')">
|
||
<view class="userOrder-icon active">
|
||
<image src="/static/img/userOrder_11.png"></image>
|
||
</view>
|
||
<text>个人设置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { index } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
isUser: false, // 用户是否登录
|
||
// 卡轮播
|
||
swiper: {
|
||
imgUrls: [
|
||
{
|
||
id : 0,
|
||
src : 'https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_00.png',
|
||
color : '#676869',
|
||
type : 'silver'
|
||
},
|
||
{
|
||
id : 2,
|
||
src : 'https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_02.png',
|
||
color : '#192b4c',
|
||
type : 'drill'
|
||
}
|
||
],
|
||
autoplay: false,
|
||
interval: 5000,
|
||
duration: 1000,
|
||
current : 0
|
||
},
|
||
userInfo: {
|
||
avatar : '', // 用户头像
|
||
identity: '', // 用户身份
|
||
nickname: '', // 用户名称
|
||
username: '', // 用户手机号
|
||
account : '' // 用户会员卡信息
|
||
},
|
||
account: {
|
||
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow() {
|
||
if(uni.getStorageSync("token")) {
|
||
this.isUser = true
|
||
// 获取用户登录信息
|
||
this.userData();
|
||
}
|
||
},
|
||
methods: {
|
||
// 用户登录后信息
|
||
userData() {
|
||
index().then(res => {
|
||
// 是否设置过密码缓存
|
||
uni.setStorage({
|
||
key : 'hasPaypass',
|
||
data : res.info.has_paypass
|
||
})
|
||
this.userInfo = res.info
|
||
this.userInfo.order = res.order
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
},
|
||
|
||
// 处理账户积分跳转
|
||
swiperNav(e) {
|
||
let newType = e.currentTarget.dataset.type
|
||
if(this.isUser){
|
||
if(newType == "balance"){
|
||
uni.navigateTo({
|
||
url: '/pages/account/myBalance'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: "/pages/account/account?type=" + newType
|
||
})
|
||
}else{
|
||
// 去登录
|
||
uni.navigateTo({
|
||
url: "/pages/auth/login"
|
||
})
|
||
}
|
||
},
|
||
|
||
// 处理未登录时的转跳
|
||
userNav(url){
|
||
let pageUrl = url
|
||
if(uni.getStorageSync("token")) {
|
||
uni.navigateTo({
|
||
url: pageUrl
|
||
})
|
||
return
|
||
}
|
||
// 去登录
|
||
uni.navigateTo({
|
||
url: "/pages/auth/login"
|
||
})
|
||
},
|
||
|
||
// 右,左箭头
|
||
rightSee (e) {
|
||
var swiper = this.swiper;
|
||
var current = swiper.current;
|
||
if(e == 'nextImg') swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
|
||
if(e == 'prevImg') swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
|
||
this.swiper = swiper
|
||
},
|
||
|
||
// 用户登录
|
||
userLogin() {
|
||
uni.navigateTo({
|
||
url: '/pages/auth/login'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 头部 */
|
||
.userHead {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background: white;
|
||
.userHead-img {
|
||
width: 135rpx;
|
||
height: 135rpx;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
image {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
.userHead-edit {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 48rpx;
|
||
line-height: 38rpx;
|
||
background-color: rgba(0,0,0,.5);
|
||
color: #fff;
|
||
text {
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
transform: scale(.9);
|
||
}
|
||
}
|
||
}
|
||
.userHead-text {
|
||
margin-left: 30rpx;
|
||
width: calc(100% - 160rpx);
|
||
.userHead-login {
|
||
border: 2rpx solid #313131;
|
||
border-radius: 6rpx;
|
||
font-size: 28rpx;
|
||
padding: 8rpx 30rpx;
|
||
margin-top: 40rpx;
|
||
display: inline-block;
|
||
}
|
||
.userHead-name {
|
||
margin: 20rpx 0;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
}
|
||
.userHead-tips {
|
||
background: #c6c6c6;
|
||
border-radius: 30rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 0 15rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
display: inline-block;
|
||
z-index: 99;
|
||
margin-left: 10rpx;
|
||
margin-top: 4rpx;
|
||
&.active {
|
||
left: 8rpx;
|
||
background: #000;
|
||
color: #fff;
|
||
}
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 5rpx;
|
||
vertical-align: -2rpx;
|
||
}
|
||
&.super,
|
||
&.sage {
|
||
background: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 我的会员卡
|
||
.userCard {
|
||
background: white;
|
||
padding-bottom: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
.userCard-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
padding: 30rpx 30rpx 0;
|
||
margin: 20rpx 0;
|
||
}
|
||
.userCard-cont {
|
||
padding: 30rpx 80rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.userCard-clip {
|
||
position: relative;
|
||
padding-top: 55%;
|
||
width: 100%;
|
||
.userCard-swiper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9;
|
||
.userCard-item {
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
.userCard-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
}
|
||
.userCard-parice {
|
||
position: absolute;
|
||
z-index: 9;
|
||
left: 30rpx;
|
||
bottom: 50rpx;
|
||
color: #f79210;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.userCard-arrow-left, .userCard-arrow-right {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
top: calc(50% - 25rpx);
|
||
}
|
||
.userCard-arrow-left {
|
||
right: 10rpx;
|
||
}
|
||
.userCard-arrow-right {
|
||
left: 10rpx;
|
||
}
|
||
}
|
||
.userCard-tips {
|
||
background: #f0f4fa;
|
||
border-radius: 30rpx;
|
||
width: 360rpx;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
color: #b4bbc4;
|
||
font-size: 26rpx;
|
||
padding: 14rpx 0;
|
||
image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 我的服务
|
||
.userOrder {
|
||
overflow: hidden;
|
||
margin-top: 40rpx;
|
||
.userOrder-label {
|
||
float: left;
|
||
width: 25%;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
.userOrder-icon {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
background: #000;
|
||
border-radius: 50%;
|
||
padding: 18rpx;
|
||
box-sizing: border-box;
|
||
margin: 0 auto 10rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|