detail.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. var productDetail = new Vue({
  2. el: "#productDetail",
  3. data: {
  4. showProduct: false,
  5. productId: 0,
  6. userId: 0,
  7. number: 0,
  8. productStock: 0,
  9. pcActType: 0,
  10. images: [],
  11. priceObj: {
  12. actStatus: 0,
  13. ladderPriceFlag: 0,
  14. minBuyNumber: 1,
  15. price: 0,
  16. costPrice: 0,
  17. priceFlag: 3,
  18. productId: 0,
  19. promotions: '',
  20. step: 1,
  21. supplierId: 0,
  22. userIdentity: 0 //2-会员机构;3-供应商;4-普通机构
  23. },
  24. ladderList:[],//阶梯价
  25. promotions:{},//促销活动信息
  26. promotionsId:0,//活动id
  27. addStatus: true,
  28. recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐
  29. recommendPage: 1,
  30. recommends: [],
  31. parameters: [],
  32. tabsIndex:0,
  33. disabledText:'',
  34. isNoneDisabled:false,
  35. isServiceInfo:false,
  36. isTrainingMethod:false,
  37. productTypeName:"",
  38. beautyActFlag:'',
  39. trainingMethodText:'',
  40. trainingType:'',
  41. isShowPopup:false,
  42. currentTab:1,
  43. couponParam:{// 获取弹窗优惠券领取参数
  44. userId:0,
  45. productId:0,
  46. status:1,
  47. source:1
  48. },
  49. isCouponEmpty:false,
  50. productCoupon:[], // 优惠券
  51. productCouponList:[], // 优惠券弹窗列表
  52. },
  53. filters: {
  54. TypeFormat:function(value) {
  55. switch (value) {
  56. case 0:
  57. return '活动券';
  58. break;
  59. case 1:
  60. return '品类券';
  61. break;
  62. case 2:
  63. return '用户专享券';
  64. break;
  65. case 3:
  66. return '店铺券';
  67. break;
  68. case 4:
  69. return '新用户券';
  70. break;
  71. }
  72. }
  73. },
  74. computed: {},
  75. methods: {
  76. getImages: function(){
  77. var _self = this;
  78. if(!this.productId){return;}
  79. ProductApi.GetProductDdtailsImages({productId: _self.productId},function (response) {
  80. if (response.code === 0 && response.data) {
  81. _self.images = response.data;
  82. setTimeout(function(){
  83. if (isPC) {
  84. var magnifier = new ImageMagnifier(
  85. '#imgShown .smallImage li',
  86. '#imgShown .bigImage',
  87. '#imgShown .zoomImage',
  88. '#imgShown .mask',
  89. '#imgShown .zoom',
  90. "on"
  91. ).init();
  92. } else {
  93. var swiper = new Swiper('#swiperImage', {
  94. loop : true,
  95. autoplay: {
  96. delay: 2000,
  97. disableOnInteraction: false
  98. },
  99. pagination: {
  100. el: '.swiper-pagination',
  101. type: 'fraction'
  102. }
  103. });
  104. }
  105. },500);
  106. }
  107. });
  108. },
  109. getProductDetails:function(){
  110. var _self = this;
  111. ProductApi.GetProductDdtails({userId:GLOBAL_USER_ID,productId:_self.productId},function (response) {
  112. if(response.code == 0){
  113. var product = response.data;
  114. _self.pcActType = product.pcActType
  115. _self.beautyActFlag = product.beautyActFlag
  116. _self.productTypeName = product.typeName;
  117. _self.recommendType = product.recommendType ? product.recommendType : 0;
  118. if(product.productDetail.orderInfo!='' && product.productDetail.serviceInfo!=''){
  119. _self.isServiceInfo = true;
  120. }
  121. if(product.commodityType == 2 && product.trainingMethod){
  122. _self.isTrainingMethod = true;
  123. _self.trainingMethodText = product.trainingMethod == 1 ? '线上培训' : '线下培训';
  124. _self.trainingType = product.trainingType == 1 ? '¥'+product.trainingFee : '售价已包含';
  125. }
  126. if(product.validFlag == 3 || product.validFlag == 9 || product.validFlag == 0 || product.validFlag == 10 || product.stock == 0 ){
  127. _self.isNoneDisabled = true;
  128. }else{
  129. _self.isNoneDisabled = false;
  130. }
  131. if(product.validFlag ==3){
  132. _self.disabledText = '下架'
  133. }
  134. if(product.validFlag ==10){
  135. _self.disabledText = '停售'
  136. }
  137. if(product.validFlag ==9 || product.validFlag ==0){
  138. _self.disabledText = '失效'
  139. }
  140. if(product.stock == 0 && product.validFlag !=3){
  141. _self.disabledText = '售罄'
  142. }
  143. _self.getRecommends();
  144. }else{
  145. CAIMEI.Alert(response.msg, '确定', false);
  146. }
  147. })
  148. },
  149. getProductPrice:function(){//获取商品价格
  150. var _self = this;
  151. if(_self.productId ===0){return;}
  152. ProductApi.GetProductDdtailsPrice({ userId: GLOBAL_USER_ID,productId: _self.productId},function (response) {
  153. if (response.code === 0 && response.data) {
  154. _self.priceObj = response.data;
  155. _self.number = response.data.minBuyNumber;
  156. if(response.data.ladderPriceFlag===1){
  157. _self.ladderPrice();
  158. }
  159. if(response.data.actStatus==1){
  160. _self.promotions = response.data.promotions;
  161. _self.promotionsId = response.data.promotions.id;
  162. }
  163. }
  164. });
  165. },
  166. ladderPrice:function(){//获取商品阶梯价格
  167. var _self = this;
  168. if(!this.productId){return;}
  169. ProductApi.GetProductDdtailsLadderPrice({ productId: _self.productId },function (response) {
  170. if (response.code === 0 && response.data) {
  171. _self.ladderList =response.data;
  172. _self.numberResize();
  173. }
  174. });
  175. },
  176. getParameters: function(){//获取商品参数
  177. var _self = this;
  178. if(!this.productId){return;}
  179. ProductApi.GetProductDdtailsParameter({ productId: _self.productId},function (response) {
  180. if (response.code === 0 && response.data) {
  181. _self.parameters = response.data;
  182. console.log(_self.parameters)
  183. }
  184. });
  185. },
  186. toggleThisLadder: function(event){
  187. var el = event.currentTarget;
  188. if($(el).hasClass("on")){
  189. $(el).removeClass("on").siblings('.mFixed').hide();
  190. if(!isPC){looseBody();}
  191. }else{
  192. $(el).addClass("on").siblings('.mFixed').show();
  193. if(!isPC){fixedBody();}
  194. }
  195. },
  196. hideThisLadder: function(event){
  197. var el = event.currentTarget;
  198. $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
  199. if(!isPC){looseBody();}
  200. },
  201. numberSub: function(){
  202. this.number -= this.priceObj.step;
  203. this.numberResize();
  204. },
  205. numberAdd: function(){
  206. this.number += this.priceObj.step;
  207. this.numberResize();
  208. },
  209. numberChange: function(){
  210. this.number = Math.ceil(this.number/this.priceObj.step)*this.priceObj.step;
  211. this.numberResize();
  212. },
  213. numberResize: function(){
  214. var _self = this;
  215. if (this.number<this.priceObj.minBuyNumber){
  216. this.number = this.priceObj.minBuyNumber;
  217. }
  218. if (this.number>this.productStock){
  219. this.number = this.productStock;
  220. }
  221. if(this.priceObj.ladderPriceFlag){
  222. this.ladderList.forEach(function(ladder){
  223. if(_self.number>=ladder.buyNum){
  224. _self.priceObj.price = ladder.buyPrice;
  225. }
  226. });
  227. }
  228. },
  229. toLogin: function() {
  230. setBeforeUrl();
  231. window.location.href = '/login.html';
  232. },
  233. toUpgrade: function() {
  234. setBeforeUrl();
  235. window.location.href = '/user/setting/upgrade.html';
  236. },
  237. addShopCart: function(){ //加入购物车
  238. var _self = this;
  239. if(this.addStatus){
  240. _self.addStatus = false;
  241. addShoppingCart(this.userId, this.productId, this.number,function(){
  242. _self.addStatus = true;
  243. });
  244. }
  245. },
  246. buyNowSubmit: function(){
  247. if(this.productId && this.number){
  248. // type:(1购物车提交[对应表cm_cart],2直接购买提交, 3协销下单)
  249. window.location.href = '/shopping/confirm.html?type=2&id='+this.productId+'&count='+this.number;
  250. }
  251. },
  252. getRecommends: function(){
  253. var _self = this;
  254. if(!this.productId){return;}
  255. ProductApi.GetProductDdtailsRecommend(
  256. {
  257. productId: _self.productId,
  258. recommendType: _self.recommendType,
  259. userId: _self.userId
  260. },
  261. function (response) {
  262. if (response.code === 0 && response.data) {
  263. if(response.data.length > 0){
  264. _self.recommends = response.data;
  265. _self.recommendPage = isPC ? Math.ceil(response.data.length / 7) : Math.ceil(response.data.length / 3);
  266. setTimeout(function(){
  267. if (isPC) {
  268. $('#productRecommend').slide({
  269. mainCell:".swiper-wrapper",
  270. titCell:".swiper-pagination span",
  271. effect: "leftLoop",
  272. interTime: 3000,
  273. autoPlay: true,
  274. scroll:7,
  275. vis:7,
  276. trigger: "mouseover"
  277. });
  278. } else {
  279. var swiper = new Swiper('#productRecommend', {
  280. slidesPerView: 3,
  281. spaceBetween: 0,
  282. autoplay: {
  283. delay: 3000,
  284. disableOnInteraction: false
  285. },
  286. pagination: {
  287. el: '.swiper-pagination'
  288. }
  289. });
  290. }
  291. },500);
  292. }
  293. }
  294. });
  295. },
  296. queryProductDetilsCoupons(){// 初始化商品详情优惠券信息
  297. var _self = this;
  298. ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
  299. if(response.code == 0){
  300. var data = response.data;
  301. if(isPC){
  302. _self.productCoupon = response.data.list.splice(0,3);
  303. }else{
  304. _self.productCoupon = response.data.list.splice(0,2);
  305. }
  306. }else{
  307. console.log('获取优惠券列表失败');
  308. }
  309. })
  310. },
  311. queryPopupCoupons:function(){// 获取弹窗优惠券列表
  312. var _self = this;
  313. ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
  314. if(response.code == 0){
  315. var data = response.data;
  316. if(data.couponList && data.couponList.length >0){
  317. _self.productCouponList = data.couponList;
  318. _self.isCouponEmpty = false;
  319. console.log('有优惠券')
  320. console.log(_self.productCouponList)
  321. }else{
  322. console.log('没有优惠券')
  323. _self.isCouponEmpty = true;
  324. }
  325. }else{
  326. console.log('获取优惠券列表失败')
  327. }
  328. })
  329. },
  330. receiveCoupon:function(coupon){// 点击领取优惠券
  331. var _self = this;
  332. ProductApi.ReceiveCoupon({userId:_self.couponParam.userId, couponId:coupon.couponId, source:1}, function (response) {
  333. if(response.code == 0){
  334. _self.currentTab = 2;
  335. _self.couponParam.status = 2;
  336. _self.queryPopupCoupons();
  337. }else{
  338. CAIMEI.Alert(response.msg, '确定', false);
  339. }
  340. })
  341. },
  342. queryCouponTabs:function (value){// 切换优惠券
  343. var _self = this;
  344. _self.currentTab = _self.couponParam.status = value;
  345. _self.queryPopupCoupons();
  346. },
  347. showPopup:function(){// 显示优惠券弹窗
  348. var _self = this;
  349. if(_self.userId>0){
  350. _self.productCouponList = [];
  351. _self.currentTab = 1;
  352. _self.couponParam.status = 1;
  353. _self.queryPopupCoupons();
  354. _self.isShowPopup = true;
  355. }else{
  356. window.location.href='/login.html';
  357. }
  358. },
  359. hidePopup:function(){// 隐藏优惠券弹窗
  360. var _self = this;
  361. _self.isShowPopup = false;
  362. },
  363. detailsClicktab:function(index){
  364. var _self = this;
  365. _self.tabsIndex = index;
  366. }
  367. },
  368. created: function () {
  369. this.productId = this.couponParam.productId = $("#productId").val();
  370. this.productStock = $("#productStock").val();
  371. this.getImages();
  372. // identity: 0个人,1协销,2会员机构,3供应商,4普通机构
  373. // visibility:3:所有人可见,2:普通机构可见,1:会员机构可见
  374. var visible = $("#productVisibility").val()*1;
  375. var identity = GLOBAL_USER_IDENTITY;
  376. this.showProduct = visible === 3 || identity === 1 || identity === 2 || (identity === 4 && visible === 2);
  377. if(!this.showProduct) {
  378. window.location.href = "/404.html?error=未查询到该商品";
  379. }
  380. },
  381. mounted: function () {
  382. this.userId = this.couponParam.userId = GLOBAL_USER_ID;
  383. this.getProductDetails();
  384. this.getProductPrice();
  385. this.getParameters();
  386. this.queryProductDetilsCoupons();
  387. // $('.productInfo').slide({
  388. // mainCell:".tabCon"
  389. // ,titCell:".tabTit span"
  390. // ,trigger: "click"
  391. // });
  392. }
  393. });