客户要求对他人的项目做一些调整，但是看到页面的代码，实在是难受，这些变量参数，来回赋值，看得脑壳疼，实在受不了了，就做了一些重构，不断的学习优化代码，尽量将代码写的优美一些，不给人带来困扰。

重构前

<template>
	<view class="content">
		<view class="gyf_title">
			<view class="gyf_title_image" @click="backfun" style="margin-right: 160upx;">
				<image src="../../static/image/gyf_title_img.png"></image>
			</view>
			<view class="gyf_title_list">
				<text>收{{this.name}}礼增加</text>
			</view>
		</view>
		<form @submit="submit">
			<view class="lbtk_gyf_main">
				<view class="lbtk_gyf_main_one">
					<view class="lbtk_gyf_main_one_time">
						<text @click="openDatetimePicker">{{this.birthday?this.birthday:rq}}</text>
						<SimpleDateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2000"
							:end-year="2030" />
					</view>
					<!-- <view class="lbtk_gyf_main_one_remind">
						<checkbox-group @change="tipfun">
							<checkbox :checked="is_tip"></checkbox>
						</checkbox-group>
						<text>{{remind}}</text>
					</view> -->
				</view>
				<view style="height: 250upx;">
					<swiper style="height: 330upx;" indicator-dots="true" indicator-active-color="red">
						<swiper-item v-for="(item,index) in eventtip">
							<view class="lbtk_gyf_main_classification">
								<view class="lbtk_gyf_main_classification_nav" @click="bgclick(index,i)"
									v-for="(v,i) in item" :style="((i*4)+index)===selectindex2?'background:#dfbbbf':''">
									<text>{{v.name}}</text>
								</view>

							</view>

						</swiper-item>

					</swiper>
				</view>
				<view class="a" style="margin-top: 80upx;">
					<input type="text" name="zdy" :disabled="is_virtulzdy?false:true" :placeholder="inputShi1"
						:value="value.name" id="inputShi1"
						style="width: 480upx;margin: 0 auto;font-size: 50upx;color: #000000;border-bottom: 1px solid #e2d9d2;padding-bottom: 30upx;" />
					<view class="lbtk_gyf_main_money_material">
						<checkbox-group @change="changezdy">
							<checkbox :checked="is_virtulzdy"></checkbox>
						</checkbox-group>
						<text>自定义</text>
					</view>
				</view>

				<view style="height: 250upx;">
					<swiper style="height: 330upx;" indicator-dots="true" indicator-active-color="red">
						<swiper-item v-for="(item,index) in monytip">
							<view class="lbtk_gyf_main_money">
								<view class="lbtk_gyf_main_money_nav" v-for="(v,i) in item" @click="getmoney(index,i)"
									:style="((i*4)+index)===selectindex?'background:#dfbbbf':''">
									<text>{{v.name}}</text>
								</view>

							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="a" style="margin-top: 80upx;">
					<input type="text" name="qian" :disabled="is_virtul?false:true" :placeholder="inputShi2"
						:value="moneyvalue.name" id="inputShi2"
						style="width: 480upx;margin: 0 auto;font-size: 50upx;color: #000000;border-bottom: 1px solid #e2d9d2;padding-bottom: 30upx;" />
					<view class="lbtk_gyf_main_money_material">
						<checkbox-group @change="change">
							<checkbox :checked="is_virtul"></checkbox>
						</checkbox-group>
						<text>自定义</text>
					</view>
				</view>

			</view>
			<view class="lbtk_gyf_bottom">
				<button form-type="submit" style="width: 700upx;margin: 0 auto;"><text>确认</text></button>
			</view>
		</form>

	</view>
</template>

