groupon-wx/pages/groupbuying/publish_group/index.vue

<template>
	<view :style="colorStyle">
		<form @submit="formSubmit">
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>主标题</view>
						<input type='text' placeholder='请填写主标题' name='mainTitle' :value="grouponReqData.mainTitle"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>副标题</view>
						<input type='text' placeholder='请填写副标题' name="subTitle" :value='grouponReqData.subTitle'
							placeholder-class='placeholder'></input>
					</view>
				</view>
				<view class="list" style="margin-top:50rpx;">
					<view class="title">
						团购商品
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>团购时间</view>
						<view @click="show1 = true">
							<uni-datetime-picker @change="confirmDate1" v-model="datetimerange1" type="datetimerange"
								rangeSeparator="至">
								<input placeholder='请选择团购时间' disabled :value='grouponDateTime' placeholder-class='placeholder'></input>
							</uni-datetime-picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>提货时间</view>
						<view @click="show2 = true">
							<uni-datetime-picker @change="confirmDate2" v-model="datetimerange2" type="datetimerange"
								rangeSeparator="至">
								<input placeholder='请选择提货时间' disabled :value='takeDateTime' placeholder-class='placeholder'></input>
							</uni-datetime-picker>
						</view>
						<!-- 						<u-datetime-picker @confirm="dateConfirmDate2()" :show="show2" v-model="value1"
							mode="datetimerange"></u-datetime-picker> -->
					</view>



					<view class='item acea-row row-between-wrapper'>
						<view class='name'>自提点</view>
						<view @click="openSelfTakeTable()">
							<input placeholder='请选择提自提点' name="phone" disabled :value='ztd' placeholder-class='placeholder'
								maxlength="11"></input>
						</view>
						<u-picker @confirm="confirmZTD()" :show="showZTD" :columns="selfTakeList" keyName="name"></u-picker>
					</view>


				</view>

				<view class="list select-list" v-if="selectGoodList.length > 0">
					<view class="title">
						团购商品
					</view>

					<view class="all-products-body" v-for="(itemn, indexn) in selectGoodList" :key="indexn">
						<view class="all-products-item">
							<image :src='itemn.goodsCover' v-if="itemn.goodsCover"></image>
							<image src="/static/images/sort-img.png" v-else></image>

							<view class="all-products-item-content">
								<view class="all-products-item-content-t">
									{{ itemn.goodsName }}
								</view>
								<view class="all-products-item-content-b">
									<view style="display:flex; flex-grow: 1;">
										<text class="red"> ¥{{ itemn.discountPrice }}</text>
									</view>

									<view @click="delItem(indexn)" class="count">
											<image
												src="http://www.gzzzyd.com/groupon/home_slices/错误@2x.png"
												mode="scaleToFill"
											/>
										</view>

									<view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="button_1 flex-col" @click="addGood">
					<text class="text_15">添加商品</text>
				</button>




				<button class='keepBnt' form-type="submit">保存并提交</button>
				<!-- #ifdef MP -->
				<!-- <view class="wechatAddress" v-if="!id" @click="getWxAddress">{{ $t(`导入微信地址`) }}</view> -->
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="wechatAddress" v-if="this.$wechat.isWeixin() && !id" @click="getAddress">{{ $t(`导入微信地址`) }}
				</view>
				<!-- #endif -->
			</view>
		</form>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->

		<u-popup :show="addGoodPopupShow" @close="close" @open="	">
			<view>
				<publish_good_list @getSelectData="getSelectData" v-if="addGoodPopupShow"></publish_good_list>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { publishGroupon, getAllSelfTake } from '@/api/groupon.js';
import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from "vuex";

// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
import publish_good_list from '../publish_good_list/index.vue';
import colors from '@/mixins/color.js';
export default {
	components: {
		// #ifdef MP
		authorize,
		// #endif
		home,
		publish_good_list
	},
	mixins: [colors],
	data () {
		return {
			grouponDateTime: '',
			takeDateTime: '',
			datetimerange1: '',
			datetimerange2: '',
			grouponReqData: {
				mainTitle: '',
				subTitle: '',
				grouponStartTime: '',
				grouponEndTime: '',
				takeStartTime: '',
				takeEndTime: '',
				selfTakeIds: [],
				goodsIds: []
			},
			grouponTimeRange: [],
			takeTimeRange: [],
			array: [],
			show1: false,
			show2: false,
			showZTD: false,
			addGoodPopupShow: false,
			id: 0, //地址id

			district: [],
			multiArray: [],
			multiIndex: [0, 0, 0],
			cityId: 0,
			news: '',
			noCoupon: 0,
			selectGoodList: [],
			selfTakeList: [],
			ztd: ''
		};
	},
	computed: mapGetters(['isLogin']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getUserAddress();
				}
			},
			deep: true
		}
	},
	onLoad (options) {
		if (this.isLogin) {
			this.id = options.id || 0;
			uni.setNavigationBarTitle({
				title: '发布团购'
			})
			// this.getUserAddress();
			// this.getCityList();
		} else {
			toLogin();
		}
	},
	methods: {
		confirmDate1 (value) {
			let start = value[0];
			let end = value[1];
			this.grouponReqData.grouponStartTime = start;
			this.grouponReqData.grouponEndTime = end;
			this.grouponDateTime = start.substr(5, 2) + "/" + start.substr(8, 2) + " " + start.substr(11, 5) + " 至 "
				+ end.substr(5, 2) + "/" + end.substr(8, 2) + " " + end.substr(11, 5);
		},
		confirmDate2 (value) {
			let start = value[0];
			let end = value[1];
			this.grouponReqData.takeStartTime = start;
			this.grouponReqData.takeEndTime = end;
			this.takeDateTime = start.substr(5, 2) + "/" + start.substr(8, 2) + " " + start.substr(11, 5) + " 至 "
				+ end.substr(5, 2) + "/" + end.substr(8, 2) + " " + end.substr(11, 5);
		},
		selectDatetime () {
			this.$refs.mySon.show();
		},
		openSelfTakeTable () {
			getAllSelfTake({
				current: 1,
				size: 50
			}).then(res => {
				console.log(res.data);
				this.selfTakeList.push(res.data.records);
				console.log(this.selfTakeList);
				this.showZTD = true;
			})
		},
		delItem (index) {
			this.selectGoodList.splice(index, 1)
		},
		getSelectData (data) {
			console.log("getSelectData  ", data)
			this.selectGoodList = data
			console.log(this.selectGoodList);
		},
		open () {
			// console.log('open');
		},
		close () {
			this.addGoodPopupShow = false
			// console.log('close');
		},
		addGood () {
			this.addGoodPopupShow = true
		},
		bindPickerChange: function (e) {
			this.index = e.detail.value;
		},
		dateConfirm (value) {
			console.log('dateConfirm! ', value)
			this.userAddress.date = value.value
			this.show1 = false
		},
		dateConfirmDate2 (value) {
			this.userAddress.date2 = value.value
			this.show2 = false
		},
		confirmZTD (value) {
			console.log(value)
			this.ztd = value.value[0].name;
			this.grouponReqData.selfTakeIds.push(value.value[0].id)
			this.showZTD = false
		},
		// #ifdef APP-PLUS
		// 获取选择的地区
		handleGetRegion (region) {
			this.region = region
		},
		// #endif


		onConfirm (val) {
			this.region = val.checkArr[0] + '-' + val.checkArr[1] + '-' + val.checkArr[2];
		},



		/**
		 * 发布团购
		 */
		formSubmit: function (e) {
			let that = this,
				value = e.detail.value;
			if (!value.mainTitle.trim()) {
				return that.$util.Tips({
					title: that.$t(`请填写主标题`)
				});
			}
			that.grouponReqData.mainTitle = value.mainTitle;

			if (!value.subTitle.trim()) {
				return that.$util.Tips({
					title: that.$t(`请填写副标题`)
				});
			}
			that.grouponReqData.subTitle = value.subTitle;

			if (!that.grouponReqData.grouponStartTime.trim() || !that.grouponReqData.grouponEndTime.trim()) {
				return that.$util.Tips({
					title: that.$t(`请选择团购时间`)
				});
			}

			if (!that.grouponReqData.takeStartTime.trim() || !that.grouponReqData.takeEndTime.trim()) {
				return that.$util.Tips({
					title: that.$t(`请选择取货时间`)
				});
			}

			if (that.grouponReqData.selfTakeIds.length < 1) {
				return that.$util.Tips({
					title: that.$t(`请选择自提点`)
				});
			}
			if (this.selectGoodList.length < 1) {
				return that.$util.Tips({
					title: that.$t(`请添加商品`)
				});
			}
			let goodsIds = [];
			this.selectGoodList.forEach(e => {
				goodsIds.push(e.id);
				that.grouponReqData.goodsIds = goodsIds;
			})
			uni.showLoading({
				title: that.$t(`发布中`),
				mask: true
			})
			let resSuccess = false;
			publishGroupon(that.grouponReqData).then(res => {
				that.$util.Tips({
					title: that.$t(`提交成功`),
					icon: 'success'
				});
				resSuccess = true
			}).catch(err => {
				return that.$util.Tips({
					title: err
				});
			})
		},
	}
}
</script>

