productDetail.vue 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249
  1. <template>
  2. <view class="pages">
  3. <!-- head -->
  4. <view class="scrollPage-header">
  5. <view :style="{height:statusBarHeight+'px'}"></view>
  6. <view class="header-title">
  7. <view class="header-left" @click="goBack">
  8. <uni-icons type="arrowleft" size="20"></uni-icons>
  9. <text>{{isShare?'首页':'返回'}}</text>
  10. </view>
  11. <view class="header-right"></view>
  12. </view>
  13. </view>
  14. <!-- 内容 -->
  15. <view class="scrollPage-content">
  16. <view class="product-info" v-if="detail">
  17. <view :style="{height:statusBarHeight+'px'}"></view>
  18. <u-swiper mode="number" :border-radius="0" img-mode="aspectFit" :interval="3000" :height="450" :list="imgList" @click="viewImg"></u-swiper>
  19. <view class="product-info-text">
  20. <view class="product-info-text-title">
  21. {{detail.productName}}
  22. <!-- <view class="copyText" @click="copy(detail.productName)">复制</view> -->
  23. <uni-tag style="margin-left: 10px;" size="mini" :circle="true" v-if="detail.status==0 || detail.dealerScopeFlag==0" :text="detail.status==0?'已下架':'已售罄'"></uni-tag>
  24. </view>
  25. <view class="product-info-text-attr">
  26. <view class="product-info-price flex align_center" v-if="!hasLogin">
  27. ¥***
  28. </view>
  29. <view class="flex align_center" v-else>
  30. <view class="product-info-price">
  31. ¥<text>{{detail.priceStr[0]}}</text>.{{detail.priceStr[1]}}
  32. </view>
  33. <view class="flex align_center rebate-tag" v-if="detail.promoType=='BUY_PROD_GIVE_VALID'">
  34. 返<text>{{detail.resultValue}}</text>元
  35. </view>
  36. <view class="flex align_center rebate-tag" v-if="detail.promoType=='BUY_PROD_GIVE_PROD'">
  37. 买{{detail.conditionValue}}赠{{detail.resultValue}}
  38. </view>
  39. <view class="flex align_center tejia-tag" v-if="detail.promoType=='PROMO_PROD'">
  40. 特价<text>¥{{detail.orginPrice}}</text>
  41. </view>
  42. </view>
  43. <view class="product-info-nums">
  44. <view class="share">
  45. <button open-type="share"><u-icon :size='24' name="zhuanfa"></u-icon> 分享</button>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <u-divider bg-color="">商品详情</u-divider>
  52. <view class="product-info-guige" v-if="detail&&detail.product">
  53. <view class="row">品牌:<text>{{detail.product.productBrandName||'--'}}</text></view>
  54. <view class="row">原厂编码:<text>{{detail.product.origCode||'--'}} </text> <view class="copyText" v-if="detail.product.origCode" @click="copy(detail.product.origCode)">复制</view></view>
  55. <view class="row">产品编码:<text>{{detail.product.code||'--'}}</text> <view class="copyText" v-if="detail.product.code" @click="copy(detail.product.code)">复制</view></view>
  56. <view class="row">条形码:<text>{{detail.product.qrCode||'--'}}</text> <view class="copyText" v-if="detail.product.qrCode" @click="copy(detail.product.qrCode)">复制</view></view>
  57. <view class="row">商品尺寸:<text>{{detail.product.size||'--'}}</text></view>
  58. <view class="row-ban">计量单位:<text>{{detail.product.unit||'--'}}</text></view>
  59. <view class="row-ban">重量:<text>{{detail.product.weight||'--'}}</text></view>
  60. <view class="row-ban">包装数:<text>{{ (detail.product.packQty) || '--' }}{{ detail.product.packQty ? detail.product.unit : '' }}/{{ detail.product.packQtyUnit||'--' }}</text></view>
  61. </view>
  62. <view class="flex align_center row-info">
  63. <view class="flex"><u-icon :size='24' name="checkbox-mark"></u-icon> <view class="txt">由汽配商发货</view></view>
  64. <view class="flex"><u-icon :size='24' name="checkbox-mark"></u-icon> <view class="txt">退换货及售后请联系汽配商</view></view>
  65. </view>
  66. <view class="product-info-content">
  67. <rich-text v-if="detail && detail.product && detail.product.description" :nodes="detail.product.description"></rich-text>
  68. <view v-else style="font-size: 12px;color: #999;text-align: center;">暂无产品介绍</view>
  69. </view>
  70. </view>
  71. <!-- 底部栏 -->
  72. <view class="scrollPage-footer">
  73. <view class="scrollPage-footer-box">
  74. <view class="footer-left">
  75. <view v-if="isShare" class="footer-left-item" @click="goBack">
  76. <u-icon :size='50' color="#666" name="home"></u-icon>
  77. <text class="footer-left-item-text">首页</text>
  78. </view>
  79. <view class="footer-left-item" @click="toCart">
  80. <u-icon :size='50' color="#666" name="shopping-cart"></u-icon>
  81. <text class="footer-left-item-text">购物车</text>
  82. <text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text>
  83. </view>
  84. </view>
  85. <view class="footer-right">
  86. <view class="footer-right-item" @click="toAddCart">
  87. <text>加入购物车</text>
  88. </view>
  89. <view class="footer-right-item" @click="toBuy">
  90. <text>立即购买</text>
  91. </view>
  92. </view>
  93. </view>
  94. <view :style="{height:safeAreaBottom+'px'}"></view>
  95. </view>
  96. <!-- 购物车动画 -->
  97. <uni-cart-animation ref="cartAnimation" @animationfinish="animationfinish"></uni-cart-animation>
  98. <!-- 立即购买和付款 -->
  99. <page-container
  100. :show="showPopu"
  101. :round="true"
  102. :z-index="100"
  103. position="bottom"
  104. customStyle="border-radius:15px 15px 0 0;"
  105. @beforeleave="beforeClosePopu"
  106. @afterleave="closePopu">
  107. <!-- 确认订单 -->
  108. <view class="popu-content" v-if="detail&&!showPay">
  109. <view class="popu-close" @click="cancelBuy">
  110. <uni-icons size="26" type="closeempty"></uni-icons>
  111. </view>
  112. <view class="pupu-box">
  113. <view class="popu-content-img">
  114. <image style="width: 80px; height: 80px;" mode="aspectFit" :src="detail.productMsg||'/static/def_imgs.png'"></image>
  115. </view>
  116. <view class="popu-content-info">
  117. <view class="popu-content-info-title">
  118. <text class="ellipsis-two">{{detail.productName}}</text>
  119. </view>
  120. <view class="popu-content-info-code">
  121. <text class="ellipsis-two">{{detail.product.code}}</text>
  122. </view>
  123. <view class="popu-content-box">
  124. <view class="popu-content-price" v-if="hasLogin">
  125. ¥<text>{{detail.priceStr[0]}}</text>.{{detail.priceStr[1]}}
  126. </view>
  127. <view class="popu-content-price" v-else>¥***</view>
  128. <view class="flex align_center rebate-tag" v-if="hasLogin&&detail.promoType=='BUY_PROD_GIVE_VALID'">
  129. 返<text>{{detail.resultValue}}</text>元
  130. </view>
  131. <view class="flex align_center rebate-tag" v-if="hasLogin&&detail.promoType=='BUY_PROD_GIVE_PROD'">
  132. 买{{detail.conditionValue}}赠{{detail.resultValue}}
  133. </view>
  134. <view class="flex align_center tejia-tag" v-if="hasLogin&&detail.promoType=='PROMO_PROD'">
  135. 特价<text>¥{{detail.orginPrice}}</text>
  136. </view>
  137. </view>
  138. <view style="margin-top: 10px;" class="popu-content-num flex align_center justify_end">
  139. <text>数量</text>
  140. <view class="flex align_center qty-box">
  141. <view class="qty-btn" @click="changeQty(qty-1)" :class="(qty <= 1)?'qty-disabled':''">-</view>
  142. <view class="qty-num" @click="$refs.showPopu.open()" :style="{width:Number(qty).toString().length*8+10+'px'}">
  143. {{qty}}
  144. </view>
  145. <view class="qty-btn" @click="changeQty(qty+1)" :class="(qty >= 999)?'qty-disabled':''">+</view>
  146. </view>
  147. </view>
  148. </view>
  149. </view>
  150. <view class="pupu-box gift-box" v-if="giftNum">
  151. <view class="popu-content-img">
  152. <image style="width: 58px; height: 58px;" mode="aspectFit" :src="detail.productMsg||'/static/def_imgs.png'"></image>
  153. </view>
  154. <view class="popu-content-info">
  155. <view class="popu-content-info-title flex align_center">
  156. <view class="flex align_center rebate-tag">
  157. 赠品
  158. </view>
  159. <view class="ellipsis-two">{{detail.productName}}</view>
  160. </view>
  161. <view class="popu-content-box">
  162. <view class="popu-content-num flex align_center">
  163. <text>X</text> {{giftNum}}
  164. </view>
  165. </view>
  166. </view>
  167. </view>
  168. <view class="pupu-box-item">
  169. <view class="flex align_center justify_between" v-if="shelfInfo">
  170. <text>配送商:{{shelfInfo.dealerName}}</text>
  171. <view @click="callPhone()"><uni-icons size="18" type="phone" color="dodgerblue"></uni-icons><text style="font-size:12px;">拨打</text></view>
  172. </view>
  173. <view v-if="hasBalancePay&&!isAddCart">
  174. <view class="totalBar-box">
  175. <view class="flex align_center justify_between">
  176. <view>总金额</view>
  177. <view><text class="pf">¥</text>50.00</view>
  178. </view>
  179. <view class="flex align_center justify_between">
  180. <view>抵扣(余额:<text class="pf">¥</text>3.00)</view>
  181. <view class="flex align_center"><uni-icons size="18" type="checkbox" color="#2196f3"></uni-icons> <text class="pf">¥</text>2.00</view>
  182. </view>
  183. <view class="flex align_center justify_between">
  184. <view>合计</view>
  185. <view><text class="pf">¥</text>48.00</view>
  186. </view>
  187. </view>
  188. <payOptions v-model="payType"></payOptions>
  189. </view>
  190. </view>
  191. <view class="popu-content-btn">
  192. <view class="popu-content-btn-item cartbtn" v-if="isAddCart" @click="submitCart($event)">加入购物车</view>
  193. <view class="popu-content-btn-item okbtn" v-if="!isAddCart" @click="toBuy">
  194. {{hasPay?'立即支付':'确定采购'}}
  195. <text class="payAmount">¥{{payAmount}}</text>
  196. </view>
  197. </view>
  198. </view>
  199. <!-- 确认付款 -->
  200. <view class="popu-content" v-if="payInfo&&showPay">
  201. <view class="popu-close" @click="cancelPay">
  202. <uni-icons size="26" type="closeempty"></uni-icons>
  203. </view>
  204. <view class="pupu-box-pay-item">
  205. <view class="popu-content-amount flex align_center justify_center">
  206. <view>¥{{payInfo.totalAmount}}</view>
  207. </view>
  208. <view class="flex align_center justify_between" v-if="payInfo.totalSpecialGiveAmount>0">
  209. <text>总优惠</text>
  210. <view class="popu-content-price">¥{{payInfo.totalSpecialGiveAmount}}</view>
  211. </view>
  212. <view class="flex align_center justify_between" v-if="payInfo.totalTicketGiveAmount>0">
  213. <text>代金券</text>
  214. <view class="popu-content-price">¥{{payInfo.totalTicketGiveAmount}}</view>
  215. </view>
  216. <view style="height: 10px;"></view>
  217. <view class="popu-content-title flex align_center justify_between">
  218. <text>付款方式</text>
  219. <view></view>
  220. </view>
  221. <view class="popu-content-pay flex align_center justify_between">
  222. <view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
  223. <view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
  224. </view>
  225. </view>
  226. <view class="popu-content-btn">
  227. <view class="popu-content-btn-item okbtn" @click="confirmPay">确定付款</view>
  228. </view>
  229. </view>
  230. </page-container>
  231. <!-- 修改数量弹框 -->
  232. <uni-popup ref="showPopu" type="center" style="z-index: 1500;" :maskClick="false">
  233. <view class="popu-nums-content">
  234. <view class="popu-close" @click="$refs.showPopu.close()">
  235. <uni-icons size="26" type="closeempty"></uni-icons>
  236. </view>
  237. <view class="popu-content-title flex align_center justify_center"><text>修改商品数量</text></view>
  238. <view class="popu-content-num flex align_center justify_center">
  239. <uni-number-box v-model="qty" :size="28" :input-width="280" :input-height="70" :min="1" :max="999"></uni-number-box>
  240. </view>
  241. <view class="popu-content-btn">
  242. <view class="popu-content-btn-item okbtn" @click="$refs.showPopu.close()">确定</view>
  243. </view>
  244. </view>
  245. </uni-popup>
  246. </view>
  247. </template>
  248. <script>
  249. import {
  250. mapState,
  251. mapMutations,
  252. } from 'vuex'
  253. import { addCart, getCartCount } from '@/api/cart.js'
  254. import { getShopDetail } from '@/api/shop.js'
  255. import { purchaseSave, purchaseCheck, purchasePay } from '@/api/purchase.js'
  256. import { toAuthStore, toLogin } from "@/utils/index.js"
  257. import payOptions from '../components/payOptions.vue'
  258. export default {
  259. components: {
  260. payOptions
  261. },
  262. data() {
  263. return {
  264. loading: false,
  265. showPopu: false, // 弹框
  266. statusBarHeight: 0, // 状态栏高度
  267. safeAreaBottom: 0, // 底部安全区域高度
  268. imgList: [],
  269. shopProductSn: null,
  270. detail: null,
  271. qty: 1,// 数量
  272. isShare: false ,// 是否从分享打开的
  273. busPos:{
  274. x: 10,
  275. y:uni.getSystemInfoSync().windowHeight - 30
  276. },
  277. submitOk: false, // 是否成功
  278. cacelOk: false, // 是否取消
  279. refashOk: false, // 是否刷新页面
  280. showPay: false, // 是否显示付款信息
  281. isAddCart: false, // 是否加入购物车
  282. payData: null, // 支付参数
  283. payType: 0, // 支付方式,抵扣、还是微信
  284. }
  285. },
  286. onLoad(option) {
  287. this.isShare = !!option.share
  288. // 计算安全区域
  289. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  290. this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
  291. this.shopProductSn = option.sn
  292. // 获取产品详情
  293. this.getDetail()
  294. },
  295. // 分享
  296. onShareAppMessage(e){
  297. return {
  298. title: this.detail ? this.detail.productName : '商品名称',
  299. path: '/pagesB/shopiing/productDetail?sn='+this.shopProductSn+'&share=1',
  300. imageUrl:this.detail ? this.detail.productMsg : '',
  301. type: '1'
  302. }
  303. },
  304. computed: {
  305. ...mapState(['hasLogin']),
  306. // 登录用户信息
  307. userInfo(){
  308. return this.$store.state.vuex_userInfo
  309. },
  310. // 货架经销商信息
  311. shelfInfo(){
  312. return this.$store.state.vuex_storeShelf
  313. },
  314. //是否开启线上支付
  315. hasPay(){
  316. const shelfInfo = this.shelfInfo
  317. return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
  318. },
  319. // 最小支付金额
  320. minPayAmount(){
  321. const shelfInfo = this.shelfInfo
  322. return shelfInfo&&shelfInfo.minAmount ? shelfInfo.minAmount : 0
  323. },
  324. // 抵扣余额支付是否可用,有【余额支付权限】且该产品有抵扣金额
  325. hasBalancePay(){
  326. return true
  327. },
  328. // 经销商电话
  329. dealerPhone(){
  330. const shelfInfo = this.shelfInfo
  331. return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  332. },
  333. totalNum(){
  334. return this.hasLogin&&this.userInfo.sysUserFlag == '1' ? this.$store.state.vuex_cartTotal : 0
  335. },
  336. // 赠品数量
  337. giftNum(){
  338. return this.detail && this.detail.promoType=='BUY_PROD_GIVE_PROD' ? Math.floor(this.qty / this.detail.conditionValue)*this.detail.resultValue : 0
  339. },
  340. // 支付总金额
  341. payAmount(){
  342. const price = this.detail && this.detail.priceStr ? this.detail.priceStr.join('.') : 0
  343. return price ? Number(price*this.qty).toFixed(2) : 0
  344. },
  345. // 付款信息
  346. payInfo(){
  347. return this.$store.state.vuex_tempOrderData
  348. }
  349. },
  350. methods: {
  351. // 返回
  352. goBack(){
  353. if(this.isShare){
  354. uni.reLaunch({
  355. url: '/pages/index/index'
  356. })
  357. }else{
  358. uni.navigateBack()
  359. }
  360. },
  361. // 复制
  362. copy(text){
  363. uni.setClipboardData({
  364. data: text,
  365. success: function () {
  366. uni.showToast({
  367. title: '复制成功'
  368. })
  369. }
  370. })
  371. },
  372. viewImg(index){
  373. uni.previewImage({
  374. urls: this.imgList
  375. })
  376. },
  377. // 联系经销商
  378. callPhone() {
  379. if(this.dealerPhone!=''){
  380. uni.makePhoneCall({
  381. phoneNumber: this.dealerPhone
  382. })
  383. }
  384. },
  385. // 产品详情
  386. getDetail(){
  387. uni.showLoading({
  388. title: '加载中'
  389. })
  390. const storeShelf = this.$store.state.vuex_storeShelf
  391. const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&storeShelf ? storeShelf.dealerSn : ''
  392. // 获取产品详情
  393. getShopDetail({
  394. shopProductSn: this.shopProductSn,
  395. dealerSn: dealerSn
  396. }).then(res => {
  397. if(res.status == 200){
  398. this.detail = res.data
  399. if(res.data){
  400. if(res.data.productPicList){
  401. res.data.productPicList.forEach(item => {
  402. this.imgList.push(item.imageUrl||'/static/def_imgs.png')
  403. })
  404. }else{
  405. this.imgList.push(res.data.productMsg||'/static/def_imgs.png')
  406. }
  407. const a = res.data.shopPromoProduct
  408. let bprice = res.data.price
  409. if(a){
  410. res.data.promoType = a.promoType
  411. res.data.resultValue = a.resultValue
  412. res.data.conditionValue = a.conditionValue
  413. res.data.discountType = a.discountType
  414. res.data.promoProductSn = a.promoProductSn
  415. res.data.promoSn = a.promoSn
  416. res.data.orginPrice = res.data.price
  417. // 特价
  418. if(res.data.promoType=='PROMO_PROD'){
  419. bprice =res.data.conditionValue
  420. }
  421. }
  422. res.data.priceStr = Number(bprice).toFixed(2).toString().split('.')
  423. }
  424. }
  425. uni.hideLoading()
  426. })
  427. },
  428. animationfinish(){
  429. this.loading = false
  430. },
  431. changeQty(value) {
  432. const max = 999
  433. const v = value > max ? max : (value==''||value==0?1:value)
  434. this.qty = v
  435. },
  436. // 加入购物车
  437. toAddCart(){
  438. // 未登录
  439. if(this.hasLogin){
  440. // 游客未认证
  441. if(this.userInfo.sysUserFlag == '0'){
  442. toAuthStore()
  443. }else{
  444. // 打开确认数量弹框
  445. this.isAddCart = true
  446. this.showPopu = true
  447. }
  448. }else{
  449. toLogin()
  450. }
  451. },
  452. // 确定加入购物车
  453. submitCart(event){
  454. if(this.loading){
  455. return
  456. }
  457. this.loading = true
  458. this.$refs.cartAnimation.touchOnGoods(event,this.busPos);
  459. // 加入购物车
  460. addCart({
  461. qty: this.qty,
  462. price: this.detail.price,
  463. productSn: this.detail.productSn
  464. }).then(res => {
  465. if(res.status == 200){
  466. uni.$emit('refashCart')
  467. this.showPopu = false
  468. }
  469. })
  470. },
  471. // 打开购物车页面
  472. toCart(){
  473. if(this.hasLogin){
  474. // 游客未认证
  475. if(this.userInfo.sysUserFlag == '0'){
  476. toAuthStore()
  477. }else{
  478. uni.navigateTo({
  479. url: '/pagesB/cart/index'
  480. })
  481. }
  482. }else{
  483. toLogin()
  484. }
  485. },
  486. // 立即购买
  487. toBuy(){
  488. if(this.hasLogin){
  489. // 游客未认证
  490. if(this.userInfo.sysUserFlag == '0'){
  491. toAuthStore()
  492. }else{
  493. if(this.detail.status==0 || this.detail.dealerScopeFlag==0){
  494. uni.showModal({
  495. content: '此商品已'+(this.detail.status==0?'下架':'售罄'),
  496. showCancel:false,
  497. confirmText:'知道了'
  498. })
  499. }else{
  500. // 打开数量选择弹框
  501. if(!this.showPopu){
  502. this.showPopu = true
  503. }else{
  504. if(this.hasPay && this.minPayAmount>this.payAmount){
  505. uni.showModal({
  506. content: '支付金额不能小于'+this.minPayAmount+'元!',
  507. showCancel:false,
  508. confirmText:'知道了'
  509. })
  510. }else{
  511. // 去结算生产订单
  512. this.creatOrder()
  513. }
  514. }
  515. }
  516. }
  517. }else{
  518. toLogin()
  519. }
  520. },
  521. // 取消立即购买
  522. cancelBuy(){
  523. this.resetPage()
  524. },
  525. // 去结算
  526. creatOrder(){
  527. uni.showLoading({
  528. title: '提交中...',
  529. mask: true
  530. })
  531. const _this = this
  532. purchaseCheck({detailList: [{
  533. productSn:this.detail.productSn,
  534. productCode:this.detail.productCode,
  535. qty: this.qty,
  536. price:this.detail.price,
  537. promoSn: this.detail.promoSn
  538. }]}).then(res => {
  539. uni.hideLoading()
  540. if(res.status == 200){
  541. const successList = res.data.successList ? res.data.successList.map(item => {
  542. return {
  543. productSn:item.productSn,
  544. productCode: item.productCode,
  545. qty: item.qty,
  546. price:item.price,
  547. promoSn: item.promoSn
  548. }
  549. }) : []
  550. const removeList = res.data.removeList ? res.data.removeList.map(item => item.productCode) : []
  551. const selloutList = res.data.selloutList ? res.data.selloutList.map(item => item.productCode) : []
  552. // 有已下架或已售罄产品提示
  553. if(removeList.length || selloutList.length){
  554. uni.showModal({
  555. title: '提示',
  556. content: (removeList.length ? `产品${removeList.join(',')}已下架,`:'')+(selloutList.length?`产品${selloutList.join(',')}已售罄,`:'')+`不可采购。`+(successList.length?'是否继续采购其他产品?':''),
  557. showCancel: successList.length,
  558. confirmText: successList.length?'确定':'知道了',
  559. success(ret) {
  560. if(ret.confirm && successList.length){
  561. _this.submitForm(successList)
  562. }
  563. }
  564. })
  565. }else{
  566. const promoChangeFlag = res.data.promoChangeFlag
  567. // 活动变更
  568. if(promoChangeFlag){
  569. uni.showModal({
  570. title: '提示',
  571. content: '促销活动已变更,请刷新?',
  572. confirmText:'确定刷新',
  573. success(ret) {
  574. if(ret.confirm){
  575. _this.showPopu = false
  576. _this.refashOk = true
  577. }
  578. }
  579. })
  580. return
  581. }
  582. // 直接提交
  583. _this.submitForm(successList)
  584. }
  585. }else{
  586. uni.showToast({
  587. title: res.message,
  588. icon: 'none'
  589. })
  590. }
  591. })
  592. },
  593. // 创建订单
  594. submitForm(detailList){
  595. uni.showLoading({
  596. title: '提交中...',
  597. mask: true
  598. })
  599. purchaseSave({
  600. detailList: detailList
  601. }).then(res => {
  602. if(res.status == 200){
  603. res.data.detailList = []
  604. this.$store.state.vuex_tempOrderData = res.data
  605. // 这里判断是否开通支付,如果开通打开确认付款弹框
  606. if(this.hasPay){
  607. // 计算待付款剩余倒计时
  608. res.data.timestamp = (new Date(res.data.createDate.replace(/-/g,'/')).getTime() + 1800000 - new Date().getTime())/1000
  609. purchasePay({
  610. bizSn:res.data.purchaseSn,
  611. bizNo:res.data.purchaseNo,
  612. bizType:'PURCHASE',
  613. payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
  614. }).then(res=>{
  615. this.showPay = true
  616. this.payData = res.data?res.data.payRequestRest:null
  617. uni.hideLoading()
  618. })
  619. }else{
  620. // 未开通支付,创建成功,跳转到订单详情页
  621. this.showPopu = false
  622. this.submitOk = true
  623. uni.hideLoading()
  624. }
  625. }else{
  626. uni.hideLoading()
  627. uni.showToast({
  628. title: res.message,
  629. icon: 'none'
  630. })
  631. }
  632. })
  633. },
  634. // 关闭之前
  635. beforeClosePopu(){
  636. console.log(this.showPay,this.submitOk,this.cacelOk)
  637. // 正在支付
  638. if(this.showPay&&!this.submitOk&&!this.cacelOk){
  639. this.showPay = false
  640. this.cancelPay()
  641. }
  642. },
  643. // 关闭确定订单弹窗后
  644. closePopu(){
  645. this.showPopu = false
  646. // 刷新页面
  647. if(this.refashOk){
  648. this.qty = 1
  649. this.getDetail()
  650. }else{
  651. // 开通了支付
  652. if(this.hasPay){
  653. // 付款
  654. if(this.showPay){
  655. // 确定取消付款或付款失败
  656. if(this.cacelOk){
  657. this.cacelOk = false
  658. }
  659. // 确定付款成功
  660. if(this.submitOk){
  661. this.submitOk = false
  662. }
  663. // 去订单详情页
  664. this.toOrderDetial()
  665. }else{
  666. // 取消立即购买
  667. this.resetPage()
  668. }
  669. }else{
  670. // 未开通支付
  671. // 去订单详情页
  672. if(this.submitOk){
  673. this.submitOk = false
  674. this.toOrderDetial()
  675. }else{
  676. // 取消采购
  677. this.resetPage()
  678. }
  679. }
  680. }
  681. },
  682. // 确认付款
  683. confirmPay(){
  684. const _this = this
  685. // 确认付款
  686. const data = _this.payData
  687. console.log(data)
  688. if(data){
  689. uni.requestPayment({
  690. provider: 'wxpay',
  691. timeStamp: data.timeStamp,
  692. nonceStr: data.nonceStr,
  693. package: data.package,
  694. signType: data.signType,
  695. paySign: data.paySign,
  696. success: (res) =>{
  697. _this.payComplete(1,true)
  698. },
  699. fail: (err)=> {
  700. console.log('fail:',err);
  701. _this.payComplete(err.errMsg.indexOf("cancel")>=0 ? 2 : 0,false)
  702. }
  703. });
  704. }else{
  705. _this.payComplete(0,false)
  706. }
  707. },
  708. payComplete(type,data){
  709. uni.showToast({
  710. mask: true,
  711. title: type==1 ? '支付成功' : (type==2?'支付取消':'支付失败'),
  712. icon: 'none'
  713. })
  714. this.showPopu = false
  715. this.submitOk = true
  716. },
  717. // 确认取消付款弹框
  718. cancelPay(){
  719. const _this = this
  720. uni.showModal({
  721. title: '确定取消支付吗?',
  722. content: '您的订单在30分钟内未支付将被取消,请尽快完成支付。',
  723. confirmText: '继续支付',
  724. cancelText: '取消支付',
  725. success(ret) {
  726. // 确定取消,跳转到订单详情页
  727. if(ret.cancel){
  728. // 支付弹框打开中
  729. if(_this.showPopu){
  730. console.log(0)
  731. _this.showPopu = false
  732. _this.cacelOk = true
  733. }else{
  734. console.log(1)
  735. // 未打开直接跳转
  736. _this.toOrderDetial()
  737. }
  738. }
  739. if(ret.confirm){
  740. console.log(2)
  741. // 继续支付
  742. _this.showPopu = true
  743. _this.showPay = true
  744. _this.cacelOk = false
  745. }
  746. }
  747. })
  748. },
  749. // 重置页面
  750. resetPage(){
  751. this.qty = 1
  752. this.isAddCart = false
  753. this.showPopu = false
  754. this.showPay = false
  755. this.cacelOk = false
  756. this.submitOk = false
  757. setTimeout(()=>{
  758. uni.hideLoading()
  759. },300)
  760. },
  761. // 订单详情页
  762. toOrderDetial(){
  763. this.resetPage()
  764. // 跳转到订单详情页面
  765. uni.navigateTo({
  766. url: "/pagesB/procureOrder/orderDetail?purchaseSn="+this.$store.state.vuex_tempOrderData.purchaseSn
  767. })
  768. }
  769. }
  770. }
  771. </script>
  772. <style lang="less">
  773. .pages {
  774. height: 100vh;
  775. display: flex;
  776. flex-direction: column;
  777. .scrollPage-header{
  778. z-index: 1;
  779. width: 100%;
  780. position:fixed;
  781. left: 0;
  782. top: 0;
  783. .header-title{
  784. display: flex;
  785. align-items: center;
  786. justify-content: space-between;
  787. padding: 0 10px;
  788. height: 44px;
  789. .header-left{
  790. display: flex;
  791. align-items: center;
  792. text{
  793. font-size: 14px;
  794. color: #333333;
  795. }
  796. background-color: rgba(255,255,255,0.6);
  797. box-shadow: 0px 1px 0px 0px #E6E6E6;
  798. border-radius: 50px;
  799. padding: 3px 6px 3px;
  800. }
  801. .header-right{
  802. width: 50px;
  803. }
  804. }
  805. }
  806. .copyText{
  807. background-color: #efefef;
  808. border-radius: 100rpx;
  809. padding: 0 20rpx;
  810. color: #03A9F4;
  811. font-size: 20rpx;
  812. display: inline-block;
  813. margin-left: 20rpx;
  814. height: 44rpx;
  815. line-height: 44rpx;
  816. }
  817. .scrollPage-content{
  818. flex: 1;
  819. overflow-y: auto;
  820. .product-info{
  821. background:#fff;
  822. margin-bottom: 10px;
  823. .product-info-text{
  824. padding: 10px;
  825. .product-info-text-title{
  826. font-weight: bold;
  827. color: #333333;
  828. line-height: 22px;
  829. margin-bottom: 5px;
  830. }
  831. .product-info-text-attr{
  832. display: flex;
  833. align-items: center;
  834. justify-content: space-between;
  835. .product-info-price{
  836. color: red;
  837. display: flex;
  838. align-items: baseline;
  839. font-size: 12px;
  840. text{
  841. font-size: 38rpx;
  842. }
  843. }
  844. .product-info-nums{
  845. font-size: 12px;
  846. color: #999999;
  847. >view{
  848. display: flex;
  849. align-items: center;
  850. }
  851. .share{
  852. button{
  853. width: auto;
  854. padding: 0;
  855. border: 0;
  856. background: none;
  857. line-height: normal;
  858. margin: 0;
  859. display: inline;
  860. font-size: 12px;
  861. color: #999;
  862. &::after{
  863. border:none;
  864. }
  865. ::v-deep .u-icon{
  866. margin-right: 3px;
  867. }
  868. }
  869. }
  870. }
  871. }
  872. }
  873. }
  874. .product-info-guige{
  875. display: flex;
  876. flex-wrap: wrap;
  877. justify-content: space-between;
  878. background:#fff;
  879. margin: 10px 0 0;
  880. padding: 10px;
  881. line-height: 28px;
  882. .row{
  883. width: 100%;
  884. }
  885. .row-ban{
  886. width: 50%;
  887. }
  888. >view{
  889. color: #999;
  890. text{
  891. color: #333333;
  892. }
  893. }
  894. }
  895. .row-info{
  896. width: 100%;
  897. background: #fff;
  898. font-size: 24rpx;
  899. text-align: center;
  900. margin: 20rpx 0;
  901. padding: 15rpx;
  902. .txt{
  903. margin-left: 10rpx;
  904. color: #666;
  905. font-weight: bold;
  906. }
  907. > view{
  908. padding: 0 10px;
  909. }
  910. }
  911. .product-info-content{
  912. background:#fff;
  913. margin-bottom: 10px;
  914. padding: 10px;
  915. line-height: 28px;
  916. }
  917. }
  918. .rebate-tag{
  919. background: #ffe7df;
  920. color: #E91E63;
  921. padding: 2px 5px;
  922. font-size: 10px;
  923. border-radius: 3px;
  924. margin-left: 6px;
  925. }
  926. .tejia-tag{
  927. color: #E91E63;
  928. margin-left: 6px;
  929. font-size: 12px;
  930. text{
  931. font-size: 12px;
  932. color: #999;
  933. margin-left: 5px;
  934. text-decoration: line-through;
  935. }
  936. }
  937. .scrollPage-footer{
  938. background-color: #FFFFFF;
  939. width: 100%;
  940. position: fixed;
  941. left: 0;
  942. bottom: 0;
  943. .scrollPage-footer-box{
  944. display: flex;
  945. align-items: center;
  946. justify-content: space-between;
  947. height: 45px;
  948. }
  949. .footer-left{
  950. display: flex;
  951. align-items: center;
  952. justify-content: space-between;
  953. width: 35%;
  954. .footer-left-item{
  955. display: flex;
  956. flex-direction: column;
  957. align-items: center;
  958. justify-content: center;
  959. padding: 0 15px;
  960. position: relative;
  961. .footer-left-item-text{
  962. font-size: 12px;
  963. color: #666666;
  964. }
  965. .badge{
  966. background: #f44336;
  967. color: #fff;
  968. position: absolute;
  969. right: 5px;
  970. top: -8px;
  971. font-size: 12px;
  972. display: flex;
  973. align-items: center;
  974. justify-content: center;
  975. border-radius: 50rpx;
  976. padding: 0 10rpx;
  977. }
  978. }
  979. }
  980. .footer-right{
  981. width: 60%;
  982. height: 80%;
  983. display: flex;
  984. align-items: center;
  985. border-radius: 50px;
  986. overflow: hidden;
  987. margin: 0 5px;
  988. .footer-right-item{
  989. height: 100%;
  990. display: flex;
  991. flex-direction: column;
  992. align-items: center;
  993. justify-content: center;
  994. width: 50%;
  995. font-size: 14px;
  996. color: #FFFFFF;
  997. }
  998. .footer-right-item:first-child{
  999. background-color: #FF9900;
  1000. }
  1001. .footer-right-item:last-child{
  1002. background-color: #FF0000;
  1003. }
  1004. }
  1005. }
  1006. .popu-nums-content{
  1007. background-color: #FFFFFF;
  1008. border-radius: 10px;
  1009. width: 300px;
  1010. display: flex;
  1011. flex-direction: column;
  1012. align-items: center;
  1013. padding: 10px 15px;
  1014. .popu-close{
  1015. padding: 10px;
  1016. position: absolute;
  1017. right: 0;
  1018. top: 0;
  1019. z-index: 1000;
  1020. }
  1021. .popu-content-title{
  1022. padding: 10px;
  1023. font-size: 16px;
  1024. }
  1025. .popu-content-num{
  1026. font-size: 24rpx;
  1027. color: #999999;
  1028. padding: 10px 0;
  1029. > text{
  1030. margin-right: 10px;
  1031. font-size: 10px;
  1032. }
  1033. }
  1034. .popu-content-btn{
  1035. width: 100%;
  1036. display: flex;
  1037. align-items: center;
  1038. justify-content: space-around;
  1039. margin: 20px 0 10px;
  1040. .popu-content-btn-item{
  1041. width: 40%;
  1042. height: 32px;
  1043. font-size: 14px;
  1044. display: flex;
  1045. align-items: center;
  1046. justify-content: center;
  1047. border-radius: 100px;
  1048. }
  1049. .cancelBtn{
  1050. background-color: #f8f8f8;
  1051. color: #666;
  1052. }
  1053. .okbtn{
  1054. background-color: #f70000;
  1055. color: #FFFFFF;
  1056. }
  1057. }
  1058. }
  1059. .popu-content{
  1060. display: flex;
  1061. flex-direction: column;
  1062. align-items: center;
  1063. padding: 10px 15px;
  1064. .popu-close{
  1065. padding: 10px;
  1066. position: absolute;
  1067. right: 0;
  1068. top: 0;
  1069. z-index: 1000;
  1070. }
  1071. .qty-box{
  1072. display: flex;
  1073. .qty-btn{
  1074. display: flex;
  1075. align-items: center;
  1076. justify-content: center;
  1077. width: 22px;
  1078. height: 20px;
  1079. border-radius: 50px;
  1080. font-size: 18px;
  1081. color: #066cff;
  1082. &.qty-disabled{
  1083. color: #999;
  1084. }
  1085. }
  1086. .qty-num{
  1087. width: 24px;
  1088. height: 20px;
  1089. line-height: 20px;
  1090. text-align: center;
  1091. background-color: #efefef;
  1092. margin: 0 3px;
  1093. border-radius: 3px;
  1094. font-size: 12px;
  1095. input{
  1096. width: 100%;
  1097. height: 100%;
  1098. text-align: center;
  1099. color: #333;
  1100. }
  1101. }
  1102. }
  1103. .pupu-box{
  1104. display: flex;
  1105. justify-content: space-between;
  1106. margin-top: 35px;
  1107. width: 100%;
  1108. }
  1109. .popu-content-img{
  1110. border-radius: 6px;
  1111. border: 1px solid #eee;
  1112. overflow: hidden;
  1113. width: 80px;
  1114. height: 80px;
  1115. }
  1116. .popu-content-info{
  1117. padding: 0 0 0 10px;
  1118. flex-grow: 1;
  1119. overflow: hidden;
  1120. width: 50%;
  1121. .popu-content-info-title{
  1122. font-size: 14px;
  1123. }
  1124. .popu-content-info-code{
  1125. font-size: 12px;
  1126. color: #00aaff;
  1127. margin-top: 5px;
  1128. }
  1129. }
  1130. .gift-box{
  1131. padding-left: 8%;
  1132. margin-top: 10px;
  1133. border-top: 1px solid #eee;
  1134. padding-top: 10px;
  1135. .popu-content-img{
  1136. width: 58px;
  1137. height: 58px;
  1138. }
  1139. .popu-content-info-title{
  1140. font-size: 12px;
  1141. color: #666;
  1142. }
  1143. .popu-content-box{
  1144. margin-top: 0;
  1145. }
  1146. .popu-content-num{
  1147. padding:5px 15px;
  1148. >text{
  1149. font-size: 10px;
  1150. }
  1151. }
  1152. .rebate-tag{
  1153. margin: 0 5px 0 0;
  1154. background: #ff0000;
  1155. color: #fff;
  1156. flex-grow: 1;
  1157. display: flex;
  1158. justify-content: center;
  1159. }
  1160. .ellipsis-two{
  1161. width: 80%;
  1162. flex-grow: 1;
  1163. }
  1164. }
  1165. .popu-content-box{
  1166. display: flex;
  1167. align-items: baseline;
  1168. margin-top: 5px;
  1169. .popu-content-price{
  1170. color: red;
  1171. display: flex;
  1172. align-items: baseline;
  1173. font-size: 12px;
  1174. text{
  1175. font-size: 38rpx;
  1176. }
  1177. }
  1178. }
  1179. .pupu-box-item,.pupu-box-pay-item{
  1180. width: 100%;
  1181. padding-top: 20px;
  1182. > view{
  1183. padding: 5px 0;
  1184. }
  1185. .totalBar-box{
  1186. margin-bottom: 20rpx;
  1187. > view{
  1188. padding: 5px 0;
  1189. }
  1190. .pf{
  1191. font-size: 20rpx;
  1192. }
  1193. }
  1194. }
  1195. .pupu-box-pay-item{
  1196. > view{
  1197. padding: 6px 0;
  1198. }
  1199. .popu-content-amount{
  1200. font-size: 28px;
  1201. color: red;
  1202. }
  1203. .popu-content-title{
  1204. font-weight: bold;
  1205. }
  1206. }
  1207. .popu-content-num{
  1208. > text{
  1209. margin-right: 10px;
  1210. }
  1211. }
  1212. .popu-content-btn{
  1213. width: 100%;
  1214. display: flex;
  1215. align-items: center;
  1216. justify-content: space-around;
  1217. margin: 30px 0 20px;
  1218. .popu-content-btn-item{
  1219. width: 30%;
  1220. height: 34px;
  1221. font-size: 14px;
  1222. display: flex;
  1223. align-items: center;
  1224. justify-content: center;
  1225. border-radius: 100px;
  1226. }
  1227. .cancelBtn{
  1228. background-color: #f8f8f8;
  1229. color: #666;
  1230. }
  1231. .okbtn{
  1232. background-color: #f70000;
  1233. color: #FFFFFF;
  1234. width: 65%;
  1235. .payAmount{
  1236. margin-left: 5px;
  1237. }
  1238. }
  1239. .cartbtn{
  1240. background-color: #ffa60c;
  1241. color: #FFFFFF;
  1242. width: 65%;
  1243. }
  1244. }
  1245. }
  1246. }
  1247. </style>