<script>
	import moment from 'moment'
	import {
		eventtip,
		bookadd,
		monytip,
	} from '../../config/api.js'
	// import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
	import {
		Debounce
	} from '@/utils/utils.js'
	export default {
		// components: {
		// 	gppDatePicker
		// },
		components: {
			SimpleDateTimePicker,
		},
		data() {
			return {
				birthday: "",
				startDate: "1999-01-01",
				endDate: "2155-01-01",
				pickerDate: '',
				mId: '',
				remembtime: '',
				// time: '',
				// data: '',
				remind: '提醒',
				address: '',
				// Banquetclassification: ['婚宴', '生日', '升学', '酒席', '升学', '酒席', '升学', '自定义'],
				eventtip: [],
				monytip: [],
				// Banquetmoney: ['50', '100', '200', '300', '400', '500', '1000', '自定义'],
				moneyvalue: '',
				material: '',
				value: '',
				is_tip: false,
				is_virtul: false,
				is_virtulzdy: false,
				remark: false,
				list: [],
				bID: "",
				selectindex: "",
				selectindex2: '',
				inputShi1: '',
				inputShi2: '',
				rq: '',
				name: '',
				zdy: '',
				qian: ''
			}
		},
		created() {
			this.getevent();
			this.getmony();
		},
		onLoad(name) {
			this.name = name.name
			this.rq = moment().format("YYYY-MM-DD HH:mm")
			this.time = moment(this.rq).unix();
			var that = this
		},
		methods: {
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				this.birthday = ```{e.year}-``{e.month}-``{e.day} ``{e.hour}:${e.minute}`;
				this.time = moment(this.birthday).unix();
				console.log(this.time);
			},
			// onCancel(e) {
			// 	console.log(e);
			// },
			// onConfirm(e) {
			// 	this.pickerDate = e.dateValue;
			// 	var time = new Date(this.pickerDate);
			// 	this.time = time.getTime()/1000;
			// 	console.log(this.time);
			// },
			getevent() {
				var that = this;
				eventtip().then(res => {
					var data = res.data
					that.eventtip = that.setdata(data)
				}).catch(err => {

				})
			},
			getmony() {
				var that = this;
				monytip().then(res => {
					var data = res.data
					that.monytip = that.setdata(data)
				}).catch(err => {

				})
			},
			setdata(data) {
				var arr = [],
					mun = Math.ceil(data.length / 4)
				for (let i = 0; i < mun; i++) {
					let isarr = []
					for (var j = 0; j < 4; j++) {
						if (!data[(i * 4) + j]) {
							break;
						}
						isarr.push(data[(i * 4) + j])
					}
					arr.push(isarr)
				}
				return arr
			},
			bgclick: function(index, i) {
				this.selectindex2 = (i * 4) + index
				var value = this.eventtip[index][i] == '自定义' ? '' : this.eventtip[index][i];
				this.value = value
				if (this.value === '') {
					this.inputShi1 = '请输入事项'
				}
			},
			getmoney: function(index, i) {
				this.selectindex = (i * 4) + index
				var moneyvalue = this.monytip[index][i] == "自定义" ? "" : this.monytip[index][i];
				this.moneyvalue = moneyvalue;
				// this.list.money = this.Banquetmoney[index];
				if (this.moneyvalue === '') {
					this.inputShi2 = '请输入礼金'
				}
			},
			backfun: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			changezdy() {
				this.is_virtulzdy = !this.is_virtulzdy
			},
			change() {
				this.is_virtul = !this.is_virtul
			},
			changeshiwu() {
				this.remark = !this.remark
			},
			tipfun() {
				this.is_tip = !this.is_tip
				console.log(this.is_tip)
			},
			submit: Debounce(function(e) {
				e.detail.value.remembtime = this.time
				e.detail.value.event = this.value.name
				e.detail.value.money = this.moneyvalue.name
				// e.detail.value.addr = this.address
				this.address = e.detail.value.address
				this.zdy = e.detail.value.zdy
				this.qian = e.detail.value.qian
				this.shiwu = e.detail.value.shiwu
				e.detail.value.remark = this.remark
				e.detail.value.is_tip = this.is_tip
				e.detail.value.is_virtul = this.is_virtul
				const gyfvalue = uni.getStorageSync("Cid")
				// this.token = uni.getStorageSync('token').token
				const time = new Date();
				var data = {
					mId: gyfvalue,
					catId: 19,
					remembtime: this.time,
					event: this.value.name ? this.value.name : this.zdy,
					money: this.moneyvalue.name ? this.moneyvalue.name : this.qian,
					addr: this.address,
					remark: this.remark === true ? this.shiwu : false,
					is_tip: this.is_tip,
					is_virtul: this.is_virtul === true ? '1' : '0'
				}
				bookadd(data).then(res => {
					console.log(res)
					if (res.msg == "添加成功") {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						const time = setInterval(function() {
							uni.switchTab({
								url: "/pages/home/home"
							})
							clearInterval(time)
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}).catch(err => {

				})
			}, 1000)
		}
	}
</script>

<style>
	@import url("../../static/css/style.css");
</style>

重构后

<template>
	<view class="content">
		<view class="gyf_title">
			<view class="gyf_title_image" @click="backfun" style="margin-right: 160upx;">
				<image src="../../static/image/gyf_title_img.png"></image>
			</view>
			<view class="gyf_title_list">
				<text>收{{this.name}}礼增加</text>
			</view>
		</view>
		<form @submit="submit">
			<view class="lbtk_gyf_main">
				<dateTimePickerSync :date.sync="data.time" mode="datetime"></dateTimePickerSync>
				<swiperChoose :list='eventtip' :name.sync="data.event"></swiperChoose>
				<view class="a" style="margin-top: 80upx;">
					<input type="text" :disabled="is_virtulzdy?false:true" :placeholder="is_virtul?'自定义':'请输入事项'"
						v-model="data.event"
						style="width: 480upx;margin: 0 auto;font-size: 50upx;color: #000000;border-bottom: 1px solid #e2d9d2;padding-bottom: 30upx;" />
					<checkboxCom :value.sync="is_virtulzdy"></checkboxCom>
				</view>
				<swiperChoose :list='monytip' :name.sync="data.money"></swiperChoose>
				<view class="a" style="margin-top: 80upx;">
					<input type="text" :disabled="is_virtul?false:true" :placeholder="is_virtul?'自定义':'请输入礼金'"
						v-model="data.money"
						style="width: 480upx;margin: 0 auto;font-size: 50upx;color: #000000;border-bottom: 1px solid #e2d9d2;padding-bottom: 30upx;" />
					<checkboxCom :value.sync="is_virtul"></checkboxCom>
				</view>
			</view>
			<view class="lbtk_gyf_bottom">
				<button @tap="$u.debounce(submit, 500)" style="width: 700upx;margin: 0 auto;"><text>确认</text></button>
			</view>
		</form>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		eventtip,
		bookadd,
		monytip,
	} from '../../config/api.js'
	import dateTimePickerSync from '@/components/dateTimePicker/dateTimePickerSync.vue'
	import swiperChoose from '@/components/dateTimePicker/swiper-choose.vue'
	import checkboxCom from '@/components/dateTimePicker/checkboxCom.vue'
	export default {
		components: {
			dateTimePickerSync,
			swiperChoose,
			checkboxCom
		},
		data() {
			return {
				data: {
					time: dayjs().format("YYYY-MM-DD HH:mm"),
					event: '',
					money: ''
				},
				mId: '',
				eventtip: [],
				monytip: [],
				is_tip: false,
				is_virtul: false,
				is_virtulzdy: false,
				remark: false,
				name: ''
			}
		},
		created() {
			this.getevent();
			this.getmony();
		},
		onLoad(name) {
			var that = this
			this.name = name.name
			this.data.time = uni.getStorageSync('addtime') ? uni.getStorageSync('addtime') : dayjs().format(
				"YYYY-MM-DD HH:mm")
			this.data.event = uni.getStorageSync('addevent') ? uni.getStorageSync('addevent') : ''
		},
		methods: {
			getevent() {
				var that = this;
				eventtip().then(res => {
					var data = res.data
					that.eventtip = data
				})
			},
			getmony() {
				var that = this;
				monytip().then(res => {
					var data = res.data
					that.monytip = data
				})
			},
			backfun: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			submit: function() {
				var that = this;
				if (!that.data.time) {
					uni.showToast({
						title: '请选择日期',
						icon: 'none'
					})
					return
				}
				if (!that.data.event) {
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					})
					return
				}
				if (!that.data.money) {
					uni.showToast({
						title: '请选择礼金',
						icon: 'none'
					})
					return
				}
				var data = {
					mId: uni.getStorageSync("Cid"),
					catId: 19,
					remembtime: dayjs(that.data.time).unix(),
					event: that.data.event,
					money: that.data.money,
					addr: '',
					remark: false,
					is_tip: false,
					is_virtul: that.is_virtul === true ? '1' : '0'
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				bookadd(data).then(res => {
					uni.setStorageSync('addtime', that.data.time)
					uni.setStorageSync('addevent', that.data.event)
					uni.hideLoading()
					if (res.msg == "添加成功") {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/home/home"
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	@import url("../../static/css/style.css");
</style>