look.vue 21 KB

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