look.vue 21 KB

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