sct/pagesT/pointsMall/ExchangeOrder.vue

<template>
	<view class="create-order" :class="['qn-page-' + theme]">
		<view class="confirm_box">
			<view class="address-bg primary-bg"></view>
			<view class="main-view-box" style="background-color: #FFFFFF;">
				<view class="delivery-ul"><view class="delivery-li primary-t-bg">收货信息</view></view>
				<view @click="goPage('/pages/address/address?source=1')" class="address-section ">
					<view class="order-content">
						<view class="ibonfont ibonicon-test icon-address primary-bg"></view>
						<view v-if="addressData.id" class="cen">
							<view class="top">
								<text class="name">{{ addressData.name }}</text>
								<text class="mobile">{{ addressData.mobile }}</text>
							</view>
							<text class="address">
								{{ addressData.area.provinceName }}{{ addressData.area.cityName }}{{ addressData.area.districtName }}{{ addressData.address }}
							</text>
						</view>
						<text v-if="addressData.id" class="ibonfont ibonjinru"></text>
						<view v-else class="empty-tips primary-color">
							<u-icon name="plus" margin-right="10"></u-icon>
							去添加收货地址
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-view model-view">
			<view class="goods-li clearfix">
				<view class="goods-img float_left"><u-image border-radius="10rpx" width="124rpx" height="124rpx" :src="goods_detail.images[0]"></u-image></view>
				<view class="goods-info float_left">
					<view class="goods-name ellipsis">{{ goods_detail.name }}</view>
					<view class="price-num clearfix">
						<view class="float_left now-price">
							<text class="pn-text">{{ goods_detail.integral||'0' }}股权</text>
						</view>
						<view class="float_right goods-num">
							<u-number-box :min="1" v-model="buyNum" :input-height="44" @plus="valChange" @minus="valChange" @blur="valBlur"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="remarks">
				<text class="remarks-label">买家留言</text>
				<input type="text" placeholder="留言前建议先与商家协调一致" v-model="remarks" />
			</view>
		</view>
		<view class="footer-view clearfix">
			<view class="float_left">
				实付
				<text class="price-num total-price">{{ goods_detail.integral || 0 }}</text>
				<text class="rmb-icon">股权</text>
			</view>
			<view class="sub-btn float_right primary-btn" @click="subOrder">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			buyNum: 1,
			goods_detail: {},
			cart_data: {
				lists: []
			}, //
			self_show: false,
			coupon_pop: false, //优惠券弹窗
			coupon_price: '',
			self_shop: [], // 自提点列表
			pay_show: false, // 选择支付方式
			remarks: '',
			addressData: {},
			goods_data: {} // 立即购买
		};
	},
	onPullDownRefresh() {
		this.getIntegralGoodsInfo();
	},
	onLoad(options) {
		// 地址
		this.getAllShippingAddress();
		// 确认订单数据
		if (options.id) {
			this.goods_id = options.id;
			this.getIntegralGoodsInfo();
		}
		// 根据主题设置顶部颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.theme === 'red' ? '#e02020' : this.primaryColor
		});
	},
	methods: {
		// 请求商品品详情
		async getIntegralGoodsInfo() {
			this.$u.api.getIntegralGoodsInfo(this.goods_id).then(({ data }) => {
				uni.setNavigationBarTitle({
					title: data.name
				});
				this.imgList = data.images;
				this.goods_detail = data;
			});
		},
		// 获取收货地址
		getAllShippingAddress() {
			this.$u.api
				.getAllShippingAddress({
					page: 1,
					pageSize: 1
				})
				.then(({ data }) => {
					if (data.length) {
						const defaultObj = data.find(item => item.defaultStatus === 5) || data[0];
						this.addressData = defaultObj;
					}
				});
		},
		//提交订单
		subOrder() {
			this.$u.api
				.addIntegralGoodsExchange({
					goodsId: this.goods_id,
					num: this.buyNum,
					address: this.addressData,
					remark: this.remarks
				})
				.then(res => {
					this.$u.toast('提交成功');
					setTimeout(() => {
						this.goPage('/pagesT/pointsMall/ExchangeLog', 'redirectTo');
					}, 200);
				});
		},
		valChange(e) {
			this.goods_data.buyNum = e.value;
		},
		valBlur(e) {
			this.goods_data.buyNum = e.value;
		}
	}
};
</script>

