goodsDetail.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <template>
  2. <view class="goods-detail">
  3. <view>
  4. <!-- 商品信息 -->
  5. <view class="goods-head" v-if="goodContent">
  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="checkLogin(0)">加入购物车</u-button></view>
  52. <view><u-button :custom-style="toOrderButton" type="error" @click="checkLogin(1)">立即下单</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 {
  63. addGoodsToCart
  64. } from '@/api/shoppingCart.js'
  65. import {checkLogin} from '@/api/login.js'
  66. import jyfParser from "@/components/jyf-parser/jyf-parser";
  67. export default {
  68. components: {
  69. jyfParser
  70. },
  71. data() {
  72. return {
  73. addCartButton: {
  74. background: '#ff9000',
  75. borderRadius:'100rpx 0 0 100rpx'
  76. },
  77. toOrderButton: {
  78. borderRadius:'0 100rpx 100rpx 0'
  79. },
  80. imageList:[], // 商品图片
  81. nums:1, // 商品数量
  82. id: '',
  83. goodContent: null,
  84. goldLimit: 0,
  85. dragPic: '/static/cart.png', // 购物车图标
  86. userData: null,
  87. hasLogin: false
  88. };
  89. },
  90. onLoad(opts) {
  91. console.log(opts)
  92. this.id = opts.id
  93. this.userData = this.$store.state.vuex_userData
  94. this.getDetail()
  95. // 开启分享
  96. uni.showShareMenu({
  97. withShareTicket: true,
  98. menus: ['shareAppMessage', 'shareTimeline']
  99. })
  100. },
  101. methods: {
  102. // 查详情
  103. getDetail(){
  104. getGoodsDetail({id:this.id}).then(res => {
  105. console.log(res)
  106. if(res.status == 200){
  107. this.goodContent = res.data
  108. this.goldLimit = res.data.goodsType.goldLimit || 0
  109. let arr=res.data.images.split(',')
  110. arr.map(item => {
  111. this.imageList.push({image:item})
  112. })
  113. }
  114. })
  115. },
  116. // 添加购物车
  117. addGoodToCart(item){
  118. uni.showLoading({
  119. mask: true,
  120. title: "正在加入购物车..."
  121. })
  122. addGoodsToCart(item).then(res => {
  123. if(res.status == 200){
  124. // 刷新购物车数量
  125. if(!item.hasCunzai){
  126. this.$store.state.vuex_cartNums = this.$store.state.vuex_cartNums + 1
  127. }
  128. setTimeout(()=>{
  129. uni.showToast({
  130. icon: 'none',
  131. title:'添加成功'
  132. })
  133. // 刷新购物车数据
  134. uni.$emit('getCartList')
  135. },50)
  136. }
  137. })
  138. },
  139. // 判断当前商品是否已存在购物车中
  140. hasCunzai(data){
  141. let list = this.$store.state.vuex_cartList
  142. let row = list.find(item=> item.goodsTypeNo == data.goodsTypeNo)
  143. return row
  144. },
  145. // 是否登录 flag: 0 加入购物车 1 立即下单
  146. checkLogin(flag) {
  147. // 是否登录
  148. checkLogin().then(res => {
  149. this.hasLogin = res.status == 200
  150. if(this.hasLogin) {
  151. if(flag) {
  152. this.toOrder()
  153. } else {
  154. this.addCart()
  155. }
  156. } else {
  157. uni.showModal({
  158. title: '提示',
  159. content: '您尚未登录或登录已过期,请先进行登录',
  160. success (res) {
  161. if (res.confirm) {
  162. uni.navigateTo({
  163. url: '/pages/login/login'
  164. });
  165. } else if (res.cancel) {
  166. console.log('用户点击取消');
  167. }
  168. }
  169. });
  170. }
  171. })
  172. },
  173. // 加入购物车
  174. addCart() {
  175. let item = this.goodContent
  176. this.addGoodToCart({goodsNo:item.goodsNo,buyQty:this.nums,hasCunzai:this.hasCunzai(item)})
  177. },
  178. // 立即下单
  179. toOrder(){
  180. if(this.userData.customerRole == 9){
  181. uni.showToast({
  182. icon:"none",
  183. title:"抱歉,您目前无法使用乐豆"
  184. })
  185. }else{
  186. if(this.goodContent.sellGold * this.nums >= this.goldLimit){
  187. this.$u.vuex("vuex_toOrderList",[{id:this.id,buyQty:this.nums,goodsNo:this.goodContent.goodsNo,goods:this.goodContent}])
  188. uni.redirectTo({
  189. url:"/pagesA/toOrder/index?orderForm=ORDER_NOW"
  190. })
  191. }else{
  192. uni.showToast({
  193. icon:"none",
  194. title:"此类商品需要满" +this.goldLimit+ "乐豆才可购买"
  195. })
  196. }
  197. }
  198. }
  199. },
  200. }
  201. </script>
  202. <style lang="scss">
  203. page{
  204. height: 100%;
  205. }
  206. .goods-detail{
  207. width: 100%;
  208. height: 100%;
  209. display: flex;
  210. flex-direction: column;
  211. > view{
  212. &:first-child{
  213. flex-grow: 1;
  214. overflow: auto;
  215. }
  216. }
  217. .goods-head{
  218. background: #FFFFFF;
  219. box-shadow: 1px 1px 3px #eee;
  220. padding: 10upx 0;
  221. .goods-imgs{
  222. position: relative;
  223. margin: 20upx 30upx 10upx;
  224. .goods-staus{
  225. width: 100%;
  226. height: 100%;
  227. position: absolute;
  228. z-index: 10000;
  229. background: url(../../static/yxt.png) no-repeat center center;
  230. background-size: 100% 100%;
  231. left: 0;
  232. top: 0;
  233. }
  234. }
  235. .goods-name{
  236. padding:0 40upx;
  237. margin: 20upx 0;
  238. display: flex;
  239. align-items: center;
  240. justify-content: space-between;
  241. >view{
  242. &:first-child{
  243. width: 60%;
  244. font-weight: bold;
  245. font-size: 30upx;
  246. }
  247. &:last-child{
  248. display: flex;
  249. align-items: center;
  250. text{
  251. color: #d42a26;
  252. font-size: 36upx;
  253. margin-right: 6upx;
  254. font-weight: bold;
  255. }
  256. }
  257. }
  258. }
  259. .goods-price{
  260. display: flex;
  261. align-items: center;
  262. justify-content: space-between;
  263. padding:0 40upx;
  264. >view{
  265. &:first-child{
  266. font-size: 22upx;
  267. text{
  268. color: #999;
  269. font-size: 24upx;
  270. margin-right: 6upx;
  271. }
  272. }
  273. }
  274. }
  275. .goods-goldLimit{
  276. padding: 10upx 40upx;
  277. color: #F0AD4E;
  278. font-size: 24rpx;
  279. text-align: right;
  280. text{
  281. color: red;
  282. }
  283. }
  284. }
  285. .goods-attr{
  286. margin: 20upx 0;
  287. background: #FFFFFF;
  288. padding: 20upx 40upx;
  289. box-shadow: 1px 1px 3px #eee;
  290. > view{
  291. display: flex;
  292. align-items: center;
  293. >view{
  294. padding: 10upx 0;
  295. &:first-child{
  296. padding-right: 15upx;
  297. color: #666;
  298. }
  299. }
  300. }
  301. }
  302. .goods-content{
  303. background: #F8F8F8;
  304. padding: 20upx;
  305. box-shadow: 1px 1px 3px #eee;
  306. min-height: 50vh;
  307. }
  308. .bottom-btns{
  309. background: #FFFFFF;
  310. display: flex;
  311. align-items: center;
  312. justify-content: space-around;
  313. padding: 30upx 100upx;
  314. >view{
  315. width: 50%;
  316. }
  317. }
  318. }
  319. </style>