high-mini/pages/user/agentCoupons/agentCoupons.vue

<template>
	<view>
		<view class="onorder width100" v-if="agentCouponList.length==0">
			<image :src="imagewxUrl+imgadres"></image>
		</view>
		<view class="width90 height130 backcorfff mart15" v-for="(agent,index) in agentCouponList" :key="index">
			<image class="flleft agent_img margle mart10" v-if="agent.merchantLogo == null"
				src='../../../static/img/logo.png'></image>
			<image class="flleft agent_img margle mart10" v-else :src="image_url+agent.merchantLogo"></image>
			<view class="agent_title paddtop13">
				<view class="font18 fcor333 width100">{{agent.highCoupon.couponName}}</view>
				<view class="width100 mart5 font14 fcor333 height22">
					<!-- <view class="agent_left_num flleft text1">
						{{agent.highCouponCode.salesCode}}
					</view> -->
					<view class="agent_right_num flright fotrt">
						{{agent.highCoupon.salesPrice}}.00
					</view>
				</view>
			</view>
			<view class="width100 line1 mart5"></view>
			<view class="width90">
				<button class="flright backcorf06 fcorfff font15 agent_btn mart10"
					@click="generateCode(agent.id,agent.highCoupon.couponSource)"
					v-if="typeId == 1 && typeid == 1">生成油码</button>
				<button class="flright backcorf06 fcorfff font15 agent_btn mart10" @click="jumpCouponDes(agent.id)"
					v-if="typeId == 2 && typeid == 1">查看详情</button>
				<view class="agent_ts font15 fcor333 fotlt text1"
					v-if="typeId == 2 && agent.remark !=null && typeid == 1">
					备注:{{agent.remark}}</view>

				<button class="flright backcorf06 fcorfff font15 agent_btn mart10"
					@click="generateCode(agent.id,agent.highCoupon.couponSource)"
					v-if="typeId == 1 && typeid == 2">生成兑换码</button>
				<button class="flright backcorf06 fcorfff font15 agent_btn mart10" @click="jumpCouponDes(agent.id)"
					v-if="typeId == 2 && (typeid == 2 || typeid == 3) ">查看详情</button>
				<view class="agent_ts font15 fcor333 fotlt text1"
					v-if="typeId == 2 && (typeid == 2 || typeid == 3) && agent.remark !=null ">
					备注:{{agent.remark}}</view>
			</view>
		</view>

		<!-- /弹窗 -->
		<view :hidden="userFeedbackHidden" class="popup_content">
			<view class="popup_title">填写信息</view>
			<input class="width85 pop_input font14 mart20 marb10" maxlength="11" v-model="feedPhone" placeholder="请输入手机号"
				type="number" v-if="couponSource == 4 || couponSource == 5" />
			<view class="popup_textarea_item">
				<textarea class="popup_textarea" placeholder='请填写您的备注信息...' v-model="feedbackContent">
						</textarea>
				<view @click="submitFeedback()">
					<button class="popup_button mart20 fontlet">提交</button>
				</view>
			</view>
		</view>
		<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
	</view>
</template>

