<template>
<view id="addSupplierInfo">
<global-header :imgSrcLeft="‘/static/nav/back.png‘" :title="‘新增供应商‘" />
<view class="body">
<!-- 未做弹窗 -->
<view class="cont">
<view class="cont_row" @click="supplier(1)">
供应商编号
<text id="bianHao">
必填
<image src="../../../static/onlinePurchase/online17.png" mode=""></image>
</text>
</view>
<view class="cont_row" @click="supplier(2)">
西文名称
<text id="xiwenmingcheng">
必填
<image src="../../../static/onlinePurchase/online17.png" mode=""></image>
</text>
</view>
<view class="cont_row" @click="supplier(3)">
中文名称
<text id="Chinesename">
非必填
<image src="../../../static/onlinePurchase/online17.png" mode=""></image>
</text>
</view>
<view class="cont_row" @click="supplier(4)">
供应商类型
<text id="suppliertype">
Normal
<image src="../../../static/onlinePurchase/online17.png" mode=""></image>
</text>
</view>
<view class="cont_row" @click="supplier(5)">
电话
<text id="phone">
非必填
<image src="../../../static/onlinePurchase/online17.png" mode=""></image>
</text>
</view>
<view class="cont_row" @click="supplier(6)">
E-mail
<text id="email">
非必填
<image src="../../../static/onlinePurchase/online17.png" mode=""></image>
</text>
</view>
</view>
<view class="btn">
保存
</view>
</view>
<!-- 弹窗 -->
<!-- 弹窗1 -->
<view :hidden="userFeedbackHidden" class="popup_content">
<view class="popup_title">开通会员授权</view>
<view class="xin">
</view>
<view class="popup_textarea_item">
<input class="popup_textarea" placeholder=‘请输入网店名称‘ v-model="feedbackContent">
</input>
<view class="view_button" >
<button class="popup_button" @click="cancel">取消</button>
<button class="popup_button popup_button2" @click="nextstep">确定</button>
</view>
</view>
</view>
<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()">hrthsrt</view>
</view>
</template>
<script>
export default{
data(){
return{
// 获取用户输入
feedbackContent:‘‘,
userFeedbackHidden: true, // 默认隐藏
noMsg: false,
num:‘‘
}
},
methods:{
// 取消
cancel(){
this.userFeedbackHidden=true
},
// 供应商弹窗
supplier(id){
this.num=id
this.userFeedbackHidden=false
},
// 确定
nextstep(){
this.userFeedbackHidden=true
var supplierNo = null
var spanishName=null
var Chinesename=null
var classId=null
var telephone=null
var email=null
// var spanishName=null
if(this.num===1){
// 供应商编号
let supplierNo=this.feedbackContent
supplierNo = document.getElementById(‘bianHao‘).innerHTML = supplierNo
this.feedbackContent=‘‘
}else if(this.num===2){
//西文名称
let spanishName=this.feedbackContent
spanishName = document.getElementById(‘xiwenmingcheng‘).innerHTML = spanishName
this.feedbackContent=‘‘
}else if(this.num===3){
//中文名称
let Chinesename=this.feedbackContent
Chinesename = document.getElementById(‘Chinesename‘).innerHTML = Chinesename
this.feedbackContent=‘‘
}else if(this.num===4){
//供应商类型
let classId=this.feedbackContent
classId = document.getElementById(‘suppliertype‘).innerHTML = classId
this.feedbackContent=‘‘
}else if(this.num===5){
// 电话
let telephone=this.feedbackContent
telephone = document.getElementById(‘phone‘).innerHTML = telephone
this.feedbackContent=‘‘
}else if(this.num==6){
//E-mail
let email=this.feedbackContent
email = document.getElementById(‘email‘).innerHTML = email
this.feedbackContent=‘‘
}
// this.request({
// url:‘/admin/appSupplier/add‘,
// methods:‘post‘,
// dataType:"json",
// data : {
// "supplierNo": bianHao,
// },
// success: (res) => {
// alert("请求成功")
// }
// })
}
}
}
</script>
<style lang="less" scoped>
#addSupplierInfo{
.body{
width: 100%;
height: auto;
.cont{
width: 100%;
height: auto;
background-color: #FFFFFF;
padding: 0 24upx;
.cont_row{
width: 100%;
height: 98upx;
border-bottom: 1px solid #e6e6e6;
font-size: 30upx;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500;
text-align: left;
color: #333333;
line-height: 98upx;
text{
text-align: right;
color: #999999;
float: right;
image{
width: 32upx;
height: 32upx;
float: right;
margin-left: 10upx;
margin-top: 32upx;
}
}
}
}
.btn{
width: 654upx;
height: 88upx;
opacity: 1;
background: #c6c6c6;
margin: 0 auto;
margin-top: 348upx;
font-size: 36upx;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500;
text-align: center;
color: #ffffff;
letter-spacing: 2px;
line-height: 88upx;
}
}
}
// 弹窗
#settings{
.settings_c{
padding-top: 48upx;
h1{
font-size: 36upx;
font-weight: 500;
color: #333333;
letter-spacing: 2px;
}
p{
font-size: 26upx;
font-weight: 500;
color: #333333;
letter-spacing: 1px;
span{
color: #D81E06;
}
}
.btn_open{
width: 654upx;
height: 88upx;
background: #1081c7;
font-size: 36upx;
font-weight: 500;
text-align: center;
color: #ffffff;
letter-spacing: 2px;
line-height: 88upx;
margin: 350upx auto;
}
}
}
.popup_overlay {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=88);
}
.popup_content {
position: fixed;
top: 50%;
left: 50%;
width: 654upx;
height: 500upx;
margin-left: -325upx;
margin-top: -270upx;
border: 10px solid white;
background-color: white;
z-index: 1002;
overflow: auto;
border-radius: 20upx;
}
.popup_title {
padding-top: 15upx;
width: 95%;
text-align: center;
font-size: 32upx;
}
.popup_textarea_item {
// padding-top: 55upx;
margin-top: 92upx;
height: 240upx;
width: 100%;
// background-color: #F1F1F1;
margin-top: 30upx;
// margin-left: 20upx;
padding: 0 20upx;
}
.popup_textarea {
width:100%;
height: 76upx;
font-size: 26upx;
padding: 0 20px;
margin-top: 72upx;
border: 1upx solid #110605;
}
.popup_button {
width: 250upx;
float: left;
// margin-left: 50upx;
color: white;
background-color: #4399FC;
border-radius: 20upx;
}
.popup_button2{
// margin-left: 80upx;
float: right;
}
// 单选
.checkbox{
font-size: 20upx;
color: #8a8a8a;
}
.uni-padding-wrap{
margin-top: 76upx;
}
// 下一步
.view_button{
margin-top:80upx;
// border: 1px solid #4CD964;
}
.view_button:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.view_button{
width:100%;
// border: 1px solid #4CD964;
}
.xin{
border-bottom: 1px solid #a4acb0;
margin-top: 60upx;
}
</style>
原文：https://www.cnblogs.com/xkyy/p/14662135.html