<style lang="scss">
.confirm_box {
	width: 100%;
	padding: 20upx 20upx 0;
	min-height: 100%;
	position: relative;
	.main-view-box {
		border-radius: 10upx;
	}
	.address-bg {
		position: absolute;
		background-color: #fe4543;
		top: 0;
		left: 0;
		width: 100%;
		height: 180upx;
	}
	.delivery-ul {
		display: flex;
		margin-top: 30upx;
		line-height: 70upx;
		height: 70upx;
		.delivery-li {
			padding-left: 20rpx;
			font-size: 28upx;
			background: #ff7d7d;
			color: #ffffff;
			flex: 3;
			position: relative;
			&:first-child {
				border-top-left-radius: 10rpx;
			}
			&:last-child {
				border-top-right-radius: 10rpx;
			}
		}
		.delivery-li:first-child .check-bg {
			border-top-left-radius: 10rpx;
		}
		.delivery-li:nth-child(2) .check-bg {
			background: linear-gradient(110deg, transparent 30upx, #ffffff 0) top left, linear-gradient(-110deg, transparent 30upx, #ffffff 0) top right;
			background-size: 60% 100%;
			background-repeat: no-repeat;
		}
		.delivery-li:last-child .check-bg {
			background: linear-gradient(113deg, transparent 32upx, #ffffff 0);
			border-top-right-radius: 10rpx;
		}
		.delivery-on {
			color: #333333;
			.check-bg {
				display: block;
			}
		}
	}
	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;
		border-radius: 0 0 10upx 10upx;
		.empty-tips {
			color: $uni-color-primary;
		}
		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-address {
			display: inline-block;
			margin-left: 20upx;
			margin-right: 20upx;
			width: 60upx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			border-radius: 100%;
			font-size: 32upx;
			color: #ffffff;
			background-color: #fe4543;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.mobile,
		.name {
			font-size: 26upx;
			margin-right: 20upx;
		}

		.address {
			margin-top: 10upx;
			margin-right: 20upx;
			font-size: 24upx;
			color: $font-color-light;
			.mobile,
			.name {
				font-size: 24upx;
			}
		}

		.ibonjinru {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}
}
.goods-view {
	.remarks {
		padding: 30upx 0;
		.remarks-label {
			font-size: 24upx;
		}
		input {
			width: 540upx;
			font-size: 24upx;
			display: inline-block;
			vertical-align: middle;
			margin-left: 20upx;
			text-align: right;
		}
	}
	.goods-li {
		padding: 30upx 0;
		border-bottom: 1upx solid #f4f4f4;
		.goods-img {
			padding-right: 20upx;
		}
		.goods-info {
			width: 520upx;
			font-size: 28upx;
			.goods-name {
				.activity-tag {
					color: #fff;
					display: inline-block;
					padding: 0 6upx;
					border-radius: 6rpx;
					background: linear-gradient(to right, #ff3859, #ff2d2e);
					.ibonfont {
						font-size: 22rpx;
					}
					margin-right: 10upx;
					line-height: 26rpx;
				}
			}
			.goods-sku {
				font-size: 22upx;
				padding: 10upx 0;
				color: #999999;
			}
			.price-num {
				font-size: 28upx;
				.pn-text {
					font-weight: 600;
				}
				.goods-num {
					color: #333333;
					.u-number-input {
						background-color: #ffffff !important;
					}
					.u-icon-plus {
						border-radius: 8rpx !important;
						width: 44rpx !important;
						font-size: 24rpx;
					}
					.u-icon-disabled {
						border-radius: 8rpx !important;
						width: 44rpx !important;
						font-size: 24rpx;
					}
					.u-icon-minus {
						border-radius: 8rpx !important;
						width: 44rpx !important;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
.model-view {
	background-color: #ffffff;
	width: 706upx;
	margin: 20upx auto 0;
	border-radius: 10upx;
	padding: 0 20upx;
	.model-val {
		font-size: 28upx;
	}
	.model-label {
		font-size: 26upx;
	}
	.ibonjinru {
		font-size: 24upx;
		color: #999999;
		margin-left: 10upx;
	}
}
.coupon-box {
	padding: 30upx 20upx;
	.no-sel {
		font-size: 24upx;
		color: #999999;
		font-weight: 400;
	}
	.model-label {
		.icon-tag {
			font-size: 18upx;
			color: #ffffff;
			background-color: #fe4543;
			display: inline-block;
			width: 26upx;
			line-height: 26upx;
			text-align: center;
			margin-right: 10upx;
			vertical-align: middle;
		}
	}
}

.price-num {
	color: $price-color;
	font-size: 26upx;
	font-weight: 600;
}
.price-box {
	.price-li {
		line-height: 80upx;
		.model-val {
			font-weight: 600;
		}
	}
}
.footer-view {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	padding: 10upx 20upx;
	border-top: 1px solid #f4f4f4;
	line-height: 74upx;
	.float_left {
		font-size: 26upx;
		color: #999999;
		.rmb-icon {
			color: $price-color;
			margin-left: 20upx;
		}
		.price-num {
			font-weight: 500;
			font-size: 50upx;
		}
	}
	.sub-btn {
		height: 74upx;
		width: 204upx;
		border-radius: 10upx;
		line-height: 74upx;
		text-align: center;
		font-size: 28upx;
		color: #fff;
		background-color: #fe4543;
	}
}
.create-order {
	padding-bottom: 110upx;
}
</style>