look.vue 21 KB

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