jikeH5/pages/addjk/eadit.vue

<template>
	<view class="content">
		<view class="kk"></view>
	  <view class="box" style="padding-bottom: 0;">
		  <view class="title">基础信息</view>
		  <view class="line">
			  <view class="lineLeft">
				  <span class="linexx">*</span> <span>活动名称</span>
			  </view>
			  <view class="lineRight">
				  <input type="text" v-model="activityName" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
			  </view>
		  </view>
		  <view class="line">
			  <view class="lineLeft">
				  <span class="linexx">*</span> <span>报名时间</span>
			  </view>
			  <view class="lineRight timelineRight">
					<picker mode="date" :value="startTime" @change="bindTimeChangeStart">
						<view class="dateViewno" v-if="!startTime">开始时间</view>
						<view class="dateView" v-else>{{startTime}}</view>
					</picker>
					<view class="timeHx">-</view>
					<picker mode="date" :value="endTime" @change="bindTimeChangeendTime"  :start='startTime'>
						<view class="dateViewno" v-if="!endTime">结束时间</view>
						<view class="dateView" v-else>{{endTime}}</view>
					</picker>
			  </view>
		  </view>
		  <view class="line" style="border: none;">
			  <view class="lineLeft">
				  <span class="linexx">*</span> <span>活动门店</span>
			  </view>
			  <view class="lineRight shopckBox">
				 <view class="shopListNo" v-if="!shopNames">请选择活动门店，可多选</view>
				  <view class="shopListY" v-if="shopNames">{{shopNames}}</view>
				 <view class="addshop" @click="addShop">添加</view>
			  </view>
		  </view>
	  </view>
	  <view class="kk"></view>
	  <view class="box"  style="padding-bottom: 0;">
		<view class="title">报名信息</view>
		<view class="line">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>报名凭证</span>
		  </view>
		  <view class="lineRight clWhereBox">
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(1)!=-1}">手机号</view>
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(2)!=-1}" @click="clWhere(2)">车牌号</view>
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(3)!=-1}" @click="clWhere(3)">姓名</view>
			 <view class="clWhereLine" :class="{clWhereActive:clWhereString.indexOf(4)!=-1}" @click="clWhere(4)">单位</view>
		  </view>
		</view>
		<view class="line">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>最多报名人数</span>
		  </view>
		  <view class="lineRight">
			  <input :disabled="isExistGroup" type="number" v-model="number" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
		  </view>
		</view>
		<view class="line"  ><!-- style="border: none;" -->
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>支付方式</span>
		  </view>
		  <view class="lineRight payBox">
			 <view class="payType" @click="payTypeCL(1)">
				 <img src="../../static/img/ckn.png" alt="" class="payTypeImg" v-if="payType!=1">
				 <img src="../../static/img/cky.png" alt="" class="payTypeImg" v-if="payType==1">
				 <view class="payTypeTxt">在线支付</view>
			 </view>
			 <view class="payType" @click="nopayCl" style="padding-left: 30rpx;">
				 <img src="../../static/img/cky.png" alt="" class="payTypeImg" v-if="payType==2">
				 <img src="../../static/img/ckn.png" alt="" class="payTypeImg" v-if="payType!=2">
				 <view class="payTypeTxt">无需支付</view>
			 </view>
		  </view>
		</view>
		<view class="line" v-if="payType==1">
		  <view class="lineLeft">
			  <span class="linexx">*</span> <span>支付金额</span>
		  </view>
		  <view class="lineRight">
			  <input :disabled="isExistGroup" type="text" v-model="money" placeholder="请输入" class="lineRightInput" placeholder-class="inputPlace">
		  </view>
		</view>
		<view v-if="payType==1">
			<view class="line line3">
				<view class="lineLeft">
					<span>拼团设置</span>
				</view>
				<view class="lineRight"><switch :disabled="isExistGroup" :checked='groupType' @change="switchgroupType" style="transform:scale(0.8)"/></view>
			</view>
			<view v-if="groupType">
				<view class="line" >
				  <view class="lineLeft">
					  <span class="linexx">*</span> <span>拼团人数</span>
				  </view>
				  <view class="lineRight">
					  <input type="number" :disabled="isExistGroup" @blur="blurgroupNumber" v-model="groupNumber" placeholder="可输入大于1的整数" class="lineRightInput" placeholder-class="inputPlace">
				  </view>
				</view>
				<view class="line" >
				  <view class="lineLeft">
					  <span class="linexx">*</span> <span>拼团有效期</span>
				  </view>
				  <view class="lineRight">
					  <input type="digit" :disabled="isExistGroup" @blur="blurgroupTime" v-model="groupTime" placeholder="可输入0.5至72小时" class="linecInput" placeholder-class="inputPlace">
				  </view>
				  <viwe class="lineRight">小时</viwe>
				</view>
				<view class="line" >
				  <view class="lineLeft">
					  <span class="linexx">*</span> <span>拼团价</span>
				  </view>
				  <view class="lineRight">
					  <input type="digit" :disabled="isExistGroup" @blur="blurgroupMoney" v-model="groupMoney" placeholder="需小于支付金额" class="linecInput" placeholder-class="inputPlace">
				  </view>
				  <viwe class="lineRight">元</viwe>
				</view>
				<view class="line line3">
					<view class="lineLeft2">
						 <span class="linexx">*</span><span>拼团超时自动成团</span> 
						 <image @click="zyct" src="../../static/img/icon_help.png" mode="" class="helpIcon"></image>
					</view>
					<view class="lineRight"><switch :disabled="isExistGroup" :checked='groupOutState' @change="switchgroupOutState" style="transform:scale(0.8)"/></view>
				</view>
				<view class="line line3">
					<view class="lineLeft2">
						 <span class="linexx">*</span><span>自由参团</span> 
						 <image  @click="zdct" src="../../static/img/icon_help.png" mode="" class="helpIcon"></image>
					</view>
					<view class="lineRight"><switch :disabled="isExistGroup" :checked='groupRestrictions' @change="switchgroupRestrictions" style="transform:scale(0.8)"/></view>
				</view>
			</view>
		
		</view>
		
		
	  </view>
	  <view class="kk"></view>
	  <view class="box">
	  		<view class="title">活动详情</view>
			<view class="line">
				  <view class="lineLeft">
					  <span>活动说明</span>
				  </view>
				  <view class="lineRight">
					  <textarea placeholder-class="inputPlace" v-model="activityContent" placeholder="请输入" class="textsr"/> 
				  </view>
			</view>
			<view class="line2">
				<view class="lineTitle">主图</view>
				<view class="lineMS">此图在活动顶部显示，建议宽度750px</view>
				<view class="lineImgBOx">
					<view class="lineimghz" v-if="img" >
						<img src="../../static/img/del.png" alt="" class="lineimgdel" @click="delimgzt" >
						<img :src="img" alt="" class="lineimg" @click="previewImage(img)">
					</view>
					<view class="lineimghz" @click="upimgzt" v-if="!img">
						<img src="../../static/img/scimg.png" alt="" class="lineimg">
					</view>
				</view>
			</view>
			<view class="line2">
				<view class="lineTitle">详情图片</view>
				<view class="lineMS">此图在活动底部显示，可用于显示门店照片等，建议宽度750px</view>
				<view class="lineImgBOx">
					<view class="lineimghz" v-for="(item,index) in imgListArr">
						<img src="../../static/img/del.png" alt="" class="lineimgdel" @click="delimg(index)" >
						<img :src="item" alt="" class="lineimg" @click="previewImage(item)">
					</view>
					<view class="lineimghz" @click="upimg">
						<img src="../../static/img/scimg.png" alt="" class="lineimg">
					</view>
				</view>
			</view>
			<view class="line lineBorderNo">
			  <view class="lineLeft">
				<span>音乐</span>
			  </view>
			  <view class="lineRight musicRight" @click="goMusic">
				 <view class="musicMS">选择/更换音乐</view>
				 <img src="../../static/img/jt.png" alt="" class="musicJt">
			  </view>
			</view>
			<view class="musicBox" v-if="ckMusic">
				<view class="musicLine">
					<view class="musicLineLeft">
						<img src="../../static/img/music.png" alt="" class="musicImg">
						<view class="musicName">{{ckMusic.name}}</view>
					</view>
					<view>
						<img src="../../static/img/sanchu.png" alt="" class="musicDel" @click="musicDel">
					</view>
					
				</view>
			</view>
	  </view>
	  <view style="height: 120rpx;"></view>
	  <view class="preview" @click="preview">预览</view>
	  <w-compress ref='wCompress' />
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		components: {
		        WCompress
		},
		data() {
			return {
				id:'',                //类型：String  可有字段  备注：新增无编辑有
				activityName:'',                //类型：String  必有字段  备注：活动名称
				startTime:"",                //类型：String  必有字段  备注：营业开始时间
				endTime:"",                //类型：String  必有字段  备注：营业结束时间
				number:"",                //类型：String  必有字段  备注：报名人数
				activityContent:"",                //类型：String  必有字段  备注：活动说明
				//clWhere:'',                //类型：String  必有字段  备注：报名凭证1,2,3,4 1手机号2车牌号3姓名4单位
				payType:1,                //类型：String  必有字段  备注：1在线支付2无需支付
				music:"",                //类型：String  必有字段  备注：背景音乐
				clState:'',                //类型：String  必有字段  备注：1未启用2启用
				img:'',                //类型：String  必有字段  备注：从首页带进来的图片
				imgList:'',//类型：String  必有字段  备注：详情图片多个以逗号分割
				datetimerange: '',
				shopNames:'',
				shopList:'',
				clWhereList:[1,],
				clWhereString:'1',
				imgListArr:[],
				money:'',
				ckMusic:'',
				id:'',
				groupNumber:'',
				groupType:false,
				groupTime:'',
				groupMoney:'',
				groupOutState:false,
				groupRestrictions:false,
				isExistGroup:false,
			}
		},
		onLoad(opt) {
            this.img=opt.img;
			if(opt.id){
				this.id=opt.id;
				this.getDetails()
			}
			
			
		},
		
		onShow() {
			const shopckList = uni.getStorageSync("shopckList");
			this.ckMusic=uni.getStorageSync("ckmusic")
			if(this.ckMusic){
				this.music=this.ckMusic.id
			}
			var shopNames=[];
			var shopList=[];
			if(shopckList){
				shopckList.forEach(item=>{
					shopNames.push(item.shopName)
					shopList.push(item.id)
				})
				this.shopNames=shopNames.join(',')
				this.shopList=shopList.join(',')
			}
			
		},
		methods: {
		  nopayCl(){
			  if(this.isExistGroup){
				  return false
			  }
			  this.payType=2;
			  this.groupType=false
		  },
		  payTypeCL(){
			  if(this.isExistGroup){
			  				  return false
			  }
			   this.payType=1;
		  },
		  zdct(){
			  uni.showModal({
			  	title: '自由参团',
			  	content: '如果开启自由参团，则用户可以在详情页直接参团；如果关闭，则用户只能通过好友分享的链接参与拼团',
				showCancel:false,
				confirmText:'我知道了',
			  	success: function (res) {
			  		
			  	}
			  });
		  },
		  zyct(){
			 uni.showModal({
			 	title: '拼团超时自动成团',
			 	content: '如果开启：过了拼团有效期或拼团活动结束后未能成团，则自动成团；如果关闭：过了拼团有效期或拼团活动结束后未能成团，则拼团失败，团内用户的支付金额将原路退回。',
				showCancel:false,
				confirmText:'我知道了',
			 	success: function (res) {
			 		
			 	}
			 }); 
		  },
		  switchgroupType(e){
			  console.log(e)
			  this.groupType=e.detail.value
		  },
		  switchgroupOutState(e){
		  		this.groupOutState=e.detail.value
		  },
		  switchgroupRestrictions(e){
                this.groupRestrictions=e.detail.value
		  },
		  previewImage(img){
			  var arr=[]
			  arr.push(img)
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片',],
						success: function(data) {},
						fail: function(err) {}
					}
				});
		  },
		
		  getDetails(){
			  uni.showLoading({
			  	title: '加载中'
			  })
			  this.$http('openH5SetTheGuest/getActivityDetails', {
			    id:this.id
			   },'GET').then(res => {
			  		uni.hideLoading();
					var jkdata=res.data.data
					this.activityName=jkdata.activityName;
					this.activityContent=jkdata.activityContent;
					this.money=jkdata.money;
					this.number=jkdata.number;
					
					this.clWhereString=jkdata.clWhere;
					this.clWhereList=this.clWhereString.split(',');
					this.startTime=jkdata.startTime.slice(0,10);
					this.endTime=jkdata.endTime.slice(0,10);
					this.payType=jkdata.payType;
					this.img=res.data.img.img;
					this.isExistGroup=res.data.isExistGroup
					if(res.data.imgList){
						res.data.imgList.forEach(item=>{
							this.imgListArr.push(item.img)
						})
					}
					var shopNames=[];
					var shopList=[];
					if(res.data.shopList){
						res.data.shopList.forEach(item=>{
							item.id=item.shopId
							shopNames.push(item.shopName)
							shopList.push(item.shopId)
						})
						this.shopNames=shopNames.join(',')
						this.shopList=shopList.join(',')
					}
					var useshoplist=res.data.shopList
					this.ckMusic=res.data.selectedMusic;
					if(this.ckMusic){
						this.music=this.ckMusic.id;
						uni.setStorage({
								key: 'ckmusic',
								data: this.ckMusic,
								 success: function () {	
											
								 }
						});
					}else{
						uni.removeStorageSync('ckmusic');
					}
					this.groupType=jkdata.groupType==1?true:false;
					this.groupNumber=jkdata.groupNumber;
					this.groupTime=jkdata.groupTime;
					this.groupMoney=jkdata.groupMoney;
					this.groupOutState=jkdata.groupOutState;
					this.groupRestrictions=jkdata.groupRestrictions;
					//console.log(this.imgListArr)
					uni.setStorage({
							key: 'shopckList',
							data: useshoplist,
							 success: function () {	
								
						}
					});
			  		//this.list=res.data
			   })
		  },
		  delimgzt(){
			this.img=''  
		  },
		  upimgzt(){
		  	var that = this;
		  	uni.chooseImage({
				sourceType: ['album','camera'],
				count:1, 
				sizeType:['compressed'],
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					that.file=tempFilePaths[0];
					that.$refs.wCompress.start(that.file, {
					            pixels: 600000,  // 最大分辨率，默认二百万
					            quality: 0.9,     // 压缩质量，默认0.8
					            type: 'png',      // 图片类型，默认jpg
					            base64: true,     // 是否返回base64，默认false，非H5有效
					          }).then(resxx => {
					                uni.uploadFile({
					                       url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
					                       filePath: resxx,
					                       name: 'file',
					                       formData: {
					                           'user': 'test'
					                       },
					                       success: (uploadFileRes) => {
					                         that.img=JSON.parse(uploadFileRes.data).data[0]
					                       }
					                   });           
					                          
					           }).catch(e => {
					                          
					           })
					 // 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 );
						// 		that.img=JSON.parse(uploadFileRes.data).data[0]
								
						// 	}
						// });

					
				}
		  	});
		  },
		  blurgroupNumber(){
			  if(this.groupNumber%1 != 0||this.groupNumber<2){
			  	uni.showToast({
			  		 title: '请输入大于1整数',
			  		 icon:'none',
			  		 duration: 2000
			  	});
			  	
			  }
		  },
		  blurgroupTime(){
			  if(!this.groupTime){
			  	uni.showToast({
			  		 title: '请输入拼团有效期',
			  		 icon:'none',
			  		 duration: 2000
			  	});
			  	
			  }else if(this.groupTime<0.5||this.groupTime>72){
			  	uni.showToast({
			  		 title: '有效期为0.5小时至72小时',
			  		 icon:'none',
			  		 duration: 2000
			  	});
			  
			  }
		  },
		  blurgroupMoney(){
			  if(this.groupMoney>this.money||this.groupMoney==this.money){
			  	uni.showToast({
			  		 title: '拼团价格需小于支付金额',
			  		 icon:'none',
			  		 duration: 2000
			  	});
			  
			  }
		  },
		  preview(){
			 /* if(this.isExistGroup){
				  uni.showToast({
				  	 title: '已有用户参与该拼团活动,无法修改报名信息',
				  	 icon:'none',
				  	 duration: 3000
				  });
				  return false
			  } */
			//console.log(this.clWhere)
			 // if(this.money==0){
				//  this.money=0
			 // }
			if(this.money==null){
				this.money=''
			}
			if(this.payType==2){
				this.money=0;
			}
			console.log(this.money)
			if(this.activityName==''){
				uni.showToast({
					 title: '请输入活动名称',
					 icon:'none',
					 duration: 2000
				});
				return false;
			}else if(!this.startTime||!this.endTime){
				uni.showToast({
					 title: '请选择报名时间',
					 icon:'none',
					 duration: 2000
				});
				return false;
			}else if(this.shopList==''){
				uni.showToast({
					 title: '请选择活动门店',
					 icon:'none',
					 duration: 2000
				});
				return false;
			}else if(this.clWhereString==''){
				uni.showToast({
					 title: '请选择报名凭证',
					 icon:'none',
					 duration: 2000
				});
				return false;
			}else if(this.number==''){
				uni.showToast({
					 title: '请输入最多报名人数',
					 icon:'none',
					 duration: 2000
				});
				return false;
			}else if(this.money!==0&&this.money==''&&this.payType==1){
				uni.showToast({
					 title: '请输入支付金额',
					 icon:'none',
					 duration: 2000
				});
				return false;
			}else if(this.groupType){
				if(!this.groupNumber){
					
					uni.showToast({
						 title: '请输入拼团人数',
						 icon:'none',
						 duration: 2000
					});
					return false;
				}else if(this.groupNumber%1 != 0||this.groupNumber<2){
					uni.showToast({
						 title: '请输入大于1整数',
						 icon:'none',
						 duration: 2000
					});
					return false;
				}
				if(!this.groupTime){
					uni.showToast({
						 title: '请输入拼团有效期',
						 icon:'none',
						 duration: 2000
					});
					return false;
				}else if(this.groupTime<0.5||this.groupTime>72){
					uni.showToast({
						 title: '有效期为0.5小时至72小时',
						 icon:'none',
						 duration: 2000
					});
					return false;
				}
				if(!this.groupMoney){
					uni.showToast({
						 title: '请输入价格',
						 icon:'none',
						 duration: 2000
					});
					return false;
				}else if(this.groupMoney>this.money||this.groupMoney==this.money){
					uni.showToast({
						 title: '拼团价格需小于支付金额',
						 icon:'none',
						 duration: 2000
					});
					return false;
				}
			}
			//return false;
			
			var editdata={
				id:this.id,
				activityName:this.activityName,
				startTime:this.startTime+ ' 00:00:00',
				endTime:this.endTime+ ' 23:59:59',
				number:this.number,
				activityContent:this.activityContent,
				clWhere:this.clWhereString,
				payType:this.payType,
				music:this.music,
				money:this.money,
				shopList:this.shopList,
				img:this.img,
				imgList:this.imgListArr.join(','),
				clState:'',
				groupType:this.groupType?1:0,
				groupNumber:this.groupNumber,
				groupTime:this.groupTime,
				groupMoney:this.groupMoney,
				groupOutState:this.groupOutState?1:0,
				groupRestrictions:this.groupRestrictions?1:0
			} 
			console.log(editdata)
			//return false;
			uni.setStorage({
					key: 'editdata',
					data: editdata,
					 success: function () {	
						uni.navigateTo({
							url:'jkDetail?type=1'
						})			
			    }
			});
		  },
		  addShop(){
			  uni.navigateTo({
			  	url:'ckshop'
			  })
		  },
		  goMusic(){
			  uni.navigateTo({
			  	url:'ckmusic'
			  })
		  },
		  musicDel(){
			  this.music='';
			  this.ckMusic=''
			  uni.removeStorageSync('ckmusic');
		  },
          bindTimeChangeStart(e){
			  console.log(e)
			  this.startTime=e.detail.value;
		  },
		  bindTimeChangeendTime(e){
			  this.endTime=e.detail.value;
		  },
		  clWhere(num){
			  if(this.isExistGroup){
				  return false
			  }
			  console.log(this.clWhereList)
			  this.clWhereString=this.clWhereList.join(',');
			  if(this.clWhereString.indexOf(num)!=-1){
				 // this.clWhereList.remove(num)
				 let index = this.clWhereList.indexOf(num);
				 this.clWhereList.splice(index, 1)
				 //this.remove(num)
			  }else{
				 this.clWhereList.push(num) 
			  }
			  this.clWhereString=this.clWhereList.join(',');
			  console.log(this.clWhereString)
		  },
		  delimg(index){
			   this.imgListArr.splice(index, 1)
		  },
		  upimg(){
		  	   var that = this;
			   uni.chooseImage({
				sourceType: ['album','camera'],
				count:9, 
				sizeType:['compressed'],
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					that.file=tempFilePaths[0]
					that.$refs.wCompress.start(that.file, {
					            pixels: 600000,  // 最大分辨率，默认二百万
					            quality: 0.9,     // 压缩质量，默认0.8
					            type: 'png',      // 图片类型，默认jpg
					            base64: true,     // 是否返回base64，默认false，非H5有效
					          }).then(resxx => {
					                uni.uploadFile({
					                       url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
					                       filePath: resxx,
					                       name: 'file',
					                       formData: {
					                           'user': 'test'
					                       },
					                       success: (uploadFileRes) => {
					                         that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
					                       }
					                   });           
					                          
					           }).catch(e => {
					                          
					           })
					 // 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 );
						// 		that.imgListArr=that.imgListArr.concat(JSON.parse(uploadFileRes.data).data)
						// 		//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
						// 		//that.imgurl=JSON.parse(uploadFileRes.data).data[0];
						// 		//that.goAddzdy(that.imgurl)
						// 	}
						// });
			   
					
				}
			   });
		  }
		 
		}
	}
