applystudio.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. <template>
  2. <view>
  3. <public-module></public-module>
  4. <view class="box" :style="{background:`url(${indexBackgroundImage})`,backgroundSize: 'contain',backgroundRepeat: 'no-repeat'}">
  5. <view class="box-con">
  6. <uni-forms :value="personData" ref="personData" validate-trigger="bind"
  7. err-show-type="toast" label-width="100" :rules="rules" >
  8. <uni-forms-item label="姓名" name="name" required >
  9. <input class="uni-input-input textColor" placeholder="输入姓名" v-model="personData.name"
  10. placeholder-style="font-size:28upx" />
  11. </uni-forms-item>
  12. <uni-forms-item label="手机号" required name="mobile">
  13. <input class="uni-input-input textColor" maxlength="11" placeholder="输入手机号" v-model="personData.mobile"
  14. placeholder-style="font-size:28upx" />
  15. </uni-forms-item>
  16. <uni-forms-item label="证件号" required name="identity">
  17. <input class="uni-input-input textColor" placeholder="输入证件号" v-model="personData.identity"
  18. placeholder-style="font-size:28upx" />
  19. </uni-forms-item>
  20. <uni-forms-item label="密码" required name="password">
  21. <input class="uni-input-input textColor" placeholder="输入密码" v-model="personData.password"
  22. placeholder-style="font-size:28upx" />
  23. </uni-forms-item>
  24. <uni-forms-item label="地址" required name="address">
  25. <input class="uni-input-input textColor" placeholder="输入地址" v-model="personData.address"
  26. placeholder-style="font-size:28upx" />
  27. </uni-forms-item>
  28. </uni-forms>
  29. </view>
  30. </view>
  31. <!-- <view class="box-con" style="margin-top:10px">
  32. <uni-forms :rules="carRules" :value="personData" ref="personData" validate-trigger="bind"
  33. err-show-type="toast" label-width="100">
  34. <uni-forms-item label="开户行">
  35. <input class="uni-input-input textColor" placeholder="输入开户行" v-model="personData.bankName"
  36. placeholder-style="font-size:28upx" />
  37. </uni-forms-item>
  38. <uni-forms-item label="开户账号">
  39. <input class="uni-input-input textColor" placeholder="输入开户账号" v-model="personData.accountno"
  40. placeholder-style="font-size:28upx" />
  41. </uni-forms-item>
  42. <view >
  43. <view>银行卡照片</view>
  44. <view class="dis j-c" >
  45. <image style="height: 95px;width: 150px;padding: 10px 0;" :src=" userfrontImg?userfrontImg:'/static/image/my/yinhangka.png'" mode=""
  46. @click="userfrontChange"></image>
  47. </view>
  48. </view>
  49. </uni-forms>
  50. </view> -->
  51. <view class="userBox" style="margin-top:10px">
  52. <text>身份证件照</text>
  53. <view class="dis j-s" style="margin: 10px 0;">
  54. <view class="imgOcr-border">
  55. <image :src=" userfrontImg?userfrontImg:'/static/image/my/shenfenzz.png'" mode=""
  56. @click="userfrontChange"></image>
  57. <view>人像面</view>
  58. </view>
  59. <view class="imgOcr-border">
  60. <image :src="userbackImg?userbackImg:'/static/image/my/shenzf.png'" mode=""
  61. @click="userbackChange"></image>
  62. <view>国徽面</view>
  63. </view>
  64. </view>
  65. </view>
  66. <!-- <view class="userBox">
  67. <uni-forms :rules="carRules" :value="personData" ref="personData" validate-trigger="bind"
  68. err-show-type="toast" label-width="100">
  69. <uni-forms-item label="选择来源" required name="deptSourceName">
  70. <u-input v-model="personData.deptSourceName" type="select" :select-open="energyTypeShow"
  71. @click="energyTypeShow = true" :custom-style="{textAlign:'right'}"
  72. placeholder-style="color:#808080" placeholder="请选择来源" />
  73. <u-select mode="single-column" :list="energyTypeoptions" v-model="energyTypeShow"
  74. label-name="lable" value-name="value"
  75. @confirm="dictionaryConfirm($event)"></u-select>
  76. </uni-forms-item>
  77. <uni-forms-item label="机构类型" required name="deptName">
  78. <u-input v-model="personData.deptName" type="select" :select-open="deptShow"
  79. @click="deptShow = true" :custom-style="{textAlign:'right'}"
  80. placeholder-style="color:#808080" placeholder="请选择机构类型" />
  81. <u-select mode="single-column" :list="deptoptions" v-model="deptShow"
  82. label-name="lable" value-name="value"
  83. @confirm="deptConfirm($event)"></u-select>
  84. </uni-forms-item>
  85. </uni-forms>
  86. </view> -->
  87. <!-- <view class="userBox">
  88. <u-checkbox v-model="checked"></u-checkbox>
  89. <text>同时创建我的团队</text>
  90. </view> -->
  91. <view class="submit" @click="submit('personData')">
  92. 提交
  93. </view>
  94. </view>
  95. </template>
  96. <script>
  97. // import {
  98. // mapState,
  99. // mapMutations
  100. // } from "vuex"
  101. // import store from '@/store';
  102. import indexBackgroundImage from "@/static/shenqing.png"
  103. export default {
  104. // computed: {
  105. // ...mapState(['userInfo' ]),
  106. // },
  107. data(){
  108. return {
  109. indexBackgroundImage:indexBackgroundImage,
  110. rules: {
  111. name:{
  112. rules: [{
  113. required: true,
  114. errorMessage: '姓名不能为空'
  115. }]
  116. },
  117. mobile:{
  118. rules: [{
  119. required: true,
  120. errorMessage: '请输入手机号',
  121. },
  122. {
  123. pattern: /^1[3-9]\d{9}$/,
  124. errorMessage: '请输入正确的手机号',
  125. }]
  126. },
  127. identity:{
  128. rules: [{
  129. required: true,
  130. errorMessage: '请输入身份证号',
  131. },
  132. {
  133. pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
  134. errorMessage: '请输入正确的身份证号',
  135. }]
  136. },
  137. password:{
  138. rules: [{
  139. required: true,
  140. errorMessage: '请输入密码'
  141. }]
  142. },
  143. address:{
  144. rules: [{
  145. required: true,
  146. errorMessage: '请输入地址',
  147. }]
  148. },
  149. },
  150. energyTypeShow:false,
  151. deptShow:false,
  152. deptoptions:[
  153. {
  154. lable:'股份',
  155. value:'gufen'
  156. },{
  157. lable:'直营',
  158. value:'dir'
  159. },{
  160. lable:'加盟',
  161. value:'jiameng'
  162. }],
  163. energyTypeoptions:[
  164. {
  165. lable:'渠道',
  166. value:'1'
  167. },{
  168. lable:'个代',
  169. value:'2'
  170. }],
  171. checked:false,
  172. userfrontImg: "",
  173. userbackImg: "",
  174. personData:{
  175. name:'',
  176. mobile:'',
  177. identity:'',
  178. password:'',
  179. address:'',
  180. esmUserImageVo:[]
  181. },
  182. deptSource:'',
  183. userId:''
  184. }
  185. },
  186. async onLoad(e) {
  187. this.deptSource=e.deptSource?e.deptSource:''
  188. this.userId=e.userId?e.userId:''
  189. if(e.id){
  190. this.id=e.id
  191. this.$http.get('/user/' +e.id).then(res=>{
  192. if(res.code==200){
  193. this.personData={...res.data.sysUser,esmUserImageVo:[]}
  194. }
  195. else{
  196. uni.showModal({
  197. showCancel: false,
  198. title: res.msg
  199. })
  200. }
  201. })
  202. }
  203. },
  204. methods:{
  205. submit(){
  206. this.$refs.personData.validate().then(res => {
  207. if(this.id){
  208. this.$http.post('/user/updateUserInfo1/' +this.id, {
  209. esmUserImageVo: this.personData.esmUserImageVo,
  210. sysUser: this.personData,
  211. sysUserInfo:this.personData,
  212. }).then(res=>{
  213. if(res.code==200){
  214. uni.redirectTo({
  215. url: "/pages/index/result"
  216. })
  217. }
  218. else{
  219. uni.showModal({
  220. showCancel: false,
  221. title: res.msg
  222. })
  223. }
  224. })
  225. }else{
  226. this.$http.post('/user/saveUserInfoByPartner', {
  227. isPartner:"1",
  228. sysUser:{...this.personData,roleId:"22",referrerId:this.userId,type:2,deptSource:this.deptSource},
  229. esmUserImageVo:this.personData.esmUserImageVo
  230. }).then(res=>{
  231. if(res.code==200){
  232. uni.redirectTo({
  233. url: "/pages/index/result"
  234. })
  235. }
  236. else{
  237. uni.showModal({
  238. showCancel: false,
  239. title: res.msg
  240. })
  241. }
  242. })
  243. }
  244. }).catch(err => {
  245. console.log('err', err);
  246. })
  247. },
  248. // submit(){
  249. // uni.redirectTo({
  250. // url: "/pages/index/result?key="+encodeURIComponent(JSON.stringify({status:2}))
  251. // // url: "/pages/index/result?status=1&remark=111"
  252. // })
  253. // // this.$refs.personData.validate().then(res => {
  254. // this.$refs.baseForm.submit().then(res => {
  255. // this.$http.post('/user/saveUserInfo', {
  256. // isPartner:"1",
  257. // sysUser:{...this.personData,roleId:"22",referrerId:this.userInfo.sysUser.userId,type:2,deptSource:this.deptSource},
  258. // esmUserImageVo:this.personData.esmUserImageVo
  259. // }).then(res=>{
  260. // if(res.code==200){
  261. // uni.redirectTo({
  262. // url: "/pages/index/result?key="+encodeURIComponent(JSON.stringify({status:1}))
  263. // })
  264. // }
  265. // else{
  266. // uni.showModal({
  267. // showCancel: false,
  268. // title: res.msg
  269. // })
  270. // // uni.showToast({
  271. // // title: res.msg
  272. // // })
  273. // }
  274. // })
  275. // // if (data.code == '200') {
  276. // // }
  277. // }).catch(err => {
  278. // console.log('err', err);
  279. // })
  280. // },
  281. dictionaryConfirm(val){
  282. this.personData.deptSourceName=val[0].label
  283. this.personData.deptSource=val[0].value
  284. },
  285. deptConfirm(val){
  286. this.personData.deptName=val[0].label
  287. this.personData.deptType=val[0].value
  288. },
  289. async userfrontChange() {
  290. // this.personData.esmUserImageVo[0]={}
  291. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  292. count: 1,
  293. sizeType: ['compressed']
  294. });
  295. let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
  296. if (!size) {
  297. this.$refs.uToast.show({
  298. title: '上传图片大小不能超过 5MB!',
  299. type: 'error',
  300. })
  301. return false
  302. }
  303. if (chooseImageRes) {
  304. this.userfrontImg = chooseImageRes.tempFilePaths[0];
  305. uni.uploadFile({
  306. url: this.$base.baseUrl + '/ins/taskImage/uploadFileByPartner',
  307. filePath: chooseImageRes.tempFilePaths[0],
  308. name: "multipartFile",
  309. formData: {
  310. 'type': 'image',
  311. },
  312. // header: {
  313. // Authorization: store.state.token,
  314. // },
  315. success: (imgRes) => {
  316. let data = JSON.parse(imgRes.data);
  317. if (data.code == '200') {
  318. this.personData.esmUserImageVo.push(
  319. {
  320. imageId: data.data.id,
  321. type: "SFZ_01",
  322. }
  323. )
  324. // this.personData.esmUserImageVo[0]={
  325. // imageId: data.data.id,
  326. // type: "SFZ_01",
  327. // }
  328. }
  329. }
  330. });
  331. }
  332. },
  333. async userbackChange() {
  334. // this.personData.esmUserImageVo[1]={}
  335. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  336. count: 1,
  337. sizeType: ['compressed']
  338. });
  339. let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
  340. if (!size) {
  341. this.$refs.uToast.show({
  342. title: '上传图片大小不能超过 5MB!',
  343. type: 'error',
  344. })
  345. return false
  346. }
  347. if (chooseImageRes) {
  348. this.userbackImg = chooseImageRes.tempFilePaths[0];
  349. uni.uploadFile({
  350. url: this.$base.baseUrl + '/ins/taskImage/uploadFileByPartner',
  351. filePath: chooseImageRes.tempFilePaths[0],
  352. name: "multipartFile",
  353. formData: {
  354. 'type': 'image',
  355. },
  356. // header: {
  357. // Authorization: store.state.token,
  358. // },
  359. success: (imgRes) => {
  360. let data = JSON.parse(imgRes.data);
  361. if (data.code == '200') {
  362. // this.personData.esmUserImageVo[1]=data.data
  363. this.personData.esmUserImageVo.push(
  364. {
  365. imageId: data.data.id,
  366. type: "SFZ_02",
  367. }
  368. )
  369. }
  370. }
  371. });
  372. }
  373. },
  374. },
  375. }
  376. </script>
  377. <style lang="scss" scoped>
  378. .box {
  379. height: 330px;
  380. width: 100%;
  381. // background-repeat: no-repeat;
  382. // background: #F9F9F9;
  383. // background: url(/static/shenqing.png) no-repeat;
  384. // background-size: contain;
  385. padding: 130px 15px 0 15px;
  386. // padding: 200px 16px 15px 16px;
  387. }
  388. .box-con{
  389. background: #FFFFFF;
  390. padding: 10px 15px;
  391. border-radius: 5px 5px 5px 5px;
  392. }
  393. .userBox{
  394. border-radius: 5px 5px 5px 5px;
  395. margin:10px 15px;
  396. padding: 10px 15px;
  397. background: #fff;
  398. font-size: 15px;
  399. color: #666666;
  400. .imgOcr-border {
  401. // position: relative;
  402. width: 48%;
  403. text-align: center;
  404. image {
  405. display: inline-block;
  406. height: 95px;
  407. width: 100%;
  408. }
  409. }
  410. }
  411. .submit{
  412. margin: 15px;
  413. text-align: center;
  414. color: #fff;
  415. height: 46px;
  416. line-height: 46px;
  417. background: linear-gradient( 133deg, #2DD9FF 0%, #2D6DFF 100%);
  418. border-radius: 31px 31px 31px 31px;
  419. }
  420. </style>