bindinfo.vue 31 KB

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