ydd_front/mer_uniapp/pages/goods/components/systemFrom/index.vue

<template>
	<!--商品关联系统表单-->
	<view v-if="value.length>0" class="wrapper virtual_form bg-f boder-24 px-30">
		<view class='item acea-row row-between-wrapper'
			:class="{on:(item.name=='radios' || item.name=='checkboxs'),on2:item.name == 'dateranges',on3:item.name == 'citys',pd0:item.name == 'uploadPicture'}"
			v-for="(item,index) in orderNewForm" :key="index">
			<view class="name">
				<text class="item-require" v-if="item.titleShow.val">*</text>
				{{ item.titleConfig.val }}
			</view>
			<!-- radio -->
			<view v-if="item.name=='radios'" class="discount">
				<radio-group @change="radioChange($event, index, item)" class="acea-row row-middle row-right">
					<label class="radio" v-for="(j,jindex) in item.wordsConfig.list" :key="jindex">
						<view class="acea-row row-middle">
							<!-- #ifndef MP -->
							<radio :value="jindex.toString()" :checked='j.show' />
							<!-- #endif -->
							<!-- #ifdef MP -->
							<radio :value="jindex" :checked='j.show' />
							<!-- #endif -->
							<view>{{j.val}}</view>
						</view>
					</label>
				</radio-group>
			</view>
			<!-- checkbox -->
			<view v-if="item.name=='checkboxs'" class="discount acea-row">
				<checkbox-group @change="checkboxChange($event, index, item)" class="acea-row row-middle row-right">
					<label class="radio" v-for="(j,jindex) in item.wordsConfig.list" :key="jindex">
						<view class="acea-row row-middle">
							<!-- #ifndef MP -->
							<checkbox :value="jindex.toString()" :checked="j.show" style="transform:scale(0.9)" />
							<!-- #endif -->
							<!-- #ifdef MP -->
							<checkbox :value="jindex" :checked="j.show" style="transform:scale(0.9)" />
							<!-- #endif -->
							<view>{{j.val}}</view>
						</view>
					</label>
				</checkbox-group>
			</view>
			<!-- text -->
			<view v-if="item.name=='texts' && item.valConfig.tabVal == 0" class="discount">
				<input type="text" :placeholder="item.tipConfig.val" class="text-28rpx" placeholder-class="placeholder"
					v-model="item.value" />
			</view>
			<!-- number -->
			<view v-if="item.name=='texts' && item.valConfig.tabVal == 4" class="discount">
				<input type="number" :placeholder="item.tipConfig.val" class="text-28rpx" placeholder-class="placeholder"
					v-model="item.value" />
			</view>
			<!-- email -->
			<view v-if="item.name=='texts' && item.valConfig.tabVal == 3" class="discount">
				<input type="text" :placeholder="item.tipConfig.val" class="text-28rpx" placeholder-class="placeholder"
					v-model="item.value" />
			</view>
			<!-- data -->
			<view v-if="item.name=='dates'" class="discount">
				<picker mode="date" :value="item.value" @change="bindDateChange($event,index)">
					<view class="acea-row row-between-wrapper text-28rpx">
						<view v-if="item.value == ''" class="text--w111-ccc">{{item.tipConfig.val}}</view>
						<view v-else>{{item.value}}</view>
						<text class='iconfont icon-xiangxia'></text>
					</view>
				</picker>
			</view>
			<!-- dateranges -->
			<view v-if="item.name=='dateranges'" class="discount">
				<uni-datetime-picker v-model="item.value" type="daterange" class="text-28rpx flex" @maskClick="maskClick">
          <view v-if="item.value == ''" class="text--w111-ccc">请选择</view>
          <view v-else>{{item.value.length?item.value[0]+' - '+item.value[1]:item.tipConfig.val}}</view>
					<text class='iconfont icon-xiangxia'></text>
				</uni-datetime-picker>
			</view>
			<!-- time -->
			<view v-if="item.name=='times'" class="discount">
				<picker mode="time" :value="item.value" @change="bindTimeChange($event,index)"
					:placeholder="item.tipConfig.value">
					<view class="acea-row row-between-wrapper text-28rpx">
						<view v-if="item.value == ''" class="text--w111-ccc">{{item.tipConfig.val}}</view>
						<view v-else>{{item.value}}</view>
						<text class='iconfont icon-xiangxia'></text>
					</view>
				</picker>
			</view>
			<!-- timeranges -->
			<view v-if="item.name=='timeranges'" class="discount acea-row row-between-wrapper"
				@click="getTimeranges(index)">
				<view v-if="item.value" class="text-28rpx">{{item.value}}</view>
				<view v-else class="text--w111-ccc text-28rpx">{{item.tipConfig.val}}</view>
				<text class='iconfont icon-xiangxia'></text>
			</view>
			<!-- select -->
			<view v-if="item.name=='selects'" class="discount">
				<picker :value="item.value" :range="item.wordsConfig.list" @change="bindSelectChange($event,index,item)"
					range-key="val">
					<view class="acea-row row-between-wrapper">
						<view v-if="item.value" class="text-28rpx">{{item.value}}</view>
						<view v-else class="text--w111-ccc text-28rpx">请选择</view>
						<text class='iconfont icon-xiangxia'></text>
					</view>
				</picker>
			</view>
			<!-- city -->
			<view v-if="item.name=='citys'" class="discount" @click="changeRegion(index)">
				<view class="acea-row row-middle row-right">
					<view class="city text--w111-ccc" v-if="item.value == ''">{{item.tipConfig.val}}</view>
					<view class="city text-28rpx" v-else>{{item.value}}</view>
					<text class='iconfont icon-xiangxia'></text>
				</view>
			</view>
			<!-- id -->
			<view v-if="item.name=='texts' && item.valConfig.tabVal == 2" class="discount">
				<input type="idcard" :placeholder="item.tipConfig.val" class="text-28rpx" placeholder-class="placeholder"
					v-model="item.value" />
			</view>
			<!-- phone -->
			<view v-if="item.name=='texts' && item.valConfig.tabVal == 1" class="discount">
				<input type="number" :placeholder="item.tipConfig.val" class="text-28rpx"  placeholder-class="placeholder"
					v-model="item.value" />
			</view>
			<!-- img -->
			<view v-if="item.name=='uploadPicture'" class="confirmImg" style="padding-bottom: 0;">
				<view class='upload acea-row row-middle justify-end'>
					<view class='pictrue' v-for="(items,indexs) in item.value" :key="indexs">
						<image :src='items' mode="aspectFill"></image>
						<view class="close acea-row row-center-wrapper" @tap='DelPic(index,indexs)'>
							<view class="iconfont icon-guanbi1"></view>
						</view>
					</view>
					<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic(item)' style="margin-right: 0"
						v-if="item.value.length < item.numConfig.val">
						<view>上传图片</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间选择 -->
		<timerangesFrom :isShow='isShow' :time='timeranges' @confrim="confrim" @cancel="cancels"></timerangesFrom>

		<areaWindow ref="areaWindow" :display="display" :address='addressInfoArea' :cityShow='cityShow'
			@submit="OnChangeAddress" @changeClose="changeAddressClose"></areaWindow>
	</view>
