hwnc/pagesD/pages/mall/Bargain.vue

<template>
	<view :class="[AppTheme]" class="box">
		<view class="carousel" v-show="carouselList">
			<view @click="add" style="padding: 10rpx;">
				<u-swiper :list="carouselList" keyName="ad_pic" showTitle :autoplay="false" circular @click="navtopage">
				</u-swiper>
			</view>
		</view>

		<view style="margin:20upx 30upx;">
			<u-search placeholder="输入商品名称搜索" height="35" inputAlign="center" bgColor="#fff" v-model="keyword"
				@search="search" :showAction="false"></u-search>
		</view>

		<view class="head_fixation">
			<u-tabs style="background-color: #fff;" :scrollable="false" ref="uTabs" :list="dataList" lineWidth="30"
				:lineColor="primary" :activeStyle="{
			        color: primary,
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" :current="current" @click="tab">
			</u-tabs>
		</view>

		<view class="NewProducts">
			<swiper class="swiper-box" :current="current" @change="transition">
				<swiper-item v-for="item in dataList">
					<scroll-view class="scroll-box" :scroll-y='true'>
						<view class="content">
							<view class="content_box" v-for="item in list" :key="item.id">
								<u-image :src="item.apppic" radius="10rpx" width="344rpx" height="340rpx"
									:lazyLoad="true" :fade="true" duration="450">
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u-image>
								<view class="message">
									<p style="font-size: 12px;">{{item.name}}</p>
									<view class="message_bot">
										<view class="f_left">
											<view class="text">
												<view>低价:</view>
												<view class="color_org text-neutral">¥{{item.price}}</view>
											</view>
											<p class="old_price">原价：¥{{item.oprice}}</p>
										</view>
										<view class="f_right bg-linear-gradient" @click="go(item)">立即砍价</view>
									</view>
								</view>
							</view>
							<view style="width: 100%;">
								<u-empty marginTop="100" style="height: 100% !important;width: 100vw;"
									v-if="list.length==0" text="暂无更多数据" mode="list"></u-empty>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<!-- 商城 -->
