砍价未完成

pages/bargain/details/details.vue

@@ -3,23 +3,136 @@
 		<view class="box1">
 			<image class="deImge1" src="../../../static/bargain/de-img2png.png"></image>
 			<view class="cont">
-				
+				<view class="contInfo">
+					<image class="infoImg" src="../../../static/goods-empty.png"></image>
+					<view class="goods">
+						<view class="goodsInfo">
+							<view class="info1">
+								{{bargainInfo.name}}
+							</view>
+							<view class="info1">
+								最低价：￥{{fen2yuan(bargainInfo.bargainMinPrice)}}
+							</view>
+							<view class="info1">
+								剩余：{{ bargainInfo.stock }} {{bargainInfo.unitName}}
+							</view>
+							<view class="info1" style="color: #E93323;font-weight: bold;">
+								当前：￥<text style="font-size: 36rpx;">{{fen2yuan(bargainInfo.marketPrice)}}</text>
+							</view>
+						</view>
+						<view class="jiantou">
+							<image src="../../../static/bargain/arrow.png"></image>
+						</view>
+					</view>
+				</view>
+				<view class="contTime" v-if="bargainInfo.endTime > new Date().getTime() && bargainInfo.stock > 0">
+					<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'" :minuteText="':'"
+						:secondText="' '" :datatime="bargainInfo.endTime / 1000" :isDay="true" />
+					<text class="txt">后结束</text>
+				</view>
+				<view class="contTime" v-else-if="bargainInfo.endTime <= new Date().getTime()">
+					已结束
+				</view>
+				<view class="contTime" v-else-if="bargainInfo.stock <= 0">
+					已售罄
+				</view>
 			</view>
 		</view>
 		<view class="box">
 			<view class="boxCont">
-				
+
 			</view>
+			<view class="title">
+				<image class="titImg" src="../../../static/bargain/zuo2.png"></image>
+				<view class="titleText">
+					砍价记录
+				</view>
+				<image class="titImg" src="../../../static/bargain/you2.png"></image>
+			</view>
+			<view class="titInfo" style="line-height: 500rpx;" v-if="bargainRecordTotal==0">
+				暂无砍价记录
+			</view>
+			<scroll-view scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true"
+				@scrolltolower="loadMore" class="titInfo" v-else>
+				
+				<uni-load-more v-if="bargainRecordTotal > 0" :status="loadStatus" :content-text="{
+				    contentdown: '上拉加载更多',
+				  }" />
+			</scroll-view>
+			<!-- <view class="title">
+				<image class="titImg" src="../../../static/bargain/zuo2.png"></image>
+				<view class="titleText">
+					商品详情
+				</view>
+				<image class="titImg" src="../../../static/bargain/you2.png"></image>
+			</view>
+			<view class="titInfo">
+				暂无商品详情
+			</view> -->
 		</view>
 	</s-layout>
 </template>
 
 <script setup>
 	import {
-		onLoad
+		onLoad,onReachBottom
 	} from '@dcloudio/uni-app';
+	import {
+		ref
+	} from 'vue';
+	import {
+		fen2yuan
+	} from '@/sheep/hooks/useGoods';
+	import countDown from '@/sheep/components/countDown/index.vue'
+	import BargainApi from "@/sheep/api/promotion/bargain.js";
+	const bgColor = {
+		'bgColor': '#E93323',
+		'Color': '#fff',
+		'width': '44rpx',
+		'timeTxtwidth': '16rpx',
+		'isDay': true
+	}
+	//获得商品详情
+	const bargainInfo = ref({})
+	async function getActivityDetail(id) {
+		const {
+			data
+		} = await BargainApi.getActivityDetail({
+			id: id
+		});
+		bargainInfo.value = data
+		console.log('shuju', bargainInfo.value)
+	}
+	//获得砍价记录分页
+	const recordPageParams = ref({
+		pageNo: 1, // 页码
+		pageSize: 10, // 每页数量
+	})
+	const bargainRecord = ref([])
+	const bargainRecordTotal = ref(0)
+	const loadStatus = ref('') // 页面加载状态
+	async function getBargainRecord() {
+		loadStatus.value = 'loading';
+		const {
+			data
+		} = await BargainApi.getBargainRecordPage(recordPageParams.value);
+		bargainRecord.value = bargainRecord.value.concat(...data.list);
+		bargainRecordTotal.value = data.total;
+		loadStatus.value = bargainRecord.value.length < bargainRecordTotal.value ? 'more' : 'noMore';
+		console.log('jilu',data)
+	}
+	// 加载更多
+	function loadMore() {
+		if (loadStatus.value !== 'noMore') {
+			recordPageParams.value.pageNo += 1
+			getBargainRecord();
+		}
+	}
+	// 上拉加载更多
+	onReachBottom(() => loadMore());
 	onLoad((options) => {
-		console.log(options.id);
+		getActivityDetail(options.id);
+		getBargainRecord();
 	});
 </script>
 
