mp-ui-user/packageGoods/recovery/index.vue

<template>
	<view>
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="兑换"></u-navbar>
		<view class="settlement">
			<!-- 商品 -->
			<view class="settlement-goods" style="background-color: #fff">
				<view class="settlement-goods-item">
					<image :src="list.picUrl" mode="aspectFit"></image>
					<view class="info">
						<view class="info-title ells">{{ list.title }}</view>
						<view class="info-num flex">
							<view class="info-num-sku ells-one">规格：{{ list.properties || '-' }}</view>
							<view class="info-num-goods">剩余数量：{{ list.goodsNum }}</view>
						</view>
					</view>
				</view>
				<view class="flex numbtn">
					<view class="type"></view>
					<view class="btn" @click="toRecovery">兑换数量：<view style="display: inline-block;">
							<u-number-box input-width="25" disabledInput :max="list.goodsNum" button-size="26" color="#999999" bg-color="#F5F6F8"
								v-model="value" @change="valChange"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="settlement-tip">
				<view>1. 不喜欢的商品可回收兑换为盲豆<br>2. 盲豆可用于在平台商城中兑换商品<br>3. 盲豆的所属解释权归平台所有，有疑问请联系客服</view>
			</view>
		</view>
		<view class="footer-fixed">
			<view class="content">
				<view class="content-btn flex">
					<view class="content-btn-left">
						<view class="money">
							<text>总价：</text>
							<text class="value">{{ list.returnCoin }}盲豆</text>
						</view>
					</view>
					<view class="content-btn-right">
						<text class="save" @click="save">确定兑换</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				list: [],
				value: '',
				recovery: {},
			}
		},
		onLoad(opthios) {
			
			if(opthios){
				this.value = opthios.num
				this.recovery = {
					goodsId: opthios.goodsId,
					num: opthios.num,
					properties: opthios.properties,
					skuId: opthios.skuId=="null"?null:Number(opthios.skuId),
					storageId: opthios.storageId,
				}
				
				this.getDetail()
			}
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/prize/recovery/settle', this.recovery).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.value = res.data.num
						res.data.picUrl = env.filePublic + res.data.picUrl.split(',')[0] + '?imageView2/2/w/170'
						this.list = res.data
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			valChange(e) {
				this.recovery.num = e.value
				this.getDetail()
			},
			//确定兑
			save() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/prize/recovery/submit',{}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.toRecoveryDetail()
					}else {
						
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			
			toRecoveryDetail() {
				uni.redirectTo({
					url: '/packageGoods/recovery/detail'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.settlement {
		margin: 34rpx;
		padding-bottom: 100rpx;

		// 商品
		&-goods {
			margin-bottom: 34rpx;
			background-color: #fff;
			border-radius: 22rpx;
			box-shadow: 0px 0px 8px 0px rgba(26, 35, 113, 0.08);

			// 商品列表
			&-item {
				display: flex;
				padding: 34rpx 32rpx 34rpx 22rpx;

				image {
					width: 176rpx;
					height: 176rpx;
					border-radius: 12rpx;
					margin-right: 22rpx;
				}

				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					padding: 8rpx 0;

					&-title {
						font-size: 30rpx;
						font-weight: bold;
						line-height: 40rpx;
					}

					&-num {
						justify-content: space-between;

						&-sku {
							flex: 1;
							color: #666666;
							font-size: 26rpx;
						}

						&-goods {
							color: #666666;
							font-size: 26rpx;
						}
					}
				}
			}
		}
		// 留言、运费
		&-tip {
			font-size: 26rpx;
			margin-bottom: 34rpx;
			background-color: #fff;
			padding: 34rpx;
			border-radius: 22rpx;
			color: #666666;
		
		}

		.numbtn {
			margin: 0 50rpx;
			border-top: #E5E5E5 2rpx solid;
			justify-content: space-between;
			color: #333333;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 100rpx;
		}
	}

	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.content {
			padding: 20rpx 0;
			font-size: 30rpx;

			// 提交按钮
			&-btn {
				justify-content: space-between;
				padding: 0 40rpx;

				&-left {
					.money {
						font-size: 30rpx;
						
						text:first-child {
							font-weight: bold;
						}
						
						.value {
							color: #F9832E;
						}
					}
				}

				&-right {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.save {
						width: 210rpx;
						height: 82rpx;
						line-height: 82rpx;
						background: #F9822C;
						border-radius: 40rpx;
						text-align: center;
						color: #fff;
					}

					.not {
						background-color: #6c6c6c;
					}
				}

			}
		}
	}
</style>