look.vue 21 KB

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