third.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <view>
  3. <uni-forms class='inform' ref="thirdform" :rules="thirdrules" :value="datainfo">
  4. <view class="info_tit">首谈信息</view>
  5. <uni-forms-item name="name" style='margin-bottom: 0;'>
  6. <view class="flexc infolist">
  7. <view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>首谈人姓名</view>
  8. <input placeholder="请输入首谈人姓名" v-model="datainfo.name" class="f16 c34 flex1 txr"/>
  9. </view>
  10. </uni-forms-item>
  11. <uni-forms-item name="zw" style='margin-bottom: 0;'>
  12. <view class="flexc infolist">
  13. <view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>首谈人职务</view>
  14. <input placeholder="请输入首谈人职务" v-model="datainfo.zw" class="f16 c34 flex1 txr"/>
  15. </view>
  16. </uni-forms-item>
  17. <uni-forms-item name="phone" style='margin-bottom: 0;'>
  18. <view class="flexc infolist">
  19. <view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>首谈人联系方式</view>
  20. <input placeholder="请输入首谈人联系方式" v-model="datainfo.phone" class="f16 c34 flex1 txr"/>
  21. </view>
  22. </uni-forms-item>
  23. <uni-forms-item name="strq" style='margin-bottom: 0;'>
  24. <view class="flexc infolist">
  25. <view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>首谈日期</view>
  26. <picker mode="date" :value="datainfo.strq" class="infolist_a" @change='bindDateChange'>
  27. <view :class="datainfo.strq?'':'f16 co80'">{{datainfo.strq||"请选择首谈日期"}}</view>
  28. </picker>
  29. </view>
  30. </uni-forms-item>
  31. <view class="border"></view>
  32. <uni-forms-item name="dqjz" style='margin-bottom: 0;'>
  33. <view class="flexc infolist">
  34. <view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>当前进展</view>
  35. <picker range-key='label' :value="cyindex" :range="cylist" class="infolist_a" @change='bindDateChangeb'>
  36. <view :class="datainfo.dqjz?'':'f16 co80'">{{datainfo.dqjz||"请输入当前进展"}}</view>
  37. </picker>
  38. </view>
  39. </uni-forms-item>
  40. <uni-forms-item name="fjName" style='margin-bottom: 0;'>
  41. <view class="flexc infolist">
  42. <view class="f16 fw c34 flex0 pr pl12">附件</view>
  43. <view class="infolist_a co28">上传附件</view>
  44. </view>
  45. </uni-forms-item>
  46. <view class=" cldelistbf" >
  47. <view class="flext f15 c6">
  48. <view class="imgl"><image :src="wimg" ></image></view>
  49. <view>附件名称fjName</view>
  50. </view>
  51. <view class="flexc f15 co28 flex0" @click="getDown(ite.path,ite.fjName)">
  52. <image :src="downimg" class="imgr"></image>预览
  53. </view>
  54. </view>
  55. <view class="infolist_b"><text>*</text>请上传大小不超过<text>100MB</text>格式为<text>doc/xls/ppt/txt/pdf/zip/rar/word</text>的文件</view>
  56. </uni-forms>
  57. <view class="infobtn flexcc cf f16 f500" @click="getNext">提交</view>
  58. </view>
  59. </template>
  60. <script>
  61. export default{
  62. data(){
  63. return{
  64. datainfo:{
  65. name:'',
  66. zw:'',
  67. phone:'',
  68. strq:'',
  69. dqjz:'',
  70. },
  71. tanfalg:false,
  72. addimg:require("@/static/images/mine/add.png"),
  73. delimg:require("@/static/images/mine/del.png"),
  74. checknimg:require("@/static/images/mine/jnicon.png"),
  75. gcheckimg:require("@/static/images/mine/jicon.png"),
  76. closeimg:require('@/static/images/close.png'),
  77. wimg:require('@/static/images/index/wicon.png'),
  78. downimg:require('@/static/images/index/down.png'),
  79. thirdrules: {
  80. name: {rules: [{required: true,errorMessage: '请输入首谈人姓名'}]},
  81. zw: {rules: [{required: true,errorMessage: '请输入首谈人职务',}]},
  82. phone: {rules: [{required: true,errorMessage: '请输入首谈人联系方式' } ]},
  83. strq: {rules: [{required: true,errorMessage: '请选择首谈日期'} ]},
  84. dqjz: {rules: [{required: true,errorMessage: '请输入当前进展'} ]},
  85. },
  86. lhindex:0,
  87. lhlist:[{label:'是',id:'Y'},{label:'否',id:'N'},],//领航
  88. cyindex:0,
  89. cylist:[{label:'是',id:'Y'},{label:'否',id:'N'}],
  90. map:{text:'label',value:'id'},
  91. qybglist:[{label:'500强企业',id:1},{label:'上市部门',id:2},{label:'行业100强',id:3},{label:'头部企业',id:4}]
  92. }
  93. },
  94. mounted() {
  95. },
  96. methods:{
  97. // 领航
  98. bindDateChangea(e) {
  99. var val=e.detail.value;
  100. this.datainfo.sfwlhxxxm=this.lhlist[val].label
  101. },
  102. // 产业类型
  103. bindDateChangeb(e) {
  104. var val=e.detail.value;
  105. this.datainfo.sfwlhxxxm=this.lhlist[val].label
  106. },
  107. bindDateChangec(e) {
  108. // var val=e.detail.value;
  109. // this.datainfo.sfwlhxxxm=this.lhlist[val].label
  110. },
  111. bindDateChanged(e) {
  112. // var val=e.detail.value;
  113. // this.datainfo.sfwlhxxxm=this.lhlist[val].label
  114. },
  115. // 多选
  116. getMoreFn(idx){
  117. this.tanfalg=true
  118. },
  119. getClose(){
  120. this.tanfalg=false
  121. },
  122. getAdd(){
  123. this.tanfalg=true;
  124. },
  125. getNext(){
  126. this.$refs.form.validate().then(res => {
  127. })
  128. }
  129. }
  130. }
  131. </script>
  132. <style lang="scss" scoped>
  133. .inform{padding-top: 30rpx; padding-bottom: 160rpx;}
  134. .infolist{padding: 30rpx 32rpx 30rpx 24rpx;position: relative;
  135. .cir{position: absolute;font-size: 36rpx;font-weight: bold;color: #FE5706;left: 0rpx;}
  136. .delimg{width: 30rpx;height:30rpx;margin-left: 8rpx;}
  137. }
  138. .infobtn{width: 100%;height: 88rpx;background: #FA5F03;line-height: 88rpx;position: fixed;left: 0;right: 0;bottom: 0;z-index: 3;}
  139. .input_ye image{width: 34rpx;height: 18rpx;}
  140. .info_tit{font-size: 32rpx;color: #FE5706;padding: 30rpx 26rpx;font-weight: bold;}
  141. .infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}
  142. .inform /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
  143. </style>