mrr.sj.front/pages/artisan/profile.vue

835 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="profile-page">
<!-- 自定义顶部导航栏 -->
<view class="custom-navbar">
<!-- 左侧返回按钮和标题 -->
<view class="navbar-left">
<image class="back-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/456f4e6c-e86a-42c9-a272-484db9af6c7c"
mode="aspectFit" @click="handleBack"></image>
<text class="navbar-title">我的资料</text>
</view>
<!-- 右侧状态栏 -->
<view class="navbar-right">
<!-- <view class="nav-status-item" @click="handleShareWechat">
<image class="nav-status-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8a412688-b794-4407-bba6-a6dc65d75f08" mode="aspectFit"></image>
<text class="nav-status-text">分享到微信</text>
</view>
<view class="nav-status-item" @click="handleViewShop">
<image class="nav-status-icon" :src="identity == '2' ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2b5de852-2d35-4786-a643-d20cabb3eaee' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/85638da9-804e-4811-8378-d1bb6007f99d'" mode="aspectFit"></image>
<text class="nav-status-text">{{ identity == '2' ? '查看店铺' : '查看手艺人' }}</text>
</view> -->
</view>
</view>
<!-- 内容区域 -->
<view class="content">
<!-- 基础资料部分 -->
<view class="section-card">
<view class="section-header">
<view class="title-bar"></view>
<text class="section-title">基础资料</text>
</view>
<text class="section-desc">店铺信息将影响顾客到店消费体验请确保信息准确</text>
<view class="subsection">
<view class="subsection-content">
<!-- 营业时间商家 / 服务时间手艺人 -->
<view class="info-item" @click="navigateToTimeSetting">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21f1efaf-0c17-49b0-a2b2-e0fd573b92b3"
mode="aspectFit"></image>
<text class="item-label">{{ identity == '2' ? '营业时间' : '服务时间' }}</text>
</view>
<view>
<image
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/338d957b-cbb6-409b-9e7a-ef5faa0f9b70.png"
mode="widthFix"
style="width:26rpx;margin-top: 26rpx;position: relative;top: 4rpx;left: -10rpx;"
v-if="!userInfo.business_time">
</image>
<text style="margin-right: 16rpx;"
:style="{ color: userInfo.business_time ? '#c9c9c9' : '#ec5d57' }">
{{ userInfo.business_time ? '已设置' : '待完善' }}
</text>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit">
</image>
</view>
</view>
<view class="info-item" @click="navigateToServiceSkill">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b90e2322-a261-4c17-a581-85010c3bc112"
mode="aspectFit"></image>
<text class="item-label">服务技能</text>
</view>
<view>
<image
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/338d957b-cbb6-409b-9e7a-ef5faa0f9b70.png"
mode="widthFix"
style="width:26rpx;margin-top: 26rpx;position: relative;top: 4rpx;left: -10rpx;"
v-if="!userInfo.servers_kill_arr || userInfo.servers_kill_arr.length === 0">
</image>
<text style="margin-right: 16rpx;"
:style="{ color: (userInfo.servers_kill_arr && userInfo.servers_kill_arr.length > 0) ? '#333333' : '#ec5d57' }">
{{ (userInfo.servers_kill_arr && userInfo.servers_kill_arr.length > 0) ? '已设置' :
'待完善' }}
</text>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit">
</image>
</view>
</view>
<!-- 门店信息 -->
<view class="info-item" v-if="identity == '2'" @click="navigateToShopInfo">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e9618006-db69-446e-92e1-ba9dd81e79f9"
mode="aspectFit"></image>
<text class="item-label">门店信息</text>
</view>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
<!-- 服务区域(手艺人显示) -->
<view class="info-item" v-if="identity == '1'" @click="navigateToServiceArea">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a35603b1-50fb-4248-9f2e-2dd4d5e249c0"
mode="aspectFit"></image>
<text class="item-label">服务区域</text>
</view>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
<!-- 个人信息(手艺人显示) -->
<view class="info-item" v-if="identity == '1'" @click="navigateToPersonalInfo">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/77dc7a16-3b86-44e5-8acc-5f3b85ffc137"
mode="aspectFit"></image>
<text class="item-label">个人信息</text>
</view>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
<!-- 个人信息(手艺人显示) -->
<view class="info-item" @click="navigateToimg">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53a9d1e1-e2d2-4001-b599-82e0c0747f1a.png"
mode="aspectFit"></image>
<text class="item-label">相册管理</text>
</view>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
<!-- 个人信息(手艺人显示) -->
<view class="info-item" @click="navigateTovideo">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6fc821cd-8dd1-41f1-8854-889fb5f76b78.png"
mode="aspectFit"></image>
<text class="item-label">视频管理</text>
</view>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
</view>
</view>
</view>
<!-- 经营资质部分 -->
<view class="section-card">
<view class="section-header">
<view class="title-bar"></view>
<text class="section-title">经营资质</text>
</view>
<view class="subsection-content">
<!-- 资质信息 -->
<view class="info-item" @click="navigateToQualification">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2677692c-5931-4ac7-846e-b6d321184789"
mode="aspectFit"></image>
<text class="item-label">资质信息</text>
</view>
<view>
<image
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/338d957b-cbb6-409b-9e7a-ef5faa0f9b70.png"
mode="widthFix"
style="width:26rpx;margin-top: 26rpx;position: relative;top: 4rpx;left: -10rpx;"
v-if="userInfo.credentials_state === 0">
</image>
<text style="margin-right: 16rpx;"
:style="{ color: userInfo.credentials_state === 0 ? '#ec5d57' : userInfo.credentials_state === 1 ? '#e59e45' : '#c9c9c9' }">
{{ userInfo.credentials_state === 0 ? '待完善' : userInfo.credentials_state === 1 ? '审核中' :
'已认证' }}
</text>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit">
</image>
</view>
</view>
<!-- 所属门店(手艺人显示) -->
<view class="info-item" v-if="identity == '1'" @click="navigateToBelongShop">
<view class="info-left">
<image class="item-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b5541cb5-58c1-4e72-b88f-5cf6450338a8"
mode="aspectFit"></image>
<text class="item-label">所属门店</text>
</view>
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
handleImgSizeUni
} from '@/utils/service.js'
import request from "../../utils/request";
export default {
data() {
return {
identity: '',
currentUserId: '', // 当前用户ID
userInfo: {}, // 用户信息
sharing: false // 添加分享状态标记
}
},
onLoad() {
// 页面显示时重新加载身份信息,确保数据最新
this.loadIdentity()
console.log('当前身份:', this.identity)
// 加载用户信息
this.loadUserInfo()
},
onShow() {
// 页面显示时也重新加载,确保数据最新
this.loadIdentity()
this.loadUserInfo()
},
methods: {
// 返回按钮处理
handleBack() {
uni.navigateBack()
},
// 分享到微信
handleShareWechat() {
console.log('分享到微信')
this.handleShareProcess()
},
async handleShareProcess() {
// 如果正在分享中,防止重复点击
if (this.sharing) {
return;
}
// 设置分享状态
this.sharing = true;
try {
// 显示加载提示
uni.showLoading({
title: '正在准备分享...',
mask: true
});
// 确保用户信息已加载
if (!this.currentUserId) {
await this.loadUserInfo()
}
// 检查是否已加载用户信息
if (!this.currentUserId) {
uni.showToast({
title: '无法获取用户信息',
icon: 'none'
})
return
}
// 根据环境处理
// #ifdef APP-PLUS
this.handleAppAutoShare()
// #endif
// #ifdef MP-WEIXIN
this.handleMpAutoShare()
// #endif
// #ifdef H5
this.handleH5Share()
// #endif
} catch (error) {
console.error('分享过程出错:', error);
uni.hideLoading();
this.sharing = false;
uni.showToast({
title: '分享失败,请重试',
icon: 'none'
});
}
},
// H5环境分享
handleH5Share() {
// 在H5环境通常使用浏览器的分享功能或复制链接
const shareUrl = window.location.href
uni.showModal({
title: '分享提示',
// content: `请复制链接分享给好友:${shareUrl}`,
content: `请在美融融Plus APP 环境下使用此功能`,
showCancel: false,
confirmText: '好的',
success: (res) => {
if (res.confirm) {
// // 复制链接到剪贴板
// uni.setClipboardData({
// data: shareUrl,
// success: () => {
// uni.showToast({
// title: '链接已复制',
// icon: 'success'
// })
// }
// })
}
}
})
},
// 小程序环境处理
handleMpAutoShare() {
// 小程序无法自动触发分享,跳转后提示用户手动操作
const url = this.identity == '2' ?
`/pages/user/store-detail?id=${this.currentUserId}` :
`/pages/user/syr-detail?id=${this.currentUserId}`;
uni.navigateTo({
url: url,
success: () => {
setTimeout(() => {
uni.showToast({
title: '请点击右上角分享',
icon: 'none',
duration: 2000
});
}, 500);
}
});
},
// APP环境自动分享
handleAppAutoShare() {
if (!this.currentUserId) {
uni.showToast({
title: '无法获取用户信息',
icon: 'none'
});
return;
}
// 清除旧的分享标记
uni.removeStorage({
key: 'share_success'
});
// 跳转到店铺主页并自动触发分享
const url = this.identity == '2' ?
`/pages/user/store-detail?id=${this.currentUserId}&autoShare=1` :
`/pages/user/syr-detail?id=${this.currentUserId}&autoShare=1`;
uni.navigateTo({
url: url,
success: () => {
console.log('跳转成功,将自动触发分享');
// 跳转成功后立即隐藏loading避免页面闪烁
setTimeout(() => {
uni.hideLoading();
this.sharing = false;
}, 200);
},
fail: () => {
console.log('跳转失败:', err);
uni.hideLoading();
this.sharing = false;
this.showManualShareOption();
}
});
},
// 执行APP分享
executeAppShare(imageUrl) {
// 备用图片地址
const backupImageUrl =
"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40"
// 根据身份设置不同的分享标题
const shareTitle = this.identity == '2' ?
"好友刚推了个超赞商家点开认识TA ~" :
"好友刚推了个超赞手艺人点开认识TA ~"
// 生成分享配置
const shareConfig = {
provider: "weixin",
scene: "WXSceneSession",
type: 5,
title: shareTitle,
miniProgram: {
id: "gh_89c92e18b70b", // 小程序原始ID
path: this.getSharePath(), // 动态分享路径
type: 0, // 正式版
webUrl: "https://www.baidu.com/", // 降级网页地址
},
imageUrl: imageUrl,
success: (res) => {
console.log("分享成功:", JSON.stringify(res))
uni.showToast({
title: '分享成功',
icon: 'success'
})
},
fail: (err) => {
console.log("分享失败:", JSON.stringify(err))
// 尝试使用备用图片
if (imageUrl !== backupImageUrl) {
console.log("尝试使用备用图片分享...")
this.executeAppShare(backupImageUrl)
} else {
uni.showToast({
title: '分享失败',
icon: 'none'
})
}
}
}
// 检查是否支持分享API
if (uni.share) {
uni.share(shareConfig)
} else {
uni.showToast({
title: '当前环境不支持分享',
icon: 'none'
})
}
},
// 获取分享路径
getSharePath() {
// 根据身份生成不同的分享路径
if (this.identity == '2') {
// 商家分享店铺详情页
return `/pages/user/store-detail?id=${this.currentUserId || ''}`
} else {
// 手艺人分享个人主页
return `/pages/user/syr-detail?id=${this.currentUserId || ''}`
}
},
// 查看店铺
async handleViewShop() {
console.log('查看店铺')
// 确保用户信息已加载
if (!this.currentUserId) {
await this.loadUserInfo()
}
// 如果仍然没有用户ID提示用户手动输入或联系客服
if (!this.currentUserId) {
uni.showModal({
title: '提示',
content: '无法获取用户信息,请联系客服或稍后重试',
showCancel: false,
confirmText: '确定'
})
return
}
// 根据身份跳转到不同的页面
if (this.identity == '2') {
// 商家跳转到店铺主页
uni.navigateTo({
url: '/pages/user/store-detail?id=' + this.currentUserId
})
} else {
// 手艺人跳转到个人主页
uni.navigateTo({
url: '/pages/user/syr-detail?id=' + this.currentUserId
})
}
},
// 加载用户信息 - 主要使用接口获取
async loadUserInfo() {
try {
// 根据身份设置type参数参考个人中心页面的逻辑
let type = 1 // 默认值
if (this.identity == '1') {
type = 2 // 手艺人
} else if (this.identity == '2') {
type = 3 // 商家
}
console.log('调用接口获取用户信息type:', type)
// 调用接口获取用户信息
const result = await request.post('/sj/user/getUser', {
type
})
if (result.data && result.data.id) {
this.userInfo = result.data
this.currentUserId = result.data.id
// 存储到本地,避免重复调用
uni.setStorageSync('userInfo', result.data)
console.log('从接口获取用户信息成功:', this.userInfo)
} else {
console.log('接口返回数据异常:', result)
}
} catch (error) {
console.log('获取用户信息失败:', error)
// 降级方案尝试从其他可能的位置获取用户ID
this.tryAlternativeUserInfo()
uni.hideLoading();
}
},
// 备用方案:从其他位置获取用户信息
tryAlternativeUserInfo() {
try {
const app = getApp()
// 方法1: 从全局数据获取用户ID
if (app.globalData.userInfo && app.globalData.userInfo.id) {
this.currentUserId = app.globalData.userInfo.id
this.userInfo = app.globalData.userInfo
console.log('从全局数据获取用户ID:', this.currentUserId)
return
}
// 方法2: 从本地存储获取完整的用户信息
const userInfo = uni.getStorageSync('userInfo')
if (userInfo && userInfo.id) {
this.currentUserId = userInfo.id
this.userInfo = userInfo
console.log('从存储获取用户ID:', this.currentUserId)
return
}
// 方法3: 直接获取用户ID
const userId = uni.getStorageSync('userId')
if (userId) {
this.currentUserId = userId
console.log('从存储获取用户ID:', userId)
return
}
console.log('所有获取用户信息的方法都失败了')
} catch (e) {
console.log('备用方案获取用户信息失败:', e)
}
},
loadIdentity() {
// 从全局数据获取身份
const app = getApp()
const globalIdentity = app.globalData.artisanType
console.log('从全局数据获取身份:', globalIdentity)
if (globalIdentity) {
this.identity = globalIdentity
uni.setStorageSync('user_identity', globalIdentity)
} else {
// 如果全局数据没有,尝试从本地存储获取
const localIdentity = uni.getStorageSync('user_identity')
if (localIdentity) {
this.identity = localIdentity
console.log('从本地存储获取身份:', localIdentity)
} else {
console.log('未获取到身份信息')
// 默认设为手艺人
this.identity = '1'
}
}
console.log('当前身份:', this.identity)
},
navigateToTimeSetting() {
if (this.identity == '2') {
// 商家跳转到营业时间页面
uni.navigateTo({
url: '/pages/shop/business-time'
})
} else {
// 手艺人跳转到服务时间页面
uni.navigateTo({
url: '/pages/artisan/service-time'
})
}
},
navigateToServiceSkill() {
if (this.identity == '2') {
// 商家跳转到商家服务技能页面
uni.navigateTo({
url: '/pages/shop/service-skills'
})
} else {
// 手艺人跳转到手艺人服务技能页面
uni.navigateTo({
url: '/pages/artisan/service-skills'
})
}
},
navigateToShopInfo() { // 商家:门店信息
uni.navigateTo({
url: '/pages/shop/sj-info-change'
})
},
navigateToServiceArea() { // 手艺人:服务区域
uni.navigateTo({
url: '/pages/artisan/service-area'
})
},
navigateToPersonalInfo() { // 手艺人:个人信息
uni.navigateTo({
url: '/pages/artisan/syr-info-change'
})
},
navigateToimg() { // 图片管理
uni.navigateTo({
url: '/pages/shop/photoAlbum/photoManage?type=1'
})
},
navigateTovideo() { // 视频管理
uni.navigateTo({
url: '/pages/shop/photoAlbum/photoManage?type=2'
})
},
navigateToQualification() { // 商家手艺人:资质信息
if (this.identity == '2') {
// 商家跳转到资质信息页面
uni.navigateTo({
url: '/pages/shop/qualification_sj_change'
})
} else {
// 手艺人跳转到资质信息页面
uni.navigateTo({
url: '/pages/artisan/qualification_syr_change'
})
}
},
navigateToBelongShop() { // 手艺人:所属门店
uni.navigateTo({
url: '/pages/artisan/belong_shop'
})
}
}
}
</script>
<style>
.profile-page {
min-height: 100vh;
background-color: #f5f5f5;
}
/* 自定义导航栏样式 */
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 108rpx;
/* 使用标准导航栏高度 */
background: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
z-index: 999;
box-sizing: border-box;
/* 适配不同机型的顶部安全区域 */
padding-top: var(--status-bar-height);
height: calc(128rpx + var(--status-bar-height));
}
/* 导航栏左侧 */
.navbar-left {
display: flex;
align-items: center;
}
.back-icon {
width: 16rpx;
height: 32rpx;
margin-right: 23rpx;
}
.navbar-title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #333333;
line-height: 45rpx;
text-align: left;
font-style: normal;
}
/* 导航栏右侧状态栏 */
.navbar-right {
display: flex;
align-items: center;
}
.nav-status-item {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 11rpx;
padding: 16rpx;
}
.nav-status-icon {
width: 44rpx;
height: 44rpx;
margin-bottom: 7rpx;
}
.nav-status-text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #333333;
line-height: 28rpx;
text-align: left;
font-style: normal;
}
.content {
padding: 20rpx;
/* 动态计算内容区域的上边距 */
padding-top: calc(128rpx + var(--status-bar-height) + 20rpx);
}
/* 部分卡片 */
.section-card {
background: white;
border-radius: 20rpx;
padding: 20rpx 20rpx 0 20rpx;
margin-bottom: 20rpx;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 8rpx;
}
.section-title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #1D2129;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
.title-bar {
width: 6rpx;
height: 30rpx;
background-color: #E8101E;
margin-right: 10rpx;
border-radius: 5rpx;
}
.section-desc {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #666666;
line-height: 33rpx;
text-align: left;
font-style: normal;
margin-left: 20rpx;
letter-spacing: 0.5rpx;
}
/* 子部分 */
.subsection {
/* margin-top: 10rpx; */
/* margin-left: 17rpx; */
}
.subsection-content {
border-radius: 12rpx;
overflow: hidden;
margin-left: 17rpx;
}
/* 信息项 */
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.info-item:last-child {
border-bottom: none;
}
.info-left {
display: flex;
align-items: center;
}
.item-icon {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
}
.item-label {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.arrow-right {
margin-right: 19rpx;
width: 11rpx;
height: 22rpx;
}
</style>