yicangzongtai_app_240321/pages/product/surePay/surePay.vue

<template>
	<view class="container">
		<navbar :config="config" :backoff="backoff" backColor="#666"></navbar>
		<view class="topStatus u-flex-center-sa u-plr30" :style="{ top: tabTop + 'px' }"
			v-if="sureDataAll.is_able_select_self_take">
			<text class="u-1A1A1A u-font30 " :class="status == 1 ? 'active' : ''" @click="changeStatus(1)">快递配送</text>
			<text class="u-1A1A1A u-font30" :class="status == 2 ? 'active' : ''" @click="changeStatus(2)">上门自提</text>
		</view>

		<view class="carbox" :class="sureDataAll.is_able_select_self_take ? 'changeTabtwo' : ''">
			<view class="addressBox">
				<view class="" v-if="status == 1">
					<ldaddress :value="sureDataAll.receipt" :link="true"></ldaddress>
				</view>
				<view class="goHome" v-if="status == 2 && sureDataAll.is_able_select_self_take">
					<view class="u-flex-center u-p30 u-border-one-one">
						<image class="u-avatar104 u-mr25" :src="sureDataAll.self_take_shop.logo" mode=""></image>
						<view class="u-flex1">
							<view class="u-1A1A1A u-font28 u-bold ">{{ sureDataAll.self_take_shop.shop_name }}</view>
							<view class="smallAddress u-mt10">
								<text class="iconfont u-font30 u-mr10 " style="color: #FA6138;">&#xe611;</text>
								<text class="u-font24 u-bold u-999">
									{{ sureDataAll.self_take_shop.province_name }}{{ sureDataAll.self_take_shop.city_name }}{{ sureDataAll.self_take_shop.area_name
									}}{{ sureDataAll.self_take_shop.address }}
								</text>
							</view>
						</view>
					</view>
					<view class="u-flex-center u-p30">
						<view class="u-mr45 u-font28 u-999 u-flex-center">
							<text class="u-333 u-bold">提货人：</text>
							<input style="width: 150rpx;" type="text" :value="self_take.receiver"  maxlength="8"
								placeholder="提货人姓名" placeholder-style="font-size:30rpx;" />
						</view>
						<view class="u-font28 u-999 u-flex-center">
							<text class="u-mr10 iconfont u-02331F u-font30">&#xe64e;</text>
							<input style="width: 260rpx;" type="number" :value="self_take.mobile" maxlength="11" 
								placeholder="提货人手机号" placeholder-style="font-size:30rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="" v-for="(pitem, index) in sureDataAll.shop_orders" :key="pitem.source_shop_id">
				<view class="shopList u-mt10">
					<ldshop :shopStatus="shopStatus" :value="pitem.source_shop_name"></ldshop>
					<view v-for="item in pitem.items" :key="item.goods_id">
						<ldgoods :value="item"></ldgoods>
					</view>
				</view>

				<!-- 备注 -->
				<view class="listText u-p30">
					<view class="u-font28 u-181818 title">
						<span>购买备注</span>
						<span class="num">{{ pitem.user_remark.length }} / 80</span>
					</view>
					<textarea class="textarea u-mt10 u-font28 u-333" :auto-height="true" :maxlength="80"
						@input="textareaText($event, index)" value="" placeholder="选填，给商家留言" />
				</view>
				<!-- list -->
				<view class="listText">
					<!-- <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818"><text>商品金额</text></view>
            <view class="u-font30 u-999">¥ {{ pitem.original_goods_amount }}</view>
          </view> -->

					<view class="u-border-one-one u-p30 border u-flex-center-sb" v-if="pitem.first_order_activity">
						<view class="u-font28 u-181818">
							<text>首单优惠</text>
							<text
								class="u-font24 u-999">（满{{ pitem.first_order_activity.full }}减{{ pitem.first_order_activity.reduction }}）</text>
						</view>
						<view class="u-font30 u-999">-¥ {{ pitem.first_order_reduced }}</view>
					</view>
					<view class="freight">
						<view class="u-border-one-one border u-p30 u-flex-center-sb">
							<view class="u-font28 u-181818"><text>运费</text></view>
							<view class="u-font30 u-999">
								<!-- +{{ pitem.total_freight }}元 -->
								{{pitem.total_freight?'+¥'+pitem.total_freight+'元':'免运费'}}
							</view>
						</view>
					</view>
					<!-- <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818 u-flex-center-sb"><text
                class="iconfont3 consumption_value-icon">&#xe603;</text><text>消费补贴</text></view>
            <view class="u-font30 u-999 consumption_value">
              <rich-text :nodes="$mUtil.isToFixed(pitem.total_consumption_value, 2)"></rich-text>
            </view>
          </view> -->
					<view class="u-flex-center pt-pb25"
						style="justify-content: flex-end;height: 108rpx;padding-right: 28rpx;">
						<view class="">共{{ pitem.goods_num }}件商品，小计：</view>
						<view style="display: flex;align-items: center;">
							<text></text>
							<view class="u-bold u-FF0000">
								<rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)"></rich-text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listText u-mt10" >
				<view v-if="platformCoupon.my_coupon_id!==0" @click="checkCoupon()"
					class="u-border-one-one border u-p30 u-flex-center-sb">
					<view class="u-font28 u-181818"><text>平台优惠</text></view>
					<view v-if="platformCoupon" class="u-font30 u-999">
						<text
							style="white-space: nowrap;max-width: 450rpx;overflow: hidden;text-overflow: ellipsis;display: inline-block;vertical-align: middle;">{{platformCoupon.coupon_name}}</text>
						<text
							style="color: red;margin-left: 15rpx;display: inline-block;vertical-align: middle;">-{{platformCoupon.coupon_result_value}}</text>
					</view>
					<view v-else class="u-font30 u-999">选择优惠券></view>
				</view>
				 <view v-if="sureDataAll.has_platform" class="u-border-one-one border u-p30">
          <view class="u-flex-center-sb">
            <view class="u-font28 u-181818"><text>积分抵扣</text></view>
            <view class="u-font30 u-999">
              <u-switch v-model="usePlatformPoint" @change="changePlatformPoint()" active-color='#FA6138'></u-switch>
            </view>
          </view>
          <view style="color: #808080;font-size: 24rpx;">共计{{sureDataAll.integral_able}}<text
              v-if="usePlatformPoint">，可使用{{sureDataAll.total_point}}抵扣{{sureDataAll.total_point}}元</text></view>
        </view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="botfixed u-flex-center-sb">
			<view class="leftAll u-flex-center">
				<view class="u-flex-center">
					<text class="u-mr20 u-font24 u-666">共{{ totaltNum }}件</text>
					<text class="u-font28 u-333 ">合计：</text>
					<view class="u-FF0000 u-bold">
						<rich-text :nodes="$mUtil.priceBigSmall(sureDataAll.total_money)"></rich-text>
					</view>
				</view>
			</view>
			<view class="rightP u-flex-center" @click="submitOrder">
				<view class="u-btn btnWidth u-ml30">提交订单</view>
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	var app = getApp();
	import ldaddress from '../../../components/ld-address/ld-address.vue';
	import ldshop from '../../../components/ld-shop/ld-shop.vue';
	import ldgoods from '../../../components/ld-goods/ld-goods.vue';
	import {
		myUserInfo
	} from "@/api/government.js"
	export default {
		components: {
			ldaddress,
			ldshop,
			ldgoods
		},
		data() {
			return {
				shopStatus: false,
				totaltNum: 0,
				tabTop: 0,
				price: 20,
				loading: false,
				status: 1, //快递方式标志
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '确认订单',
					color: '#1a1a1a',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#fff'],
					statusBarFontColor: '#fff'
				},
				backoff: true,
				sureDataAll: {},
				shopDiscounts: {},
				self_take: {},
				dataJson: {},
				addressChose: false,
				type: null,
				usePlatformPoint: true, //是否使用公益积分抵扣
				// 当前使用的平台优惠券
				platformCoupon: {
					my_coupon_id: 0
				},
				jumpType: null
			};
		},

		onLoad(options) {
			this.loading = true;
			this.tabTop = app.globalData.barHeight + 44;
			let dataJson = uni.getStorageSync('dataJson');
			// let sureData = uni.getStorageSync('sureData')
			// this.getByShop(sureDataAll.)

			if (dataJson) {
				this.dataJson = dataJson;
			}
			if (options.type) {
				this.type = options.type;
			}
			this.getUserData()
		},

		onShow() {
			if (this.jumpType) {
				uni.redirectTo({
					url: '/pages/order/orderList/orderList?keys=-1&orderType=0'
				});
			}
			let orderreminder = uni.getStorageSync('orderreminder');
			if (orderreminder) {
				this.$mUtil.toast('已生成待付款订单');
				uni.removeStorageSync('orderreminder');
			}

			let dataJson = uni.getStorageSync('dataJson');
			if (dataJson && !this.addressChose) {
				this.loading = true;
				this.$http
					.post(`/order/build`, {
						...dataJson,
						use_platform_point: this.usePlatformPoint,
						platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
							my_coupon_id: this.platformCoupon.my_coupon_id
						}
					},{'hideToast':true})
					.then(res => {
						if (res && res.code == 200) {
							this.loading = false;
							uni.setStorageSync('sureData', res.data);
							if (res.data) {
								this.sureDataAll = res.data;
								let totaltNum = 0;
								res.data.shop_orders.forEach(res => {
									totaltNum += res.goods_num;
								});
								this.sureData = res.data;
								this.totaltNum = totaltNum;
							}
							//平台店铺才能使用公益积分抵扣
							if (!res.data.has_platform) {
								this.usePlatformPoint = false;
							}
							//默认使用的平台优惠券
							if (res.data.platform_coupon.my_coupon_id != 0) {
								this.platformCoupon = res.data.platform_coupon;
							}
						}
					})
					.catch(() => {
						uni.hideLoading();
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					})
			}
		},
		methods: {
			changePlatformPoint() {
				let dataJson = uni.getStorageSync('dataJson');
				if (dataJson) {
					this.postData(dataJson);
				}
			},
			getUserData() {
				myUserInfo().then(res => {
					this.user = res.data;
					this.self_take.receiver=this.user.realName;
					this.self_take.mobile=this.user.mobile;
				})
			},
			//提交订单
			submitOrder() {
				if (this.status == 1) {
					//快速配送
					this.dataJson.self_take = null;

					if (this.dataJson.receipt_id == null && !this.sureDataAll.receipt.id) {
						this.$mUtil.toast('请填写收货地址');
						return false;
					}
					this.orderCreated();
				} else {
					//自提
					if (!this.self_take.receiver) {
						this.$mUtil.toast('请填写提货人姓名');
						return false;
					}
					if (!this.self_take.mobile) {
						this.$mUtil.toast('请填写提货人手机号');
						return false;
					}
					if (!this.self_take.mobile.match(this.$mConfig.telRegex)) {
						this.$mUtil.toast('请输入正确手机号');
						return false;
					}
					this.dataJson.self_take = this.self_take;
					this.orderCreated();
				}
			},
			orderCreated() {
				this.$http
					.post('/order/create', {
						...this.dataJson,
						use_platform_point: this.usePlatformPoint,
						platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
							my_coupon_id: this.platformCoupon.my_coupon_id
						}
					})
					.then(res => {
						this.loading = false;
						this.jumpType = "order"
						if(!res.data.payStatus){
							uni.navigateTo({
								url: "/pages/web-view/Apps?path=" + res.data.payUrl
							})
						}else{
							uni.redirectTo({
								url: `/pages/order/orderList/orderList`
							})
						}
						//         if (res && res.code == 200) {
						//           let target = res.data;
						//           if (target.payment_status == 5) {
						//             // uni.reLaunch({
						//             //   url: `/pages/order/orderList/orderList?orderType=${this.sureDataAll.area_feature==3?3:0}`
						//             // });
						// uni.redirectTo({
						//               url: `/pages/order/orderList/orderList?orderType=${this.sureDataAll.area_feature==3?3:0}`
						//             });
						//             return false;
						//           } else {
						//             uni.navigateTo({
						//               url: '../../order/pay?id=' + target.id + '&total_amount=' + target.total_amount +
						//                 '&expired_pay_time=' + target.expired_pay_time + '&type=' + this.type
						//             });
						//           }
						//         }
					});
			},
			textareaText(e, index) {
				this.dataJson.shop_orders.map((v, i) => {
					if (i == index) {
						v.user_remark = e.detail.value;
						this.sureDataAll.shop_orders[i].user_remark = e.detail.value;
					}
				});
			},
			//店铺优惠查询
			getByShop(id) {
				this.$http.get('/marketing/firstOrder/getByShop/' + id).then(res => {
					if (res && res.code == 200) {
						this.shopDiscounts = res.data;
					}
				});
			},
			//选完地址回选
			otherFun(object) {
				this.addressChose = true;
				if (!!object) {
					let dataJson = uni.getStorageSync('dataJson');
					dataJson.receipt_id = object.addressid;
					this.dataJson = dataJson;
					this.postData(dataJson);
				}
			},
			postData(dataJson) {
				this.$http
					.post(`/order/build`, {
						...dataJson,
						use_platform_point: this.usePlatformPoint,
						platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
							my_coupon_id: this.platformCoupon.my_coupon_id
						}
					})
					.then(res => {
						if (res && res.code == 200) {
							uni.setStorageSync('sureData', res.data);
							this.sureDataAll = res.data;
							let totaltNum = 0;
							res.data.shop_orders.forEach(res => {
								totaltNum += res.goods_num;
							});
							this.totaltNum = totaltNum;
							if (!res.data.has_platform) {
								this.usePlatformPoint = false;
							}
						}
					});
			},
			changeStatus(val) {
				this.status = val;
				if (val == 1) {
					this.dataJson.shipment_mode = 0;
				} else {
					this.dataJson.shipment_mode = 1;
				}
				this.postData(this.dataJson);
			},
			//选择优惠券
			checkCoupon() {
				let params = {
					marketing_type: this.sureDataAll.marketing_type,
					total_amount_dec_shop_coupon: this.sureDataAll.total_amount_dec_shop_coupon, // 支付总金额
					shop_order_list: this.sureDataAll.shop_orders.map(item => {
						return {
							total_amount_dec_shop_coupon: item
							.total_amount_dec_shop_coupon, //不含运费，扣出首单，扣除店铺优惠券的费用
							shop_id: item.shop_id // 店铺id
						}
					})
				}
				uni.navigateTo({
					url: `/pages/couponCenter/index?isCheck=true&couponId=${this.platformCoupon.my_coupon_id}&checkParams=${JSON.stringify(params)}`
				})
			},
			// 优惠券发生变动
			changeCoupon(platformCoupon) {
				this.platformCoupon = platformCoupon;
			}
		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .input-placeholder {
		font-size: 26rpx;
	}
