修改图片，完成砍价列表页

pages.json

@@ -643,6 +643,36 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pages/bargain",
+			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationBarTitleText": "砍价"
+					},
+					"meta": {
+						"auth": false,
+						"sync": true,
+						"title": "砍价详情",
+						"group": "砍价"
+					}
+				},
+				{
+					"path" : "details/details",
+					"style" : 
+					{
+						"navigationBarTitleText" : "砍价详情"
+					},
+					"meta": {
+						"auth": false,
+						"sync": true,
+						"title": "砍价详情",
+						"group": "砍价"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

pages/bargain/details/details.vue

@@ -0,0 +1,59 @@
+<template>
+	<s-layout title="砍价详情">
+		<view class="box1">
+			<image class="deImge1" src="../../../static/bargain/de-img2png.png"></image>
+			<view class="cont">
+				
+			</view>
+		</view>
+		<view class="box">
+			<view class="boxCont">
+				
+			</view>
+		</view>
+	</s-layout>
+</template>
+
+<script setup>
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	onLoad((options) => {
+		console.log(options.id);
+	});
+</script>
+
+<style lang="scss" scoped>
+	.box1 {
+		width: 750rpx;
+		height: 380rpx;
+		position: relative;
+	}
+
+	.deImge1 {
+		width: 750rpx;
+		height: 380rpx;
+		position: absolute;
+		top: 0;
+	}
+	.cont{
+		width: 650rpx;
+		height: 300rpx;
+		background-color: rebeccapurple;
+		position: absolute;
+		top: 300rpx;
+		left: 50rpx;
+	}
+	.box{
+		width:750rpx;
+		height:66.2vh;
+		margin-top: -1rpx;
+		background-color: #E93323;
+	}
+	.boxCont{
+		width: 691rpx;
+		height: 300rpx;
+		margin: 0 auto;
+		background-color: white;
+	}
+</style>

pages/bargain/index.vue

@@ -0,0 +1,233 @@
+<!-- 砍价活动列表 -->
+<template>
+	<s-layout title="砍价列表">
+		<view class="box">
+			<view class=imgBox>
+				<view class="imgbox2">
+					<view class="boxImg2">
+						<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" duration="500"
+							vertical="true" circular="true">
+							<block v-for="(item,index) in bargainSuccessList" :key='index'>
+								<swiper-item>
+									{{ item.nickname }}
+									拿了
+									{{ item.activityName }}
+								</swiper-item>
+							</block>
+						</swiper>
+					</view>
+				</view>
+				<image class="boxImg1" src="../../static/bargain/beijing.png"></image>
+				<view class="tit">已有{{ bargainTotal }}人砍成功</view>
+			</view>
+			<scroll-view scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true"
+				@scrolltolower="loadMore" class="scroll">
+				<view class="listLi" v-for="(item,index) in activityList" :key="index">
+					<image class="listImg" :src="item.picUrl"></image>
+					<view class="listCont">
+						<view class="contT">
+							{{item.name}}
+						</view>
+						<view class="contTime">
+							<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
+								:minuteText="':'" :secondText="' '" :datatime="item.endTime / 1000" :isDay="true" />
+							<text class="txt">后结束</text>
+						</view>
+						<view class="contP">
+							<view><text style="font-size:20rpx">最低:￥</text>{{item.bargainMinPrice}}</view>
+							<view class="but" @click="sheep.$router.go('/pages/bargain/details/details', { id: item.id })">参与砍价</view>
+						</view>
+					</view>
+				</view>
+				<uni-load-more v-if="activityTotal > 0" :status="loadStatus" :content-text="{
+				    contentdown: '上拉加载更多',
+				  }" />
+			</scroll-view>
+		</view>
+	</s-layout>
+</template>
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	import countDown from '@/sheep/components/countDown/index.vue'
+	import BargainApi from "@/sheep/api/promotion/bargain.js";
+	import sheep from '@/sheep';
+	import {
+		onLoad,
+		onReachBottom
+	} from '@dcloudio/uni-app';
+	const bgColor = {
+		'bgColor': '#E93323',
+		'Color': '#fff',
+		'width': '44rpx',
+		'timeTxtwidth': '16rpx',
+		'isDay': true
+	}
+	//活动概要
+	const bargainSuccessList = ref([])
+	const bargainTotal = ref(0)
+	const autoplay = ref(true)
+	const indicatorDots = ref(false)
+	async function getActivitySuccess() {
+		const {
+			data
+		} = await BargainApi.getActivitySuccess();
+		bargainSuccessList.value = data.successList
+		bargainTotal.value = data.successUserCount
+		console.log(bargainSuccessList.value)
+	}
+	// 查询活动列表
+	const activityTotal = ref(0) // 活动总数
+	const activityList = ref([]) // 活动列表
+	const loadStatus = ref('') // 页面加载状态
+	const activityPageParams = ref({
+		pageNo: 1, // 页码
+		pageSize: 3, // 每页数量
+	})
+	async function getActivityList() {
+		loadStatus.value = 'loading';
+		const {
+			data
+		} = await BargainApi.getBargainActivityList(activityPageParams.value);
+		activityList.value = activityList.value.concat(...data.list);
+		activityTotal.value = data.total;
+		loadStatus.value = activityList.value.length < activityTotal.value ? 'more' : 'noMore';
+		// console.log('shuju',data)
+	}
+	// 加载更多
+	function loadMore() {
+		if (loadStatus.value !== 'noMore') {
+			activityPageParams.value.pageNo += 1
+			getActivityList();
+		}
+	}
+	// 上拉加载更多
+	onReachBottom(() => loadMore());
+	// 页面初始化
+	onLoad(async () => {
+		await getActivityList()
+		await getActivitySuccess()
+	});
+</script>
+<style lang="scss" scoped>
+	.box {
+		width: 750rpx;
+		height: 89.5vh;
+		background-color: red;
+	}
+
+	.imgBox {
+		width: 750rpx;
+		height: 450rpx;
+		// background-color: blue;
+		position: relative;
+	}
+
+	.imgbox2 {
+		width: 100%;
+		height: 50rpx;
+		text-align: center;
+		// background-color: gold;
+		position: absolute;
+		top: 0;
+	}
+
+	.boxImg2 {
+		width: 500rpx;
+		height: 50rpx;
+		line-height: 50rpx;
+		margin: 0 auto;
+		color: white;
+		background-image: url('../../static/bargain/lun.png');
+		background-size: 100% 100%;
+		overflow: hidden;
+	}
+
+	.boxImg1 {
+		width: 100%;
+		height: 100%;
+	}
+
+	.scroll {
+		width: 90%;
+		height: 900rpx;
+		// background-color: gold;
+		margin: 0 auto;
+	}
+
+	.listLi {
+		width: 100%;
+		height: 240rpx;
+		background-color: white;
+		border-radius: 10px;
+		margin-top: 20rpx;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+	.listImg {
+		width: 200rpx;
+		height: 200rpx;
+		// background-color: red;
+	}
+
+	.listCont {
+		width: 400rpx;
+		height: 200rpx;
+		// background-color: blue;
+	}
+
+	.contT {
+		width: 100%;
+		height: 100rpx;
+		line-height: 50rpx;
+		font-size: 28rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-line-clamp: 2;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+	}
+
+	.contTime {
+		width: 100%;
+		height: 50rpx;
+		line-height: 50rpx;
+		font-size: 22rpx;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.contP {
+		width: 100%;
+		height: 50rpx;
+		line-height: 50rpx;
+		display: flex;
+		justify-content: space-between;
+		color: #E93323;
+		font-size: 28rpx;
+		font-weight: bold;
+	}
+
+	.but {
+		width: 162rpx;
+		height: 52rpx;
+		border-radius: 50rpx;
+		font-size: 24rpx;
+		color: #fff;
+		text-align: center;
+		background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
+	}
+	.tit{
+		width: 100%;
+		height: 50rpx;
+		font-size: 28rpx;
+		color: white;
+		margin-top:-80rpx;
+		text-align: center;
+		line-height: 50rpx;
+	}
+</style>

sheep/api/promotion/bargain.js

@@ -0,0 +1,20 @@
+import request from '@/sheep/request';
+// vue3的
+const BargainApi = {
+  // 活动砍价活动列表
+  getBargainActivityList: (params) => {
+    return request({
+      url: '/promotion/bargain-activity/page',
+      method: 'GET',
+	  params,
+    });
+  },
+  // 活动砍价记录概要
+  getActivitySuccess: () => {
+    return request({
+      url: '/promotion/bargain-record/get-summary',
+      method: 'GET',
+    });
+  },
+};
+export default BargainApi;

sheep/components/countDown/index.vue

@@ -0,0 +1,162 @@
+<template>
+	<view class="time" :style="justifyLeft">
+		<text class="" v-if="tipText">{{ tipText }}</text>
+		<text class="styleAll p6" v-if="isDay === true" :style="{background:bgColor.bgColor,color:bgColor.Color}">{{ day }}{{bgColor.isDay?'天':''}}</text>
+		<text class="timeTxt" v-if="dayText" :style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ dayText }}</text>
+		<text class="styleAll" :class='isCol?"timeCol":""' :style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ hour }}</text>
+		<text class="timeTxt" v-if="hourText" :class='isCol?"whit":""' :style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ hourText }}</text>
+		<text class="styleAll" :class='isCol?"timeCol":""' :style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ minute }}</text>
+		<text class="timeTxt" v-if="minuteText" :class='isCol?"whit":""' :style="{width:bgColor.timeTxtwidth,color:bgColor.bgColor}">{{ minuteText }}</text>
+		<text class="styleAll" :class='isCol?"timeCol":""' :style="{background:bgColor.bgColor,color:bgColor.Color,width:bgColor.width}">{{ second }}</text>
+		<text class="timeTxt" v-if="secondText">{{ secondText }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "countDown",
+		props: {
+			justifyLeft: {
+				type: String,
+				default: ""
+			},
+			//距离开始提示文字
+			tipText: {
+				type: String,
+				default: "倒计时"
+			},
+			dayText: {
+				type: String,
+				default: "天"
+			},
+			hourText: {
+				type: String,
+				default: "时"
+			},
+			minuteText: {
+				type: String,
+				default: "分"
+			},
+			secondText: {
+				type: String,
+				default: "秒"
+			},
+			datatime: {
+				type: Number,
+				default: 0
+			},
+			isDay: {
+				type: Boolean,
+				default: true
+			},
+			isCol: {
+				type: Boolean,
+				default: false
+			},
+			bgColor: {
+				type: Object,
+				default: null
+			}
+		},
+		data: function() {
+			return {
+				day: "00",
+				hour: "00",
+				minute: "00",
+				second: "00"
+			};
+		},
+		created: function() {
+			this.show_time();
+		},
+		mounted: function() {},
+		methods: {
+			show_time: function() {
+				let that = this;
+
+				function runTime() {
+					//时间函数
+					let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差；
+					let day = 0,
+						hour = 0,
+						minute = 0,
+						second = 0;
+					if (intDiff > 0) {
+						//转换时间
+						if (that.isDay === true) {
+							day = Math.floor(intDiff / (60 * 60 * 24));
+						} else {
+							day = 0;
+						}
+						hour = Math.floor(intDiff / (60 * 60)) - day * 24;
+						minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
+						second =
+							Math.floor(intDiff) -
+							day * 24 * 60 * 60 -
+							hour * 60 * 60 -
+							minute * 60;
+						if (hour <= 9) hour = "0" + hour;
+						if (minute <= 9) minute = "0" + minute;
+						if (second <= 9) second = "0" + second;
+						that.day = day;
+						that.hour = hour;
+						that.minute = minute;
+						that.second = second;
+					} else {
+						that.day = "00";
+						that.hour = "00";
+						that.minute = "00";
+						that.second = "00";
+					}
+				}
+				runTime();
+				setInterval(runTime, 1000);
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.p6{
+		padding: 0 8rpx;
+	}
+	.styleAll{
+		/* color: #fff; */
+		font-size: 24rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		border-radius: 6rpx;
+		text-align: center;
+		/* padding: 0 6rpx; */
+	}
+	.timeTxt{
+		    text-align: center;
+		    /* width: 16rpx; */
+		    height: 36rpx;
+		    line-height: 36rpx;
+		    display: inline-block;
+	}
+	.whit{
+		color: #fff !important;
+	}
+	.time {
+		display: flex;
+		justify-content: center;
+	}
+
+	.red {
+		color: #fc4141;
+		margin: 0 4rpx;
+	}
+
+	.timeCol {
+		/* width: 40rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		text-align:center;
+		border-radius: 6px;
+		background: #fff;
+		font-size: 24rpx; */
+		color: #E93323;
+	}
+</style>

uni.scss

@@ -13,6 +13,13 @@
  */
 
 /* 颜色变量 */
+/* crmeb颜色变量 */
+$theme-color:#E93323;
+$theme-color-opacity:rgba(233,51,35,.6);
+$bg-star: #f62c2c;
+$bg-end:#f96e29;
+$bg-star1: #F73730;  // 主题渐变色1-开始
+$bg-end1:#F86429;   // 主题渐变色1-结束
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;