qjd-user-uniapp/pagesGood/auctionDetail.vue

<template>
	<view class="container">
		<view class="auction-end-date">
			<text class="iconfont iconshijian"></text>
			{{goodData.auctionEndTime}}结束
		</view>
		<view class="good-info-box">
			<image class="goods-img" :src="goodData.imgPath"></image>
			<view class="goods-info">
				<view class="goods-name">{{goodData.productName}}</view>
				<view class="goods-price">
					<text class="text">当前价格￥</text>
					<text class="price">{{goodData.currentPrice}}/{{goodData.unit}}</text>
				</view>
			</view>
		</view>
		<view class="auction-handle">
			<view class="auction-price">
				<uni-icons type="minus-filled" size="52" color="#A67A54" @click="reducePrice()"></uni-icons>
				<text class="price">{{price}}</text>
				<uni-icons type="plus-filled" size="52" color="#A67A54" @click="addPrice()"></uni-icons>
			</view>
			<view class="auction-tip">本商品每次加价不得低于￥{{goodData.auctionMinAddPrice}}</view>
			<view class="handle-button" @click="submitAuction()">立即出价</view>
		</view>
		<view class="auction-list">
			<view class="auction-row" v-for="(item, index) in auctionList" :key="index">
				<view class="auction-line"></view>
				<view class="auction-point"></view>
				<view class="auction-title" v-if="item.nickname || item.paySum">
					<text class="auction-name" v-if="item.nickname">{{item.nickname}}出价：</text>
					<text class="auction-price" v-if="item.paySum">￥{{item.paySum.slice(0,)}}</text>
				</view>
				<text class="auction-date" v-if="item.payTime">{{item.payTime}}</text>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				goodId: '',
				goodData: {
					imgPath: '',
					productName: '',
					currentPrice: 0,
					auctionMinAddPrice: 0,
					unit: '',
				},
				price: 0,
				auctionBaseList: [{
					nickname: '拍品起拍价：',
					paySum: '',
				}, {
					payTime: '竞拍截止时间：'
				}, {
					payTime: '竞拍正式开始！\n'
				}],
				auctionList: [],
				timer: null
			}
		},
		onLoad(options) {
			this.goodId = options.goodId
			this.getAuctionData()
		},
		onShow() {
			this.timer = setInterval(() => {
				this.getAuctionData()
			}, 5000)
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			//  获取拍卖详情
			getAuctionData() {
				NET.request(API.getAuctionDetail + this.goodId, {}, 'GET').then(res => {
					this.goodData = {
						imgPath: res.data.imgPath,
						productName: res.data.productName,
						currentPrice: parseFloat(res.data.currentPrice),
						auctionMinAddPrice: parseFloat(res.data.auctionMinAddPrice),
						unit: res.data.unit,
						auctionEndTime: res.data.auctionEndTime,
					}
					this.auctionBaseList[1].payTime = '竞拍截止时间：' + res.data.auctionEndTime
					this.auctionBaseList[2].payTime = '竞拍于 '+res.data.auctionStartTime +' 正式开始!'
					this.auctionList = res.data.userPriceResVOs.concat(this.auctionBaseList)
					if (this.price <= this.goodData.currentPrice + this.goodData.auctionMinAddPrice) {
						this.price = this.goodData.currentPrice + this.goodData.auctionMinAddPrice
					}
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  减价
			reducePrice() {
				if (this.price > this.goodData.currentPrice + this.goodData.auctionMinAddPrice) {
					this.price -= this.goodData.auctionMinAddPrice
					this.price = parseFloat(this.price.toFixed(2))
				}
			},
			//  加价
			addPrice() {
				this.price += this.goodData.auctionMinAddPrice
				this.price = parseFloat(this.price.toFixed(2))
			},
			//  去支付
			submitAuction() {
				uni.navigateTo({
					url: '/pagesGood/orderPay?flag=2&orderType=2&paySum=' + this.price
				});
			},
		},
	}
</script>

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

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;

		.auction-end-date {
			width: 100%;
			height: 34px;
			float: left;
			background: #51A539;
			font-size: 15px;
			font-family: PingFang SC;
			color: #FFFFFF;
			line-height: 34px;
			text-align: center;

			.iconshijian {
				font-size: 16px;
				margin-right: 8px;
			}
		}

		.good-info-box {
			width: 100%;
			height: 112px;
			float: left;
			box-sizing: border-box;
			padding: 12px 15px;
			background: #FFFFFF;
			box-shadow: 0px 1px 5px 0px rgba(101, 101, 101, 0.43);

			.goods-img {
				width: 88px;
				height: 88px;
				object-fit: cover;
				float: left;
				border-radius: 5px;
				margin-right: 16px;
			}

			.goods-info {
				width: calc(100% - 104px);
				height: 88px;
				float: left;

				.goods-name {
					width: 100%;
					height: 36px;
					float: left;
					margin: 6px 0 20px 0;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 18px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
				}

				.goods-price {
					width: 100%;
					height: 26px;
					float: left;
					font-family: PingFang SC;
					color: #51A539;
					line-height: 26px;

					.text {
						font-size: 18px;
					}

					.price {
						font-size: 24px;
					}
				}
			}
		}

		.auction-handle {
			width: 100%;
			height: 172px;
			float: left;

			.auction-price {
				width: 100%;
				height: 82px;
				float: left;
				text-align: center;
				white-space: nowrap;
				line-height: 82px;

				.price {
					font-size: 56px;
					font-family: PingFang SC;
					color: #333333;
					margin: 0 32px;
				}
			}

			.auction-tip {
				width: 100%;
				height: 18px;
				float: left;
				font-size: 12px;
				font-family: PingFang SC;
				color: #51A539;
				line-height: 18px;
				text-align: center;
			}

			.handle-button {
				width: 234px;
				height: 46px;
				float: left;
				background: #51A539;
				border-radius: 24px;
				margin-top: 10px;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				font-size: 24px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 46px;
				text-align: center;
			}
		}

		.auction-list {
			width: 100%;
			height: calc(100% - 318px);
			float: left;
			background: #FFFFFF;
			box-shadow: 0px 1px 5px 0px rgba(101, 101, 101, 0.43);
			border-radius: 15px 15px 0px 0px;
			box-sizing: border-box;
			padding: 2px 15px 15px 15px;
			overflow-y: auto;

			.auction-row {
				width: 100%;
				float: left;
				box-sizing: border-box;
				padding: 14px 0 14px 32px;
				position: relative;

				.auction-line {
					width: 1px;
					position: absolute;
					background: #F1F3F5;
					left: 7px;
					top: 0;
					bottom: 0;
				}

				.auction-point {
					width: 8px;
					height: 8px;
					position: absolute;
					left: 4px;
					top: 50%;
					transform: translateY(-50%);
					background: #DBDDDF;
					border-radius: 50%;
				}

				.auction-title {
					font-family: PingFang SC;
					line-height: 20px;

					.auction-name {
						font-size: 12px;
						color: #333333;
					}

					.auction-price {
						font-size: 15px;
						color: #51A539;
					}
				}

				.auction-date {
					width: 100%;
					float: left;
					font-size: 12px;
					font-family: PingFang SC;
					color: #656565;
					line-height: 20px;
				}
			}

			.auction-row:first-child {
				.auction-line {
					top: 50%;
				}

				.auction-point {
					width: 16px;
					height: 16px;
					left: 0px;
					background: #51A539;
				}
			}

			.auction-row:last-child {
				.auction-line {
					bottom: 50%;
				}
			}
		}
	}
</style>