AddCardModel.vue 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133
  1. <template>
  2. <view>
  3. <!-- 加入购物车弹窗 -->
  4. <u-popup :value="isShow" :mask-close-able="false" :border-radius="12" mode="bottom">
  5. <view class="add-cart-view">
  6. <view class="close-icon"><u-icon name="close" color="#666666" size="26" @click="closeaddcartPop"></u-icon></view>
  7. <view class="card-goods-info clearfix">
  8. <view class="float_left card-goods-img">
  9. <image v-if="now_sku_data.specImage" :src="now_sku_data.specImage" mode="aspectFill"></image>
  10. <block v-else><image v-if="goodsDetail.images" :src="goodsDetail.images[0]" mode="aspectFill"></image></block>
  11. <view v-if="goodsDetail.isEq === 5" class="Eq-view primary-bg">抄码</view>
  12. </view>
  13. <view class="float_left" style="width: 420rpx;">
  14. <view class="goods-title ellipsis">{{ goodsDetail.title || '' }}</view>
  15. <!-- 不是阶梯价 -->
  16. <view class="card-goods-priceview primary-color" v-if="!now_sku_data.enabledLadder">
  17. <text class="rmb-icon">¥</text>
  18. <text v-if="!showGoodsPrice">
  19. <block v-if="now_sku_data.id">{{ now_sku_data.salePrice || 0 }}</block>
  20. <block v-else>{{ goodsDetail.isEq === 5 ? goodsDetail.maxSalePrice : goodsDetail.minSalePrice }}</block>
  21. </text>
  22. <text v-else class="showGoodsPrice">{{ showGoodsPrice }}</text>
  23. </view>
  24. <!-- 阶梯价 -->
  25. <view class="lap-info clearfix" v-else>
  26. <view class="lap-li" v-for="(item, index) in now_sku_data.ladderPrice" :key="index">
  27. <view class="laprice-text">
  28. <span style="font-size: 20rpx;">¥</span>
  29. <text v-if="!showGoodsPrice">{{ item.price }}</text>
  30. <text v-else class="showGoodsPrice">{{ showGoodsPrice }}</text>
  31. </view>
  32. <view class="laprice-goods-num" v-if="index + 1 === now_sku_data.ladderPrice.length">≥{{ item.from }}{{ now_sku_data.unitName }}</view>
  33. <view class="laprice-goods-num" v-else>{{ item.from }}~{{ item.to }}{{ now_sku_data.unitName }}</view>
  34. </view>
  35. </view>
  36. <!-- 会员价 -->
  37. <block v-if="!showGoodsPrice">
  38. <view class="vip-price clearfix" v-if="goodsDetail.minMemberPrice > 0 && !now_sku_data.id">
  39. <view class="price-text">¥{{ goodsDetail.isEq === 5 ? goodsDetail.maxMemberPrice : goodsDetail.minMemberPrice }}</view>
  40. <view class="price-bs">vip</view>
  41. </view>
  42. <block v-else>
  43. <view class="vip-price clearfix" v-if="now_sku_data.memberPrice > 0">
  44. <view class="price-text">¥{{ now_sku_data.memberPrice }}</view>
  45. <view class="price-bs">vip</view>
  46. </view>
  47. </block>
  48. </block>
  49. <view class="activity-tag" v-if="now_sku_data.isActivity && now_sku_data.isActivity === 5">限时秒杀</view>
  50. <view class="card-goods-stock">
  51. <!-- 当前区域有库存 -->
  52. <block v-if="is_not_express">
  53. <!-- 选中规格 -->
  54. <block v-if="now_sku_data.id">
  55. <view class="snum-li" v-if="baseSet.stockDisplay === 5">
  56. 库存:{{ now_sku_data.inventory >= 1 || goodsDetail.isDistribution === 5 ? '有货' : '库存不足' }}
  57. </view>
  58. <view class="snum-li" v-if="baseSet.stockDisplay === 6">
  59. 库存:
  60. <text v-if="goodsDetail.isEq === 4">
  61. {{ now_sku_data.inventory >= 1 || goodsDetail.isDistribution === 5 ? Math.floor(now_sku_data.inventory) || '有货' : 0 }}
  62. </text>
  63. <text v-else>{{ now_sku_data.otherNum >= 1 || goodsDetail.isDistribution === 5 ? Math.floor(now_sku_data.otherNum) || '有货' : 0 }}</text>
  64. </view>
  65. </block>
  66. <!-- 未选中规格 -->
  67. <block v-else>
  68. <view class="snum-li" v-if="baseSet.stockDisplay === 5">
  69. 库存:{{ goodsDetail.inventory >= 1 || goodsDetail.isDistribution === 5 ? '有货' : '库存不足' }}
  70. </view>
  71. <view class="snum-li" v-if="baseSet.stockDisplay === 6">
  72. 库存:
  73. <text v-if="goodsDetail.isEq === 4">
  74. {{ goodsDetail.inventory >= 1 || goodsDetail.isDistribution === 5 ? Math.floor(goodsDetail.inventory) || '有货' : 0 }}
  75. </text>
  76. <text v-else>{{ goodsDetail.inventory >= 1 || goodsDetail.isDistribution === 5 ? Math.floor(goodsDetail.otherNum) || '有货' : 0 }}</text>
  77. </view>
  78. </block>
  79. </block>
  80. <!-- 当前区域没有库存 -->
  81. <block v-else>
  82. <view class="snum-li" v-if="baseSet.stockDisplay === 5">库存:库存不足</view>
  83. <view class="snum-li" v-if="baseSet.stockDisplay === 6">剩余 0</view>
  84. </block>
  85. <view class="snum-li">起订{{ now_sku_data.setNum || 1 }}{{ now_sku_data.unitName || goodsDetail.unitName || '' }}</view>
  86. <view class="snum-li" v-if="now_sku_data.limitNum">限购{{ now_sku_data.limitNum }}{{ now_sku_data.unitName || goodsDetail.unitName }}</view>
  87. </view>
  88. <block v-for="(item, index) in goodsDetail.unitData" :key="index">
  89. <view v-if="item.isMaster === 4" class="card-goods-stock">
  90. <text v-if="goodsDetail.isEq === 5">1{{ item.unitName }}≈{{ item.conversion }}{{ goodsDetail.unitName }}</text>
  91. <text v-else>1{{ item.unitName }}={{ item.conversion }}{{ goodsDetail.unitName }}</text>
  92. <text style="margin-left: 10rpx;" v-if="goodsDetail.showMinUnitPrice === 5 && now_sku_data.minUnitPrice !== '0.00'">
  93. 1斤={{ now_sku_data.minUnitPrice || goodsDetail.minMinUnitPrice }}元
  94. </text>
  95. </view>
  96. </block>
  97. <view class="card-goods-unit" v-if="!now_sku_data.id">
  98. 选择【单位】
  99. <block v-for="(item, index) in goodsDetail.specGroup" :key="index">
  100. <text>【{{ item.groupSpec.specName }}】</text>
  101. </block>
  102. </view>
  103. <view class="card-goods-unit" v-else>
  104. 已选:{{ buy_num }}{{ now_sku_data.unitName }}
  105. <text v-if="now_sku_data.specGroup.length > 0">,</text>
  106. <block v-for="(item, index) in now_sku_data.specGroup" :key="index">
  107. <text>{{ item.specValueName }}</text>
  108. <text v-if="index !== now_sku_data.specGroup.length - 1">,</text>
  109. </block>
  110. <text v-if="goodsDetail.isEq === 5">,{{ unitsalePrice }}元/{{ eq_sku_kg.unitName }}</text>
  111. </view>
  112. </view>
  113. </view>
  114. <!-- 配送地判断提醒 -->
  115. <view
  116. class="express-view"
  117. v-if="isLogin && address_data.provinceCode && not_dispatch_areas.areas"
  118. @click="goPage('/pagesT/address/SelAddress?address_data=' + JSON.stringify(address_data))"
  119. >
  120. <view class="express-tit">
  121. <text>送至</text>
  122. <text class="desc">(配送地可能会影响库存,请正确选择)</text>
  123. </view>
  124. <view class="region-view clearfix">
  125. <view class="float_left">
  126. <text class="ibonfont ibondizhi2"></text>
  127. <text>{{ address_data.provinceName }}-{{ address_data.cityName }}-{{ address_data.districtName }}</text>
  128. </view>
  129. <view class="float_right"><text class="ibonfont ibonjinru"></text></view>
  130. </view>
  131. </view>
  132. <scroll-view scroll-y class="spec-card-view">
  133. <view class="spec-card-li">
  134. <view class="spec-name">单位</view>
  135. <view class="spec-value-view">
  136. <block v-for="(item, index) in goodsDetail.unitData" :key="index">
  137. <!-- 抄码商品不显示主单位 -->
  138. <block v-if="item.isMaster !== 5 || (item.isMaster === 5 && goodsDetail.isEq !== 5)">
  139. <view
  140. class="spec-val-li"
  141. @click="bindPickerChange(item.unitId, 1, '', item)"
  142. :class="[parseInt(spec_id_group[1]) === parseInt(item.unitId) ? 'primary-bg spec-val-on' : '']"
  143. >
  144. <view v-if="!item.isdisabled" class="dis-tip">待补货</view>
  145. <text :style="{ color: !item.isdisabled ? '#999' : '' }">{{ item.unitName }}</text>
  146. </view>
  147. </block>
  148. </block>
  149. </view>
  150. </view>
  151. <view class="spec-card-li" v-for="(item, index) in goodsDetail.specGroup" :key="index">
  152. <view class="spec-name">{{ item.groupSpec.specName }}</view>
  153. <view class="spec-value-view">
  154. <block v-for="(itemP, indexP) in item.params" :key="indexP">
  155. <view
  156. class="spec-val-li"
  157. :class="[parseInt(spec_id_group[index + 2]) === parseInt(itemP.specValueId) ? 'primary-bg spec-val-on' : '']"
  158. @click="bindPickerChange(itemP.specValueId, index + 2, item.groupSpec.specId, itemP)"
  159. >
  160. <view v-if="!itemP.isdisabled" class="dis-tip">待补货</view>
  161. <text :style="{ color: !itemP.isdisabled ? '#999' : '' }">{{ itemP.specValueName }}</text>
  162. </view>
  163. </block>
  164. </view>
  165. </view>
  166. <view class="buy-num-view clearfix">
  167. <view class="float_left">购买数量</view>
  168. <view class="num-edit-view float_right" v-if="goodsDetail.isDistribution === 4">
  169. <view class="subr-view" :class="[buy_num <= (now_sku_data.setNum || 1) ? 'disabled-color' : '']" @click="delNum">
  170. <u-icon size="26" name="minus"></u-icon>
  171. </view>
  172. <view class="buy-num-input-view"><input @input="buyNumInput" type="number" :disabled="!now_sku_data.id" class="buy-num-input" :value="buy_num" /></view>
  173. <view
  174. class="plus-view"
  175. :class="[
  176. now_sku_data.limitNum
  177. ? buy_num >= now_sku_data.limitNum
  178. ? 'disabled-color'
  179. : ''
  180. : buy_num >= Math.floor(now_sku_data.inventory)
  181. ? 'disabled-color'
  182. : ''
  183. ]"
  184. @click="plusNum"
  185. >
  186. <u-icon size="26" name="plus"></u-icon>
  187. </view>
  188. </view>
  189. <view class="num-edit-view float_right" v-else>
  190. <view class="subr-view" :class="[buy_num <= (now_sku_data.setNum || 1) ? 'disabled-color' : '']" @click="delNum">
  191. <u-icon size="26" name="minus"></u-icon>
  192. </view>
  193. <view class="buy-num-input-view"><input @input="buyNumInput" type="number" :disabled="!now_sku_data.id" class="buy-num-input" :value="buy_num" /></view>
  194. <view class="plus-view" :class="[now_sku_data.limitNum ? (buy_num >= now_sku_data.limitNum ? 'disabled-color' : '') : '']" @click="plusNum">
  195. <u-icon size="26" name="plus"></u-icon>
  196. </view>
  197. </view>
  198. </view>
  199. </scroll-view>
  200. <view class="card-btn-view">
  201. <block v-if="goodsDetail.isDistribution === 4 && goodsDetail.inventorTotal <= 0">
  202. <view v-if="!(goodsDetail.inventorTotal - 0) || goodsDetail.inventorTotal - 0 <= 0" class="btn">
  203. <view class="no-tip">抱歉,该商品在当前区域无库存</view>
  204. </view>
  205. </block>
  206. <!-- <view class="no-tip" v-if="!is_not_express">抱歉,该商品在当前区域无库存</view> -->
  207. <view class="buy-btn" v-else>
  208. <view
  209. @click="goodsBuyNow"
  210. class="card-btn-li primary-fu-bg"
  211. :class="[!is_not_express || (goodsDetail.isDistribution === 4 && !Math.floor(now_sku_data.inventory)) ? 'dis-add' : '']"
  212. >
  213. 立即购买
  214. </view>
  215. <view
  216. @click="addCart"
  217. class="card-btn-li primary-bg"
  218. :class="[!is_not_express || (goodsDetail.isDistribution === 4 && !Math.floor(now_sku_data.inventory)) ? 'dis-add' : '']"
  219. >
  220. 加入购物车
  221. </view>
  222. </view>
  223. </view>
  224. </view>
  225. </u-popup>
  226. <NoLoginTip @cancel="cancelTip" :show="loginTip" v-if="loginTip" />
  227. </view>
  228. </template>
  229. <script>
  230. import NoLoginTip from './NoLoginTip.vue';
  231. export default {
  232. components: {
  233. NoLoginTip
  234. },
  235. props: {
  236. selAddress: {
  237. type: Object,
  238. default: () => {
  239. return {};
  240. }
  241. },
  242. isShow: {
  243. type: Boolean,
  244. default: false
  245. },
  246. goodsId: {
  247. type: [Number, String],
  248. default: 0
  249. },
  250. isList: {
  251. type: Boolean,
  252. default: true
  253. },
  254. skuId: {
  255. type: [Number, String],
  256. default: ''
  257. }
  258. },
  259. watch: {
  260. selAddress(val) {
  261. if (val.provinceCode) {
  262. this.address_data = val;
  263. if (this.not_dispatch_areas.areas) {
  264. if (this.address_data.districtCode) {
  265. this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data.districtCode)) === -1;
  266. } else if (this.address_data.cityCode) {
  267. this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data.cityCode)) === -1;
  268. } else {
  269. this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data.provinceCode)) === -1;
  270. }
  271. }
  272. }
  273. },
  274. skuId(val) {
  275. if (this.goodsDetail.id) {
  276. const nowSkuData = this.goodsDetail.specMultiple.find(item => item.id === parseInt(val));
  277. if (nowSkuData) {
  278. this.spec_id_group = nowSkuData.indexGroup.map(item => {
  279. return parseInt(item);
  280. });
  281. this.buy_num = nowSkuData.setNum || 1;
  282. this.now_sku_data = nowSkuData;
  283. }
  284. }
  285. },
  286. now_sku_data(val) {
  287. this.$emit('skuChange', val);
  288. },
  289. goodsId(val) {
  290. if (this.isShow) {
  291. this.goodsDetail = {};
  292. this.now_sku_data = {};
  293. this.spec_id_group = [val];
  294. this.getGoodsDetail();
  295. }
  296. },
  297. async isShow(val) {
  298. if (val) {
  299. await this.SetShowGoodsPrice();
  300. if (!this.goodsDetail.id) {
  301. if (!this.isList) {
  302. this.goodsDetail = {};
  303. this.now_sku_data = {};
  304. this.spec_id_group = [this.goodsId];
  305. await this.getGoodsDetail();
  306. }
  307. }
  308. if (!this.address_data.provinceCode && this.isLogin) {
  309. await this.getAllShippingAddress();
  310. }
  311. } else {
  312. this.closeaddcartPop();
  313. }
  314. },
  315. buy_num(val) {
  316. this.$emit('buyNumchange', val);
  317. }
  318. },
  319. data() {
  320. return {
  321. eq_sku_kg: {},
  322. isLogin: true, // 判断是否登录
  323. loginTip: false,
  324. showGoodsPrice: '',
  325. goodsDetail: {
  326. images: [],
  327. specGroup: [],
  328. unitData: []
  329. },
  330. spec_id_group: [],
  331. now_sku_data: {},
  332. buy_num: 1,
  333. now_sel_address: {},
  334. address_data: {}, // 客户地址数据
  335. not_dispatch_areas: {}, // 该商品不能配送区域
  336. is_not_express: true, // 当前选择区域是否能够配送
  337. activityId: ''
  338. };
  339. },
  340. computed: {
  341. baseSet() {
  342. return this.$store.state.baseSet;
  343. },
  344. // 起送价
  345. startDeliveryPrice() {
  346. return this.$store.state.baseSet.startDeliveryPrice || 0;
  347. },
  348. // 辅助单位价格
  349. unitsalePrice() {
  350. if (this.goodsDetail.isEq === 5) {
  351. if (this.eq_sku_kg.enabledLadder !== 1) {
  352. return this.eq_sku_kg.salePrice;
  353. } else {
  354. const unitnum = this.buy_num * Number(this.now_sku_data.conversion);
  355. const priceData = this.eq_sku_kg.ladderPrice.find(item => {
  356. return unitnum > item.from && unitnum <= item.to;
  357. });
  358. return priceData.price;
  359. }
  360. } else {
  361. return this.eq_sku_kg.salePrice;
  362. }
  363. }
  364. },
  365. created() {
  366. this.spec_id_group[0] = this.goodsId;
  367. this.isLogin = this.$store.state.hasLogin;
  368. this.address_data = this.$store.state.nowAddress;
  369. if (this.address_data.provinceCode) {
  370. if (this.not_dispatch_areas.areas) {
  371. if (this.address_data.districtCode) {
  372. this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data.districtCode)) === -1;
  373. } else if (this.address_data.cityCode) {
  374. this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data.cityCode)) === -1;
  375. } else {
  376. this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data.provinceCode)) === -1;
  377. }
  378. }
  379. }
  380. },
  381. methods: {
  382. // 商品立即购买
  383. goodsBuyNow() {
  384. if (!this.$store.state.hasLogin) {
  385. this.loginTip = true;
  386. this.closeaddcartPop();
  387. return;
  388. }
  389. if (!this.is_not_express) {
  390. return;
  391. }
  392. // 验证账户状态
  393. this.userAudit();
  394. if (!this.isUserAudit) {
  395. return;
  396. }
  397. if (!this.now_sku_data.id) {
  398. this.$api.msg('请选择商品属性');
  399. return;
  400. }
  401. if (this.goodsDetail.isDistribution === 4 && !Math.floor(this.now_sku_data.inventory)) {
  402. this.$api.msg('当前商品库存不足');
  403. return;
  404. }
  405. if (this.buy_num <= 0) {
  406. this.$api.msg('请输入大于0的购买数量');
  407. return;
  408. }
  409. if (this.buy_num < this.now_sku_data.setNum) {
  410. this.$api.msg('该商品起订数量为' + this.now_sku_data.setNum + this.now_sku_data.unitName);
  411. return;
  412. }
  413. const totalPrice = this.$NP.times(this.now_sku_data.salePrice, this.buy_num);
  414. if (totalPrice < this.startDeliveryPrice) {
  415. this.$u.toast('当前下单金额不足起送价:' + this.startDeliveryPrice + '元,先加入购物车吧');
  416. return;
  417. }
  418. console.log(this.now_sku_data);
  419. if (this.now_sku_data.isActivity === 5) {
  420. this.activityId = this.now_sku_data.activity.activityId;
  421. }
  422. uni.navigateTo({
  423. url: `/pagesT/order/createOrder?goodsId=${this.goodsDetail.id}&goodsBasicId=${this.goodsDetail.basicGoodsId}&skuId=${this.now_sku_data.id}&buyNum=${
  424. this.buy_num
  425. }&shopId=${this.goodsDetail.shopId}&activityId=${this.activityId}`
  426. });
  427. },
  428. cancelTip() {
  429. this.loginTip = false;
  430. },
  431. SetShowGoodsPrice() {
  432. if (this.$store.state.baseSet.goodsPrice === 5 && this.$store.state.hasLogin) {
  433. this.showGoodsPrice = '';
  434. } else if (!this.$store.state.hasLogin && this.$store.state.baseSet.goodsPrice === 4) {
  435. this.showGoodsPrice = '¥**';
  436. } else if (this.$store.state.userStatus.enableStatus === 4 && this.$store.state.baseSet.goodsPrice === 4) {
  437. this.showGoodsPrice = '已禁用';
  438. } else if (this.$store.state.userStatus.status !== 2 && this.$store.state.baseSet.goodsPrice === 4) {
  439. if (this.$store.state.userStatus.status === 0) {
  440. this.showGoodsPrice = '待审核';
  441. } else if (this.$store.state.userStatus.status === 1) {
  442. this.showGoodsPrice = '审核中';
  443. } else if (this.$store.state.userStatus.status === 3) {
  444. this.showGoodsPrice = '已驳回';
  445. }
  446. } else {
  447. this.showGoodsPrice = '';
  448. }
  449. },
  450. delNum() {
  451. if (!this.now_sku_data.id) {
  452. this.$api.msg('请选择商品属性');
  453. return;
  454. }
  455. // 不支持负库存销售
  456. if (this.goodsDetail.isDistribution === 4) {
  457. if (this.buy_num > Math.floor(this.now_sku_data.inventory)) {
  458. this.buy_num = Math.floor(this.now_sku_data.inventory) < 0 ? 0 : Math.floor(this.now_sku_data.inventory);
  459. return;
  460. }
  461. }
  462. if (this.now_sku_data.cartNum > 0) {
  463. if (this.buy_num > 1) {
  464. this.buy_num = this.buy_num - 1;
  465. } else {
  466. this.$api.msg('不能再减少了哦!');
  467. }
  468. } else {
  469. // this.$api.msg('不能再减少了哦!')
  470. if (this.buy_num > this.now_sku_data.setNum) {
  471. this.buy_num = this.buy_num - 1;
  472. } else {
  473. this.$api.msg('不能再减少了哦!');
  474. }
  475. }
  476. },
  477. plusNum() {
  478. if (!this.now_sku_data.id) {
  479. this.$api.msg('请选择商品属性');
  480. return;
  481. }
  482. if (this.now_sku_data.limitNum > 0) {
  483. if (this.buy_num >= this.now_sku_data.limitNum) {
  484. // this.$api.msg(`限购${this.now_sku_data.limitNum}${this.now_sku_data.unitName},不能再增加了哦!`);
  485. return;
  486. }
  487. }
  488. if (this.goodsDetail.isDistribution === 4) {
  489. if (this.buy_num >= Math.floor(this.now_sku_data.inventory)) {
  490. // this.$api.msg('不能再增加了哦!');
  491. return;
  492. }
  493. }
  494. this.buy_num = this.buy_num - 0 + 1;
  495. },
  496. buyNumInput(e) {
  497. // 当重复设置某些属性为相同的值时,不会同步到view层。解决方法,在设置新值之前先设置为记录的当前值
  498. this.buy_num = e.detail.value - 0;
  499. // 没有启用预售不用检查库存
  500. if (this.goodsDetail.isDistribution === 4) {
  501. if (e.detail.value - 0 > Math.floor(this.now_sku_data.inventory)) {
  502. this.$api.msg('库存不足,已为您修正');
  503. this.$nextTick(() => {
  504. this.buy_num = Math.floor(this.now_sku_data.inventory);
  505. });
  506. return;
  507. }
  508. }
  509. if (this.now_sku_data.limitNum) {
  510. if (e.detail.value - 0 > this.now_sku_data.limitNum) {
  511. this.$api.msg(`限购${this.now_sku_data.limitNum}${this.now_sku_data.unitName},已为您修正`);
  512. this.$nextTick(() => {
  513. this.buy_num = Math.floor(this.now_sku_data.limitNum);
  514. });
  515. } else if (e.detail.value - 0 < this.now_sku_data.limitNum) {
  516. // 当起订数量小于限购数量莳
  517. if (this.now_sku_data.setNum && this.now_sku_data.setNum <= this.now_sku_data.limitNum) {
  518. // 当存在起订数量
  519. // if (e.detail.value - 0 < this.now_sku_data.setNum) {
  520. // this.$api.msg('该商品起订数量为' + this.now_sku_data.setNum + this.now_sku_data.unitName);
  521. // this.$nextTick(() => {
  522. // this.buy_num = this.now_sku_data.setNum;
  523. // });
  524. // }
  525. } else if (this.now_sku_data.setNum && this.now_sku_data.setNum > this.now_sku_data.limitNum) {
  526. // 当存在起订数量
  527. if (e.detail.value - 0 < this.now_sku_data.limitNum) {
  528. this.$api.msg(`限购${this.now_sku_data.limitNum}${this.now_sku_data.unitName},已为您修正`);
  529. this.$nextTick(() => {
  530. this.buy_num = Math.floor(this.now_sku_data.limitNum);
  531. });
  532. }
  533. } else {
  534. this.$nextTick(() => {
  535. this.buy_num = this.now_sku_data.setNum || e.detail.value - 0;
  536. });
  537. }
  538. }
  539. } else {
  540. // 没有启用预售不用检查库存
  541. if (this.goodsDetail.isDistribution === 4) {
  542. if (e.detail.value - 0 > Math.floor(this.now_sku_data.inventory)) {
  543. this.$api.msg('库存不足,已为您修正');
  544. this.$nextTick(() => {
  545. this.buy_num = Math.floor(this.now_sku_data.inventory);
  546. });
  547. }
  548. }
  549. }
  550. },
  551. // 关闭加入购物车弹窗
  552. closeaddcartPop() {
  553. this.$emit('close', false);
  554. },
  555. /*
  556. *选择规格
  557. * id 单位属性的ID
  558. * index 规格id组的下标
  559. * specId 属性名id
  560. * row 当前选中属性值
  561. */
  562. bindPickerChange(id, index, specId, row) {
  563. // 判断当前规格是否禁用
  564. if (row && !row.isdisabled) {
  565. return;
  566. }
  567. this.$set(this.spec_id_group, index, parseInt(id));
  568. if (this.spec_id_group.every(item => !!item)) {
  569. const indexGroup = this.spec_id_group.join(':');
  570. const nowSkuData = this.goodsDetail.specMultiple.find(item => item.index === indexGroup);
  571. if (nowSkuData) {
  572. this.now_sku_data = nowSkuData;
  573. }
  574. }
  575. // this.buy_num = this.now_sku_data.setNum || 1;
  576. if (this.now_sku_data.limitNum > 0 && this.now_sku_data.setNum > this.now_sku_data.limitNum) {
  577. this.buy_num = this.now_sku_data.limitNum || 1;
  578. } else {
  579. this.buy_num = this.now_sku_data.setNum || 1;
  580. }
  581. // 判断当前规格是否要禁用,规格组不存在或者库存为0的时候,当前规格禁用
  582. if (index) {
  583. // 过滤出包含当前规格的规格组
  584. const containSpecMultiple = this.goodsDetail.specMultiple.filter(item => item.indexGroup.includes(id + ''));
  585. const target = this.$u.deepClone(this.goodsDetail.specGroup);
  586. target.forEach(item => {
  587. if (item.groupSpec.specId !== specId) {
  588. item.params.forEach(itemP => {
  589. const isObj = containSpecMultiple.find(itemF => {
  590. return itemF.indexGroup.includes(itemP.specValueId + '');
  591. });
  592. // 没有开启预售判断库存
  593. if (this.goodsDetail.isDistribution === 4) {
  594. itemP.isdisabled = !!isObj && Math.floor(isObj.inventory) > 0 && isObj.isSale !== 4;
  595. } else {
  596. itemP.isdisabled = isObj.isSale !== 4;
  597. }
  598. });
  599. }
  600. });
  601. this.goodsDetail.specGroup = target;
  602. }
  603. },
  604. // 加入购物车
  605. async addCart() {
  606. if (!this.$store.state.hasLogin) {
  607. this.loginTip = true;
  608. this.closeaddcartPop();
  609. return;
  610. }
  611. if (!this.is_not_express) {
  612. return;
  613. }
  614. // 验证账户状态
  615. this.userAudit();
  616. if (!this.isUserAudit) {
  617. return;
  618. }
  619. if (!this.now_sku_data.id) {
  620. this.$api.msg('请选择商品属性');
  621. return;
  622. }
  623. if (this.goodsDetail.isDistribution === 4 && !Math.floor(this.now_sku_data.inventory)) {
  624. this.$api.msg('当前商品库存不足');
  625. return;
  626. }
  627. if (this.buy_num <= 0) {
  628. this.$api.msg('请输入大于0的购买数量');
  629. return;
  630. }
  631. if (this.buy_num < this.now_sku_data.setNum) {
  632. this.$api.msg('该商品起订数量为' + this.now_sku_data.setNum + this.now_sku_data.unitName);
  633. return;
  634. }
  635. const goodsData = [
  636. {
  637. goodsBasicId: this.goodsDetail.basicGoodsId,
  638. goodsId: this.goodsDetail.id,
  639. buyNum: this.buy_num,
  640. shopId: this.goodsDetail.shopId,
  641. source: this.$common.source(),
  642. skuId: this.now_sku_data.id
  643. }
  644. ];
  645. this.$u.api
  646. .addCart({
  647. goodsData
  648. })
  649. .then(res => {
  650. uni.showToast({
  651. title: '加入成功',
  652. icon: 'none'
  653. });
  654. let stateNum = this.$_utils.accAdd((this.$store.state.cartNum || 0) - 0, this.buy_num);
  655. let statePrice = this.$_utils.accAdd((this.$store.state.cartPrice || 0) - 0, (this.now_sku_data.salePrice - 0) * this.buy_num);
  656. this.$store.commit('commit_cartNum', stateNum);
  657. this.$store.commit('commit_cartPrice', statePrice);
  658. this.closeaddcartPop();
  659. // 点击购物车发送请求
  660. // setTimeout(() => {
  661. // uni.switchTab({
  662. // url: '/pages/cart/cart'
  663. // });
  664. // }, 100)
  665. });
  666. },
  667. // 请求商品品详情
  668. async getGoodsDetail() {
  669. this.$u.api
  670. .getGoodsDetail(this.goodsId)
  671. .then(({ data }) => {
  672. this.goodsDetail = data;
  673. // 抄码商品获取 KG 数据
  674. if (data.isEq === 5) {
  675. this.eq_sku_kg = data.specMultiple.find(item => item.isMaster === 5);
  676. }
  677. this.buy_num = 1;
  678. // 多规格时处理属性禁用标示
  679. if (data.specType !== 1) {
  680. data.specGroup = data.specGroup.map(item => {
  681. return {
  682. ...item,
  683. params: item.params.map(itemP => {
  684. return {
  685. ...itemP,
  686. isdisabled: true
  687. };
  688. })
  689. };
  690. });
  691. data.unitData.forEach(item => {
  692. item.isdisabled = true;
  693. });
  694. } else {
  695. //单规格 添加当前单位没有库存的标记
  696. const arr = data.specMultiple.filter(item => Math.floor(item.inventory) <= 0);
  697. data.unitData.forEach(item => {
  698. const unitItem = data.specMultiple.find(itemF => itemF.unitId === item.unitId);
  699. // 没有开启预售判断库存
  700. if (this.goodsDetail.isDistribution === 4) {
  701. item.isdisabled = Math.floor(unitItem.inventory) > 0 && unitItem.isSale !== 4;
  702. } else {
  703. item.isdisabled = unitItem.isSale !== 4;
  704. }
  705. });
  706. }
  707. if (this.skuId) {
  708. // 如果已有选中的skuId 根据ID匹配对应规格数据
  709. const specMultiple = data.specMultiple.find(item => item.id === parseInt(this.skuId));
  710. if (specMultiple.isSale !== 4) {
  711. this.now_sku_data = specMultiple;
  712. }
  713. } else if (data.specMultiple.length === 1) {
  714. //当规格只有一个默认选中
  715. // 没有开启预售
  716. if (data.specMultiple[0].isSale !== 4) {
  717. if (this.goodsDetail.isDistribution === 4) {
  718. // 如果当前商品规格只有一个且库存大于0则默认选中
  719. if (data.specMultiple[0].inventory > 0 && data.specMultiple[0].isSale !== 4) {
  720. this.now_sku_data = data.specMultiple[0];
  721. }
  722. } else {
  723. this.now_sku_data = data.specMultiple[0];
  724. }
  725. }
  726. } else {
  727. // 如果当前商品是非抄码商品 默认选中默认规格
  728. if (data.isEq === 4) {
  729. const specMultiple = data.specMultiple.find(item => item.isDefault === 5);
  730. if (specMultiple && specMultiple.isSale !== 4) {
  731. this.now_sku_data = specMultiple;
  732. }
  733. } else {
  734. // 抄码商品默认选中一个
  735. const specMultiple = data.specMultiple.find(item => item.isMaster === 4);
  736. if (specMultiple && specMultiple.isSale !== 4) {
  737. this.now_sku_data = specMultiple;
  738. }
  739. }
  740. }
  741. // 如果有已选中的规格则进行下一步规格的操作处理
  742. // console.log(this.goodsDetail);
  743. if (!this.now_sku_data.id) {
  744. return;
  745. }
  746. // 进行组合选中规格的id数组
  747. this.spec_id_group = this.now_sku_data.indexGroup.map(item => {
  748. return parseInt(item);
  749. });
  750. //如果起订数量大于限购数量,默认购买数量为限购数量
  751. if (this.now_sku_data.limitNum > 0 && this.now_sku_data.setNum > this.now_sku_data.limitNum) {
  752. this.buy_num = this.now_sku_data.limitNum || 1;
  753. } else {
  754. // 否则购买数量为起订数量
  755. this.buy_num = this.now_sku_data.setNum || 1;
  756. }
  757. // 该商品不能配送区域
  758. this.not_dispatch_areas = data.express.ruleData.not_dispatch_areas;
  759. // 默认设置当前选择区域是否能够配送的标示为true
  760. this.is_not_express = true;
  761. this.$nextTick(() => {
  762. if (this.not_dispatch_areas.areas) {
  763. if (this.address_data.districtCode) {
  764. this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data.districtCode)) === -1;
  765. } else if (this.address_data.cityCode) {
  766. this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data.cityCode)) === -1;
  767. } else {
  768. this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data.provinceCode)) === -1;
  769. }
  770. }
  771. });
  772. })
  773. .catch(err => {
  774. this.closeaddcartPop();
  775. });
  776. },
  777. // 获取地址列表
  778. async getAllShippingAddress() {
  779. this.$u.api
  780. .getAllShippingAddress({
  781. page: 1,
  782. pageSize: 10
  783. })
  784. .then(({ data }) => {
  785. if (data.length) {
  786. const address = data.find(item => item.defaultStatus === 5) || data[0];
  787. this.address_data = {
  788. provinceCode: address.provinceCode,
  789. cityCode: address.cityCode,
  790. districtCode: address.districtCode,
  791. provinceName: address.area.provinceName,
  792. cityName: address.area.cityName,
  793. districtName: address.area.districtName
  794. };
  795. this.$store.commit('commit_nowAddress', this.address_data);
  796. if (this.not_dispatch_areas.areas) {
  797. if (this.address_data.districtCode) {
  798. this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data.districtCode)) === -1;
  799. } else if (this.address_data.cityCode) {
  800. this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data.cityCode)) === -1;
  801. } else {
  802. this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data.provinceCode)) === -1;
  803. }
  804. }
  805. }
  806. });
  807. }
  808. }
  809. };
  810. </script>
  811. <style lang="scss" scoped>
  812. .activity-tag {
  813. font-size: 20upx;
  814. padding: 2upx 4upx;
  815. background-color: #ff4d01;
  816. color: #fff;
  817. border-radius: 4upx;
  818. display: inline-block;
  819. }
  820. .add-cart-view {
  821. position: relative;
  822. background-color: #fff;
  823. padding: 30upx;
  824. border-top-left-radius: 8upx;
  825. border-top-right-radius: 8upx;
  826. .close-icon {
  827. position: absolute;
  828. top: 20upx;
  829. right: 20upx;
  830. }
  831. .card-goods-info {
  832. .card-goods-img {
  833. padding-right: 32upx;
  834. position: relative;
  835. overflow: hidden;
  836. image {
  837. border-radius: 8upx;
  838. width: 230upx;
  839. height: 230upx;
  840. display: block;
  841. }
  842. .Eq-view {
  843. width: 140rpx;
  844. background-color: $uni-color-primary;
  845. color: #ffffff;
  846. position: absolute;
  847. left: -40rpx;
  848. top: 14rpx;
  849. transform: rotate(-45deg);
  850. font-size: 20rpx;
  851. text-align: center;
  852. line-height: 30rpx;
  853. }
  854. }
  855. .goods-title {
  856. font-weight: 600;
  857. -webkit-line-clamp: 1;
  858. }
  859. .lap-info {
  860. display: flex;
  861. font-size: 24upx;
  862. .lap-li {
  863. text-align: center;
  864. flex: 3;
  865. padding: 0 20upx;
  866. .laprice-text {
  867. font-size: 28upx;
  868. font-weight: 600;
  869. color: #ff4d01;
  870. font-family: DIN-Medium;
  871. }
  872. }
  873. }
  874. .card-goods-priceview {
  875. color: #ff4d01;
  876. font-weight: 600;
  877. font-size: 40upx;
  878. padding-top: 16upx;
  879. font-family: DIN-Medium;
  880. .rmb-icon {
  881. font-weight: 400;
  882. margin-right: 8upx;
  883. font-size: 24upx;
  884. }
  885. }
  886. .card-goods-stock {
  887. font-size: 24upx;
  888. color: #999999;
  889. padding-top: 10upx;
  890. .snum-li {
  891. padding-right: 10upx;
  892. display: inline-block;
  893. &:last-child-child {
  894. padding-right: 0;
  895. }
  896. }
  897. }
  898. .card-goods-unit {
  899. font-size: 24upx;
  900. padding-top: 10upx;
  901. }
  902. }
  903. .spec-card-view {
  904. max-height: 700upx;
  905. overflow-y: auto;
  906. .spec-card-li {
  907. padding: 20upx 0 0;
  908. border-bottom: 1px solid #f5f5f5;
  909. .spec-name {
  910. font-size: 28upx;
  911. padding-bottom: 20upx;
  912. }
  913. .spec-value-view {
  914. .spec-val-li {
  915. margin-right: 30upx;
  916. margin-bottom: 18upx;
  917. border-radius: 8upx;
  918. font-size: 26upx;
  919. display: inline-block;
  920. min-width: 52upx;
  921. padding: 0 24upx;
  922. line-height: 54upx;
  923. text-align: center;
  924. color: #333333;
  925. border: 1px solid #eeeeee;
  926. background-color: #eeeeee;
  927. position: relative;
  928. .dis-tip {
  929. position: absolute;
  930. font-size: 18rpx;
  931. color: #ffffff;
  932. background-color: #c0c4cc;
  933. padding: 4rpx 6rpx;
  934. border-top-left-radius: 12rpx;
  935. border-bottom-right-radius: 12rpx;
  936. top: -20rpx;
  937. right: -30rpx;
  938. line-height: 20rpx;
  939. }
  940. }
  941. .spec-val-on {
  942. background-color: $uni-color-primary;
  943. color: #ffffff;
  944. }
  945. }
  946. }
  947. }
  948. .buy-num-view {
  949. padding: 20upx 0 130upx;
  950. font-size: 28upx;
  951. .num-edit-view {
  952. text-align: center;
  953. display: inline-flex;
  954. align-items: center;
  955. .buy-num-input-view {
  956. display: flex;
  957. position: relative;
  958. text-align: center;
  959. padding: 0;
  960. justify-content: center;
  961. align-items: center;
  962. margin: 0 6rpx;
  963. flex-direction: row;
  964. .buy-num-input {
  965. width: 80upx;
  966. text-align: center;
  967. line-height: 44upx;
  968. height: 44upx;
  969. font-size: 26upx;
  970. }
  971. }
  972. .subr-view,
  973. .plus-view {
  974. justify-content: center;
  975. align-items: center;
  976. flex-direction: row;
  977. display: flex;
  978. margin-top: 0upx;
  979. width: 44upx;
  980. height: 44upx;
  981. background-color: #f2f3f5;
  982. font-size: 36upx;
  983. color: #323233;
  984. border-radius: 8upx;
  985. }
  986. .disabled-color {
  987. color: #c8c9cc;
  988. background: #f7f8fa;
  989. }
  990. }
  991. }
  992. .card-btn-view {
  993. position: absolute;
  994. bottom: 0;
  995. left: 0;
  996. z-index: 9;
  997. width: 750upx;
  998. background-color: #fff;
  999. border-top: 1px solid #f5f5f5;
  1000. .no-tip {
  1001. font-size: 22upx;
  1002. background-color: #fdf6ec;
  1003. color: #d48d24;
  1004. text-align: center;
  1005. line-height: 42upx;
  1006. }
  1007. .buy-btn {
  1008. display: flex;
  1009. .card-btn-li {
  1010. flex: 2;
  1011. // width: 100%;
  1012. text-align: center;
  1013. line-height: 90upx;
  1014. color: #fff;
  1015. background-color: #007aff;
  1016. }
  1017. .dis-add {
  1018. color: #cccccc;
  1019. }
  1020. }
  1021. }
  1022. }
  1023. .express-view {
  1024. padding: 20upx 0;
  1025. border-bottom: 1px solid #f5f5f5;
  1026. .express-tit {
  1027. font-size: 28upx;
  1028. padding-bottom: 10upx;
  1029. .desc {
  1030. font-size: 20upx;
  1031. color: #999999;
  1032. }
  1033. }
  1034. .region-view {
  1035. font-size: 26upx;
  1036. .float_left {
  1037. .ibondizhi2 {
  1038. font-size: 28upx;
  1039. margin-right: 10upx;
  1040. color: #666666;
  1041. }
  1042. }
  1043. .float_right {
  1044. .ibonjinru {
  1045. font-size: 28upx;
  1046. color: #666666;
  1047. }
  1048. }
  1049. }
  1050. }
  1051. .vip-price {
  1052. margin-top: 6rpx;
  1053. line-height: 32rpx;
  1054. height: 32rpx;
  1055. border-radius: 3rpx;
  1056. overflow: hidden;
  1057. font-family: DINPro-Regular;
  1058. .price-text {
  1059. float: left;
  1060. min-width: 80rpx;
  1061. text-align: center;
  1062. vertical-align: middle;
  1063. font-size: 20rpx;
  1064. color: #ffdfa2;
  1065. background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
  1066. padding: 0 8rpx;
  1067. }
  1068. .price-bs {
  1069. text-align: center;
  1070. float: left;
  1071. vertical-align: middle;
  1072. width: 32rpx;
  1073. background-color: #ffdfa2;
  1074. font-size: 20rpx;
  1075. color: #2c7564;
  1076. }
  1077. }
  1078. </style>