xuan-pay-cweb/pages/index/equity-activities-details/equity-activities-details.vue

<template>
	<view>
		<view class="width94 font20 fontwig6 fcor333 mart15 fotct">{{activitydetails.activityName}}</view>
		<view class="width94 font16 fcor666 mart10 fotct">{{activitydetails.comments}}</view>
		<view class="width90 font13 fcoreb5 mart15 alijusstart">
			活动时间:
			{{activitydetails.effectiveStart | timeFormat('yyyy-mm-dd')}} -
			{{activitydetails.effectiveEnd | timeFormat('yyyy-mm-dd')}}
		</view>
		<view class="width90 font13 fcoreb5 alijusstart">
			报名时间: {{activitydetails.registrationStart | timeFormat('yyyy-mm-dd')}} -
			{{activitydetails.registrationEnd | timeFormat('yyyy-mm-dd')}}
		</view>
		<view class="width90 fcoreb5 font14 fontwig6 mart5" v-if="activitydetails.bankActivityRoster !=null">已报名
		</view>
		<view class="width90 fcor666 font14 fontwig6 mart5" v-else>未报名</view>
		<view class="width100 backcor6 mart5" style="height: 1px;"></view>
		<view class="width90 mart20">
			<rich-text :nodes="activitydetails.details"></rich-text>
		</view>

		<view class="width90 mart20 marb15 fcor333 fontwig6 font16" v-if="activitydetails.bankActivityRoster !=null">
			选择周期费率
			<text class="fcoreb5" v-if="activitydetails.bankActivityRoster.bankActivityRosterRateList[0].status == 1">(已生效)</text>
			<text class="fcoreb5" v-if="activitydetails.bankActivityRoster.bankActivityRosterRateList[0].status == 2">(未配置)</text>
		</view>
		<view class="username" v-for="(item,index) in activityList" :key="index">
			<view class="namecont">
				{{item.startTime | timeFormat('yyyy-mm-dd')}} 至 {{item.endTime | timeFormat('yyyy-mm-dd')}}
			</view>
			<picker mode="selector" style="width: 30%;" :range="item.rateArray" @change="changefeil"
				@click="changefeilvalue(item)">
				<!-- <view class="fotrt text1" style="padding: 0 25rpx;"></view> -->
				<input disabled="true" v-model="item.ext1" />
			</picker>
			<image class="flright iconw" mode="widthFix" src="../../../static/img/downj.png"></image>
		</view>

		<button class="btns" @click="enrollActivity" v-if="activitydetails.bankActivityRoster ==null">提交审核</button>
		<button class="btns" @click="configRosterRate" v-else>提交费率</button>
		<view class="height60"></view>
	</view>
</template>

<script>
	import {
		queryActivityDetail,
		enrollActivity,
		configRosterRate
	} from '../../../Utils/Api.js';
	export default {
		data() {
			return {
				activitydetails: '', //活动数据
				detailsid: '', // 详情id
				merId: '', //商户id
				activityList: [], // 所有费率
				changeValue: '' //选择的值
			}
		},
		onLoad(options) {
			this.detailsid = options.id;
			this.merId = options.merid;
			this.queryActivityDetail();
		},
		methods: {
			//选择卡号
			changefeil(e) {
				let query = e.target.value;
				if (this.changeValue) {
					for (var i = 0; i < this.activityList.length; i++) {
						if (this.changeValue.id == this.activityList[i].id) {
							this.activityList[i].ext1 = this.activityList[i].rateArray[query];
						}
					}
				}
			},
			changefeilvalue(item) {
				this.changeValue = item;
			},
			//查询活动详情
			queryActivityDetail() {
				uni.showLoading({
					title: '加载中'
				})
				let datas = {
					bankActivityId: this.detailsid,
					merId: this.merId
				}
				queryActivityDetail(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.activitydetails = res.return_data;
						this.activityList = res.return_data.bankActivityRoster
							.bankActivityRosterRateList
					} else {
						uni.showToast({
							title: res.return_msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			//提交报名
			enrollActivity() {
				let that = this;
				uni.showModal({
					title: '报名申请',
					content: '是否提交报名审核',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交审核中...'
							})
							let datas = {
								bankActivityId: that.detailsid,
								merId: that.merId
							}
							enrollActivity(datas).then(res => {
								uni.hideLoading();
								if (res.return_code == '000000') {
									uni.showToast({
										title: res.return_data,
										duration: 2000,
										icon: 'none'
									})
									that.queryActivityDetail();
								} else {
									uni.showToast({
										title: res.return_msg,
										duration: 2000,
										icon: 'none'
									})
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//提交费率
			configRosterRate() {
				let that = this;
				uni.showModal({
					title: '费率提交',
					content: '是否提交当前费率',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							})
							let rateDatas = [];
							for (var i = 0; i < that.activityList.length; i++) {
								if (that.activityList[i].ext1) {
									let datas = {
										"rateId": that.activityList[i].id,
										"preferentialRates": that.activityList[i].ext1
									}
									rateDatas.push(datas);
								}
							}
							let datas = {
								"bankActivityId": that.detailsid,
								"merId": that.merId,
								"rateList": rateDatas
							}
							configRosterRate(datas).then(res => {
								uni.hideLoading();
								if (res.return_code == '000000') {
									uni.showToast({
										title: res.return_data,
										duration: 2000,
										icon: 'none'
									})
									uni.navigateBack();
								} else {
									uni.showToast({
										title: res.return_msg,
										duration: 2000,
										icon: 'none'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.btns {
		margin-top: 80rpx;
		width: 80%;
		margin-left: 10%;
		height: 50px;
		line-height: 50px;
		background-color: #0083f5;
		color: #FFFFFF;
		font-weight: bold;
	}

	.username {
		width: calc(100% - 90upx);
		height: 40px;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 5px 20px;

		input {
			// width: 50%;
			// height: 50upx;
			// font-size: 16px;
			// color: #333333;
			// font-weight: blod;
			text-align: right;
			padding-right: 10px;
		}


		.namecont {
			color: #666666;
			width: 80%;
		}
	}
</style>