mlh/pages/shop/sale.vue

<template>
	<view class="center">
		<view class="product" v-for="(item, index) in productList">
			<view class="product-top flex">
				<image class="product-image" :src="item.image" mode=""></image>
				<view class="product-info">
					<view class="title">{{ item.store_name }}</view>
					<view class="title buyId">x{{ item.num }}</view>
					<view class="title buyName">￥{{ item.price * 1 * item.num }}</view>
				</view>
				<view class="kc">
					库存:
					<text>{{ item.number }}</text>
				</view>
			</view>
			<view class="product-bottom flex">
				<view class="product-bottom-left">购买数量</view>
				<view class="product-bottom-right">
					<uni-number-box class="step" :isMin="true" :value="num" :min="0" :max="item.number" @eventChange="numberChange(item, arguments)"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="top-search flex">
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
				<view class="search-font"><input type="text" placeholder="输入手机号或id或昵称搜索" v-model="productname" /></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="list-scroll-content" :style="{ height: height }" @scrolltolower="getuser">
			<view class="type-item flex" v-for="(item, index) in userList" @click="changePayType(item.uid)">
				<view class="type-item-left">
					<view class="type-item-avater"><image :src="item.avatar" mode=""></image></view>
					<view class="type-item-info">
						<view class="type-item-name">{{ item.nickname }}</view>
						<view class="type-item-phone">{{ item.phone }}</view>
					</view>
				</view>
				<label class="radio"><radio value="" color="#d8a668" :checked="type == item.uid"></radio></label>
			</view>
		</scroll-view>
		<view class="bottom-box"><view class="bottom-item1" @click="sale()">确认出货</view></view>
	</view>
</template>

<script>
import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
import { user_product } from '@/api/user.js';
import { deliver_goods } from '@/api/product.js';
import { upload, user_list } from '@/api/order.js';
import uniNumberBox from '@/components/uni-number-box.vue';
import { timeComputed } from '@/utils/rocessor.js';
export default {
	components: {
		uniNumberBox
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.list-scroll-content').boundingClientRect();
				query.exec(function(res) {
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	data() {
		return {
			num: 0,
			productList: [],
			buyList: {},
			userList: [],
			pages: 1,
			limit: 10,
			loadType: 'more',
			height: '',
			productname: '',
			type: '',
			info: ''
		};
	},
	onLoad(option) {
		this.getuser();
		this.loadData();
		if (option.type) {
			this.type = option.type;
		}
	},
	methods: {
		uploads() {
			upload({
				filename: ''
			}).then(data => {
				this.image = data[0].url;
				console.log(this.image);
			});
		},
		clickSearch() {
			this.pages = 1;
			this.limit = 10;
			this.loadType = 'more';
			this.userList = [];
			this.getuser();
		},
		getuser() {
			const obj = this;
			if (obj.loadType == 'nomore' || obj.loadType == 'loading') {
				return;
			}
			obj.loadType = 'loading';
			user_list({ pages: obj.pages, limit: obj.limit, name: obj.productname }).then(({ data }) => {
				obj.userList = obj.userList.concat(data.user);
				if (data.user.length != obj.limit) {
					obj.loadType = 'nomore';
				} else {
					obj.loadType = 'more';
				}
			});
		},
		loadData() {
			user_product({ pages: 1, limit: 1000 }).then(({ data }) => {
				data.list.forEach(e => {
					e.num = 0;
					console.log(e, '123456');
				});
				this.productList = data.list;
			});
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		sale() {
			const obj = this;
			if (obj.buyList === {}) {
				return obj.$api.msg('请选择出货商品');
			}
			if (obj.image == '') {
				return obj.$api.msg('请选择出货人');
			}
			deliver_goods({ uid: obj.type, product_id: this.buyList }).then(e => {
				uni.navigateTo({
					url: '/pages/shop/sucess'
				});
			});
		},
		changePayType(e) {
			this.type = e;
		},
		copy(value) {
			let obj = this;
			let content = value; //需要复制的内容
			console.log('复制的内容:', content);
			// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
			const result = uniCopy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持'
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		},
		// 查看大图
		lookimg(src) {
			console.log(src);
			let arr = [src];
			uni.previewImage({
				current: src,
				urls: arr
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		toBack() {
			uni.navigateBack({});
		},
		change(num) {
			this.tabCurrentIndex = num * 1;
		},
		// 购买数量变化
		numberChange(e, num) {
			const obj = this;
			obj.buyList[e.id] = num[0].number;
			e.num = num[0].number;
			if (num[0].number == 0) {
				Reflect.deleteProperty(obj.buyList, e.id);
			}
			console.log(obj.buyList);
		}
	}
};
</script>

<style lang="less">
.center {
	background: #f8f6f6;
	min-height: 100%;
	height: auto;
}
.product-top {
	position: relative;
	margin-top: 20rpx;
	padding: 35rpx 35rpx 40rpx 35rpx;
	background-color: #ffffff;
	justify-content: flex-start;
	align-items: flex-start;
	border-bottom: 1px solid #eeeeee;
	.kc {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
		text {
			color: #fd3b39;
		}
	}
	.product-image {
		width: 210rpx;
		height: 210rpx;
		border-radius: 10rpx;
	}
	.product-info {
		margin-left: 26rpx;
		padding-top: 10rpx;
		line-height: 1;
		.title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.buyId {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
			margin-top: 30rpx;
		}
		.buyName {
			margin-top: 82rpx;
			color: #fd3b39;
		}
	}
}
.product-bottom {
	padding: 30rpx 24rpx 24rpx;
	background: #ffffff;
	.product-bottom-left {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
}
.top-search {
	margin-top: 20rpx;
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f6f6;
	.search-box {
		justify-content: center;
		width: 698rpx;
		height: 66rpx;
		background: #fff;
		// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
		border-radius: 30rpx;

		.search {
			width: 34rpx;
			height: 34rpx;
		}

		.search-font {
			width: 500rpx;
			margin-left: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
}
.list-scroll-content {
	padding-bottom: 100rpx;
	background: #fff;
	.type-item {
		padding: 30rpx 24rpx 20rpx;
		border-bottom: 1px solid #f0f0f0;
		.type-item-left {
			display: flex;
			align-items: center;
			.type-item-avater {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.type-item-info {
				margin-left: 20rpx;
				.type-item-name {
					font-size: 30rpx;
					font-family: PingFangSC;
					font-weight: 500;
					color: #3f454b;
				}
				.type-item-phone {
					margin-top: 20rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
}
.bottom-box {
	width: 750rpx;
	height: 200rpx;
	background: linear-gradient(0deg, #ffffff, rgba(255, 255, 255, 0));
	padding: 68rpx 38rpx 0;
	display: flex;
	justify-content: space-between;
	.bottom-item1 {
		width: 674rpx;
		height: 88rpx;
		background: #ecd0a9;
		border-radius: 44rpx;
		font-size: 36rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		color: #54320b;
		line-height: 88rpx;
	}
}
</style>