ssm41471/src/main/webapp/front/pages/tousuxinxi/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.xueshengzhanghao" type="text" placeholder="学生账号" ></input>
			</view>
			<view v-if="queryIndex==1" class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="searchForm.xueshengxingming" type="text" placeholder="学生姓名" ></input>
			</view>
			<view class="action">
				<button @tap="search" :style="{width:'180rpx',borderRadius:'20rpx',height:'88rpx',fontSize:'32rpx',color:'rgba(255, 255, 255, 1)',backgroundColor:btnColor[0],borderColor:btnColor[0]}" class="cu-btn shadow-blur round">搜索</button>
			</view>
		</view>    


		<view class="uni-product-list" :style='{"borderRadius":"0","backgroundColor":"rgba(255, 107, 19, 0)"}'>
			<view @tap="onDetailTap(product)" class="uni-product" :style='{"borderRadius":"20rpx","backgroundColor":"rgba(255, 255, 255, 0.6)"}' v-for="(product,index) in list" :key="index">
								                				                                <view class="uni-product-title" :style='{"fontSize":"32rpx","lineHeight":"100rpx","color":"rgba(255, 107, 19, 1)","textAlign":"center"}'>{{product.xueshengxingming}}</view>
								                				                				                                <view class="image-view">
                    <image :style='{"borderRadius":"20rpx","width":"100%","height":"100%"}' mode="aspectFill" class="uni-product-image" :src="product.tupian?product.tupian.split(',')[0]:''"></image>
                </view>
                				                												<view style="display: flex;justify-content: space-between;">
					<text v-if="isAuth('tousuxinxi','修改')" class="cuIcon-edit" @click.stop="onUpdateTap(product.id)">修改</text>
					<text v-if="isAuth('tousuxinxi','删除')" class="cuIcon-delete" @click.stop="onDeleteTap(product.id)">删除</text>
				</view>
			</view>
		</view>
		
		
		<button :style='{"boxShadow":"0 0 0px rgba(0,0,0,0) inset","backgroundColor":"rgba(255, 107, 19, 1)","borderColor":"rgba(255, 107, 19, 1)","borderRadius":"20rpx","color":"#fff","borderWidth":"0","width":"100%","fontSize":"32rpx","borderStyle":"solid","height":"80rpx"}' v-if="isAuth('tousuxinxi','新增')" 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:"学生账号",
					},
					{
						queryName:"学生姓名",
					},
				],
				sactiveItem: {"padding":"0 48rpx","boxShadow":"0 0 4rpx rgba(0,0,0,.3)","margin":"0 0px","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(255, 107, 19, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","width":"auto","lineHeight":"68rpx","fontSize":"28rpx","borderStyle":"solid"},
				sitem: {"padding":"0 48rpx","boxShadow":"0 0 4rpx rgba(0,0,0,.3)","margin":"0 0","backgroundColor":"#fff","color":"#333","borderRadius":"0px","borderWidth":"0","width":"auto","lineHeight":"68rpx","fontSize":"28rpx","borderStyle":"solid"},
				queryIndex: 0,
				list: [],
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true