buykey/pages/res/shop.vue

<template name="res">
	<mescroll-uni :down="mescroll" @down="down" @up="up">
		<view class="fixed">
			<cu-custom bgColor="bg-shadeTop text-white">
				<block slot="content">发现</block>
			</cu-custom>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top hide">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 最新动态
			</view>
		</view>
		
		<!--背景效果-->
		<image src="https://yhtx.itianc.com/wxxcx/57b6c21fa7290.jpg" mode="aspectFill" class="canui-head-vague"></image>
		<view class="canui-head-gradient"></view>
		
		<!--标题栏区域-->
		<view class="canui-head-custom">
		    <view class='canui-shop-title' bindtap='btnback'>
		        <text class="icon-back"></text> <text>XXXX旗舰店</text>
		    </view>
		    <view class="canui-shop-synopsis text-sm">
		        <text class="canui-xzwz">店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介店铺简介</text>
		    </view>
		</view>
		
		<!--搜索框-->
		<view class="cu-bar search">
		    <view class='search-form round'>
		        <text class="icon-search"></text>
		        <input type="text" placeholder="搜索店铺内的商品" confirm-type="search" placeholder-class="canui-input-placeholder"></input>
		    </view>
		    <view class='action'>
		        <button class='cu-btn shadow-blur round canui-btn-wxjn' bindtap="search">搜索</button>
		    </view>
		</view>
		
		<!--菜单导航栏-->
		<scroll-view scroll-x class="nav text-left canui-shop-table">
		    <view v-for="(item,index) in SortMenu" :key="index" class="cu-item" :class="item.id==TabCur?'cur':''" bindtap='tabSelect' :data-id="item.id">
		        {{item.name}}
		    </view>
		</scroll-view>
		
		<!--商品列表-->
		<view class='nav-list canui-shop-goods-list'>
		    <navigator v-for="(item,index) in ShopList" :key="index" class="nav-li" open-type="navigate" hover-class='none'>
		        <image :src="item.image" mode="aspectFill"></image>
		        <view class="nav-li-box">
		            <view class="nav-title canui-xzwz text-sm">{{item.title}}</view>
		            <view class="shop-zx">
		                <text class="text-price text-red text-xs">{{item.price}} </text>
		                <text class="text-gray text-sm">{{item.sales}}人已兑换</text>
		            </view>
		        </view>
		    </navigator>
		</view>
		
		<view class='cu-tabbar-height'></view>
	</mescroll-uni>
</template>

