tire_parts_shop_applets/pages/views/salesSlip/obligation.vue

<template>
	<view>
		<view class="card" v-for="(item,index) in dataList" :key="index">
			<view v-for="(ite,ind) in item.list" :key="ind">
				<view style="font-size: 26rpx;color: #717171;margin-bottom: 28rpx;">
					{{item.name}}
				</view>
				<view>
					<view style="display: flex;" v-for="(li,inde) in ite.orderItemsList" :key="inde">
						<view style="display: flex;width: 100%;align-items: center;margin-bottom: 20rpx;">
							<image :src="li.url"
								style="width:120rpx;height: 120rpx;border-radius: 10rpx;border: 2rpx solid #EEEEEE;margin-right: 27rpx;"
								mode="scaleToFill">
							</image>
							<view style="width:477rpx;">
								<view
									style="display: flex;justify-content: space-between;align-items: center;font-size: 26rpx;color: #4E4E4E;font-weight: 500;">
									<u--text color="#4E4E4E" size="26rpx" :lines="1" :text="li.goodsName"></u--text>
									<view>
										￥{{li.price}}
									</view>
								</view>
								<view style="display: flex;justify-content:flex-end;margin-top: 20rpx;">
									<view style="font-size: 26rpx;color: #4D4D4D;">
										x{{li.goodsNum}}
									</view>
								</view>
							</view>
						</view>

					</view>

				</view>
				<view style="display: flex;justify-content: flex-end;">
					<view style="width: 136rpx;margin-right: 17rpx;">
						<u-button type="primary" text="取消订单" color="#E75F37" shape='circle' plain
							@click="deleteGoods(ite.id)"></u-button>
					</view>
					<view style="width: 136rpx;">
						<u-button type="primary" text="去支付" color="#E75F37" shape='circle'
							@click="paySubmit(item,index,ind)"></u-button>
					</view>
				</view>
				<view style="width: 623rpx;height: 2rpx;background: #F1F1F1;margin: 48rpx 0 40rpx 0;">
				</view>
				<view style="font-size: 26rpx;color: #717171;">
					<view style="margin-bottom: 20rx;">
						订单编号：<text style="color: #C4C4C4;">{{ite.ordNo}}</text>
					</view>
					<view style="margin-bottom: 20rx;">
						支付方式：<text
							style="color: #C4C4C4;">{{ite.payType && ite.payType.indexOf('01') != -1?'扫码支付':'微信支付'}}</text>
					</view>
					<view>
						下单时间：<text style="color: #C4C4C4;">{{ite.createTime}}</text>
					</view>
				</view>
			</view>

		</view>
		<u-empty style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
			v-if="dataList.length == 0 && !isLoading" mode="car" text="待付款为空"
			icon="http://cdn.uviewui.com/uview/empty/car.png" />

		<u-popup :show="qrcodeshow" mode="center" :closeable="true" @close="qrcodeclose">
			<view style="padding: 20rpx;">
				<view style="font-size: 26rpx;">截屏二维码支付</view>
				<view>
					<uqrcode ref="uqrcode" canvas-id="qrcode" size="600" sizeUnit="rpx" :value="qrcodeurl"
						:options="{ margin: 5 }"></uqrcode>
					<!-- options 配置项 https://uqrcode.cn/doc/document/native.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95  -->
				</view>

				<view>
					<!-- {{qrcodeData.contacts}} -->
					<view style="font-size: 34rpx;font-weight: 500;">{{qrcodeData.salesCompanyName}}</view>
					<view style="color: #9a9a9a;font-size: 26rpx;">
						<text>金额:</text>
						<text style="color: #E75F37;font-size: 30rpx;">￥{{qrcodeData.salesAmount}}</text>
					</view>
					<view style="color: #9a9a9a;font-size: 26rpx;">二维码有效期: {{qrcodeData.businesDate}}</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import {
		obligationList,
		generateOrder,
		payPrepay,
		shoppingCartUpdate,
		getCorpsAddr,
		update,
		paramserviceDetail
	} from '@/api/tabBar/shoppingCart.js'
	import {
		registerRuntimeCompiler
	} from "vue"
	import {
		logo
	} from '../../../common/setting'
	import {
		appDetail
	} from '@/api/views/salesSlip/index.js'
	import {
		dateFormat
	} from '@/common/dateFormat.js'
	export default {
		data() {
			return {
				qrcodeshow: false, // 二维码弹窗
				qrcodeData: [], // 二维码数据
				qrcodeurl: '', // 二维码参数

				editDel: false,
				radiovalue: [],
				companyValue: [],
				dataList: [],
				companyValueLength: 0,
				selectedProduct: [],
				totalPrice: 0.00,
				totalFreight: 0.00,
				addres: {},
				isLoading: true
			}
		},
		watch: {
			companyValue() {

				if (this.companyValue.length != 0 || this.companyValueLength != 0) {
					if (this.companyValue.length == this.companyValueLength) {
						this.radiovalue = ["全选"]
					} else {
						this.radiovalue = []
					}
				}
				// if (this.companyValue.length > 0) {
				// 	console.log(21321324);

				// 	// if (this.companyValue.length == this.companyValueLength) {
				// 	// 	this.radiovalue = ["全选"]
				// 	// } else {
				// 	// 	this.radiovalue = []
				// 	// }
				// }
				// this.statistics()
			}
		},
		onLoad() {
			console.log(Date.parse('2023-11-22 00:00:00') + 60 * 60 * 1000);
			console.log(dateFormat(new Date(Date.parse('2023-11-22 00:00:00') + 60 * 60 * 1000)), 155);
		},
		onShow() {
			this.editDel = false
			this.companyValue = []
			this.isLoading = true
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			obligationList().then(res => {
				console.log(res);
				this.dataList = res.data
				this.companyValueLength = this.dataList.length
				this.isLoading = false // 添加这一行
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
			})
			getCorpsAddr().then(res => {
				this.addres = res.data
			})
		},
		methods: {
			// 弹窗关闭
			qrcodeclose() {
				this.qrcodeshow = false
			},

			deleteGoods(val) {
				console.log(val);

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				update(val).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: 'none'
					});
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.editDel = false
					this.companyValue = []
					obligationList().then(res => {
						this.dataList = res.data
						this.companyValueLength = this.dataList.length
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					})
				}).catch(err => {
					uni.hideLoading();
				})
			},
			deleteShopping() {
				if (this.selectedProduct.length == 0) {
					uni.showToast({
						title: "请先选择要支付的商品",
						icon: 'none'
					});
					return
				}
				let data = []
				for (let item of this.companyValue) {
					for (let ite of this.dataList) {
						if (item == ite.name) {
							for (let it of ite.list) {
								data.push(it.id)
							}
						}
					}
				};

				console.log(data.join(","));
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				update(data.join(",")).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: 'none'
					});
					uni.hideLoading();
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.editDel = false
					this.companyValue = []
					obligationList().then(res => {
						this.dataList = res.data
						this.companyValueLength = this.dataList.length
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					})
				}).catch(err => {
					uni.hideLoading();
				})
			},
			paySubmit(val, index, ind) {
				this.statistics(val, index, ind)
			},
			submit(payType) {
				console.log(this.selectedProduct)
				if (this.selectedProduct.length == 0) {
					uni.showToast({
						title: "请先选择要支付的商品",
						icon: 'none'
					});
					return
				}
				for (let item of this.selectedProduct) {
					if (!item.payType) return uni.showToast({
						title: "当前订单支付方式异常,请重新购买",
						icon: 'none',
						duration: 2500
					});
					if (item.payType && item.payType == 'W06') {
						// 微信支付
					} else {
						// 扫码支付
						let i = 0
						let j = 0
						console.log(this.selectedProduct)
						this.selectedProduct.forEach((item, index) => {
							console.log(item.payType.indexOf('01'))
							if (item.payType && item.payType.indexOf('01') != -1) {
								i++
							} else {
								j++
							}
						})
						if (j != 0) {
							uni.showToast({
								title: "请选择相同的支付方式",
								icon: 'none'
							});
							return
						}
						if (i > 1) {
							uni.showToast({
								title: "扫码支付只能选择一个",
								icon: 'none'
							});
							return
						}
					}
				}

				if (this.companyValue.length > 0) {
					let data = []
					for (let item of this.companyValue) {
						for (let ite of this.dataList) {
							if (item == ite.name) {
								data.push({
									name: item,
								})
							}
						}
					}

					console.log('data', data);
					uni.showLoading({
						title: '加载中',
						mask: true
					});

					payPrepay({
						srcOrderNo: data[0].name
					}).then(res => {
						let generateOrderData = res.data
						paramserviceDetail({
							paramKey: 'cashier.payment'
						}).then(res => {
							let paramservice = res.data
							// 判断是调支付台的接口还是微信支付的接口
							if (paramservice && paramservice.paramValue == '1') {
								wx.openEmbeddedMiniProgram({
									appId: 'wxef277996acc166c3',
									extraData: {
										cusid: generateOrderData.cusid,
										appid: generateOrderData.appid,
										orgid: generateOrderData.orgid,
										version: generateOrderData.version,
										trxamt: generateOrderData.trxamt,
										reqsn: generateOrderData.reqsn,
										notify_url: generateOrderData.notify_url,
										body: generateOrderData.body,
										remark: generateOrderData.remark,
										validtime: generateOrderData.validtime,
										limit_pay: generateOrderData.limit_pay,
										randomstr: generateOrderData.randomstr,
										paytype: generateOrderData.paytype,
										signtype: generateOrderData.signtype,
										sign: generateOrderData.sign,
									},
									success: (a) => {
										uni.hideLoading();
									},
									fail: (err) => {
										uni.hideLoading();
									}
								})
							} else {
								if (this.selectedProduct[0].payType &&
									(this.selectedProduct[0].payType == 'W01' || this.selectedProduct[0]
										.payType == 'U01' || this.selectedProduct[0].payType == 'A01' ||
										this.selectedProduct[0].payType == 'S01')) {
									this.qrcodeurl = this.selectedProduct[0].payUrl
									appDetail({
										id: this.selectedProduct[0].id
									}).then(res => {
										uni.hideLoading();
										this.qrcodeshow = true
										this.qrcodeData = res.data
										// 往后延长一小时
										this.qrcodeData.businesDate = dateFormat(new Date(Date
											.parse(this.qrcodeData.businesDate) + 60 * 60 *
											1000))

									})
								} else {
									uni.requestPayment({
										provider: "wxpay",
										appId: generateOrderData.appId,
										timeStamp: generateOrderData.timeStamp,
										nonceStr: generateOrderData.nonceStr,
										package: generateOrderData.package,
										signType: generateOrderData.signType,
										paySign: generateOrderData.paySign,
										success(res) {
											uni.showToast({
												title: '支付成功',
												mask: true,
												duration: 2000
											});
											setTimeout(function() {
												uni.hideLoading();
												// this_.refresh(res.data.data.id)
											}, 1000);
										},
										fail(e) {
											console.log(e);
											uni.showToast({
												title: "支付失败",
												icon: 'none',
												mask: true
											});
											setTimeout(function() {
												uni.hideLoading();
												// this_.refresh(res.data.id)
											}, 1000);
										}
									})
								}

							}
						})


						// uni.showToast({
						// 	title: "提交成功",
						// 	icon: 'none'
						// });
						// uni.hideLoading();
						// uni.showLoading({
						// 	title: '加载中',
						// 	mask: true
						// });
						// this.editDel = false
						// this.companyValue = []
						// shoppingCartList().then(res => {
						// 	this.dataList = res.data
						// 	this.companyValueLength = this.dataList.length
						// 	uni.hideLoading();
						// }).catch(err => {
						// 	uni.hideLoading();
						// })
					}).catch(err => {
						uni.hideLoading();
					})
				}
			},
			radioGroupChange(e) {
				this.radiovalue = e
				if (e.length == 0) {
					this.companyValue = []
				} else {
					for (let li of this.dataList) {
						if (!this.companyValue.includes(li.name)) {
							this.companyValue.push(li.name)
						}
					}
				}
				// this.statistics()
			},
			statistics(val, index, ind) {
				let data = []
				for (let it of val.list) {
					data.push(it)
				}
				this.totalPrice = 0
				this.totalFreight = 0
				for (let item of data) {
					for (let orderItem of item.orderItemsList) {
						this.totalPrice += Number(orderItem.price) * Number(orderItem.goodsNum)
						console.log(orderItem.goodsNum);
						if (Number(orderItem.goodsNum) == 1) {
							this.totalFreight += 5
						}
					}

				}
				this.totalFreight = this.totalFreight.toFixed(2)
				this.totalPrice = this.totalPrice.toFixed(2)
				this.selectedProduct = data
				this.submit()
			},
			companyChange(n) {
				if (n == 0) {
					this.dataList.forEach((e => {
						e.disabled = false
					}))
				} else {
					this.dataList.forEach((e => {
						if (n[0] != e.name) {
							e.disabled = true
						}

					}))
				}
				this.companyValue = n
			}
		}
	}
</script>
<style lang="scss" scoped>
	.card {
		padding: 54rpx 63rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		::v-deep .u-button {
			height: 60rpx;
		}
	}
</style>