auctionDetail.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <view class="container">
  3. <view class="auction-end-date">
  4. <text class="iconfont iconshijian"></text>
  5. {{goodData.auctionEndTime}}结束
  6. </view>
  7. <view class="good-info-box">
  8. <image class="goods-img" :src="goodData.imgPath"></image>
  9. <view class="goods-info">
  10. <view class="goods-name">{{goodData.productName}}</view>
  11. <view class="goods-price">
  12. <text class="text">当前价格¥</text>
  13. <text class="price">{{goodData.currentPrice}}/{{goodData.unit}}</text>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="auction-handle">
  18. <view class="auction-price">
  19. <uni-icons type="minus-filled" size="52" color="#A67A54" @click="reducePrice()"></uni-icons>
  20. <text class="price">{{price}}</text>
  21. <uni-icons type="plus-filled" size="52" color="#A67A54" @click="addPrice()"></uni-icons>
  22. </view>
  23. <view class="auction-tip">本商品每次加价不得低于¥{{goodData.auctionMinAddPrice}}</view>
  24. <view class="handle-button" @click="submitAuction()">立即出价</view>
  25. </view>
  26. <view class="auction-list">
  27. <view class="auction-row" v-for="(item, index) in auctionList" :key="index">
  28. <view class="auction-line"></view>
  29. <view class="auction-point"></view>
  30. <view class="auction-title" v-if="item.nickname || item.paySum">
  31. <text class="auction-name" v-if="item.nickname">{{item.nickname}}出价:</text>
  32. <text class="auction-price" v-if="item.paySum">¥{{item.paySum}}</text>
  33. </view>
  34. <text class="auction-date" v-if="item.payTime">{{item.payTime}}</text>
  35. </view>
  36. </view>
  37. <u-top-tips ref="uTips"></u-top-tips>
  38. </view>
  39. </template>
  40. <script>
  41. const NET = require('@/utils/request')
  42. const API = require('@/config/api')
  43. export default {
  44. data() {
  45. return {
  46. goodId: '',
  47. goodData: {
  48. imgPath: '',
  49. productName: '',
  50. currentPrice: 0,
  51. auctionMinAddPrice: 0,
  52. unit: '',
  53. },
  54. price: 0,
  55. auctionBaseList: [{
  56. nickname: '拍品起拍价:',
  57. paySum: '',
  58. }, {
  59. payTime: '竞拍截止时间:'
  60. }, {
  61. payTime: '竞拍正式开始!\n'
  62. }],
  63. auctionList: [],
  64. timer: null
  65. }
  66. },
  67. onLoad(options) {
  68. this.goodId = options.goodId
  69. this.getAuctionData()
  70. },
  71. onShow() {
  72. this.timer = setInterval(() => {
  73. this.getAuctionData()
  74. }, 5000)
  75. },
  76. onHide() {
  77. clearInterval(this.timer)
  78. },
  79. onUnload() {
  80. clearInterval(this.timer)
  81. },
  82. methods: {
  83. // 获取拍卖详情
  84. getAuctionData() {
  85. NET.request(API.getAuctionDetail + this.goodId, {}, 'GET').then(res => {
  86. this.goodData = {
  87. imgPath: res.data.imgPath,
  88. productName: res.data.productName,
  89. currentPrice: parseFloat(res.data.currentPrice),
  90. auctionMinAddPrice: parseFloat(res.data.auctionMinAddPrice),
  91. unit: res.data.unit,
  92. auctionEndTime: res.data.auctionEndTime,
  93. }
  94. this.auctionBaseList[1].payTime = '竞拍截止时间:' + res.data.auctionEndTime
  95. this.auctionList = res.data.userPriceResVOs.concat(this.auctionBaseList)
  96. if (this.price <= this.goodData.currentPrice + this.goodData.auctionMinAddPrice) {
  97. this.price = this.goodData.currentPrice + this.goodData.auctionMinAddPrice
  98. }
  99. }).catch(error => {
  100. this.$refs.uTips.show({
  101. title: error.data.msg,
  102. type: 'warning',
  103. })
  104. })
  105. },
  106. // 减价
  107. reducePrice() {
  108. if (this.price > this.goodData.currentPrice + this.goodData.auctionMinAddPrice) {
  109. this.price -= this.goodData.auctionMinAddPrice
  110. this.price = parseFloat(this.price.toFixed(2))
  111. }
  112. },
  113. // 加价
  114. addPrice() {
  115. this.price += this.goodData.auctionMinAddPrice
  116. this.price = parseFloat(this.price.toFixed(2))
  117. },
  118. // 去支付
  119. submitAuction() {
  120. uni.navigateTo({
  121. url: '/pagesGood/orderPay?flag=2&orderType=2&paySum=' + this.price
  122. });
  123. },
  124. },
  125. }
  126. </script>
  127. <style lang="less" scoped>
  128. page {
  129. width: 100%;
  130. height: 100%;
  131. }
  132. .container {
  133. width: 100%;
  134. height: 100%;
  135. float: left;
  136. background-color: #f7f7f7;
  137. .auction-end-date {
  138. width: 100%;
  139. height: 34px;
  140. float: left;
  141. background: #51A539;
  142. font-size: 15px;
  143. font-family: PingFang SC;
  144. color: #FFFFFF;
  145. line-height: 34px;
  146. text-align: center;
  147. .iconshijian {
  148. font-size: 16px;
  149. margin-right: 8px;
  150. }
  151. }
  152. .good-info-box {
  153. width: 100%;
  154. height: 112px;
  155. float: left;
  156. box-sizing: border-box;
  157. padding: 12px 15px;
  158. background: #FFFFFF;
  159. box-shadow: 0px 1px 5px 0px rgba(101, 101, 101, 0.43);
  160. .goods-img {
  161. width: 88px;
  162. height: 88px;
  163. object-fit: cover;
  164. float: left;
  165. border-radius: 5px;
  166. margin-right: 16px;
  167. }
  168. .goods-info {
  169. width: calc(100% - 104px);
  170. height: 88px;
  171. float: left;
  172. .goods-name {
  173. width: 100%;
  174. height: 36px;
  175. float: left;
  176. margin: 6px 0 20px 0;
  177. font-size: 15px;
  178. font-family: PingFang SC;
  179. color: #333333;
  180. line-height: 18px;
  181. overflow: hidden;
  182. text-overflow: ellipsis;
  183. display: -webkit-box;
  184. -webkit-line-clamp: 2;
  185. -webkit-box-orient: vertical;
  186. word-wrap: break-word;
  187. }
  188. .goods-price {
  189. width: 100%;
  190. height: 26px;
  191. float: left;
  192. font-family: PingFang SC;
  193. color: #51A539;
  194. line-height: 26px;
  195. .text {
  196. font-size: 18px;
  197. }
  198. .price {
  199. font-size: 24px;
  200. }
  201. }
  202. }
  203. }
  204. .auction-handle {
  205. width: 100%;
  206. height: 172px;
  207. float: left;
  208. .auction-price {
  209. width: 100%;
  210. height: 82px;
  211. float: left;
  212. text-align: center;
  213. white-space: nowrap;
  214. line-height: 82px;
  215. .price {
  216. font-size: 56px;
  217. font-family: PingFang SC;
  218. color: #333333;
  219. margin: 0 32px;
  220. }
  221. }
  222. .auction-tip {
  223. width: 100%;
  224. height: 18px;
  225. float: left;
  226. font-size: 12px;
  227. font-family: PingFang SC;
  228. color: #51A539;
  229. line-height: 18px;
  230. text-align: center;
  231. }
  232. .handle-button {
  233. width: 234px;
  234. height: 46px;
  235. float: left;
  236. background: #51A539;
  237. border-radius: 24px;
  238. margin-top: 10px;
  239. position: relative;
  240. left: 50%;
  241. transform: translateX(-50%);
  242. font-size: 24px;
  243. font-family: PingFang SC;
  244. color: #FFFFFF;
  245. line-height: 46px;
  246. text-align: center;
  247. }
  248. }
  249. .auction-list {
  250. width: 100%;
  251. height: calc(100% - 318px);
  252. float: left;
  253. background: #FFFFFF;
  254. box-shadow: 0px 1px 5px 0px rgba(101, 101, 101, 0.43);
  255. border-radius: 15px 15px 0px 0px;
  256. box-sizing: border-box;
  257. padding: 2px 15px 15px 15px;
  258. overflow-y: auto;
  259. .auction-row {
  260. width: 100%;
  261. float: left;
  262. box-sizing: border-box;
  263. padding: 14px 0 14px 32px;
  264. position: relative;
  265. .auction-line {
  266. width: 1px;
  267. position: absolute;
  268. background: #F1F3F5;
  269. left: 7px;
  270. top: 0;
  271. bottom: 0;
  272. }
  273. .auction-point {
  274. width: 8px;
  275. height: 8px;
  276. position: absolute;
  277. left: 4px;
  278. top: 50%;
  279. transform: translateY(-50%);
  280. background: #DBDDDF;
  281. border-radius: 50%;
  282. }
  283. .auction-title {
  284. font-family: PingFang SC;
  285. line-height: 20px;
  286. .auction-name {
  287. font-size: 12px;
  288. color: #333333;
  289. }
  290. .auction-price {
  291. font-size: 15px;
  292. color: #51A539;
  293. }
  294. }
  295. .auction-date {
  296. width: 100%;
  297. float: left;
  298. font-size: 12px;
  299. font-family: PingFang SC;
  300. color: #656565;
  301. line-height: 20px;
  302. }
  303. }
  304. .auction-row:first-child {
  305. .auction-line {
  306. top: 50%;
  307. }
  308. .auction-point {
  309. width: 16px;
  310. height: 16px;
  311. left: 0px;
  312. background: #51A539;
  313. }
  314. }
  315. .auction-row:last-child {
  316. .auction-line {
  317. bottom: 50%;
  318. }
  319. }
  320. }
  321. }
  322. </style>