wangxiaowei/xiuhuwangqiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
wangxiaowei
2025-10-22 22:56:36 +08:00
commit 90c54df48b
302 changed files with 54312 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
pages/plus/presale/list.vue Normal file
View File

@ -0,0 +1,478 @@
<template>
<view class="presale-product-wrap" :data-theme='theme()' :class="theme() || ''">
<!--活动广告-->
<view class="top-box">
<!-- 搜索框 -->
<view class="index-search-box d-b-c" id="searchBox">
<view class="index-search t-c flex-1">
<span class="icon iconfont icon-sousuo"></span>
<input type="text" v-model="searchForm" class="flex-1 ml10 f30 gray3" value=""
placeholder-class="f24 gray6" placeholder="输入你要的商品" confirm-type="search" @confirm="search()" />
</view>
<view class="f26" @click="gotoPage('/pages/order/myorder')">我的预定</view>
</view>
</view>
<view class="presale-list-wrap" v-if="!loading">
<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'"
lower-threshold="50" @scrolltolower="scrolltolowerFunc">
<view class="diy-banner-box pt20 mb20 pr square">
<swiper class="swiper" autoplay :interval="3000" :duration="500" @change="changeSwiper">
<swiper-item v-for="(item,index) in banner" :key="index" @click="gotoPages(item)">
<image :src="item.file_path"></image>
</swiper-item>
</swiper>
<view class="swiper-dots ww100 d-s-c square">
<view :class="current==index?'swiper-dot active':'swiper-dot'" v-for="(item,index) in banner"
:style="current==index?'background-color:#ffffff;':''" :key="index">
</view>
</view>
</view>
<!--活动类别-->
<!-- <view class="active-top-tab">
<scroll-view scroll-X="true" scroll-with-animation :scroll-into-view="'tab'+(type_active - 2)"
show-scrollbar="false" class="scroll-X mb30">
<view class="tab-list d-s-c">
<view class="logo" id="tab-2">
<image src="/static/presale.png" mode=""></image>
</view>
<view class="tab-item" id="tab-1">
<view class="actab-title">热卖中</view>
<view class="actab-status">不能错过 </view>
</view>
<view class="tab-item" :id="'tab'+index" :class="{ active: type_active == index }"
v-for="(item, index) in activeList" :key="index" @click="tabTypeFunc(index)">
<view class="actab-title">{{ item.title }}</view>
<view class="actab-status">即将开始</view>
</view>
</view>
</scroll-view>
</view> -->
<!--列表-->
<view class="list p-0-20">
<view class="item d-stretch" v-for="(item, index) in listData" :key="index" @click="gotoDetail(item.product.product_id)">
<view class="product-cover">
<image :src="item.product_image" mode="aspectFit"></image>
</view>
<view class="d-b-c d-c flex-1 ml26">
<view class="product-title ww100">{{ item.product.product_name }}</view>
<view class="d-s-c ww100">
<Countdown ref="countdown" :color="'#999999'" :timeSize="'22rpx'"
:config="{startstamp: item.start_time,endstamp: item.end_time}"
@returnVal="returnValFunc"></Countdown>
</view>
<view class="ww100">
<text class="dj-text">定金:￥{{ item.money }}</text>
<text class="ml20 gray6 f20">尾款立减￥{{ item.sku[0].advance_price }}</text>
</view>
<view class="slider-box ww100 d-b-c">
<view>
<view class="f32 redF11"><text
class="f16 fb">￥</text>{{ (item.sku[0].product_price*1 - item.sku[0].advance_price*1).toFixed(2) }}
</view>
<view class="f20 gray9">预估到手价</view>
</view>
<view class="right-btn ml30"><button type="primary">抢购</button></view>
</view>
</view>
</view>
</view>
<!-- 没有记录 -->
<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
<text class="iconfont icon-wushuju"></text>
<text class="cont">亲，暂无相关记录哦</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import Countdown from '@/components/countdown/countdown-presale.vue';
export default {
components: {
Countdown
},
data() {
return {
current: 0,
banner: [],
/*手机高度*/
phoneHeight: 0,
/*可滚动视图区域高度*/
scrollviewHigh: 0,
/*活动列表*/
activeList: [],
/*当前活动角标*/
type_active: 0,
/*类别选中*/
currActive: {},
/*产品列表*/
listData: [],
/*当前页面*/
page: 1,
/*没有更多*/
no_more: false,
/*活动详情*/
detailData: {},
/*是否正在加载*/
loading: true,
/*倒计时配置*/
countdownConfig: {
/*开始时间*/
startstamp: 0,
/*结束时间*/
endstamp: 0
},
searchForm: ''
};
},
computed: {},
onLoad() {
this.getData();
},
mounted() {
this.init();
},
onPullDownRefresh() {},
methods: {
search() {
this.listData = [];
this.page = 1;
this.loading = true;
this.getData();
},
changeSwiper(e) {
this.current = e.detail.current;
},
/*初始化*/
init() {
let _this = this;
uni.getSystemInfo({
success(res) {
_this.phoneHeight = res.windowHeight;
// 计算组件的高度
let view = uni.createSelectorQuery().select('.top-box');
view.boundingClientRect(data => {
let h = _this.phoneHeight - data.height;
_this.scrollviewHigh = h;
}).exec();
}
});
},
/*类别切换*/
tabTypeFunc(e) {
this.type_active = e;
this.currActive = this.activeList[e];
this.getData();
},
goback() {
uni.navigateBack()
},
/*可滚动视图区域到底触发*/
scrolltolowerFunc() {
let self = this;
self.page++;
self.loading = true;
if (self.page > self.last_page) {
self.loading = false;
self.no_more = true;
return;
}
self.getData();
},
/*获取数据*/
getData() {
let self = this;
self.loading = true;
self._get(
'plus.advance.Product/index', {
search: self.searchForm,
page: self.page
},
function(res) {
self.banner = res.data.setting.image;
console.log(self.banner)
self.loading = false;
self.listData = self.listData.concat(res.data.list.data);
self.last_page = res.data.list.last_page;
if (res.data.list.last_page <= 1) {
self.no_more = true;
}
}
);
},
/*跳转产品详情*/
gotoDetail(e) {
// this.$refs.countdown.forEach(item=>{
// item.clear();
// })
this.gotoPage('/pages/product/detail/detail?product_id=' + e);
},
/*跳转搜索页面*/
gotoSearch() {
this.getData();
},
/*倒计时返回值*/
returnValFunc(e) {
}
}
};
</script>
<style lang="scss">
page {
background-color: #F2F2F2;
}
.top-box {
position: relative;
}
.presale-product-wrap .tab-item {
flex: 0;
padding: 0 25rpx;
font-size: 33rpx;
height: 86rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
white-space: nowrap;
color: #333333;
}
.presale-product-wrap .logo {
width: 75rpx;
height: 69rpx;
margin-right: 18rpx;
padding-left: 24rpx;
flex-shrink: 0;
image {
width: 75rpx;
height: 69rpx;
}
}
.presale-product-wrap .tab-item .actab-title {
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.presale-product-wrap .tab-item .actab-status {
font-weight: bold;
color: #666666;
font-size: 17rpx;
height: 30rpx;
padding: 0 18rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15rpx;
}
.presale-product-wrap .tab-item.active .actab-status {
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
color: #FFFFFF;
}
.presale-product-wrap .tab-item.active {
font-size: 30rpx;
opacity: 1;
position: relative;
margin-bottom: 0;
}
.presale-product-wrap .tab-item.active::after {
display: none;
}
.presale-product-wrap .tab-item .status1 {}
.presale-product-wrap .tab-item.active .status1 {
content: "";
width: 120rpx;
height: 4rpx;
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
border-radius: 2rpx;
position: absolute;
border: 30rpx;
}
.presale-product-wrap .every-day-time text {
padding: 8rpx 16rpx;
font-size: 26rpx;
color: #333;
opacity: 0.5;
}
.presale-product-wrap .ad-activity {
position: relative;
overflow: hidden;
}
.presale-product-wrap .ad-activity image {
width: 750rpx;
height: 367rpx;
border-radius: 12rpx;
}
.presale-list-wrap {}
.presale-list-wrap .list .item {
padding: 30rpx;
display: flex;
border-radius: 16rpx;
margin-bottom: 20rpx;
background: #ffffff;
}
.presale-list-wrap .product-cover,
.presale-list-wrap .product-cover image {
width: 212rpx;
height: 212rpx;
border-radius: 10rpx;
}
.active-top-tab .ad-datetime::v-deep .box {
height: 40rpx;
padding: 4rpx;
line-height: 40rpx;
text-align: center;
border-radius: 8rpx;
font-size: 28rpx;
background: #F6220C;
color: #FFFFFF;
}
.active-top-tab .ad-datetime::v-deep text {
color: #333;
font-size: 28rpx;
}
.presale-list-wrap .product-title {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 24rpx;
}
.presale-list-wrap .already-sale {
padding: 4rpx 0;
color: #8228EB;
font-size: 22rpx;
}
.dj-text {
height: 31rpx;
background-color: rgba($color: #FF0000, $alpha: 0.2);
font-size: 20rpx;
padding: 0 18rpx;
color: #F11E0B;
border-radius: 15rpx;
}
.presale-list-wrap .right-btn button {
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
color: #ffffff;
height: 56rpx;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0 33rpx;
}
.reg180 {
padding-right: 20rpx;
text-align: right;
transform: rotateY(180deg);
position: absolute;
bottom: 0;
}
.icon-jiantou {
color: #FFFFFF;
font-size: 30rpx;
}
.head_top {
position: absolute;
top: 0;
z-index: 20;
padding-top: var(--status-bar-height);
height: 30px;
line-height: 30px;
color: #FFFFFF;
font-size: 28rpx;
}
.tab-item.active::after {
content: '';
width: 60%;
height: 4rpx;
background: #F2F2F2;
border-radius: 2rpx;
position: absolute;
bottom: 5rpx;
}
.diy-banner-box {
overflow: hidden;
}
.diy-banner-box,
.diy-banner-box .swiper {
width: 750rpx;
/* background-color: #FFFFFF; */
}
.diy-banner-box image {
margin: 0 auto;
width: 702rpx;
height: 300rpx;
border-radius: 12rpx;
}
.diy-banner-box.square .swiper-dots {
position: absolute;
bottom: 20rpx;
left: 44rpx;
margin: auto;
}
.swiper-dots.square .swiper-dot {
width: 28rpx;
height: 6rpx;
border-radius: 3rpx;
margin: 0 4rpx;
background: #ffffff;
opacity: 0.4;
}
.swiper-dots.square .swiper-dot.active {
opacity: 0.8;
}
.index-search-box {
background-color: #FFFFFF;
.index-search {
height: 60rpx;
background: #FFFFFF;
border: 1rpx solid #DDDDDD;
border-radius: 30rpx;
margin-right: 15rpx;
}
}
</style>