goodsDetail.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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" v-if="goodContent.inventoryQty == 0"></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. {{goodContent.name}}
  13. </view>
  14. <view>
  15. <text>{{goodContent.sellGold}}</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>(库存{{goodContent.inventoryQty}}件)</text></view>
  21. <view>
  22. <u-number-box :max="goodContent.inventoryQty" 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. <jyf-parser :html="goodContent.desc" ref="article"></jyf-parser>
  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. import {
  57. getGoodsDetail
  58. } from '@/api/goods.js'
  59. import jyfParser from "@/components/jyf-parser/jyf-parser";
  60. export default {
  61. components: {
  62. jyfParser
  63. },
  64. data() {
  65. return {
  66. addCartButton: {
  67. background: '#ff9000',
  68. borderRadius:'100rpx 0 0 100rpx'
  69. },
  70. toOrderButton: {
  71. borderRadius:'0 100rpx 100rpx 0'
  72. },
  73. imageList:[], // 商品图片
  74. nums:1, // 商品数量
  75. id: '',
  76. goodContent: null
  77. };
  78. },
  79. onLoad(opts) {
  80. console.log(opts)
  81. this.id = opts.id
  82. this.getDetail()
  83. },
  84. methods: {
  85. // 查详情
  86. getDetail(){
  87. getGoodsDetail({id:this.id}).then(res => {
  88. console.log(res)
  89. if(res.status == 200){
  90. this.goodContent = res.data
  91. let arr=res.data.images.split(',')
  92. arr.map(item => {
  93. this.imageList.push({image:item})
  94. })
  95. }
  96. })
  97. },
  98. // 加入购物车
  99. addCart(){
  100. // 请求接口
  101. this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + this.nums
  102. },
  103. // 立即下单
  104. toOrder(){
  105. uni.redirectTo({
  106. url:"/pages/toOrder/index"
  107. })
  108. }
  109. },
  110. }
  111. </script>
  112. <style lang="scss">
  113. page{
  114. height: 100%;
  115. }
  116. .goods-detail{
  117. width: 100%;
  118. height: 100%;
  119. display: flex;
  120. flex-direction: column;
  121. > view{
  122. &:first-child{
  123. flex-grow: 1;
  124. overflow: auto;
  125. }
  126. }
  127. .goods-head{
  128. background: #FFFFFF;
  129. box-shadow: 1px 1px 3px #eee;
  130. padding: 10upx 0;
  131. .goods-imgs{
  132. position: relative;
  133. margin: 20upx 30upx 10upx;
  134. .goods-staus{
  135. width: 100%;
  136. height: 100%;
  137. position: absolute;
  138. z-index: 10000;
  139. background: url(../../static/yxt.png) no-repeat center center;
  140. background-size: 100% 100%;
  141. left: 0;
  142. top: 0;
  143. }
  144. }
  145. .goods-name{
  146. padding:0 40upx;
  147. margin: 20upx 0;
  148. display: flex;
  149. align-items: center;
  150. justify-content: space-between;
  151. >view{
  152. &:first-child{
  153. width: 60%;
  154. font-weight: bold;
  155. font-size: 30upx;
  156. }
  157. &:last-child{
  158. display: flex;
  159. align-items: center;
  160. text{
  161. color: #d42a26;
  162. font-size: 36upx;
  163. margin-right: 6upx;
  164. font-weight: bold;
  165. }
  166. }
  167. }
  168. }
  169. .goods-price{
  170. display: flex;
  171. align-items: center;
  172. justify-content: space-between;
  173. padding:0 40upx 20upx;
  174. >view{
  175. &:first-child{
  176. font-size: 22upx;
  177. text{
  178. color: #999;
  179. font-size: 24upx;
  180. margin-right: 6upx;
  181. }
  182. }
  183. }
  184. }
  185. }
  186. .goods-attr{
  187. margin: 20upx 0;
  188. background: #FFFFFF;
  189. padding: 20upx 40upx;
  190. box-shadow: 1px 1px 3px #eee;
  191. > view{
  192. display: flex;
  193. align-items: center;
  194. >view{
  195. padding: 10upx 0;
  196. &:first-child{
  197. padding-right: 15upx;
  198. color: #666;
  199. }
  200. }
  201. }
  202. }
  203. .goods-content{
  204. background: #F8F8F8;
  205. padding: 20upx;
  206. box-shadow: 1px 1px 3px #eee;
  207. min-height: 50vh;
  208. }
  209. .bottom-btns{
  210. background: #FFFFFF;
  211. display: flex;
  212. align-items: center;
  213. justify-content: space-around;
  214. padding: 30upx 100upx;
  215. >view{
  216. width: 50%;
  217. }
  218. }
  219. }
  220. </style>