|
|
@@ -0,0 +1,341 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view style="height: 20rpx;background: #F4F5F7;"></view>
|
|
|
+ <view class="box">
|
|
|
+ <view class="boxLine" v-for="(item,index) in categoryList[index1].sectionList[index2].itemList">
|
|
|
+ <view class="boxLineTop">
|
|
|
+ <view class="itemName">{{item.itemName}}</view>
|
|
|
+ <view class="store" v-show="item.keyType==4" @click="pickerClick(item)">
|
|
|
+ <picker @change="bindPickerChange($event)" :value="item.storeIndex" :item="item" :range="item.array">
|
|
|
+ <view class="pickerView" v-if="item.itemValue!=null">{{item.itemValue}} 分</view>
|
|
|
+ <view class="pickerView" v-else>请选择</view>
|
|
|
+ </picker>
|
|
|
+ <view>
|
|
|
+ <image src="../../static/img/jiantou.png" mode="" class="storeJtimg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="boxlinedescribe">{{item.describe}}</view>
|
|
|
+ <view class="itemCklineBox" v-show="item.keyType==1">
|
|
|
+ <view class="itemCkline" :class="{itemckActive:name.check}" @click="itemXx(name)" v-for="(name,nameIndex) in item.array">{{name.name}}</view>
|
|
|
+ <!-- <view class="itemCkline itemckActive">张杰</view> -->
|
|
|
+ </view>
|
|
|
+ <view class="textareaBox" v-show="item.keyType==2">
|
|
|
+ <textarea placeholder-style="color:#CCCCCC" placeholder="请输入~" v-model="item.itemValue" class="textareaCont"/>
|
|
|
+ </view>
|
|
|
+ <view class="imgBox" v-show="item.keyType==3">
|
|
|
+ <view class="imgLine" v-for="(img,imgindex) in item.imgArr">
|
|
|
+ <image :class="{img4:(imgindex+1)%4==0}" :src="img" mode="" class="itemImg"></image>
|
|
|
+ <image src="../../static/img/icon_delpic@2x.png" mode="" class="delImg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="imgLine" @click="uploadImg(item)">
|
|
|
+ <image src="../../static/img/icon_addpic@2x.png" mode="" class="itemImg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 160rpx;"></view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="bottomBtn" @click="sub">保存</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pickerindex:null,
|
|
|
+ array:[0,1,2,3,4,5],
|
|
|
+ index1:'',
|
|
|
+ index2:'',
|
|
|
+ categoryList:'',
|
|
|
+ pickerItem:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ var name = opt.name;
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: name
|
|
|
+ })
|
|
|
+ this.index1=opt.index1;
|
|
|
+ this.index2=opt.index2;
|
|
|
+ console.log(this.$store.state.categoryList)
|
|
|
+ this.categoryList=this.$store.state.categoryList;
|
|
|
+ this.categoryList[this.index1].sectionList.forEach(v=>{
|
|
|
+ console.log(v)
|
|
|
+ if(v.check){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ v.itemList.forEach((item,index)=>{
|
|
|
+
|
|
|
+ item.itemValue='';
|
|
|
+ if(item.keyType==4){
|
|
|
+ var arr=[];
|
|
|
+ for(var i=0;i<Number(item.keyValue) +1;i++){
|
|
|
+ arr.push(i)
|
|
|
+ }
|
|
|
+ item.array=arr;
|
|
|
+ item.storeIndex=null;
|
|
|
+ item.itemValue=null;
|
|
|
+ }else if(item.keyType==1){
|
|
|
+ item.keyValue=item.keyValue.replace(/，/ig,',')
|
|
|
+ var array= item.keyValue.split(",")
|
|
|
+ var arr=[]
|
|
|
+ array.forEach(name=>{
|
|
|
+ var obj={
|
|
|
+ name:name,
|
|
|
+ check:false
|
|
|
+ }
|
|
|
+ arr.push(obj)
|
|
|
+ })
|
|
|
+ item.array=arr
|
|
|
+ }else if(item.keyType==3){
|
|
|
+ item.imgArr=[]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /* this.categoryList[this.index1].sectionList[this.index2].itemList.forEach((item,index)=>{
|
|
|
+
|
|
|
+ item.itemValue='';
|
|
|
+ if(item.keyType==4){
|
|
|
+ var arr=[];
|
|
|
+ for(var i=0;i<Number(item.keyValue) +1;i++){
|
|
|
+ arr.push(i)
|
|
|
+ }
|
|
|
+ item.array=arr;
|
|
|
+ item.storeIndex=null;
|
|
|
+ item.itemValue=null;
|
|
|
+ }else if(item.keyType==1){
|
|
|
+ item.keyValue=item.keyValue.replace(/，/ig,',')
|
|
|
+ var array= item.keyValue.split(",")
|
|
|
+ var arr=[]
|
|
|
+ array.forEach(name=>{
|
|
|
+ var obj={
|
|
|
+ name:name,
|
|
|
+ check:false
|
|
|
+ }
|
|
|
+ arr.push(obj)
|
|
|
+ })
|
|
|
+ item.array=arr
|
|
|
+ }else if(item.keyType==3){
|
|
|
+ item.imgArr=[]
|
|
|
+ }
|
|
|
+ }) */
|
|
|
+ console.log(this.categoryList);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bindPickerChange(e){
|
|
|
+ console.log(e)
|
|
|
+ this.pickerItem.itemValue=e.detail.value;
|
|
|
+ console.log(this.categoryList);
|
|
|
+ this.categoryList.splice(1,0)
|
|
|
+ },
|
|
|
+ pickerClick(item){
|
|
|
+ this.pickerItem=item
|
|
|
+ },
|
|
|
+ itemXx(name){
|
|
|
+ console.log(name)
|
|
|
+ name.check=!name.check;
|
|
|
+ this.categoryList.splice(1,0)
|
|
|
+ },
|
|
|
+ uploadImg(item){
|
|
|
+ var that=this;
|
|
|
+ console.log(item)
|
|
|
+ var length=item.imgArr.length;
|
|
|
+ if(length==10){
|
|
|
+ uni.showToast({
|
|
|
+ title: '最多上传10张',
|
|
|
+ icon:'none',
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ var num=10-length;
|
|
|
+ uni.chooseImage({
|
|
|
+ sourceType: ['album'],
|
|
|
+ count:num,
|
|
|
+ success: (chooseImageRes) => {
|
|
|
+ const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
|
|
|
+ filePath: tempFilePaths[0],
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ 'user': 'test'
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ console.log(JSON.parse(uploadFileRes.data).data );
|
|
|
+ item.imgArr=item.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
|
|
|
+ that.categoryList.splice(1,0)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
|
|
|
+
|
|
|
+ }) */
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sub(){
|
|
|
+ console.log(this.categoryList);
|
|
|
+ var go=true;
|
|
|
+ this.categoryList[this.index1].sectionList[this.index2].itemList.forEach(item=>{
|
|
|
+ if(item.keyType==3){
|
|
|
+ item.itemValue=item.imgArr.join(',');
|
|
|
+ console.log(item.itemValue)
|
|
|
+ }else if(item.keyType==1){
|
|
|
+ var arr=[]
|
|
|
+ item.array.forEach(name=>{
|
|
|
+
|
|
|
+ if(name.check){
|
|
|
+ arr.push(name.name)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.itemValue=arr.join(',');
|
|
|
+ }
|
|
|
+ if(item.itemValue==0){
|
|
|
+
|
|
|
+ }else if(item.itemValue==''){
|
|
|
+ go=false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.categoryList[this.index1].sectionList[this.index2].itemList)
|
|
|
+ if(!go){
|
|
|
+ uni.showToast({
|
|
|
+ title: '每一项都是必填，请填写完成',
|
|
|
+ icon:'none',
|
|
|
+ duration: 3000,
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.categoryList[this.index1].sectionList[this.index2].check=true;
|
|
|
+ uni.navigateBack({
|
|
|
+ delta:1
|
|
|
+ })
|
|
|
+ this.$store.commit('mutationsCategoryList',this.categoryList)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .content{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ }
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .content{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height:calc(100vh - 44px);
|
|
|
+
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+ .boxLine{
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .boxLineTop{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .store{
|
|
|
+ color: #FF4F00;font-size: 30rpx;
|
|
|
+ }
|
|
|
+ .storeJtimg{
|
|
|
+ width: 14rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .store{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .itemName{
|
|
|
+ color: #3C3C3C;font-size: 30rpx;font-weight: 600;
|
|
|
+ }
|
|
|
+ .boxlinedescribe{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ .itemCklineBox{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+ .itemCkline{
|
|
|
+ height: 56rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ .itemckActive{
|
|
|
+ background: #FF4F00;color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .textareaCont{
|
|
|
+ width: 670rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 28rpx 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+ .textareaBox{
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+ .imgBox{
|
|
|
+ padding-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ }
|
|
|
+ .itemImg{
|
|
|
+ width:150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin-right: 35rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ .img4{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .delImg{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 135rpx;
|
|
|
+ top: 10rpx;
|
|
|
+ }
|
|
|
+ .imgLine{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .bottomBtn{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
|
|
|
+ border-radius: 37rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 74rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size:30rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+</style>
|