<script>
	export default {
		name: "res",
		data() {
			return {
				mescroll: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				TabCur: 0,
				scrollLeft:0,
				SortMenu: [{id:0,name:"综合"},{id:1,name:"销量"},{id:2,name:"新品"},{id:3,name:"价格"}],
				ShopList: [{
					index: 1,
					image: 'https://image.weilanwl.com/img/4x3-1.jpg',
					title: '商品名称商品名称商品名称商品名称',
					price: '100',
					sales: '2.2万'
				},{
					index: 2,
					image: 'https://image.weilanwl.com/img/4x3-2.jpg',
					title: '商品名称商品名称',
					price: '1000',
					sales: '85'
				},{
					index: 3,
					image: 'https://image.weilanwl.com/img/4x3-3.jpg',
					title: '商品名称商品名称商品名称商品名称',
					price: '39.9',
					sales: '2000'
				},{
					index: 4,
					image: 'https://image.weilanwl.com/img/4x3-4.jpg',
					title: '商品名称商品名称商品名称商品名称',
					price: '100',
					sales: '2.2万'
				},{
					index: 5,
					image: 'https://image.weilanwl.com/img/4x3-3.jpg',
					title: '商品名称商品名称商品名称商品名称',
					price: '39.9',
					sales: '2000'
				},{
					index: 6,
					image: 'https://image.weilanwl.com/img/4x3-4.jpg',
					title: '商品名称商品名称商品名称商品名称',
					price: '100',
					sales: '2.2万'
				}],
			};
		},
		mounted: function(option) {
			
		},
		
		methods: {
			/*下拉刷新的回调 */
			down(option) {
				//联网加载数据
				console.info(2222);
			},
			/*上拉加载的回调: option携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			up(option) {
				//联网加载数据
				console.info(3333);
			},
		}
	}
</script>

<style>
	.canui-head-gradient{
	    position: absolute;
	    background-image:linear-gradient(rgba(255, 255, 255, 0.01), rgba(241, 241, 241, 1));
	    width: 100%;
	    height: 600rpx;
	    top: 0;
	}
	
	/*-------标题栏-------*/
	.canui-head-custom{
	    position: relative;
	    width: 100%;
	    top: 0;
	    height:100rpx;
	}
	.canui-shop-title{
	    display:flex;
	    align-items:left;
	    justify-content:left;
	    max-width:100%;
	    padding:10rpx;
	    padding-right:320rpx;
	}
	.canui-shop-title:first-child{
	    margin-left:20rpx;
	    font-size:33rpx;
	}
	.canui-shop-title:last-child{
	    margin-right:30rpx;
	}
	.canui-shop-title:first-child>text[class*="icon"] {
	    margin-left:-0.3em;
	    margin-right:0.3em;
	    margin-top:3rpx;
	}
	.canui-shop-title > text[class*="icon"], .canui-shop-title > view[class*="icon"] {
	    font-size:36rpx;
	}
	.canui-shop-synopsis{
	    padding:0 30rpx;
	}
	
	
	/*-------关注按钮-------*/
	.canui-head-box{
	    position:absolute;
	    top:26px;
	    right:192rpx;
	    background:rgba(0,0,0,0.2);
	    border-radius:20px;
	    padding:4.5px 10px;
	    border:1px solid rgba(255,255,255,0.3);
	    font-size:28rpx;
	}
	.canui-head-box text{
	    font-size:15px;
	    margin-right:3rpx;
	}
	
	/*-------搜索框区域-------*/
	.cu-bar{
	    padding-top:15rpx;
	}
	.cu-bar .search-form{
	    background:rgba(241,241,241,0.3);
	}
	.cu-bar .search-form [class*="icon"]{
	    margin:0 0.5em 0 0.4em;
	    font-size:38rpx;
	}
	.cu-bar .search-form input{
	    font-size:26rpx;
	}
	.canui-input-placeholder{

	}
	.canui-btn-wxjn{

	}
	.canui-btn-wxjn:not([class*="bg-"]) {
	    background:rgba(241,241,241,0.3);
	}
	
	/*-------菜单导航栏-------*/
	.canui-shop-table{
	    padding:15rpx 15rpx;
	}
	.nav .cu-item {
	    height:60rpx;
	    line-height:60rpx;
	    margin:0 10rpx;
	    padding:0 30rpx;
	    color: #f1f1f1;
	}
	.nav .cu-item.cur{
	    border-bottom:0;
	    background:rgba(241,241,241,0.3);
	    border-radius:55px;
	    color: rgba(254,0,0,0.8);
	}
	
	/*-------商品列表-------*/
	.canui-shop-goods-list{
	    padding:10rpx 20rpx 0px;
	}
	.canui-shop-goods-list .nav-li{
	    background-image:initial;
	    background-size:initial;
	    background-position:initial;
	    background:initial;
	    padding:0;
	    width:345rpx;
	    margin:0 5rpx 20rpx;
	    border-radius:0;
	}
	.canui-shop-goods-list .nav-li image{
	    width:100%;
	    height:345rpx;
	    z-index:99999;
	    border-radius:15rpx 15rpx 0 0;
	}
	.canui-shop-goods-list .nav-li .nav-li-box{
	    position: relative;
	    background: #Ffff;
	    padding: 10rpx 20rpx;
	    border-radius: 0 0 15rpx 15rpx;
	    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	    top: -6rpx;
	    z-index: 0;
	}
	.canui-shop-goods-list .nav-li .nav-li-box .nav-title {
	    font-size: 28 rpx;
	}
	.canui-shop-goods-list .nav-li text{
	    position: relative;
	    right:initial;
	    top:initial;
	    font-size:inherit;
	    width:inherit;
	    height:initial;
	    text-align:initial;
	    line-height:inherit;
	}
	.canui-shop-goods-list .nav-li .shop-zx{
	    position: relative;
	    padding:10rpx 0;
	}
	.canui-shop-goods-list .nav-li .shop-zx .text-sm{
	    font-size:20rpx;
	}
	.canui-shop-goods-list .nav-li .shop-zx .text-price{
	    font-size:30rpx;
	    margin-right:8rpx;
	}
</style>