</style>
<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.border {
		border-bottom: 3rpx solid #e7e7e7;
	}

	.textarea {
		width: 100%;
		height: 80rpx;
		background-color: #fafafa;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		border: 1px solid #ededed;
		border-radius: 20rpx;
	}

	.topStatus {
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 9;

		width: 100%;
		box-sizing: border-box;

		text {
			line-height: 100rpx;
			position: relative;
		}

		.active {
			font-weight: bold;
			color: #FA6138;
		}

		.active:after {
			width: 100%;
			height: 2px;
			background-color: #FA6138;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.courierAddress {
		background-color: #fff;
		padding: 36rpx 30rpx;
	}

	.goHome,
	.listText {
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				color: #808080;
				font-size: 26rpx;
			}
		}

		.freight {
			padding: 30rpx;

			.u-border-one-one {
				padding: 30rpx 0;
			}
		}

		.consumption_value-icon {
			font-size: 60rpx;
			color: #FF9651;
		}

		.consumption_value span {
			color: #FF6600;
		}
	}

	.btnview {
		width: 300rpx;
		margin: 30rpx auto 0;
	}

	.carbox {
		padding: 0rpx 0 160rpx 0;

		.shopList {
			background-color: #fff;
			padding: 30rpx 30rpx 0;
		}
	}

	.changeTabtwo {
		padding: 130rpx 0 160rpx 0;
	}

	.rightText {
		justify-content: space-between;
		height: 200rpx;
	}

	.bottext,
	.botPrice {
		width: 100%;
	}

	.bottext {
		margin-top: 36rpx;
	}

	.rightAddRes {
		width: 172rpx;
		height: 50rpx;
		border-radius: 8rpx;
		border: 1px solid #e5e5e5;

		.centertext {
			text-align: center;
		}

		.btnTag {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #dedede;
			font-size: 46rpx;
			color: #888;
		}
	}

	.btnWidth {
		width: 340rpx;
		background: #FA6138;
	}

	.botfixed {
		position: fixed;
		background-color: #fff;
		width: 100%;
		height: 138rpx;
		bottom: 0;
		left: 0;
		z-index: 9;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>