Augcl
/
jewelry-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat(登录): 添加未登录状态提示并优化登录逻辑 

在购物车、订单中心和用户中心页面添加未登录状态提示，优化登录逻辑，确保用户未登录时显示登录提示并引导用户登录。同时更新相关图片资源。
master
前端-胡立永 3 weeks ago
parent
062d015c95
commit
7c84a6941e
23 changed files with 276 additions and 85 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      doc/center/3.png
  2. BIN
      doc/center/4.png
  3. BIN
      doc/center/5.png
  4. BIN
      doc/center/6.png
  5. BIN
      doc/center/7.png
  6. BIN
      doc/center/8.png
  7. BIN
      doc/center/9.png
  8. BIN
      doc/center/address.png
  9. BIN
      doc/center/logout.png
  10. +51
    -2
      pages/index/cart.vue
  11. +173
    -76
      pages/index/center.vue
  12. +52
    -7
      pages/index/order.vue
  13. BIN
      static/image/center/1.png
  14. BIN
      static/image/center/2.png
  15. BIN
      static/image/center/3.png
  16. BIN
      static/image/center/4.png
  17. BIN
      static/image/center/5.png
  18. BIN
      static/image/center/6.png
  19. BIN
      static/image/center/7.png
  20. BIN
      static/image/center/8.png
  21. BIN
      static/image/center/9.png
  22. BIN
      static/image/center/address.png
  23. BIN
      static/image/center/logout.png

BIN
doc/center/3.png View File

Before After
Width: 60  |  Height: 60  |  Size: 1.5 KiB

BIN
doc/center/4.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.1 KiB

BIN
doc/center/5.png View File

Before After
Width: 60  |  Height: 60  |  Size: 840 B

BIN
doc/center/6.png View File

Before After
Width: 60  |  Height: 60  |  Size: 1.6 KiB

BIN
doc/center/7.png View File

Before After
Width: 200  |  Height: 200  |  Size: 2.8 KiB

BIN
doc/center/8.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.7 KiB

BIN
doc/center/9.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.1 KiB

BIN
doc/center/address.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.0 KiB

BIN
doc/center/logout.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.0 KiB

+ 51
- 2
pages/index/cart.vue View File

