goodsDetail.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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" @click="toOrder()">立即下单</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. uni.redirectTo({
  67. url:"/pages/toOrder/index"
  68. })
  69. }
  70. },
  71. }
  72. </script>
  73. <style lang="scss">
  74. page{
  75. height: 100%;
  76. }
  77. .goods-detail{
  78. width: 100%;
  79. height: 100%;
  80. display: flex;
  81. flex-direction: column;
  82. > view{
  83. &:first-child{
  84. flex-grow: 1;
  85. overflow: auto;
  86. }
  87. }
  88. .goods-head{
  89. background: #FFFFFF;
  90. box-shadow: 1px 1px 3px #eee;
  91. .goods-imgs{
  92. position: relative;
  93. .goods-staus{
  94. width: 150rpx;
  95. height: 150rpx;
  96. position: absolute;
  97. z-index: 10000;
  98. border-radius: 100%;
  99. background: rgba($color: #000000, $alpha: 0.5);
  100. text-align: center;
  101. line-height: 150rpx;
  102. left: 50%;
  103. top: 50%;
  104. margin-top: -75rpx;
  105. margin-left: -75rpx;
  106. color: #eee;
  107. }
  108. }
  109. .goods-name{
  110. padding:0 20upx;
  111. margin: 10upx 0;
  112. line-height: 40upx;
  113. }
  114. .goods-price{
  115. display: flex;
  116. align-items: center;
  117. justify-content: space-between;
  118. padding:0 20upx 20upx;
  119. >view{
  120. &:first-child{
  121. font-size: 22upx;
  122. text{
  123. color: red;
  124. font-size: 36upx;
  125. margin-right: 6upx;
  126. }
  127. }
  128. }
  129. }
  130. }
  131. .goods-attr{
  132. margin: 20upx 0;
  133. background: #FFFFFF;
  134. padding: 20upx;
  135. box-shadow: 1px 1px 3px #eee;
  136. > view{
  137. display: flex;
  138. align-items: center;
  139. >view{
  140. padding: 10upx 0;
  141. &:first-child{
  142. padding-right: 15upx;
  143. color: #666;
  144. }
  145. }
  146. }
  147. }
  148. .goods-content{
  149. background: #FFFFFF;
  150. padding: 20upx;
  151. box-shadow: 1px 1px 3px #eee;
  152. min-height: 50vh;
  153. }
  154. .bottom-btns{
  155. background: #FFFFFF;
  156. display: flex;
  157. align-items: center;
  158. justify-content: space-around;
  159. padding: 15upx;
  160. >view{
  161. width: 45%;
  162. }
  163. }
  164. }
  165. </style>