look.vue 22 KB

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