becomeANetStar.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  1. <template>
  2. <view class="net-star">
  3. <navbar ref="navbar" :config="config" backColor="#666"></navbar>
  4. <view class="msg">
  5. 所属平台信息
  6. </view>
  7. <view class="top">
  8. <view class="top-platform">
  9. <view class="name">
  10. 所属平台
  11. </view>
  12. <picker class="choice" @change="bindPickerChange" :value="index" :range="platform" range-key="dvalue">
  13. <view class="uni-input" v-if="index==-1" :style="msgList.platform?'color:#000000':'#D9D9D9'">{{msgList.platform?msgList.platform.platform_value:"请选择"}}<text class="iconfont">&#xe6c7;</text></view>
  14. <view class="uni-input" v-else style="color: #000000;">
  15. {{platform[index].dvalue}}<text
  16. class="iconfont">&#xe6c7;</text></view>
  17. </picker>
  18. </view>
  19. <view class="top-platform">
  20. <view class="name">
  21. 粉丝量级
  22. </view>
  23. <picker class="choice" @change="onFans" :value="indexTwo" :range="number" range-key="dvalue">
  24. <view class="uni-input" v-if="indexTwo==-1" :style="msgList.platform?'color:#000000':'#D9D9D9'">
  25. {{msgList.fanweight?msgList.fanweight.fanweight_value:"请选择"}}<text
  26. class="iconfont">&#xe6c7;</text></view>
  27. <view class="uni-input" v-else style="color: #000000;">
  28. {{number[indexTwo].dvalue}}<text class="iconfont">&#xe6c7;</text>
  29. </view>
  30. </picker>
  31. </view>
  32. <view class="phone">
  33. <view class="name">
  34. <view class="item">
  35. 该平台注册手机号码
  36. </view>
  37. <input maxlength="11" placeholder-style="font-size:26rpx; color:#d9d9d9;"
  38. :value="msgList.platform_phone" type="number" @input="onPhone" style="text-align: right;"
  39. placeholder="请输入手机号" />
  40. </view>
  41. <view class="bottom">
  42. 请保证手机号码准确,审核人员可能通过此手机号与您联系
  43. </view>
  44. </view>
  45. <view class="top-platform">
  46. <view class="name">
  47. 内容方向
  48. </view>
  49. <picker class="choice" @change="onContentOrientation" :value="item" :range="direction"
  50. range-key="dvalue">
  51. <view class="uni-input" v-if="item==-1" :style="msgList.platform?'color:#000000':'#D9D9D9'">
  52. {{msgList.content_direction?msgList.content_direction.content_direction_value:"请选择"}}<text
  53. class="iconfont">&#xe6c7;</text>
  54. </view>
  55. <view class="uni-input" style="color: #000000;" v-else>
  56. {{direction[item].dvalue}}<text class="iconfont">&#xe6c7;</text>
  57. </view>
  58. </picker>
  59. </view>
  60. </view>
  61. <view class="identity">
  62. 身份认证
  63. </view>
  64. <view class="middle-name">
  65. <view class="left">
  66. 姓名
  67. </view>
  68. <input type="text" :value="msgList.real_name" maxlength="5" @input="onName" style="text-align: right;"
  69. placeholder="请输入" placeholder-style="font-size:28rpx;color:#d9d9d9;" />
  70. </view>
  71. <view class="middle-name">
  72. <view class="left">
  73. 手机号
  74. </view>
  75. <input type="text" @input="onTwoPhone" maxlength="11" disabled="disabled" :value="myMsg.mobile"
  76. style="text-align: right; " />
  77. </view>
  78. <view class="middle-name">
  79. <view class="left">
  80. 身份证号
  81. </view>
  82. <input type="text" :value="msgList.card" @input="onIdentity" maxlength="18" style="text-align: right;"
  83. placeholder="请输入" placeholder-style="font-size:28rpx;color:#d9d9d9;" />
  84. </view>
  85. <view class="fans-number">
  86. <view class="number-name">
  87. 身份证正面
  88. </view>
  89. <view class="number-image">
  90. <uploadImg imgCount="1" :imgArr="card1" @result="resultUrl1"></uploadImg>
  91. </view>
  92. </view>
  93. <view class="fans-number">
  94. <view class="number-name">
  95. 身份证反面
  96. </view>
  97. <view class="number-image">
  98. <uploadImg imgCount="1" :imgArr="card2" @result="resultUrl2"></uploadImg>
  99. </view>
  100. </view>
  101. <view class="fans-number">
  102. <view class="number-name">
  103. 粉丝数量截图
  104. </view>
  105. <view class="number-image">
  106. <uploadImg imgCount="1" :imgArr="business_license_images" @result="resultUrlthree"></uploadImg>
  107. </view>
  108. <view class="remind">
  109. 粉丝数量需与所选区间一致
  110. </view>
  111. </view>
  112. <view class="footer">
  113. <view class="item">
  114. 申请将在1-3个工作日内处理完成
  115. </view>
  116. <button @click="goToToExamine">立即提交</button>
  117. </view>
  118. <view class="box">
  119. </view>
  120. </view>
  121. </template>
  122. <script>
  123. import uploadImg from "../../../components/uploadImg/imgUpload.vue"
  124. export default {
  125. components: {
  126. uploadImg
  127. },
  128. data() {
  129. return {
  130. config: {
  131. back: true, //false是tolbar页面 是则不写
  132. font: "back",
  133. title: '申请网红',
  134. color: '#1A1A1A',
  135. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  136. backgroundColor: [1, '#fff'],
  137. statusBarFontColor: '#1A1A1A',
  138. backPage: "../../index/personal",
  139. },
  140. platform: [{
  141. id: 1,
  142. ext: null,
  143. dkey: 1,
  144. dtype: 1,
  145. dvalue: "抖音"
  146. }
  147. ], //平台信息
  148. number: [{
  149. id: 4,
  150. ext: null,
  151. dkey: 1,
  152. dtype: 2,
  153. dvalue: "<5000"
  154. }, ],
  155. direction: [{
  156. id: 10,
  157. ext: null,
  158. dkey: 1,
  159. dtype: 3,
  160. dvalue: "美食"
  161. }], //内容方向
  162. item: -1, //内容方向
  163. index: -1, //所属平台
  164. indexTwo: -1, //粉丝量级
  165. platformItem: {}, //选中的平台信息
  166. fanweightItem: {}, //选中的粉丝信息
  167. directionItem: {}, //选中的内容方向
  168. phone: null, //获取的手机号
  169. name: null, //获取用户的名字
  170. twoPhone: null, //获取用户的第二个手机号
  171. identity: null, //获取用户的身份证信息
  172. identty_just: [], //身份证正面
  173. upimgtype: 'other',
  174. card1: [], //传给后台 身份证正面
  175. card1Sre: "", //字符串
  176. card2: [], //传给后台 身份证反面
  177. card2Sre: "", //反面字符串
  178. business_license_images: [], //粉丝截图
  179. businessSre: "", //粉丝字符串
  180. myMsg: {},
  181. msgList: {} //申请失败之后返回的数据
  182. }
  183. },
  184. onLoad() {
  185. this.fansList()
  186. this.myMsg = uni.getStorageSync("personal")
  187. this.getMsg()
  188. // this.applyMsg()
  189. },
  190. methods: {
  191. //失败后返回的消息
  192. getMsg() {
  193. this.$http.get("/celebrity/info").then(res => {
  194. if (res && res.code == 200) {
  195. this.msgList = res.data
  196. //所属平台
  197. this.platformItem.platform_key = this.msgList.platform.platform_key
  198. this.platformItem.platform_value = this.msgList.platform.platform_value
  199. //粉丝量级
  200. this.fanweightItem.fanweight_key = this.msgList.fanweight.fanweight_key
  201. this.fanweightItem.fanweight_value = this.msgList.fanweight.fanweight_value
  202. //内容方向
  203. this.directionItem.content_direction_key = this.msgList.content_direction.content_direction_key
  204. this.directionItem.content_direction_value = this.msgList.content_direction.content_direction_value
  205. //姓名
  206. this.name = this.msgList.real_name
  207. //手机
  208. this.phone = res.data.platform_phone
  209. //身份证号
  210. this.identity = res.data.card
  211. this.card1 = res.data.card_front_path.split(";")
  212. this.card1Sre = res.data.card_front_path
  213. this.card2 = res.data.card_back_path.split(";")
  214. this.card2Sre = res.data.card_back_path
  215. this.business_license_images = res.data.fans_file_path.split(",")
  216. this.businessSre = res.data.fans_file_path
  217. console.log('this.msgList',this.msgList)
  218. }
  219. })
  220. },
  221. //获取申请信息
  222. // applyMsg(){
  223. // this.$http.get("/celebrity/info").then(res=>{
  224. // if(res&&res.code==200){
  225. // console.log(res)
  226. // if(res.data!==null){
  227. // uni.navigateTo({
  228. // url:"./toExamine"
  229. // })
  230. // }
  231. // }
  232. // })
  233. // },
  234. //提交最后的信息
  235. goToToExamine() {
  236. if (Object.keys(this.platformItem).length === 0) {
  237. this.$mUtil.toast("请选择所属的平台")
  238. return false
  239. }
  240. if (Object.keys(this.fanweightItem).length === 0) {
  241. this.$mUtil.toast("请选择您的粉丝量级")
  242. return false
  243. }
  244. if (this.phone == null) {
  245. this.$mUtil.toast("请输入您平台注册的手机号")
  246. return false
  247. }
  248. if (!(this.phone.match(this.$mConfig.telRegex))) {
  249. this.$mUtil.toast('请输入正确的手机号')
  250. return false
  251. }
  252. if (Object.keys(this.directionItem).length === 0) {
  253. this.$mUtil.toast('请选择您的内容方向')
  254. return false
  255. }
  256. if (this.name == null) {
  257. this.$mUtil.toast('请输入您的姓名')
  258. return false
  259. }
  260. // if(this.twoPhone==null){
  261. // this.$mUtil.toast('请输入您现有的手机号')
  262. // return false
  263. // }
  264. // if(!(this.twoPhone.match(this.$mConfig.telRegex))){
  265. // this.$mUtil.toast("请输入正确的现在的手机号")
  266. // return false
  267. // }
  268. if (this.card1 == '') {
  269. this.$mUtil.toast("请上传身份证照片")
  270. return false
  271. }
  272. if (this.card2 == "") {
  273. this.$mUtil.toast("请上传身份证背面照片")
  274. return false
  275. }
  276. if (this.identity == null) {
  277. this.$mUtil.toast("请输入身份证号")
  278. return false
  279. }
  280. if (!(this.identity.match(this.$mConfig.telIdentity))) {
  281. console.log(this.identity)
  282. this.$mUtil.toast("请输入正确的身份证号")
  283. return false
  284. }
  285. // if(this.identty_just==""){
  286. // this.$mUtil.toast('请上传法人身份证(正反面)')
  287. // return false
  288. // }
  289. // if(this.identty_images.length < 2){
  290. // this.$mUtil.toast('请上传法人身份证(正反面)')
  291. // return false
  292. // }
  293. if (this.business_license_images == "") {
  294. this.$mUtil.toast("请上传粉丝数量的截图")
  295. return false
  296. }
  297. this.$http.put("/celebrity/save", {
  298. real_name: this.name,
  299. card: this.identity,
  300. platform_phone: this.phone,
  301. platform: this.platformItem,
  302. fanweight: this.fanweightItem,
  303. content_direction: this.directionItem,
  304. card_front_path: this.card1Sre,
  305. card_back_path: this.card2Sre,
  306. fans_file_path: this.businessSre
  307. }).then(res => {
  308. if (res && res.code == 200) {
  309. console.log(res, "6666666666666666666")
  310. this.$mUtil.toast("申请成功")
  311. setTimeout(() => {
  312. uni.reLaunch({
  313. url: "./toExamine"
  314. })
  315. }, 1000)
  316. }
  317. })
  318. },
  319. //上传粉丝
  320. resultUrlthree(e) {
  321. this.business_license_images = e
  322. this.businessSre = this.business_license_images[0]
  323. console.log(this.businessSre)
  324. },
  325. //上传身份证
  326. resultUrl1(e) {
  327. this.card1 = e
  328. console.log(this.card1)
  329. this.card1Sre = this.card1[0]
  330. console.log(this.card1Sre)
  331. },
  332. resultUrl2(e) {
  333. this.card2 = e
  334. this.card2Sre = this.card2[0]
  335. console.log(this.card2Sre)
  336. },
  337. //获取身份证的信息
  338. onIdentity(e) {
  339. this.identity = e.detail.value
  340. },
  341. //获取身份认证里面的手机号
  342. onTwoPhone(e) {
  343. this.twoPhone = e.detail.value
  344. },
  345. //获取用户的姓名
  346. onName(e) {
  347. this.name = e.detail.value
  348. },
  349. //获取平台注册的手机号码
  350. onPhone(e) {
  351. this.phone = e.detail.value
  352. },
  353. //获取字典里所有的字节
  354. fansList() {
  355. this.$http.get("/sys/dict/select").then(res => {
  356. if (res && res.code == 200) {
  357. // 前端调一个接口 拉取所有的字典表 根据字典值筛选需要的字典数据
  358. this.direction = res.list.filter(val => val.dtype == 3)
  359. this.number = res.list.filter(val => val.dtype == 2)
  360. this.platform = res.list.filter(val => val.dtype == 1)
  361. }
  362. })
  363. },
  364. bindPickerChange(e) { //取到平台内容的值
  365. this.index = e.detail.value
  366. this.platformItem.platform_key = this.platform[this.index].dkey
  367. this.platformItem.platform_value = this.platform[this.index].dvalue
  368. console.log(this.platformItem.platform_value)
  369. },
  370. //获取了粉丝的信息
  371. onFans(e) {
  372. this.indexTwo = e.detail.value
  373. this.fanweightItem.fanweight_key = this.number[this.indexTwo].dkey
  374. this.fanweightItem.fanweight_value = this.number[this.indexTwo].dvalue
  375. console.log(this.fanweightItem)
  376. },
  377. //获取了内容的方向的信息
  378. onContentOrientation(e) {
  379. this.item = e.detail.value
  380. this.directionItem.content_direction_key = this.direction[this.item].dkey
  381. this.directionItem.content_direction_value = this.direction[this.item].dvalue
  382. console.log(this.directionItem)
  383. },
  384. }
  385. }
  386. </script>
  387. <style scoped lang="scss">
  388. .box{
  389. height: 30rpx;
  390. }
  391. .platform-item {
  392. background-color: #ffffff;
  393. height: 500rpx;
  394. }
  395. .footer {
  396. background-color: #F5F5F5;
  397. .item {
  398. text-align: center;
  399. font-size: 28rpx;
  400. margin-top: 6rpx;
  401. color: #D9D9D9;
  402. }
  403. button {
  404. margin: 0 30rpx;
  405. margin-top: 60rpx;
  406. color: #fff;
  407. font-size: 30rpx;
  408. background-color: #0B844A;
  409. border-radius: 43rpx;
  410. margin-bottom: 10rpx;
  411. }
  412. }
  413. .net-star {
  414. background: #F5F5F5;
  415. }
  416. .fans-number {
  417. padding: 48rpx 30rpx 16rpx 30rpx;
  418. font-size: 24rpx;
  419. background-color: #ffffff;
  420. .number-name {
  421. font-size: 28rpx;
  422. margin-bottom: 16rpx;
  423. }
  424. .number-image {
  425. image {
  426. width: 288rpx;
  427. height: 170rpx;
  428. }
  429. }
  430. .remind {
  431. margin-top: 18rpx;
  432. font-size: 24rpx;
  433. color: #D9D9D9;
  434. }
  435. }
  436. .upload-image {
  437. margin-top: 28rpx;
  438. image {
  439. width: 144rpx;
  440. height: 86rpx;
  441. }
  442. }
  443. .positive {
  444. background-color: #ffffff;
  445. padding: 20rpx 30rpx 0 30rpx;
  446. .positive-name {
  447. font-size: 24rpx;
  448. color: rgba(51, 51, 51, 100);
  449. font-weight: 400;
  450. }
  451. }
  452. .middle-name {
  453. background-color: #ffffff;
  454. display: flex;
  455. padding: 24rpx 30rpx 32rpx 30rpx;
  456. align-items: center;
  457. border-bottom: 1rpx solid #E6E6E6;
  458. .left {
  459. flex: 1;
  460. font-size: 26rpx;
  461. }
  462. }
  463. .identity {
  464. padding: 28rpx 30rpx 20rpx 30rpx;
  465. background-color: #F5F5F5;
  466. font-size: 30rpx;
  467. }
  468. .phone {
  469. padding: 24rpx 30rpx;
  470. border-bottom: 1rpx solid #E6E6E6;
  471. .name {
  472. display: flex;
  473. font-size: 26rpx;
  474. .item {
  475. flex: 1;
  476. }
  477. }
  478. .bottom {
  479. font-size: 24rpx;
  480. color: #D9D9D9;
  481. }
  482. }
  483. .top {
  484. background-color: #ffffff;
  485. .top-platform {
  486. display: flex;
  487. justify-content: space-between;
  488. padding: 24rpx 30rpx;
  489. border-bottom: 1rpx solid #E6E6E6;
  490. .name {
  491. flex: 1;
  492. color: #1A1A1A;
  493. font-size: 26rpx;
  494. font-weight: 500;
  495. }
  496. .choice {
  497. font-size: 24rpx;
  498. color: #D9D9D9;
  499. .iconfont {
  500. margin-left: 4rpx;
  501. color: #666666;
  502. }
  503. }
  504. }
  505. }
  506. /deep/ .hx-navbar__icon {
  507. span {
  508. color: #333333;
  509. }
  510. }
  511. .msg {
  512. font-size: 30rpx;
  513. color: #060606;
  514. font-weight: 400;
  515. padding: 22rpx 30rpx 10rpx 14rpx;
  516. background-color: #F5F5F5;
  517. }
  518. </style>