refactor(order): 优化订单相关功能

- materialEdit 页面添加提交确认弹窗,重新对接接口 - 优化 order/detail 页面布局，添加去支付按钮，添加h5获取code方法（未完善，支付未完成） - 更新 product/detail 页面，调整立即购买按钮样式 - 在 tabBar/order 页面添加默认订单详情跳转功能
2025-03-07 14:24:56 +08:00 · 2025-03-07 14:24:56 +08:00 · 4e6414d8c8
parent ff0855c438
commit 4e6414d8c8
5 changed files with 116 additions and 44 deletions
--- a/common/api/module/orderApi.js
+++ b/common/api/module/orderApi.js
@ -112,9 +112,9 @@ export default {
 		})
 	},
 	// 提交商品素材列表（完成）
-	mallMaterialCommit(orderId,productId){
+	mallMaterialCommit(orderItemId){
 		return new Promise((resolve, reject) => {
-			request.put('/mall/material/commit/' + orderId + '/' + productId)
+			request.put('/mall/material/commit/' + orderItemId )
 				.then((res) =>{
 					resolve(res);
 				}).catch(err =>{
--- a/pages/fun/materialEdit.vue
+++ b/pages/fun/materialEdit.vue
@ -21,7 +21,7 @@
 					<view v-if="item.attrValue" class="preview-wrapper">
 						<image :src="item.fileUrl" mode="scaleToFill" class="preview-image" @click="previewImage(item.fileUrl)">
 						</image>
-						<u-icon name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
+						<u-icon v-if="!getDisabledStatus()" name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
 					</view>
 					<u-button @click="chooseImage(item,index)" type="primary" :disabled="getDisabledStatus()"
 						:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传图片' }}</u-button>
@ -33,7 +33,7 @@
 				<view class="upload-area">
 					<view v-if="item.attrValue" class="audio-preview">
 						<text class="audio-name">{{ shortenFileName(item.fileName,20) || '已上传音频文件' }}</text>
-						<u-icon name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
+						<u-icon v-if="!getDisabledStatus()" name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
 					</view>
 					<u-button @click="chooseAudio(item,index)" type="primary" :disabled="getDisabledStatus()"
 						:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传音频' }}</u-button>
@ -48,7 +48,7 @@
 					<view v-if="item.attrValue" class="audio-preview">
 						<!-- <video :src="item.fileUrl" class="preview-video"></video> -->
 						<text class="audio-name">{{ shortenFileName(item.fileName,20) || '已上传音频文件' }}</text>
-						<u-icon name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
+						<u-icon v-if="!getDisabledStatus()" name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
 					</view>
 					<u-button @click="chooseVideo(item,index)" type="primary" :disabled="getDisabledStatus()"
 						:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传视频' }}</u-button>
@ -64,8 +64,8 @@
 		<u-select v-model="materialShow" mode="single-column" :list="materialDictList" value-name="id" label-name="dictName" @confirm="changeTemplate"></u-select>
 		<!-- 提交按钮 -->
 		<view class="btn-box" v-if="commitState === 'add' || commitState === 'draft' || commitState === 'back'">
-			<u-button type="default" :loading="buttonLoading" class="bg-grey" @click="submitForm('draft')">暂存</u-button>
-			<u-button type="primary" :loading="buttonLoading" @click="submitForm('submit')">提交</u-button>
+			<u-button type="default" :loading="buttonLoading" class="bg-grey" @click="verifyForm('draft')">暂存</u-button>
+			<u-button type="primary" :loading="buttonLoading" @click="verifyForm('submit')">提交</u-button>
 		</view>
 		<u-toast ref="uToast" />
 	</view>
@ -381,7 +381,7 @@
 					current: 0
 				});
 			},
-			async submitForm(status) {
+			verifyForm(status){
 				console.log('提交的表单数据：', this.materialTemplateList);
 				if(!this.materialfrom.dictId && this.commitState === 'add'){
 					this.$refs.uToast.show({
@ -398,6 +398,20 @@
 					})
 					return;
 				}
+				let btnTitle = status==='draft' ?'暂存':'提交'
+				uni.showModal({
+					title: '操作确认',
+					content: '是否要'+ btnTitle +'素材？',
+					success: (res) => {
+						if (res.confirm) {
+							this.submitForm(status)
+						}
+					}
+				});
+				
+			},
+			
+			async submitForm(status) {
 				try {
 					this.buttonLoading = true;
 					// 这里添加实际的提交逻辑
@ -411,6 +425,7 @@
 						});
 						this.buttonLoading = false;
 						this.materialfrom.flowId = res.data.id;
+						this.getProductDetail();
 					}else{
 						res = await this.$api.orderApi.mallMaterialUpdateBatch(this.materialTemplateList);
 						this.buttonLoading = false;
@ -427,47 +442,16 @@
 							delta: 1
 						})
 					} else {
+						this.buttonLoading = true;
 						//  提交，调用完成接口
-						let res1 = await this.$api.orderApi.mallMaterialCommit(this.orderId, this.productId);
+						let res1 = await this.$api.orderApi.mallMaterialCommit(this.orderItemId);
 						if (res1.code === 200) {
 							this.$refs.uToast.show({
 								title: '提交成功',
 								type: 'success',
 							})
 						}
-			
-						let res2 = await this.$api.orderApi.startWorkFlow({
-							businessKey: this.materialfrom.flowId,
-							tableName: 'biz_order_material',
-							variables: {
-								entity: {
-									id: this.materialfrom.flowId,
-									status: 'waiting',
-									orderId: this.orderId,
-									productId: this.productId,
-									orderItemId: this.orderItemId
-								}
-							}
-						});
-						if (res2.code === 200) {
-							this.$refs.uToast.show({
-								title: '提交成功',
-								type: 'success',
-							})
-							let res3 = await this.$api.orderApi.completeTask({
-								messageType: ['1'],
-								taskId: res2.data.taskId,
-								taskVariables: {
-									entity: {
-										id: this.materialfrom.flowId,
-										status: 'waiting',
-										orderId: this.orderId,
-										productId: this.productId,
-										orderItemId: this.orderItemId
-									}
-								}
-							});
-						}
+						this.buttonLoading = false;
 			
 						uni.navigateBack({
 							delta: 1
--- a/pages/order/detail.vue
+++ b/pages/order/detail.vue
@ -75,6 +75,10 @@
          <text class="value">{{ orderInfo.orderNote || '无' }}</text>
        </view>
      </view>
+			<!-- 底部购买按钮 -->
+			<view class="btn-box">
+				<u-button type="primary" style="width: 680rpx;" :loading="buttonLoading" @click="handlePay">去支付</u-button>
+			</view>
    </view>
 </template>

@ -122,15 +126,38 @@ export default {
 			mall_order_status:[],
 			mall_source_type:[],
 			mall_pay_type:[],
+			buttonLoading:false,
+			officialAccount:{
+				appid:'wx80a304ffbfb30995',
+				appsecret:'ca307cfb6c94e8ac015e26cfd717a91c',
+			},
+			code:'',
+			openId:'',
    }
  },
 	onLoad(option) {
+		
 		this.getDictDataList('mall_order_status');
 		this.getDictDataList('mall_source_type');
 		this.getDictDataList('mall_pay_type');
 		console.log("option",option)
    this.orderId = option.id;
    this.getOrderDetail(option.id);
+		let res = uni.getStorageSync('openid');
+		if (res.length == 2) {
+			this.openid = res[1].data;
+		}else{
+			// #ifdef H5
+			let code = this.getUrlCode('code')
+			if(code || this.code){
+				this.code = code;
+				this.getOpenidAndUserinfo(code)
+			}else{
+				console.log("当前网址",window.location.href)
+				this.getH5Code()
+			}
+			// #endif
+		}
 	},
 	methods:{
    // 获取订单详情
@ -166,6 +193,45 @@ export default {
 				current: '', // 当前显示图片的 http 链接
 				urls: [url] // 需要预览的图片 http 链接列表
 			});
+		},
+		handlePay() {
+		  // 处理购买逻辑
+		  uni.showToast({
+		    title: '正在开发中...',
+		    icon: 'none'
+		  })
+			// openid获取支付参数、调用支付
+			
+		},
+		getH5Code(){
+			if(this.isWechat()) {
+				// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
+				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.officialAccount.appid+'&redirect_uri=' + encodeURIComponent(window.location.href) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
+				console.log("跳转授权页面")
+				// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
+				// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
+				// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
+			}
+		},
+		getUrlCode(name){
+			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
+		},
+		isWechat(){
+			return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
+		},
+		getOpenidAndUserinfo(code){
+			console.log("code换openid")
+			uni.request({
+					url: 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+this.officialAccount.appid+'&secret='+this.officialAccount.secret +'&grant_type=authorization_code&code='+code,
+					success: (res) => {
+							console.log('通过code获取openid和accessToken', res)
+							// if(res.data.code === 200) {
+							// 		// 登录成功，可以将用户信息和token保存到缓存中
+							// 		uni.setStorageSync('userInfo', res.data.result.userInfo)
+							// 		uni.setStorageSync('token', res.data.result.token)
+							// }
+					}
+			})
 		}
  }
 }
