goodsDetail.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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="15" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
  9. </view>
  10. <view class="goods-name">
  11. <view>
  12. 的房间间里撒酒疯撒发撒将发生登录撒地方就房间里撒酒疯撒发撒将发生登录撒地方就
  13. </view>
  14. <view>
  15. <text>250</text>
  16. <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
  17. </view>
  18. </view>
  19. <view class="goods-price">
  20. <view>换取数量<text>(库存50件)</text></view>
  21. <view>
  22. <u-number-box v-model="nums"></u-number-box>
  23. </view>
  24. </view>
  25. </view>
  26. <!-- 商品属性 -->
  27. <view class="goods-attr">
  28. <view>
  29. <view>运费</view>
  30. <view>免运费</view>
  31. </view>
  32. <view>
  33. <view>限购</view>
  34. <view>每人限购1件</view>
  35. </view>
  36. <view>
  37. <view>售后</view>
  38. <view>兑换商品,一经售出,不支持退换货</view>
  39. </view>
  40. </view>
  41. <!-- 商品详情 -->
  42. <view class="goods-content">
  43. asdfsafsaf
  44. </view>
  45. </view>
  46. <!-- 底部浮动按钮 -->
  47. <view class="bottom-btns">
  48. <view><u-button :custom-style="addCartButton" type="warning" @click="addCart">加入购物车</u-button></view>
  49. <view><u-button :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button></view>
  50. </view>
  51. <!-- 购物车 -->
  52. <uni-cart-fix></uni-cart-fix>
  53. </view>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. imageList:[
  60. {image:'/static/banner.png'},
  61. {image:'/static/banner1.png'}
  62. ],
  63. nums:1,
  64. addCartButton: {
  65. background: '#ff9000',
  66. borderRadius:'100rpx 0 0 100rpx'
  67. },
  68. toOrderButton: {
  69. borderRadius:'0 100rpx 100rpx 0'
  70. }
  71. };
  72. },
  73. methods: {
  74. // 加入购物车
  75. addCart(){
  76. // 请求接口
  77. this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + this.nums
  78. },
  79. // 立即下单
  80. toOrder(){
  81. uni.redirectTo({
  82. url:"/pages/toOrder/index"
  83. })
  84. }
  85. },
  86. }
  87. </script>
  88. <style lang="scss">
  89. page{
  90. height: 100%;
  91. }
  92. .goods-detail{
  93. width: 100%;
  94. height: 100%;
  95. display: flex;
  96. flex-direction: column;
  97. > view{
  98. &:first-child{
  99. flex-grow: 1;
  100. overflow: auto;
  101. }
  102. }
  103. .goods-head{
  104. background: #FFFFFF;
  105. box-shadow: 1px 1px 3px #eee;
  106. padding: 10upx 0;
  107. .goods-imgs{
  108. position: relative;
  109. margin: 20upx 30upx 10upx;
  110. .goods-staus{
  111. width: 100%;
  112. height: 100%;
  113. position: absolute;
  114. z-index: 10000;
  115. background: url(../../static/yxt.png) no-repeat center center;
  116. background-size: 100% 100%;
  117. left: 0;
  118. top: 0;
  119. }
  120. }
  121. .goods-name{
  122. padding:0 40upx;
  123. margin: 20upx 0;
  124. display: flex;
  125. align-items: center;
  126. justify-content: space-between;
  127. >view{
  128. &:first-child{
  129. width: 60%;
  130. font-weight: bold;
  131. font-size: 30upx;
  132. }
  133. &:last-child{
  134. display: flex;
  135. align-items: center;
  136. text{
  137. color: #d42a26;
  138. font-size: 36upx;
  139. margin-right: 6upx;
  140. font-weight: bold;
  141. }
  142. }
  143. }
  144. }
  145. .goods-price{
  146. display: flex;
  147. align-items: center;
  148. justify-content: space-between;
  149. padding:0 40upx 20upx;
  150. >view{
  151. &:first-child{
  152. font-size: 22upx;
  153. text{
  154. color: #999;
  155. font-size: 24upx;
  156. margin-right: 6upx;
  157. }
  158. }
  159. }
  160. }
  161. }
  162. .goods-attr{
  163. margin: 20upx 0;
  164. background: #FFFFFF;
  165. padding: 20upx 40upx;
  166. box-shadow: 1px 1px 3px #eee;
  167. > view{
  168. display: flex;
  169. align-items: center;
  170. >view{
  171. padding: 10upx 0;
  172. &:first-child{
  173. padding-right: 15upx;
  174. color: #666;
  175. }
  176. }
  177. }
  178. }
  179. .goods-content{
  180. background: #F8F8F8;
  181. padding: 20upx;
  182. box-shadow: 1px 1px 3px #eee;
  183. min-height: 50vh;
  184. }
  185. .bottom-btns{
  186. background: #FFFFFF;
  187. display: flex;
  188. align-items: center;
  189. justify-content: space-around;
  190. padding: 30upx 100upx;
  191. >view{
  192. width: 50%;
  193. }
  194. }
  195. }
  196. </style>