ddcWechat/pages/rent/order/orderList.vue

<template>
	<view :style="colorStyle">
		<view class="my-order">
			<view class="header bg-color">
				<view class="picTxt acea-row row-between-wrapper">
					<view class="text">
						<view class="name">{{$t(`服务信息`)}}</view>
						<view>{{$t(`消费订单`)}}：{{ orderData.sun_order_count || 0 }}
							{{$t(`总消费`)}}：{{$t(`￥`)}}{{ orderData.sun_order_amount || 0 }}
						</view>
					</view>
					<view class="pictrue">
						<image src="../static/orderTime.png"></image>
					</view>
				</view>
			</view>
			<view class="nav acea-row row-around">
				<view class="item" :class="orderStatus ==-1 ? 'on' : ''" @click="statusClick(-1)">
					<view>{{$t(`全部`)}}</view>
					<view class="num">{{ orderData.sun_order_count || 0 }}</view>
				</view>
				<view class="item" :class="orderStatus == 0 ? 'on' : ''" @click="statusClick(0)">
					<view>{{$t(`待支付`)}}</view>
					<view class="num">{{ orderData.unpaid_count || 0 }}</view>
				</view>
				<view class="item" :class="orderStatus == 1 ? 'on' : ''" @click="statusClick(1)">
					<view>{{$t(`进行中`)}}</view>
					<view class="num">{{ orderData.progress_count || 0 }}</view>
				</view>
				<view class="item" :class="orderStatus == 2 ? 'on' : ''" @click="statusClick(2)">
					<view>{{$t(`已完成`)}}</view>
					<view class="num ">{{ orderData.finish_count || 0 }}</view>
				</view>
				<view class="item" :class="orderStatus == 3 ? 'on' : ''" @click="statusClick(3)">
					<view>{{$t(`已释放`)}}</view>
					<view class="num">{{ orderData.unbinding_count || 0 }}</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in orderList" :key="index">
					<view @click="goOrderDetails(item.order_id)">
						<view class="title acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<view>{{ item.add_time }}</view>
							</view>
							<view v-if="item.status == 0" class="font-color">待支付</view>
							<view v-else-if="item.status == 1" class="font-color">进行中</view>
							<view v-else-if="item.status == 2 " class="font-color">
								已完成
							</view>
							<view v-else-if="item.status == 3 " class="font-color">
								待释放
							</view>
						</view>
						<view class="item-info acea-row row-between row-top">
							<view class="pictrue">
								<easy-loadimage mode="widthFix" :image-src="item.rent.image"></easy-loadimage>
							</view>
							<view class="text">
								<text class="name line2">{{ item.rent.title }}</text>
								<view class="money">
									<block v-if="item.car_lease==1">
										<view class="return">
											以租代购

										</view>
										<view class="lowe">
											剩余{{item.several_months-item.months}}月
										</view>
									</block>
									<view v-if="item.car_lease==0" class="return">
										月付
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom acea-row row-right row-middle">
						<view class="totalPrice">
							<text class="money">每月{{$t(`￥`)}}{{ item.pay_price }}</text>
						</view>
						<view class="bnt cancelBnt" v-if="item.binding_state == 0 &&item.status == 1"
							@click="onCartBind(item)">
							绑定车辆</view>
						<view class="bnt cancelBnt" v-if="item.status == 0"
							@click="goPay(item.pay_price, item.order_id)">
							<text>{{$t(`立即付款`)}}</text>
						</view>
						<view class="bnt cancelBnt" v-if="item.status == 1&&item.months!=item.several_months"
							@click="goPay(item.pay_price, item.order_id)">
							<text >{{$t(`续费`)}}</text>
						</view>
						<!-- <view @click="navDetail(item)" class="bnt gredBnt" v-if="item.status >0">
							明细
						</view> -->
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper font-color-white" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage v-if="!loading" :title="$t(`暂无订单`)"></emptyPage>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
			</view>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
		<payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
			:isCall="true" :totalPrice="totalPrice"></payment>
	</view>
</template>