<script>
	import {
		getCodeListByAgentCoupon,
		generateCode,
		pushGzSinopec
	} from "../../../Utils/Api.js";
	let app = getApp();
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				agentCouponList: [],
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'noorder.png',
				isNoMoreData: false,
				typeId: '',
				reFreshs: '',
				couponId: '',
				image_url: app.globalData.imgUrl,
				userFeedbackHidden: true, // 默认隐藏
				feedbackContent: '', // 用户备注信息
				feedPhone: '', //推送手机
				couponSource: '', //类型
				couId: '',
				typeid: ''
			}
		},
		filters: {
			//过滤器 用于格式化时间
			formatDate: function(value, spe = '/') {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			}
		},
		onReachBottom() {
			this.getCodeListByAgentCoupon();
		},
		onLoad(option) {
			this.typeId = option.id;
			this.typeid = option.typeid;
			this.couponId = option.couponsId;
		},
		onShow() {
			this.getCodeListByAgentCoupon();
		},
		watch: {
			//监听reFresh,如果有修改就执行监听器
			reFreshs: function() {
				this.pageNum = 1;
				this.agentCouponList = []
				this.isNoMoreData = false;
				this.getCodeListByAgentCoupon();
			}
		},
		methods: {
			//查询列表
			getCodeListByAgentCoupon() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading();
					return false;
				}
				let pagenum = this.pageNum;
				let params;
				if (this.typeId == 1) {
					if (this.typeid == 1) {
						params = {
							pageNum: pagenum,
							couponId: this.couponId,
							status: 1,
							type: 1,
							pageSize: this.pageSize
						}
					} else {
						params = {
							pageNum: pagenum,
							couponId: this.couponId,
							status: 1,
							type: 2,
							pageSize: this.pageSize
						}
					}
				} else if (this.typeId == 2) {
					if (this.typeid == 1) {
						params = {
							pageNum: pagenum,
							couponId: this.couponId,
							status: '2,3',
							type: 1,
							pageSize: this.pageSize
						}
					} else if (this.typeid == 2) {
						params = {
							pageNum: pagenum,
							couponId: this.couponId,
							status: 2,
							type: 2,
							pageSize: this.pageSize
						}
					} else if (this.typeid == 3) {
						params = {
							pageNum: pagenum,
							couponId: this.couponId,
							status: 3,
							type: 2,
							pageSize: this.pageSize
						}
					}
				}

				getCodeListByAgentCoupon(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.agentCouponList = this.agentCouponList.concat(res.return_data.list);
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.agentCouponList = [];
					}
				})
			},

			//生成二维码
			generateCode(item, item1) {
				this.userFeedbackHidden = false;
				this.couId = item;
				this.couponSource = item1;
			},
			hideDiv() { // 隐藏输入弹出框
				this.userFeedbackHidden = true;
			},
			// 提交备注
			submitFeedback() {
				if (this.feedPhone == '' && this.couponSource == 4) {
					uni.showToast({
						title: '请填写推送手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.feedbackContent == '') {
					uni.showToast({
						title: '请填写备注信息',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.showLoading({
					title: '生成中...'
				})
				if (this.couponSource == 4) {
					let datas = {
						couponAgentCodeId: this.couId,
						remark: this.feedbackContent,
						phone: this.feedPhone
					}
					pushGzSinopec(datas).then(res => {
						uni.hideLoading()
						if (res.return_code == '000000') {
							this.userFeedbackHidden = true;
							uni.navigateTo({
								url: '../../goods/coupons-info-details/coupons-info-details?id=' + this
									.couId
							})
						} else {
							uni.showToast({
								title: res.return_msg,
								icon: 'none',
								duration: 2000
							})
						}
					});
				} else {
					let datas = {
						couponAgentCodeId: this.couId,
						remark: this.feedbackContent,
						phone: this.feedPhone
					}
					generateCode(datas).then(res => {
						uni.hideLoading()
						if (res.return_code == '000000') {
							this.userFeedbackHidden = true;
							uni.navigateTo({
								url: '../../goods/coupons-info-details/coupons-info-details?id=' + this
									.couId
							})
						} else {
							uni.showToast({
								title: res.return_msg,
								icon: 'none',
								duration: 2000
							})
						}
					});
				}


			},

			//查看详情
			jumpCouponDes(ids) {
				uni.navigateTo({
					url: '../../goods/coupons-info-details/coupons-info-details?id=' + ids
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.onorder {
		width: 100%;
		height: 50vw;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;

		image {
			width: 70vw;
			margin-top: 150px;
		}

		.text {
			width: 100%;
			height: 60upx;
			font-size: 28upx;
			color: #444;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.agent_img {
		width: 50px;
		height: 50px;
	}

	.agent_title {
		margin-left: 60px;
	}

	.agent_left_num {
		width: 55%;
	}

	.agent_right_num {
		width: 40%;
		margin-right: 5%;
	}

	.agent_btn {
		width: 88px;
		height: 35px;
		line-height: 35px;
	}

	.agent_ts {
		margin-right: 95px;
		padding-top: 18px;
	}

	// 弹窗
	.popup_overlay {

		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 40%;
		left: 50%;
		width: 520upx;
		height: 600upx;
		margin-left: -270upx;
		margin-top: -270upx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
		border-radius: 20upx;
	}

	.popup_title {
		padding-top: 20upx;
		width: 480upx;
		text-align: center;
		font-size: 40rpx;
	}

	.pop_input {
		// border-bottom: 1px solid #F1F1F1;
		border: 1px solid #f1f1f1;
		margin-left: 5%;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
	}

	.popup_textarea_item {
		padding-top: 20rpx;
		height: 200rpx;
		width: 90%;
		background-color: #F1F1F1;
		margin-top: 30rpx;
		margin-left: 5%;
	}

	.popup_textarea {
		width: 410upx;
		height: 200rpx;
		font-size: 26upx;
		margin-left: 20upx;
	}

	.popup_button {
		color: white;
		background-color: #4399FC;
		border-radius: 10upx;
	}
</style>