buydetails.vue 21 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018
  1. <template>
  2. <view class="container">
  3. <view class="detail-desc">
  4. <view class="d-header">
  5. <text>基本信息</text>
  6. </view>
  7. <view class="c-list">
  8. <view class="c-row b-b">
  9. <text class="tit">标题</text>
  10. <view class="con-list">
  11. <text>{{goods.goodsName}}</text>
  12. </view>
  13. </view>
  14. <view class="c-row b-b">
  15. <text class="tit">货名</text>
  16. <view class="con-list">
  17. <text>{{goods.goodsName}}</text>
  18. </view>
  19. </view>
  20. <view class="c-row b-b">
  21. <text class="tit">采购量(吨)</text>
  22. <view class="con-list">
  23. <text>{{goods.origin}}</text>
  24. </view>
  25. </view>
  26. <view class="c-row b-b">
  27. <text class="tit">最小成交量(吨)</text>
  28. <view class="con-list">
  29. <text>{{goods.level}}</text>
  30. </view>
  31. </view>
  32. <view class="c-row b-b">
  33. <text class="tit">类型</text>
  34. <view class="con-list">
  35. <text>{{goods.year}}</text>
  36. </view>
  37. </view>
  38. <view class="c-row b-b">
  39. <text class="tit">价格类型</text>
  40. <view class="con-list">
  41. <text>{{goods.packing}}</text>
  42. </view>
  43. </view>
  44. <view class="c-row b-b">
  45. <text class="tit">基差(元/吨)</text>
  46. <view class="con-list">
  47. <text>{{goods.minSale}}(吨)</text>
  48. </view>
  49. </view>
  50. <view class="c-row b-b">
  51. <text class="tit">收货地址</text>
  52. <view class="con-list">
  53. <text>{{numFilter(goods.total-goods.soldCount)}}</text>
  54. </view>
  55. </view>
  56. <view class="c-row b-b">
  57. <text class="tit">运费承担方</text>
  58. <view class="con-list">
  59. <text>{{goods.priceType}}</text>
  60. </view>
  61. </view>
  62. <view class="c-row b-b">
  63. <text class="tit">包装方式</text>
  64. <view class="con-list">
  65. <text>{{goods.stock}}</text>
  66. </view>
  67. </view>
  68. <view class="c-row b-b">
  69. <text class="tit">袋装备注</text>
  70. <view class="con-list">
  71. <text>{{goods.stock}}</text>
  72. </view>
  73. </view>
  74. <view class="c-row b-b">
  75. <text class="tit">买方</text>
  76. <view class="con-list">
  77. <text>{{goods.stock}}</text>
  78. </view>
  79. </view>
  80. <view class="c-row b-b">
  81. <text class="tit">买方电话</text>
  82. <view class="con-list">
  83. <text>{{goods.stock}}</text>
  84. </view>
  85. <button class='cu-btn bg-green shadow' @click="changePrice1">立即拨打</button>
  86. </view>
  87. </view>
  88. <view class="d-header">
  89. <text>货物要求</text>
  90. </view>
  91. <view class="c-list">
  92. <view class="c-row b-b">
  93. <text class="tit">水分(%){{'<='}}</text>
  94. <view class="con-list">
  95. <text>{{goods.impurity}}</text>
  96. </view>
  97. </view>
  98. <view class="c-row b-b">
  99. <text class="tit">容重(g/L){{'<='}}</text>
  100. <view class="con-list">
  101. <text>{{goods.moldy}}</text>
  102. </view>
  103. </view>
  104. <view class="c-row b-b">
  105. <text class="tit">热损伤(%){{'<='}}</text>
  106. <view class="con-list">
  107. <text>{{goods.bulkDensity}}</text>
  108. </view>
  109. </view>
  110. <view class="c-row b-b">
  111. <text class="tit">杂质(%){{'<='}}</text>
  112. <view class="con-list">
  113. <text>{{goods.smell}}</text>
  114. </view>
  115. </view>
  116. <view class="c-row b-b">
  117. <text class="tit">霉变粒(%){{'<='}}</text>
  118. <view class="con-list">
  119. <text>{{goods.heatLoss}}</text>
  120. </view>
  121. </view>
  122. <view class="c-row b-b">
  123. <text class="tit">不完整粒(%){{'<='}} </text>
  124. <view class="con-list">
  125. <text>{{goods.waterContent}}</text>
  126. </view>
  127. </view>
  128. <view class="c-row b-b">
  129. <text class="tit">蛋白(%){{'<='}} </text>
  130. <view class="con-list">
  131. <text>{{goods.protein}}</text>
  132. </view>
  133. </view>
  134. <view class="c-row b-b">
  135. <text class="tit">粒型</text>
  136. <view class="con-list">
  137. <text>{{goods.grainType}}</text>
  138. </view>
  139. </view>
  140. <view class="c-row b-b">
  141. <text class="tit">品级</text>
  142. <view class="con-list">
  143. <text>{{goods.grainType}}</text>
  144. </view>
  145. </view>
  146. <view class="c-row b-b">
  147. <text class="tit">产地</text>
  148. <view class="con-list">
  149. <text>{{goods.grainType}}</text>
  150. </view>
  151. </view>
  152. <view class="c-row b-b">
  153. <text class="tit">产出年份</text>
  154. <view class="con-list">
  155. <text>{{goods.grainType}}</text>
  156. </view>
  157. </view>
  158. </view>
  159. <view v-if="goods.userName" class="padding-xl" @click="navToDetailPage()">
  160. <button class="cu-btn block line-orange lg">
  161. <text class="cuIcon-upload"></text> 上传图片</button>
  162. </view>
  163. </view>
  164. <!-- 底部操作菜单 -->
  165. <view class="page-bottom">
  166. <view class="action-btn-group">
  167. <button type="primary" class=" action-btn no-border buy-now-btn" @click="contactUs">立即沟通</button>
  168. <button v-if="goods.status == 1" type="primary" class=" action-btn no-border add-cart-btn" >交易结束</button>
  169. <button v-else type="primary" class=" action-btn no-border add-cart-btn" @click="tradeNow">我要买粮</button>
  170. </view>
  171. </view>
  172. </view>
  173. </template>
  174. <script>
  175. import uniNumberBox from '@/components/uni-number-box.vue';
  176. import {
  177. mapState
  178. } from 'vuex';
  179. export default {
  180. components: {
  181. uniNumberBox
  182. },
  183. data() {
  184. return {
  185. swiperCurrent: 0,
  186. titleNViewBackground: '',
  187. swiperLength: 0,
  188. goods: {
  189. id: undefined,
  190. title: undefined,
  191. soldCount: 0,
  192. total: 0,
  193. price: 0,
  194. origin: undefined,
  195. stock: undefined,
  196. level: undefined,
  197. goodsName: undefined,
  198. smell: undefined,
  199. priceType: undefined,
  200. packing: undefined,
  201. year: undefined,
  202. waterContent: 0,
  203. bulkDensity: 0,
  204. moldy: 0,
  205. impurity: 0,
  206. overFlow: 0,
  207. seller:'',
  208. sellerPhone:'',
  209. minSale: 0,
  210. status:0
  211. },
  212. share:{
  213. title: '',
  214. imageUrl:'https://taohaoliang.oss-cn-beijing.aliyuncs.com/shareLogo.png',
  215. },
  216. reason:"",
  217. price:undefined
  218. };
  219. },
  220. onShow() {
  221. },
  222. onLoad(options) {
  223. const that = this
  224. uni.showLoading({
  225. title: '正在加载',
  226. mask:true
  227. })
  228. that.$api.request('goods', 'getSaleDetailInfo', {
  229. id: options.id
  230. }, failres => {
  231. if(failres.errmsg){
  232. uni.showToast({
  233. title: failres.errmsg,
  234. icon: 'none',
  235. duration: 2000
  236. })
  237. }
  238. else{
  239. uni.showToast({
  240. title: "系统异常,请联系管理员",
  241. icon: 'none',
  242. duration: 2000
  243. })
  244. }
  245. uni.hideLoading()
  246. }).then(res => {
  247. console.log(res.data)
  248. that.goods = res.data
  249. that.swiperLength = 3
  250. if(that.goods.soldCount >= that.goods.total){
  251. that.goods.status = 1
  252. }
  253. that.share.title = that.goods.title
  254. uni.hideLoading()
  255. })
  256. },
  257. computed: {
  258. ...mapState(['hasLogin','userInfo'])
  259. },
  260. methods: {
  261. numFilter (value) {
  262. if(!value){
  263. return 0
  264. }
  265. // 截取当前数据到小数点后两位
  266. let realVal = parseFloat(value).toFixed(2)
  267. return realVal
  268. },
  269. swiperChange(e) {
  270. const index = e.detail.current;
  271. this.swiperCurrent = index;
  272. },
  273. contactUs() {
  274. const that = this
  275. uni.makePhoneCall({
  276. // 手机号
  277. phoneNumber: that.goods.sellerPhone,
  278. // 成功回调
  279. success: (res) => {
  280. console.log('调用成功!')
  281. },
  282. // 失败回调
  283. fail: (res) => {
  284. console.log('调用失败!')
  285. }
  286. });
  287. },
  288. ViewImage(e) {
  289. var img = [];
  290. img.push(e)
  291. uni.previewImage({
  292. current:0,
  293. urls: img
  294. });
  295. },
  296. priceInput(e) {
  297. this.price = e.detail.value
  298. },
  299. reasonInput(e) {
  300. this.reason = e.detail.value
  301. },
  302. navToDetailPage() {
  303. const that = this
  304. uni.navigateTo({
  305. url: `/pageA/product/detail_upload?id=${that.goods.id}`
  306. })
  307. },
  308. changePrice(options){
  309. const that = this
  310. uni.showLoading({
  311. title: '正在加载'
  312. })
  313. if(!that.price){
  314. that.$api.msg('请输入修改价格')
  315. return
  316. }
  317. that.$api.request('sale', 'changePrice', {
  318. id: that.goods.id,
  319. price:that.price
  320. }, failres => {
  321. if(failres.errmsg){
  322. uni.showToast({
  323. title: failres.errmsg,
  324. icon: 'none',
  325. duration: 2000
  326. })
  327. }
  328. else{
  329. uni.showToast({
  330. title: "系统异常,请联系管理员",
  331. icon: 'none',
  332. duration: 2000
  333. })
  334. }
  335. uni.hideLoading()
  336. }).then(res => {
  337. that.$api.msg('修改成功')
  338. uni.hideLoading()
  339. setTimeout(()=>{uni.navigateBack()},1000);
  340. })
  341. },
  342. endSale(){
  343. const that = this
  344. uni.showLoading({
  345. title: '正在加载',
  346. mask:true
  347. })
  348. that.$api.request('sale', 'endSale', {
  349. id: that.goods.id,
  350. reason:that.reason
  351. }, failres => {
  352. if(failres.errmsg){
  353. uni.showToast({
  354. title: failres.errmsg,
  355. icon: 'none',
  356. duration: 2000
  357. })
  358. }
  359. else{
  360. uni.showToast({
  361. title: "系统异常,请联系管理员",
  362. icon: 'none',
  363. duration: 2000
  364. })
  365. }
  366. uni.hideLoading()
  367. }).then(res => {
  368. that.$api.msg('终止成功')
  369. uni.hideLoading()
  370. setTimeout(()=>{uni.navigateBack()},1000);
  371. })
  372. },
  373. tradeNow(){
  374. if (this.hasLogin) {
  375. uni.showModal({
  376. title: '登录提示',
  377. content: '您尚未登录,是否立即登录?',
  378. showCancel: true,
  379. confirmText: '登录',
  380. success: (e) => {
  381. if (e.confirm) {
  382. uni.navigateTo({
  383. url: '/pages/public/login'
  384. })
  385. }
  386. },
  387. fail: () => {},
  388. complete: () => {}
  389. })
  390. }
  391. else{
  392. const that = this
  393. uni.navigateTo({
  394. url: `/pageA/product/business_buy?id=${that.goods.id}&packing=${that.goods.packing}}&province=${that.goods.province}
  395. &city=${that.goods.city}&area=${that.goods.area}&storeName=${that.goods.storeName}&seller=${that.goods.seller}
  396. &companyId=${that.goods.companyId}&sellerPhone=${that.goods.sellerPhone}&minSale=${that.goods.minSale}
  397. &exsitCount=${that.goods.total}&isFutures=${that.goods.isFutures}
  398. &basis=${that.goods.basis}&basisSmall=${that.goods.basisSmall}&basisBig=${that.goods.basisBig}
  399. &unloadingFee=${that.goods.unloadingFee}`
  400. })
  401. }
  402. }
  403. },
  404. }
  405. </script>
  406. <style scoped lang='scss'>
  407. page {
  408. background: $page-color-base;
  409. /* padding-bottom: 160upx; */
  410. }
  411. .container{
  412. padding-bottom: 160upx;
  413. }
  414. .icon-you {
  415. font-size: $font-base + 2upx;
  416. color: #888;
  417. }
  418. .carousel {
  419. width: 100%;
  420. height: 350upx;
  421. .carousel-item {
  422. width: 100%;
  423. height: 100%;
  424. padding: 0 28upx;
  425. overflow: hidden;
  426. }
  427. image {
  428. width: 100%;
  429. height: 100%;
  430. border-radius: 10upx;
  431. }
  432. }
  433. .carousel-section {
  434. padding: 0;
  435. .titleNview-placing {
  436. padding-top: 0;
  437. height: 0;
  438. }
  439. .carousel {
  440. .carousel-item {
  441. padding: 0;
  442. }
  443. }
  444. .swiper-dots {
  445. left: 45upx;
  446. bottom: 40upx;
  447. }
  448. }
  449. /* 分享 */
  450. .share-section {
  451. display: flex;
  452. align-items: center;
  453. color: $font-color-base;
  454. background: linear-gradient(left, #fdf5f6, #fbebf6);
  455. padding: 12upx 30upx;
  456. .share-icon {
  457. display: flex;
  458. align-items: center;
  459. width: 70upx;
  460. height: 30upx;
  461. line-height: 1;
  462. border: 1px solid $uni-color-primary;
  463. border-radius: 4upx;
  464. position: relative;
  465. overflow: hidden;
  466. font-size: 22upx;
  467. color: $uni-color-primary;
  468. &:after {
  469. content: '';
  470. width: 50upx;
  471. height: 50upx;
  472. border-radius: 50%;
  473. left: -20upx;
  474. top: -12upx;
  475. position: absolute;
  476. background: $uni-color-primary;
  477. }
  478. }
  479. .icon-xingxing {
  480. position: relative;
  481. z-index: 1;
  482. font-size: 24upx;
  483. margin-left: 2upx;
  484. margin-right: 10upx;
  485. color: #fff;
  486. line-height: 1;
  487. }
  488. .tit {
  489. font-size: $font-base;
  490. margin-left: 10upx;
  491. }
  492. .icon-bangzhu1 {
  493. padding: 10upx;
  494. font-size: 30upx;
  495. line-height: 1;
  496. }
  497. .share-btn {
  498. flex: 1;
  499. text-align: right;
  500. font-size: $font-sm;
  501. color: $uni-color-primary;
  502. }
  503. .icon-you {
  504. font-size: $font-sm;
  505. margin-left: 4upx;
  506. color: $uni-color-primary;
  507. }
  508. }
  509. .c-list {
  510. font-size: $font-sm + 2upx;
  511. color: $font-color-base;
  512. background: #fff;
  513. .c-row {
  514. display: flex;
  515. align-items: center;
  516. padding: 20upx 30upx;
  517. position: relative;
  518. }
  519. .tit {
  520. width: 220upx;
  521. }
  522. .con {
  523. flex: 1;
  524. color: $font-color-dark;
  525. .selected-text {
  526. margin-right: 10upx;
  527. }
  528. }
  529. .bz-list {
  530. height: 40upx;
  531. font-size: $font-sm+2upx;
  532. color: $font-color-dark;
  533. text {
  534. display: inline-block;
  535. margin-right: 30upx;
  536. }
  537. }
  538. .con-list {
  539. flex: 1;
  540. display: flex;
  541. flex-direction: column;
  542. color: $font-color-dark;
  543. line-height: 40upx;
  544. text-align: right;
  545. padding-right: 20upx;
  546. }
  547. .red {
  548. color: $uni-color-primary;
  549. }
  550. }
  551. /* 评价 */
  552. .eva-section {
  553. display: flex;
  554. flex-direction: column;
  555. padding: 20upx 30upx;
  556. background: #fff;
  557. margin-top: 16upx;
  558. .e-header {
  559. display: flex;
  560. align-items: center;
  561. height: 70upx;
  562. font-size: $font-sm + 2upx;
  563. color: $font-color-light;
  564. .tit {
  565. font-size: $font-base + 2upx;
  566. color: $font-color-dark;
  567. margin-right: 4upx;
  568. }
  569. .tip {
  570. flex: 1;
  571. text-align: right;
  572. }
  573. .icon-you {
  574. margin-left: 10upx;
  575. }
  576. }
  577. }
  578. .eva-box {
  579. display: flex;
  580. padding: 20upx 0;
  581. .portrait {
  582. flex-shrink: 0;
  583. width: 80upx;
  584. height: 80upx;
  585. border-radius: 100px;
  586. }
  587. .right {
  588. flex: 1;
  589. display: flex;
  590. flex-direction: column;
  591. font-size: $font-base;
  592. color: $font-color-base;
  593. padding-left: 26upx;
  594. .con {
  595. font-size: $font-base;
  596. color: $font-color-dark;
  597. padding: 20upx 0;
  598. }
  599. .bot {
  600. display: flex;
  601. justify-content: space-between;
  602. font-size: $font-sm;
  603. color: $font-color-light;
  604. }
  605. }
  606. }
  607. /* 详情 */
  608. .detail-desc {
  609. background: #fff;
  610. margin-top: 16upx;
  611. width: 750upx;
  612. .d-header {
  613. display: flex;
  614. justify-content: center;
  615. align-items: center;
  616. height: 80upx;
  617. font-size: $font-base + 2upx;
  618. color: $font-color-dark;
  619. position: relative;
  620. text {
  621. padding: 0 20upx;
  622. background: #fff;
  623. position: relative;
  624. z-index: 1;
  625. }
  626. &:after {
  627. position: absolute;
  628. left: 50%;
  629. top: 50%;
  630. transform: translateX(-50%);
  631. width: 300upx;
  632. height: 0;
  633. content: '';
  634. border-bottom: 1px solid #ccc;
  635. }
  636. }
  637. }
  638. /* 规格选择弹窗 */
  639. .attr-content {
  640. padding: 10upx 30upx;
  641. .a-t {
  642. display: flex;
  643. image {
  644. width: 170upx;
  645. height: 170upx;
  646. flex-shrink: 0;
  647. margin-top: -40upx;
  648. border-radius: 8upx;
  649. ;
  650. }
  651. .right {
  652. display: flex;
  653. flex-direction: column;
  654. padding-left: 24upx;
  655. font-size: $font-sm + 2upx;
  656. color: $font-color-base;
  657. line-height: 42upx;
  658. .price {
  659. font-size: $font-lg;
  660. color: $uni-color-primary;
  661. margin-bottom: 10upx;
  662. }
  663. .selected-text {
  664. margin-right: 10upx;
  665. }
  666. }
  667. }
  668. .attr-list {
  669. display: flex;
  670. flex-direction: column;
  671. font-size: $font-base + 2upx;
  672. color: $font-color-base;
  673. padding-top: 30upx;
  674. padding-left: 10upx;
  675. }
  676. .item-list {
  677. padding: 30upx 0 0;
  678. display: flex;
  679. flex-wrap: wrap;
  680. text {
  681. display: flex;
  682. align-items: center;
  683. justify-content: center;
  684. background: #eee;
  685. margin-right: 20upx;
  686. margin-bottom: 20upx;
  687. border-radius: 100upx;
  688. min-width: 60upx;
  689. height: 60upx;
  690. padding: 0 20upx;
  691. font-size: $font-base;
  692. color: $font-color-dark;
  693. }
  694. .selected {
  695. background: #fbebee;
  696. color: $uni-color-primary;
  697. }
  698. }
  699. }
  700. /* 弹出层 */
  701. .popup {
  702. position: fixed;
  703. left: 0;
  704. top: 0;
  705. right: 0;
  706. bottom: 0;
  707. z-index: 99;
  708. &.show {
  709. display: block;
  710. .mask {
  711. animation: showPopup 0.2s linear both;
  712. }
  713. .layer {
  714. animation: showLayer 0.2s linear both;
  715. }
  716. }
  717. &.hide {
  718. .mask {
  719. animation: hidePopup 0.2s linear both;
  720. }
  721. .layer {
  722. animation: hideLayer 0.2s linear both;
  723. }
  724. }
  725. &.none {
  726. display: none;
  727. }
  728. .mask {
  729. position: fixed;
  730. top: 0;
  731. width: 100%;
  732. height: 100%;
  733. z-index: 1;
  734. background-color: rgba(0, 0, 0, 0.4);
  735. }
  736. .layer {
  737. position: fixed;
  738. z-index: 99;
  739. bottom: 0;
  740. width: 100%;
  741. min-height: 40vh;
  742. border-radius: 10upx 10upx 0 0;
  743. background-color: #fff;
  744. .btn {
  745. height: 66upx;
  746. line-height: 66upx;
  747. border-radius: 100upx;
  748. background: $uni-color-primary;
  749. font-size: $font-base + 2upx;
  750. color: #fff;
  751. margin: 30upx auto 20upx;
  752. }
  753. }
  754. @keyframes showPopup {
  755. 0% {
  756. opacity: 0;
  757. }
  758. 100% {
  759. opacity: 1;
  760. }
  761. }
  762. @keyframes hidePopup {
  763. 0% {
  764. opacity: 1;
  765. }
  766. 100% {
  767. opacity: 0;
  768. }
  769. }
  770. @keyframes showLayer {
  771. 0% {
  772. transform: translateY(120%);
  773. }
  774. 100% {
  775. transform: translateY(0%);
  776. }
  777. }
  778. @keyframes hideLayer {
  779. 0% {
  780. transform: translateY(0);
  781. }
  782. 100% {
  783. transform: translateY(120%);
  784. }
  785. }
  786. }
  787. .swiper-dots {
  788. display: flex;
  789. position: absolute;
  790. left: 60upx;
  791. bottom: 15upx;
  792. width: 72upx;
  793. height: 36upx;
  794. 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==);
  795. background-size: 100% 100%;
  796. .num {
  797. width: 36upx;
  798. height: 36upx;
  799. border-radius: 50px;
  800. font-size: 24upx;
  801. color: #fff;
  802. text-align: center;
  803. line-height: 36upx;
  804. }
  805. .sign {
  806. position: absolute;
  807. top: 0;
  808. left: 50%;
  809. line-height: 36upx;
  810. font-size: 12upx;
  811. color: #fff;
  812. transform: translateX(-50%);
  813. }
  814. }
  815. /* 底部操作菜单 */
  816. .page-bottom {
  817. position: fixed;
  818. left: 30upx;
  819. bottom: 30upx;
  820. z-index: 95;
  821. display: flex;
  822. justify-content: center;
  823. align-items: center;
  824. width: 690upx;
  825. height: 100upx;
  826. background: rgba(255, 255, 255, .9);
  827. box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
  828. border-radius: 16upx;
  829. .p-b-btn {
  830. display: flex;
  831. flex-direction: column;
  832. align-items: center;
  833. justify-content: center;
  834. font-size: $font-sm;
  835. color: $font-color-base;
  836. width: 96upx;
  837. height: 80upx;
  838. .yticon {
  839. font-size: 40upx;
  840. line-height: 48upx;
  841. color: $font-color-light;
  842. }
  843. &.active,
  844. &.active .yticon {
  845. color: $uni-color-primary;
  846. }
  847. .icon-fenxiang2 {
  848. font-size: 42upx;
  849. transform: translateY(-2upx);
  850. }
  851. .icon-shoucang {
  852. font-size: 46upx;
  853. }
  854. }
  855. }
  856. .rich-img {
  857. width: 100%;
  858. height: auto;
  859. margin: 0;
  860. padding: 0;
  861. line-height: 0px;
  862. }
  863. button::after {
  864. border: none;
  865. }
  866. /* 销售信息 */
  867. .introduce-section {
  868. background: #fff;
  869. padding: 20upx 30upx;
  870. padding-bottom: 100upx;
  871. .guess-item {
  872. padding-bottom: 20upx;
  873. border-bottom: 1px solid #ccc;
  874. }
  875. .title {
  876. font-size: 28upx;
  877. color: $font-color-dark;
  878. font-weight:bold;
  879. height: 50upx;
  880. line-height: 50upx;
  881. flex:2.5;
  882. }
  883. .title-tip {
  884. flex:1.5;
  885. }
  886. .price-box {
  887. display: flex;
  888. align-items: baseline;
  889. height: 120rpx;
  890. padding: 10upx 0;
  891. font-size: 26upx;
  892. color: $uni-color-primary;
  893. }
  894. .price {
  895. font-size: $font-lg + 2upx;
  896. }
  897. .m-price {
  898. margin: 0 12upx;
  899. color: $font-color-light;
  900. text-decoration: line-through;
  901. }
  902. .coupon-tip {
  903. align-items: center;
  904. padding: 4upx 10upx;
  905. background: $uni-color-primary;
  906. font-size: $font-sm;
  907. color: #fff;
  908. border-radius: 6upx;
  909. line-height: 1;
  910. transform: translateY(-4upx);
  911. }
  912. .bot-row {
  913. display: flex;
  914. align-items: center;
  915. height: 50upx;
  916. font-size: $font-sm;
  917. color: $font-color-light;
  918. view {
  919. flex: 1;
  920. }
  921. }
  922. }
  923. </style>