@@ -36,24 +149,124 @@
 		position: absolute;
 		top: 0;
 	}
-	.cont{
+
+	.cont {
 		width: 650rpx;
-		height: 300rpx;
-		background-color: rebeccapurple;
+		height: 360rpx;
+		// background-color: rebeccapurple;
 		position: absolute;
 		top: 300rpx;
 		left: 50rpx;
 	}
-	.box{
-		width:750rpx;
-		height:66.2vh;
+
+	.contTime {
+		width: 100%;
+		height: 60rpx;
+		// background-color: #999999;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.box {
+		width: 750rpx;
+		height: 66.2vh;
 		margin-top: -1rpx;
 		background-color: #E93323;
 	}
-	.boxCont{
+
+	.boxCont {
 		width: 691rpx;
 		height: 300rpx;
 		margin: 0 auto;
 		background-color: white;
+		border-bottom-left-radius: 10rpx;
+		border-bottom-right-radius: 10rpx;
+	}
+
+	.contInfo {
+		width: 600rpx;
+		height: 220rpx;
+		// background-color: red;
+		margin: 25rpx auto;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.infoImg {
+		width: 220rpx;
+		height: 220rpx;
+	}
+
+	.goods {
+		width: 350rpx;
+		height: 220rpx;
+		// background-color: gold;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.goodsInfo {
+		width: 300rpx;
+		height: 220rpx;
+		// background-color: green;
+	}
+
+	.info1 {
+		width: 300rpx;
+		height: 50rpx;
+		line-height: 50rpx;
+		font-size: 22rpx;
+		color: #999999;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+	}
+
+	.jiantou {
+		width: 40rpx;
+		height: 220rpx;
+	}
+
+	.jiantou image {
+		width: 20rpx;
+		height: 40rpx;
+		margin: 100rpx 10rpx;
+	}
+
+	.title {
+		width: 320rpx;
+		height: 100rpx;
+		font-size: 40rpx;
+		font-weight: 600;
+		color: #fff;
+		// background-color: white;
+		margin: 20rpx auto;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.titleText {
+		width: 180rpx;
+		height: 100rpx;
+		line-height: 100rpx;
+		text-align: center;
+	}
+
+	.titImg {
+		width: 60rpx;
+		height: 60rpx;
+	}
+
+	.titInfo {
+		width: 691rpx;
+		height: 500rpx;
+		background-color: white;
+		border-radius: 10rpx;
+		margin: 10rpx auto;
+		text-align: center;
+		font-size: 26rpx;
+		color: #AAAAAA;
 	}
 </style>

pages/bargain/index.vue

@@ -34,7 +34,7 @@
 							<text class="txt">后结束</text>
 						</view>
 						<view class="contP">
-							<view><text style="font-size:20rpx">最低:￥</text>{{item.bargainMinPrice}}</view>
+							<view><text style="font-size:20rpx">最低:￥</text>{{fen2yuan(item.bargainMinPrice)}}</view>
 							<view class="but" @click="sheep.$router.go('/pages/bargain/details/details', { id: item.id })">参与砍价</view>
 						</view>
 					</view>
@@ -51,6 +51,7 @@
 		ref
 	} from 'vue';
 	import countDown from '@/sheep/components/countDown/index.vue'
+	import { fen2yuan } from '@/sheep/hooks/useGoods';
 	import BargainApi from "@/sheep/api/promotion/bargain.js";
 	import sheep from '@/sheep';
 	import {

sheep/api/promotion/bargain.js

@@ -9,6 +9,22 @@ const BargainApi = {
 	  params,
     });
   },
+  // 活动砍价活动详情
+  getActivityDetail: (params) => {
+    return request({
+      url: '/promotion/bargain-activity/get-detail',
+      method: 'GET',
+	  params,
+    });
+  },
+  //获得砍价记录分页
+  getBargainRecordPage: (params) => {
+    return request({
+      url: '/promotion/bargain-record/page',
+      method: 'GET',
+  	  params,
+    });
+  },
   // 活动砍价记录概要
   getActivitySuccess: () => {
     return request({
@@ -16,5 +32,13 @@ const BargainApi = {
       method: 'GET',
     });
   },
+  // 砍价记录明细
+  getActivityRecord: (params) => {
+    return request({
+      url: '/promotion/bargain-record/get-detail',
+      method: 'GET',
+	  params,
+    });
+  },
 };
 export default BargainApi;