From 1f7ace96f4be384aa134003a9fa9c4b4dfeb1f4d Mon Sep 17 00:00:00 2001
From: Lj <1095098147@qq.com>
Date: Mon, 30 Jun 2025 16:33:47 +0800
Subject: [PATCH] =?UTF-8?q?'=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/component/home.vue | 341 ++++++++++++++++++++++++++++---
pages/subcomponent/detail.vue | 2 +-
pages/subcomponent/inspection-detail.vue | 10 +-
pages/subcomponent/inspection-report.vue | 117 ++++++-----
pages/subcomponent/order.vue | 82 ++++----
pages/subcomponent/promo-qrcode.vue | 38 ++--
6 files changed, 446 insertions(+), 144 deletions(-)
diff --git a/pages/component/home.vue b/pages/component/home.vue
index 0266c69..d4bf000 100644
--- a/pages/component/home.vue
+++ b/pages/component/home.vue
@@ -5,32 +5,47 @@
-
+
+
+
+
-
-
-
-
+
+
+
-
+
@@ -180,6 +195,37 @@
+
+
+
+
+
+
+
+
+ 二维码加载中...
+
+ 长按识别二维码添加客服微信
+
+
+
+
@@ -194,6 +240,7 @@
priceList: [],
records: [],
videoPlayingStates: {}, // 记录每个视频的播放状态
+ showQrcodeModal: false, // 控制二维码弹窗显示
destinations: [
// {
// icon: '/static/home/爱心援乡.png',
@@ -242,6 +289,10 @@
sbk_cion() {
const item = getApp().globalData.configData.find(i => i.keyName === 'sbk_cion')
return item ? item.keyContent : ''
+ },
+ serviceQrcodeUrl() {
+ const item = getApp().globalData.configData.find(i => i.keyName === 'kefu_code')
+ return item ? item.keyContent : ''
}
},
methods: {
@@ -370,15 +421,120 @@
},
// 视频相关方法
- playVideo(item, index) {
- const videoContext = uni.createVideoContext(`video-${index}`, this);
- if (this.videoPlayingStates[index]) {
- // 如果正在播放，暂停视频
- videoContext.pause();
- } else {
- // 如果未播放，开始播放
- videoContext.play();
+ playVideoFullscreen(item, index) {
+ if (!this.videoPlayingStates[index]) {
+ // 第一次点击：显示视频并开始播放
+ this.$set(this.videoPlayingStates, index, true);
+
+ // 等待视频元素渲染后再进行操作
+ this.$nextTick(() => {
+ setTimeout(() => {
+ const videoContext = uni.createVideoContext(`video-${index}`, this);
+ if (videoContext) {
+ // 直接进入全屏播放
+ videoContext.requestFullScreen({
+ direction: -1 // 自动选择方向
+ });
+ }
+ }, 200);
+ });
+ }
+ },
+
+ // 显示客服二维码弹窗
+ showServiceQrcode() {
+ this.showQrcodeModal = true;
+ },
+
+ // 关闭二维码弹窗
+ closeQrcodeModal() {
+ this.showQrcodeModal = false;
+ },
+
+ // 处理二维码长按事件
+ onQrcodeLongPress() {
+ console.log('长按二维码');
+ // 在微信小程序中，show-menu-by-longpress="true" 会自动处理长按识别
+ // 这里可以添加一些反馈提示
+ uni.showToast({
+ title: '长按识别二维码',
+ icon: 'none',
+ duration: 1500
+ });
+ },
+
+ // 保存二维码到相册
+ saveQrcodeToAlbum() {
+ if (!this.serviceQrcodeUrl) {
+ uni.showToast({
+ title: '二维码还未加载完成',
+ icon: 'none'
+ });
+ return;
}
+
+ // 先授权相册权限
+ uni.getSetting({
+ success: (res) => {
+ if (!res.authSetting['scope.writePhotosAlbum']) {
+ // 没有权限，申请权限
+ uni.authorize({
+ scope: 'scope.writePhotosAlbum',
+ success: () => {
+ this.doSaveQrcodeImage();
+ },
+ fail: () => {
+ // 权限被拒绝，引导用户手动开启
+ uni.showModal({
+ title: '提示',
+ content: '需要您授权保存相册权限',
+ showCancel: false,
+ success: () => {
+ uni.openSetting();
+ }
+ });
+ }
+ });
+ } else {
+ // 已有权限，直接保存
+ this.doSaveQrcodeImage();
+ }
+ }
+ });
+ },
+
+ // 执行保存二维码图片
+ doSaveQrcodeImage() {
+ uni.downloadFile({
+ url: this.serviceQrcodeUrl,
+ success: (res) => {
+ if (res.statusCode === 200) {
+ uni.saveImageToPhotosAlbum({
+ filePath: res.tempFilePath,
+ success: () => {
+ uni.showToast({
+ title: '保存成功',
+ icon: 'success'
+ });
+ },
+ fail: (err) => {
+ console.log('保存失败', err);
+ uni.showToast({
+ title: '保存失败',
+ icon: 'none'
+ });
+ }
+ });
+ }
+ },
+ fail: (err) => {
+ console.log('下载失败', err);
+ uni.showToast({
+ title: '下载失败',
+ icon: 'none'
+ });
+ }
+ });
},
onVideoPlay(index) {
@@ -389,8 +545,23 @@
this.$set(this.videoPlayingStates, index, false);
},
+ onVideoEnded(index) {
+ // 视频播放结束，回到预览状态
+ this.$set(this.videoPlayingStates, index, false);
+ },
+
onFullscreenChange(e) {
console.log('全屏状态改变:', e.detail);
+ const videoIndex = e.target.id.replace('video-', '');
+
+ if (e.detail.fullScreen) {
+ // 进入全屏时，不做任何操作
+ console.log('进入全屏模式，方向:', e.detail.direction);
+ } else {
+ // 退出全屏时，回到预览状态
+ console.log('退出全屏模式，回到预览状态');
+ this.$set(this.videoPlayingStates, videoIndex, false);
+ }
},
// 初始化页面数据的方法
initializePageData() {
@@ -487,6 +658,15 @@
width: 100%;
height: 100%;
+ .video-poster {
+ cursor: pointer;
+ transition: transform 0.2s ease;
+
+ &:active {
+ transform: scale(0.98);
+ }
+ }
+
.video-overlay {
position: absolute;
top: 0;
@@ -494,21 +674,28 @@
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
+ z-index: 10;
+ cursor: pointer;
display: flex;
- flex-direction: column;
justify-content: center;
align-items: center;
- z-index: 10;
- .play-button {
- width: 120rpx;
- height: 120rpx;
- background: rgba(0, 0, 0, 0.6);
+ .play-button-large {
+ width: 100rpx;
+ height: 100rpx;
+ background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10rpx);
+ transition: all 0.3s ease;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
+
+ &:active {
+ transform: scale(0.9);
+ background: rgba(0, 0, 0, 0.8);
+ }
}
}
}
@@ -1031,4 +1218,110 @@
transform: scale(1);
}
}
+
+ // 客服二维码弹窗样式
+ .qrcode-modal-mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+ backdrop-filter: blur(5rpx);
+ }
+
+ .qrcode-modal-content {
+ background: #fff;
+ border-radius: 24rpx;
+ width: 600rpx;
+ max-width: 90vw;
+ animation: fadeInScale 0.3s ease;
+ overflow: hidden;
+ }
+
+ .qrcode-modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 40rpx 40rpx 20rpx 40rpx;
+ border-bottom: 1rpx solid #f0f0f0;
+ }
+
+ .qrcode-modal-title {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .qrcode-modal-close {
+ padding: 10rpx;
+ margin: -10rpx;
+ }
+
+ .qrcode-modal-body {
+ padding: 40rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .qrcode-modal-img {
+ width: 400rpx;
+ height: 400rpx;
+ border-radius: 16rpx;
+ margin-bottom: 30rpx;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .qrcode-placeholder {
+ width: 400rpx;
+ height: 400rpx;
+ border-radius: 16rpx;
+ margin-bottom: 30rpx;
+ background: #f5f5f5;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ text {
+ color: #999;
+ font-size: 28rpx;
+ }
+ }
+
+ .qrcode-modal-tip {
+ font-size: 28rpx;
+ color: #666;
+ text-align: center;
+ line-height: 1.4;
+ margin-bottom: 20rpx;
+ }
+
+ .qrcode-actions {
+ display: flex;
+ justify-content: center;
+ margin-top: 20rpx;
+ }
+
+ .save-btn {
+ background: linear-gradient(90deg, #ff8917, #ffd01e);
+ color: #fff;
+ border: none;
+ border-radius: 25rpx;
+ padding: 16rpx 40rpx;
+ font-size: 28rpx;
+ font-weight: bold;
+
+ &::after {
+ border: none;
+ }
+
+ &:active {
+ opacity: 0.8;
+ }
+ }
\ No newline at end of file
diff --git a/pages/subcomponent/detail.vue b/pages/subcomponent/detail.vue
index deef3cc..1361d54 100644
--- a/pages/subcomponent/detail.vue
+++ b/pages/subcomponent/detail.vue
@@ -240,7 +240,7 @@ export default {
},
viewReport() {
// 查看质检报告，传入orderId
- uni.navigateTo({
+ uni.navigateTo({
url: `/pages/subcomponent/inspection-report?orderId=${this.orderId}`
})
},
diff --git a/pages/subcomponent/inspection-detail.vue b/pages/subcomponent/inspection-detail.vue
index 3a5a857..10079b1 100644
--- a/pages/subcomponent/inspection-detail.vue
+++ b/pages/subcomponent/inspection-detail.vue
@@ -183,12 +183,12 @@ export default {
}))
} else {
// 如果没有具体说明，创建默认的问题项
- this.problemList = [
- {
+ this.problemList = [
+ {
title: '质量问题',
- images: this.testingImages
- }
- ]
+ images: this.testingImages
+ }
+ ]
}
} else if (this.status === 'qualified') {
this.qualifiedImages = this.testingImages
diff --git a/pages/subcomponent/inspection-report.vue b/pages/subcomponent/inspection-report.vue
index 6deea85..4b5ec41 100644
--- a/pages/subcomponent/inspection-report.vue
+++ b/pages/subcomponent/inspection-report.vue
@@ -30,63 +30,69 @@
-->
-
-
- 质检合格
-
-
-
-
-
- {{item.name}}
- 查看详情
-
- {{item.desc}}
-
-
- ￥{{item.price}}
- /件
- x{{item.count}}
+
+
+
+ 质检合格
+
+
+
+
+
+ {{item.name}}
+ 查看详情
+
+ {{item.desc}}
+
+
+ ￥{{item.price}}
+ /件
+ x{{item.count}}
+
+ ￥{{item.total}}
- ￥{{item.total}}
+
+ 件数：{{totalCount}} 件
+ 结算金额：￥{{totalAmount}}
+
-
- 件数：{{totalCount}} 件
- 结算金额：￥{{totalAmount}}
-
-
-
- 质量问题
-
-
-
-
-
- {{item.name}}
- 查看详情
-
- {{item.desc}}
-
-
-
- x{{item.count}}
+
+ 质量问题
+
+
+
+
+
+ {{item.name}}
+ 查看详情
+
+ {{item.desc}}
+
+
+
+ x{{item.count}}
+
+
-
-
-
- 件数：{{problemCount}} 件
- 结算金额：￥ 0
+
+ 件数：{{problemCount}} 件
+ 结算金额：￥ 0
+
-
-
+
@@ -243,9 +249,7 @@ export default {
.inspection-page {
min-height: 100vh;
background: #422525;
- height: 100vh;
- overflow: hidden;
-// padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
+ position: relative;
}
.nav-bar {
@@ -361,18 +365,21 @@ export default {
.main-content {
margin-top: 20rpx;
-// padding-top: 88rpx;
background: linear-gradient(180deg, #fef7e6 0%, #fff 50%);
- height: calc(100vh - 88rpx);
+ height: calc(100vh - 200rpx);
width: 100vw;
box-sizing: border-box;
position: relative;
z-index: 11;
border-radius: 40rpx 40rpx 0 0;
- overflow: hidden;
+}
+
+.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
+ padding-bottom: calc(env(safe-area-inset-bottom) + 60rpx);
+ min-height: 100%;
}
.inspection-card {
@@ -380,11 +387,12 @@ export default {
border-radius: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.08);
padding: 40rpx 32rpx 32rpx 32rpx;
- margin: 24rpx auto 0 auto;
+ margin: 24rpx auto 0 auto;
width: calc(100vw - 64rpx);
max-width: 700rpx;
display: flex;
flex-direction: column;
+ flex-shrink: 0;
.report-title {
font-size: 32rpx;
font-weight: bold;
@@ -500,7 +508,8 @@ export default {
}
.problem-card {
- margin-top: 40rpx;
+ margin-top: 24rpx;
+ margin-bottom: 40rpx;
}
.problem-price-row {
diff --git a/pages/subcomponent/order.vue b/pages/subcomponent/order.vue
index a4a0425..51752a8 100644
--- a/pages/subcomponent/order.vue
+++ b/pages/subcomponent/order.vue
@@ -126,57 +126,57 @@ export default {
async fetchOrderList(isLoadMore = false) {
this.loading = true
try {
- let statusArr = []
- if (this.currentTab === 1) statusArr = [0, 1, 2] // 进行中
- else if (this.currentTab === 2) statusArr = [3] // 已完成
- else statusArr = [] // 全部
- let allOrders = []
- if (statusArr.length === 0) {
- // 全部
+ let statusArr = []
+ if (this.currentTab === 1) statusArr = [0, 1, 2] // 进行中
+ else if (this.currentTab === 2) statusArr = [3] // 已完成
+ else statusArr = [] // 全部
+ let allOrders = []
+ if (statusArr.length === 0) {
+ // 全部
+ await new Promise(resolve => {
+ this.$api('getOrderListPage', { pageSize: this.pageSize, current: this.page }, res => {
+ if (res && res.code === 200 && res.result && Array.isArray(res.result.records)) {
+ allOrders = res.result.records
+ if (isLoadMore) {
+ this.orderList = this.orderList.concat(allOrders)
+ } else {
+ this.orderList = allOrders
+ }
+ this.hasMore = allOrders.length === this.pageSize
+ }
+ resolve()
+ })
+ })
+ } else {
+ // 多状态合并
+ for (let status of statusArr) {
await new Promise(resolve => {
- this.$api('getOrderListPage', { pageSize: this.pageSize, current: this.page }, res => {
+ this.$api('getOrderListPage', { status, pageSize: this.pageSize, current: this.page }, res => {
if (res && res.code === 200 && res.result && Array.isArray(res.result.records)) {
- allOrders = res.result.records
- if (isLoadMore) {
- this.orderList = this.orderList.concat(allOrders)
- } else {
- this.orderList = allOrders
- }
- this.hasMore = allOrders.length === this.pageSize
+ allOrders = allOrders.concat(res.result.records)
}
resolve()
})
})
+ }
+ // 去重
+ const map = {}
+ allOrders = allOrders.filter(item => {
+ if (map[item.id]) return false
+ map[item.id] = 1
+ return true
+ })
+ if (isLoadMore) {
+ this.orderList = this.orderList.concat(allOrders)
} else {
- // 多状态合并
- for (let status of statusArr) {
- await new Promise(resolve => {
- this.$api('getOrderListPage', { status, pageSize: this.pageSize, current: this.page }, res => {
- if (res && res.code === 200 && res.result && Array.isArray(res.result.records)) {
- allOrders = allOrders.concat(res.result.records)
- }
- resolve()
- })
- })
- }
- // 去重
- const map = {}
- allOrders = allOrders.filter(item => {
- if (map[item.id]) return false
- map[item.id] = 1
- return true
- })
- if (isLoadMore) {
- this.orderList = this.orderList.concat(allOrders)
- } else {
- this.orderList = allOrders
- }
- this.hasMore = allOrders.length === this.pageSize
+ this.orderList = allOrders
}
+ this.hasMore = allOrders.length === this.pageSize
+ }
} catch (error) {
console.error('获取订单列表失败:', error)
} finally {
- this.loading = false
+ this.loading = false
}
},
switchTab(index) {
@@ -259,7 +259,7 @@ export default {
uni.stopPullDownRefresh()
}, 1000)
}
- }
+ }
}
}
diff --git a/pages/subcomponent/promo-qrcode.vue b/pages/subcomponent/promo-qrcode.vue
index 1f02825..446cd14 100644
--- a/pages/subcomponent/promo-qrcode.vue
+++ b/pages/subcomponent/promo-qrcode.vue
@@ -10,20 +10,20 @@
-
+
-
+
-
- {{userInfo.nickName || '用户'}}
-
-
-
-
-
-
-
+ {{userInfo.nickName || '用户'}}
+
+
+
+
+
+
+
+
@@ -189,24 +189,24 @@
padding: 0 32rpx;
padding-top: var(--status-bar-height);
background: #fff;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
z-index: 999;
box-sizing: border-box;
.back {
padding: 20rpx;
margin-left: -20rpx;
- }
+ }
.title {
- flex: 1;
- text-align: center;
+ flex: 1;
+ text-align: center;
font-size: 34rpx;
font-weight: 500;
- color: #222;
+ color: #222;
}
}