<style scoped lang="scss">
.fontcolor {
	color: var(--view-theme);
}

.addAddress .list {
	background-color: #fff;
	padding-top: 10rpx;

	.title {
		margin: 30rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-weight: bolder;
		color: #111111;
		line-height: 44rpx;
	}
}

.addAddress .list .item {
	padding: 30rpx;
	border-top: 1rpx solid #eee;
}

.addAddress .list .item .name {
	width: 195rpx;
	font-size: 30rpx;
	color: #333;
}

.addAddress .list .item .address {
	// width: 412rpx;
	flex: 1;
	margin-left: 20rpx;
}

.addAddress .list .item input {
	width: 475rpx;
	font-size: 30rpx;
}

.addAddress .list .item .placeholder {
	color: #ccc;
}

.addAddress .list .item picker {
	width: 475rpx;
}

.addAddress .list .item picker .picker {
	width: 410rpx;
	font-size: 30rpx;
}

.addAddress .list .item picker .iconfont {
	font-size: 43rpx;
}

.addAddress .default {
	padding: 0 30rpx;
	height: 90rpx;
	background-color: #fff;
	margin-top: 23rpx;
}

.addAddress .default checkbox {
	margin-right: 15rpx;
}

.addAddress .keepBnt {
	width: 90%;
	height: 84rpx;
	background: #B42A3E;
	border-radius: 8rpx;
	margin: 30rpx auto;
	font-size: 28rpx;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 84rpx;
}

.addAddress .wechatAddress {
	width: 690rpx;
	height: 86rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 0 auto;
	font-size: 32rpx;
	color: var(--view-theme);
	border: 1px solid var(--view-theme);
}


.button_1 {
	width: 90%;
	height: 84rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
	border: 2rpx solid #B42A3E;
	margin: 30rpx auto;
	font-size: 28rpx;
	font-weight: 400;
	color: #B42A3E;
	line-height: 84rpx;
}

.text_15 {
	overflow-wrap: break-word;
	color: rgba(180, 42, 62, 1);
	font-size: 14px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 20px;
}



.acea-row-item {
	display: flex;
	width: 100% !important;
	flex-direction: row;


	.picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.p-r {
		flex-direction: column;
		flex-grow: 1;
		max-width: calc(100% - 120rpx);
		display: flex;
		justify-content: space-between;

		.acea-row-item-bArea {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.goodsname {
				flex-grow: 1;
			}

			.selde {
				width: 80rpx;
			}

		}
	}
}

.all-products-body {
	background: white;
	padding-left: 30px;

	.all-products-item {
		display: flex;
		margin-bottom: 20rpx;

		image {
			margin: auto;
			width: 128rpx;
			height: 128rpx;
			margin-right: 20rpx;
			border: 2rpx solid #FFFFFF;
		}

		.all-products-item-content {
			display: flex;
			flex-direction: column;
			width: calc(100% - 128rpx);

			.all-products-item-content-t {
				flex: 1;
				font-size: 24rpx;
				font-weight: 400;
				margin-right: 30rpx;
				color: #333333;
				line-height: 40rpx;
			}

			.all-products-item-content-b {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;

				image {
		margin: 0;
			width: 36rpx;
			height: 36rpx;
		}

				.red {
					display: block;
					font-size: 28rpx;
					font-weight: 500;
					color: #B22338 !important;
					margin-right: 10rpx;
				}

				.line-thr {
					display: block;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					text-decoration: line-through;
				}

				.count {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 30rpx;
				}
			}
		}
	}
}
</style>