bindinfo.vue 31 KB

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