ads-list.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906
  1. <template>
  2. <view class="ads" :style="{background:adsList.length == 0?'#fff':'#f9f9fb'}">
  3. <view class="al" v-if="!isEdit">
  4. <view class="al_item" v-for="(item, index) in adsList" :key="item.id" @click="selectAds(item)">
  5. <view class="T">
  6. <text>{{ item.name }}</text>
  7. <text>
  8. <text style="font-size:28rpx;color:#999"
  9. v-if="item.area_code">{{item.area_code==='+86'?'':item.area_code}}</text>
  10. <text>{{ item.phone }}</text>
  11. </text>
  12. </view>
  13. <view class="C">
  14. <view class="C_L">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}</view>
  15. </view>
  16. <view class="B flexB">
  17. <view class="B_L active" @click.stop="setDefault(item.id, item.is_default, index)">
  18. <text class="iconfont iconxuanzhong" v-if="item.is_default == 1"></text>
  19. <text class="iconfont iconweixuanzhong" v-else></text>
  20. <text :class="item.is_default == 1 ? 'default' : ''">设置为默认地址</text>
  21. </view>
  22. <view class="B_R">
  23. <text @click.stop="edit(item)">编辑</text>
  24. <text @click.stop="delAds(item.id, index)">删除</text>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="noData" v-if="adsList.length == 0">
  29. <image src="/static/imgs/default/no_record.png"></image>
  30. <view>暂无收货地址~</view>
  31. </view>
  32. <view class="al_add_btn" @click="addNew">+添加新地址</view>
  33. </view>
  34. <view class="edit_ads" v-else>
  35. <view class="nav">
  36. <textarea v-model="message" type="text" :placeholder="placeholder" class="discern"
  37. placeholder-class="discern-placeholder" />
  38. <view class="flex">
  39. <view class="nav-clearbutton flexC" @click="message = ''">清空</view>
  40. <view class="nav-button flexC" @click="text">识别</view>
  41. </view>
  42. </view>
  43. <view class="box">
  44. <view class="box-top flexS">
  45. <view class="title">
  46. <text>收货人</text>
  47. <text class="star">*</text>
  48. </view>
  49. <input v-model="params.name" type="text" class="box-input" placeholder-class="input_placeholder"
  50. placeholder="请填写真实姓名" />
  51. </view>
  52. <view class="box-top">
  53. <navigator url="../phone-area/phone-area" class="phone-area flexB">
  54. <view class="flexS">
  55. <view class="title">
  56. <text class="text" style="color:#333">国家/地区</text>
  57. <text class="star">*</text>
  58. </view>
  59. <text class="area">{{areaName}}({{params.areaCode}})</text>
  60. </view>
  61. <text class="icon cuIcon-right"></text>
  62. </navigator>
  63. </view>
  64. <view class="box-top">
  65. <view class="title">
  66. <text>手机号</text>
  67. <text class="star">*</text>
  68. </view>
  69. <input v-model="params.phone" type="number" class="box-input" placeholder-class="input_placeholder"
  70. placeholder="请填写手机号码" maxlength="11" />
  71. </view>
  72. <view class="box-top">
  73. <view class="title">
  74. <text>省市区</text>
  75. <text class="star">*</text>
  76. </view>
  77. <view class="picker flexB" @tap="choosePicker">
  78. <view :style="{ color: params.local ? '#333' : '#808080' }" style="font-size:30rpx;">
  79. {{ params.local ? params.local : '请选择所在地区' }}
  80. </view>
  81. <text class="iconfont iconzhcc_xiangxiajiantou"></text>
  82. </view>
  83. </view>
  84. <w-picker ref="Selector" mode="region" themeColor="#F76454" @confirm="onConfirm" />
  85. <view class="box-bottom">
  86. <view class="title">
  87. <text>详细地址</text>
  88. <text class="star">*</text>
  89. </view>
  90. <view class="textbox">
  91. <textarea v-model="params.address" type="text" placeholder="请填写详细地址" class="box-input"
  92. placeholder-class="input_placeholder" />
  93. </view>
  94. </view>
  95. <view class="box-changyong flexB">
  96. <view class="title">设置为常用地址</view>
  97. <view class="flexS default_btn">
  98. <view @click="editDefault(0)" class="set-control"
  99. :class="params.is_default == 0 ? 'active' : 'set-used'">否</view>
  100. <view @click="editDefault(1)" class="set-control"
  101. :class="params.is_default == 1 ? 'active' : 'set-used'" style="margin-left:20rpx;">是</view>
  102. </view>
  103. </view>
  104. </view>
  105. <view class="remind">若自动识别的信息不准确,请手动修改</view>
  106. <view class="fixed_btn_box flexC">
  107. <view @click="save" class="flexC">{{ address_id ? '确认修改' : '保存' }}</view>
  108. </view>
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. import {
  114. getAllAds,
  115. setDefault,
  116. deleteAds,
  117. addAds,
  118. updateAds,
  119. getLocation,
  120. location,
  121. discernAdress
  122. } from '@/apis/shop.js';
  123. import WPicker from '../../components/w-picker/w-picker.vue';
  124. import cityPicker from '../../components/citypicker/city-picker.vue';
  125. import AddressParse from 'address-parse';
  126. import areaList from '@/common/util/phone-area.js'
  127. export default {
  128. data() {
  129. return {
  130. placeholder: '请粘贴或输入整段地址,点击“识别”自动拆分姓名、电话和地址。例如:张三,15100001111,河南省郑州市金水区某路和某路交叉口某小区某号楼',
  131. message: '', //输入的要识别的地址
  132. adsList: '', //获取的地址列表
  133. params: {
  134. name: '',
  135. phone: '',
  136. local: '',
  137. province: '',
  138. city: '',
  139. area: '',
  140. address: '',
  141. is_default: 0,
  142. remark: '',
  143. areaCode: '+86', // 手机号地区代码
  144. },
  145. address_id: '',
  146. pickerDefaultVal: ['河南省', '郑州市', '金水区'],
  147. isEdit: false,
  148. user_id: '',
  149. isMatch: /^[1][3-9]\d{9}$/, //手机号验证
  150. areaName: '中国大陆', // 手机号地区名称
  151. codeList: areaList, //手机号区域选择
  152. };
  153. },
  154. onLoad(ops) {
  155. this.user_id = ops.user_id;
  156. },
  157. onShow() {
  158. this.getList();
  159. },
  160. beforeDestroy() {
  161. clearInterval(this.timer);
  162. },
  163. created() {
  164. uni.$on('CHOOSEPHONECODE', (name, code, reg, phoneReg) => {
  165. // 监听 chooseArea 事件更新
  166. this.areaName = name; // 修改选择的手机号地区名称
  167. this.params.areaCode = code // 修改选择的手机号地区代码
  168. this.isMatch = phoneReg
  169. });
  170. },
  171. components: {
  172. WPicker,
  173. cityPicker
  174. },
  175. methods: {
  176. // 识别地址手机号验证
  177. checkCode(type, arr) {
  178. let t = '886'
  179. let a = '853'
  180. let x = '852'
  181. let msg = this.message.replace(/\s*/g, "")
  182. let index = ''
  183. let mobile = ''
  184. let code = ''
  185. if (msg.indexOf(t) != -1) {
  186. index = msg.indexOf(t)
  187. mobile = msg.substring(index + 3, index + 13)
  188. code = `+${t}`
  189. this.areaName = '中国台湾'
  190. this.isMatch = /^[0]{1}[9]{1}\d{8}$/
  191. } else if (msg.indexOf(a) != -1) {
  192. index = msg.indexOf(a)
  193. mobile = msg.substring(index + 3, index + 11)
  194. code = `+${a}`
  195. this.areaName = '中国澳门'
  196. this.isMatch = /^[6]\d{7}$/
  197. } else if (msg.indexOf(x) != -1) {
  198. index = msg.indexOf(x)
  199. mobile = msg.substring(index + 3, index + 11)
  200. code = `+${x}`
  201. this.areaName = '中国香港'
  202. this.isMatch = /^([6|9|5])\d{7}$/
  203. } else {
  204. code = '+86'
  205. this.areaName = '中国大陆'
  206. mobile = arr.mobile
  207. this.isMatch = /^[1][3-9]\d{9}$/
  208. }
  209. this.params = {
  210. name: arr.name.replace(/[0-9]/g, ''),
  211. areaCode: code,
  212. phone: mobile,
  213. local: type === 0 ? `${arr.province}-${arr.city}-${arr.area}` : `${arr.province}-${arr.city}`,
  214. province: arr.province,
  215. city: arr.city,
  216. area: arr.area,
  217. address: arr.details,
  218. is_default: 0,
  219. remark: '',
  220. };
  221. },
  222. //识别地址
  223. text() {
  224. if (this.message.length < 1) {
  225. uni.toast('请输入需要识别的内容');
  226. return;
  227. }
  228. this.result = AddressParse.parse(this.message);
  229. let arr = AddressParse.parse(this.message)[0];
  230. if (arr.mobile === '') {
  231. this.checkCode(0, arr)
  232. } else if (arr.area === '') {
  233. const params = {
  234. city: arr.city,
  235. details: arr.details
  236. };
  237. this.checkCode(1, arr)
  238. discernAdress(params).then(res => {
  239. if (res.code === 200) {
  240. if (!res.data.area) {
  241. uni.showToast({
  242. title: '有部分信息未能识别或错误,请核实或手动填写',
  243. icon: 'none'
  244. })
  245. return;
  246. }
  247. this.params.area = res.data.area
  248. this.params.local = `${arr.province}-${arr.city}-${res.data.area}`
  249. // this.params = {
  250. // name: arr.name,
  251. // phone: arr.mobile,
  252. // local: `${arr.province}-${arr.city}-${res.data.area}`,
  253. // province: arr.province,
  254. // city: arr.city,
  255. // area: res.data.area,
  256. // address: arr.details,
  257. // is_default: 0,
  258. // remark: ''
  259. // };
  260. // console.log(this.params);
  261. } else {
  262. uni.showToast({
  263. title: '识别失败,请手动填写',
  264. icon: 'none'
  265. })
  266. }
  267. });
  268. } else {
  269. this.params = {
  270. name: arr.name,
  271. phone: arr.mobile,
  272. local: `${arr.province}-${arr.city}-${arr.area}`,
  273. province: arr.province,
  274. city: arr.city,
  275. area: arr.area,
  276. address: arr.details,
  277. is_default: 0,
  278. remark: '',
  279. areaCode: '+86'
  280. };
  281. }
  282. },
  283. choosePicker() {
  284. // 显示地址选择器
  285. this.$refs.Selector.show();
  286. },
  287. onConfirm(e) {
  288. // 选择地址选择器
  289. this.params.local = `${e.checkArr[0]}-${e.checkArr[1]}-${e.checkArr[2]}`;
  290. this.pickerDefaultVal = [e.checkArr[0], e.checkArr[1], e.checkArr[2]];
  291. this.params.province = e.checkArr[0];
  292. this.params.city = e.checkArr[1];
  293. this.params.area = e.checkArr[2];
  294. },
  295. /*添加新地址*/
  296. addNew() {
  297. this.isEdit = true;
  298. this.address_id = '';
  299. this.message = '';
  300. this.areaName = '中国大陆';
  301. this.isMatch = /^[1][3-9]\d{9}$/;
  302. this.params = {
  303. name: '',
  304. phone: '',
  305. local: '',
  306. province: '',
  307. city: '',
  308. area: '',
  309. address: '',
  310. is_default: 0,
  311. remark: '',
  312. areaCode: '+86', // 手机号地区代码
  313. }
  314. },
  315. //编辑或添加时设置默认地址
  316. editDefault(type) {
  317. this.params.is_default = type;
  318. },
  319. //保存或者确认修改
  320. save() {
  321. if (this.params.name) {
  322. this.params.name = this.params.name.replace(/\s*/g, '');
  323. }
  324. if (!this.params.name.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
  325. // 校验姓名
  326. uni.showToast({
  327. title: '姓名不符合要求',
  328. icon: 'none',
  329. mask: true
  330. });
  331. return;
  332. }
  333. if (!this.params.phone) {
  334. uni.showToast({
  335. title: '手机号码不能为空',
  336. icon: 'none',
  337. mask: true
  338. });
  339. return
  340. }
  341. if (this.isMatch && !this.params.phone.match(this.isMatch)) {
  342. uni.showToast({
  343. title: '手机号所属与区号不一致',
  344. icon: 'none',
  345. mask: true
  346. });
  347. return
  348. }
  349. if (!this.params.local.trim().length) {
  350. // 校验是否选择地区
  351. uni.showToast({
  352. title: '请选择所在地区',
  353. icon: 'none',
  354. mask: true
  355. });
  356. return;
  357. }
  358. if (!this.params.address) {
  359. // 校验是否填写详细地址
  360. uni.showToast({
  361. title: '详细地址不能为空',
  362. icon: 'none',
  363. mask: true
  364. });
  365. return;
  366. }
  367. let data = '';
  368. let http = '';
  369. let hint = '';
  370. //如果有地址id表示是修改 没有表示是添加
  371. if (this.address_id) {
  372. this.params.address_id = this.address_id;
  373. data = this.params;
  374. http = updateAds;
  375. hint = '修改地址成功!';
  376. } else {
  377. this.params.user_id = this.user_id;
  378. data = this.params;
  379. http = addAds;
  380. hint = '添加地址成功!';
  381. }
  382. http(data).then(res => {
  383. if (res.code == 200) {
  384. uni.showModal({
  385. content: hint,
  386. showCancel: false,
  387. success: res => {
  388. if (res.confirm) {
  389. this.isEdit = false;
  390. this.getList();
  391. }
  392. }
  393. });
  394. } else {
  395. uni.showModal({
  396. content: res.data,
  397. showCancel: false
  398. });
  399. }
  400. });
  401. },
  402. /*获取地址列表
  403. *id 商户帮他下单的用户id
  404. */
  405. getList() {
  406. getAllAds({
  407. id: this.user_id
  408. }).then(res => {
  409. if (res.code == 200) {
  410. this.adsList = res.data;
  411. } else {
  412. uni.showModal({
  413. content: res.data,
  414. showCancel: false
  415. });
  416. }
  417. });
  418. },
  419. /*删除地址*/
  420. delAds(id, idx) {
  421. uni.showModal({
  422. content: '确定要删除当前地址吗?',
  423. success: res => {
  424. if (res.confirm) {
  425. deleteAds({
  426. id
  427. }).then(res => {
  428. if (res.code == 200) {
  429. this.adsList.splice(idx, 1);
  430. uni.showToast({
  431. title: '删除地址成功',
  432. mask: true,
  433. duration: 3000
  434. });
  435. } else {
  436. uni.showModal({
  437. content: res.msg,
  438. showCancel: false
  439. });
  440. }
  441. });
  442. }
  443. }
  444. });
  445. },
  446. /*根据数组中某个对象排序*/
  447. compare(property) {
  448. return function(a, b) {
  449. var value1 = a[property];
  450. var value2 = b[property];
  451. return value2 - value1;
  452. };
  453. },
  454. /*设为默认地址*/
  455. setDefault(id, is_default, idx) {
  456. let hint = '';
  457. if (is_default == 1) {
  458. //已设为默认
  459. hint = '确定要取消当前地址为默认地址?';
  460. } else {
  461. hint = '确定要设置当前地址为默认地址?';
  462. }
  463. uni.showModal({
  464. content: hint,
  465. success: res => {
  466. if (res.confirm) {
  467. setDefault({
  468. id
  469. }).then(res => {
  470. if (res.code == 200) {
  471. let list = this.adsList;
  472. for (let i = 0; i < list.length; i++) {
  473. if (is_default == 1) {
  474. this.$set(list[i], 'is_default', 0);
  475. return false;
  476. }
  477. if (is_default == 0) {
  478. if (i == idx) {
  479. list[idx].is_default = 1;
  480. } else {
  481. list[i].is_default = 0;
  482. }
  483. }
  484. }
  485. this.adsList = list;
  486. uni.showToast({
  487. title: '设置成功',
  488. mask: true,
  489. duration: 3000
  490. });
  491. } else {
  492. uni.showModal({
  493. content: res.data || '设置失败',
  494. showCancel: false
  495. });
  496. }
  497. });
  498. }
  499. }
  500. });
  501. },
  502. /*编辑收货地址*/
  503. edit(item) {
  504. this.isEdit = true;
  505. this.params = item;
  506. this.message = '';
  507. this.params.local = `${item.province}-${item.city}-${item.area}`;
  508. this.address_id = item.id;
  509. this.params.areaCode = item.area_code ? item.area_code : '+86'
  510. if (this.params.areaCode) {
  511. let index = this.params.areaCode.indexOf('+')
  512. let code = this.params.areaCode.substring(index + 1)
  513. this.codeList[0].list.map(i => {
  514. if (i.code === Number(code)) {
  515. this.areaName = i.name
  516. this.isMatch = i.phoneReg
  517. }
  518. })
  519. }
  520. },
  521. //选择地址返回上一页
  522. selectAds(item) {
  523. let that = this;
  524. var pages = getCurrentPages();
  525. var prevPage = pages[pages.length - 2]; //上一个页面
  526. let object = item;
  527. prevPage.$vm.otherFun(object); //重点$vm
  528. uni.navigateBack();
  529. }
  530. }
  531. };
  532. </script>
  533. <style lang="scss" scoped>
  534. .ads {
  535. min-height: 100vh;
  536. height: 100%;
  537. width: 100%;
  538. background: #f9f9fb;
  539. padding-bottom: 150rpx;
  540. }
  541. page {
  542. display: flex;
  543. justify-content: flex-start;
  544. flex-direction: column;
  545. }
  546. .default_ads {
  547. height: 130rpx;
  548. width: 100%;
  549. .default_btn {
  550. view {
  551. width: 98rpx;
  552. height: 50rpx;
  553. }
  554. }
  555. }
  556. .edit_ads {
  557. width: 690rpx;
  558. margin: 30rpx auto 0;
  559. box-sizing: border-box;
  560. .nav {
  561. padding: 26rpx 20rpx 30rpx 30rpx;
  562. background-color: #fff;
  563. border-radius: 24rpx;
  564. display: flex;
  565. flex-direction: column;
  566. align-items: flex-end;
  567. .discern {
  568. width: 100%;
  569. height: 180rpx;
  570. font-size: 28rpx;
  571. &-placeholder {
  572. color: #c8c8c8;
  573. font-size: 28rpx;
  574. line-height: 44rpx;
  575. }
  576. }
  577. .flex {
  578. display: flex;
  579. view {
  580. width: 128rpx;
  581. height: 64rpx;
  582. font-size: 28rpx;
  583. border-radius: 32rpx;
  584. }
  585. }
  586. &-button {
  587. color: #ffffff;
  588. background: linear-gradient(90deg, #ff232c 0%, #ff571b 100%);
  589. }
  590. &-clearbutton {
  591. background: #fff4f3;
  592. border: 2rpx solid $base-color;
  593. color: $base-color;
  594. margin-right: 15rpx;
  595. }
  596. }
  597. .box {
  598. margin: 30rpx 0;
  599. background-color: #fff;
  600. border-radius: 24rpx;
  601. .phone-area {
  602. width: 100%;
  603. .area {
  604. color: #42b983;
  605. margin-left: 16rpx;
  606. }
  607. .icon {
  608. font-size: 40rpx;
  609. color: #999;
  610. }
  611. }
  612. &-input {
  613. font-size: 30rpx;
  614. min-height: 126rpx;
  615. width: 75%;
  616. margin-left: 20rpx;
  617. }
  618. &-top {
  619. min-height: 128rpx;
  620. padding: 0 30rpx;
  621. box-sizing: border-box;
  622. border-bottom: 2rpx solid #eeeeee;
  623. display: flex;
  624. justify-content: flex-start;
  625. align-items: center;
  626. .title {
  627. font-size: 34rpx;
  628. font-weight: bold;
  629. .star {
  630. color: $base-color;
  631. margin-left: 10rpx;
  632. font-size: 40rpx;
  633. }
  634. }
  635. .picker {
  636. width: 75%;
  637. min-height: 128rpx;
  638. margin-left: 20rpx;
  639. font-size: 30rpx;
  640. .iconfont {
  641. color: #cbcbcb;
  642. }
  643. }
  644. .input_placeholder {
  645. font-size: 30rpx;
  646. color: #cbcbcb;
  647. }
  648. }
  649. &-bottom {
  650. height: 166rpx;
  651. padding: 20rpx 30rpx;
  652. box-sizing: border-box;
  653. border-bottom: 2rpx solid #eeeeee;
  654. display: flex;
  655. justify-content: flex-start;
  656. align-items: flex-start;
  657. .title {
  658. font-size: 34rpx;
  659. font-weight: bold;
  660. .star {
  661. color: $base-color;
  662. margin-left: 10rpx;
  663. font-size: 40rpx;
  664. }
  665. }
  666. .input_placeholder {
  667. font-size: 30rpx;
  668. color: #cbcbcb;
  669. }
  670. .textbox {
  671. height: 166rpx;
  672. .box-input {
  673. width: 440rpx;
  674. height: 120rpx;
  675. font-size: 30rpx;
  676. }
  677. }
  678. }
  679. &-changyong {
  680. height: 110rpx;
  681. padding: 26rpx 20rpx 30rpx 30rpx;
  682. display: flex;
  683. justify-content: space-between;
  684. align-items: center;
  685. .title {
  686. font-size: 28rpx;
  687. font-weight: 400;
  688. line-height: 29rpx;
  689. color: #585858;
  690. }
  691. .input_placeholder {
  692. font-size: 28rpx;
  693. font-weight: 400;
  694. line-height: 29rpx;
  695. }
  696. .set-used {
  697. margin-right: auto;
  698. color: $base-color;
  699. font-size: 30rpx;
  700. }
  701. .set-control {
  702. width: 110rpx;
  703. height: 55rpx;
  704. line-height: 55rpx;
  705. border-radius: 50rpx;
  706. text-align: center;
  707. background: #f8f8f8;
  708. color: #333333;
  709. font-size: 30rpx;
  710. &:nth-last-of-type(1) {
  711. margin-left: 20rpx;
  712. }
  713. &.active {
  714. background: linear-gradient(to right, #F30000, #FE4815) !important;
  715. color: #ffffff !important;
  716. }
  717. }
  718. }
  719. }
  720. .remind {
  721. text-align: center;
  722. color: #fb231f;
  723. font-size: 28rpx;
  724. }
  725. .fixed_btn_box {
  726. position: fixed;
  727. bottom: 0;
  728. left: 0;
  729. height: 100rpx;
  730. width: 100%;
  731. background: #fff;
  732. view {
  733. width: 690rpx;
  734. height: 88rpx;
  735. border-radius: 44px;
  736. color: #fff;
  737. font-size: 32rpx;
  738. font-weight: bold;
  739. letter-spacing: 6rpx;
  740. background-color: $base-color;
  741. }
  742. }
  743. }
  744. .al {
  745. flex: 1;
  746. width: 690rpx;
  747. margin: 0 auto;
  748. padding-top: 24rpx;
  749. .al_add_btn {
  750. margin: 50rpx 110rpx 0 110rpx;
  751. height: 88rpx;
  752. border-radius: 88rpx;
  753. color: #ffffff;
  754. font-size: 32rpx;
  755. background: $base-line-bg;
  756. line-height: 88rpx;
  757. text-align: center;
  758. }
  759. .al_item {
  760. width: 100%;
  761. padding: 24rpx;
  762. box-sizing: border-box;
  763. background: #ffffff;
  764. margin-bottom: 30rpx;
  765. &:nth-last-of-type(1) {
  766. margin-bottom: 0;
  767. }
  768. border-radius: 24rpx;
  769. .B {
  770. width: 100%;
  771. display: flex;
  772. justify-content: space-between;
  773. align-items: center;
  774. .B_R {
  775. display: flex;
  776. align-items: center;
  777. // justify-content: flex-end;
  778. text {
  779. width: 112rpx;
  780. height: 50rpx;
  781. line-height: 50rpx;
  782. text-align: center;
  783. border-radius: 50rpx;
  784. background-color: #f8f8f8;
  785. color: #333333;
  786. font-size: 28rpx;
  787. margin-left: 20rpx;
  788. }
  789. }
  790. .B_L {
  791. display: flex;
  792. align-items: center;
  793. justify-content: flex-start;
  794. // width:50%;
  795. .iconfont {
  796. margin-right: 10rpx;
  797. vertical-align: -2rpx;
  798. }
  799. .default {
  800. color: $base-color;
  801. }
  802. }
  803. }
  804. .C {
  805. display: flex;
  806. align-items: center;
  807. justify-content: space-between;
  808. padding-bottom: 20rpx;
  809. border-bottom: 2rpx solid #e9e9e9;
  810. margin-bottom: 26rpx;
  811. .C_L {
  812. flex: 1;
  813. overflow: hidden;
  814. color: #333333;
  815. font-size: 28rpx;
  816. line-height: 40rpx;
  817. display: -webkit-box;
  818. -webkit-box-orient: vertical;
  819. -webkit-line-clamp: 2;
  820. overflow: hidden;
  821. }
  822. }
  823. .T {
  824. display: flex;
  825. align-items: center;
  826. justify-content: space-between;
  827. margin-bottom: 20rpx;
  828. text {
  829. &:nth-of-type(1) {
  830. color: #333333;
  831. font-size: 32rpx;
  832. flex: 1;
  833. overflow: hidden;
  834. text-overflow: ellipsis;
  835. margin-right: 10rpx;
  836. }
  837. &:nth-last-of-type(1) {
  838. width: max-content;
  839. color: #999999;
  840. font-size: 28rpx;
  841. }
  842. }
  843. }
  844. }
  845. }
  846. </style>