</script>

<style scoped>
.content{
	min-height: 100vh;
	background:#F4F5F7;
}
.lineLeft2{
	width: 300rpx;color: #666666;display: flex;align-items: center;
}
.helpIcon{
	width: 26rpx;height: 26rpx;padding-left: 10rpx;padding-top: 4rpx;
}
.preview{
	width: 750rpx;
	height: 98rpx;
	background: #3F90F7;
	line-height: 98rpx;
	text-align: center;
	color: #ffffff;
	font-size: 30rpx;
	position: fixed;
	left: 0;
	bottom: 0;
}
.musicBox{
	padding: 0 24rpx;
}
.musicLine{
	display: flex;
	justify-content: space-between;
	margin-bottom:30rpx;
	padding:26rpx 24rpx;
	background: #F4F5F7;
	border-radius: 10rpx;
}
.musicName{
	color: #3C3C3C;font-size: 24rpx;
	padding-left: 10rpx;
}
.musicLineLeft{
	display: flex;
}
.musicDel{
	width: 30rpx;
	height: 30rpx;
}
.musicImg{
	width: 36rpx;
	height: 36rpx;
}
.line2{
	padding: 30rpx 24rpx;
	border-bottom: 1px solid #EEEEEE;
}
.musicJt{
	width: 28rpx;
	height: 28rpx;
	margin-top: 8rpx;
}
.musicRight{
	display: flex;
	justify-content: space-between;
	width: 500rpx;
}
.musicMS{
	color: #CCCCCC;
}
.lineimgdel{
	width: 37rpx;
	height: 37rpx;
	position: absolute;
	top: -18rpx;
	right: -18rpx;
}
.lineimghz{
	margin-right: 24rpx;
	position: relative;
	margin-top: 24rpx;
}
.lineimg{
	width: 150rpx;
	height: 150rpx;
}
.lineTitle{
	color: #666666;font-size: 28rpx;
}
.lineMS{
	color: #999999;font-size: 24rpx;padding-top: 10rpx;
}
.lineImgBOx{
	display: flex;
	flex-wrap: wrap;
}
.payBox{
	display: flex;
}
.payTypeImg{
	width: 36rpx;
	height: 36rpx;
}
.payType{
	display: flex;
	line-height: 36rpx;
}
.payTypeTxt{
	padding-left: 10rpx;
	color: #3C3C3C;
}
.line{
	display: flex;
	font-size: 28rpx;
	padding: 30rpx 24rpx;
	border-bottom: 1px solid #EEEEEE;
}
.linexx{
	color: #FF3B30;
}
.dateView{
	color:#3C3C3C ;
}
.lineLeft{
	width: 200rpx;
	color: #666666;
}
.clWhereBox{
	display: flex;
	
}
.clWhereLine{
	width: 100rpx;
	height: 52rpx;
	background: #F4F5F7;
	border-radius: 10rpx;
	text-align: center;
	color: #3C3C3C;
	line-height: 52rpx;
	font-size: 24rpx;
	margin-right: 24rpx;
}
.clWhereBox .clWhereActive{
	background: #EAF3FF;
	border: 2rpx solid #3F90F7;
	height: 48rpx;
	color: #3F90F7;
	height: 48rpx;
	line-height: 48rpx;
	width: 96rpx;
}
.timelineRight{
	display: flex;
	
}

