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 type='text' placeholder='请选择提自提点' disabled v-model="ztd"
								   placeholder-class='placeholder'></input>
						</view>
					</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 justify-center" @click="addGood">
					<text class="text_15">添加商品</text>
				</button>
				<button class='keepBnt' form-type="submit">保存并提交</button>

			</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 ref="publish_good_list" @getSelectData="getSelectData" v-if="addGoodPopupShow"></publish_good_list>
			</view>
		</u-popup>

		<u-popup :show="selfTakeShow" @close="selfTakeShow = false">

			<view class="box_3 flex-col">

				<view class="flex-row  justify-between">
					<text class="icon_2" @click="closeFalse()">取消</text>
					<text class="icon_2" @click="closeTrue()">确定</text>
				</view>
				<text class="text_25">选择自提点</text>

				<scroll-view scroll-y="true" class="scroll-y">
					<view class="list_1 flex-col">

						<view	@click="clickSelfTake(item,index)"
								 class="list-items_1 flex-row"
								 v-for="(item, index) in selfTakeList"
								 :key="index">
							<view class="flex-col  justify-center">

								<view v-if="item.addressTrue" class="image-view">
									<image class="image" src="/static/images/v.png"></image>
								</view>
								<view v-else class="image-view " >
									<image class="image" src="/static/images/o.png"></image>
								</view>
							</view>

							<view class="dataGroup">

								<view class="group_14 flex-row justify-between">
									<view class="flex-col">
										<text class="text_26" >{{item.name}}</text>
										<text class="text_27" >{{item.address}}</text>
									</view>
									<view class="flex-row justify-between">
										<text class="text-group_9" >距您{{item.distanceDesc}}</text>
										<image class="icon_3"
											   src="http://www.gzzzyd.com/groupon/order_details/距离@2x.png"/>
									</view>
								</view>
								<view class="group_15 flex-row">
									<view class="tag_1 flex-col">
										<text class="text_28">营业时间: {{item.busStartTimeDesc}}-{{item.busEndTimeDesc}}</text>
									</view>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</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';
import {forEach} from "../../../uni_modules/uview-ui/libs/luch-request/utils";
export default {
	components: {
		// #ifdef MP
		authorize,
		// #endif
		home,
		publish_good_list
	},
	mixins: [colors],
	data () {
		return {
			ztd:'',
			selfTakeShow:false,
			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: [],
			addressIds:[]
		};
	},
	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: {

		closeFalse(){
			this.selfTakeShow = false;
		},
		closeTrue(){
			this.selfTakeShow = false;
			let _ztd=''
			console.log(this.grouponReqData.selfTakeIds)
			this.selfTakeList.forEach(e =>{
				this.grouponReqData.selfTakeIds.forEach(ee =>{
					if (e.id === ee){
						if (_ztd){
							_ztd=_ztd +','+e.name
						}else {
							_ztd=e.name
						}
					}
				})
			})
			this.ztd = _ztd
			console.log(this.ztd)

		},

		clickSelfTake(item,index){
			item.addressTrue = !item.addressTrue;
			this.$set(this.selfTakeList,index,item)
			if (this.grouponReqData.selfTakeIds.indexOf(item.id) === -1){
				this.grouponReqData.selfTakeIds.push(item.id)
			}else {
				this.grouponReqData.selfTakeIds = this.grouponReqData.selfTakeIds.filter(iter => iter !== item.id)
			}

		},

		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 () {
			this.grouponReqData.selfTakeIds = []
			getAllSelfTake({
				current: 1,
				size: 50
			}).then(res => {
				this.selfTakeShow = true;
				console.log(res.data);
				this.selfTakeList=res.data.records;
				console.log(this.selfTakeList);
			})
		},
		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
			this.grouponReqData.goodsIds =this.$refs.publish_good_list.returnVGoodIds();
			 console.log('close',this.grouponReqData.goodsIds);
		},
		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.grouponReqData.goodsIds.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">

	@import "/static/css/common.css";

.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;
				}
			}
		}
	}
}




.scroll-y{
	height: 600rpx;
}

.box_3 {
	background-color: rgba(250, 250, 250, 1);
	border-radius: 4px 4px 0px 0px;
	padding: 16rpx 16rpx 40rpx 16rpx;
}

.icon_2 {
	font-size: 32rpx;
	font-weight: 500;
}

.text_25 {
	overflow-wrap: break-word;
	color: rgba(17, 17, 17, 1);
	font-size: 32rpx;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	line-height: 44rpx;
	margin: 0 278rpx 0 264rpx;
}

.list_1 {
	height: 602rpx;
	margin: 24rpx 16rpx 0 0;
}

.list-items_1 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 4px;
	margin-bottom: 16rpx;
	padding: 24rpx 24rpx 24rpx 24rpx;
}

.group_14 {
	width: 638rpx;
}


.text_26 {
	overflow-wrap: break-word;
	color: rgba(17, 17, 17, 1);
	font-size: 28rpx;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 40rpx;
	margin-right: 184rpx;
}

.text_27 {
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 34rpx;
	margin-top: 16rpx;
}


.text-group_9 {
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 20rpx;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
}

.icon_3 {
	width: 34rpx;
	height: 34rpx;
	margin-left: 10rpx;
	/*margin: 4rpx 0 4rpx 4rpx;*/
}

.group_15 {
	margin: 8rpx 390rpx 0 0;
}

.tag_1 {
	background-color: rgba(255, 247, 248, 1);
	border-radius: 4px;
	padding: 8rpx 24rpx 8rpx 26rpx;
}

.text_28 {
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 20rpx;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
	.image-view{
		width: 32rpx;
		height: 32rpx;
		.image{
			width: 28rpx;
			height: 28rpx;
		}
	}

	.dataGroup{
		margin-left: 20rpx;
	}
</style>