</template>

<script>
	import areaWindow from '../areaWindow';
	import timerangesFrom from '../timeranges';
	import uniDatetimePicker from '../uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	const CACHE_CITY = {};
	export default {
		props: {
      value: {
        type: Array,
        default: function() {
          return []
        }
      },
		},
		components: {
			areaWindow,
			timerangesFrom,
			uniDatetimePicker
		},
		data() {
			return {
				orderNewForm: [],
				isShow: false,
				timerangesIndex: 0,
				display: false,
				addressInfoArea: [],
				cityShow: 2,
				timeranges: [],
			}
		},
    watch: {
      orderNewForm: {
        handler(newVal) {
          this.$emit('input', newVal);
        },
        deep: true,
      },
    },
		mounted() {
			this.getFromData()
		},
		methods: {
			getFromData() {
				let formData = [...this.value];
				formData.forEach((item, index, arr) => {
					this.$set(item, 'value', "");
					CACHE_CITY[index] = ''; //清空省市区
					if (item.name == 'texts') {
						if (item.defaultValConfig.val) {
							item.value = item.defaultValConfig.val
						} else {
							item.value = ''
						}
					} else if (item.name == 'radios') {
						item.value = item.wordsConfig.list[0].val
					} else if (item.name == 'uploadPicture') {
						item.value = [];
					} else if (item.name == 'dateranges') {
						if (item.valConfig.tabVal == 0) {
							if (item.valConfig.tabData == 0) {
								let obj = dayjs(new Date(Number(new Date().getTime()))).format('YYYY-MM-DD');
								item.value = [obj, obj]
							} else {
								let data1 = dayjs(new Date(Number(new Date(item.valConfig.specifyDate[0])
									.getTime()))).format('YYYY-MM-DD');
								let data2 = dayjs(new Date(Number(new Date(item.valConfig.specifyDate[1])
									.getTime()))).format('YYYY-MM-DD');
								item.value = [data1, data2];
							}
						} else {
							item.value = [];
						}
					} else {
						if (['times', 'dates', 'timeranges'].indexOf(item.name) != -1) {
							if (item.valConfig.tabVal == 0) { //显示默认值
								if (item.valConfig.tabData == 0) {
									if (item.name == 'times') {
										item.value = dayjs(new Date(Number(new Date().getTime()))).format('HH:mm');
									} else if (item.name == 'dates') {
										item.value = dayjs(new Date(Number(new Date().getTime()))).format(
											'YYYY-MM-DD');
									} else {
										let current = dayjs(new Date(Number(new Date().getTime()))).format(
											'HH:mm');
										item.value = current + ' - ' + current;
									}
								} else {
									if (item.name == 'times' || item.name == 'dates') {
										item.value = item.valConfig.specifyDate;
									} else {
										item.value = item.valConfig.specifyDate[0] + ' - ' + item.valConfig
											.specifyDate[1];
									}
								}
							} else {
								item.value = '';
							}
						} else {
							item.value = '';
						}
					}
				})

				function sortNumber(a, b) {
					return a.timestamp - b.timestamp;
				}
				formData.sort(sortNumber);
				this.$set(this, 'orderNewForm', formData);
			},

			// 单选
			radioChange(e, index, item) {
				this.orderNewForm[index].value = item.wordsConfig.list[e.detail.value].val
			},

			// 多选
			checkboxChange(e, index, item) {
				let obj = e.detail.value;
				let val = '';
				item.wordsConfig.list.forEach((j, jindex) => {
					obj.forEach(x => {
						if (jindex == x) {
							val = val + (val ? ',' : '') + j.val;
						}
					})
				})
				this.orderNewForm[index].value = val
			},

			//日期
			bindDateChange(e, index) {
				this.orderNewForm[index].value = e.target.value
				this.$forceUpdate()
			},

			//时间
			bindTimeChange(e, index) {
				this.orderNewForm[index].value = e.target.value
			},

			//时间选择
			getTimeranges(index) {
				this.isShow = true
				this.timerangesIndex = index
			},

			//时间选择回调
			confrim(e) {
				this.isShow = false;
				this.orderNewForm[this.timerangesIndex].value = e.time;
				let arrayNew = [];
				e.val.forEach(item => {
					arrayNew.push(Number(item))
				})
				this.timeranges = arrayNew;
			},

			//关闭时间选择弹窗
			cancels() {
				this.isShow = false;
			},

			//sel选择
			bindSelectChange(e, index, item) {
				this.$set(this.orderNewForm[index], 'value', item.wordsConfig.list[e.detail.value].val);
			},

			//城市地址选择
			changeRegion(index) {
				if (!this.orderNewForm[index].value) {
					this.addressInfoArea = [];
				}
				this.timerangesIndex = index;
				this.cityShow = Number(this.orderNewForm[index].valConfig.tabVal) + 1;
				this.display = true;
				if (CACHE_CITY[index]) {
					this.addressInfoArea = CACHE_CITY[index];
				}
			},

			//选择地址回调
			OnChangeAddress(address) {
				// let addr = '';
				let addr = address.map(v => v.regionName).join('/');
				this.orderNewForm[this.timerangesIndex].value = addr;
				CACHE_CITY[this.timerangesIndex] = address;
			},

			// 关闭地址弹窗；
			changeAddressClose() {
				this.display = false;
			},

			/**上传文件*/
			uploadpic(item) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "order",
					pid: 0
				}, function(res) {
					let pics = item.value || []
					pics.push(res);
					that.$set(item, 'value', pics);
				});
			},

			//删除图片
			DelPic(index, indexs) {
				let pic = this.orderNewForm[index].value;
				this.orderNewForm[index].value.splice(indexs, 1);
				this.$set(this.orderNewForm[index], 'value', this.orderNewForm[index].value);
			},
		}
	}
</script>

<style scoped lang="scss">
.item {
  font-size: 28rpx;
  color: #282828;
  margin-top: 20rpx;
}
	.name{
		width: 168rpx;
	}
	.virtual_form {
		.uni-input-wrapper {
			text-align: right;
		}

		.item-require {
			color: red;
			margin-right: 4rpx;
		}

		.item {
			padding: 27rpx 0;

			.pd0 {
				padding-bottom: 0;
			}

			.radio {
				margin: 0 22rpx 0 22rpx;
				padding: 10rpx 0;
			}

			.discount .placeholder {
				color: #ccc;
				text-align: right;
				font-size: 28rpx;
			}

			.discount {
				max-width: 480rpx;
				font-size: 28rpx;
				text-align: right;

				&.discount_voice {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 460rpx;
					text-align: right;
				}

				.iconfont {
					color: #515151;
					font-size: 20rpx;
					margin-left: 12rpx;
				}

				.num {
					font-size: 28rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>