<script>
	import {
		orderDel,
	} from '@/api/order.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		getRentOrderData,
		getRentOrder,
		postRentPay,
		// rentSetcar
	} from '@/api/rent.js';
	import home from '@/components/home';
	import payment from '@/components/payment';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import emptyPage from '@/components/emptyPage.vue';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			payment,
			home,
			emptyPage,
		},
		mixins: [colors],
		data() {
			return {
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: this.$t(`加载更多`), //提示语
				orderList: [], //订单数组
				orderData: {}, //订单详细统计
				orderStatus: -1, //订单状态
				page: 1,
				limit: 20,
				payMode: [{
						name: this.$t(`微信支付`),
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: this.$t(`使用微信快捷支付`),
						payStatus: true
					},
					{
						name: this.$t(`支付宝支付`),
						icon: 'icon-zhifubao',
						value: 'alipay',
						title: this.$t(`使用支付宝支付`),
						payStatus: true
					},
					{
						name: this.$t(`余额支付`),
						icon: 'icon-yuezhifu',
						value: 'yue',
						title: this.$t(`可用余额`),
						number: 0,
						payStatus: true
					},
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				// 保存当前订单数据
				actionOrder: {},
				payLoding:false,//判断是否支付中
			};
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (this.isLogin) {
				this.page = 1;
				this.orderList = []
				this.loadend = false;
				this.onLoadFun();
				this.getRentOrder();
			} else {
				toLogin();
			}
		},
		methods: {
			navDetail(item) {
				uni.navigateTo({
					url: './orderDetail?id='+item.order_id,
				});
			},

			onLoadFun() {
				this.getRentOrderData();
				this.getUserInfo();
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				console.log(e, '2333');
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			/**
			 * 获取用户信息
			 *
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.payMode[2].number = res.data.now_money;
					that.$set(that, 'payMode', that.payMode);
				});
			},
			/**
			 * 关闭支付组件
			 *
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 生命周期函数--监听页面加载
			 */
			onLoad: function(options) {
				if (options.status) this.orderStatus = options.status;
			},
			/**
			 * 获取订单统计数据
			 *
			 */
			getRentOrderData: function() {
				let that = this;
				getRentOrderData().then(res => {
					res.data.progress_count += res.data.not_binding_count;
					that.$set(that, 'orderData', res.data);
					that.payMode.map(item => {
						if (item.value == 'weixin') {
							item.payStatus = res.data.pay_weixin_open ? true : false;
						}
						if (item.value == 'alipay') {
							item.payStatus = res.data.ali_pay_status ? true : false;
						}
						if (item.value == 'yue') {
							item.payStatus = res.data.yue_pay_status == 1 ? true : false;
						}
						if (item.value == 'friend') {
							item.payStatus = res.data.friend_pay_status == 1 ? true : false;
						}
					});
					//#ifdef MP
					this.payMode[1].payStatus = false;
					//#endif
				});
			},
			onCartBind(item) {
				const that = this;
				uni.navigateTo({
					url: './onBindCar?id=' + item.order_id,
				});
				return

				// // #ifndef H5
				// uni.showModal({
				// 	title: '提示',
				// 	content: '请选择绑定方式',
				// 	showCancel: false,
				// 	cancelText: '扫码',
				// 	confirmText: '手填',
				// 	success: res => {
				// 		if (res.confirm) {
				// 			that.bindImport(item.id)
				// 		}
				// 		if (res.cancel) {
				// 			that.bindQr(item.id)
				// 		}
				// 	},
				// 	fail: () => {},
				// 	complete: () => {}
				// });
				// // #endif
				// // #ifdef H5
				// that.bindImport(item.id)
				// // #endif
			},
			// 手输
			// bindImport(id) {
			// 	const that = this;
			// 	uni.showModal({
			// 		title: '绑定车辆',
			// 		placeholderText: '请输入车辆编号',
			// 		editable: true,
			// 		cancelText: '取消',
			// 		confirmText: '确定',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				if (res.content) {
			// 					that.rentSetcar(res.content, id)
			// 				} else {
			// 					uni.showToast({
			// 						title: '请输入车辆编号',
			// 						icon: 'error'
			// 					})
			// 					that.bindImport(id)
			// 				}
			// 			}
			// 		},
			// 		fail: () => {},
			// 		complete: () => {}
			// 	});
			// },
			// 扫码绑定
			// bindQr(id) {
			// 	uni.scanCode({
			// 		onlyFromCamera: true,
			// 		scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
			// 		success(res) {
			// 			that.rentSetcar(res.result, id)
			// 		}
			// 	})
			// },
			// 提交绑定
			// rentSetcar(content, id) {
			// 	rentSetcar({
			// 		id,
			// 		machine_no: content
			// 	}).then((res) => {

			// 	}).catch((res) => {
			// 		console.log(res);
			// 	})
			// },
			/**
			 * 打开支付组件
			 *
			 */
			goPay: function(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);
			},
			// 支付方式
			payCheck(value) {
				const that = this;
				if(that.payLoding){
					return
				}
				that.payLoding = true;
				postRentPay({
					'order_id': that.pay_order_id,
					'pay_type': value,
					// 'quitUrt': that.storeInfo.cooperate_id,
					// #ifdef MP
					from: 'routine',
					// #endif
					// #ifdef H5
					from: that.$wechat.isWeixin() ? 'weixin' : 'weixinh5',
					// #endif
					// #ifdef APP-PLUS
					from: 'app'
					// #endif
				}).then((res) => {
					let status = res.data.status,
						orderId = res.data.result.order_id,
						jsConfig = res.data.result.jsConfig,
						goPages = '/pages/rent/carpay/paySuccess?order_id=' + orderId + '&msg=' + res.msg +'&type=3' + '&totalPrice=' + that.totalPrice,friendPay = '/pages/users/payment_on_behalf/index?order_id=' + orderId + '&spread=' +that.$store.state.app.uid
					switch (status) {
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages
							});
						case 'ALLINPAY_PAY':
							uni.hideLoading();
							// #ifdef MP
							this.initIn = true
							wx.openEmbeddedMiniProgram({
								appId: 'wxef277996acc166c3',
								extraData: {
									cusid: jsConfig.cusid,
									appid: jsConfig.appid,
									version: jsConfig.version,
									trxamt: jsConfig.trxamt,
									reqsn: jsConfig.reqsn,
									notify_url: jsConfig.notify_url,
									body: jsConfig.body,
									remark: jsConfig.remark,
									validtime: jsConfig.validtime,
									randomstr: jsConfig.randomstr,
									paytype: jsConfig.paytype,
									sign: jsConfig.sign,
									signtype: jsConfig.signtype
								}
							})
							this.jumpData = {
								orderId: res.data.result.orderId,
								msg: res.msg,
							}
							// #endif
							// #ifdef APP-PLUS
							plus.runtime.openURL(jsConfig.payinfo);
							setTimeout(e => {
								uni.reLaunch({
									url: goPages
								})
							}, 1000)
							// #endif
							// #ifdef H5
							this.formpost(res.data.result.pay_url, jsConfig)
							// #endif
							break;
						case 'PAY_ERROR':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages
							});
							break;
						case 'SUCCESS':
							uni.hideLoading();
							if ((that.BargainId || that.combinationId || that.pinkId || that.seckillId || that.discountId) && that.payType != 'friend')
								return that.$util.Tips({
									title: res.msg,
									icon: 'success'
								}, {
									tab: 4,
									url: goPages
								});
							return that.$util.Tips({
								title: res.msg,
								icon: 'success'
							}, {
								tab: 4,
								url: that.payType == 'friend' ? friendPay : goPages
							});
							break;
						case 'WECHAT_PAY':
							that.toPay = true;
							// #ifdef MP
							/* that.toPay = true; */
							let mp_pay_name = ''
							if (uni.requestOrderPayment) {
								mp_pay_name = 'requestOrderPayment'
							} else {
								mp_pay_name = 'requestPayment'
							}
							uni[mp_pay_name]({
								timeStamp: jsConfig.timestamp,
								nonceStr: jsConfig.nonceStr,
								package: jsConfig.package,
								signType: jsConfig.signType,
								paySign: jsConfig.paySign,
								success: function(res) {
									uni.hideLoading();
									if (that.BargainId || that.combinationId || that.pinkId || that.seckillId || that.discountId)
										return that.$util.Tips({
											title: that.$t(`支付成功`),
											icon: 'success'
										}, {
											tab: 4,
											url: goPages
										});
									return that.$util.Tips({
										title: that.$t(`支付成功`),
										icon: 'success'
									}, {
										tab: 5,
										url: goPages
									});
								},
								fail: function(e) {
									uni.hideLoading();
									return that.$util.Tips({
										title: that.$t(`取消支付`)
									}, {
										tab: 5,
										url: goPages + '&status=2'
									});
								},
								complete: function(e) {
									uni.hideLoading();
									//关闭当前页面跳转至订单状态
									if (res.errMsg == 'requestPayment:cancel' || e.errMsg =='requestOrderPayment:cancel') return
									 that.$util
										.Tips({
											title: that.$t(`取消支付`)
										}, {
											tab: 5,
											url: goPages + '&status=2'
										});
								},
							})
							// #endif
							// #ifdef H5
							this.$wechat.pay(res.data.result.jsConfig).then(res => {
								return that.$util.Tips({
									title: that.$t(`支付成功`),
									icon: 'success'
								}, {
									tab: 5,
									url: goPages
								});
							}).catch(res => {
								if (!this.$wechat.isWeixin()) {
									uni.redirectTo({
										url: goPages + '&msg=' + that.$t(`支付失败`) + '&status=2'
										// '&msg=支付失败&status=2'
									})
								}
								if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
									title: that.$t(`取消支付`)
								}, {
									tab: 5,
									url: goPages + '&status=2'
								});
							})
							// #endif
							// #ifdef APP-PLUS
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: jsConfig,
								success: (e) => {
									let url = goPages;
									uni.showToast({
										title: that.$t(`支付成功`)
									})
									setTimeout(res => {
										uni.redirectTo({
											url: url
										})
									}, 2000)
								},
								fail: (e) => {
									let url = '/pages/rent/carpay/paySuccess?order_id=' +orderId +'&msg=' + that.$t(`支付失败`);
									uni.showModal({
										content: that.$t(`支付失败`),
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												uni.redirectTo({
													url: url
												})
											} else if (res.cancel) {}
										}
									})
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
						case 'PAY_DEFICIENCY':
							uni.hideLoading();
							//余额不足
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages + '&status=1'
							});
							break;

						case "WECHAT_H5_PAY":
							uni.hideLoading();
							that.$util.Tips({
								title: that.$t(`订单创建成功`)
							}, {
								tab: 4,
								url: goPages + '&status=0'
							});
							setTimeout(() => {
								location.href = res.data.result.jsConfig.mweb_url;
							}, 2000);
							break;

						case 'ALIPAY_PAY':
							//#ifdef H5
							if (this.from === 'weixin') {
								uni.redirectTo({
									url: `/pages/users/alipay_invoke/index?id=${orderId}&pay_key=${res.data.result.pay_key}`
								});
							} else {
								uni.hideLoading();
								that.formContent = res.data.result.jsConfig;
								that.$nextTick(() => {
									document.getElementById('alipaysubmit').submit();
								})
							}
							//#endif
							// #ifdef MP
							uni.navigateTo({
								url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
							});
							// #endif
							// #ifdef APP-PLUS
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: jsConfig,
								success: (e) => {
									uni.showToast({
										title: that.$t(`支付成功`)
									})
									let url = '/pages/rent/carpay/paySuccess?order_id=' +orderId +'&msg=' + that.$t(`支付成功`);
									setTimeout(res => {
										uni.redirectTo({
											url: url
										})
									}, 2000)

								},
								fail: (e) => {
									let url = '/pages/rent/carpay/paySuccess?order_id=' + orderId +'&msg=' + that.$t(`支付失败`);
									uni.showModal({
										content: that.$t(`支付失败`),
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												uni.redirectTo({
													url: url
												})
											} else if (res.cancel) {}
										}
									})
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
					}
					that.payLoding = false;
				}).catch((res) => {
					console.log(res);
					that.payLoding = false;
				})

			},
			/**
			 * 支付成功回调
			 *
			 */
			pay_complete: function() {
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.pay_close = false;
				uni.navigateTo({
					url: '/pages/rent/carpay/paySuccess?order_id=' + this.pay_order_id +'&msg=' + this.$t(`支付成功`) + '&type=3&totalPrice=' + this.totalPrice
				})
				this.pay_order_id = '';
				this.getRentOrderData();
				this.getRentOrder();
			},
			/**
			 * 支付失败回调
			 *
			 */
			pay_fail: function() {
				this.pay_close = false;
				this.pay_order_id = '';
			},
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(order_id) {
				let that = this;
				if (!order_id) {
					return that.$util.Tips({
						title: that.$t(`缺少订单号无法查看订单详情`)
					})
				};
				uni.navigateTo({
					url: './orderDetail?id=' + order_id
				});
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.orderStatus) return;
				this.orderStatus = status;
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getRentOrder();
			},
			/**
			 * 获取订单列表
			 */
			getRentOrder: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				getRentOrder({
						status: that.orderStatus,
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						let list = res.data.list || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
						that.page = that.page + 1;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = that.$t(`加载更多`);
					});
			},

			/**
			 * 删除订单
			 */
			delOrder: function(order_id, index) {
				let that = this;
				uni.showModal({
					title: that.$t(`删除订单`),
					content: that.$t(`确定删除该订单`),
					success: function(res) {
						if (res.confirm) {
							orderDel(order_id)
								.then(res => {
									that.orderList.splice(index, 1);
									that.$set(that, 'orderList', that.orderList);
									that.$set(that.orderData, 'unpaid_count', that.orderData
										.unpaid_count - 1);
									that.getRentOrderData();
									return that.$util.Tips({
										title: that.$t(`删除成功`),
										icon: 'success'
									});
								})
								.catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
						} else if (res.cancel) {
							return that.$util.Tips({
								title: that.$t(`已取消`)
							});
						}
					}
				});

			}
		},
		onReachBottom: function() {
			this.getRentOrder();
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
	};
