1.0yangche/components/message_error/message_error.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="location_error" v-if="index == 0">
		    <view class="error_class_header">
				<view class="error_title">位置信息<view class="line"></view></view>
		    </view>
		    <view class="address_message">
				<view class="message_top clear">
					<view class="address1">地址</view>
					<input v-model="rightInfo" class="inp" placeholder="请输入地址" placeholder-style="font-size:28rpx;color:#999999;"></input>
					<view :class="['reset']" @tap="reset">重置</view>
				</view>
				<map class="map" @tap="openMap"></map>
				<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="back2"></view>
			<!--底部提交 -->
			<view class="footer">
				<button class="submit" @tap="save">提交</button>
			</view>
		</view>
		<!-- 商户电话报错 -->
		<view class="iphone_error" v-if="index == 1">
			<view class="error_class_header">
				<view class="error_title">商户电话<view class="line"></view></view>
			</view>
		    <view class="address_message">
				<view class="message_top clear">
					<view class="address1">电话</view>
					<input v-model="rightInfo" class="inp" placeholder="请输入电话" placeholder-style="font-size:28rpx;color:#999999;"></input>
				</view>
				<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 class="shopName_error" v-if="index == 2">
		    <view class="error_class_header">
				<view class="error_title">商户名错误<view class="line"></view></view>
		    </view>
		    <view class="address_message">
				<view class="message_top clear">
					<view class="address1">商户名</view>
					<input v-model="rightInfo" class="inp" placeholder="请输入商户名" placeholder-style="font-size:28rpx;color:#999999;"></input>
					<view class="reset" bindtap="reset">重置</view>
				</view>
				<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 {
				isShow:0,//是否展示下拉菜单
				message:'位置信息错误',//菜单栏展示
				messageList:[
					{index:0,title:'位置信息错误'},
					{index:1,title:'商户电话错误/补充'},
					{index:2,title:'商户名错误'},
				],
				index:0,//展示哪一项
				allData:null,//后台返回所有数据
				rightInfo:'',//填写的正确信息  地址   电话
				detail:'',//错误信息展示
				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;
					this.detail = this.allData.provider.address;
					this.rightInfo = this.allData.provider.address;
				})
			},
			//是否出现下拉框
			showSelect(){
				if(this.isShow == 0){
					this.isShow = 1;
				}else{
					this.isShow = 0;
				}
			},
			//下拉框点击切换对应组件
			changeIndex(item){
				this.index = item.index;
				let value = item.title;
				if (value == '位置信息错误'){
					this.detail = this.allData.provider.address
				}
				if (value == '商户电话错误/补充'){
					this.detail = this.allData.provider.telphone
				}
				if (value == '商户名错误') {
					this.detail = this.allData.provider.name
				}
				this.message = value;
				this.chooseimg = 'https://wx.fujinyangche.com/nvrnetwork/images/choseimg.png';
				this.rightInfo = '';
				this.remark = '';
				this.showSelect();
			},
			// 重置按钮
			reset(){
				this.rightInfo = "";
			},
			//上传图片
			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;
				            }
				          })
				    },
				})
			},
			//打开地图
			openMap(){
				uni.getLocation({
					success: (res) => {
						let latitude = res.latitude;
						let longitude = res.longitude;
						uni.chooseLocation()({
							latitude: latitude,
							longitude: longitude,
							scale: 28
						})
					}
				})
			},
			//保存按钮
			save(){
				let data = {
				    storeId: this.storeid,
				    subUserId: this.allData.userId,     
				    type:this.type,
				    description:this.message,
				    detail:this.detail,
				    rightInfo: this.rightInfo,
				    img: this.img,
				    remark:this.remark
				}
				api.submitShopError(data).then((res)=>{
					console.log(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;
	  box-sizing: border-box;
	  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;
	  margin-top:38rpx;
	}
	.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:50rpx;
	}
	.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:30rpx;
	  height:30rpx;
	  border-radius: 50%;
	  position: absolute;
	  top:8rpx;
	  left: -40rpx;
	}
	.radio image,.right1 image{
	  width:100%;
	  height:100%;
	  display: block;
	}
	.right1{
	  width:30rpx;
	  height:30rpx;
	  border-radius: 50%;
	  position: absolute;
	  top:8rpx;
	  left: -40rpx;
	}
	.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>