@ -177,6 +243,7 @@ export default {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
+	padding-bottom: 120rpx;
 }

 .info-card {
@ -302,5 +369,26 @@ export default {
 .status {
  color: #19be6b;
 }
+
+.btn-box {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	height: 120rpx;
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #fff;
+	z-index: 999;
+	button{
+		width: 680rpx;
+		height: 85rpx;
+		border-radius: 10rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}
 </style>

--- a/pages/product/detail.vue
+++ b/pages/product/detail.vue
@ -32,7 +32,7 @@
    <!-- 底部购买按钮 -->
    <view class="btn-box">
      <!-- <button class="buy-button" @click="handleBuy">立即购买</button> -->
-			<u-button type="primary" :loading="buttonLoading" @click="handleBuy">立即购买</u-button>
+			<u-button type="primary" style="width: 680rpx;" :loading="buttonLoading" @click="handleBuy">立即购买</u-button>
    </view>
  </view>
 </template>
--- a/pages/tabBar/order.vue
+++ b/pages/tabBar/order.vue
@ -22,7 +22,7 @@
 			:up="upOption"
    >
      <view class="order-list">
-        <view class="order-item" v-for="(item, index) in orderList" :key="index">
+        <view class="order-item" v-for="(item, index) in orderList" :key="index"  @click.stop="goDetail(item)">
          <view class="order-header">
            <text class="order-no">订单号：{{item.orderSn}}</text>
            <text class="order-status" :class="['dict-item',getDictName('mall_order_status',item.orderStatus,'listClass')]">{{getDictName('mall_order_status',item.orderStatus,'dictLabel')}}</text>