</script>

<style scoped lang="scss">
	.my-order {
		background-color: var(--view-theme);
		min-height: 100vh;

		.header {
			height: 260rpx;
			padding: 0 30rpx;

			.picTxt {
				height: 190rpx;

				.text {
					color: rgba(255, 255, 255, 0.8);
					font-size: 26rpx;
					font-family: 'Guildford Pro';

					.name {
						font-size: 34rpx;
						font-weight: bold;
						color: #fff;
						margin-bottom: 20rpx;
					}

				}

				.pictrue {
					width: 122rpx;
					height: 109rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}
			}
		}

		.nav {
			background-color: var(--view-theme-16);
			width: 690rpx;
			height: 140rpx;
			border-radius: 6rpx;
			margin: -73rpx auto 0 auto;

			.item {
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				width: 3rem;
				padding: 27rpx 0;
				border-bottom: 5rpx solid transparent;

				&.on {
					/* #ifdef H5 || MP */
					font-weight: bold;
					/* #endif */
					/* #ifdef APP-PLUS */
					color: #000;
					/* #endif */
					border-color: var(--view-priceColor);
				}
			}

			.num {
				margin-top: 18rpx;
			}
		}

		.list {
			width: 690rpx;
			margin: 14rpx auto 0 auto;

			.item {
				background-color: var(--view-theme-16);
				border-radius: 6rpx;
				margin-bottom: 14rpx;

				.title {
					height: 84rpx;
					padding: 0 30rpx;
					border-bottom: 2rpx solid var(--view-theme);
					font-size: 28rpx;
					color: #FFF;

					.sign {
						font-size: 24rpx;
						padding: 0 7rpx;
						height: 36rpx;
						margin-right: 15rpx;
					}
				}

				.item-info {
					padding: 0 30rpx;
					margin-top: 22rpx;

					.pictrue {
						width: 120rpx;
						height: 120rpx;
						background-color: #FFF;

						/deep/,
						/deep/image,
						/deep/.easy-loadimage,
						/deep/uni-image {

							width: 120rpx;
							height: 120rpx;
							border-radius: 6rpx;
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 6rpx;
						}
					}

					.text {
						width: 486rpx;
						font-size: 28rpx;
						color: #999;
						margin-top: 6rpx;
						// display: flex;
						line-height: 39rpx;

						.name {
							// width: 306rpx;
							color: #FFF;
							height: 78rpx;
						}

						.money {
							text-align: left;
							flex: 1;
							display: flex;
							.return {
								font-size: 24rpx;
								background-color: var(--view-priceColor);
								color: var(--view-theme);
								border-radius: 50rpx;
								padding: 0 20rpx;
								margin-right: 10rpx;
							}
							.lowe{
								color: #FFF;
							}
						}
					}
				}

				.totalPrice {
					font-size: 26rpx;
					color: #282828;
					text-align: left;
					flex-grow: 1;

					.money {
						font-size: 28rpx;
						font-weight: bold;
						color: var(--view-priceColor);
					}
				}

				.bottom {
					height: 107rpx;
					padding: 0 30rpx;

					.bnt {
						width: 170rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						color: #fff;
						border-radius: 50rpx;
						font-size: 27rpx;

						&.cancelBnt {
							color: var(--view-theme);
							background-color: var(--view-priceColor);
						}
						&.gredBnt{
							color: #999;
							background-color: #FFF;
							// border: 1px solid var(--view-priceColor);
						}
						&~.bnt {
							margin-left: 17rpx;
						}
					}
				}

			}
		}
	}
	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
		.pictrue {
			width: 414rpx;
			height: 336rpx;
			margin: 78rpx auto 56rpx auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>