ssmihd12/src/main/webapp/front/pages/storeup/list.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
    <view class="cu-bar bg-white search" :style="[{top:CustomBar + 'px'}]">
			<picker v-if="queryList.length>1" mode="selector" :range="queryList" range-key="queryName" :value="queryIndex" @change="queryChange" style="padding-left: 20upx;">
				<view><image style="width: 20upx;height: 33upx;" src="../../static/center/to.png"></image></view>
			</picker>

                                                      			<view v-if="queryIndex==0" class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="searchForm.name" type="text" placeholder="收藏名称" ></input>
			</view>
                                                
			<view class="action">
				<button @tap="search" :style="{width:'auto',borderRadius:'8rpx',height:'80rpx',fontSize:'28rpx',color:'#fff',backgroundColor:btnColor[0],borderColor:btnColor[0]}" class="cu-btn shadow-blur round">搜索</button>
			</view>
		</view>

		<view :style="2 != 1 ? 'display: flex;' : ''">
      
            <view class="uni-product-list" :style='{"padding":"0","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0","borderColor":"red","backgroundColor":"#efefef","borderRadius":0,"borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' style="box-sizing: border-box;">
        <view @tap="onDetailTap(product)" class="uni-product" :style='{"padding":"20rpx","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0 1% 20rpx 2%","borderColor":"red","backgroundColor":"#fff","borderRadius":"8rpx","borderWidth":"0","width":"47%","borderStyle":"solid","height":"auto"}' v-for="(product,index) in list" :key="index">
			<image :style='{"padding":"0","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0","borderColor":"red","backgroundColor":"rgba(255,0,0,0)","borderRadius":"8rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"200rpx"}' mode="aspectFill" class="uni-product-image" :src="baseUrl+product.picture"></image>
            <view class="uni-product-title hide1" :style='{"padding":"0","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0","borderColor":"red","backgroundColor":"rgba(255,0,0,0)","color":"#333","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"100%","fontSize":"28rpx","lineHeight":"56rpx","borderStyle":"solid"}'>{{product.name}}</view>
        </view>
      </view>
      
      		</view>

		<button :style='{"padding":"0","boxShadow":"0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"20rpx auto","backgroundColor":"rgba(120, 218, 255, 1)","borderColor":"#409EFF","borderRadius":"20rpx 0","color":"#fff","borderWidth":"0","width":"60%","fontSize":"28rpx","borderStyle":"solid","height":"80rpx"}' v-if="userid && isAuth('storeup','新增')" class="add-btn" @click="onAddTap()">新增</button>
		<button :style='{"padding":"0","boxShadow":"0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"20rpx auto","backgroundColor":"rgba(120, 218, 255, 1)","borderColor":"#409EFF","borderRadius":"20rpx 0","color":"#fff","borderWidth":"0","width":"60%","fontSize":"28rpx","borderStyle":"solid","height":"80rpx"}' v-if="!userid && isAuthFront('storeup','新增')" class="add-btn" @click="onAddTap()">新增</button>

	</mescroll-uni>
</template>

<script>
	export default {
		data() {
			return {
				btnColor: ['#409eff','#67c23a','#909399','#e6a23c','#f56c6c','#356c6c','#351c6c','#f093a9','#a7c23a','#104eff','#10441f','#a21233','#503319'],
				queryList:[
					{
						queryName:"收藏名称",
					},
				],
				sactiveItem: {"padding":"0 28rpx","boxShadow":"0 -56rpx 0px #78DAFF inset","margin":"0 0 12rpx","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(31, 165, 216, 1)","color":"rgba(0, 0, 0, 1)","borderRadius":"20rpx","borderWidth":"0","width":"auto","lineHeight":"68rpx","fontSize":"28rpx","borderStyle":"solid"},
				sitem: {"padding":"0","boxShadow":"0 -56rpx 0px #E8E8E8 inset","margin":"0 0 12rpx","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(214, 214, 214, 1)","color":"rgba(130, 130, 130, 1)","borderRadius":"20rpx","borderWidth":"0","width":"100%","lineHeight":"68rpx","fontSize":"28rpx","borderStyle":"solid"},
				queryIndex: 0,
				list: [],
                userid: '',
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '~ 没有更多了 ~',
				},
				hasNext: true,
				searchForm:{},
				CustomBar: '0'