yiliangyiyun-app/pageD/myRelease/sellGrain.vue

<template>
	<view class="center">
		<view class="buyup">
			<view class="c-row b-b">
				<text class="tit">名头</text>
				<view class="con-list">
					<text @click="navToDetailPage">{{deptList.seller}}<text class='tip_text cuIcon-right'></text></text>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">标题</text>
				<view class="con-list">
					<input maxlength='16' minlength='2' placeholder="请输入标题，不超过16个字" name="input"
						v-model="deptList.title"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">货名</text>
				<view class="con-list">
					<input placeholder="请输入货名，如玉米" name="input" v-model="deptList.goodsName"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">出售量（吨）</text>
				<view class="con-list">
					<input placeholder="请输入出售重量，如1000" name="input" v-model="deptList.plannedSaleVolume"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">最小成交量（吨）</text>
				<view class="con-list">
					<input placeholder="请输入最小成交量" name="input" v-model="deptList.minimumVolume"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">类型</text>
				<picker @change="typeChange" :value="typesIndex" :range="typesType" class="con-list">
					<view class="picker" v-model="deptList.salePlanType">
						{{typesIndex>-1?typesType[typesIndex]:'请选择类型'}}
					</view>
				</picker>
			</view>
			<view class="c-row b-b">
				<text class="tit">价格类型</text>
				<view class="con-list">
					<!-- <input placeholder="请填写价格类型" name="input"  v-model="deptList.priceType"></input> -->
					{{deptList.priceType}}
				</view>
			</view>
			<view class="c-row b-b" v-if="this.typesIndex == 0">
				<text class="tit">单价（元/吨）</text>
				<view class="con-list">
					<input placeholder="请填写单价" name="input" v-model="deptList.salePrice"></input>
				</view>
			</view>
			<view class="c-row b-b" v-if="this.typesIndex == 1">
				<text class="tit">基差（元/吨）</text>
				<view class="con-list">
					<input placeholder="请输入基差" name="input" v-model="deptList.basisPrice"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">产地</text>
				<view class="con-list">
					<view @click='regionchange1'>{{region1}}</view>
					<u-picker :params='params1' @confirm='regionpicker1' mode="region" v-model="show1"></u-picker>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">发货地区</text>
				<view class="con-list">
					<view @click='regionchange'>{{region}}</view>
					<u-picker :params='params' @confirm='regionpicker' mode="region" v-model="show"></u-picker>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">卖方手机号</text>
				<view class="con-list">
					<input placeholder="请输入卖方手机号" name="input" v-model="deptList.sellerPhone"></input>
				</view>
			</view>
			<!-- <view class="c-row ">
				<text class="validate">获取验证码</text>
				<view class="con-list">
					<input placeholder="请填写6位短信验证码" name="input" v-model="deptList.title1"></input>
				</view>
			</view> -->
			
			<view style='width:100%;border-bottom:1px solid #E8E9ED;position:relative;padding:10px;' class="flex">
				<button :class='codestatus&&!sendDisabled?"active":""' @click='getcode'
					class='getcode'>{{sendText}}</button>
				<view style='width:70%;position:relative;margin-left: 200px;'>
					<view class="con-list">
						<input v-model='verifyCode' placeholder="请输入验证码" type="text">
					</view>
				</view>
			</view>
		</view>
		<view class="buylow">


			<view class="c-row ">
				<checkbox style='transform: scale(0.8);' :checked="checked" @click='checkedbox'></checkbox><text
					style="font-size: 14px; ">完善更多信息<text
						style="font-size: 10px; color: #AFB3BF;">（选填，可由客服人员代为完善）</text></text>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">水分（%）<= </text>
						<view class="con-list">
							<input placeholder="请填写水分占比" name="input" v-model="deptList.waterContent"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">容重（g/L）<= </text>
						<view class="con-list">
							<input placeholder="请填写容重" name="input" v-model="deptList.bulkDensity"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">热损伤（%）<= </text>
						<view class="con-list">
							<input placeholder="请填写热损伤占比" name="input" v-model="deptList.jiaorenli"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">杂质（%）<= </text>
						<view class="con-list">
							<input placeholder="请填写杂质占比" name="input" v-model="deptList.impurity"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">霉变粒（%）<= </text>
						<view class="con-list">
							<input placeholder="请填写霉变粒占比" name="input" v-model="deptList.mildewGrain"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">不完整粒（%）<= </text>
						<view class="con-list">
							<input placeholder="请填写不完整粒占比" name="input" v-model="deptList.imperfectGrain"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">蛋白（%）<= </text>
						<view class="con-list">
							<input placeholder="请填写蛋白占比" name="input" v-model="deptList.protein"></input>
						</view>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">粒型 </text>
				<picker @change="liChange" :value="liIndex" :range="liType" class="con-list" v-model="deptList.grain">
					<view class="con-list">
						{{liIndex>-1?liType[liIndex]:'请选择粒型'}}
					</view>
				</picker>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">品级 </text>
				<picker @change="pinChange" :value="pinIndex" :range="pinType" class="con-list">
					<view class="con-list">
						{{pinIndex>-1?pinType[pinIndex]:'请选择品级'}}
					</view>
				</picker>
			</view>

			<view v-if='checked' class="c-row b-b">
				<text class="tit">产出年份</text>
				<picker @change="nianChange" :value="nianIndex" :range="nianType" class="con-list">
					<view class="con-list">
						{{nianIndex>-1?nianType[nianIndex]:'请选择产出年份'}}
					</view>
				</picker>
			</view>
			<view v-if='checked' class="c-row b-b">
				<text class="tit">包装方式</text>
				<picker @change="baoChange" :value="baoIndex" :range="baoType" class="con-list">
					<view class="con-list">
						{{baoIndex>-1?baoType[baoIndex]:'请选择包装方式'}}
					</view>
				</picker>
			</view>
			<view v-if='checked&&baoIndex!=0' class="c-row b-b">
				<text class="tit">袋装备注</text>
				<view class="con-list">
					<input placeholder="请填写袋装备注" name="input" v-model="deptList.baggingNotes"></input>
				</view>
			</view>
			<view v-if='checked' class="c-row ">
				<text class="tit">运费承担方</text>
				<picker @change="chengChange" :value="chengIndex" :range="chengType" class="con-list">
					<view class="con-list">
						{{chengIndex>-1?chengType[chengIndex]:'请选择运费承担方'}}
					</view>
				</picker>
			</view>
		</view>

		<button @click="commit()" class="btn">发布</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				types: '',
				goods: {},
				typesType: ["现货", "期货"],
				typesIndex: 0,
				deptList: {
					salePlanType:'现货',
					salePlanTypeKey:0,
					grainKey:0,
					gradeKey:0,
					packingTypeKey:0,
					freightPayerKey:-1,
					priceType: "定价销售",
					grain: "塔粮",
					grade: "不限（默认）",
					outputYear: "2020",
					packingType: "不限（默认）",
					freightPayer: "",
				},
				params: {
					province: true,
					city: true,
					area: true,
				},
				params1: {
					province: true,
					city: true,
				},
				checked: false,
				insertSalePlanInfo: {},
				liIndex: -1,
				liType: ['塔粮', '筛粮', '中粒', '大粒'],
				pinIndex: -1,
				pinType: ['一等品', '二等品', '三等品', '等外'],
				nianIndex: -1,
				nianType: ['2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012',
					'2011'
				],
				show: false,
				show1: false,
				region: '请选择发货地区',
				regions: "",
				region1: '请选择产地',
				region2 :"",
				baoIndex: -1,
				baoType: ['散装', '大袋', '小袋'],
				chengIndex: -1,
				chengType: ['可议', '买方承担', '卖方承担'],
				codestatus: false,
				sendDisabled: false,
				sendText: '获取验证码',
				verifyCode:"",
				verification:true,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			if (options.customerName) {
				this.deptList.seller = options.customerName
			}
		},
		onShow() {
			var that = this
			this.$api.doRequest('get', '/identityAuthenticationInfo/getInfo', {
				commonId: this.userInfo.id
			}).then(res => {
				if (res.data.code == 200) {
					if (res.data.data.customerTypeFlag == 1) {
						that.$set(this.deptList, 'seller', res.data.data.customerName)
					} else {
						that.$set(this.deptList, 'seller', res.data.data.compName)
					}
					this.goods = res.data.data
				}
				uni.hideLoading()
			})
		},
		methods: {
			// async amendprice() {
			// 	var that = this
			// 	this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
			// 			phone: this.deptList.buyerPhone,
			// 			verifyCode: this.verifyCode
			// 		}).then(res => {
			// 			if (res.data.code == 200) {	
			// 			} else {
			// 				that.verification = false
			// 				uni.showToast({
			// 					title: res.data.message,
			// 					icon: 'none',
			// 					duration: 2000
			// 				})
			// 				return false
			// 			}
			// 		})
			// 		.catch(res => {
			// 			that.verification = false
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			})
			// 			return false
			// 		});
			// },
			getcode() {
				var that = this
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(that.deptList.sellerPhone)) {
					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
							phone: that.deptList.sellerPhone
						}).then(res => {
							if (res.data.code == 200) {
								that.sendDisabled = true
								let sec = 60
								let interval = setInterval(() => {
									sec--;
									that.sendText = sec + 's后重发'
									if (sec <= 0) {
										that.sendDisabled = false
										that.sendText = "获取验证码"
										clearInterval(interval)
									}
								}, 1000)
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									duration: 2000
								})
								return
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
							return
						});
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			regionpicker(e) {
				this.deptList.sendPrivate = e.province.label
				this.deptList.sendCity = e.city.label
				this.deptList.sendArea = e.area.label
				this.region = e.province.label + '-' + e.city.label + '-' + e.area.label
				this.regions = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			regionchange() {
				this.show = true
			},
			regionpicker1(e) {
				this.deptList.outputPrivate = e.province.label
				this.deptList.outputCity = e.city.label
				this.region1 = e.province.label + '-' + e.city.label
				this.region2 = e.province.label + '-' + e.city.label
			},
			regionchange1() {
				this.show1 = true
			},
			checkedbox(e) {
				this.checked = !this.checked
			},
			typeChange(e) {
				this.typesIndex = e.detail.value
				this.types = this.typesType[this.typesIndex];
				this.deptList.salePlanTypeKey = e.detail.value+1
				this.deptList.salePlanType = this.typesType[this.typesIndex];
				if (this.typesIndex == 0) {
					this.deptList.priceType = '定价销售'
				} else {
					this.deptList.priceType = '期货盘面价+基差'
				}

			},
			navToDetailPage() {
				// if (index == 1) {
				uni.navigateTo({
					url: `/pageD/myRelease/Identity_switching`
				})
			},
			commit() {

				if (!this.deptList.title) {
					this.$api.msg('标题不能为空')
					return
				}
				if (this.deptList.title.length > 16 || this.deptList.title.length < 2) {
					this.$api.msg('标题输入错误')
					return
				}
				if (!this.deptList.goodsName) {
					this.$api.msg('货名不能为空')
					return
				}
				if (this.deptList.goodsName.length > 6 || this.deptList.goodsName.length < 1) {
					this.$api.msg('货名输入错误')
					return
				}
				if (!this.deptList.plannedSaleVolume) {
					this.$api.msg('出售量不能为空')
					return
				}
				if (this.deptList.plannedSaleVolume > 100000 || this.deptList.plannedSaleVolume < 1) {
					this.$api.msg('出售量输入错误')
					return
				}
				if (this.deptList.plannedSaleVolume.indexOf('.') != -1) {
					if (this.deptList.plannedSaleVolume.split('.')[1].length > 2) {
						this.$api.msg('出售量输入错误')
						return
					}
				}
				if (!this.deptList.minimumVolume) {
					this.$api.msg('最小成交量不能为空')
					return
				}
				if (this.deptList.minimumVolume > 100000 || this.deptList.minimumVolume < 1) {
					this.$api.msg('最小成交量输入错误')
					return
				}
				if (this.deptList.minimumVolume.indexOf('.') != -1) {
					if (this.deptList.minimumVolume.split('.')[1].length > 2) {
						this.$api.msg('最小成交量输入错误')
						return
					}
				}
				if (!this.deptList.salePlanType) {
					this.$api.msg('类型不能为空')
					return
				}
				if (!this.deptList.priceType) {
					this.$api.msg('价格类型不能为空')
					return
				}
				if (this.deptList.salePlanType == '现货') {
					if (!this.deptList.salePrice) {
						this.$api.msg('单价不能为空')
						return
					}
					if (this.deptList.salePrice > 100000 || this.deptList.salePrice < 1) {
						this.$api.msg('单价输入错误')
						return
					}
					if (this.deptList.salePrice.indexOf('.') != -1) {
						if (this.deptList.salePrice.split('.')[1].length > 2) {
							this.$api.msg('单价输入错误')
							return
						}
					}
				} else if (this.deptList.salePlanType == '期货') {
					if (!this.deptList.basisPrice) {
						this.$api.msg('基差（元/吨）不能为空')
						return
					}
					if (this.deptList.basisPrice > 10000 || this.deptList.basisPrice < 1) {
						this.$api.msg('基差输入错误')
						return
					}
					if (this.deptList.basisPrice.indexOf('.') != -1) {
						if (this.deptList.basisPrice.split('.')[1].length > 2) {
							this.$api.msg('基差输入错误')
							return
						}
					}
				}
				if (!this.regions) {
					this.$api.msg('发货地区不能为空')
					return
				}
				if (!this.region2) {
					this.$api.msg('产地不能为空')
					return
				}

				if (!this.deptList.sellerPhone) {
					this.$api.msg('卖方手机号不能为空')
					return
				}
				if (this.deptList.sellerPhone.length!=11) {
					this.$api.msg('卖方手机号输入错误')
					return
				}
				if(!this.verifyCode){
					this.$api.msg('验证码不能为空')
					return
				}
				if (this.checked == false) {
					if (this.deptList.waterContent && this.deptList.waterContent < 1 ||
						this.deptList.waterContent && this.deptList.waterContent > 40) {
						this.$api.msg('水分输入错误')
						return
					}
					if (this.deptList.waterContent && this.deptList.waterContent.indexOf('.') != -1) {
						if (this.deptList.waterContent.split('.')[1].length > 2) {
							this.$api.msg('水分输入错误')
							return
						}
					}
					if (this.deptList.bulkDensity && this.deptList.bulkDensity < 500 ||
						this.deptList.bulkDensity && this.deptList.bulkDensity > 1000) {
						this.$api.msg('容重输入错误')
						return
					}
					if (this.deptList.jiaorenli && this.deptList.jiaorenli < 1 ||
						this.deptList.jiaorenli && this.deptList.jiaorenli > 40) {
						this.$api.msg('热损伤输入错误')
						return
					}
					if (this.deptList.jiaorenli && this.deptList.jiaorenli.indexOf('.') != -1) {
						if (this.deptList.jiaorenli.split('.')[1].length > 2) {
							this.$api.msg('热损伤输入错误')
							return
						}
					}
					if (this.deptList.impurity && this.deptList.impurity < 1 ||
						this.deptList.impurity && this.deptList.impurity > 40) {
						this.$api.msg('杂质输入错误')
						return
					}
					if (this.deptList.impurity && this.deptList.impurity.indexOf('.') != -1) {
						if (this.deptList.impurity.split('.')[1].length > 2) {
							this.$api.msg('杂质输入错误')
							return
						}
					}
					if (this.deptList.mildewGrain && this.deptList.mildewGrain < 1 ||
						this.deptList.mildewGrain && this.deptList.mildewGrain > 40) {
						this.$api.msg('霉变粒输入错误')
						return
					}
					if (this.deptList.mildewGrain && this.deptList.mildewGrain.indexOf('.') != -1) {
						if (this.deptList.mildewGrain.split('.')[1].length > 2) {
							this.$api.msg('霉变粒输入错误')
							return
						}
					}
					if (this.deptList.imperfectGrain && this.deptList.imperfectGrain < 1 ||
						this.deptList.imperfectGrain && this.deptList.imperfectGrain > 40) {
						this.$api.msg('不完整粒输入错误')
						return
					}
					if (this.deptList.imperfectGrain && this.deptList.imperfectGrain.indexOf('.') != -1) {
						if (this.deptList.imperfectGrain.split('.')[1].length > 2) {
							this.$api.msg('不完整粒输入错误')
							return
						}
					}
					if (this.deptList.protein && this.deptList.protein < 1 ||
						this.deptList.protein && this.deptList.protein > 80) {
						this.$api.msg('蛋白输入错误')
						return
					}
					if (this.deptList.protein && this.deptList.protein.indexOf('.') != -1) {
						if (this.deptList.protein.split('.')[1].length > 2) {
							this.$api.msg('蛋白输入错误')
							return
						}
					}
				}
				// if(this.amendprice() == false){
				// 	this.$api.msg('验证码输入有误！')
				// 	return
				// }
				var that=this
				this.insertSalePlanInfo = this.deptList
				this.insertSalePlanInfo.basisPrice = this.insertSalePlanInfo.basisPrice
				this.insertSalePlanInfo.commonId = this.userInfo.id
				this.insertSalePlanInfo.salePlanNo='XSJH'+this.getdate()+this.verifyinit()
				this.insertSalePlanInfo.compId = "2710b21efc1e4393930c5dc800010dc4"
				this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.deptList.sellerPhone,
						verifyCode: this.verifyCode
					}).then(res => {
						if (res.data.code == 200) {
							that.$api.doRequest('post', '/salePlanInfo/api/insertSalePlanInfo', that.insertSalePlanInfo).then(res => {
									if (res.data.code == 200) {
										uni.showToast({
											title: "发布成功",
											icon: 'none',
										})
										// setTimeout(() => {
										// 	uni.navigateBack({})
										// }, 1000)
										that.deptList = {}
										uni.navigateTo({
											url: `/pages/release/release`
										})
									} else {
										uni.showToast({
											title: res.data.message,
											icon: 'none',
											duration: 2000
										})
									}
							
								})
								.catch(res => {
									uni.showToast({
										title: res.errmsg,
										icon: 'none',
										duration: 2000
									})
								});
						}
						else if(res.data.code=='11003'){
						 	uni.showModal({
						 		title: '提示',
						 		content: '验证码不正确',
						 		});
						 }
						else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
							return
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
						return
					});
				// this.insertProcurementPlanInfo = this.deptList
				// this.insertProcurementPlanInfo.basisPrice = -this.insertProcurementPlanInfo.basisPrice
				// this.insertProcurementPlanInfo.commonId = this.userInfo.id
				// this.insertProcurementPlanInfo.compId = "2710b21efc1e4393930c5dc800010dc4"
			},
			liChange(e) {
				this.liIndex = e.detail.value
				this.litypes = this.liType[this.liIndex];
				this.deptList.grainKey = e.detail.value+1
				this.deptList.grain = this.liType[this.liIndex]
			},
			pinChange(e) {
				this.pinIndex = e.detail.value
				this.pintypes = this.pinType[this.pinIndex];
				this.deptList.gradeKey = e.detail.value
				this.deptList.grade = this.pinType[this.pinIndex]
			},
			nianChange(e) {
				this.nianIndex = e.detail.value
				this.niantypes = this.nianType[this.nianIndex];
				this.deptList.outputYear = this.baoType[this.baoIndex]
			},

			baoChange(e) {
				this.baoIndex = e.detail.value
				this.baotypes = this.baoType[this.baoIndex];
				this.deptList.packingTypeKey = e.detail.value
				this.deptList.packingType = this.baoType[this.baoIndex];
			},
			getdate() {
			  var date = new Date()
			  var year = date.getFullYear() //获取完整的年份(4位)
			  var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
			  var datetime = date.getDate() //获取当前日(1-31)
			  if (mouth < 10) {
				mouth = '0' + mouth
			  }
			  if (datetime < 10) {
				datetime = '0' + datetime
			  }
			  return year + mouth + datetime
			},
			verifyinit() {
			  var arr = []
			  for (var i = 48; i < 123; i++) {
				if (i > 57 && i < 65) continue
				if (i > 90 && i < 97) continue
				arr.push(String.fromCharCode(i))
			  }
			  arr.sort(function() {
				return Math.random() - 0.5
			  })
			  arr.length = 4
					
			  return arr.join('')
			},
			chengChange(e) {
				this.chengIndex = e.detail.value
				this.chengtypes = this.chengType[this.chengIndex];
				this.deptList.freightPayerKey = e.detail.value+1
				this.deptList.freightPayer = this.chengType[this.chengIndex];
			}
		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #AFB3BF;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}
	.buyup {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}
	.buylow {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}

	.btn {
		border-radius: 20px;
		margin-top: 10px;
		background-color: #22C572;
		color: #FFFFFF;
	}
	.validate {
		width: 100px;
		height: 32px;
		background-color: #F5F6F9;
		color: #AFB3BF;
		border-radius: 10px;
		border: none;
		text-align: center;
		line-height: 30px;
	}
	.getcode {
		font-size: 14px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #AFB3BF;
		background: #F5F6F9;
		height: 30px;
		line-height: 30px;
	}
	.getcode.active {
		border: none;
	}
	.getcode.active {
		background: #22C572;
		color: #fff;
	}
</style>