goodsDetail.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  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="325" :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 v-if="goldLimit>0" class="goods-goldLimit">
  26. 此商品需要满<text>{{goldLimit}}</text>乐豆才可购买
  27. </view>
  28. </view>
  29. <!-- 商品属性 -->
  30. <view class="goods-attr">
  31. <view>
  32. <view>运费</view>
  33. <view>免运费</view>
  34. </view>
  35. <view>
  36. <view>限购</view>
  37. <view>每人限购1件</view>
  38. </view>
  39. <view>
  40. <view>售后</view>
  41. <view>兑换商品,一经售出,不支持退换货</view>
  42. </view>
  43. </view>
  44. <!-- 商品详情 -->
  45. <view class="goods-content">
  46. <jyf-parser :html="goodContent.desc" ref="article"></jyf-parser>
  47. </view>
  48. </view>
  49. <!-- 底部浮动按钮 -->
  50. <view class="bottom-btns" v-if="goodContent&&goodContent.inventoryQty > 0&&goodContent.state==1">
  51. <view><u-button :custom-style="addCartButton" type="warning" @click="addCart">加入购物车</u-button></view>
  52. <view><u-button :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button></view>
  53. </view>
  54. <!-- 购物车 -->
  55. <uni-cart-fix :closeCurPage="true" :dragPic="dragPic"></uni-cart-fix>
  56. </view>
  57. </template>
  58. <script>
  59. import {
  60. getGoodsDetail
  61. } from '@/api/goods.js'
  62. import jyfParser from "@/components/jyf-parser/jyf-parser";
  63. export default {
  64. components: {
  65. jyfParser
  66. },
  67. data() {
  68. return {
  69. addCartButton: {
  70. background: '#ff9000',
  71. borderRadius:'100rpx 0 0 100rpx'
  72. },
  73. toOrderButton: {
  74. borderRadius:'0 100rpx 100rpx 0'
  75. },
  76. imageList:[], // 商品图片
  77. nums:1, // 商品数量
  78. id: '',
  79. goodContent: null,
  80. goldLimit: 0,
  81. dragPic: '/static/cart.png', // 购物车图标
  82. };
  83. },
  84. onLoad(opts) {
  85. console.log(opts)
  86. this.id = opts.id
  87. this.goldLimit = opts.goldLimit
  88. this.getDetail()
  89. },
  90. onUnload() {
  91. uni.$off('addCart')
  92. },
  93. methods: {
  94. // 查详情
  95. getDetail(){
  96. getGoodsDetail({id:this.id}).then(res => {
  97. console.log(res)
  98. if(res.status == 200){
  99. this.goodContent = res.data
  100. let arr=res.data.images.split(',')
  101. arr.map(item => {
  102. this.imageList.push({image:item})
  103. })
  104. }
  105. })
  106. },
  107. // 加入购物车
  108. addCart(){
  109. let _this = this
  110. let item = this.goodContent
  111. uni.$emit("addCart",{goodsNo:item.goodsNo,buyQty:_this.nums})
  112. },
  113. // 立即下单
  114. toOrder(){
  115. // console.log(this.goodContent,this.id,'pppppppp')
  116. if(this.goodContent.sellGold * this.nums >= this.goldLimit){
  117. this.$u.vuex("vuex_toOrderList",[{id:this.id,buyQty:this.nums,goodsNo:this.goodContent.goodsNo,goods:this.goodContent}])
  118. uni.redirectTo({
  119. url:"/pages/toOrder/index"
  120. })
  121. }else{
  122. uni.showToast({
  123. icon:"none",
  124. title:"此商品需要满" +this.goldLimit+ "乐豆才可购买"
  125. })
  126. }
  127. }
  128. },
  129. }
  130. </script>
  131. <style lang="scss">
  132. page{
  133. height: 100%;
  134. }
  135. .goods-detail{
  136. width: 100%;
  137. height: 100%;
  138. display: flex;
  139. flex-direction: column;
  140. > view{
  141. &:first-child{
  142. flex-grow: 1;
  143. overflow: auto;
  144. }
  145. }
  146. .goods-head{
  147. background: #FFFFFF;
  148. box-shadow: 1px 1px 3px #eee;
  149. padding: 10upx 0;
  150. .goods-imgs{
  151. position: relative;
  152. margin: 20upx 30upx 10upx;
  153. .goods-staus{
  154. width: 100%;
  155. height: 100%;
  156. position: absolute;
  157. z-index: 10000;
  158. background: url(../../static/yxt.png) no-repeat center center;
  159. background-size: 100% 100%;
  160. left: 0;
  161. top: 0;
  162. }
  163. }
  164. .goods-name{
  165. padding:0 40upx;
  166. margin: 20upx 0;
  167. display: flex;
  168. align-items: center;
  169. justify-content: space-between;
  170. >view{
  171. &:first-child{
  172. width: 60%;
  173. font-weight: bold;
  174. font-size: 30upx;
  175. }
  176. &:last-child{
  177. display: flex;
  178. align-items: center;
  179. text{
  180. color: #d42a26;
  181. font-size: 36upx;
  182. margin-right: 6upx;
  183. font-weight: bold;
  184. }
  185. }
  186. }
  187. }
  188. .goods-price{
  189. display: flex;
  190. align-items: center;
  191. justify-content: space-between;
  192. padding:0 40upx;
  193. >view{
  194. &:first-child{
  195. font-size: 22upx;
  196. text{
  197. color: #999;
  198. font-size: 24upx;
  199. margin-right: 6upx;
  200. }
  201. }
  202. }
  203. }
  204. .goods-goldLimit{
  205. padding: 10upx 40upx;
  206. color: #F0AD4E;
  207. font-size: 24rpx;
  208. text-align: right;
  209. text{
  210. color: red;
  211. }
  212. }
  213. }
  214. .goods-attr{
  215. margin: 20upx 0;
  216. background: #FFFFFF;
  217. padding: 20upx 40upx;
  218. box-shadow: 1px 1px 3px #eee;
  219. > view{
  220. display: flex;
  221. align-items: center;
  222. >view{
  223. padding: 10upx 0;
  224. &:first-child{
  225. padding-right: 15upx;
  226. color: #666;
  227. }
  228. }
  229. }
  230. }
  231. .goods-content{
  232. background: #F8F8F8;
  233. padding: 20upx;
  234. box-shadow: 1px 1px 3px #eee;
  235. min-height: 50vh;
  236. }
  237. .bottom-btns{
  238. background: #FFFFFF;
  239. display: flex;
  240. align-items: center;
  241. justify-content: space-around;
  242. padding: 30upx 100upx;
  243. >view{
  244. width: 50%;
  245. }
  246. }
  247. }
  248. </style>