goodsDetail.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view class="goods-detail">
  3. <view>
  4. <!-- 商品信息 -->
  5. <view class="goods-head">
  6. <view class="goods-imgs">
  7. <view class="goods-staus">已售罄</view>
  8. <u-swiper height="340" :border-radius="0" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
  9. </view>
  10. <view class="goods-name ellipsis-two">的房间间里撒酒疯撒发撒将发生登录撒地方就房间里撒酒疯撒发撒将发生登录撒地方就</view>
  11. <view class="goods-price">
  12. <view><text>50</text>乐豆</view>
  13. <view>
  14. <u-number-box v-model="nums"></u-number-box>
  15. </view>
  16. </view>
  17. </view>
  18. <!-- 商品属性 -->
  19. <view class="goods-attr">
  20. <view>
  21. <view>运费</view>
  22. <view>免运费</view>
  23. </view>
  24. <view>
  25. <view>限购</view>
  26. <view>每人限购1件</view>
  27. </view>
  28. <view>
  29. <view>售后</view>
  30. <view>兑换商品,一经售出,不支持退换货</view>
  31. </view>
  32. </view>
  33. <!-- 商品详情 -->
  34. <view class="goods-content">
  35. asdfsafsaf
  36. </view>
  37. </view>
  38. <!-- 底部浮动按钮 -->
  39. <view class="bottom-btns">
  40. <view><u-button type="primary" @click="addCart">加入购物车</u-button></view>
  41. <view><u-button type="error">立即下单</u-button></view>
  42. </view>
  43. <!-- 购物车 -->
  44. <uni-cart-fix></uni-cart-fix>
  45. </view>
  46. </template>
  47. <script>
  48. export default {
  49. data() {
  50. return {
  51. imageList:[
  52. {image:'https://cdn.uviewui.com/uview/example/fade.jpg'},
  53. {image:'https://cdn.uviewui.com/uview/example/fade.jpg'}
  54. ],
  55. nums:1
  56. };
  57. },
  58. methods: {
  59. // 加入购物车
  60. addCart(){
  61. // 请求接口
  62. this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + this.nums
  63. },
  64. // 立即下单
  65. toOrder(){
  66. }
  67. },
  68. }
  69. </script>
  70. <style lang="scss">
  71. page{
  72. height: 100%;
  73. }
  74. .goods-detail{
  75. width: 100%;
  76. height: 100%;
  77. display: flex;
  78. flex-direction: column;
  79. > view{
  80. &:first-child{
  81. flex-grow: 1;
  82. overflow: auto;
  83. }
  84. }
  85. .goods-head{
  86. background: #FFFFFF;
  87. box-shadow: 1px 1px 3px #eee;
  88. .goods-imgs{
  89. position: relative;
  90. .goods-staus{
  91. width: 150rpx;
  92. height: 150rpx;
  93. position: absolute;
  94. z-index: 10000;
  95. border-radius: 100%;
  96. background: rgba($color: #000000, $alpha: 0.5);
  97. text-align: center;
  98. line-height: 150rpx;
  99. left: 50%;
  100. top: 50%;
  101. margin-top: -75rpx;
  102. margin-left: -75rpx;
  103. color: #eee;
  104. }
  105. }
  106. .goods-name{
  107. padding:0 20upx;
  108. margin: 10upx 0;
  109. line-height: 40upx;
  110. }
  111. .goods-price{
  112. display: flex;
  113. align-items: center;
  114. justify-content: space-between;
  115. padding:0 20upx 20upx;
  116. >view{
  117. &:first-child{
  118. font-size: 22upx;
  119. text{
  120. color: red;
  121. font-size: 36upx;
  122. margin-right: 6upx;
  123. }
  124. }
  125. }
  126. }
  127. }
  128. .goods-attr{
  129. margin: 20upx 0;
  130. background: #FFFFFF;
  131. padding: 20upx;
  132. box-shadow: 1px 1px 3px #eee;
  133. > view{
  134. display: flex;
  135. align-items: center;
  136. >view{
  137. padding: 10upx 0;
  138. &:first-child{
  139. padding-right: 15upx;
  140. color: #666;
  141. }
  142. }
  143. }
  144. }
  145. .goods-content{
  146. background: #FFFFFF;
  147. padding: 20upx;
  148. box-shadow: 1px 1px 3px #eee;
  149. min-height: 50vh;
  150. }
  151. .bottom-btns{
  152. background: #FFFFFF;
  153. display: flex;
  154. align-items: center;
  155. justify-content: space-around;
  156. padding: 15upx;
  157. >view{
  158. width: 45%;
  159. }
  160. }
  161. }
  162. </style>