yicangzongtai_app_240321/pages/product/surePay/freeSurePay.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: #0F8947;">&#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="" @input="userName" 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="" maxlength="11" @input="userMobile" 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" isFree></ldgoods></view>
				</view>

				<!-- 备注 -->
				<view class="listText u-p30">
					<view class="u-font28 u-181818">购买备注</view>
					<textarea class="textarea u-mt10 u-font28 u-333" @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="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 }}</view>
					</view>
					<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_give_love_value }}</view>
					</view>
					<!-- <view class="u-border-one-one border u-p30 u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>店铺会员折扣({{pitem.user_role_name}})</text>
					</view>
					<view class="u-font30 u-999">
						-¥ {{pitem.discount_amount}}
					</view>
				</view> -->
					<!-- <view class="u-border-one-one u-p30 border u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>支付金额</text>
					</view>
					<view class="u-font30 u-FF0000 u-bold">
						<rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)" ></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 v-if="pitem.total_amount > 0"></text>
							<view class="u-bold u-FF0000" v-if="pitem.total_amount > 0"><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='#2DB62B'></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';
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
			},
		};
	},

	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;
		}
	},

	onShow() {
		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
					}
				})
				.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);
			}
		},
		//提交订单
		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;
					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}`
							});
							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
							});
						}
					}
				});
		},
		userName(e) {
			if (this.status == 2) {
				this.self_take.receiver = e.detail.value;
			}
		},
		userMobile(e) {
			if (this.status == 2) {
				this.self_take.mobile = e.detail.value;
			}
		},
		textareaText(e, index) {
			this.dataJson.shop_orders.map((v, i) => {
				if (i == index) {
					v.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.sureData = res.data;
						this.totaltNum = totaltNum;
						if(!res.data.has_platform){
							this.usePlatformPoint = false;
						}
					}
				})
				.catch(()=>{
					uni.hideLoading();
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 1500);
				})
		},
		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: 234rpx;
	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: #0B844A;
	}
	.active:after {
		width: 100%;
		height: 2px;
		background-color: #0B844A;
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
.courierAddress {
	background-color: #fff;
	padding: 36rpx 30rpx;
}
.goHome,
.listText {
	background-color: #fff;
}

.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: #0B844A;
}
.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>