1.0yangche/pages/packageOne/user/history/history.vue

<template>
	<view class="wrap">
		<view class="header clear">
			<view class="header_lf">浏览记录（{{allData.total}}）</view>
			<view class="header_rg" v-if="select === 0" @tap="changeSelect">管理</view>
			<view class="header_rg" v-else @tap="changeSelect">完成</view>
		</view>
		<view class="back"></view>
		<view class="shop_list">
			<view class="item" v-for="item,index in allData.browse" :key="index" @tap="toShop(item)">
				<view class="nav_list clear">
					<view class="select" v-if="select === 1" @tap.stop="changeselect(item,index)"><image :src="item.select === 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image></view>
					<view class="nav_list_img">
						<image :src="url + item.imgLog"></image>
					</view>
					<view class="middle" style="float:left;width:400rpx;">
						<view class="clear">
							<view class="middle_title">{{item.name}}</view>
							<view class="middle_title_pai" v-if="item.status == 1">
								<image src="https://wx.fujinyangche.com/nvrnetwork/images/vip.png"></image>
							</view>
						</view> 
						<view style="margin-left:20rpx;">
							<view class="middle_qian" v-for="item,index in item.mainBusiness" :key="index">{{item}}</view>
						</view>
					</view>
					<view class="recommend" v-if="item.isHot == 1">荐</view>
					<view class="distance">{{item.district}}</view>
				</view>
				<view class="back1"></view>
			</view>	
		</view>
		<!-- 底部导航 -->
		<view class="footer" v-if="select === 1">
			<view class="select_all" @tap="changeSelectAll"><image :src="selectAll === 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image> 全选</view>
			<view class="delete" @tap="del">删除</view>
		</view>
	</view>
	
</template>

<script>
	import api from "../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				url:app.globalData.url,
				select:0, //判断选择框是否出现
				selectAll:0, //全选按钮
				ids:[],//要删除id几何
				allData:null,//页面数据
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserMyHistory(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//点击管理按钮
			changeSelect(){
			    if(this.select === 0){
					this.select = 1;
			    }else{
					this.select = 0;
			    }
			},
			//点击每个选择
			changeselect(item,index){
				if(this.allData.browse[index].select == 0){
					this.ids.push(item.id);
					this.allData.browse[index].select = 1;
				}else{
					this.ids.pop();
					this.allData.browse[index].select = 0;
				}
				//判断全选按钮是否选中
				let count = 0;
				let arr = this.allData.browse;
				for (let i = 0; i < arr.length; i++){
					if(arr[i].select ===1){
						count++;
					}
					if (count == arr.length) {//如果被选中的个数等于items的长度
						this.selectAll = 1 //全选checkbox选中
					} else {
						this.selectAll = 0//全选checkbox不选中
					}
				}
			},
			//全选按钮点击事件
			changeSelectAll(){
				let arr = this.allData.browse;
				let ids = this.ids;
				if(this.selectAll == 0){
					this.selectAll = 1;
					for (let i = 0; i < arr.length; i++){
						this.allData.browse[i].select = 1;
						if (ids.indexOf(arr[i].id) == -1){
							this.ids.push(arr[i].id)
						}
					}
				}else{
					this.ids = [];
					this.selectAll = 0;
					for (let i = 0; i < arr.length; i++){
						this.allData.browse[i].select = 0;
					}
				}
			},
			//删除按钮
			del(){
				let data = {
					ids:this.ids.join(",")
				}
				api.deleteMyhistory(data).then((res)=>{
					console.log(res);
					if(res.data.is){
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							duration:2000
						})
						this.getData();
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'icon',
							duration:2000
						})
					}
				})
			},
			//进入店铺
			toShop(item){
				if(item.roleType == 1){
					uni.navigateTo({
						url:'../../service/classify/shop_detail/shop_detail?id=' + item.storeId
					})
				}
			}
		}
	}
</script>

