goodsDetail.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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 || goodContent.delFlage == 0 || goodContent.state == 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" v-if="goodContent&&goodContent.inventoryQty > 0&&goodContent.state==1">
  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. let item = this.goodContent
  101. uni.$emit("addCart",{goodsNo:item.goodsNo,buyQty:this.nums})
  102. },
  103. // 立即下单
  104. toOrder(){
  105. this.$u.vuex("vuex_toOrderList",[{id:this.id,buyQty:this.nums,goods:this.goodContent}])
  106. uni.redirectTo({
  107. url:"/pages/toOrder/index"
  108. })
  109. }
  110. },
  111. }
  112. </script>
  113. <style lang="scss">
  114. page{
  115. height: 100%;
  116. }
  117. .goods-detail{
  118. width: 100%;
  119. height: 100%;
  120. display: flex;
  121. flex-direction: column;
  122. > view{
  123. &:first-child{
  124. flex-grow: 1;
  125. overflow: auto;
  126. }
  127. }
  128. .goods-head{
  129. background: #FFFFFF;
  130. box-shadow: 1px 1px 3px #eee;
  131. padding: 10upx 0;
  132. .goods-imgs{
  133. position: relative;
  134. margin: 20upx 30upx 10upx;
  135. .goods-staus{
  136. width: 100%;
  137. height: 100%;
  138. position: absolute;
  139. z-index: 10000;
  140. background: url(../../static/yxt.png) no-repeat center center;
  141. background-size: 100% 100%;
  142. left: 0;
  143. top: 0;
  144. }
  145. }
  146. .goods-name{
  147. padding:0 40upx;
  148. margin: 20upx 0;
  149. display: flex;
  150. align-items: center;
  151. justify-content: space-between;
  152. >view{
  153. &:first-child{
  154. width: 60%;
  155. font-weight: bold;
  156. font-size: 30upx;
  157. }
  158. &:last-child{
  159. display: flex;
  160. align-items: center;
  161. text{
  162. color: #d42a26;
  163. font-size: 36upx;
  164. margin-right: 6upx;
  165. font-weight: bold;
  166. }
  167. }
  168. }
  169. }
  170. .goods-price{
  171. display: flex;
  172. align-items: center;
  173. justify-content: space-between;
  174. padding:0 40upx 20upx;
  175. >view{
  176. &:first-child{
  177. font-size: 22upx;
  178. text{
  179. color: #999;
  180. font-size: 24upx;
  181. margin-right: 6upx;
  182. }
  183. }
  184. }
  185. }
  186. }
  187. .goods-attr{
  188. margin: 20upx 0;
  189. background: #FFFFFF;
  190. padding: 20upx 40upx;
  191. box-shadow: 1px 1px 3px #eee;
  192. > view{
  193. display: flex;
  194. align-items: center;
  195. >view{
  196. padding: 10upx 0;
  197. &:first-child{
  198. padding-right: 15upx;
  199. color: #666;
  200. }
  201. }
  202. }
  203. }
  204. .goods-content{
  205. background: #F8F8F8;
  206. padding: 20upx;
  207. box-shadow: 1px 1px 3px #eee;
  208. min-height: 50vh;
  209. }
  210. .bottom-btns{
  211. background: #FFFFFF;
  212. display: flex;
  213. align-items: center;
  214. justify-content: space-around;
  215. padding: 30upx 100upx;
  216. >view{
  217. width: 50%;
  218. }
  219. }
  220. }
  221. </style>