cyzh-SoundOfMusic-H5/pages/activityList/mine/order/orderConfirm.vue

<template>
	<view>
		<view class="container flex align-center justify-between" @click="navTap">
			<view class="flex padding align-center">
				<image src="/static/address.png" style="width: 65upx;height: 65upx;"></image>
				<view class="padding-left text-sm" v-if="!$u.test.isEmpty(address)">
					<view style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;">{{address.consignee}} {{address.phone}}</view>
					<view class="text-gray">{{address.area}} {{address.detail}}</view>
				</view>
				<view class="padding-left" style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;" v-else>请选择收货地址</view>
			</view>
			<view class="padding">
				<u-icon name="arrow-right" color="#d4d4d4"></u-icon>
			</view>
		</view>
		<block v-for="(item, index) in giftList" :key="index">
			<view class="card">
				<view class="padding">
					<view class="flex margin-top-xs">
						<image :src="item.goodsPic" style="width: 220upx;height: 220upx;"></image>
						<view class="padding-left-sm">
							<view class="name text-cut" style="width: 350upx;">{{item.goodsName}}</view>
						</view>
					</view>
				</view>
				<view class="flex justify-end padding" style="margin-top: -120upx;">
					<view class="count">x{{item.count}}</view>
				</view>
			</view>
		</block>
		<view style="height: 120upx;"></view>
		<view class="notice text-sm">
			提示：该礼包运费需要用户自行承担
		</view>
		<view class="footer-fixed flex justify-between align-center padding-sm bg-white">
			<view></view>
			<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;" @click="dialog">领取</button>
		</view>
		<u-popup v-model="dialogShow" mode="center" width="500" height="480" border-radius="30">
			<view class="bg-img text-center" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-dialogBgImg.png');height: 600rpx;">
				<view style="height: 80upx;"></view>
				<view style="font-size: 50upx;font-family: PingFang SC;font-weight: 600;color: #ffffff;">恭喜你</view>
				<view class="text-bold text-black" style="padding: 80upx 0;">领取成功！请等待卖家发货</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="onConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:'',
				dialogShow: false,
				writeAddress: false,
				//我的地址
				address:{},
				count: 0,
				giftList: [],
			}
		},
		onLoad(options) {
			this.giftList=JSON.parse(options.goods)
			this.userId=this.giftList[0].userId
			this.getAddress()
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			getAddress(){
				this.$u.api.user.userAddress({userId:this.userId}).then(res=>{
					this.address=res.records[0]
				})
			},
			dialog() {
				this.giftList.forEach(item=>{
					item.addressId=this.address.id
				})
				this.$u.api.goods.obtain(this.giftList).then(res=>{
					this.dialogShow=true
				})
			},
			onConfirm() {
				this.dialogShow = false;
				uni.navigateBack({
					delta:1
				})
			},
			navTap() {
				uni.navigateTo({
					url: "/pages/activityList/mine/order/address?userId="+this.userId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		margin: 20upx;
		border-radius: 16upx;
		background-color: #FFFFFF;
		.title {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}
		.name {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}
		.specification {
			padding-top: 30upx;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #959595;
		}
		.count {
			width: 60upx;
			height: 60upx;
			border: #d9d9d9 1upx solid;
			border-radius: 16upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.container {
		background-color: #ffffff;
		border-radius: 16upx;
		margin: 20upx;
	}
	.notice {
		position: fixed;
		width: 100%;
		z-index: 10000;
		bottom: 120upx;
		left: 0;
		line-height: 80upx;
		text-align: center;
		background-color: #fdedee;
		color: #ff0000;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 250upx;
		color: #ffffff;
	}
</style>