mlh/pages/shop/buy.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>
			<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="100" @eventChange="numberChange(item, arguments)"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="main" v-if="bank">
			<view class="main-tip">请向以下银行账号自行转账</view>
			<view class="tc-item flex">
				<view class="tcitem-name">姓名</view>
				<view class="ali-name">{{ bank.bank_name }}</view>
				<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.bank_name)"></image>
			</view>
			<view class="tc-item flex">
				<view class="tcitem-name">银行</view>
				<view class="ali-name">{{ bank.bank }}</view>
				<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.bank)"></image>
			</view>
			<view class="tc-item flex">
				<view class="tcitem-name">开户行</view>
				<view class="ali-name">{{ bank.sub_branch }}</view>
				<image @click="copy(bank.sub_branch)" class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
			</view>
			<view class="tc-item flex">
				<view class="tcitem-name">账号</view>
				<view class="ali-name">{{ bank.bank_number }}</view>
				<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.bank_number)"></image>
			</view>
			<view class="tc-item flex">
				<view class="tcitem-name">说明</view>
				<view class="ali-name" style="color: #FD3B39;">请务必上传付款截图，否则不发货</view>
				<view class="tcitem-image"></view>
			</view>
			<view class="tc-item">
				<view class="upload-title" style="color: #9d9d9d;">二维码</view>
				<view class="upload-main" @click="lookimg(bank.code)"><image class="upload-image" :src="bank.code" mode="aspectFit"></image></view>
			</view>
		</view>
		<view class="upload">
			<view class="upload-title">上传支付截图</view>
			<view class="upload-main">
				<image class="upload-image" src="../../static/img/add.png" mode="" v-if="!image" @click="uploads()"></image>
				<image class="upload-image" :src="image" mode="" @click="uploads()" v-if="image"></image>
				<view class="upload-font">点击上传支付截图</view>
			</view>
		</view>
		<view class="contentBottomHeight"></view>
		<view class="bottom flex">
			<view class="bottom-item" @click.stop="openKf()">
				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
				<view class="bottom-font">联系客服</view>
			</view>
			<view class="btn" @click.stop="buy()">完成上传</view>
		</view>
		<uni-popup ref="popupkf" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="../../static/img/img010.png" mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ text }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="copy(text)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
import { upload, bank } from '@/api/order.js';
import { getProducts, purchase } from '@/api/product.js';
import { timeComputed } from '@/utils/rocessor.js';
import uniNumberBox from '@/components/uni-number-box.vue';
export default {
	components: {
		uniCountdowns,
		uniNumberBox
	},
	data() {
		return {
			num: 0,
			type: 1,
			productList: [],
			buyList: {},
			tabCurrentIndex: 0,
			bank: '',
			image: '',
			text: '123456'
		};
	},
	onLoad(option) {
		this.id = option.ordid;
		this.loadData();
		if (option.type) {
			this.type = option.type;
		}
	},
	methods: {
		uploads() {
			upload({
				filename: ''
			}).then(data => {
				this.image = data[0].url;
				console.log(this.image);
			});
		},
		loadData() {
			getProducts({ pages: 1, limit: 1000 }).then(({ data }) => {
				data.forEach(e => {
					e.num = 0;
					console.log(e, '123456');
				});
				this.productList = data;
			});
			bank({}).then(({ data }) => {
				this.bank = data;
			});
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		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'
				});
			}
		},
		tocall() {
			let num = this.zfb != '' ? this.zfb.phone : this.wx != '' ? this.wx.phone : this.bank.phone;
			console.log(num);
			uni.makePhoneCall({
				phoneNumber: num //仅为示例
			});
		},
		// 查看大图
		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;
		},
		// 打开客服
		openKf() {
			this.$refs.popupkf.open();
		},
		// 关闭客服
		cancel() {
			this.$refs.popupkf.close();
		},
		// 购买数量变化
		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);
		},
		buy() {
			console.log(this.buyList);
			if (this.buyList === {}) {
				console.log(111);
				return this.$api.msg('请选择进货商品');
			}
			if (this.image == '') {
				return this.$api.msg('请上传支付凭证');
			}
			purchase({ image: this.image, product_id: this.buyList }).then(e => {
				uni.navigateTo({
					url: '/pages/shop/sucess?type=2'
				});
			});
		}
	}
};
</script>

<style lang="less">
.center {
	background: #f8f6f6;
	min-height: 100%;
	height: auto;
}
.product-top {
	margin-top: 20rpx;
	padding: 35rpx 35rpx 40rpx 35rpx;
	background-color: #ffffff;
	justify-content: flex-start;
	align-items: flex-start;
	border-bottom: 1px solid #eeeeee;
	.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;
	}
}
.main {
	margin-top: 20rpx;
	padding: 30rpx 0 40rpx;
	background: #ffffff;
	.main-tip {
		padding: 0 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
}
.tc-item {
	padding: 50rpx 30rpx 0;
	line-height: 1;
	.tcitem-name {
		width: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.ali-name {
		width: 440rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.tcitem-image {
		width: 26rpx;
		height: 28rpx;
	}
}
.upload-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
}
.upload-title {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.upload-main {
	padding-top: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.upload-font {
		margin-top: 24rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
}
.upload {
	margin-top: 20rpx;
	padding: 34rpx 30rpx 40rpx 30rpx;
	background: #ffffff;
}
.bottom {
	position: fixed;
	bottom: 0;
	background: #ffffff;
	width: 750rpx;
	height: 146rpx;
	justify-content: flex-start;
	.bottom-item {
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.bi-image {
			width: 38rpx;
			height: 34rpx;
		}
		.bottom-font {
			margin-top: 14rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.bottom-num {
			line-height: 1;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.shu {
		margin-left: 20rpx;
		width: 2px;
		height: 74rpx;
		background: #c0bfc0;
	}
	.btn {
		margin-left: 20rpx;
		width: 570rpx;
		height: 80rpx;
		background: #fd3b39;
		border-radius: 20rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 80rpx;
	}
}
// 文章页底部高度撑开
.contentBottomHeight {
	height: 150rpx;
}
.popup-box {
	width: 522rpx;
	height: 605rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	position: relative;

	.img {
		position: relative;
		top: -56rpx;
		left: 0;
		width: 522rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;

		image {
			border-radius: 20rpx 20rpx 0 0;
			width: 450rpx;
			height: 132rpx;
		}
	}

	.mian {
		margin-top: -44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding: 32rpx 32rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;

		.delivery {
			font-size: 40rpx;
			color: #333333;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
			}

			image {
				margin-top: 48rpx;
				width: 172rpx;
				height: 160rpx;
			}
		}

		.nocancel {
			font-size: 32rpx;
			color: #333333;
			margin-top: 14rpx;
		}

		.comfirm-box {
			margin-top: 52rpx;
			display: flex;
			// margin-bottom: 32rpx;

			// justify-content: space-around;
			.cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 197rpx;
				height: 74rpx;
				border: 1px solid #dcc786;
				border-radius: 38rpx;

				font-size: 32rpx;
				color: #605128;
			}

			.comfirm {
				margin-left: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 197rpx;
				height: 74rpx;
				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
				border-radius: 38px;
				font-size: 32rpx;
				color: #605128;
			}
		}
	}
}
</style>