tire_parts_shop_applets/pages/views/salesSlip/obligation.vue

<template>
	<view>
		<view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;">
			<view>
<!-- 				<view>
					<view style="display: flex;width: 580rpx;" v-if="!editDel" @click="clickAddress">
						<u-icon name="map"></u-icon>
						<u--text :text="addres.belongtoarea + addres.detailedAddress" size="28rpx" lines="1"></u--text>
					</view>
				</view> -->
				<view style="display: flex;justify-content: flex-end;">
					<view @click="editDel = !editDel">{{editDel?'取消':'编辑'}}</view>
				</view>
			</view>
		</view>
		<u-checkbox-group v-model="companyValue" placement="column" @change="companyChange">
			<view class="collection" v-for="(item,index) in dataList" :key="index">
				<view>
					<u-checkbox activeColor="#FD4B09" shape="circle" :customStyle="{marginBottom: '8px'}"
						:label="item.name" :name="item.name" labelSize="28rpx"></u-checkbox>
				</view>
				<view style="margin-left: 20rpx;display: flex;align-items: center;" v-for="(ite,ind) in item.list"
					:key="ind">
					<view>
						<image v-for="(li,inde) in ite.orderItemsList" :key="inde"  :src="li.goodsFilesList[0].url"
							style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
						</image>
					</view>
					<view class="goods" >
						<u--text v-for="(ites,inds) in ite.orderItemsList" :key="inds" :text="ites.goodsName" size="24rpx" lines="2"></u--text>
						<view class="price" v-for="(ites,inds) in ite.orderItemsList" :key="inds">
							<view>￥{{ites.price}}</view>
							<view v-if="!editDel">
								<u-number-box v-model="ites.goodsNum" :min="1" :max="ites.goodsNum" buttonSize="40rpx"
									@change="(val)=>{statistics(val,index,ind)}"></u-number-box>
							</view>
						</view>
					</view>
					<view v-if="editDel">
						<u-icon name="minus-circle-fill" color="#ff0000" size="52rpx"
							@click="deleteGoods(ite.id)"></u-icon>
					</view>
				</view>
			</view>
		</u-checkbox-group>
		<view style="height: 100rpx;"></view>
		<view class="submitBar" style="padding-bottom: env(safe-area-inset-bottom);">
			<view class="bar_view">
				<view v-if="!editDel" style="margin-left: 300rpx;">
					<view>总计:￥<text>{{totalPrice}}</text></view>
					<view style="font-size: 22rpx;color: #FD4B09;">运费:￥{{totalFreight}}</view>
				</view>
				<view style="width: 200rpx;">
					<u-button shape="circle" size="small" text="立即支付" v-if="!editDel"
						:disabled="this.selectedProduct.length == 0"
						color="linear-gradient(0deg, #FD5003 0%, #FBA680 100%)" @click="submit"></u-button>
					<u-button shape="circle" size="small" text="删除" v-else :disabled="this.selectedProduct.length == 0"
						color="linear-gradient(0deg, #FD5003 0%, #FBA680 100%)" @click="deleteShopping"></u-button>
				</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" />
	</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'
	export default {
		data() {
			return {
				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()
			}
		},
		onShow() {
			this.editDel = false
			this.companyValue = []
			this.isLoading = true
			obligationList().then(res => {
				console.log(res);
				this.dataList = res.data
				this.companyValueLength = this.dataList.length
				this.isLoading = false // 添加这一行
			})
			getCorpsAddr().then(res => {
				this.addres = res.data
			})
		},
		methods: {
			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();
					})
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			deleteShopping() {
				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();
				})
			},
			submit() {
				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.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 {
								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) {
				if (val) {
					this.dataList[index].list[ind].goodsNum = val.value
				}
				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)
							}
						}
					}
				}
				console.log(data);
				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
			},
			companyChange(n) {
				this.companyValue = n
			}
		}
	}
</script>
<style lang="scss" scoped>
	.collection {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.goods {
		width: 100%;
		margin-left: 20rpx;
		height: 200rpx;
		display: grid;
		align-content: space-between;

		.price {
			display: flex;
			justify-content: space-between !important;
			margin-top: 20rpx;
			align-items: center;

			view:nth-child(1) {
				color: #FD4B09;
				font-size: 40rpx;
			}
		}
	}

	.submitBar {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		z-index: 10;

		.bar_view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
		}
	}
</style>