修改图片，完成砍价列表页
岳琳红
parent
f13ebf09eb
commit
eff81e0044
30
pages.json
30
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": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 686 B |
Binary file not shown.
|
After Width: | Height: | Size: 662 B |
Loading…
Reference in New Issue