product.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831
  1. <template>
  2. <page-meta :page-style="'overflow:'+(show?'hidden':'visible')" ></page-meta>
  3. <view>
  4. <view class="product_image_box">
  5. <image class="product_image" :src="productInfo.thumb" mode="heightFix"></image>
  6. </view>
  7. <view class="product_info">
  8. <view class="stock_price">
  9. <view class="product_price">
  10. <text>{{productInfo.score}} 积分</text>
  11. </view>
  12. <view class="product_stock">剩{{productInfo.stock}}个</view>
  13. </view>
  14. <view class="product_name">{{productInfo.name}}</view>
  15. <view class="product_spec">{{productInfo.spec}}</view>
  16. </view>
  17. <view class="product_description">
  18. <rich-text :nodes="productInfo.description"></rich-text>
  19. </view>
  20. <view class="order_car">
  21. <button class="show_order" data-eventsync="true" @click="showSpecPopup(1)" >立即兑换</button>
  22. </view>
  23. <view class="to_bottom"> --- 到底了 --- </view>
  24. <uni-popup ref="specPopup" :show="true" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
  25. <view class="order_info">
  26. <view class="custom_addr" @click="showAddrPopup()">
  27. <view class="contact_user">
  28. <text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
  29. <text class="contact_name" >{{checkedAddr.contact_name}}</text>
  30. <text class="contact_phone" >{{checkedAddr.contact_phone}}</text>
  31. <text class="contact_more"> &gt;</text>
  32. </view>
  33. <view class="contact_addr">
  34. {{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}} {{checkedAddr.contact_addr}}
  35. </view>
  36. </view>
  37. <view class="car_item" >
  38. <view class="box_left">
  39. <image class="car_image" :src="productInfo.thumb" mode=""></image>
  40. </view>
  41. <view class="box_right">
  42. <view class="car_name">{{productInfo.name}}</view>
  43. <view class="stock_price">
  44. <view class="product_price">
  45. <text>{{productInfo.score}} 积分</text>
  46. </view>
  47. <view class="product_quantity_box">
  48. <button class="product_quantity_sub" @click="changeQuantity(-1)" data-eventsync="true">
  49. <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
  50. </button>
  51. <input type="number" class="product_quantity" placeholder="数量" v-model="quantity" @blur="changeQuantity(0)" ></input>
  52. <button class="product_quantity_add" @click="changeQuantity(+1)" data-eventsync="true">
  53. <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
  54. </button>
  55. </view>
  56. </view>
  57. <view class="product_stock">剩{{productInfo.stock}}个</view>
  58. </view>
  59. </view>
  60. <!-- 购物车增加两个撑高度 -->
  61. <view class="to_select_coupon" ></view>
  62. <view class="to_select_coupon" ></view>
  63. <view class="order_price" >合计: {{priceTotal}} 积分</view>
  64. <view class="order_btn">
  65. <button class="to_order" @click="createOrder()" data-eventsync="true" >兑换</button>
  66. </view>
  67. </view>
  68. </uni-popup>
  69. <uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF" >
  70. <view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator> </view>
  71. <view class="addr_list">
  72. <view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
  73. <view class="radio_label">
  74. <image class="radio_icon" :src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'" ></image>
  75. </view>
  76. <view class="contact_user">
  77. <text class="contact_name">{{item.contact_name}}</text>
  78. <text class="contact_phone">{{item.contact_phone}}</text>
  79. <text class="contact_default" v-if="item.is_default">默认</text>
  80. </view>
  81. <view class="contact_addr">
  82. {{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
  83. </view>
  84. </view>
  85. </view>
  86. <view class="create_box">
  87. <navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr" >新建收货地址</navigator>
  88. </view>
  89. </uni-popup>
  90. </view>
  91. </template>
  92. <script>
  93. export default {
  94. data() {
  95. return {
  96. show:false, // 使用Popup组件时,阻止禁止滚动穿透
  97. productInfo:{
  98. id:0,
  99. name:"",
  100. score:0,
  101. spec:"",
  102. stock:0,
  103. thumb:"",
  104. description:"",
  105. },
  106. requestParam:{
  107. id:0,
  108. },
  109. // 数量
  110. quantity:1,
  111. // 总价
  112. priceTotal:'0.00',
  113. // 规格选择按钮类型
  114. specBtnType: 1, // 1预约。2购物车
  115. // 地址列表
  116. addrList:[],
  117. // 已选地址
  118. checkedAddr:{
  119. id:0,
  120. contact_name:"",
  121. contact_phone:"",
  122. contact_province:"",
  123. contact_city:"",
  124. contact_area:"",
  125. contact_addr:"",
  126. is_default:0,
  127. },
  128. }
  129. },
  130. onLoad(param) {
  131. // 接受路由参数,产品ID
  132. this.requestParam.id = param.id;
  133. var that = this;
  134. // 监听地址变动
  135. uni.$on('addr_list_change',function(data){
  136. // 地址列表
  137. that.addrList = data.list;
  138. })
  139. },
  140. onShow() {
  141. // 如果存在产品ID的话
  142. if( this.requestParam.id > 0) {
  143. // 请求详情
  144. this.$http.request('api/score_product/get_detail',this.requestParam).then((re)=>{
  145. // 成功渲染数据
  146. if( re.code == 'success' ) {
  147. // 刷新数据
  148. this.productInfo = re.data;
  149. }
  150. });
  151. };
  152. },
  153. methods: {
  154. // 地址弹出层
  155. showAddrPopup(){
  156. // 显示下单弹出层
  157. this.$refs.addrPopup.open('bottom');
  158. },
  159. // 规格弹出层
  160. showSpecPopup(type){
  161. // 登录提示
  162. // if( !this.$checkAccess.alterLogin()) return ;
  163. // 显示下单弹出层
  164. this.$refs.specPopup.open('bottom');
  165. // 地址列表
  166. this.getAddrList();
  167. // 计算价格
  168. this.priceHandler();
  169. },
  170. // 数量调整
  171. changeQuantity(number){
  172. // 如果不是0.表示两侧按钮点击,0表示输入的修改
  173. if( number != 0 ) {
  174. // 计算个数
  175. this.quantity = this.quantity + number;
  176. }
  177. // 如果大于库存设置为库存
  178. if( this.quantity > this.productInfo.stock ) {
  179. this.quantity = this.productInfo.stock;
  180. uni.showToast({
  181. title:"库存不足",
  182. icon:"none"
  183. })
  184. }
  185. // 如果小于1.设置为1
  186. if( this.quantity < 1 ) {
  187. this.quantity = 1;
  188. uni.showToast({title:"数量不可以小于0",icon:"none"})
  189. }
  190. // 计算价格
  191. this.priceHandler();
  192. },
  193. // 创建订单
  194. createOrder(){
  195. // 不可预约
  196. if( !this.$checkAccess.alertCity() ) return;
  197. // 下单数量小于0
  198. if( this.quantity < 1 ) {
  199. uni.showToast({
  200. title:"至少兑换1个"
  201. })
  202. return;
  203. }
  204. // 如果大于库存设置为库存
  205. if( this.productInfo.stock < 1 ) {
  206. uni.showToast({
  207. title:"库存不足",
  208. icon:"none"
  209. })
  210. return;
  211. }
  212. // 地址未填
  213. if( !this.checkedAddr.id ) {
  214. uni.showToast({
  215. title:"请选择收货地址",
  216. icon:"none"
  217. })
  218. return;
  219. }
  220. // 请求接口
  221. this.$http.request('api/score_orders/create',{"product_id":this.productInfo.id,'buy_num':this.quantity,'addr_id':this.checkedAddr.id},'post').then((re)=>{
  222. // 判断结果
  223. if( re.code == 'success' ) {
  224. // 处理结果
  225. this.productInfo.stock = this.productInfo.stock - this.quantity;
  226. // 关闭弹窗
  227. this.$refs.specPopup.close();
  228. // 跳转到订单列表
  229. uni.navigateTo({url:"/pages/score/orders"});
  230. return ;
  231. }else{
  232. uni.showModal({title:re.msg,showCancel:false});
  233. }
  234. });
  235. },
  236. // 计算价格
  237. priceHandler(){
  238. // 小数点保留
  239. this.priceTotal = this.productInfo.score * this.quantity;
  240. },
  241. popupChange(e){
  242. // 禁止滚动穿透
  243. this.show = e.show
  244. },
  245. // 选择地址
  246. checkedAddrItem(item){
  247. this.checkedAddr = item;
  248. this.$refs.addrPopup.close();
  249. },
  250. getAddrList(){
  251. // 判断数据
  252. this.$http.request('api/custom_addr/get_list').then((callback)=>{
  253. // 获取成功
  254. if( callback.code == 'success' ){
  255. this.addrList = callback.data;
  256. // 如果有的话
  257. if( this.addrList.length ){
  258. // 获取默认的
  259. for (let i in this.addrList) {
  260. // 如果是默认的
  261. if( this.addrList[i].is_default ) this.checkedAddr = this.addrList[i];
  262. }
  263. // 如果没有默认的话
  264. if( !this.checkedAddr.id ){
  265. this.checkedAddr = this.addrList[this.addrList.length-1];
  266. }
  267. }
  268. }
  269. });
  270. }
  271. }
  272. }
  273. </script>
  274. <style lang="less">
  275. .product_image_box{
  276. display: block;
  277. overflow: hidden;
  278. background: #FFFFFF;
  279. margin: 10rpx auto;
  280. .product_image{
  281. display: block;
  282. margin: 0 auto;
  283. width: 750rpx;
  284. height: 750rpx;
  285. }
  286. }
  287. .product_info{
  288. display: block;
  289. background: #FFFFFF;
  290. margin: 10rpx 0rpx;
  291. padding: 10px 10px;
  292. .product_name{
  293. max-height: 80rpx;
  294. font-size: 30rpx;
  295. line-height: 40rpx;
  296. overflow: hidden;
  297. padding: 10rpx 0rpx;
  298. }
  299. .product_spec{
  300. color: #999999;
  301. font-size: 24rpx;
  302. line-height: 30rpx;
  303. }
  304. .stock_price{
  305. font-size: 20rpx;
  306. overflow: hidden;
  307. margin-top: 10rpx;
  308. line-height: 30rpx;
  309. .product_price{
  310. float: left;
  311. color: red;
  312. font-size: 38rpx;
  313. line-height: 60rpx;
  314. .product_market{
  315. font-size: 24rpx;
  316. color: #999999;
  317. line-height: 30rpx;
  318. margin-left: 10rpx;
  319. text-decoration: line-through;
  320. }
  321. }
  322. .product_stock{
  323. color: #333333;
  324. float: right;
  325. font-size: 20rpx;
  326. line-height: 60rpx;
  327. }
  328. }
  329. }
  330. // 描述简介
  331. .product_business{
  332. display: block;
  333. overflow: hidden;
  334. padding: 20rpx 20rpx;
  335. margin: 10rpx auto;
  336. background: #FFFFFF;
  337. .logopic{
  338. float: left;
  339. width: 80rpx;
  340. height: 80rpx;
  341. border-radius: 50%;
  342. margin-right: 20rpx;
  343. }
  344. .business_info{
  345. float: left;
  346. width: 600rpx;
  347. overflow: hidden;
  348. .business_name{
  349. font-size: 26rpx;
  350. line-height: 40rpx;
  351. }
  352. .business_desc{
  353. color: #999999;
  354. font-size: 24rpx;
  355. line-height: 40rpx;
  356. }
  357. }
  358. }
  359. .product_description{
  360. width: 700rpx;
  361. display: block;
  362. overflow: hidden;
  363. background: #FFFFFF;
  364. min-height: 600rpx;
  365. font-size: 26rpx;
  366. margin: 0rpx auto;
  367. line-height: 50rpx;
  368. padding: 10rpx 25rpx;
  369. [alt]{ //web_view图片
  370. max-width: 100%; // 避免图片超宽
  371. vertical-align: bottom; // 避免图片之间间隙
  372. }
  373. }
  374. .product_poster{
  375. display: block;
  376. overflow: hidden;
  377. padding: 10rpx 0rpx;
  378. margin: 10rpx auto;
  379. background: #FFFFFF;
  380. .product_image{
  381. width: 750rpx;
  382. display: block;
  383. }
  384. }
  385. .order_car{
  386. left: 0rpx;
  387. width: 750rpx;
  388. height: 140rpx;
  389. display: block;
  390. position: fixed;
  391. padding-top: 20rpx;
  392. background: #FFFFFF;
  393. bottom: var(--window-bottom);
  394. border-top: 2rpx solid #DDDDDD;
  395. .show_order{
  396. width: 700rpx;
  397. height: 80rpx;
  398. display: block;
  399. color: #FFFFFF;
  400. font-size: 30rpx;
  401. overflow: hidden;
  402. line-height: 80rpx;
  403. padding: 0rpx 0rpx;
  404. text-align: center;
  405. margin: 0rpx auto;
  406. border-radius: 40rpx;
  407. background-color: #E03519;
  408. }
  409. }
  410. .popup{
  411. overflow: hidden;
  412. .popup_title{
  413. display: block;
  414. overflow: hidden;
  415. margin: 0rpx auto;
  416. font-size: 36rpx;
  417. height: 120rpx;
  418. line-height: 120rpx;
  419. padding: 0rpx 20rpx;
  420. border-bottom: 10rpx solid #F8F8F8;
  421. .to_addr_page{
  422. float: right;
  423. color: #F59A23;
  424. display: block;
  425. height: 120rpx;
  426. line-height: 120rpx;
  427. font-size: 26rpx;
  428. padding: 0rpx 10rpx;
  429. }
  430. }
  431. .order_info{
  432. overflow: hidden;
  433. background: #FFFFFF;
  434. .custom_addr{
  435. width: 680rpx;
  436. display: block;
  437. font-size: 24rpx;
  438. overflow: hidden;
  439. margin: 0rpx auto;
  440. line-height: 40rpx;
  441. padding: 20rpx 35rpx;
  442. background-color: #FFFFFF;
  443. border-bottom: 2rpx solid #dddddd;
  444. .contact_user{
  445. display: block;
  446. font-size: 24rpx;
  447. line-height: 50rpx;
  448. .contact_none{
  449. color: #E03519;
  450. font-size: 26rpx;
  451. font-weight: bold;
  452. }
  453. .contact_name{
  454. font-size: 26rpx;
  455. font-weight: bold;
  456. margin-right: 16rpx;
  457. }
  458. .contact_more{
  459. float: right;
  460. font-size: 40rpx;
  461. font-weight: bold;
  462. }
  463. }
  464. .contact_addr{
  465. width: 620rpx;
  466. display: block;
  467. font-size: 24rpx;
  468. line-height: 30rpx;
  469. padding: 10rpx 5rpx;
  470. }
  471. }
  472. .min600{
  473. min-height: 600rpx;
  474. }
  475. .car_item{
  476. height: 200rpx;
  477. display: block;
  478. background: #FFFFFF;
  479. margin: 20rpx auto;
  480. .box_left{
  481. float: left;
  482. width: 160rpx;
  483. height: 200rpx;
  484. margin-left: 35rpx;
  485. .car_image{
  486. width: 160rpx;
  487. height: 160rpx;
  488. margin: 20rpx 0rpx;
  489. border-radius: 5rpx;
  490. }
  491. }
  492. .box_right{
  493. float: left;
  494. width: 485rpx;
  495. margin-left: 35rpx;
  496. padding-top: 20rpx;
  497. .car_name{
  498. max-height: 80rpx;
  499. font-size: 30rpx;
  500. line-height: 40rpx;
  501. overflow: hidden;
  502. padding: 0rpx 0rpx;
  503. }
  504. .car_spec{
  505. color: #999999;
  506. font-size: 24rpx;
  507. line-height: 30rpx;
  508. padding: 0rpx 0rpx;
  509. }
  510. .stock_price{
  511. width: 485rpx;
  512. color: #dddddd;
  513. font-size: 20rpx;
  514. overflow: hidden;
  515. margin-top: 10rpx;
  516. line-height: 30rpx;
  517. .product_price{
  518. float: left;
  519. color: red;
  520. font-size: 30rpx;
  521. line-height: 60rpx;
  522. .car_market{
  523. font-size: 24rpx;
  524. color: #999999;
  525. line-height: 30rpx;
  526. vertical-align: middle;
  527. text-decoration: line-through;
  528. }
  529. }
  530. .product_quantity_box{
  531. float: right;
  532. color: #333333;
  533. overflow: hidden;
  534. font-size: 24rpx;
  535. margin-top: 10rpx;
  536. text-align: center;
  537. .product_quantity_sub{
  538. float: left;
  539. border: none;
  540. height: 36rpx;
  541. background: none;
  542. text-align: center;
  543. line-height: 36rpx;
  544. padding: 10rpx 10rpx;
  545. .sub_icon{
  546. width: 22rpx;
  547. height: 22rpx;
  548. display: block;
  549. }
  550. }
  551. .product_quantity_sub::after{
  552. border: none;
  553. background: none;
  554. }
  555. .product_quantity{
  556. float: left;
  557. width: 100rpx;
  558. height: 36rpx;
  559. font-size: 24rpx;
  560. min-height: 36rpx;
  561. line-height: 36rpx;
  562. padding: 0rpx 0rpx;
  563. border-radius: 8rpx;
  564. border: 2rpx solid #dddddd;
  565. }
  566. .product_quantity_add{
  567. float: left;
  568. border: none;
  569. height: 36rpx;
  570. background: none;
  571. text-align: center;
  572. padding: 10rpx 10rpx;
  573. line-height: 36rpx;
  574. .add_icon{
  575. width: 22rpx;
  576. height: 22rpx;
  577. display: block;
  578. }
  579. }
  580. .product_quantity_add::after{
  581. border: none;
  582. background: none;
  583. }
  584. }
  585. }
  586. .product_stock{
  587. font-size: 20rpx;
  588. line-height: 60rpx;
  589. }
  590. }
  591. }
  592. .to_select_coupon{
  593. font-size: 28rpx;
  594. padding: 30rpx 35rpx;
  595. margin-bottom: 20rpx;
  596. .coupon_deduction{
  597. color: red;
  598. float: right;
  599. }
  600. }
  601. .order_price{
  602. font-size: 28rpx;
  603. text-align: right;
  604. margin: 0rpx 35rpx;
  605. padding: 20rpx 0rpx;
  606. border-top: 2rpx solid #DDDDDD;
  607. .coupon_deduction{
  608. color: red;
  609. float: right;
  610. }
  611. }
  612. .order_btn{
  613. width: 700rpx;
  614. height: 100rpx;
  615. display: block;
  616. margin: 0 auto;
  617. margin-top: 70rpx;
  618. line-height: 80rpx;
  619. text-align: center;
  620. font-size: 30rpx;
  621. .to_car{
  622. color: #FFFFFF;
  623. float: right;
  624. width: 700rpx;
  625. height: 80rpx;
  626. display: block;
  627. overflow: hidden;
  628. font-size: 30rpx;
  629. line-height: 80rpx;
  630. padding: 0rpx 0rpx;
  631. border-radius: 40rpx;
  632. border: 0rpx solid transparent;
  633. background-color: #F59A23;
  634. }
  635. .to_car::after{
  636. border: 0rpx solid transparent;
  637. }
  638. .to_order{
  639. color: #FFFFFF;
  640. float: right;
  641. width: 700rpx;
  642. height: 80rpx;
  643. display: block;
  644. font-size: 30rpx;
  645. overflow: hidden;
  646. line-height: 80rpx;
  647. padding: 0rpx 0rpx;
  648. border-radius: 40rpx;
  649. background-color: #E03519;
  650. border: 0rpx solid transparent;
  651. }
  652. .to_order::after{
  653. border: 0rpx solid transparent;
  654. }
  655. }
  656. }
  657. .coupon_list{
  658. display: block;
  659. overflow: hidden;
  660. min-height: 600rpx;
  661. margin: 10rpx auto;
  662. background: #FFFFFF;
  663. padding-bottom: 50rpx;
  664. .coupon_item{
  665. height: 200rpx;
  666. display: block;
  667. margin: 10rpx auto;
  668. border-bottom: 2rpx solid #DDDDDD;
  669. .box_left{
  670. float: left;
  671. width: 160rpx;
  672. height: 160rpx;
  673. font-size: 20rpx;
  674. text-align: center;
  675. margin-left: 35rpx;
  676. line-height: 60rpx;
  677. margin-top: 20rpx;
  678. background: pink;
  679. .rebate{
  680. width: 120rpx;
  681. height: 60rpx;
  682. margin: 0rpx auto;
  683. line-height: 60rpx;
  684. margin-top: 20rpx;
  685. overflow: hidden;
  686. white-space: nowrap;
  687. text-overflow: ellipsis;
  688. }
  689. }
  690. .box_right{
  691. float: left;
  692. width: 485rpx;
  693. margin-left: 35rpx;
  694. padding-top: 20rpx;
  695. .coupon_title{
  696. width: 485rpx;
  697. max-height: 80rpx;
  698. font-size: 30rpx;
  699. overflow: hidden;
  700. line-height: 40rpx;
  701. padding: 0rpx 0rpx;
  702. .coupon_name{
  703. float: left;
  704. height: 40rpx;
  705. width: 380rpx;
  706. }
  707. .coupon_status{
  708. width: 85rpx;
  709. float: right;
  710. color: #999999;
  711. font-size: 24rpx;
  712. }
  713. }
  714. .product_scope{
  715. width: 485rpx;
  716. height: 80rpx;
  717. color: #999999;
  718. font-size: 24rpx;
  719. overflow: hidden;
  720. line-height: 80rpx;
  721. .check_label{
  722. float: right;
  723. display: block;
  724. overflow: hidden;
  725. padding: 20rpx 20rpx;
  726. .isstd{
  727. line-height: 40rpx;
  728. }
  729. .checkbox{
  730. float: right;
  731. width: 40rpx;
  732. height: 40rpx;
  733. }
  734. }
  735. }
  736. .coupon_info{
  737. width: 485rpx;
  738. max-height: 80rpx;
  739. font-size: 30rpx;
  740. overflow: hidden;
  741. line-height: 40rpx;
  742. padding: 0rpx 0rpx;
  743. .coupon_exp{
  744. float: left;
  745. font-size: 20rpx;
  746. }
  747. }
  748. }
  749. }
  750. .coupon_item:last-child{
  751. border-bottom: none;
  752. }
  753. }
  754. .addr_list{
  755. width: 730rpx;
  756. display: block;
  757. overflow: hidden;
  758. margin: 0rpx auto;
  759. min-height: 500rpx;
  760. .addr_item{
  761. display: block;
  762. font-size: 24rpx;
  763. overflow: hidden;
  764. line-height: 40rpx;
  765. padding: 15rpx 10rpx;
  766. border-radius: 15rpx;
  767. border-bottom: 2rpx solid #dddddd;
  768. .radio_label{
  769. width: 40rpx;
  770. float: left;
  771. height: 50rpx;
  772. padding-top: 30rpx;
  773. margin-right: 20rpx;
  774. .radio_icon{
  775. float: left;
  776. width: 40rpx;
  777. height: 40rpx;
  778. }
  779. }
  780. .contact_user{
  781. float: left;
  782. width: 640rpx;
  783. display: block;
  784. height: 50rpx;
  785. font-size: 24rpx;
  786. line-height: 50rpx;
  787. .contact_name{
  788. font-size: 26rpx;
  789. font-weight: bold;
  790. margin-right: 16rpx;
  791. }
  792. .contact_default{
  793. color: #F59A23;
  794. font-size: 20rpx;
  795. margin-left: 16rpx;
  796. border: 1rpx solid #F59A23;
  797. }
  798. }
  799. .contact_addr{
  800. float: left;
  801. width: 640rpx;
  802. display: block;
  803. font-size: 24rpx;
  804. line-height: 30rpx;
  805. padding: 10rpx 5rpx;
  806. }
  807. }
  808. }
  809. .create_box{
  810. height: 140rpx;
  811. display: block;
  812. .create_addr{
  813. width: 700rpx;
  814. height: 80rpx;
  815. display: block;
  816. color: #FFFFFF;
  817. font-size: 30rpx;
  818. overflow: hidden;
  819. line-height: 80rpx;
  820. padding: 0rpx 0rpx;
  821. text-align: center;
  822. margin: 0rpx auto;
  823. margin-top: 20rpx;
  824. border-radius: 40rpx;
  825. background-color: #E03519;
  826. }
  827. }
  828. }
  829. </style>