318 lines
9.0 KiB
Vue
318 lines
9.0 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 选项卡切换 -->
|
||
<view class="tab-bar">
|
||
<view class="nav-tab" :class="{ active: activeTab === 'isbn' }" @click="switchTab('isbn')">
|
||
ISBN-上传
|
||
</view>
|
||
<!-- <view class="nav-tab" :class="{ active: activeTab === 'title' }" @click="switchTab('title')">
|
||
仅书名-上传
|
||
</view> -->
|
||
<view class="nav-tab" :class="{ active: activeTab === 'photo' }" @click="switchTab('photo')">
|
||
无ISBN-上传
|
||
</view>
|
||
</view>
|
||
<view class="form-content">
|
||
<isbn-upload-form v-if="activeTab === 'isbn'" :selectedWarehouse="selectedWarehouse" ref="isbnUploadForm"></isbn-upload-form>
|
||
<!-- <title-upload-form v-if="activeTab === 'title'" :selectedWarehouse="selectedWarehouse"></title-upload-form> -->
|
||
<photo-upload-form v-if="activeTab === 'photo'" :selectedWarehouse="selectedWarehouse" ref="photoUploadForm"></photo-upload-form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import IsbnUpload from '@/pages/isbn-upload/index.vue'
|
||
import titleUpload from '@/pages/title-upload/index.vue'
|
||
import photoUpload from '@/pages/photo-upload/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
'isbn-upload-form': IsbnUpload,
|
||
'title-upload-form': titleUpload,
|
||
'photo-upload-form': photoUpload,
|
||
},
|
||
options: {
|
||
enablePullDownRefresh: true,
|
||
backgroundTextStyle: 'dark'
|
||
},
|
||
data() {
|
||
return {
|
||
currentTab: 'isbn',
|
||
activeTab: 'isbn', // 默认选中ISBN上传
|
||
selectedWarehouse: '',
|
||
}
|
||
},
|
||
created() {
|
||
// 页面加载时获取仓库数据
|
||
this.selectedWarehouse = uni.getStorageSync("selectedWarehouse") || null;
|
||
},
|
||
onShow() {
|
||
// 每次页面显示时都重新获取仓库
|
||
this.selectedWarehouse = uni.getStorageSync("selectedWarehouse") || null;
|
||
},
|
||
async onLoad() {
|
||
// const cookiesResponse = await this.getCookies("18904056801", "Long6166@")
|
||
// console.log(cookiesResponse.cookies.PHPSESSID)
|
||
// uni.setStorageSync('cookies', cookiesResponse.cookies.PHPSESSID);
|
||
// console.log('Cookies已保存到本地存储', cookiesResponse.cookies.PHPSESSID);
|
||
},
|
||
methods: {
|
||
switchTab(tab) {
|
||
this.activeTab = tab
|
||
this.selectedWarehouse = uni.getStorageSync("selectedWarehouse") || null;
|
||
},
|
||
// 纯浏览器端 JavaScript 实现
|
||
async getCookies(username, password) {
|
||
try {
|
||
// 第一步：先发送一个GET请求获取初始会话Cookie
|
||
const initResponse = await this.uniRequestPromise({
|
||
url: 'https://login.kongfz.com/Pc/Login/account',
|
||
method: 'GET'
|
||
});
|
||
|
||
// 提取初始响应中的Cookie
|
||
const initCookies = this.extractCookiesFromHeaders(initResponse.header);
|
||
// 第二步：发送登录请求，携带用户名和密码
|
||
const loginData = {
|
||
loginName: username,
|
||
loginPass: password
|
||
};
|
||
|
||
const loginResponse = await this.uniRequestPromise({
|
||
url: 'https://login.kongfz.com/Pc/Login/account',
|
||
method: 'POST',
|
||
data: loginData,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
'Cookie': this.formatCookieHeader(initCookies)
|
||
}
|
||
});
|
||
|
||
// 提取登录响应中的Cookie
|
||
const loginCookies = this.extractCookiesFromHeaders(loginResponse.header);
|
||
|
||
// 合并所有Cookie
|
||
const allCookies = {
|
||
...initCookies,
|
||
...loginCookies
|
||
};
|
||
|
||
// 检查登录是否成功（根据实际返回判断）
|
||
const isLoginSuccess = this.checkLoginSuccess(loginResponse.data);
|
||
|
||
return {
|
||
success: isLoginSuccess,
|
||
cookies: allCookies,
|
||
responseData: loginResponse.data // 包含服务器返回的原始数据
|
||
};
|
||
|
||
} catch (error) {
|
||
console.error('登录请求失败:', error);
|
||
return {
|
||
success: false,
|
||
error: error.message || '登录请求发生错误'
|
||
};
|
||
}
|
||
},
|
||
/**
|
||
* 将 uni.request 转换为 Promise 形式
|
||
*/
|
||
uniRequestPromise(options) {
|
||
return new Promise((resolve, reject) => {
|
||
uni.request({
|
||
...options,
|
||
success: (res) => resolve(res),
|
||
fail: (err) => reject(err)
|
||
});
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 从响应头中提取 Cookies
|
||
*/
|
||
extractCookiesFromHeaders(headers) {
|
||
const cookies = {};
|
||
const cookieHeaders = headers['Set-Cookie'] || headers['set-cookie'];
|
||
|
||
if (!cookieHeaders) return cookies;
|
||
|
||
// 处理可能是数组或字符串的 Cookie 头
|
||
const cookieList = Array.isArray(cookieHeaders) ?
|
||
cookieHeaders : [cookieHeaders];
|
||
|
||
cookieList.forEach(cookieStr => {
|
||
// 提取 cookie 名值对（忽略路径、过期时间等属性）
|
||
const cookieParts = cookieStr.split(';')[0].split('=');
|
||
if (cookieParts.length >= 2) {
|
||
cookies[cookieParts[0].trim()] = cookieParts[1].trim();
|
||
}
|
||
});
|
||
|
||
return cookies;
|
||
},
|
||
|
||
/**
|
||
* 将 Cookie 对象格式化为请求头字符串
|
||
*/
|
||
formatCookieHeader(cookies) {
|
||
return Object.entries(cookies)
|
||
.map(([key, value]) => `${key}=${value}`)
|
||
.join('; ');
|
||
},
|
||
|
||
/**
|
||
* 检查登录是否成功（根据实际接口返回调整）
|
||
*/
|
||
checkLoginSuccess(responseData) {
|
||
// 这里需要根据实际返回的数据结构判断登录是否成功
|
||
// 示例：假设返回包含 success: true 或 code: 200
|
||
if (responseData.success === true || responseData.code === 200) {
|
||
return true;
|
||
}
|
||
|
||
// 默认返回 false
|
||
return false;
|
||
},
|
||
async onPullDownRefresh() {
|
||
console.log('父组件触发下拉刷新');
|
||
try {
|
||
// 获取当前活动的组件引用
|
||
let currentComponent;
|
||
if (this.activeTab === 'isbn') {
|
||
currentComponent = this.$refs.isbnUploadForm;
|
||
console.log('找到ISBN组件引用:', !!currentComponent);
|
||
} else if (this.activeTab === 'photo') {
|
||
currentComponent = this.$refs.photoUploadForm;
|
||
console.log('找到Photo组件引用:', !!currentComponent);
|
||
}
|
||
|
||
// 如果找到组件并且组件有resetData方法，则调用它
|
||
if (currentComponent && typeof currentComponent.resetData === 'function') {
|
||
console.log('开始调用子组件resetData方法');
|
||
|
||
// 等待resetData方法完成
|
||
await currentComponent.resetData();
|
||
|
||
// 确保视图更新
|
||
await this.$nextTick();
|
||
|
||
console.log('子组件resetData方法调用完成，强制更新视图');
|
||
currentComponent.$forceUpdate();
|
||
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
} else {
|
||
console.error('找不到子组件或resetData方法不存在');
|
||
if (currentComponent) {
|
||
console.log('子组件可用方法:', Object.keys(currentComponent).filter(key => typeof currentComponent[key] === 'function'));
|
||
}
|
||
|
||
// 如果找不到方法，尝试直接访问子组件的数据并重置
|
||
if (currentComponent) {
|
||
if (this.activeTab === 'isbn') {
|
||
console.log('尝试直接重置ISBN组件数据');
|
||
// 直接重置ISBN组件的关键数据
|
||
currentComponent.scanResult = '';
|
||
currentComponent.formData = {
|
||
isbn: '',
|
||
sku: '',
|
||
title: '',
|
||
art_no: '',
|
||
more: '',
|
||
bookName: '',
|
||
};
|
||
currentComponent.value4 = 1.00; // 重置价格
|
||
currentComponent.value3 = 1; // 重置库存
|
||
currentComponent.fileList1 = [];
|
||
currentComponent.uploadedImages = [];
|
||
|
||
// 重置市场标签
|
||
currentComponent.marketTags = [{
|
||
label: '在售:',
|
||
value: 0
|
||
},
|
||
{
|
||
label: '旧:',
|
||
value: 0
|
||
},
|
||
{
|
||
label: '新:',
|
||
value: 0
|
||
},
|
||
{
|
||
label: '已售:',
|
||
value: 0
|
||
}
|
||
];
|
||
|
||
// 重置品相选择
|
||
if (currentComponent.$refs.conditionSelect &&
|
||
typeof currentComponent.$refs.conditionSelect.resetSelection === 'function') {
|
||
currentComponent.$refs.conditionSelect.resetSelection();
|
||
}
|
||
|
||
// 重置在售商品列表
|
||
if (currentComponent.$refs.onSaleProductsComponent) {
|
||
currentComponent.$refs.onSaleProductsComponent.updateProducts([]);
|
||
}
|
||
|
||
// 强制更新视图
|
||
await this.$nextTick();
|
||
currentComponent.$forceUpdate();
|
||
console.log('直接重置完成');
|
||
}
|
||
}
|
||
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('刷新失败:', error);
|
||
uni.showToast({
|
||
title: '刷新失败',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
} finally {
|
||
// 停止下拉刷新动画
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh();
|
||
}, 500);
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.tab-container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.tab-bar {
|
||
display: flex;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
background-color: #ffffff;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.nav-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.nav-tab.active {
|
||
background-color: #e6f7ff;
|
||
color: #2979ff;
|
||
}
|
||
</style> |