look.vue 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081
  1. <template>
  2. <view class="center">
  3. <view class="c-list">
  4. <view class="xinxiup">
  5. <view class="c-row b-b">
  6. <text class="tit">合同编号:</text>
  7. <view class="con-list">
  8. <text>{{goods.contractNo}}({{goods.goodsName}})</text>
  9. </view>
  10. </view>
  11. <view class="c-row b-b">
  12. <text class="tit">买方名称:</text>
  13. <view class="con-list">
  14. <text>{{goods.contracter}}</text>
  15. </view>
  16. </view>
  17. <view class="c-row">
  18. <text class="tit">累计收发:</text>
  19. <view class="con-list">
  20. <text style="font-size: 18px">{{sendout}}<text class="hair">发</text>{{collect}}<text
  21. class="collect">收</text></text>
  22. <!-- <text>{{goods.level}}收</text> -->
  23. </view>
  24. </view>
  25. </view>
  26. <view v-for="(item , index) in carlist" :Key="index" class="forxinxi">
  27. <view class="c-row carNos">
  28. <text>{{item.carNo}} ({{item.tranCarNo}})</text>
  29. <view class="con-list">
  30. <text>{{item.sendDateStart}}<text class="hair">发</text></text>
  31. </view>
  32. </view>
  33. <view class="c-row b-b">
  34. <text class="tit">结算价(元/吨)</text>
  35. <view class="con-list">
  36. <text>{{item.settlementPrice}}</text>
  37. </view>
  38. </view>
  39. <view class="c-row b-b">
  40. <text class="tit">净重(吨)</text>
  41. <view class="con-list">
  42. <text style="font-size: 18px;">{{item.loadNetWeight}}<text
  43. class="hair">发</text>{{item.unloadNetWeight}}<text class="collect">收</text></text>
  44. </view>
  45. </view>
  46. <view class="c-row b-b">
  47. <text class="tit">扣款(元/吨)</text>
  48. <view class="con-list">
  49. <text>{{item.deductionAmount}}</text>
  50. </view>
  51. </view>
  52. <view class="c-row b-b" v-if=" item.deductionItems != null">
  53. <text class="tit">扣款原因</text>
  54. <view class="con-list">
  55. <text>{{item.deductionItems}}</text>
  56. </view>
  57. </view>
  58. <view v-if='item.loadPoundImg'>
  59. <view class="poundtitle">发货磅单</view>
  60. <view class="poundlists">
  61. <image :src="item.loadPoundImg" mode="" class="poundlist"></image>
  62. </view>
  63. </view>
  64. <view v-if='item.unloadPoundImg'>
  65. <view class="poundtitle">收货磅单</view>
  66. <view class="poundlists">
  67. <image :src="item.unloadPoundImg" mode="" class="poundlist"></image>
  68. </view>
  69. </view>
  70. <button v-if='item.confirmFlag != 3 && item.status == "已送达"' class=" btn btns unload" style="background-color: #22C572; color: #FFFFFF ;width:80%;"
  71. @click="confirmunload(item)" >确认卸货</button>
  72. </view>
  73. </view>
  74. <view class="addcarwrap">
  75. <view class="addcar" style="background-color: #FFFFFF;"
  76. @click="commit1(goods)">
  77. +
  78. 添加发车信息</view>
  79. </view>
  80. <view v-if='imgstatus' class='shade'>
  81. <view class='shade-content'>
  82. <image v-if='img' style='width:100px;height:100px;' :src='img'></image>
  83. <button style='' @click='imgstatus=false'>取消</button>
  84. </view>
  85. </view>
  86. </view>
  87. </template>
  88. <script>
  89. import uniNumberBox from '@/components/uni-number-box.vue';
  90. import {
  91. mapState
  92. } from 'vuex';
  93. export default {
  94. components: {
  95. uniNumberBox
  96. },
  97. data() {
  98. return {
  99. carlist: [],
  100. swiperCurrent: 0,
  101. titleNViewBackground: '',
  102. swiperLength: 0,
  103. id: '',
  104. goods: {
  105. // id:"",
  106. // contractNo:'',
  107. // contractNo:'',
  108. // unloadPoundImg:'',
  109. // loadPoundImg:'',
  110. // carNo:'',
  111. // sendDateStart:'',
  112. // settlementPrice:'',
  113. // deductionAmount:'',
  114. // deductionItems:'',
  115. },
  116. gooods1: {
  117. contractNo: '',
  118. },
  119. img: '',
  120. share: {
  121. title: '',
  122. imageUrl: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/shareLogo.png',
  123. },
  124. imgstatus: false,
  125. reason: "",
  126. price: undefined,
  127. imgstatus:false,
  128. reason:"",
  129. price:undefined,
  130. planId:'',
  131. };
  132. },
  133. onShow() {
  134. this.loaddata()
  135. },
  136. onLoad(option) {
  137. this.goods.goodsName = option.goodsName
  138. this.goods.contracter = option.contracter
  139. this.id = option.id
  140. this.planId=option.planId
  141. this.goods.contractNo = option.contractNo
  142. },
  143. computed: {
  144. ...mapState(['hasLogin', 'userInfo']),
  145. sendout() {
  146. var num = 0
  147. for (var i = 0; i < this.carlist.length; i++) {
  148. num += this.carlist[i].loadNetWeight
  149. }
  150. return num
  151. },
  152. collect() {
  153. var num = 0
  154. for (var i = 0; i < this.carlist.length; i++) {
  155. num += this.carlist[i].unloadNetWeight
  156. }
  157. return num
  158. }
  159. },
  160. methods: {
  161. unload(item) {
  162. this.img = item.unloadPoundImg
  163. this.imgstatus = true
  164. },
  165. shipments(item) {
  166. this.img = item.loadPoundImg
  167. this.imgstatus = true
  168. },
  169. commit1() {
  170. var tranCarNo = ''
  171. if (this.carlist.length <= 9) {
  172. tranCarNo = 'C00' + (this.carlist.length + 1)
  173. } else if (this.carlist.length < 100 && this.carlist.length > 9) {
  174. tranCarNo = 'C0' + (this.carlist.length + 1)
  175. } else if (this.carlist.length < 1000 && this.carlist.length > 99) {
  176. tranCarNo = 'C' + (this.carlist.length + 1)
  177. }
  178. var that = this
  179. uni.navigateTo({
  180. url: `/pageB/contract/contract_detail?contractNo=`
  181. +that.goods.contractNo+'&goodsName='+that.goods.goodsName+'&tranCarNo='+tranCarNo+'&planId='+that.planId
  182. })
  183. },
  184. confirmunload(item) {
  185. this.$api.doRequest('post', '/tranCarInfo/api/confirmUnloading', {
  186. id: item.id
  187. }).then(res => {
  188. if (res.data.code == 200) {
  189. uni.showToast({
  190. title: '卸货成功',
  191. icon: 'none',
  192. duration: 2000
  193. })
  194. item.confirmFlag = 3
  195. }
  196. })
  197. .catch(res => {
  198. if(res.errmsg){
  199. uni.showToast({
  200. title: res.errmsg,
  201. icon: 'none',
  202. duration: 2000
  203. })
  204. }
  205. else{
  206. uni.showToast({
  207. title: "系统异常,请联系管理员",
  208. icon: 'none',
  209. duration: 2000
  210. })
  211. }
  212. });
  213. },
  214. loaddata() {
  215. this.$api.doRequest('get', '/tranCarInfo/api/selectTranCarInfoNum', {
  216. contractNo: this.goods.contractNo
  217. }, 'application/json;charset=UTF-8').then(res => {
  218. if (res.data.code == 200) {
  219. this.carlist = res.data.data
  220. }
  221. })
  222. .catch(res => {
  223. if(res.errmsg){
  224. uni.showToast({
  225. title: res.errmsg,
  226. icon: 'none',
  227. duration: 2000
  228. })
  229. }
  230. else{
  231. uni.showToast({
  232. title: "系统异常,请联系管理员",
  233. icon: 'none',
  234. duration: 2000
  235. })
  236. }
  237. });
  238. },
  239. ViewImage(e) {
  240. var img = [];
  241. img.push(e)
  242. uni.previewImage({
  243. current: 0,
  244. urls: img
  245. });
  246. },
  247. priceInput(e) {
  248. this.price = e.detail.value
  249. },
  250. reasonInput(e) {
  251. this.reason = e.detail.value
  252. },
  253. // navToDetailPage() {
  254. // const that = this
  255. // uni.navigateTo({
  256. // url: `/pageA/product/detail_upload?id=${that.goods.id}`
  257. // })
  258. // },
  259. endSale() {
  260. const that = this
  261. uni.showLoading({
  262. title: '正在加载',
  263. mask: true
  264. })
  265. that.$api.request('sale', 'endSale', {
  266. id: that.goods.id,
  267. reason: that.reason
  268. }, failres => {
  269. if(failres.errmsg){
  270. uni.showToast({
  271. title: failres.errmsg,
  272. icon: 'none',
  273. duration: 2000
  274. })
  275. }
  276. else{
  277. uni.showToast({
  278. title: "系统异常,请联系管理员",
  279. icon: 'none',
  280. duration: 2000
  281. })
  282. }
  283. uni.hideLoading()
  284. }).then(res => {
  285. that.$api.msg('终止成功')
  286. uni.hideLoading()
  287. setTimeout(() => {
  288. uni.navigateBack()
  289. }, 1000);
  290. })
  291. },
  292. tradeNow() {
  293. if (!this.hasLogin) {
  294. uni.showModal({
  295. title: '登录提示',
  296. content: '您尚未登录,是否立即登录?',
  297. showCancel: true,
  298. confirmText: '登录',
  299. success: (e) => {
  300. if (e.confirm) {
  301. uni.navigateTo({
  302. url: '/pages/public/login'
  303. })
  304. }
  305. },
  306. fail: () => {},
  307. complete: () => {}
  308. })
  309. } else {
  310. const that = this
  311. uni.navigateTo({
  312. url: `/pageA/product/trade?id=${that.goods.id}&packing=${that.goods.packing}}&province=${that.goods.province}
  313. &city=${that.goods.city}&area=${that.goods.area}&storeName=${that.goods.storeName}&seller=${that.goods.seller}
  314. &companyId=${that.goods.companyId}&sellerPhone=${that.goods.sellerPhone}&minSale=${that.goods.minSale}
  315. &exsitCount=${that.goods.total}&isFutures=${that.goods.isFutures}
  316. &basis=${that.goods.basis}&basisSmall=${that.goods.basisSmall}&basisBig=${that.goods.basisBig}
  317. &unloadingFee=${that.goods.unloadingFee}`
  318. })
  319. }
  320. }
  321. },
  322. }
  323. </script>
  324. <style lang='scss' scoped>
  325. .center {
  326. padding: 10px 20px;
  327. background-color: #F5F6FA;
  328. margin-bottom: 50px;
  329. }
  330. page {
  331. background: $page-color-base;
  332. /* padding-bottom: 160upx; */
  333. }
  334. .container {
  335. padding: 10px 20px;
  336. background-color: #F5F6FA;
  337. }
  338. .icon-you {
  339. font-size: $font-base + 2upx;
  340. color: #888;
  341. }
  342. .carousel {
  343. width: 100%;
  344. height: 350upx;
  345. .carousel-item {
  346. width: 100%;
  347. height: 100%;
  348. padding: 0 28upx;
  349. overflow: hidden;
  350. }
  351. image {
  352. width: 100%;
  353. height: 100%;
  354. border-radius: 10upx;
  355. }
  356. }
  357. .carousel-section {
  358. padding: 0;
  359. .titleNview-placing {
  360. padding-top: 0;
  361. height: 0;
  362. }
  363. .carousel {
  364. .carousel-item {
  365. padding: 0;
  366. }
  367. }
  368. .swiper-dots {
  369. left: 45upx;
  370. bottom: 40upx;
  371. }
  372. }
  373. /* 分享 */
  374. .share-section {
  375. display: flex;
  376. align-items: center;
  377. color: $font-color-base;
  378. background: linear-gradient(left, #fdf5f6, #fbebf6);
  379. padding: 12upx 30upx;
  380. .share-icon {
  381. display: flex;
  382. align-items: center;
  383. width: 70upx;
  384. height: 30upx;
  385. line-height: 1;
  386. border: 1px solid $uni-color-primary;
  387. border-radius: 4upx;
  388. position: relative;
  389. overflow: hidden;
  390. font-size: 22upx;
  391. color: $uni-color-primary;
  392. &:after {
  393. content: '';
  394. width: 50upx;
  395. height: 50upx;
  396. border-radius: 50%;
  397. left: -20upx;
  398. top: -12upx;
  399. position: absolute;
  400. background: $uni-color-primary;
  401. }
  402. }
  403. .icon-xingxing {
  404. position: relative;
  405. z-index: 1;
  406. font-size: 24upx;
  407. margin-left: 2upx;
  408. margin-right: 10upx;
  409. color: #fff;
  410. line-height: 1;
  411. }
  412. .tit {
  413. font-size: $font-base;
  414. margin-left: 10upx;
  415. }
  416. .icon-bangzhu1 {
  417. padding: 10upx;
  418. font-size: 30upx;
  419. line-height: 1;
  420. }
  421. .share-btn {
  422. flex: 1;
  423. text-align: right;
  424. font-size: $font-sm;
  425. color: $uni-color-primary;
  426. }
  427. .icon-you {
  428. font-size: $font-sm;
  429. margin-left: 4upx;
  430. color: $uni-color-primary;
  431. }
  432. }
  433. /* .c-list {
  434. font-size: $font-sm + 2upx;
  435. color: $font-color-base;
  436. background: #fff;
  437. .c-row {
  438. display: flex;
  439. align-items: center;
  440. padding: 20upx 30upx;
  441. position: relative;
  442. }
  443. .tit {
  444. width: 220upx;
  445. }
  446. .con {
  447. flex: 1;
  448. color: $font-color-dark;
  449. .selected-text {
  450. margin-right: 10upx;
  451. }
  452. }
  453. .bz-list {
  454. height: 40upx;
  455. font-size: $font-sm+2upx;
  456. color: $font-color-dark;
  457. text {
  458. display: inline-block;
  459. margin-right: 30upx;
  460. }
  461. }
  462. .con-list {
  463. flex: 1;
  464. display: flex;
  465. flex-direction: column;
  466. color: $font-color-dark;
  467. line-height: 40upx;
  468. text-align: right;
  469. padding-right: 20upx;
  470. }
  471. .red {
  472. color: $uni-color-primary;
  473. }
  474. } */
  475. /* 评价 */
  476. .eva-section {
  477. display: flex;
  478. flex-direction: column;
  479. padding: 20upx 30upx;
  480. background: #fff;
  481. margin-top: 16upx;
  482. .e-header {
  483. display: flex;
  484. align-items: center;
  485. height: 70upx;
  486. font-size: $font-sm + 2upx;
  487. color: $font-color-light;
  488. .tit {
  489. font-size: $font-base + 2upx;
  490. color: $font-color-dark;
  491. margin-right: 4upx;
  492. }
  493. .tip {
  494. flex: 1;
  495. text-align: right;
  496. }
  497. .icon-you {
  498. margin-left: 10upx;
  499. }
  500. }
  501. }
  502. .eva-box {
  503. display: flex;
  504. padding: 20upx 0;
  505. .portrait {
  506. flex-shrink: 0;
  507. width: 80upx;
  508. height: 80upx;
  509. border-radius: 100px;
  510. }
  511. .right {
  512. flex: 1;
  513. display: flex;
  514. flex-direction: column;
  515. font-size: $font-base;
  516. color: $font-color-base;
  517. padding-left: 26upx;
  518. .con {
  519. font-size: $font-base;
  520. color: $font-color-dark;
  521. padding: 20upx 0;
  522. }
  523. .bot {
  524. display: flex;
  525. justify-content: space-between;
  526. font-size: $font-sm;
  527. color: $font-color-light;
  528. }
  529. }
  530. }
  531. /* 详情 */
  532. .detail-desc {
  533. background: #fff;
  534. margin-top: 16upx;
  535. width: 750upx;
  536. .d-header {
  537. display: flex;
  538. justify-content: center;
  539. align-items: center;
  540. height: 80upx;
  541. font-size: $font-base + 2upx;
  542. color: $font-color-dark;
  543. position: relative;
  544. text {
  545. padding: 0 20upx;
  546. background: #fff;
  547. position: relative;
  548. z-index: 1;
  549. }
  550. &:after {
  551. position: absolute;
  552. left: 50%;
  553. top: 50%;
  554. transform: translateX(-50%);
  555. width: 300upx;
  556. height: 0;
  557. content: '';
  558. border-bottom: 1px solid #ccc;
  559. }
  560. }
  561. }
  562. /* 规格选择弹窗 */
  563. .attr-content {
  564. padding: 10upx 30upx;
  565. .a-t {
  566. display: flex;
  567. image {
  568. width: 170upx;
  569. height: 170upx;
  570. flex-shrink: 0;
  571. margin-top: -40upx;
  572. border-radius: 8upx;
  573. ;
  574. }
  575. .right {
  576. display: flex;
  577. flex-direction: column;
  578. padding-left: 24upx;
  579. font-size: $font-sm + 2upx;
  580. color: $font-color-base;
  581. line-height: 42upx;
  582. .price {
  583. font-size: $font-lg;
  584. color: $uni-color-primary;
  585. margin-bottom: 10upx;
  586. }
  587. .selected-text {
  588. margin-right: 10upx;
  589. }
  590. }
  591. }
  592. .attr-list {
  593. display: flex;
  594. flex-direction: column;
  595. font-size: $font-base + 2upx;
  596. color: $font-color-base;
  597. padding-top: 30upx;
  598. padding-left: 10upx;
  599. }
  600. .item-list {
  601. padding: 30upx 0 0;
  602. display: flex;
  603. flex-wrap: wrap;
  604. text {
  605. display: flex;
  606. align-items: center;
  607. justify-content: center;
  608. background: #eee;
  609. margin-right: 20upx;
  610. margin-bottom: 20upx;
  611. border-radius: 100upx;
  612. min-width: 60upx;
  613. height: 60upx;
  614. padding: 0 20upx;
  615. font-size: $font-base;
  616. color: $font-color-dark;
  617. }
  618. .selected {
  619. background: #fbebee;
  620. color: $uni-color-primary;
  621. }
  622. }
  623. }
  624. /* 弹出层 */
  625. .popup {
  626. position: fixed;
  627. left: 0;
  628. top: 0;
  629. right: 0;
  630. bottom: 0;
  631. z-index: 99;
  632. &.show {
  633. display: block;
  634. .mask {
  635. animation: showPopup 0.2s linear both;
  636. }
  637. .layer {
  638. animation: showLayer 0.2s linear both;
  639. }
  640. }
  641. &.hide {
  642. .mask {
  643. animation: hidePopup 0.2s linear both;
  644. }
  645. .layer {
  646. animation: hideLayer 0.2s linear both;
  647. }
  648. }
  649. &.none {
  650. display: none;
  651. }
  652. .mask {
  653. position: fixed;
  654. top: 0;
  655. width: 100%;
  656. height: 100%;
  657. z-index: 1;
  658. background-color: rgba(0, 0, 0, 0.4);
  659. }
  660. .layer {
  661. position: fixed;
  662. z-index: 99;
  663. bottom: 0;
  664. width: 100%;
  665. min-height: 40vh;
  666. border-radius: 10upx 10upx 0 0;
  667. background-color: #fff;
  668. .btn {
  669. height: 66upx;
  670. line-height: 66upx;
  671. border-radius: 100upx;
  672. background: $uni-color-primary;
  673. font-size: $font-base + 2upx;
  674. color: #fff;
  675. margin: 30upx auto 20upx;
  676. }
  677. }
  678. @keyframes showPopup {
  679. 0% {
  680. opacity: 0;
  681. }
  682. 100% {
  683. opacity: 1;
  684. }
  685. }
  686. @keyframes hidePopup {
  687. 0% {
  688. opacity: 1;
  689. }
  690. 100% {
  691. opacity: 0;
  692. }
  693. }
  694. @keyframes showLayer {
  695. 0% {
  696. transform: translateY(120%);
  697. }
  698. 100% {
  699. transform: translateY(0%);
  700. }
  701. }
  702. @keyframes hideLayer {
  703. 0% {
  704. transform: translateY(0);
  705. }
  706. 100% {
  707. transform: translateY(120%);
  708. }
  709. }
  710. }
  711. .swiper-dots {
  712. display: flex;
  713. position: absolute;
  714. left: 60upx;
  715. bottom: 15upx;
  716. width: 72upx;
  717. height: 36upx;
  718. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
  719. background-size: 100% 100%;
  720. .num {
  721. width: 36upx;
  722. height: 36upx;
  723. border-radius: 50px;
  724. font-size: 24upx;
  725. color: #fff;
  726. text-align: center;
  727. line-height: 36upx;
  728. }
  729. .sign {
  730. position: absolute;
  731. top: 0;
  732. left: 50%;
  733. line-height: 36upx;
  734. font-size: 12upx;
  735. color: #fff;
  736. transform: translateX(-50%);
  737. }
  738. }
  739. /* 底部操作菜单 */
  740. .page-bottom {
  741. position: fixed;
  742. left: 30upx;
  743. bottom: 30upx;
  744. z-index: 95;
  745. display: flex;
  746. justify-content: center;
  747. align-items: center;
  748. width: 690upx;
  749. height: 100upx;
  750. background: rgba(255, 255, 255, .9);
  751. box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
  752. border-radius: 16upx;
  753. .p-b-btn {
  754. display: flex;
  755. flex-direction: column;
  756. align-items: center;
  757. justify-content: center;
  758. font-size: $font-sm;
  759. color: $font-color-base;
  760. width: 96upx;
  761. height: 80upx;
  762. .yticon {
  763. font-size: 40upx;
  764. line-height: 48upx;
  765. color: $font-color-light;
  766. }
  767. &.active,
  768. &.active .yticon {
  769. color: $uni-color-primary;
  770. }
  771. .icon-fenxiang2 {
  772. font-size: 42upx;
  773. transform: translateY(-2upx);
  774. }
  775. .icon-shoucang {
  776. font-size: 46upx;
  777. }
  778. }
  779. }
  780. .rich-img {
  781. width: 100%;
  782. height: auto;
  783. margin: 0;
  784. padding: 0;
  785. line-height: 0px;
  786. }
  787. button::after {
  788. border: none;
  789. }
  790. /* 销售信息 */
  791. .introduce-section {
  792. background: #fff;
  793. padding: 20upx 30upx;
  794. padding-bottom: 100upx;
  795. .guess-item {
  796. padding-bottom: 20upx;
  797. border-bottom: 1px solid #ccc;
  798. }
  799. .title {
  800. font-size: 28upx;
  801. color: $font-color-dark;
  802. font-weight: bold;
  803. height: 50upx;
  804. line-height: 50upx;
  805. flex: 2.5;
  806. }
  807. .title-tip {
  808. flex: 1.5;
  809. }
  810. .price-box {
  811. display: flex;
  812. align-items: baseline;
  813. height: 120rpx;
  814. padding: 10upx 0;
  815. font-size: 26upx;
  816. color: $uni-color-primary;
  817. }
  818. .price {
  819. font-size: $font-lg + 2upx;
  820. }
  821. .m-price {
  822. margin: 0 12upx;
  823. color: $font-color-light;
  824. text-decoration: line-through;
  825. }
  826. .coupon-tip {
  827. align-items: center;
  828. padding: 4upx 10upx;
  829. background: $uni-color-primary;
  830. font-size: $font-sm;
  831. color: #fff;
  832. border-radius: 6upx;
  833. line-height: 1;
  834. transform: translateY(-4upx);
  835. }
  836. .bot-row {
  837. display: flex;
  838. align-items: center;
  839. height: 50upx;
  840. font-size: $font-sm;
  841. color: $font-color-light;
  842. view {
  843. flex: 1;
  844. }
  845. }
  846. }
  847. .shade {
  848. position: fixed;
  849. top: 0;
  850. left: 0;
  851. width: 100%;
  852. background: rgba(0, 0, 0, 0.5);
  853. height: 100%;
  854. z-index: 999999;
  855. }
  856. .shade-content {
  857. background: #fff;
  858. position: absolute;
  859. top: 50%;
  860. left: 50%;
  861. transform: translateX(-50%) translateY(-50%);
  862. z-index: 999999;
  863. text-align: center;
  864. width: 325px;
  865. padding: 10px;
  866. }
  867. .c-row {
  868. display: -webkit-box;
  869. display: -webkit-flex;
  870. display: flex;
  871. -webkit-box-align: center;
  872. -webkit-align-items: center;
  873. align-items: center;
  874. padding: 20rpx 30rpx;
  875. position: relative;
  876. }
  877. .con-list {
  878. -webkit-box-flex: 1;
  879. -webkit-flex: 1;
  880. flex: 1;
  881. display: -webkit-box;
  882. display: -webkit-flex;
  883. display: flex;
  884. -webkit-box-orient: vertical;
  885. -webkit-box-direction: normal;
  886. -webkit-flex-direction: column;
  887. flex-direction: column;
  888. color: #303133;
  889. line-height: 40rpx;
  890. text-align: right;
  891. padding-right: 20rpx;
  892. font-size: 14px;
  893. }
  894. .xinxiup {
  895. background-color: #FFFFFF;
  896. border-radius: 20px;
  897. padding: 5px 10px;
  898. }
  899. .forxinxi {
  900. background-color: #FFFFFF;
  901. margin-top: 20px;
  902. border-radius: 20px;
  903. padding-bottom:20px;
  904. /* padding: 5px 10px; */
  905. }
  906. .carNos {
  907. background-color: #EEEFF4;
  908. border-top-left-radius: 20px;
  909. border-top-right-radius: 20px;
  910. height: 60px;
  911. font-size: 18px;
  912. font-weight: 600;
  913. }
  914. .hair {
  915. width: 24px;
  916. height: 24px;
  917. border-radius: 10px;
  918. font-size: 10px;
  919. color: #22C572;
  920. background-color: #E9F8F0;
  921. }
  922. .collect {
  923. width: 24px;
  924. height: 24px;
  925. border-radius: 10px;
  926. font-size: 10px;
  927. color: #FE6430;
  928. background-color: #FEECE6;
  929. }
  930. .btn {
  931. margin-top: 10px;
  932. background-color: #FFFFFF;
  933. border-radius: 25px;
  934. border: none;
  935. }
  936. .btns {
  937. background-color: #22C572;
  938. }
  939. .poundlist{
  940. width: 62px;
  941. height: 85px;
  942. }
  943. .poundlists{
  944. margin-left: 14px;
  945. margin-top: 10px;
  946. }
  947. .poundtitle{
  948. font-size: 15px;
  949. margin-left: 14px;
  950. margin-top: 10px;
  951. }
  952. .unload{
  953. }
  954. .addcarwrap{
  955. position:fixed;bottom:0;
  956. width:100%;
  957. left:0;
  958. z-index:9999;
  959. }
  960. .addcarwrap .addcar{
  961. text-align:center;
  962. margin: 0 auto;
  963. height:46px;
  964. line-height:46px;
  965. color:#00C265;
  966. }
  967. </style>