buydetails.vue 22 KB

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