pingDetails.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <view class="center">
  3. <!-- <view class="top"><image :src="list.data.background_image" mode=""></image></view> -->
  4. <swiper :autoplay="true" :interval="3000" :duration="1000" class="top" indicator-color="rgba(0, 0, 0, .2)" indicator-dots indicator-active-color="#fff">
  5. <swiper-item v-for="item in list.data.background_image.split(',')">
  6. <image :src="item" mode="">
  7. </swiper-item>
  8. </swiper>
  9. <view class="name-box">
  10. <view class="price-box">
  11. <text class="price">
  12. {{
  13. list.data.cost_money_type === list.data.cost_2_money_type
  14. ? list.data.cost * 1 + list.data.cost_money_type_name
  15. : list.data.cost * 1 + list.data.cost_money_type_name + '/' + list.data.cost_2 * 1 + list.data.cost_2_money_type_name
  16. }}
  17. </text>
  18. <!-- <text class="yuan">¥229</text> -->
  19. </view>
  20. <view class="name clamp">{{ list.data.name }}</view>
  21. <view class="info">
  22. <view class="info-item">门票:{{ list.data.ticket * 1 }}{{ list.data.ticket_money_type_name }}</view>
  23. <!-- <view class="info-item">销量:56件</view> -->
  24. <!-- <view class="info-item">浙江省台州市</view> -->
  25. </view>
  26. </view>
  27. <view class="tip-box">
  28. <view class="tip-titele">拼团玩法</view>
  29. <view class="tip-main">开团/参团-满员开团-拼中发货</view>
  30. </view>
  31. <view class="tip-box">
  32. <view class="tip-titele">拼团须知</view>
  33. <view class="tip-main">
  34. 本轮预约开始时间:{{ list.start }}
  35. <br />
  36. 本轮预约结束时间:{{ list.end }}
  37. <br />
  38. 本轮开奖时间:{{ list.next_pink.name }}
  39. <br />
  40. 下轮预约开始时间:{{ list.next_pink.name }}
  41. </view>
  42. </view>
  43. <view class="detail">
  44. <view class="detail-title">商品详情</view>
  45. <view class="systom"></view>
  46. </view>
  47. <view class="btn" @click="buy()">立即拼团</view>
  48. </view>
  49. </template>
  50. <script>
  51. import { lalaDetial } from '@/api/product.js';
  52. import { getTime } from '@/utils/rocessor.js';
  53. import uniNumberBox from '@/components/uni-number-box.vue';
  54. export default {
  55. components: {
  56. uniNumberBox
  57. },
  58. data() {
  59. return {
  60. id: '',
  61. list: {}
  62. };
  63. },
  64. onLoad(option) {
  65. this.id = option.id;
  66. this.loadData();
  67. },
  68. computed: {
  69. money() {
  70. return this.num * this.price * this.step;
  71. }
  72. },
  73. onShow() {},
  74. methods: {
  75. async loadData() {
  76. let obj = this;
  77. lalaDetial({}, obj.id).then(({ data }) => {
  78. obj.list = data;
  79. obj.list.end = getTime(data.next_pink.value - data.close_join * 60);
  80. //当前时间
  81. for (let i = 0; i < data.open_times.length; i++) {
  82. //拼团开始时间
  83. if (data.open_times[i].value == data.next_pink.value) {
  84. if (i != 0) {
  85. let j = i - 1;
  86. obj.list.start = getTime(data.open_times[j].value);
  87. } else {
  88. let date = data.open_times[0].name.split(' ');
  89. let start = date[0] + ' ' + data.lala_pink_open + ':00';
  90. start = new Date(start);
  91. start = start.getTime();
  92. obj.list.start = getTime(start);
  93. }
  94. }
  95. }
  96. console.log(obj.list);
  97. });
  98. },
  99. buy() {
  100. //当前时间
  101. let dateTime = new Date().valueOf();
  102. let start = new Date(this.list.start).valueOf();
  103. let end = new Date(this.list.end).valueOf();
  104. console.log(dateTime, start, end);
  105. if(dateTime < start){
  106. this.$api.msg('当前场次还未开始');
  107. return;
  108. }
  109. if(dateTime > end){
  110. this.$api.msg('当前场次已经结束,请等待下一场');
  111. return;
  112. }
  113. uni.navigateTo({
  114. url: '/pages/product/pingOrder?id=' + this.id
  115. });
  116. },
  117. changeCurrent(index) {
  118. this.current = index;
  119. }
  120. }
  121. };
  122. </script>
  123. <style lang="scss" scoped>
  124. page,
  125. .center {
  126. background: #f8f6f6;
  127. height: 100%;
  128. }
  129. .top {
  130. width: 750rpx;
  131. height: 710rpx;
  132. image {
  133. width: 100%;
  134. height: 100%;
  135. }
  136. }
  137. .name-box {
  138. padding: 30rpx 26rpx;
  139. line-height: 1;
  140. background-color: #ffffff;
  141. .price-box {
  142. font-size: 28rpx;
  143. font-family: PingFang SC;
  144. font-weight: bold;
  145. color: #e83f30;
  146. .price {
  147. font-size: 48rpx;
  148. }
  149. .yuan {
  150. padding-left: 10rpx;
  151. font-size: 30rpx;
  152. font-weight: 500;
  153. text-decoration: line-through;
  154. color: #999999;
  155. }
  156. }
  157. .name {
  158. font-size: 34rpx;
  159. font-family: PingFang SC;
  160. font-weight: bold;
  161. color: #1d2023;
  162. margin-top: 30rpx;
  163. }
  164. .info {
  165. display: flex;
  166. align-items: center;
  167. justify-content: space-between;
  168. margin-top: 30rpx;
  169. font-size: 24rpx;
  170. font-family: PingFang SC;
  171. font-weight: 500;
  172. color: #999999;
  173. }
  174. }
  175. .tip-box {
  176. margin-top: 20rpx;
  177. padding: 34rpx 60rpx 50rpx 30rpx;
  178. display: flex;
  179. align-items: flex-start;
  180. background-color: #ffffff;
  181. .tip-titele {
  182. font-size: 32rpx;
  183. font-family: PingFang SC;
  184. font-weight: bold;
  185. color: #3b3b3b;
  186. }
  187. .tip-main {
  188. margin-left: 30rpx;
  189. width: 500rpx;
  190. font-size: 26rpx;
  191. font-family: PingFang SC;
  192. font-weight: 500;
  193. color: #8a8a8a;
  194. }
  195. }
  196. .detail {
  197. .detail-title {
  198. width: 750rpx;
  199. height: 80rpx;
  200. line-height: 80rpx;
  201. text-align: center;
  202. font-size: 28rpx;
  203. font-family: PingFangSC;
  204. font-weight: bold;
  205. color: #1d2023;
  206. }
  207. }
  208. .btn {
  209. position: fixed;
  210. bottom: 0;
  211. left: 0;
  212. right: 0;
  213. width: 750rpx;
  214. height: 98rpx;
  215. background: linear-gradient(0deg, #2e58ff, #32c6ff);
  216. text-align: center;
  217. line-height: 98rpx;
  218. font-size: 36rpx;
  219. font-family: PingFang SC;
  220. font-weight: bold;
  221. color: #ffffff;
  222. }
  223. </style>