universal-wechat-uniapp-241007/pages_order/components/product/submitUnitSelect.vue

<template>
	<uv-popup ref="popup" 
	:round="30" 
	bgColor="#f7f7f7">
		<view class="content">
			
			<!-- 配送方式选择 -->
			<view class="delivery-method">
				<view class="title">配送方式</view>
				<view class="options">
					<view 
						:class="['option', { active: deliveryMethod === '0' }]"
						@click="selectDeliveryMethod('0')"
					>
						<view class="icon">🚚</view>
						<view class="text">外卖配送</view>
					</view>
					<view 
						:class="['option', { active: deliveryMethod === '1' }]"
						@click="selectDeliveryMethod('1')"
					>
						<view class="icon">🏪</view>
						<view class="text">到店自提</view>
					</view>
				</view>
			</view>
			
			<!-- 地址（仅外卖显示） -->
			<view class="address"
			@click="openAddress"
			v-if="deliveryMethod === '0'">
				<image src="../../static/address/selectIcon.png" mode=""></image>
				<view class="">
					{{ address.name }}
				</view>
				<view class="">
					{{ address.addressDetail }}
				</view>
				<view class="icon">
					<uv-icon
					size="30rpx"
					name="arrow-right"></uv-icon>
				</view>
			</view>

			<!-- 店铺地址（仅到店自提显示） -->
			<view class="store-address" v-if="deliveryMethod == '1' && detail.shop && detail.shop.address">
				<view>
					<addressSpot
                    :address="detail.shop.address"
                    :latitude="detail.shop.latitude"
                    :longitude="detail.shop.longitude"
                    />
				</view>
			</view>
			
			<!-- 商品信息和数量 -->
			<view class="submit-info">
				<view class="title">
					{{ detail.name }}
				</view>
				<view class="box">
					<image
					class="image"
					:src="detail.image && detail.image.split(',')[0]" 
					mode=""></image>
					
					<view class="info">
						<view class="price"
						v-if="isProductPrice(detail)">
							价格￥<text>{{ detail.price }}</text>元
						</view>
						<!-- <view class="unit">
							请选择规格
						</view> -->
						<view class="favorable"
						v-if="isProductPoint(detail)">
							<view class="t">
								积分兑换
							</view>
							<view class="p">
								{{ detail.points }}
							</view>
						</view>
						<view class="">
							<uv-number-box v-model="num"></uv-number-box>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 规格 -->
			<!-- <view class="submit-unit">
				<view class="title">
					规格选择
				</view>
				<view class="list">
					<view :class="{act : unitIndex == index}" 
					v-for="(item, index) in detail.hotelGoodsSkuList"
					@click="selectUnit(item, index)"
					:key="index">
						{{ item.title }}
					</view>
				</view>
			</view> -->
			
			
			
			<!-- 费用明细 -->
			<view class="expense-detail">
				<view class="title">
					费用明细
				</view>
				<view class="detail"
				v-if="isProductPoint(detail)">
					积分：{{ detail.points }}
				</view>
				<view class="detail"
				v-if="isProductPrice(detail)">
					金额：{{ detail.price }}
				</view>
			</view>
			
			
			
			<!-- 提交按钮 -->
			<view class="submit-btn">
				<view class="r"
				v-if="isProductPoint(detail)"
				@click="exchange">
					立即兑换
				</view>
				<view class="r"
				v-if="isProductPrice(detail)"
				@click="orderPay">
					立即购买
				</view>
			</view>
			
		</view>
		
		<uv-popup ref="addressPopup" :round="30">
			<addressList
			ref="addressList"
			height="60vh"
			@select="selectAddress"
			/>
		</uv-popup>
	</uv-popup>
</template>

