<template> <view class="back-body"> <view class="back-content"> <!-- 轮播图 --> <swiper v-if="backlogPhotoList.length" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true"> <swiper-item v-for="(item,index) in backlogPhotoList" :key="index"> <div class="swiper-item uni-bg-red"> <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item"></u-image> </div> </swiper-item> </swiper> <view v-else class="paizhao"> <view class="icon" @click="takePhone"> <u-icon name="xianchangpaishe" custom-prefix="xd-icon" size="64" color="#888888"></u-icon> </view> </view> <u-form class="form-content" :model="form" ref="uForm" label-width="180"> <u-form-item label="门店" prop="storeName"> <u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" /> <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon> </u-form-item> <u-form-item label="考评指标" prop="clsName"> <u-input @click="chooseClsName" input-align="right" v-model="form.clsName" disabled placeholder="请选择考评指标" /> <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon> </u-form-item> <u-form-item label="抄送人" prop="receiveUser"> <u-input input-align="right" v-model="form.clsName" disabled placeholder="请选择抄送人" /> <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon> </u-form-item> <u-form-item label="整改到期日" prop="effectiveEndTime" > <u-input @click="showPicker=true" input-align="right" v-model="form.effectiveEndTime" disabled placeholder="请选择整改到期日" /> <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon> </u-form-item> </u-form> <view class="remarks"> <u-input v-model="remarks" type="textarea" placeholder="请输入备注..." /> </view> </view> <u-button class="save-btn" type="primary">保存</u-button> <!-- 时间选择器 --> <w-picker class="date-picker" :visible.sync="showPicker" mode="date" :current="true" fields="day" :value="form.effectiveEndTime" @confirm="onSelected($event,'date')" @cancel="showPicker=false" ref="date" ></w-picker> </view> </template> <script> export default { components: { }, data() { return { // 顶部轮播图片 backlogPhotoList:[], showPicker: false, // 是否显示时间弹窗 form: { storeName: '', // 门店 storeId: '', // 门店id clsName: '',// 考评指标 putUser: '', // 处理人 receiveUser: '', // 抄送人 effectiveEndTime: '' // 整改到期日 }, storeSelected : [], // 已选门店 remarks: '' // 备注 } }, onLoad(option) { uni.$on('selKpStores',this.setStore) }, methods: { // 获取选择门店 setStore (data) { console.log(data,'eeeeeeee') this.storeSelected = data this.form.storeName = this.storeSelected[0].name this.form.storeId = this.storeSelected[0].id console.log(this.storeSelected,this.form.storeName,'2222222') }, // 拍照 或从相册选相片 takePhone () { let _this = this uni.chooseImage({ count: 6, //默认9 success: function (res) { console.log(JSON.stringify(res.tempFilePaths)); _this.backlogPhotoList = res.tempFilePaths } }) }, // 确认日期选择 onSelected (v) { console.log(v,'vvvvvvvv') this.form.effectiveEndTime = v.value this.showPicker = false }, // 选择门店 chooseStore () { uni.navigateTo({ url: `/pages/spotCheckConfigure/evaluateStore?type=${'radio'}&item=${encodeURIComponent(JSON.stringify(this.storeSelected))}` }) }, // 选择考评指标 chooseClsName () { uni.navigateTo({ url: '/pages/spotCheckConfigure/evaluateItem' }) } } } </script> <style lang="scss" scoped> .back-body { height: 100%; background-color: #eee; display: flex; flex-direction: column; .back-content { flex: 1; overflow-y: scroll; } .paizhao { background-color: #fff; height: 340upx; display: flex; align-items: center; justify-content: center; .icon{ width: 160upx; height: 160upx; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; } } .text-right { text-align: right; } .top-ad-swiper{ background-color: #fff; height: 340upx; } .swiper-item-imgse{ width: 750upx; height: 340upx; } .form-content{ background-color: #fff; padding: 0 30upx; } .remarks{ background-color: #fff; padding: 0 30upx; margin-top: 20upx; } .save-btn{ width: 90%; margin-bottom: 20upx; } } </style>