<script>
	import api from '@/api/mall/index.js'
	import {
		mapState
	} from 'vuex'
	import homeApi from '@/api/home/index.js';
	export default {
		data() {
			return {
				current: 0,
				primary: this.$theme.primary,
				// dataList: ['全部', '砍价中', '已购买'],
				dataList: [{
						name: '全部'
					},
					{
						name: '砍价中'
					},
					{
						name: '已购买'
					}
				],
				carouselList: [],
				type: 1, //1 全部  2 砍价中  3 已购买
				p: 1,
				keyword: '',
				list: [],
				settingFile: getApp().globalData.siteinfo
			};
		},
		onLoad() {

			this.getlist() //默认请求全部
			this.advertisement() //请求广告
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			transition(e) { //swiper切换
				this.list = []
				this.current = e.detail.current
				let data = {
					type: this.current + 1,
					p: 1
				}
				api.barlist(data).then(ret => {
					this.list = this.list.concat(ret.data.cache)
				})
			},
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pagesD/pages/mall/Bargain_cart?id=${id}`
				});
			},
			navtopage(item) {
				homeApi.navtopage(item);
			},
			advertisement() {
				api.advertisement().then(res => {
					var list = res.data.filter(item => item.pid == 11);
					if (list.length) {
						this.carouselList = list;
					} else {
						this.carouselList = 0;
					}
				})
			},
			tab(e) {
				this.list = []
				console.log(e, "eeeee")
				this.type = e.index + 1
				this.getlist()
			},
			search() {
				let that = this
				let data = {
					type: that.type,
					p: that.p,
					name: encodeURI(that.keyword)
				}

				api.barlist(data).then(ret => {
					this.list = ret.data.cache
				})
			},
			getlist() {
				let that = this
				let data = {
					type: that.type,
					p: that.p
				}
				api.barlist(data).then(ret => {
					this.list = this.list.concat(ret.data.cache)
				})
			},
			go(item) {
				uni.navigateTo({
					url: "./Bargain_cart?id=" + item.id
				})
			},
			add() {
				api.barlist({
					type: 1,
					p: 1
				}).then(res => {
					this.list = this.list.concat(res.data.cache)
				})
			}
		},
		onReachBottom() {
			if (this.list.length == 10) {
				this.p++
				let that = this
				let data = {
					type: that.type,
					p: that.p
				}
				api.barlist(data).then(res => {
					if (res.status == 200) {
						this.list = this.list.concat(ret.data.cache)
					} else {
						this.p--
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	$color-fff: #fff;

	@mixin lineH($index) {
		height: $index;
		line-height: $index;
	}

	page {
		background: #f5f5f5;
	}

	u-search view:first-child {
		margin-top: 2px;
	}

	.box {
		padding-bottom: 90upx;

		.NewProducts {
			padding-top: 10rpx;

			.swiper-box {
				height: calc(100vh - 295px);

				.scroll-box {
					height: 100%;
					overflow-y: scroll;

					.content {
						display: flex;
						flex-wrap: wrap;
						padding: 0 20rpx;
						padding-bottom: 11px;
						justify-content: space-between;

						.content_box {
							border-radius: 10px;
							margin-bottom: 20rpx;
							box-shadow: $box-shadow;
							width: 345rpx;
							min-height: 500rpx;
							display: inline-block;
							margin-top: 10rpx;

							.new-img {
								width: 100%;
								height: 355rpx;
							}

							.message {
								box-sizing: border-box;
								padding: 20rpx;

								p {
									font-size: 28rpx !important;
									line-height: 40rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.message_bot {
									height: 84rpx;
									margin-top: 20rpx;
									border-top: 0.5rpx solid #efefef;
									display: flex;
									justify-content: space-between;

									.f_left {
										margin-top: 10rpx;
										font-size: 24rpx;

										.text {
											display: flex;
											justify-content: flex-start;
											margin-bottom: 10rpx;
											align-items: center;
											font-size: 28rpx;
											height: 35upx;

											.color_org {
												margin-left: 15rpx;
											}
										}

										.old_price {
											color: #999;
											font-size: 28rpx;
											text-decoration: line-through;
										}
									}

									.f_right {
										height: 50rpx;
										width: 116rpx;
										padding: 5rpx 10rpx 5rpx 10rpx;
										margin-top: 36rpx;
										border-radius: 30rpx;
										color: #ffffff;
										line-height: 50rpx;
										font-size: 24rpx;
										text-align: center;
									}
								}
							}
						}
					}

					.content:after {
						content: '';
						width: 345rpx;
						border: 1px solid transparent;
					}

				}
			}

		}

		.no {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 30upx;
			color: #F29100;
			font-size: 32upx;
		}

		.subtitle {
			position: relative;
			font-size: 0.24rem;
			color: $color-ord;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 14px;

			&:before {
				content: '';
				position: absolute;
				width: 30%;
				height: 1px;
				top: 50%;
				background-color: $color-ord;
				left: 2%;
			}

			&:after {
				content: '';
				position: absolute;
				width: 30%;
				height: 1px;
				top: 50%;
				background-color: $color-ord;
				right: 2%;
			}
		}

		.carousel {
			height: calc(var(--status-bar-height)+250upx);
			position: relative;

			swiper {
				height: 100%;
			}

			.image-wrapper {
				width: 100%;
				height: 100%;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				width: 100%;
				height: 250upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.footer {
			width: 100%;
			height: 90upx;
			border-top: 2px solid #f1f1f1;
			position: fixed;
			bottom: 0;
			background: #fff;

			.wrap {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.inner {}
			}

			.active {
				// color: $tab-color-1 !important;
			}
		}
	}
</style>