<style>
	.header{
	  height:100rpx;
	  line-height: 100rpx;
	  border-top:1px solid #f2f2f2;
	  box-sizing: border-box;
	  padding:0 30rpx;
	}
	.header_lf{
	  float:left;
	  font-size: 30rpx;
	  color:#666666;
	}
	.header_rg{
	  width:96rpx;
	  height:44rpx;
	  border-radius:2rpx;
	  border:1px solid rgba(231,120,23,1);
	  box-sizing: border-box;
	  text-align: center;
	  line-height: 44rpx;
	  font-size: 22rpx;
	  color:#E77817;
	  float:right;
	  margin-top:26rpx;
	}
	.clear:after{
		content: "";
		clear: both;
		display: block;
	}
	.shop_list{
	  width:100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  background-color: #ffffff;
	}
	.nav_list{
	  width:100%;
	  height:208rpx;
	  box-sizing: border-box;
	  position: relative;
	  padding:24rpx 0 24rpx 30rpx;
	}
	.nav_list_img{
	  float:left;
	  position: relative;
	  overflow: hidden;
	}
	.end{
	  width:170rpx;
	  height:40rpx;
	  background-color: #E77817;
	  text-align: center;
	  line-height: 40rpx;
	  font-size: 20rpx;
	  color:#ffffff;
	  position: absolute;
	  top:14rpx;
	  left:-50rpx;
	  transform: rotate(-45deg);
	  display: none;
	}
	.show{
	  display: block;
	}
	.nav_list_img image{
	  display: block;
	  width:160rpx;
	  height:160rpx;
	  border-radius: 12rpx;
	}
	.middle_title{
	  margin-left: 20rpx;
	  font-size: 30rpx;
	  color:#2A2A2A;
	  font-weight: bold;
	  float:left;
	}
	.middle_title_pai{
	  width:120rpx;
	  height:37rpx;
	  position: absolute;
	  top:28rpx;
	  right:30rpx;
	}
	.middle_title_pai image{
	  display: block;
	  width: 100%;
	  height:100%;
	}
	.middle_qian{
	  padding:0 16rpx;
	  height:34rpx;
	  background:rgba(231,120,23,0.06);
	  border-radius:4rpx;
	  text-align: center;
	  line-height: 34rpx;
	  font-size: 22rpx;
	  color:#E77817;
	  display: inline-block;
	  margin: 20rpx 10rpx 0 0rpx;
	}
	/* .middle_qian:first-child{
	  margin-left: 20rpx;
	} */
	.dengji{
	  margin:24rpx 0 0 22rpx;
	}
	.dengji_icon{
	  width:160rpx;
	  height:28rpx;
	  float:left;
	  margin-top:4rpx;
	}
	.dengji_icon image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.dengji_text{
	  font-size: 24rpx;
	  color:#222222;
	  font-weight: bold;
	  float:left;
	  margin-left: 8rpx;
	}
	.recommend{
	  width:28rpx;
	  height:28rpx;
	  color:#ffffff;
	  font-size: 22rpx;
	  text-align: center;
	  line-height: 28rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  top:52rpx;
	  right:0rpx;
	}
	.distance{
	  font-size: 24rpx;
	  color:#999999;
	  position: absolute;
	  right:30rpx;
	  bottom:46rpx;
	}
	.select{
	  width:40rpx;
	  height:40rpx;
	  float:left;
	  margin-top:60rpx;
	  margin-right: 30rpx;
	}
	.select image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	  z-index:100;
	}
	.delete{
	  float:right;
	  width:284rpx;
	  height:72rpx;
	  background:rgba(231,120,23,1);
	  border-radius:6rpx;
	  text-align: center;
	  line-height: 72rpx;
	  font-size: 30rpx;
	  color:#ffffff;
	  margin:14rpx 30rpx 0 0;
	}
	.select_all{
	  width:calc(100% - 314rpx);
	  height:100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color:#222222;
	  float:left;
	}
	.select_all image{
	  display: inline-block;
	  width: 40rpx;
	  height:40rpx;
	  margin-right: 6rpx;
	  vertical-align: text-bottom;
	}
	.back1{
	  height:10rpx;
	  width:100%;
	  background: #f7f7f7;
	}
</style>