yixiang/pages/shangdian/index.vue

<template>
	<view class="shop-index">
		<u-navbar title=" " bgColor="#00B0B0" :autoBack="false" :placeholder="true" :fixed="true" height="44">
			<view class="search" slot="left">
				<u-search placeholder="" v-model="search" :showAction="false" @search="tosearch"></u-search>
			</view>
			<view class="search-right hflex acenter" slot="right">
				<!-- <image src="@/static/images/menu.png" mode="aspectFill"></image> -->
				<image src="@/static/images/order.png" mode="aspectFill" @click="tolist"></image>
			</view>
		</u-navbar>
		<swiper-list type="integral_shop"></swiper-list>
		<view class="hflex acenter jbetween tabs">
			<view class="hflex acenter jcenter tabs-item" @click="totaobao">
				<image src="../../static/images/shop_icon1.png" mode="aspectFill"></image>
				<text>商城</text>
			</view>
			<view class="hflex acenter jcenter tabs-item" @click="toyuyue">
				<image src="../../static/images/shop_icon2.png" mode="aspectFill"></image>
				<text>预约拍摄</text>
			</view>
			<view class="hflex acenter jcenter tabs-item" @click="tozulin">
				<image src="../../static/images/shop_icon3.png" mode="aspectFill"></image>
				<text>设备租赁</text>
			</view>
		</view>
		<view class="list hflex acenter fwrap">
			<view class="list-item" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="name text_hide2">{{item.name}}</view>
				<view class="bottom hflex acenter jbetween">
					<view class="price">{{item.price}}<text>积分</text></view>
					<view class="btn hflex acenter jcenter">兑换</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperList from '@/components/swiper-list/index.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			swiperList
		},
		data() {
			return {
				search: '',
				swiper_list: [],
				swiper_current: 0,
				list: [],
				page: 1,
				last_page: 1,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getswiper()
			this.page = 1
			this.list = []
			this.getlist()
		},
		methods: {

			getswiper() {
				var _this = this
				$api.req({
					url: 'banner',
					data: {
						type: 'integral_shop',
						limit: 5
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.swiper_list = res.data
					}
				})
			},
			/* 设备租赁 */
			tozulin() {
				uni.navigateTo({
					url: '/pageB/zulin'
				})
			},
			/* 兑换记录 */
			tolist() {
				uni.navigateTo({
					url: '/pageB/order-list'
				})
			},
			/* 预约拍摄 */
			toyuyue() {
				uni.navigateTo({
					url: '/pageB/yuyue-capture'
				})
			},
			/* 跳转商城 */
			totaobao() {
				uni.navigateTo({
					url: '/pageB/totaobao'
				})
			},
			/* 进入商品详情 */
			toinfo(item) {
				uni.navigateTo({
					url: '/pageB/good-detail?id=' + item.id
				})
			},
			/* 获取商品列表 */
			getlist() {
				var _this = this
				$api.req({
					url: 'integral/goods',
					method: 'GET',
					data: {
						is_page: 1,
						page: _this.page,
						limit: 10,
						name: this.search
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
			},
			/* 轮播图点击事件 */
			swiperclick() {},
			/* 搜索 */
			tosearch() {
				this.page = 1
				this.list = []
				this.getlist()
			},
		},
		onReachBottom() {
			if (this.last_page > this.page) {
				this.page++;
				this.getlist()
			} else {
				uni.$u.toast('已经到底了')
			}
		}
	}
</script>

<style lang="scss">
	.shop-index::v-deep {
		min-height: 100vh;
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		background: #F5F5F5;

		.list {
			.list-item {
				background: #FFFFFF;
				border-radius: 8rpx;
				width: 340rpx;
				margin: 0 14rpx 16rpx 0;

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

				.name {
					font-size: 26rpx;
					font-family: SFPro, SFPro;
					font-weight: 400;
					color: #222222;
					padding: 0 20rpx;
					margin: 20rpx 0;
					box-sizing: border-box;
					height: 68rpx;
				}

				.bottom {
					box-sizing: border-box;
					padding: 0 20rpx 22rpx;

					.price {
						font-size: 36rpx;
						font-family: SFPro, SFPro;
						font-weight: 600;
						color: #FF4954;

						text {
							font-weight: 500;
							font-size: 24rpx;
						}
					}

					.btn {
						width: 108rpx;
						height: 52rpx;
						background: #00B0B0;
						border-radius: 26rpx;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.list-item:nth-child(2n+2) {
				margin: 0 0 16rpx;
			}
		}

		.tabs {
			padding: 20rpx 0 28rpx;

			.tabs-item {
				width: 218rpx;
				height: 72rpx;
				background: #00B0B0;
				border-radius: 8rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 10rpx 0 0;
				}

				text {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.search {
			width: 572rpx;
			background: rgba(255, 255, 255, .3);
			border-radius: 32rpx;

			.u-search__content {
				background: rgba(255, 255, 255, .3) !important;
			}

			.u-search__content__input {
				background-color: unset !important;
			}

			.u-search__content__icon {
				background-color: unset !important;

				.u-icon__icon {
					color: #fff !important;
				}
			}

			input {
				background: rgba(255, 255, 255, .3)
			}

		}

		.search-right {

			// padding: 0 32rpx 0 0;
			.img {
				position: relative;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}

			.add-show {
				position: absolute;
				right: 30rpx;
				top: 88rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
				padding: 42rpx 32rpx 0;

				.show-item {
					margin-bottom: 40rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0;
					}

					text {
						white-space: nowrap;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 0 0 0 24rpx;
					}
				}
			}
		}
	}
</style>