.textsr{
	width: 500rpx;
	height: 180rpx;
}
.shopListNo{
	width: 400rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color: #CCCCCC;
}
.shopListY{
	width: 400rpx;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	color: #3C3C3C;
}
.addshop{
	color: #3F90F7;
	padding-left: 10rpx;
}
.shopckBox{
	display: flex;
}
.timeHx{
	color: #CCCCCC;
	padding: 0 30rpx;
}
.lineRightInput{
	font-size: 28rpx;
	color:#3C3C3C ;
	width: 500rpx;
}
.linecInput{
	font-size: 28rpx;
	color:#3C3C3C ;
	width: 400rpx;
}
.lineRight{
	color:#3C3C3C ;
}
.inputPlace{
	color: #CCCCCC;
}
.dateViewno{
	color: #CCCCCC;
}
.box{
	background: #ffffff;
	padding-bottom: 30rpx;
}
.kk{
	background:#F4F5F7;
	height: 20rpx;
}
.title{
	padding-left: 24rpx;
	padding-top: 30rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 45rpx;
	font-weight: 500;
}
.lineBorderNo{
	border-bottom: none !important;
}
.line3{
	display: flex;justify-content: space-between;
	padding: 16rpx 24rpx;
}
.line3 .lineLeft{
	display: flex;align-items: center;
}
</style>