look.vue 23 KB

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