<script>
	import addressList from '../address/addressList.vue'
	import productMixins from '@/mixins/product.js'
	export default {
		mixins : [productMixins],
		components : {
			addressList,
		},
		props : {
			submiitTitle : {
				default : '立即购买',
				type : String,
			},
			detail : {
				default : {}
			}
		},
		data() {
			return {
				unitIndex : 0,
				address : {
					name : '请选择联系人',
					addressDetail : '',
				},
				num : 1,
				unit : {},
				addressTotal : 0,
				deliveryMethod : '0',
			}
		},
		methods: {
			// 打开
			open(){
				this.$refs.popup.open('bottom')
				// if(!this.unit.id){
				// 	this.selectUnit(this.detail.hotelGoodsSkuList[0], 0)
				// }
				
				// 获取地址列表
				this.$refs.addressList.getAddressList().then(res => {
					this.addressTotal = res.total
					if(this.addressTotal != 0){
						this.address = res.records[0]
					}
				})
			},
			// 关闭
			close(){
				this.$refs.popup.close()
			},
			// 打开选择地址
			openAddress(){
				if (this.addressTotal == 0) {
					this.$refs.popup.close()
					return uni.navigateTo({
						url: '/pages_order/mine/address?type=back'
					})
				}
				this.$refs.addressPopup.open('bottom')
			},
			// 选择地址
			selectAddress(e){
				this.address = e
				this.$refs.addressPopup.close()
			},
			// 选择规格
			selectUnit(item, index){
				this.unit = item
				this.unitIndex = index
			},
			// 积分兑换
			exchange(){
				
				let data = {
					shopId : this.detail.id,//商品id
					num : this.num,
					deliveryMethod: this.deliveryMethod
				}
				
				// 外卖配送需要地址
				if (this.deliveryMethod === 'delivery') {
					if (!this.address.id) {
						return uni.showToast({
							title: '请选择收货地址',
							icon: 'none'
						})
					}
					data.addressId = this.address.id
				}
				
				this.$api('createPointsOrder', data, res => {
					if(res.code == 200){
						uni.redirectTo({
							url: '/pages_order/order/order'
						})
					}
				})
			},
			orderPay(){
				
				let data = {
					shopId : this.detail.id,//商品id
					// skuId : this.unit.id,//规格id
					// sku : this.unit.title,//规格
					num : this.num,
					deliveryMethod: this.deliveryMethod
				}
				
				// 外卖配送需要地址
				if (this.deliveryMethod == '0') {
					if (!this.address.id) {
						return uni.showToast({
							title: '请选择收货地址',
							icon: 'none'
						})
					}
					data.addressId = this.address.id
				}
				
				this.$api('createOrder', data, res => {
					if(res.code == 200){
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							timeStamp: res.result.timeStamp, // 时间戳
							nonceStr: res.result.nonceStr, // 随机字符串
							package: res.result.packageValue,
							signType: res.result.signType, // 签名算法
							paySign: res.result.paySign, // 签名
							success: function (res) {
								console.log('支付成功',res);
								uni.redirectTo({
									url: '/pages_order/order/order'
								})
							},
							fail: function (err) {
								console.log('支付失败',err);
								uni.showToast({
									icon:'none',
									title:"支付失败"
								})
							}
						});
					}
				})
			},
			selectDeliveryMethod(method){
				this.deliveryMethod = method
			},
		}
	}
</script>

<style scoped lang="scss">
.content{
	max-height: 80vh;
	overflow: hidden;
	overflow-y: auto;
	.delivery-method{
		padding: 20rpx;
		background-color: #fff;
		.title{
			font-size: 30rpx;
			padding: 10rpx;
			font-weight: 600;
		}
		.options{
			display: flex;
			gap: 20rpx;
			.option{
				padding: 15rpx 30rpx;
				border: 2rpx solid #F3F3F3;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				background-color: #F6F6F6;
				&.active{
					border-color: $uni-price-color;
					background-color: $uni-price-color;
					color: #fff;
				}
				.icon{
					margin-right: 10rpx;
				}
				.text{
					font-size: 28rpx;
				}
			}
		}
	}
	.address{
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		image{
			width: 30rpx;
			height: 30rpx;
			margin: 20rpx;
		}
		view{
			margin: 20rpx;
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
		}
		.icon{
			margin-left: auto;
		}
	}
	.submit-info{
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		.title{
			font-size: 30rpx;
			padding: 10rpx;
			font-weight: 600;
		}
		.box{
			display: flex;
			margin-top: 10rpx;
			.image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.info{
				flex: 1;
				.unit{
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					color: #717171;
					display: flex;
					align-items: center;
				}
				.price{
					color: $uni-price-color;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
					text{
						font-size: 36rpx;
						font-weight: 900;
					}
				}
				.favorable{
					margin-left: 10rpx;
					display: flex;
					// background-image: url(/static/image/product/favorable.png);
					background-size: 100% 100%;
					width: fit-content;
					font-size: 22rpx;
					margin-top: 6rpx;
					margin-bottom: 6rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #ff000011;
					.t{
						padding: 5rpx 10rpx;
					}
					.p{
						padding: 5rpx 10rpx;
						color: #fff;
						background-color: #F03F25;
						height: 100%;
					}
				}
			}
		}
	}
	.submit-unit{
		padding: 30rpx;
		background-color: #fff;
		.title{
			font-size: 28rpx;
			font-weight: 600;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			font-size: 22rpx;
			.act{
				color: $uni-price-color;
				border: 1px solid $uni-price-color;
				background-color: #F9E7DE;
			}
			view{
				border-radius: 15rpx;
				width: 320rpx;
				background-color: #F3F3F3;
				border: 1px solid #F3F3F3;
				margin: 10rpx;
				display: flex;
				justify-content: center;
				padding: 15rpx 0;
			}
		}
	}
	.expense-detail{
		padding: 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		.title{
			font-weight: 600;
		}
		.detail{
			background-color: #F6F6F6;
			color: #717171;
			margin: 10rpx 0;
			padding: 10rpx 20rpx;
		}
	}
	.submit-btn{
		width: 600rpx;
		height: 80rpx;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid $uni-price-color;
		overflow: hidden;
		.l{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $uni-price-color;
		}
		.r{
			background: $uni-price-color;
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>