renshou/office/add/add.vue

<template>
	<view class="con">
		<view class="search ddflex">
			<image src="../../static/images/ssico.png" class="ssico"></image>
			<input @input="inputEvt" v-model="searchTitle" placeholder="搜索商品" placeholder-class="placeholder" class="ipt fflex" />
			<image v-if="searchTitle" src="../static/images/clear.png" class="clear" @click="clearTitle()"></image>
		</view>
		<view class="list" v-if="pageList.length > 0">
			<view class="li ddflex" v-for="(item, index) in pageList" :key="index">
				<image :src="item.pic" mode="aspectFill" class="pic"></image>
				<view class="fflex">
					<view class="title tovers">{{ item.title }}</view>
					<view class="money">¥{{ item.salePrice }}</view>
				</view>
				<view class="btn" @click="addProduct(item,index)">{{item.isAdd?'已添加':'添加'}}</view>
			</view>
		</view>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss + 'empty_sp.png'"></image>
			<text>暂无商品</text>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="complete" @click="completeProduct()">完成</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			isLoad: true,
			searchTitle: '',
			form: {
				page: 1,
				limit: 10
			},
			pageList: [],
			productList: []
		};
	},
	onLoad() {
		//默认选中上面的标签
		let pages = getCurrentPages(); //获取所有页面栈实例列表
		let prevPage = pages[pages.length - 2]; //上一页页面实例
		this.productList = prevPage.$vm.productList;
		console.log('this.productList=',this.productList)
		this.getProductList();
	},

	onReachBottom() {
		this.form.page++;
		this.getProductList();
	},
	methods: {
		inputEvt(e) {
			this.form.page = 1;
			this.isLoad = true;
			this.getProductList();
		},

		clearTitle() {
			this.searchTitle = '';
			this.form.page = 1;
			this.isLoad = true;
			this.getProductList();
		},

		getProductList() {
			var that = this;
			if (!this.isLoad) return false;
			this.isLoad = false;
			if (this.searchTitle) {
				this.form.searchTitle = this.searchTitle;
			} else {
				this.form.searchTitle = '';
			}
			req.getRequest('/api/product/list', this.form, data => {
				data = data.map(it => {
					it.isAdd = false;
					this.productList.map(pit=>{
						if(it.id == pit.id){
							it.isAdd = true;
						}
					})
					if (it.deliverWay && JSON.parse(it.deliverWay).indexOf(3) != -1) it.isJs = true;
					return it;
				});
				if (data && data.length >= 10) {
					that.isLoad = true;
				}
				if (that.form.page > 1) data = that.pageList.concat(data);
				that.pageList = data;
			});
		},

		addProduct(item,index) {
			// if(item.isAdd) return false;
			this.pageList[index].isAdd = !this.pageList[index].isAdd;
		},
		completeProduct(){
			let list = this.pageList.filter(it=>{return it.isAdd});
			if(list.length > 3) return req.msg('最多可添加3个商品');
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.$vm.productList = list;
			// prevPage.$vm.productList.push(item); //修改上一页data里面的searchVal参数值为1211
			uni.navigateBack({
				//uni.navigateTo跳转的返回，默认1为返回上一级
				delta: 1
			});
		},
	}
};
</script>
<style>
@import './add.css';
</style>