1.0yangche/components/no_bussiness/no_bussiness.vue

<template>
	<view class="wrap">
		<!-- 头部 -->
		<view class="error_class_header">
		    <view class="error_title">请选择<view class="line"></view></view>
		</view>
		<view class="select">
			<view class="now_select"@tap="showSelect"><view class="iconfont header_bottom"></view>{{message}}</view>
			<!-- 下拉选择框 -->
			<view :class="['options',isShow === 1?'show':'']">
				<view class="now_select options1" v-for="item,index in messageList" :key="index" @tap="changeIndex(item)">{{item.title}}</view>
			</view>
		</view>
		<view class="back"></view>
		<view class="content">
			<view class="error_class_header">
				<view class="error_title">{{message}}<view class="line"></view></view>
			</view>
		    <view class="address_message">
				<view class="chose_img_title">上传图片（选填）</view>
				<view class="chose_img clear">
				    <image :src="chooseimg" @tap="chooseImage"></image>
				    <view class="small_title">上传清晰门头图和指示牌可以加快审核哦~~</view>
				</view>
				<view class="chose_img_title">备注（选填）</view>
				<textarea v-model="remark" maxlength="500" class="textarea" placeholder="备注信息…" placeholder-style="font-size:26rpx;color:#999999;"></textarea>
		    </view>
		    <view class="footer">
				<button class="submit" @tap="save">提交</button>
		    </view>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	import api from "../../api.js";
	export default {
		data() {
			return {
				messageList:[
					{index:0,title:'永久停业'},
					{index:1,title:'新店还未开业'},
					{index:2,title:'暂停营业'},
					{index:3,title:'不存在'},
				],
				isShow:0,//是否展示下拉菜单
				message:'永久停业',//菜单栏展示
				chooseimg:'https://wx.fujinyangche.com/nvrnetwork/images/choseimg.png',//默认加载图片
				img:'',//上传图片信息  服务器返回
				remark:'',//备注信息
			}
		},
		props:['storeid','type'],
		mounted() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					storeId: this.storeid,
					token: app.globalData.token,
				}
				api.getShopError(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//是否出现下拉框
			showSelect(){
				if(this.isShow == 0){
					this.isShow = 1;
				}else{
					this.isShow = 0;
				}
			},
			//下拉框选项点击切换对应组件
			changeIndex(item){
				this.message = item.title;
				this.chooseimg = 'https://wx.fujinyangche.com/nvrnetwork/images/choseimg.png';
				this.remark = '';
				this.showSelect();
			},
			//上传图片
			chooseImage(){
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album', 'camera'],
				    success: res=> {
				          let tempFilePaths = res.tempFilePaths[0];
						  this.chooseimg = tempFilePaths;
				          uni.uploadFile({
				            url: app.globalData.url + '/p_search/upload_img',
				            filePath: tempFilePaths,
				            name: 'img',
				            success:(res)=>{
				              let data = JSON.parse(res.data);
							  this.img = data.data;
				            }
				          })
				    },
				})
			},
			//保存按钮
			save(){
				let data = {
				    storeId: this.storeid,
				    subUserId: this.allData.userId,  
				    type:this.type,
				    description: this.message,
				    img:this.img,
				    remark: this.remark
				}
				api.submitShopError(data).then((res)=>{
					if(res.data.is){
						uni.showToast({
							title:res.data.msg
						})
					}else{
						uni.showToast({
							title:res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.clear:after{
	  content: "";
	  display: block;
	  clear:both;
	}
	.error_class_header{
	  padding-left: 30rpx;
	  box-sizing: border-box;
	}
	.error_title{
	  font-size: 32rpx;
	  color:#222222;
	  font-weight: bold;
	  margin-top:32rpx;
	  position: relative;
	  padding-left: 14rpx;
	}
	.line{
	  width:6rpx;
	  height:30rpx;
	  background-color: #E77817;
	  position: absolute;
	  top:6rpx;
	  left:0rpx;
	}
	.message_top{
	  position: relative;
	} 
	.select{
	  width:100%;
	  padding:0 48rpx 40rpx 54rpx;
	  box-sizing: border-box;
	  margin-top:38rpx;
	  position: relative;
	}
	.now_select{
	  width:100%;
	  height:72rpx;
	  line-height: 72rpx;
	  box-sizing: border-box;
	  background:rgba(255,255,255,1);
	  border-radius:2rpx;
	  border:1px solid rgba(207,207,207,1);
	  font-size: 28rpx;
	  color:#222222;
	  padding-left: 20rpx;
	  position: relative;
	}
	.header_bottom{
	  color:#999999;
	  font-size: 16rpx;
	  position: absolute;
	  right:26rpx;
	  bottom:0rpx;
	}
	.options{
	  width:100%;
	  overflow: hidden;
	  display: none;
	}
	.show{
	  display: block;
	}
	.options1{
	  border-top:none;
	}
	.back{
	  width:100%;
	  height:20rpx;
	  background-color: #f7f7f7;
	}
	.address1{
	  font-size:28rpx;
	  color:#666666;
	  float:left;
	  height:46rpx;
	  text-align: left;
	  line-height: 46rpx;
	  margin-right: 20rpx;
	}
	.address_message{
	  width:100%;
	  overflow: hidden;
	  padding:0 46rpx 140rpx;
	  box-sizing: border-box;
	}
	.inp{
	  width:60%;
	  float:left;
	  font-size:28rpx;
	  color:#222222;
	}
	.reset{
	  width:100rpx;
	  height:40rpx;
	  background:rgba(250,225,203,1);
	  border-radius:36rpx;
	  border:1px solid rgba(231,120,23,1);
	  text-align: center;
	  line-height: 40rpx;
	  font-size: 24rpx;
	  color:#E77817;
	  position: absolute;
	  right:0;
	  z-index:100;
	}
	.map{
	  width:100%;
	  height:200rpx;
	  border-radius: 6rpx;
	  overflow: hidden;
	  margin-top:20rpx;
	}
	.chose_img_title{
	  font-size: 28rpx;
	  color:#666666;
	  margin-top:38rpx;
	}
	.chose_img{
	  width:100%;
	  margin-top:30rpx;
	}
	.chose_img image{
	  display: block;
	  width:148rpx;
	  height:148rpx;
	  float:left;
	}
	.small_title{
	  float:left;
	  font-size: 24rpx;
	  color:#999999;
	  line-height: 148rpx;
	  margin-left: 20rpx;
	}
	.textarea{
	  width:100%;
	  height:200rpx;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(202,202,202,1);
	  margin-top:12rpx;
	  padding:14rpx 0 0 20rpx;
	  box-sizing: border-box;
	  position: relative;
	}
	.length{
	  position: absolute;
	  bottom:10rpx;
	  right:10rpx;
	  font-size: 24rpx;
	  color:#999999;
	}
	.back2{
	  width:100%;
	  height:40rpx;
	  background-color: #f7f7f7;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
	.hidden{
	  display: block;
	}
	.none{
	  display: none;
	}
	.iphone_error{
	  width:100%;
	  overflow: hidden;
	}
	.radio{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  position: absolute;
	  top:8rpx;
	  left: -40rpx;
	  background-color: #EFEFEF;
	  border:1px solid #D0D0D0;
	}
	.right{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  text-align: center;
	  line-height: 28rpx;
	  background:#E77817;
	  position: absolute;
	  top:8rpx;
	  left: -40rpx;
	  color:#ffffff;
	}
	.message_top_right{
	  position: absolute;
	  right:0;
	  top:0rpx;
	  z-index:100;
	}
	.this_error{
	  font-size: 28rpx;
	  color:#222222;
	  display: inline-block;
	  height: 46rpx;
	  line-height: 46rpx;
	  vertical-align:text-top;
	}
	.tel_input{
	  width:100%;
	  height:72rpx;
	  background:rgba(255,255,255,1);
	  border-radius:2rpx;
	  border:1px solid rgba(207,207,207,1);
	  box-sizing: border-box;
	  margin-top:30rpx;
	}
	.tel_input input{
	  width:100%;
	  height:100%;
	  padding-left: 26rpx;
	  box-sizing: border-box;
	}
	.tel_input_place{
	  font-size: 28rpx;
	  color:#999999;
	  line-height: 72rpx;
	}
</style>