zhangjing/ysdH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[本时生活h5端]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:19:58 +08:00
commit ebb9575bd0
284 changed files with 39689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

474
pages/user/index.vue Normal file
View File

@@ -0,0 +1,474 @@
<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>