bindinfo.vue 32 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349
  1. <template>
  2. <view style="position: relative;">
  3. <!-- 胶囊 -->
  4. <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  5. <view class="home" style="padding-top: 180rpx;">
  6. <view style="margin: 0 20rpx;">
  7. <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind"
  8. err-show-type="undertext">
  9. <view class="title">
  10. <p>个人资料</p>
  11. </view>
  12. <uni-forms-item name="age" label="年龄区间">
  13. <picker @change="bindPickerChange" :value="index" :range="array"
  14. range-key="age_bracket_discribe">
  15. <view>{{ Xage }}</view>
  16. </picker>
  17. </uni-forms-item>
  18. <uni-forms-item name="skintype" label="国籍">
  19. <picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
  20. <view>{{ array1[index1].name }}</view>
  21. </picker>
  22. </uni-forms-item>
  23. <uni-forms-item name="vregion" label="探店地区">
  24. <picker class="picker" mode="multiSelector" :range="region" range-key="name"
  25. :value="regionIndex" @change="pickerChange" @columnchange="pickerColumnchange">
  26. <view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
  27. <view>{{regionStr}}</view>
  28. <text class="iconfont icon-you"></text>
  29. </view>
  30. </picker>
  31. </uni-forms-item>
  32. <uni-forms-item name="phone" required label="联系电话">
  33. <uni-easyinput type="number" maxlength="11" :inputBorder="true" v-model="formData.phone"
  34. placeholder="请输入联系电话">
  35. </uni-easyinput>
  36. </uni-forms-item>
  37. <view class="line"></view>
  38. <view class="title">
  39. <p>收货地址</p>
  40. </view>
  41. <uni-forms-item name="name" required label="收件人">
  42. <uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入收件人">
  43. </uni-easyinput>
  44. </uni-forms-item>
  45. <uni-forms-item name="tel" required label="联系电话">
  46. <uni-easyinput type="number" maxlength="11" :inputBorder="true" v-model="formData.tel"
  47. placeholder="请输入联系电话">
  48. </uni-easyinput>
  49. </uni-forms-item>
  50. <uni-forms-item name="fregion" required label="所在地区">
  51. <picker class="picker" mode="multiSelector" :range="region" range-key="name"
  52. :value="regionIndex1" @change="pickerChange1" @columnchange="pickerColumnchange1">
  53. <view class="pbox" :class="{'pbox_hover':regionStr1 != '请选择省市区'}">
  54. <view>{{regionStr1}}</view>
  55. <text class="iconfont icon-you"></text>
  56. </view>
  57. </picker>
  58. </uni-forms-item>
  59. <uni-forms-item name="detailregion" required label="详细地址">
  60. <uni-easyinput type="text" :inputBorder="true" v-model="formData.detailregion"
  61. placeholder="请输入详细地址(省/市/县/镇/)">
  62. </uni-easyinput>
  63. </uni-forms-item>
  64. <view class="setdeault">
  65. <view class="setdeault-text">设为默认收货地址</view>
  66. <switch style='zoom:.8;' @change="setDefault" />
  67. </view>
  68. <view class="line"></view>
  69. <view class="title">
  70. <p>{{platform.platform_name}}账号</p>
  71. </view>
  72. <uni-forms-item name="nickname" required label="昵称">
  73. <uni-easyinput type="text" v-model="formData.platform_nickname" placeholder="请填写账号昵称">
  74. </uni-easyinput>
  75. </uni-forms-item>
  76. <uni-forms-item name="numberfans" required label="粉丝数">
  77. <uni-easyinput type="number" v-model="formData.fans_count" placeholder="请填写粉丝数量">
  78. </uni-easyinput>
  79. </uni-forms-item>
  80. <uni-forms-item name="home_link" required label=" " label-width='10'>
  81. <uni-easyinput class="home-link" type="text" v-model="formData.home_page_url"
  82. placeholder="请填写个人主页链接">
  83. </uni-easyinput>
  84. </uni-forms-item>
  85. <view style="margin-top: 40rpx;">
  86. <uni-forms-item name="home_img" required label="主页截图">
  87. <htz-image-upload :max="1" mediaType="image" name="file" :chooseNum="1" v-model="imageData"
  88. @chooseSuccess="ceshiChooseSuccess">
  89. </htz-image-upload>
  90. </uni-forms-item>
  91. </view>
  92. </uni-forms>
  93. </view>
  94. </view>
  95. <button class="btn1" @click="submitForm('form')">保存</button>
  96. </view>
  97. </template>
  98. <script>
  99. import region from '@/components/pca-code.json';
  100. import mvBar from "@/components/mys_navBar/mysNavBar";
  101. import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
  102. import getPolicyEncode from '@/components/obs/getPolicy.js';
  103. import getSignature from '@/components/obs/GetSignature.js';
  104. export default {
  105. components: {
  106. mvBar,
  107. htzImageUpload,
  108. },
  109. data() {
  110. return {
  111. address: [],
  112. accountId: '',
  113. platform: {
  114. platform_id: '',
  115. platform_name: '',
  116. platform_icon: '',
  117. },
  118. isBind: true,
  119. imageData: [],
  120. ismodify: '',
  121. // 原数组
  122. oldRegion: region,
  123. // 处理后的数组
  124. region: [
  125. [],
  126. [],
  127. []
  128. ],
  129. // 选择省市区的下标Index 传则默认选中传递的
  130. regionIndex: [0, 0, 0],
  131. regionIndex1: [0, 0, 0],
  132. // 省市区字符串
  133. regionStr: '请选择省市区',
  134. regionStr1: '请选择省市区',
  135. formData: {
  136. age: '',
  137. nationality: '',
  138. phone: '',
  139. visitStoreRegion: '',
  140. name: '',
  141. tel: '',
  142. detailregion: '',
  143. fregion: '',
  144. setdefault: false,
  145. platform_nickname: '',
  146. fans_count: '',
  147. home_page_url: '',
  148. },
  149. index: 0,
  150. index1: 0,
  151. Xage: '请选择',
  152. Xskintype: '请选择',
  153. array: [{
  154. age_bracket_discribe: '请选择',
  155. age_aid: 0
  156. }, {
  157. age_bracket_discribe: '0~18',
  158. age_aid: 1
  159. }, {
  160. age_bracket_discribe: '18~25',
  161. age_aid: 2
  162. }, {
  163. age_bracket_discribe: '26~30',
  164. age_aid: 3
  165. }, {
  166. age_bracket_discribe: '30~40',
  167. age_aid: 4
  168. }, {
  169. age_bracket_discribe: '40+',
  170. age_aid: 5
  171. }],
  172. array1: [{
  173. name: '请选择',
  174. id: 0
  175. }, {
  176. name: '中国',
  177. id: 1
  178. }, {
  179. name: '外国',
  180. id: 2
  181. }],
  182. data: {},
  183. show: false,
  184. rules: {
  185. phone: {
  186. rules: [{
  187. required: true,
  188. errorMessage: '请输入联系电话'
  189. }, ]
  190. },
  191. detailregion: {
  192. rules: [{
  193. required: true,
  194. errorMessage: '请输入详细地址'
  195. }, ]
  196. },
  197. name: {
  198. rules: [{
  199. required: true,
  200. errorMessage: '请输入收件人'
  201. }, ]
  202. },
  203. tel: {
  204. rules: [{
  205. required: true,
  206. errorMessage: '请输入联系电话',
  207. }, ]
  208. },
  209. fregion: {
  210. rules: [{
  211. required: true,
  212. errorMessage: '请选择所在地区'
  213. }, ]
  214. },
  215. nickname: {
  216. rules: [{
  217. required: true,
  218. errorMessage: '请输入昵称'
  219. }, ]
  220. },
  221. numberfans: {
  222. rules: [{
  223. required: true,
  224. errorMessage: '请输入粉丝数'
  225. }, ]
  226. },
  227. home_link: {
  228. rules: [{
  229. required: true,
  230. errorMessage: '请输入主页链接'
  231. }, ]
  232. },
  233. home_img: {
  234. rules: [{
  235. required: true,
  236. errorMessage: '请选择主页截图'
  237. }, ]
  238. },
  239. },
  240. mysNavConfig: {
  241. /* 开启单页显示首页图标 */
  242. isHome: true,
  243. /* 固定导航 */
  244. navFixed: true,
  245. /* 标题 (屏幕中心居中 两边图标中心居中使用slot center1) */
  246. navTitle: {
  247. text: "个人信息",
  248. color: "",
  249. fontSize: "32rpx", // px upx rpx
  250. fontWeight: "normal", // 100 - 700
  251. },
  252. btnType: "type2",
  253. onLeftClick: '',
  254. /* type2 按钮 */
  255. type2Config: {
  256. // 左图标
  257. leftPath: "/static/img/png2.png",
  258. // 右图标
  259. rightPath: "/static/img/png4.png",
  260. // 圆角
  261. radius: "40rpx",
  262. },
  263. },
  264. }
  265. },
  266. onReady() {
  267. this.$refs.form.setRules(this.rules)
  268. },
  269. onShow() {
  270. this.initRegion()
  271. this.getDefaultAddress()
  272. this.getlist()
  273. },
  274. onLoad(options) {
  275. this.platform.platform_id = parseInt(options.platform_id)
  276. if (options.account_id) {
  277. this.accountId = parseInt(options.account_id)
  278. this.isBind = false
  279. }
  280. },
  281. methods: {
  282. initRegion() {
  283. // 声明城市数组
  284. let cityArr = [];
  285. let countyArr = [];
  286. // 设置下标
  287. this.regionIndex = [0, 0, 0];
  288. // 改变城市列表
  289. this.region[1] = this.oldRegion[0].children.map(item => {
  290. cityArr.push({
  291. name: item.name,
  292. code: item.code
  293. });
  294. })
  295. this.$set(this.region, 1, cityArr);
  296. // 改变县区列表
  297. this.oldRegion[0].children[0].children.map(item => {
  298. countyArr.push({
  299. name: item.name,
  300. code: item.code
  301. });
  302. })
  303. this.$set(this.region, 2, countyArr);
  304. },
  305. // 信息表
  306. getlist() {
  307. this.$https.get('/youngee/c/g/get-info-tables')
  308. .then(res => {
  309. console.log(res)
  310. this.array = res.data.data.AgeBracket
  311. let list = res.data.data.ThirdPlatform
  312. for (var i = 0; i < list.length; ++i) {
  313. if (list[i].id == this.platform.platform_id) {
  314. this.platform.platform_icon = list[i].platform_icon
  315. this.platform.platform_name = list[i].platform_name
  316. }
  317. }
  318. this.getlist1()
  319. this.getaccount()
  320. })
  321. },
  322. // 达人详细信息表
  323. getlist1() {
  324. this.$https.get('/youngee/c/t/g/get-talent-info')
  325. .then(res => {
  326. console.log(res)
  327. if (res.data.data.talent_wx_number !== null) {
  328. if (res.data.data.talent_age_bracket !== 0) {
  329. for (var i = 0; i < this.array.length; i++) {
  330. if (this.array[i].age_aid == res.data.data.talent_age_bracket) {
  331. this.Xage = this.array[i].age_bracket_discribe
  332. }
  333. this.formData.age = res.data.data.talent_age_bracket
  334. }
  335. }
  336. if (res.data.data.talent_nationality !== 0) {
  337. this.index1 = res.data.data.talent_nationality
  338. this.formData.nationality = res.data.data.talent_nationality
  339. }
  340. if (res.data.data.visit_store_region !== 0) {
  341. let a = res.data.data.visit_store_region.toString().slice(0, 2)
  342. let b = res.data.data.visit_store_region.toString().slice(0, 4)
  343. let c = 0
  344. for (var i = 0; i < region.length; i++) {
  345. if (region[i].code == a) {
  346. a = region[i].name
  347. for (var j = 0; j < region[i].children.length; j++) {
  348. if (region[i].children[j].code == b) {
  349. b = region[i].children[j].name
  350. for (var o = 0; o < region[i].children[j].children
  351. .length; o++) {
  352. if (region[i].children[j].children[o].code == res.data.data
  353. .visit_store_region) {
  354. c = region[i].children[j].children[o].name
  355. }
  356. }
  357. }
  358. }
  359. }
  360. }
  361. this.regionStr = a + ' ' + b + ' ' + c
  362. this.formData.visitStoreRegion = res.data.data.visit_store_region
  363. }
  364. this.formData.phone = res.data.data.talent_phone_number
  365. }
  366. })
  367. },
  368. getaccount() {
  369. console.log(this.isBind)
  370. if (!this.isBind) {
  371. this.$https.get('/youngee/c/t/g/get-talent-account')
  372. .then(res => {
  373. console.log(res)
  374. if (res.data.code !== -3) {
  375. this.account = res.data.data
  376. for (var i = 0; i < this.account.length; i++) {
  377. if (this.platform.platform_id == this.account[i].platform_id) {
  378. this.formData.platform_nickname = this.account[i].platform_nickname
  379. this.formData.fans_count = this.account[i].fans_count
  380. this.formData.home_page_url = this.account[i].home_page_url
  381. this.imageData.push(this.account[i].home_page_capture_url);
  382. }
  383. }
  384. }
  385. })
  386. }
  387. },
  388. setDefault(e) {
  389. console.log(e.detail.value)
  390. if (e.detail.value)
  391. this.formData.setdefault = 1
  392. else
  393. this.formData.setdefault = 0
  394. },
  395. getDefaultAddress() {
  396. this.$https.get('/youngee/c/t/g/get-talent-default-address').then(res => {
  397. this.formData.name = res.data.data.receiver_name
  398. this.formData.tel = res.data.data.phone_number
  399. this.formData.detailregion = res.data.data.detail_addr
  400. this.formData.fregion = res.data.data.region_code
  401. console.log("111")
  402. console.log(this.formData)
  403. let a = res.data.data.region_code.toString().slice(0, 2)
  404. let b = res.data.data.region_code.toString().slice(0, 4)
  405. let c = 0
  406. for (var i = 0; i < region.length; i++) {
  407. if (region[i].code == a) {
  408. a = region[i].name
  409. for (var j = 0; j < region[i].children.length; j++) {
  410. if (region[i].children[j].code == b) {
  411. b = region[i].children[j].name
  412. for (var o = 0; o < region[i].children[j].children.length; o++) {
  413. if (region[i].children[j].children[o].code == res.data.data.region_code) {
  414. c = region[i].children[j].children[o].name
  415. }
  416. }
  417. }
  418. }
  419. }
  420. }
  421. this.regionStr1 = a + ' ' + b + ' ' + c
  422. })
  423. },
  424. /**
  425. * 手动提交
  426. * @param {Object} form
  427. */
  428. submitForm(form) {
  429. // console.log(this.formData);
  430. this.$refs.form.validate().then(res => {
  431. const iphoneReg1 = /^1[0-9]{10}$/
  432. const urlReg =
  433. /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%$#_]*)?/
  434. if (!iphoneReg1.test(this.formData.phone)) {
  435. uni.showToast({
  436. title: '电话号码格式不正确',
  437. icon: 'none'
  438. })
  439. return
  440. }
  441. if (!urlReg.test(this.formData.home_page_url)) {
  442. uni.showToast({
  443. title: '主页链接格式不正确',
  444. icon: 'none'
  445. })
  446. return
  447. }
  448. uni.showToast({
  449. title: '提交成功'
  450. })
  451. this.$https.post('/youngee/c/t/p/talent-info', {
  452. talent_age_bracket: this.formData.age,
  453. talent_nationality: this.formData.nationality,
  454. visit_store_region: this.formData.visitStoreRegion,
  455. talent_phone_number: this.formData.phone,
  456. })
  457. .then(res => {
  458. console.log(res)
  459. })
  460. this.$https.post('/youngee/c/t/p/add-talent-address', {
  461. region_code: this.formData.fregion,
  462. detail_addr: this.formData.detailregion,
  463. phone_number: this.formData.phone,
  464. receiver_name: this.formData.name,
  465. default_tag: this.formData.setdefault
  466. })
  467. .then(res => {
  468. console.log(res)
  469. })
  470. this.formData.home_page_capture_url = this.imageData[0]
  471. if (this.isBind) {
  472. this.$https.post('/youngee/c/t/p/add-talent-account', {
  473. platform_id: this.platform.platform_id,
  474. platform_nickname: this.formData.platform_nickname,
  475. home_page_url: this.formData.home_page_url,
  476. fans_count: this.formData.fans_count,
  477. home_page_capture_url: this.formData
  478. .home_page_capture_url,
  479. })
  480. .then(res => {
  481. console.log(res)
  482. })
  483. } else {
  484. this.$https.post('/youngee/c/t/p/update-talent-account', {
  485. account_id: this.accountId,
  486. platform_id: this.platform.platform_id,
  487. platform_nickname: this.formData.platform_nickname,
  488. home_page_url: this.formData.home_page_url,
  489. fans_count: this.formData.fans_count,
  490. home_page_capture_url: this.formData
  491. .home_page_capture_url,
  492. })
  493. .then(res => {
  494. console.log(res)
  495. })
  496. }
  497. uni.showToast({
  498. title: '修改成功'
  499. })
  500. uni.navigateBack()
  501. }).catch(err => {
  502. console.error('验证失败:', err)
  503. uni.showToast({
  504. title: '请填写所有信息',
  505. icon: 'none'
  506. })
  507. })
  508. },
  509. ceshiChooseSuccess(tempFilePaths, e) { //选择图片返回
  510. console.log('ceshiChooseSuccess', tempFilePaths, e);
  511. if (e == 0) {
  512. this.store = 'talent_upload/' + this.guid() + '.png'
  513. } else if (e == 1) {
  514. this.store = 'talent_upload/' + this.guid() + '.mp4'
  515. }
  516. /****************
  517. 以下代码是自定义上传逻辑,仅供参考
  518. ***************/
  519. this.imgUpload(tempFilePaths);
  520. /*******************************/
  521. console.log("imgdata" + this.imageData)
  522. },
  523. imgUpload(tempFilePaths) {
  524. let that = this
  525. console.log('imgUpload', tempFilePaths)
  526. let config = {
  527. AccessKeyId: 'IVW21DTGIIUBBAGXKK0Y', //AK
  528. SecretKey: 'Y01nEQNcLOATMw7uJwrk3yOdQZ2fqLhSnXcOKVDE', //SK
  529. EndPoint: 'https://horastar.obs.cn-east-3.myhuaweicloud.com', //上传文件的路径
  530. };
  531. let fileName = this.store; //指定上传到OBS桶中的对象名
  532. // let fileName = "talent_upload/icon-arrow-right.png"
  533. let OBSPolicy = { //设定policy内容
  534. "expiration": "2089-12-31T12:00:00.000Z",
  535. "conditions": [{
  536. "bucket": "horastar"
  537. }, //Bucket name
  538. // {"bucket": "goin"},
  539. {
  540. 'key': fileName
  541. }
  542. ]
  543. }
  544. let policyEncoded = getPolicyEncode(OBSPolicy); //计算policy编码值
  545. let signature = getSignature(policyEncoded, config.SecretKey); //计算signature
  546. uni.uploadFile({
  547. //url: config.EndPoint,
  548. url: config.EndPoint,
  549. filePath: tempFilePaths[0],
  550. name: 'file',
  551. formData: {
  552. 'AccessKeyID': config.AccessKeyId,
  553. 'policy': policyEncoded,
  554. 'signature': signature,
  555. 'key': fileName,
  556. },
  557. success: function(res) {
  558. console.log(res.statusCode); //打印响应状态码
  559. if (res.statusCode == '204') {
  560. that.imageData.push(config.EndPoint + '/' + fileName);
  561. console.log('上传图片成功', res)
  562. let obs_url = config.EndPoint + '/' + fileName; //用你自己的 bucket 名替换星号
  563. console.log(obs_url)
  564. that.formData.home_img = obs_url
  565. uni.showToast({
  566. title: '上传成功',
  567. icon: '成功'
  568. });
  569. } else {
  570. console.log('上传图片失败', res)
  571. uni.showToast({
  572. title: '上传失败',
  573. icon: '失败'
  574. });
  575. }
  576. },
  577. fail: function(e) {
  578. console.log(e);
  579. }
  580. })
  581. },
  582. guid() {
  583. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  584. var r = Math.random() * 16 | 0,
  585. v = c == 'x' ? r : (r & 0x3 | 0x8);
  586. return v.toString(16);
  587. });
  588. },
  589. // 年龄选择的
  590. bindPickerChange: function(e) {
  591. this.index = e.detail.value;
  592. this.formData.age = this.array[this.index].age_aid
  593. this.Xage = this.array[this.index].age_bracket_discribe
  594. console.log(this.formData.age)
  595. },
  596. //国籍选择
  597. bindPickerChange1: function(e) {
  598. console.log(e)
  599. this.index1 = e.detail.value;
  600. this.formData.nationality = this.array1[this.index1].id
  601. console.log(this.formData.nationality)
  602. },
  603. //城市选择
  604. pickerChange(e) {
  605. // console.log(e, '1');
  606. this.regionIndex = e.detail.value;
  607. this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[
  608. 1]]
  609. .name + ' ' +
  610. this.region[2][this.regionIndex[2]].name;
  611. // 组件传值
  612. this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]]
  613. .code,
  614. this.region[
  615. 2][this.regionIndex[2]].code
  616. ]);
  617. this.formData.visitStoreRegion = this.region[2][this.regionIndex[2]].code;
  618. },
  619. pickerColumnchange(e) {
  620. // console.log(e);
  621. // 第几列滑动
  622. // console.log(e.detail.column);
  623. // 第几列滑动的下标
  624. // console.log(e.detail.value)
  625. if (e.detail.column === 0) {
  626. // 声明城市数组
  627. let cityArr = [];
  628. let countyArr = [];
  629. // 设置下标
  630. this.regionIndex = [e.detail.value, 0, 0];
  631. // 改变城市列表
  632. this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
  633. cityArr.push({
  634. name: item.name,
  635. code: item.code
  636. });
  637. })
  638. this.$set(this.region, 1, cityArr);
  639. // 改变县区列表
  640. this.oldRegion[e.detail.value].children[0].children.map(item => {
  641. countyArr.push({
  642. name: item.name,
  643. code: item.code
  644. });
  645. })
  646. this.$set(this.region, 2, countyArr);
  647. }
  648. if (e.detail.column === 1) {
  649. this.regionIndex[1] = e.detail.value;
  650. this.regionIndex[2] = 0;
  651. let countyArr = [];
  652. this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
  653. countyArr.push({
  654. name: item.name,
  655. code: item.code
  656. });
  657. })
  658. this.$set(this.region, 2, countyArr);
  659. }
  660. if (e.detail.column === 2) {
  661. this.regionIndex[2] = e.detail.value;
  662. }
  663. },
  664. //城市选择
  665. pickerChange(e) {
  666. // console.log(e, '1');
  667. this.regionIndex = e.detail.value;
  668. this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[
  669. 1]]
  670. .name + ' ' +
  671. this.region[2][this.regionIndex[2]].name;
  672. // 组件传值
  673. this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]]
  674. .code,
  675. this.region[
  676. 2][this.regionIndex[2]].code
  677. ]);
  678. this.formData.visitStoreRegion = this.region[2][this.regionIndex[2]].code;
  679. },
  680. pickerColumnchange(e) {
  681. // console.log(e);
  682. // 第几列滑动
  683. // console.log(e.detail.column);
  684. // 第几列滑动的下标
  685. // console.log(e.detail.value)
  686. if (e.detail.column === 0) {
  687. // 声明城市数组
  688. let cityArr = [];
  689. let countyArr = [];
  690. // 设置下标
  691. this.regionIndex = [e.detail.value, 0, 0];
  692. // 改变城市列表
  693. this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
  694. cityArr.push({
  695. name: item.name,
  696. code: item.code
  697. });
  698. })
  699. this.$set(this.region, 1, cityArr);
  700. // 改变县区列表
  701. this.oldRegion[e.detail.value].children[0].children.map(item => {
  702. countyArr.push({
  703. name: item.name,
  704. code: item.code
  705. });
  706. })
  707. this.$set(this.region, 2, countyArr);
  708. }
  709. if (e.detail.column === 1) {
  710. this.regionIndex[1] = e.detail.value;
  711. this.regionIndex[2] = 0;
  712. let countyArr = [];
  713. this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
  714. countyArr.push({
  715. name: item.name,
  716. code: item.code
  717. });
  718. })
  719. this.$set(this.region, 2, countyArr);
  720. }
  721. if (e.detail.column === 2) {
  722. this.regionIndex[2] = e.detail.value;
  723. }
  724. },
  725. //城市选择
  726. pickerChange1(e) {
  727. // console.log(e, '1');
  728. this.regionIndex1 = e.detail.value;
  729. this.regionStr1 = this.region[0][this.regionIndex1[0]].name + ' ' + this.region[1][this.regionIndex1[
  730. 1]]
  731. .name + ' ' +
  732. this.region[2][this.regionIndex1[2]].name;
  733. // 组件传值
  734. this.$emit('region', [this.region[0][this.regionIndex1[0]].code, this.region[1][this.regionIndex1[1]]
  735. .code,
  736. this.region[
  737. 2][this.regionIndex1[2]].code
  738. ]);
  739. this.formData.fregion = this.region[2][this.regionIndex1[2]].code;
  740. console.log(this.formData.fregion)
  741. },
  742. pickerColumnchange1(e) {
  743. if (e.detail.column === 0) {
  744. // 声明城市数组
  745. let cityArr = [];
  746. let countyArr = [];
  747. // 设置下标
  748. this.regionIndex1 = [e.detail.value, 0, 0];
  749. // 改变城市列表
  750. this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
  751. cityArr.push({
  752. name: item.name,
  753. code: item.code
  754. });
  755. })
  756. this.$set(this.region, 1, cityArr);
  757. // 改变县区列表
  758. this.oldRegion[e.detail.value].children[0].children.map(item => {
  759. countyArr.push({
  760. name: item.name,
  761. code: item.code
  762. });
  763. })
  764. this.$set(this.region, 2, countyArr);
  765. }
  766. if (e.detail.column === 1) {
  767. this.regionIndex1[1] = e.detail.value;
  768. this.regionIndex1[2] = 0;
  769. let countyArr = [];
  770. this.oldRegion[this.regionIndex1[0]].children[this.regionIndex1[1]].children.map(item => {
  771. countyArr.push({
  772. name: item.name,
  773. code: item.code
  774. });
  775. })
  776. this.$set(this.region, 2, countyArr);
  777. }
  778. if (e.detail.column === 2) {
  779. this.regionIndex1[2] = e.detail.value;
  780. }
  781. },
  782. },
  783. created() {
  784. let provinceArr = [];
  785. let cityArr = [];
  786. this.oldRegion.map((item, index) => {
  787. this.region[0].push({
  788. name: item.name,
  789. code: item.code
  790. });
  791. })
  792. // console.log(provinceArr);
  793. provinceArr.map((item, index) => {
  794. this.region[1].push({
  795. name: item.name,
  796. code: item.code
  797. });
  798. })
  799. cityArr.map((item, index) => {
  800. this.region[2].push({
  801. name: item.name,
  802. code: item.code
  803. });
  804. })
  805. this.regionStr = '请选择省市区';
  806. }
  807. };
  808. </script>
  809. <style>
  810. picker {
  811. position: relative;
  812. display: block;
  813. cursor: pointer;
  814. padding-left: 20rpx !important;
  815. padding-top: 20rpx !important;
  816. color: grey !important;
  817. }
  818. /deep/.uni-forms-item__inner {
  819. border-bottom: none !important;
  820. margin-bottom: 0 !important;
  821. }
  822. </style>
  823. <style lang="scss" scoped>
  824. @charset "UTF-8";
  825. /* 头条小程序组件内不能引入字体 */
  826. /* #ifdef MP-TOUTIAO */
  827. @font-face {
  828. font-family: uniicons;
  829. font-weight: normal;
  830. font-style: normal;
  831. src: url("~@/static/uni.ttf") format("truetype");
  832. }
  833. /* #endif */
  834. /* #ifndef APP-NVUE */
  835. page {
  836. display: flex;
  837. flex-direction: column;
  838. box-sizing: border-box;
  839. background-color: #FFFFFF;
  840. min-height: 100%;
  841. height: auto;
  842. }
  843. view {
  844. font-size: 14px;
  845. // line-height: inherit;
  846. }
  847. .line {
  848. width: 96%;
  849. margin: 10rpx 2%;
  850. border-bottom: 1rpx solid #bbbbbb;
  851. }
  852. .title {
  853. height: 80rpx;
  854. display: flex;
  855. align-items: center;
  856. }
  857. .menu {
  858. position: fixed;
  859. top: 180rpx;
  860. background-color: #FFFFFF;
  861. justify-content: space-around;
  862. height: 80rpx;
  863. // height: 5%;
  864. width: 100%;
  865. display: flex;
  866. z-index: 10;
  867. margin-bottom: 10rpx;
  868. }
  869. .menu-item p {
  870. font-weight: 600;
  871. &.lor {
  872. border-bottom: 5rpx solid #F0D232;
  873. color: #F0D232;
  874. padding-bottom: 15rpx;
  875. }
  876. }
  877. .setdeault {
  878. display: flex;
  879. justify-content: space-between;
  880. }
  881. .btn1 {
  882. width: 100%;
  883. margin-top: 30rpx;
  884. font-size: 35rpx;
  885. color: #FFFFFF;
  886. background-color: #F0D232;
  887. border: none;
  888. border-radius: 0;
  889. }
  890. .uni-input-border,
  891. .uni-textarea-border {
  892. flex: 1;
  893. font-size: 14px;
  894. color: #666;
  895. border: 1px #FFFFFF solid;
  896. border-radius: 5px;
  897. /* #ifndef APP-NVUE */
  898. box-sizing: border-box;
  899. /* #endif */
  900. }
  901. .uni-input-border {
  902. padding: 0 10px;
  903. height: 35px;
  904. }
  905. .uni-textarea-border {
  906. padding: 10px;
  907. height: 80px;
  908. }
  909. .label-box {
  910. margin-right: 10px;
  911. }
  912. .transform-scale {
  913. transform: scale(0.7);
  914. }
  915. .butto {
  916. text-align: center;
  917. }
  918. .option {
  919. padding: 20rpx;
  920. }
  921. .uni-margin-wrap {
  922. width: 690rpx;
  923. width: 100%;
  924. ;
  925. }
  926. .swiper {
  927. height: 300rpx;
  928. }
  929. .swiper-item {
  930. display: block;
  931. height: 300rpx;
  932. line-height: 300rpx;
  933. text-align: center;
  934. }
  935. .swiper-list {
  936. margin-top: 40rpx;
  937. margin-bottom: 0;
  938. }
  939. .uni-common-mt {
  940. margin-top: 60rpx;
  941. position: relative;
  942. }
  943. .info {
  944. position: absolute;
  945. right: 20rpx;
  946. }
  947. .uni-padding-wrap {
  948. width: 550rpx;
  949. padding: 0 100rpx;
  950. }
  951. .signup {
  952. box-shadow: 0rpx 5rpx 40rpx #ccc;
  953. width: 100%;
  954. position: fixed;
  955. bottom: 0rpx;
  956. display: flex;
  957. height: 90rpx;
  958. padding-top: 2%;
  959. background-color: #FFFFFF;
  960. justify-content: space-around;
  961. }
  962. .signuptext {
  963. text-align: center;
  964. margin-top: 2%;
  965. }
  966. .signuptext p {
  967. font-size: 60%;
  968. color: #333333;
  969. }
  970. .signupbut {
  971. text-align: center;
  972. margin-top: 2%;
  973. }
  974. .but1 {
  975. width: 120%;
  976. text-align: center;
  977. background-color: #FCCF41;
  978. border-radius: 10rpx;
  979. color: #464100;
  980. font-size: 28rpx;
  981. line-height: 156%;
  982. font-weight: 500;
  983. height: 65%;
  984. }
  985. /deep/.uni-searchbar__box {
  986. border-color: #267CFF !important;
  987. border-width: 2rpx !important;
  988. }
  989. /deep/.uni-searchbar__box {
  990. background-color: #FFFFFF !important;
  991. }
  992. /deep/.uni-searchbar__text-placeholder {
  993. font-size: 30rpx !important;
  994. }
  995. /deep/.segmented-control__text {
  996. font-size: 34rpx !important;
  997. }
  998. /deep/.uni-data-checklist {
  999. padding-left: 20upx;
  1000. }
  1001. uni-picker {
  1002. position: relative;
  1003. display: block;
  1004. cursor: pointer;
  1005. padding-left: 20rpx !important;
  1006. padding-top: 14rpx !important;
  1007. color: grey !important;
  1008. }
  1009. /deep/.uni-date-x--border {
  1010. border: 0px solid #dcdfe6 !important;
  1011. }
  1012. /deep/.is-input-border {
  1013. border: 0px solid #c8c7cc !important;
  1014. }
  1015. /deep/.uni-progress-info {
  1016. font-size: 25rpx !important;
  1017. }
  1018. /deep/.uni-error-message {
  1019. position: absolute;
  1020. bottom: -20rpx !important;
  1021. left: 20rpx !important;
  1022. text-align: left;
  1023. }
  1024. /deep/.uni-forms-item__inner {
  1025. padding-bottom: 0rpx !important;
  1026. margin-bottom: 30rpx !important;
  1027. border-bottom: 0.5rpx solid #CCCCCC;
  1028. }
  1029. /deep/.uni-group__title {
  1030. background-color: #FFFFFF !important;
  1031. }
  1032. /deep/.uni-list-item__content-title {
  1033. font-size: 30rpx !important;
  1034. color: #111111 !important;
  1035. }
  1036. /deep/.uni-progress-bar {
  1037. border-radius: 10rpx !important;
  1038. }
  1039. /deep/.uni-progress-inner-bar {
  1040. border-radius: 10rpx !important;
  1041. }
  1042. /deep/.is-input-border {
  1043. border-radius: 20px !important;
  1044. background-color: #fff;
  1045. }
  1046. .uni-easyinput__content-input {
  1047. font-size: 30upx !important;
  1048. }
  1049. .content-clear-icon {
  1050. font-size: 40upx !important;
  1051. }
  1052. /deep/.input-box {
  1053. padding: 50upx;
  1054. font-size: 30upx;
  1055. .input-item {
  1056. display: flex;
  1057. border: 1upx solid #F8F8F8;
  1058. line-height: 90upx;
  1059. height: 90upx;
  1060. margin-top: 20upx;
  1061. background: #F8F8F8;
  1062. border-radius: 48upx;
  1063. .input-label {
  1064. width: 150upx;
  1065. text-align: center;
  1066. }
  1067. .input-body {
  1068. position: relative;
  1069. height: 100upx;
  1070. width: calc(100% - 150upx);
  1071. .input {
  1072. line-height: 90upx;
  1073. height: 90upx;
  1074. position: relative;
  1075. font-size: 28upx;
  1076. }
  1077. .eye {
  1078. position: absolute;
  1079. height: 50upx;
  1080. width: 50upx;
  1081. right: 20upx;
  1082. top: 50%;
  1083. transform: translateY(-50%);
  1084. }
  1085. .btn-code {
  1086. position: absolute;
  1087. right: 0upx;
  1088. top: 50%;
  1089. transform: translateY(-50%);
  1090. background: none;
  1091. color: #205592;
  1092. width: 160upx;
  1093. font-size: 24upx;
  1094. box-sizing: border-box;
  1095. text-align: center;
  1096. padding: 0;
  1097. height: 100upx;
  1098. line-height: 100upx;
  1099. }
  1100. }
  1101. }
  1102. .select {
  1103. // padding-top: 40upx;
  1104. display: flex;
  1105. justify-content: space-between;
  1106. color: #003B67;
  1107. }
  1108. }
  1109. /deep/.title-left {
  1110. width: 3px;
  1111. height: 16px;
  1112. background: #267CFF;
  1113. display: inline-block;
  1114. border-radius: 3px;
  1115. margin-top: 3px;
  1116. vertical-align: top;
  1117. margin-right: 10px;
  1118. }
  1119. .card {
  1120. padding: 24rpx;
  1121. margin-top: 30rpx;
  1122. border: 1rpx solid #F0D232;
  1123. background-color: #ffffff;
  1124. margin: 0 10rpx;
  1125. }
  1126. .head {
  1127. padding-top: 5%;
  1128. padding: 0 0 0 1%;
  1129. height: 80rpx;
  1130. margin-top: 2%;
  1131. }
  1132. .head span {
  1133. color: #333333;
  1134. font-size: 80%;
  1135. font-weight: 550;
  1136. text-indent: 2em;
  1137. }
  1138. .head image {
  1139. vertical-align: middle;
  1140. width: 50rpx;
  1141. height: 50rpx;
  1142. display: inline-block;
  1143. padding-right: 14rpx;
  1144. }
  1145. .home-link {
  1146. /deep/.uni-easyinput__content-input {
  1147. background-color: #EBEBEB;
  1148. border-radius: 15rpx;
  1149. }
  1150. }
  1151. .heng-line {
  1152. margin-top: 60rpx;
  1153. margin-bottom: 50rpx;
  1154. border: 1rpx solid #DCDCDC;
  1155. }
  1156. .signupbtn p {
  1157. font-size: 30rpx;
  1158. }
  1159. .exit-btn {
  1160. width: 120%;
  1161. text-align: center;
  1162. background-color: #C0C0C0;
  1163. border-radius: 10rpx;
  1164. color: #FFFFFF;
  1165. font-size: 30rpx;
  1166. line-height: 180%;
  1167. }
  1168. .main-btn {
  1169. width: 300rpx;
  1170. text-align: center;
  1171. background-color: #FCCF41;
  1172. border-radius: 10rpx;
  1173. color: #000000;
  1174. font-size: 30rpx;
  1175. line-height: 180%;
  1176. }
  1177. .uni-input-placeholder {
  1178. font-size: 24rpx !important;
  1179. }
  1180. /deep/.uni-date-x--border {
  1181. border: 0px solid #dcdfe6 !important;
  1182. }
  1183. /deep/.is-input-border {
  1184. border: 0px solid #c8c7cc !important;
  1185. }
  1186. .example {
  1187. padding: 0 15px 15px;
  1188. }
  1189. .example-info {
  1190. padding: 15px;
  1191. color: #3b4144;
  1192. background: #ffffff;
  1193. }
  1194. .example-body {
  1195. /* #ifndef APP-NVUE */
  1196. display: flex;
  1197. /* #endif */
  1198. flex-direction: row;
  1199. flex-wrap: wrap;
  1200. justify-content: center;
  1201. padding: 0;
  1202. font-size: 14px;
  1203. background-color: #ffffff;
  1204. }
  1205. /* #endif */
  1206. .example {
  1207. padding: 0 15px;
  1208. }
  1209. .example-info {
  1210. /* #ifndef APP-NVUE */
  1211. display: block;
  1212. /* #endif */
  1213. padding: 15px;
  1214. color: #3b4144;
  1215. background-color: #ffffff;
  1216. font-size: 14px;
  1217. line-height: 20px;
  1218. }
  1219. .example-info-text {
  1220. font-size: 14px;
  1221. line-height: 20px;
  1222. color: #3b4144;
  1223. }
  1224. .example-body {
  1225. flex-direction: column;
  1226. padding: 15px;
  1227. background-color: #ffffff;
  1228. }
  1229. </style>