tire_parts_shop_applets/pages/tabBar/shoppingCart.vue

<template>
	<view>
		<view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;">
			<view style="display: flex;justify-content: space-between;">
				<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;">
					<view style="margin-right: 40rpx;">|</view>
					<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.filesList" :key="inde" v-if="li.version === '0'" :src="li.url"
							style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
						</image>
					</view>
					<view class="goods">
						<u--text :text="ite.goodsName" size="24rpx" lines="2"></u--text>
						<view class="price">
							<view>￥{{ite.price}}</view>
							<view v-if="!editDel">
								<u-number-box v-model="ite.goodsNum" :min="1" :max="ite.inventory" 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: 120rpx;"></view>
		<view class="submitBar">
			<view class="bar_view">
				<view style="display: flex;align-items: center;">
					<view>
						<u-checkbox-group v-model="radiovalue" placement="column" @change="radioGroupChange">
							<u-checkbox label="全选" name="全选" activeColor="#FD4B09" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view v-if="!editDel" style="margin-left: 20rpx;">
						<view>总计:￥<text>{{totalPrice}}</text></view>
						<view style="font-size: 22rpx;color: #FD4B09;">运费:￥{{totalFreight}}</view>
					</view>
				</view>
				
				<view style="height: 120rpx;display: flex;color: #fff;">
					<view v-if="!editDel" class="lvbutton" @click="submit('W01')">他人代付</view>
					<view v-if="!editDel" class="redbutton" @click="submit('W06')">立即支付</view>
					<view v-else class="redbutton" @click="deleteShopping">删除</view>
					<!-- <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" mode="car" 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: #FD4B09;font-size: 30rpx;">￥{{qrcodeData.salesAmount}}</text>
						</view>
						<view style="color: #9a9a9a;font-size: 26rpx;">二维码有效期: {{qrcodeData.businesDate}}</view>
					</view>
				</view>
			</u-popup>
			
			<!-- 提取去登录 -->
			<u-modal :show="adminShow" :showCancelButton="true" content='当前还未登录请先登录！！'
			 @confirm="adminConfirm" 
			 @cancel="adminCancel" ></u-modal>
			 
			 <u-modal :show="inventoryShow" title="库存不足" :content='inventoryContent' 
			 @confirm="inventoryShow=false;inventoryContent='';companyValue=[]"></u-modal>
	</view>
</template>
<script>
	import {
		shoppingCartList,
		generateOrder,
		generateOrderLimit,
		shoppingCartUpdate,
		getCorpsAddr,
		paramserviceDetail
	} from '@/api/tabBar/shoppingCart.js'