@ -2,7 +2,13 @@
<view class="page"> <view class="page">
<navbar/> <navbar/>
<view class="user">
<!-- 未登录提示 -->
<view class="not-login" v-if="!isLogin">
<view class="tips">登录后查看您的购物车</view>
<view class="login-btn" @click="$utils.toLogin">立即登录</view>
</view>
<view class="user" v-if="isLogin">
<uv-checkbox-group <uv-checkbox-group
shape="circle" shape="circle"
v-model="checkboxValue"> v-model="checkboxValue">
@ -111,6 +117,7 @@
}, },
data() { data() {
return { return {
isLogin: false,
value : 0, value : 0,
checkboxValue : [], checkboxValue : [],
options: [ options: [
@ -121,7 +128,7 @@
} }
}, },
], ],
mixinsListApi : 'getCartPageList',
mixinsListApi : '',
} }
}, },
computed: { computed: {
@ -138,7 +145,24 @@
return price return price
}, },
}, },
onLoad(){
this.checkLogin()
},
onShow() {
this.checkLogin()
},
methods: { methods: {
// 检查是否登录
checkLogin() {
const token = uni.getStorageSync('token')
this.isLogin = !!token
if (this.isLogin) {
this.mixinsListApi = 'getCartPageList'
this.getData()
}
},
valChange(item, e) { valChange(item, e) {
this.$api('updateCartNum', { this.$api('updateCartNum', {
id: item.id, id: item.id,
@ -185,6 +209,31 @@
width: 100%; width: 100%;
} }
} }
.not-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400rpx;
background-color: #fff;
margin: 20rpx;
border-radius: 16rpx;
.tips {
font-size: 32rpx;
color: #666;
margin-bottom: 30rpx;
}
.login-btn {
background-color: $uni-color;
color: #fff;
padding: 20rpx 80rpx;
border-radius: 40rpx;
font-size: 30rpx;
}
}
.user { .user {
.item{ .item{


+ 173
- 76
pages/index/center.vue View File

@ -6,87 +6,103 @@
@leftClick="$utils.navigateBack" @leftClick="$utils.navigateBack"
bgColor="#E3441A" color="#fff" /> bgColor="#E3441A" color="#fff" />
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image :src="userInfo.headImage" mode="aspectFill"></image>
<!-- 未登录状态 -->
<view class="not-login" v-if="!isLogin">
<view class="head-bg">
<view class="login-info">
<view class="avatar">
<image src="/static/image/center/head-img.png" mode="aspectFill"></image>
</view>
<view class="login-tips">登录后查看个人信息</view>
<view class="login-btn" @click="$utils.toLogin">立即登录</view>
</view>
</view> </view>
</view>
<view class="user-info">
<view class="user-base-info">
<view class="user-base-top">
<view class="user-name">{{ userInfo.nickName}}</view>
<view class="member-level">
<image v-if="userInfo.role == 1" :src="configList.vip_money_one" mode="aspectFill" class="level">
</image>
<image v-if="userInfo.role == 2" :src="configList.vip_money_two" mode="aspectFill"
class="level">
</image>
<image v-if="userInfo.role == 3" :src="configList.vip_money_three"
mode="aspectFill" class="level">
</image>
</view>
<view class="user-tag">
{{ userRole[userInfo.isPay] }}
<!-- 已登录状态 -->
<template v-if="isLogin">
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image :src="userInfo.headImage" mode="aspectFill"></image>
</view>
<view class="user-info">
<view class="user-base-info">
<view class="user-base-top">
<view class="user-name">{{ userInfo.nickName}}</view>
<view class="member-level">
<image v-if="userInfo.role == 1" :src="configList.vip_money_one" mode="aspectFill" class="level">
</image>
<image v-if="userInfo.role == 2" :src="configList.vip_money_two" mode="aspectFill"
class="level">
</image>
<image v-if="userInfo.role == 3" :src="configList.vip_money_three"
mode="aspectFill" class="level">
</image>
</view>
<view class="user-tag">
{{ userRole[userInfo.isPay] }}
</view>
</view> </view>
</view>
<view class="edit-user"
@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
<view class="edit-btn">
修改资料
<view class="edit-user"
@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
<view class="edit-btn">
修改资料
</view>
</view> </view>
</view> </view>
</view>
<view class="user-phone">
手机号:{{ userInfo.phone }}
<view class="user-phone">
手机号:{{ userInfo.phone }}
</view>
</view> </view>
</view> </view>
</view>
<!-- 会员卡片 -->
<view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })"
v-if="userInfo.role != 0"
class="earnings">
<view v-if="index == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item">
<image :src="item.headImage" mode="aspectFill" class="member-image"></image>
<view class="member-info">
<view class="profile-photo">
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
<view class="open-status">
开通时间：{{ riceInfo.openTime }}
<!-- 会员卡片 -->
<view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })"
v-if="userInfo.role != 0"
class="earnings">
<view v-if="index == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item">
<image :src="item.headImage" mode="aspectFill" class="member-image"></image>
<view class="member-info">
<view class="profile-photo">
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
<view class="open-status">
开通时间：{{ riceInfo.openTime }}
</view>
</view>
<view class="open">
</view> </view>
</view>
<view class="open">
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 佣金数据 -->
<view class="brokerage-data"
:class="{'brokerage-data-mt' : !userInfo.role}">
<view class="brokerage" @click="$utils.navigateTo('/pages_order/mine/runningWater')">
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
<!-- 佣金数据 -->
<view class="brokerage-data"
:class="{'brokerage-data-mt' : !userInfo.role}">
<view class="brokerage" @click="$utils.navigateTo('/pages_order/mine/runningWater')">
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
<div class="main">
<div class="title">我的佣金</div>
<div class="money">￥{{ riceInfo.balance|| 0 }}</div>
</div>
</view>
<div class="main">
<div class="title">我的佣金</div>
<div class="money">￥{{ riceInfo.balance|| 0 }}</div>
</div>
</view>
<view class="balance" @click="$utils.navigateTo('/pages_order/mine/withdraw')">
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
<view class="balance" @click="$utils.navigateTo('/pages_order/mine/withdraw')">
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
<div class="main">
<div class="title">我的余额</div>
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
</div>
<div class="main">
<div class="title">我的余额</div>
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
</div>
</view>
</view> </view>
</view>
</template>
<!-- 我的服务 --> <!-- 我的服务 -->
<view class="myServer"> <view class="myServer">
@ -95,11 +111,11 @@
</view> </view>
<view class="box"> <view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
<view class="boxs" @click="handleItemClick('/pages/index/order?type=0')">
<image src="@/static/image/center/1.png" mode="aspectFill" /> <image src="@/static/image/center/1.png" mode="aspectFill" />
<view class="title">我的订单</view> <view class="title">我的订单</view>
</view> </view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
<view class="boxs" @click="handleItemClick('/pages_order/mine/partner')">
<image src="@/static/image/center/2.png" mode="aspectFill" /> <image src="@/static/image/center/2.png" mode="aspectFill" />
<view class="title">我的团队</view> <view class="title">我的团队</view>
</view> </view>
@ -107,7 +123,7 @@
<image src="@/static/image/center/3.png" mode="aspectFill" /> <image src="@/static/image/center/3.png" mode="aspectFill" />
<view class="title">联系客服</view> <view class="title">联系客服</view>
</view> </view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
<view class="boxs" @click="handleItemClick('/pages_order/mine/promotion')">
<image src="@/static/image/center/4.png" mode="aspectFill" /> <image src="@/static/image/center/4.png" mode="aspectFill" />
<view class="title">邀请好友</view> <view class="title">邀请好友</view>
</view> </view>
@ -122,7 +138,7 @@
<image src="@/static/image/center/6.png" mode="aspectFill" /> <image src="@/static/image/center/6.png" mode="aspectFill" />
<view class="title">会员权益</view> <view class="title">会员权益</view>
</view> </view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
<view class="boxs" @click="handleItemClick('/pages_order/mine/coupon')">
<image src="@/static/image/center/7.png" mode="aspectFill" /> <image src="@/static/image/center/7.png" mode="aspectFill" />
<view class="title">优惠券</view> <view class="title">优惠券</view>
</view> </view>
@ -133,17 +149,17 @@
</view> </view>
<view class="box"> <view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
<view class="boxs" @click="handleItemClick('/pages_order/mine/address')">
<image src="@/static/image/center/address.png" mode="aspectFill" /> <image src="@/static/image/center/address.png" mode="aspectFill" />
<view class="title">我的地址</view> <view class="title">我的地址</view>
</view> </view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
<view class="boxs" @click="handleItemClick('/pages_order/order/giftList')">
<image src="@/static/image/center/9.png" mode="aspectFill" /> <image src="@/static/image/center/9.png" mode="aspectFill" />
<view class="title">礼包列表</view> <view class="title">礼包列表</view>
</view> </view>
<view class="boxs" @click="logout">
<image src="@/static/image/center/logout.png" mode="aspectFill" />
<view class="title">退出登录</view>
<view class="boxs" @click="isLogin ? logout() : toLogin()">
<image :src="isLogin ? '/static/image/center/logout.png' : '/static/image/center/logout.png'" mode="aspectFill" />
<view class="title">{{ isLogin ? '退出登录' : '立即登录' }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -197,6 +213,7 @@
}, },
data() { data() {
return { return {
isLogin: false,
vipType: ['普通会员', '黄金会员', '渠道商'], vipType: ['普通会员', '黄金会员', '渠道商'],
vipImage: ['vip_vip', 'vip_user', 'vip_shop'], vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
vipList: [], vipList: [],
@ -207,11 +224,45 @@
} }
}, },
onShow() { onShow() {
this.$store.commit('getUserInfo')
this.$store.commit('getRiceInfo')
this.getMemberCardData();
this.checkLogin()
if (this.isLogin) {
this.$store.commit('getUserInfo')
this.$store.commit('getRiceInfo')
this.getMemberCardData()
}
}, },
methods: { methods: {
// 检查是否登录
checkLogin() {
const token = uni.getStorageSync('token')
this.isLogin = !!token
},
// 跳转登录页
toLogin() {
uni.navigateTo({
url: '/pages/login/login'
})
},
// 处理需要登录的功能点击
handleItemClick(url) {
if (this.isLogin) {
this.$utils.navigateTo(url)
} else {
uni.showModal({
title: '提示',
content: '请先登录',
confirmText: '去登录',
success: (res) => {
if (res.confirm) {
this.toLogin()
}
}
})
}
},
clickNo() { clickNo() {
uni.showModal({ uni.showModal({
title: '暂未开放', title: '暂未开放',
@ -248,6 +299,52 @@
<style scoped lang="scss"> <style scoped lang="scss">
.page { .page {
// 未登录样式
.not-login {
.head-bg {
padding: 60rpx 20rpx 120rpx 20rpx;
background: $uni-color;
.login-info {
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: 130rpx;
height: 130rpx;
background-image: url(/static/image/center/head-img.png);
background-repeat: no-repeat;
background-position: 50%, 50%;
background-size: 100%;
overflow: hidden;
border-radius: 50%;
margin-bottom: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.login-tips {
color: white;
font-size: 32rpx;
margin-bottom: 30rpx;
}
.login-btn {
background-color: #fff;
color: $uni-color;
padding: 15rpx 80rpx;
border-radius: 40rpx;
font-size: 30rpx;
font-weight: bold;
}
}
}
}
// 头部 // 头部
.head { .head {
display: flex; display: flex;
@ -584,4 +681,4 @@
} }
} }
} }
</style>
</style>

+ 52
- 7
pages/index/order.vue View File

@ -3,8 +3,14 @@
<!-- 导航栏 --> <!-- 导航栏 -->
<navbar title="订单中心" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" /> <navbar title="订单中心" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<!-- 未登录提示 -->
<view class="not-login" v-if="!isLogin">
<view class="tips">登录后查看您的订单信息</view>
<view class="login-btn" @click="$utils.toLogin">立即登录</view>
</view>
<!-- 订单筛选 --> <!-- 订单筛选 -->
<view class="tabs">
<view class="tabs" v-if="isLogin">
<uv-tabs :list="tabs" <uv-tabs :list="tabs"
:activeStyle="{color : '#fff', fontWeight : 600}" :activeStyle="{color : '#fff', fontWeight : 600}"
lineColor="#fff" lineColor="#fff"
@ -15,7 +21,7 @@
@click="clickTabs"></uv-tabs> @click="clickTabs"></uv-tabs>
</view> </view>
<view class="list">
<view class="list" v-if="isLogin">
<view class="item" v-for="(item, index) in list" @click="toOrderDetail(item.id)" :key="index"> <view class="item" v-for="(item, index) in list" @click="toOrderDetail(item.id)" :key="index">
<view class="content" :key="index" v-for="(good, index) in item.commonOrderSkuList"> <view class="content" :key="index" v-for="(good, index) in item.commonOrderSkuList">
<view class="top"> <view class="top">
@ -104,9 +110,9 @@
tabber, tabber,
customerServicePopup, customerServicePopup,
}, },
computed: {},
data() { data() {
return { return {
isLogin: false,
tabs: [{ tabs: [{
name: '全部' name: '全部'
}, },
@ -127,16 +133,30 @@
} }
], ],
current: 0, current: 0,
mixinsListApi: 'getOrderPageList',
mixinsListApi: '',
} }
}, },
onLoad(args) { onLoad(args) {
this.current = args.type || 0 this.current = args.type || 0
this.clickTabs({
index: this.current
})
this.checkLogin()
},
onShow() {
this.checkLogin()
}, },
methods: { methods: {
// 检查是否登录
checkLogin() {
const token = uni.getStorageSync('token')
this.isLogin = !!token
if (this.isLogin) {
this.mixinsListApi = 'getOrderPageList'
this.clickTabs({
index: this.current
})
}
},
//点击tab栏 //点击tab栏
clickTabs({ clickTabs({
index index
@ -161,6 +181,31 @@
<style scoped lang="scss"> <style scoped lang="scss">
.page {} .page {}
.not-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400rpx;
background-color: #fff;
margin: 20rpx;
border-radius: 16rpx;
.tips {
font-size: 32rpx;
color: #666;
margin-bottom: 30rpx;
}
.login-btn {
background-color: $uni-color;
color: #fff;
padding: 20rpx 80rpx;
border-radius: 40rpx;
font-size: 30rpx;
}
}
.tabs { .tabs {
background: $uni-color; background: $uni-color;
} }


BIN
static/image/center/1.png View File

Before After
Width: 200  |  Height: 200  |  Size: 2.5 KiB Width: 100  |  Height: 100  |  Size: 3.8 KiB

BIN
static/image/center/2.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.8 KiB Width: 100  |  Height: 100  |  Size: 6.8 KiB

BIN
static/image/center/3.png View File

Before After
Width: 60  |  Height: 60  |  Size: 1.5 KiB Width: 100  |  Height: 100  |  Size: 5.4 KiB

BIN
static/image/center/4.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.1 KiB Width: 100  |  Height: 100  |  Size: 5.4 KiB

BIN
static/image/center/5.png View File

Before After
Width: 60  |  Height: 60  |  Size: 840 B Width: 100  |  Height: 100  |  Size: 4.0 KiB

BIN
static/image/center/6.png View File

Before After
Width: 60  |  Height: 60  |  Size: 1.6 KiB Width: 100  |  Height: 100  |  Size: 5.0 KiB

BIN
static/image/center/7.png View File

Before After
Width: 200  |  Height: 200  |  Size: 2.8 KiB Width: 100  |  Height: 100  |  Size: 4.6 KiB

BIN
static/image/center/8.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.7 KiB Width: 100  |  Height: 100  |  Size: 5.9 KiB

BIN
static/image/center/9.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.1 KiB Width: 100  |  Height: 100  |  Size: 4.8 KiB

BIN
static/image/center/address.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.0 KiB Width: 100  |  Height: 100  |  Size: 6.4 KiB

BIN
static/image/center/logout.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.0 KiB Width: 100  |  Height: 100  |  Size: 5.3 KiB

Write Preview
Loading…
Cancel
Save