mrr.sj.front/pages/ruzhu/ruzhu.vue

813 lines
22 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="ruzhu-page">
<!-- 顶部导航栏 - 根据身份动态显示标题 -->
<custom-navbar :title="navTitle" :showBack="true"></custom-navbar>
<!-- 步骤切换 -->
<step-tab v-if="currentStep !== 2 && currentStep !== 4" :mappedStep="mappedStep"></step-tab>
<!-- 内容区域根据身份和步骤显示不同内容 -->
<view class="content">
<view class="xieyi_content" v-if="currentStep === 0">
<rich-text :nodes="textData.text"></rich-text>
</view>
<view v-else-if="currentStep === 1">
<qualification-info ref="qualificationInfo"></qualification-info>
</view>
<view v-else-if="currentStep === 2">
<successruzhu :data="successData"></successruzhu>
</view>
<view v-else-if="currentStep === 3">
<store-info ref="storeInfo"></store-info>
</view>
<view v-else-if="currentStep === 4">
<successruzhu :data="successData"></successruzhu>
</view>
</view>
<view class="kong"></view>
<!-- 底部按钮区域 -->
<view class="bottom-fixed">
<!-- 步骤0: 入驻协议 -->
<view v-if="currentStep === 0" class="step-0-buttons">
<view class="agree">
<image v-if="!isAgree" src="/static/images/agree_n.png" class="agree-btn" mode="aspectFit"
@click="isAgree = true"></image>
<image v-else src="/static/images/agree_y.png" class="agree-btn" mode="aspectFit"
@click="isAgree = false"></image>
<text class="agree-tip">我已阅读并同意以上协议</text>
</view>
<view class="next-btn" @click="goNext">
<text class="next-text">下一步,填写基本信息</text>
</view>
</view>
<!-- 步骤1: 资质信息 -->
<view v-else-if="currentStep === 1" class="step-1-buttons">
<view class="button-row">
<view class="prev-btn" @click="goPrev">
<text class="prev-text">上一步</text>
</view>
<view class="next-btn" @click="goNext">
<text class="next-text">提交入驻</text>
</view>
</view>
</view>
<!-- 步骤2: 提交成功 -->
<view v-else-if="currentStep === 2" class="step-2-buttons">
<view class="button-row">
<view class="prev-btn" @click="topt">
<text class="prev-text">进入平台</text>
</view>
<view class="submit-btn" @click="goNext">
<text class="submit-text">去完成资质认证</text>
</view>
</view>
</view>
<!-- 步骤3: 门店信息 -->
<view v-else-if="currentStep === 3" class="step-2-buttons">
<view class="button-row">
<view class="prev-btn" @click="goPrev">
<text class="prev-text">上一步</text>
</view>
<view class="submit-btn" @click="submitApplication">
<text class="submit-text">提交申请</text>
</view>
</view>
</view>
<!-- 步骤4: 资质认证成功 -->
<view v-else-if="currentStep === 4" class="step-2-buttons">
<view class="button-row">
<view class="showziliao" @click="topt">
<text class="showziliaotext">进入平台</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request';
import StepTab from '@/components/step-tab/step-tab.vue';
import QualificationInfo from './qualification_sj.vue';
import StoreInfo from './sj-info.vue';
import successruzhu from './successruzhu.vue';
export default {
components: {
StepTab,
QualificationInfo,
StoreInfo,
successruzhu
},
data() {
return {
currentStep: 0, // 当前步骤索引
isAgree: false,
identity: null,
textData: {},
loading: false,
error: null,
navTitle: '商家入驻', // 默认标题
qualificationData: null, // 新增:保存资质信息
storeInfoData: null, // 新增:保存门店信息
successData: {}, //入驻提示
// 新增:缓存手艺人数据
artisanDataCache: {
personalInfo: null,
qualificationInfo: null
}
}
},
computed: {
mappedStep() {
if (this.currentStep === 0) return 0;
if (this.currentStep === 1) return 1;
if (this.currentStep === 3) return 2;
if (this.currentStep === 4) return 2;
return 0;
}
},
async onLoad(options) {
console.log(options, 'options---');
if (options.type == 1) {
this.currentStep = 4
}
this.identity = 2;
await this.getUserInfoSync()
// 确保子组件也能访问到 identity
this.getXieyi(1);
},
onShow() {
console.log('入驻页面 onShow - 检查地址数据');
// 检查商家地址数据
this.checkAndPassAddressToSj();
},
methods: {
topt() {
uni.switchTab({
url: '/pages/home/home'
})
},
// 获取用户信息(复用不可服务时间页面的方法)
async getUserInfoSync() {
await request.post('/sj/userSjAuth/details', {
type: 1
}).then(result => {
if (result.code == 200 && result.data) {
let data = result.data
if (getApp().globalData.artisanType == 2) {
let qualification_form_data = {
"uscc_type": data.uscc_type || '',
// "contact_identity": 'legal',
// "contact_name": data.legal_name || data.contact_name || '',
"contact_phone": data.legal_phone || data.contact_phone || '',
"backup_phone": data.backup_phone || '',
"invite_code": data.invite_code_other || '',
"dependency": data.dependency || '',
"address": data.address || '',
"dependency_code": data.dependency_code || '',
"dependency_province": data.dependency_province || '',
"dependency_city": data.dependency_city || '',
"longitude": data.longitude || '',
"latitude": data.latitude || '',
"name": data.name || '',
"contact_type": data.contact_type || ''
}
uni.setStorageSync('qualification_form_data', qualification_form_data);
let store_info_form_data = {
"head_photo": data.head_photo,
"name": data.name,
"business_time": data.business_time,
// "servers_kill": data.servers_kill,
"apply_state": data.apply_state,
"invite_code_other": data.invite_code_other,
"major": data.major
}
console.log(111111111, store_info_form_data)
uni.setStorageSync('store_info_form_data', store_info_form_data);
}
}
}).catch(error => {
console.error('获取用户信息接口错误:', error);
});
},
// 检查并传递地址给商家组件
checkAndPassAddressToSj() {
try {
const sjAddress = uni.getStorageSync('sj_selected_address');
if (sjAddress) {
console.log('找到商家地址数据,准备传递:', sjAddress);
setTimeout(() => {
if (this.identity === 2 && this.$refs.qualificationInfo) {
console.log('传递地址给资质组件');
if (typeof this.$refs.qualificationInfo.handleAddressSelected === 'function') {
this.$refs.qualificationInfo.handleAddressSelected(sjAddress);
}
}
uni.removeStorageSync('sj_selected_address');
}, 300);
}
} catch (e) {
console.error('处理商家地址失败:', e);
}
},
// 新增方法:检查并传递地址数据
checkAndPassAddressData() {
try {
const syrAddress = uni.getStorageSync('syr_selected_address');
if (syrAddress && this.$refs.personalInfo) {
console.log('步骤切换时发现地址数据,传递给组件');
// 传递给组件
if (typeof this.$refs.personalInfo.handleAddressSelected === 'function') {
this.$refs.personalInfo.handleAddressSelected(syrAddress);
} else {
// 直接设置
this.$refs.personalInfo.formData.detail_address = syrAddress.address;
this.$refs.personalInfo.formData.longitude = syrAddress.longitude;
this.$refs.personalInfo.formData.latitude = syrAddress.latitude;
this.$refs.personalInfo.saveFormDataToLocal();
this.$refs.personalInfo.$forceUpdate();
}
// 清理
uni.removeStorageSync('syr_selected_address');
}
} catch (e) {
console.error('检查地址数据失败:', e);
}
},
// 检查用户信息
checkUserInfo() {
console.log('检查用户信息...');
// 从多种可能的存储位置检查用户信息
const sources = [{
name: '本地存储-userInfo',
data: uni.getStorageSync('userInfo')
},
{
name: '本地存储-loginInfo',
data: uni.getStorageSync('loginInfo')
},
{
name: '本地存储-token',
data: uni.getStorageSync('token')
}
];
sources.forEach(source => {
console.log(`${source.name}:`, source.data);
});
// 检查是否有token确认登录状态
const token = uni.getStorageSync('token');
if (!token) {
console.warn('未检测到登录token');
uni.showToast({
title: '请先登录',
icon: 'none'
});
}
},
// 获取用户信息(复用不可服务时间页面的方法)
getUserInfo() {
return new Promise((resolve, reject) => {
request.post('/sj/User/getUser', {
type: 1
}).then(result => {
if (result.state == 1) {
// 保存用户信息到全局数据和本地存储
uni.setStorageSync('userInfo', result.data);
console.log('用户信息获取成功:', result.data);
resolve(result.data);
} else {
console.error('获取用户信息失败:', result.msg);
reject(result.msg);
}
}).catch(error => {
console.error('获取用户信息接口错误:', error);
reject(error);
});
});
},
// 检查并获取用户信息
async checkAndGetUserInfo() {
// 先检查是否已有用户信息
const existingUserInfo = uni.getStorageSync('userInfo');
if (existingUserInfo && existingUserInfo.account) {
console.log('已有用户信息:', existingUserInfo);
return existingUserInfo;
}
// 如果没有,则调用接口获取
try {
const userInfo = await this.getUserInfo();
return userInfo;
} catch (error) {
console.error('获取用户信息失败:', error);
uni.showModal({
title: '提示',
content: '获取用户信息失败,请重新登录',
showCancel: false,
success: () => {
uni.navigateTo({
url: '/pages/login/login'
});
}
});
return null;
}
},
// 审核提交方法
async submitForReview() {
const userInfo = await this.checkAndGetUserInfo();
if (!userInfo) {
return;
}
uni.showLoading({
title: '提交中...'
});
try {
let formData = this.buildBusinessData(this.qualificationData, {});
formData.type = 1;
formData.id_type = 1;
if (Array.isArray(formData.qualifications_sector)) {
formData.qualifications_sector = JSON.stringify(formData.qualifications_sector);
}
if (Array.isArray(formData.qualifications_other)) {
formData.qualifications_other = JSON.stringify(formData.qualifications_other);
}
const res = await request.post('/sj/userSjAuth/applyOne', formData);
uni.hideLoading();
if (res.state == 1 || res.code == 200) {
this.successData = res.data.customer_service
console.log(this.successData,
'this.successDatathis.successDatathis.successDatathis.successData=======');
uni.showToast({
title: '提交成功',
icon: 'none',
duration: 1500
});
setTimeout(() => {
this.currentStep = 2;
}, 1500);
} else {
uni.showToast({
title: res.msg || '提交失败',
icon: 'none'
});
}
} catch (error) {
uni.hideLoading();
uni.showToast({
title: '提交失败,请重试',
icon: 'none'
});
}
},
// 构建商家数据
buildBusinessData(qualificationData, storeData) {
qualificationData = qualificationData || {};
storeData = storeData || {};
console.log(qualificationData, 'storeDatastoreDatastoreData');
const formData = {};
Object.assign(formData, storeData);
if (qualificationData.uscc_type) {
formData.uscc_type = qualificationData.uscc_type;
}
// if (qualificationData.contact_identity) {
// formData.contact_identity = qualificationData.contact_identity;
// }
// if (qualificationData.contact_name) {
// formData.contact_name = qualificationData.contact_name;
// }
if (qualificationData.contact_phone) {
formData.contact_phone = qualificationData.contact_phone;
}
if (qualificationData.backup_phone) {
formData.backup_phone = qualificationData.backup_phone;
}
if (qualificationData.contact_type) {
formData.contact_type = qualificationData.contact_type;
}
if (qualificationData.invite_code_other) {
formData.invite_code_other = qualificationData.invite_code_other;
}
if (qualificationData.contact_name) {
formData.contact_name = qualificationData.contact_name;
}
if (qualificationData.dependency) {
formData.dependency = qualificationData.dependency;
}
if (qualificationData.dependency_code) {
formData.dependency_code = qualificationData.dependency_code;
}
if (qualificationData.dependency_province) {
formData.dependency_province = qualificationData.dependency_province;
}
if (qualificationData.dependency_city) {
formData.dependency_city = qualificationData.dependency_city;
}
if (qualificationData.name) {
formData.name = qualificationData.name;
}
if (qualificationData.address) {
formData.address = qualificationData.address;
}
if (qualificationData.longitude) formData.longitude = qualificationData.longitude;
if (qualificationData.latitude) formData.latitude = qualificationData.latitude;
// if (storeData && storeData.servers_kill && storeData.servers_kill.length > 0) {
// // formData.servers_kill = Array.isArray(storeData.servers_kill) ?
// // storeData.servers_kill : [storeData.servers_kill];
// } else {
// formData.servers_kill = [];
// }
if (storeData.head_photo) {
formData.head_photo = storeData.head_photo;
}
if (storeData.name) {
formData.name = storeData.name;
}
if (storeData.business_time) {
formData.business_time = storeData.business_time;
}
if (storeData.apply_state) {
formData.get_msg_method = storeData.apply_state;
}
if (storeData.major) {
formData.major = storeData.major;
}
const userInfo = uni.getStorageSync('userInfo');
if (userInfo && userInfo.account) {
formData.account = userInfo.account;
} else {
const loginAccount = uni.getStorageSync('loginAccount');
if (loginAccount) {
formData.account = loginAccount;
} else if (qualificationData.contact_phone) {
formData.contact_name = qualificationData.contact_name;
} else {
console.error('无法获取账号信息');
uni.showToast({
title: '无法获取用户账号',
icon: 'none'
});
return null;
}
}
return formData;
},
async goNext() {
if (this.currentStep === 0 && !this.isAgree) {
uni.showToast({
title: '请阅读并同意以上协议',
icon: 'none'
});
return;
}
if (this.currentStep === 1) {
if (this.$refs.qualificationInfo) {
const isValid = await this.$refs.qualificationInfo.saveFormData();
if (!isValid) {
return;
}
this.qualificationData = this.$refs.qualificationInfo.getFormData();
}
await this.submitForReview();
return;
}
if (this.currentStep < 3) {
this.currentStep++;
setTimeout(() => {
this.scrollToTop();
}, 100);
}
},
async submitApplication() {
if (this.$refs.storeInfo) {
if (!this.$refs.storeInfo.saveFormData()) {
return;
}
this.storeInfoData = this.$refs.storeInfo.getFormData();
}
uni.showLoading({
title: '提交中...'
});
try {
const formData = this.buildBusinessData(this.qualificationData, this.storeInfoData);
if (!formData) {
uni.hideLoading();
return;
}
formData.type = 1;
formData.id_type = 1;
console.log(formData, '-----------');
if (formData.legal_idcard_expiry_start && formData.legal_idcard_expiry_end) {
formData.legal_idcard_expiry =
formData.legal_idcard_expiry_end === '长久有效' ?
`${formData.legal_idcard_expiry_start} —— 长久` :
`${formData.legal_idcard_expiry_start} —— ${formData.legal_idcard_expiry_end}`;
}
delete formData.legal_idcard_expiry_start
delete formData.legal_idcard_expiry_end
delete formData.contact_phone
delete formData.contact_type
delete formData.contact_name
delete formData.invite_code_other
if (Array.isArray(formData.qualifications_sector)) {
formData.qualifications_sector = JSON.stringify(formData.qualifications_sector);
}
if (Array.isArray(formData.qualifications_other)) {
formData.qualifications_other = JSON.stringify(formData.qualifications_other);
}
console.log(formData, 'formData请求参数');
const res = await request.post('/sj/userSjAuth/apply', formData);
uni.hideLoading();
if (res.state == 1 || res.code == 200) {
this.successData = res.data ? (res.data.customer_service || {}) : {};
uni.showToast({
title: '提交成功',
icon: 'none'
});
setTimeout(() => {
this.currentStep = 4;
}, 1500);
} else {
uni.showToast({
title: res.msg || '提交失败了',
icon: 'none'
});
}
} catch (error) {
console.error('提交失败:', error);
uni.hideLoading();
uni.showToast({
title: '提交失败,请重试',
icon: 'none'
});
}
},
goPrev() {
if (this.currentStep > 0) {
this.currentStep--;
}
},
scrollToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
},
async getXieyi(type) {
this.loading = true;
this.error = null;
try {
const res = await request.post('/user/getsystemtext', {
type
});
this.textData = res.data;
} catch (err) {
console.error('获取协议失败:', err);
this.error = '获取协议内容失败,请重试';
uni.showToast({
title: '获取协议内容失败',
icon: 'none'
});
} finally {
this.loading = false;
}
},
}
}
</script>
<style>
.ruzhu-page {
background: #f5f5f5;
}
.content {
padding: 20rpx 20rpx 50rpx 20rpx;
box-sizing: border-box;
}
.xieyi_content {
padding: 20rpx;
background: #ffffff;
border-radius: 20rpx;
}
.ruzhu-cont {
padding: 24rpx;
background-color: #fff;
}
.ruzhu-text {
font-size: 28rpx;
color: #3D3D3D;
font-weight: 400;
}
.kong {
width: 100vw;
height: 180rpx;
}
/* 底部按钮区域样式 */
.bottom-fixed {
position: fixed;
left: 0;
bottom: 0;
right: 0;
background-color: #ffffff;
padding: 24rpx 0;
}
/* 步骤0按钮布局 */
.step-0-buttons {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
/* 步骤0中的下一步按钮*/
.step-0-buttons .next-btn {
width: 702rpx;
height: 98rpx !important;
display: flex;
justify-content: center;
align-items: center;
background: #FF4767;
border-radius: 49rpx;
}
.step-0-buttons .next-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
}
/* 步骤1和步骤2按钮布局 */
.step-1-buttons,
.step-2-buttons {
display: flex;
justify-content: center;
align-items: center;
}
/* 步骤1中的按钮 */
.step-1-buttons .next-btn {
flex: 1;
height: 98rpx;
display: flex;
justify-content: center;
align-items: center;
background: #FF4767;
border-radius: 49rpx;
}
.step-1-buttons .next-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
}
/* 步骤2中的提交按钮 */
.step-2-buttons .submit-btn {
flex: 1;
height: 98rpx;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
border-radius: 49rpx;
}
.step-2-buttons .submit-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
}
/* 上一步按钮 - 统一所有步骤中的样式 */
.prev-btn {
width: 249rpx;
height: 98rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #f8f8f8;
border-radius: 60rpx;
}
.prev-text {
color: #E8101E;
font-size: 36rpx;
font-weight: 500;
}
.button-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 702rpx;
height: 147rpx;
gap: 20rpx;
}
.agree {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 24rpx;
}
.agree-btn {
width: 32rpx;
height: 32rpx;
margin-right: 13rpx;
}
.agree-tip {
font-size: 26rpx;
font-weight: 400;
color: #666666;
}
.next-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
}
.prev-text {
color: #333;
font-size: 32rpx;
font-weight: 500;
}
.submit-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
}
.showziliao {
width: 690rpx;
height: 98rpx;
background: #FF4767;
border-radius: 49rpx;
}
.showziliaotext {
height: 40rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
line-height: 96rpx;
font-style: normal;
margin: 0 0 0 281rpx;
align-items: center;
}
</style>