import { registerRuntimeCompiler } from "vue"
import { details } from '@/api/views/personalInformation/index.js'
import {appDetail} from'@/api/views/salesSlip/index.js'
	export default {
		data() {
			return {
				qrcodeshow:false, // 二维码弹窗
				qrcodeData:[], // 二维码数据
				qrcodeurl:'', // 二维码参数
				editDel: false,
				radiovalue: [],
				companyValue: [],
				dataList: [],
				companyValueLength: 0,
				selectedProduct: [],
				totalPrice: 0.00,
				totalFreight: 0.00,
				addres: {},
				checkStatus:null,
				
				adminShow:false,
				
				inventoryShow:false,
				inventoryContent:''
			}
		},
		watch: {
			companyValue() {
				if (this.companyValue.length != 0 || this.companyValueLength != 0) {
					if (this.companyValue.length == this.companyValueLength) {
						this.radiovalue = ["全选"]
					} else {
						this.radiovalue = []
					}
				}
				this.statistics()
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo').tenant_id == '000000') {
				this.adminShow = true
				return 
			}
			// 获取审核状态
			details().then(res => {
				this.checkStatus = res.data.checkStatus
				uni.setStorageSync('checkStatus', res.data.checkStatus);
				if (this.checkStatus != '通过') {
					// uni.showToast({
					// 	title: "当前用户未授权,请联系客服",
					// 	icon: "none",
					// 	mask:true
					// });
					uni.switchTab({
						url:'/pages/tabBar/home'
					})
					return 
				}
			})
			
			
			this.editDel = false
			this.companyValue = []
			shoppingCartList().then(res => {
				this.dataList = res.data
				this.companyValueLength = this.dataList.length
				this.inventoryfun(res.data)
			})
			getCorpsAddr().then(res => {
				this.addres = res.data
			})
			
			// 支付成功之后的回调
			let options = wx.getEnterOptionsSync();
			if (options.scene == '1038' && options.referrerInfo.appId=='wxef277996acc166c3') {
				// 代表从收银台小程序返回
				let extraData = options.referrerInfo.extraData;
				if (!extraData) {
				// "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
				console.log('当前通过物理按键返回，未接收到返参，建议自行查询交易结果');
				} else {
					if (extraData.code == 'success') {
						// "支付成功";
					} else if (extraData.code == 'cancel') {
						// "支付已取消";
						console.log(extraData,'支付已取消');
					} else {
						console.log(extraData,'失败');
						// "支付失败：" + extraData.errmsg;
					}
				}
			}
			
		},
		methods: {
			// 库存弹窗
			inventoryfun(arr){
				let sum = ''
				arr.map((item,index)=>{
					item.list.map(ite=>{
						if (Number(ite.goodsNum) > Number(ite.inventory)) {
							sum += `${ite.goodsName}的库存数量为${ite.inventory},请修正数量后重新结算`
						}
						return ite
					})
					return item
				})
				if(sum != '') {
					this.inventoryContent = sum
					this.inventoryShow = true
				}
			},
			// admin确认
			adminConfirm(){
				uni.clearStorageSync();
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			// admin取消
			adminCancel(){
				uni.switchTab({
					url: '/pages/tabBar/home'
				})
			},
			// 弹窗关闭
			qrcodeclose(){
				this.qrcodeshow = false
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				// 详情调用
				shoppingCartList().then(res => {
					this.dataList = res.data
					this.companyValueLength = this.dataList.length
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			
			clickAddress() {
				this.$u.route('/pages/views/personalInformation/addressManagement');
			},
			deleteGoods(val) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				shoppingCartUpdate({
					ids: val
				}).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: 'none'
					});
					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();
					})
					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)
							}
						}
					}
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				shoppingCartUpdate({
					ids: data.join(',')
				}).then(res => {
					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();
				})
			},
			// 立即支付
			async submit(payType) {
				if (this.selectedProduct.length == 0) {
					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,
									list: ite.list
								})
							}
						}
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					// 判断是否用额度支付
					const personRef = await details()
					console.log(personRef.data,349);
					const totalPrice = Number(this.totalPrice) + Number(this.totalFreight)
					// 是否开通额度
					if (personRef.data.ifLimitAmount == 1) {
						// 额度是否够用
						if (Number(personRef.data.limitAmount >= totalPrice)) {
							// 额度
							generateOrderLimit({
								payType:payType,
								address: this.addres.belongtoarea + this.addres.detailedAddress,
								list: data,
							}).then(res=>{
								uni.hideLoading();
								uni.showToast({
									title: '支付成功',
									mask: true,
									duration: 2000
								});
								setTimeout(function() {
									uni.hideLoading();
								}, 1000);
								// 详情调用
								shoppingCartList().then(res => {
									this.dataList = res.data
									this.companyValueLength = this.dataList.length
								}).catch(err => {})
							})
							return
						}
					}
					
					// 正常支付
					generateOrder({
						payType:payType,
						address: this.addres.belongtoarea + this.addres.detailedAddress,
						list: data,
					}).then(res => {
						let generateOrderData = res.data
						paramserviceDetail({
							paramKey:'cashier.payment'
						}).then(res=>{
							let paramservice = res.data
							// 判断是调支付台的接口还是微信支付的接口
							if (paramservice && paramservice.paramValue == '1') {
								// uni.hideLoading();
								let obj = {
									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,
									},
								}
								console.log(obj);
								if (!generateOrderData.reqsn) {
									uni.showToast({
										title: '当前订单号为空，请联系供应商！！！',
										icon:'none',
										mask: true,
										duration: 2000
									});
									// 详情调用
									shoppingCartList().then(res => {
										this.dataList = res.data
										this.companyValueLength = this.dataList.length
									}).catch(err => {})
									return 
								}
								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,
										limit_pay:"",
										randomstr: generateOrderData.randomstr,
										paytype: generateOrderData.paytype,
										signtype:generateOrderData.signtype,
										sign: generateOrderData.sign,
									},
									success:(a)=>{
										uni.hideLoading();
									},
									fail:(err)=>{
										uni.hideLoading();
									}
								})
							}else {
								if (payType && (payType == 'W01' || payType == 'U01' || payType == 'A01' || payType == 'S01')) {
									console.log(generateOrderData,321);
									// 订单详情接口
									this.qrcodeurl = generateOrderData.url
									appDetail({id:generateOrderData.id}).then(res=>{
										uni.hideLoading();
										this.qrcodeshow = true
										this.qrcodeData = res.data
										console.log(res.data);
									})
								}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);
										}
									})	
								}
								
							}
						})
						
					}).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.inventoryfun(this.dataList)
				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)
				// 			}
				// 		}
				// 	}
				// }、
				for (let item of this.companyValue) {
					for (let ite of this.dataList) {
						if (item == ite.name) {
							data.push({
								name: item,
								list: ite.list
							})
						}
					}
				}
				this.totalPrice = 0
				this.totalFreight = 0
				let num = 0
				for (let item of data) {
					let num1 = 0
					for (let items of item.list) {
						this.totalPrice += Number(items.price) * Number(items.goodsNum)
						num += Number(items.goodsNum)
						num1 += Number(items.goodsNum)
					}
					if (num1 == 1) {
						this.totalFreight += 5
					}

				}
			
				/* if(num>1){
					this.totalFreight = 0
				} */
				this.totalFreight = this.totalFreight.toFixed(2)
				this.totalPrice = this.totalPrice.toFixed(2)
				this.selectedProduct = data
			},
			companyChange(n) {
				this.companyValue = n
				this.inventoryfun(this.dataList)
			}
		}
	}
</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;
		}
	}
	.redbutton {
		background-color: #FD4B09;
		height: 120rpx;
		line-height: 120rpx;
		width: 200rpx;
		text-align: center;
	}
	.lvbutton {
		background-color: #4c9e44;
		height: 120rpx;
		line-height: 120rpx;
		width: 200rpx;
		text-align: center;
	}
</style>