hwnc/pagesD/pages/order/integrals/integrals.vue

<template>
	<view :class="[AppTheme]" class="wrap" v-if="addressData && orderList">
		<navigator url="/pagesD/pages/address/address?source=1" class="address-section">
			<view class="order-content border-primary" v-if="addressData">
				<u-icon name="map-fill" color="#2979ff" size="25"></u-icon>
				<view class="cen">
					<view class="top">
						<text class="name">{{ addressData.name }}</text>
						<text class="mobile">{{ addressData.mobile }}</text>
					</view>
					<text class="address">{{ addressData.address }} {{ addressData.area || '' }}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view class="isAddress border-primary" v-if="!addressData">去添加收货地址</view>
		</navigator>

		<view class="shopinfo">
			<view class="g-item">
				<image :src=" orderList.pic"></image>
				<view class="right">
					<text class="title clamp">{{ orderList.name }}</text>
					<text class="spec">单位{{ orderList.unit }}</text>
					<view class="price-box">
						<text class="price text-neutral">{{ orderList.integral }}</text>
						<!-- 有疑问-->
						<text class="number">X 1</text>
					</view>
				</view>
			</view>
			<view class="g-text"><textarea value="" placeholder="给我们留言" v-model="areaVal"></textarea></view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>消耗积分</text>
				<!-- <text class="price-tip">￥</text> -->
				<text class="price text-neutral">{{ orderList.integral }}</text>
			</view>
			<text class="submit bg-linear-gradient" @click="submit">确认兑换</text>
		</view>
	</view>
</template>

<script>
	import api from '@/api/mall/index.js';
	import api_address from '@/api/address/address.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				addressData: '',
				orderList: '',
				settingFile: getApp().globalData.siteinfo,
				areaVal: '',
				sho_id: '',
				kg: true,
				address_id: '',
				items: ''
			};
		},
		onLoad(options) {
			this.getAddressData(options); //请求收货地址
			this.sho_id = options.id;
		},
		methods: {
			getAddressData(option) {
				api_address.address().then(res => {

					if (res.status == 200) {
						let is_default = res.data.data.filter(item => item.is_default == 1);
						this.addressData = is_default[0];

						console.log('哈哈大厦的' + this.addressData);
						this.orderIndex(option);
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			/* 获取订单信息*/
			orderIndex(option) {

				const data = {
					id: option.id,
					vipadd: this.addressData.vipid
				};
				api.orderIndex(data).then(res => {

					if (res.status == 200) {
						this.orderList = res.data.cache;
						this.items = res.data.allitems;
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			submit() {
				if (!this.addressData) {
					this.$api.msg('请选择收货地址！');
					return;
				}
				if (this.kg) {
					this.kg = false;
					// var obj = {
					// 	sid: 0,
					// 	paytype,
					// 	vipid: this.orderList.vipid,
					// 	vipopenid: userInfo.openid,
					// 	vipname: this.orderList.vip.name,
					// 	vipaddress: this.orderList.vip.address,
					// 	vipmobile: this.orderList.vip.mobile,
					// 	totalnum: this.orderList.totalnum,
					// 	totalprice: this.orderList.totalprice,
					// 	djqid: 0,
					// 	isact: '',
					// 	groupid: this.$store.state.groupid,
					// 	delivery,
					// 	address: this.orderList.vip.id,
					// 	sinceid: 0,
					// 	bid: this.orderList.bid,
					// 	items: this.orderList.allitems,
					// 	province: this.city[0].s,
					// 	city: this.city[1].b,
					// 	district: this.city[2].m,
					// 	msg: this.desc,
					// };

					console.log(this.items);
					api.orderMake({
						goodstype: this.orderList.type,
						items: encodeURI(this.items),
						address_id: this.addressData.id,
						id: this.sho_id,
						msg: encodeURI(this.areaVal)
					}).then(ret => {
						this.$u.toast(ret.msg);
						uni.showToast({
							icon: 'none',
							title: ret.msg,
							duration: 1500
						});
						if (ret.status == 200) {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesE/pages/mall/integral'
								});
								this.kg = true;
							}, 1000);
						} else {
							setTimeout(() => {
								this.kg = true;
								this.$u.toast(ret.msg);
							}, 2000)
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.wrap {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}

	.address-section {
		padding: 10upx 0 20upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
			border-bottom-width: 6upx;
			border-bottom-style: solid;
			padding-bottom: 20upx;
		}

		.isAddress {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 140upx;
			border-bottom-width: 6upx;
			border-bottom-style: solid;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 30rpx;
		}

		.cen {
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: $font-color-dark;
		}

		.name {
			font-size: 28rpx;
			margin-right: 24upx;
		}

		.address {
			font-size: 24rpx;
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

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

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.shopinfo {
		min-height: 220upx;
		background: #fff;
	}

	.g-text {
		width: 92.5%;
		height: 195rpx;
		padding: 30rpx;
		border: 1px solid #f1f1f1;
		margin: 10px auto;

		textarea {
			width: 100%;
			font-size: 28upx;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $base-color;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
		}
	}

	.g-item {
		display: flex;
		margin: 0 30upx;

		// background: pink;
		image {
			flex-shrink: 0;
			display: block;
			width: 140upx;
			height: 140upx;
			border-radius: 4upx;
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;
		}

		.title {
			font-size: 30upx;
			color: $font-color-dark;
			margin-bottom: 21rpx;
		}

		.spec {
			font-size: 26upx;
			color: $font-color-light;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: $font-color-dark;
			padding-top: 23upx;

			.price {
				margin-bottom: 4upx;
			}

			.number {
				font-size: 26upx;
				color: $font-color-base;
				margin-left: 20upx;
			}
		}

		.step-box {
			position: relative;
		}
	}
</style>