createOrder.vue 32 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226
  1. <template>
  2. <view>
  3. <view class="navbar">
  4. <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
  5. </view>
  6. <!-- 地址 -->
  7. <navigator v-if="tabCurrentIndex == 0" url="/pages/address/address?source=1" class="address-section">
  8. <view class="order-content" v-if="addressData.real_name">
  9. <text class="iconfont iconlocation"></text>
  10. <view class="cen">
  11. <view class="top">
  12. <text class="name">{{ addressData.real_name }}</text>
  13. <text class="mobile">{{ addressData.phone }}</text>
  14. </view>
  15. <text class="address">{{ addressData.province + addressData.city + addressData.district }} {{ addressData.detail }}</text>
  16. </view>
  17. <text class="iconfont iconenter" style="color: #CCCCCC;"></text>
  18. </view>
  19. <view class="order-content" v-if="!addressData.real_name">
  20. <view class="addAddress">
  21. <text class="iconfont iconaddition"></text>
  22. <text>添加收货地址</text>
  23. </view>
  24. </view>
  25. <image class="a-bg" :src="addressImg"></image>
  26. </navigator>
  27. <view class="personal" v-if="tabCurrentIndex == 1">
  28. <view class="info">
  29. <view class="name">提货人</view>
  30. <input type="text" class="box-right" v-model="addressData.real_name" style="color: #000000" placeholder="请填写提货人" />
  31. </view>
  32. <view class="info">
  33. <view class="name">手机号</view>
  34. <input type="text" class="box-right" v-model="addressData.phone" style="color: #000000" size="8" maxlength="11" placeholder="请填写收货人手机号" />
  35. </view>
  36. </view>
  37. <view class="goods-section" v-for="(ls, ind) in shopList" :key="ind">
  38. <!-- <view class="g-header b-b">
  39. <image class="logo" :src="ls.productInfo.image"></image>
  40. <text class="name">{{ ls.name }}</text>
  41. </view> -->
  42. <!-- 订单编号 -->
  43. <!-- <view class="order-box">
  44. <text class="order-num">订单编号:458754214457878</text>
  45. <text class="iconfont iconenter" style="color: #CCCCCC;"></text>
  46. </view> -->
  47. <!-- 商品列表 -->
  48. <view class="g-item">
  49. <image :src="ls.productInfo.image"></image>
  50. <view class="right">
  51. <text class="title clamp">{{ ls.productInfo.store_name }}</text>
  52. <text class="attr">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.suk : '默认' }}</text>
  53. <view class="price-box">
  54. <view class="price">
  55. <text v-if="goodsType !== '5'">¥</text>
  56. <image class="jf_icon_img" v-if="goodsType == 5" src="https://tmp01.kktv6.com/img/jifen_bi.png"></image>
  57. <text v-if="goodsType !== '5' && ls.is_wholesale != 1">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.price : ls.productInfo.price }}</text>
  58. <text v-if="goodsType == 5">{{ payPrice | parseFloatNum }}</text>
  59. <text v-if="ls.is_wholesale == 1">{{ ls.productInfo.attrInfo ? ls.productInfo.attrInfo.wholesaler_price : ls.productInfo.price }}</text>
  60. </view>
  61. <text class="number">{{ 'x ' + ls.cart_num }}</text>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. <!-- 优惠明细 -->
  67. <view class="yt-list">
  68. <!-- <view class="yt-list-cell b-b" @click="couponListshow ? toggleMask('show') : ''" v-if="goodsType == 0">
  69. <view class="cell-icon">积</view>
  70. <text class="cell-tit clamp">积分</text>
  71. <text class="cell-tip active" v-if="couponListshow && !couponChecked.coupon_price">选择使用积分</text>
  72. <text class="cell-tip red" v-if="couponChecked.coupon_price">-¥{{ couponChecked.coupon_price }}</text>
  73. <text class="cell-tip disabled" v-if="!couponListshow && !couponChecked.coupon_price">没有积分{{userInfo.integral }}</text>
  74. <text class="cell-more wanjia wanjia-gengduo-d"></text>
  75. </view> -->
  76. <!-- <view class="yt-list-cell b-b" v-if="moneyAll.storeFreePostage>0">
  77. <view class="cell-icon hb">减</view>
  78. <text class="cell-tit clamp">商家促销</text>
  79. <text class="cell-tip disabled">满{{moneyAll.storeFreePostage}}包邮</text>
  80. </view> -->
  81. <view class="yt-list-cell b-b">
  82. <text class="cell-tit clamp">运费</text>
  83. <text class="cell-tip">{{ Postage }}</text>
  84. </view>
  85. </view>
  86. <!-- 跨境商品需填写购买人信息 -->
  87. <view class="yt-list" v-if="shopList[0].productInfo.isForeign == 1">
  88. <view class="border-box border-style"><text class="info">跨境商品需填写购买人信息</text></view>
  89. <view class="yt-list-cell border-style">
  90. <text class="cell-tit clamp">姓名</text>
  91. <text class="symbol">*</text>
  92. <input class="idcard" type="text" v-model="idcardName" placeholder="请输入身份证姓名" placeholder-class="placeholder" />
  93. </view>
  94. <view class="yt-list-cell border-style">
  95. <text class="cell-tit clamp">身份证号码</text>
  96. <text class="symbol">*</text>
  97. <input class="idcard" type="text" v-model="idcardNum" placeholder="请输入身份证号码" placeholder-class="placeholder" />
  98. </view>
  99. </view>
  100. <!-- 积分助力 -->
  101. <view class="yt-list" v-if="is_integral == 1">
  102. <view class="yt-list-cell">
  103. <text class="cell-tit inte-power">本次可使用积分:({{ userInfo.integral | filtersNub }})</text>
  104. <text class="integral">可兑换{{ integralMoney }}元</text>
  105. </view>
  106. <view class="yt-list-cell">
  107. <text class="cell-tit inte-power">
  108. 是否使用积分兑换
  109. <!-- <text class="integral">{{integralMoney}}元</text> -->
  110. </text>
  111. <switch checked @change="switch1Change" color="#FF0000" style="transform:scale(0.8)" />
  112. <!-- <text class="integral">(可用积分:{{ userInfo.integral|filtersNub }})</text> -->
  113. <!-- <input class="integral" type="number" v-model="integral" placeholder="输入助力积分" placeholder-class="placeholder" /> -->
  114. </view>
  115. </view>
  116. <!-- 金额明细 -->
  117. <view class="yt-list">
  118. <view class="yt-list-cell b-b">
  119. <text class="cell-tit clamp">商品金额</text>
  120. <text class="cell-tip">¥{{ payAllMoney }}</text>
  121. </view>
  122. <view class="yt-list-cell b-b" v-if="is_integral == 1">
  123. <text class="cell-tit clamp">积分抵扣</text>
  124. <text class="cell-tip">-¥{{ integralMoney }}</text>
  125. </view>
  126. <view class="yt-list-cell b-b" v-if="moneyAll.vipPrice > 0 && combination_id == 0">
  127. <text class="cell-tit clamp">VIP优惠</text>
  128. <text class="cell-tip">-¥{{ moneyAll.vipPrice }}</text>
  129. </view>
  130. <view class="yt-list-cell b-b" v-if="moneyAll.vipPrice > 0 && combination_id > 0">
  131. <text class="cell-tit clamp">团长优惠</text>
  132. <text class="cell-tip">-¥{{ moneyAll.vipPrice }}</text>
  133. </view>
  134. </view>
  135. <!-- 底部 -->
  136. <view class="footer">
  137. <view class="price-content">
  138. <text>合计:</text>
  139. <text class="price-tip" v-if="goodsType !== '5'">¥</text>
  140. <image class="jf_img" v-if="goodsType == 5" src="https://tmp01.kktv6.com/img/jifen_bi.png"></image>
  141. <text class="price">{{ payPrice | parseFloatNum }}</text>
  142. <text class="jf_dw" v-if="goodsType == 5">积分</text>
  143. </view>
  144. <text class="submit" :class="{ submitNo: !payType }" @click="payType ? submit() : ''">提交订单</text>
  145. </view>
  146. <!-- 优惠券面板 -->
  147. <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
  148. <view class="mask-content">
  149. <!-- 优惠券页面,仿mt -->
  150. <view class="coupon-item" @click="checkedCp(item)" v-for="(item, index) in couponList" :key="index">
  151. <view class="con">
  152. <view class="left">
  153. <text class="title">{{ item.coupon_title }}</text>
  154. <text class="time">领取时间{{ item.add_time }}</text>
  155. </view>
  156. <view class="right">
  157. <text class="price">{{ item.coupon_price }}</text>
  158. <text>满{{ item.use_min_price }}可用</text>
  159. </view>
  160. <view class="circle l"></view>
  161. <view class="circle r"></view>
  162. </view>
  163. <text class="tips">有效期至{{ item.end_time }}</text>
  164. </view>
  165. </view>
  166. </view>
  167. </view>
  168. </template>
  169. <script>
  170. import { mapState, mapMutations } from 'vuex';
  171. import { confirm } from '@/api/order.js';
  172. import { couponsOrder } from '@/api/coupon.js';
  173. import { computedOrderkey } from '@/api/money.js';
  174. import { cartAdd } from '@/api/product.js';
  175. import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
  176. export default {
  177. components: { uniNoticeBar },
  178. data() {
  179. return {
  180. addressImg:
  181. 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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',
  182. // 当前选中的支付方式
  183. tabCurrentIndex: 0,
  184. is_integral: 0,
  185. navList: [
  186. {
  187. state: 0,
  188. text: '快递配送'
  189. },
  190. {
  191. state: 1,
  192. text: '到店自提'
  193. }
  194. ],
  195. maskState: 0, //优惠券面板显示状态
  196. desc: '', //备注
  197. idcardName: '', //身份证姓名
  198. idcardNum: '', //身份证号码
  199. integral: '', //积分助力
  200. payType: 1, //1微信 2支付宝
  201. // 优惠券列表
  202. couponList: [],
  203. couponListshow: false, //是有可以显示优惠券列表
  204. couponChecked: {}, //选中的优惠券
  205. // 收货地址
  206. addressData: {},
  207. // 店铺地址
  208. shopAddress: {
  209. name: '',
  210. mobile: '',
  211. addressName: '',
  212. address: '',
  213. area: '',
  214. default: false
  215. },
  216. // 商品列表
  217. shopList: [],
  218. // 购物车id
  219. cartId: '',
  220. //购物金额详情
  221. sid: '', //小店id
  222. is_wholesale: '', //是否是批发商品
  223. shipping_type: 1, // 1为快递 2为自提
  224. moneyAll: {
  225. storeFreePostage: 0, //邮费优惠
  226. storePostage: 0, //邮费
  227. totalPrice: 0, //总支付金额
  228. vipPrice: 0 //vip优惠价
  229. },
  230. people: '1', //参团人数
  231. payPrice: 0, //总支付金额
  232. orderKey: '', //订单id
  233. checkedPoints: false, //判断是否积分抵扣
  234. integralAll: 0, //可使用的积分
  235. integralMoney: 0, //积分抵扣金额
  236. integralShow: false, //是否显示积分抵扣金额
  237. payType: true, //是否可支付
  238. pinkid: '0', //保存拼团商品id
  239. combination_id: '', //判断是否是拼团商品
  240. is_create: '0',
  241. option: {}, //当前传值存储
  242. goodsType: 0, //2为拼团商品,0为普通商品
  243. goodsdata: '', //提交订单提交数据
  244. Orderkey: '', //生成key值提交数据
  245. autoPink: 0, // 一键拼团 1
  246. Autoid: '', // 拼团商品id
  247. isGift: 0, // 是否为礼包 0不是 1是
  248. integral_ratio: '', // 积分比例
  249. shangpingPrice: '' // 商品价格-积分
  250. };
  251. },
  252. filters: {
  253. filtersNub: function(value) {
  254. return +value;
  255. },
  256. // 去处小数点后的0
  257. parseFloatNum(clock) {
  258. return parseFloat(clock);
  259. }
  260. },
  261. onLoad(option) {
  262. // 保存当前商品在购物车中的id
  263. console.log('-----', option);
  264. if (option.is_wholesale != 'undefined') {
  265. this.is_wholesale = option.is_wholesale;
  266. }
  267. if (option.integral == 1) {
  268. this.is_integral = option.integral;
  269. this.checkedPoints = true;
  270. } else {
  271. this.integralMoney = 0;
  272. }
  273. this.cartId = option.id;
  274. // if( option.pinkId ) {
  275. // this.Autoid = option.pinkId
  276. // }
  277. // if(option.autoPink) {
  278. // this.autoPink = option.autoPink
  279. // }
  280. if (option.sid != 'undefined') {
  281. this.sid = option.sid;
  282. }
  283. if (option.goodsType) {
  284. this.goodsType = option.goodsType;
  285. console.log(option.goodsType);
  286. }
  287. if (this.goodsType == 0) {
  288. this.isGift = 1;
  289. }
  290. if (option.pinkid) {
  291. if (option.pinkid > 0) {
  292. this.is_create = 0;
  293. } else {
  294. this.is_create = 1;
  295. }
  296. } else {
  297. this.is_create = 1;
  298. }
  299. // 判断是否为拼团商品
  300. if (option.type == 'pink') {
  301. this.option = option;
  302. this.pinkid = option.pinkid;
  303. this.cartAdd(option);
  304. } else {
  305. // 保存当前商品在购物车中的id
  306. this.cartId = option.id;
  307. this.loadData();
  308. }
  309. if (option.unique) {
  310. this.uniqueId = option.unique;
  311. }
  312. },
  313. watch: {
  314. addressData(newValue) {
  315. this.addressData = newValue;
  316. this.payMoneyNub();
  317. },
  318. checkedPoints(newValue, oldValue) {
  319. this.integralShow = false;
  320. this.payMoneyNub();
  321. }
  322. },
  323. computed: {
  324. ...mapState(['weichatObj', 'userInfo', 'baseURL']),
  325. Postage() {
  326. let money = +this.moneyAll.storePostage;
  327. if (money == 0) {
  328. return '免运费';
  329. } else {
  330. return '¥' + money;
  331. }
  332. },
  333. payAllMoney() {
  334. return (+this.moneyAll.totalPrice + +this.moneyAll.vipPrice).toFixed(2);
  335. }
  336. },
  337. methods: {
  338. ...mapMutations(['setUserInfo']),
  339. // 添加商品到购物车
  340. cartAdd(opt) {
  341. let obj = this;
  342. cartAdd({
  343. cartNum: 1, //商品数量
  344. new: 1, //商品是否新增加到购物车1为不加入0为加入
  345. combinationId: +opt.gid, //拼团商品id
  346. productId: +opt.pid, //普通商品id
  347. is_create: obj.is_create,
  348. mer_id: obj.shopList.mer_id,
  349. uniqueId: obj.option.unique
  350. })
  351. .then(function(e) {
  352. let da = e.data;
  353. // 獲取购物车号
  354. obj.cartId = da.cartId;
  355. // 加载数据
  356. obj.loadData();
  357. })
  358. .catch(e => {
  359. console.log(e);
  360. setTimeout(() => {
  361. uni.navigateBack();
  362. }, 1500);
  363. });
  364. },
  365. // 选择使用积分
  366. switch1Change(e) {
  367. if (e.target.value == true) {
  368. this.checkedPoints = true;
  369. // this.payMoneyNub();
  370. } else {
  371. console.log('当前为false');
  372. this.checkedPoints = false;
  373. // this.payMoneyNub();
  374. }
  375. },
  376. // 计算支付金额
  377. payMoneyNub() {
  378. console.log('计算支付金额');
  379. let obj = this;
  380. console.log('obj.checkedPoints', obj.checkedPoints);
  381. if (obj.typegoods == 6) {
  382. console.log('obj.typegoods == 6');
  383. obj.Orderkey = {
  384. orderkey: obj.orderKey,
  385. useIntegral: obj.checkedPoints ? 1 : 0, //是否积分抵扣
  386. couponId: obj.couponChecked.id, //优惠券编号
  387. addressId: obj.addressData.id, //地址编号
  388. level: obj.userInfo.level, //用户等级
  389. is_create: obj.is_create,
  390. store_id: obj.sid,
  391. is_wholesale: obj.is_wholesale
  392. };
  393. } else {
  394. obj.Orderkey = {
  395. orderkey: obj.orderKey,
  396. useIntegral: obj.checkedPoints ? 1 : 0, //是否积分抵扣
  397. couponId: obj.couponChecked.id, //优惠券编号
  398. addressId: obj.addressData.id, //地址编号
  399. is_create: obj.is_create,
  400. store_id: obj.sid,
  401. is_wholesale: obj.is_wholesale
  402. };
  403. console.log('obj.Orderkey', obj.Orderkey);
  404. }
  405. uni.showLoading({
  406. title: '加载中',
  407. mask: true
  408. });
  409. computedOrderkey(obj.Orderkey)
  410. .then(({ data }) => {
  411. console.log('--获取支付金额---', data);
  412. obj.payType = true;
  413. obj.integralShow = true;
  414. // 获取支付金额
  415. obj.payPrice = +data.result.pay_price;
  416. obj.shangpingPrice = +data.result.pay_price;
  417. obj.integralMoney = data.result.deduction_price;
  418. obj.moneyAll.storePostage = data.result.pay_postage;
  419. obj.integral_ratio = data.result.integral_ratio;
  420. if (
  421. data.result.pay_price == undefined ||
  422. data.result.pay_price == undefined ||
  423. data.result.deduction_price == undefined ||
  424. data.result.pay_postage == undefined
  425. ) {
  426. uni.showModal({
  427. title: '金额计算失败',
  428. content: 'KEY:' + JSON.stringify(obj.Orderkey) + ' ID:' + this.userInfo.uid,
  429. showCancel: false
  430. });
  431. }
  432. if (obj.goodsType == 5) {
  433. obj.payPrice = (obj.shangpingPrice / obj.integral_ratio).toFixed(2);
  434. }
  435. uni.hideLoading();
  436. })
  437. .catch(e => {
  438. console.log(e);
  439. uni.hideLoading();
  440. obj.integralShow = false;
  441. obj.payType = false;
  442. if (e.message.indexOf('人数过多') > -1) {
  443. uni.showModal({
  444. title: '提示',
  445. content: '当前人数过多,请重新下单',
  446. showCancel: false,
  447. success() {
  448. uni.navigateBack({
  449. delta: 1
  450. });
  451. }
  452. });
  453. console.log('我踏马直接离开');
  454. } else {
  455. uni.showModal({
  456. title: '加载失败',
  457. content: e.message,
  458. showCancel: false
  459. });
  460. }
  461. });
  462. },
  463. // 是否使用积分
  464. checkedIntegral() {
  465. this.checkedPoints = !this.checkedPoints;
  466. },
  467. // 选中优惠券
  468. checkedCp(item) {
  469. this.couponChecked = item;
  470. this.payMoneyNub();
  471. },
  472. // 加载优惠券列表
  473. couponsOrder(money) {
  474. couponsOrder(
  475. {
  476. cartId: this.cartId
  477. },
  478. money
  479. ).then(e => {
  480. if (e.data.length > 0) {
  481. this.couponListshow = true;
  482. }
  483. this.couponList = e.data;
  484. });
  485. },
  486. //顶部tab点击
  487. tabClick(index) {
  488. this.tabCurrentIndex = index;
  489. this.shipping_type = index + 1;
  490. console.log(this.shipping_type);
  491. },
  492. //显示优惠券面板
  493. toggleMask(type) {
  494. let timer = type === 'show' ? 10 : 300;
  495. let state = type === 'show' ? 1 : 0;
  496. this.maskState = 2;
  497. setTimeout(() => {
  498. this.maskState = state;
  499. }, timer);
  500. },
  501. loadData() {
  502. let obj = this;
  503. if (obj.typegoods == 6) {
  504. obj.goodsdata = {
  505. cartId: '' + obj.cartId,
  506. level: obj.userInfo.level, //用户等级
  507. store_id: obj.sid,
  508. is_wholesale: obj.is_wholesale
  509. };
  510. } else {
  511. obj.goodsdata = {
  512. cartId: '' + obj.cartId,
  513. is_create: obj.is_create,
  514. store_id: obj.sid,
  515. is_wholesale: obj.is_wholesale
  516. };
  517. }
  518. console.log('订单信息', obj.goodsdata);
  519. confirm(obj.goodsdata)
  520. .then(({ data }) => {
  521. console.log(data, '商品信息');
  522. obj.combination_id = data.combination_id;
  523. obj.addressData = data.addressInfo || {};
  524. obj.shopList = data.cartInfo; //商品列表
  525. console.log(obj.shangpingPrice, '2222');
  526. obj.moneyAll = data.priceGroup; //金额数据
  527. obj.orderKey = data.orderKey; //订单key
  528. // 计算金额
  529. this.payMoneyNub();
  530. // 加载优惠券
  531. obj.couponsOrder(data.priceGroup.totalPrice);
  532. })
  533. .catch(e => {
  534. console.log(e);
  535. uni.showModal({
  536. title: '提示',
  537. content: '当前商品库存不足,无法购买',
  538. showCancel: false,
  539. success() {
  540. uni.navigateBack();
  541. }
  542. });
  543. });
  544. },
  545. // 购买数量变化
  546. numberChange(data) {
  547. this.number = data.number;
  548. },
  549. numberChange(data) {
  550. let arr = this.cartList[data.index];
  551. arr.cart_num = data.number;
  552. getCartNum({ id: arr.id, number: data.number });
  553. this.calcTotal();
  554. },
  555. // 修改支付方式
  556. changePayType(type) {
  557. this.payType = type;
  558. },
  559. // 提交订单
  560. submit() {
  561. this.use_integral_pink = Number(this.integral);
  562. if (!this.addressData.real_name) {
  563. this.$api.msg('请选择收货地址');
  564. return false;
  565. }
  566. console.log(this.shipping_type, '123456');
  567. if (this.typegoods == 6) {
  568. uni.navigateTo({
  569. url:
  570. '/pages/money/pay?key=' +
  571. this.orderKey +
  572. '&shipping_type=' +
  573. this.shipping_type +
  574. '&typegoods=' +
  575. this.typegoods +
  576. '&level=' +
  577. this.userInfo.level +
  578. '&integralMoney=' +
  579. this.integralMoney +
  580. '&sid=' +
  581. this.sid +
  582. '&is_wholesale=' +
  583. this.is_wholesale
  584. });
  585. } else {
  586. uni.navigateTo({
  587. url:
  588. '/pages/money/pay?key=' +
  589. this.orderKey +
  590. '&pinkid=' +
  591. this.pinkid +
  592. '&shipping_type=' +
  593. this.shipping_type +
  594. '&use_integral_pink=' +
  595. this.use_integral_pink +
  596. '&goodsType=' +
  597. this.goodsType +
  598. '&shopId=' +
  599. this.shopList[0].productInfo.id +
  600. '&integralMoney=' +
  601. this.integralMoney +
  602. '&sid=' +
  603. this.sid +
  604. '&is_wholesale=' +
  605. this.is_wholesale
  606. // + '&autoPink=' + this.autoPink + '&autoid=' + this.Autoid
  607. });
  608. }
  609. }
  610. }
  611. };
  612. </script>
  613. <style lang="scss">
  614. page {
  615. background: $page-color-base;
  616. padding-bottom: 100rpx;
  617. }
  618. .navbar {
  619. display: flex;
  620. height: 80rpx;
  621. padding: 0 5px;
  622. background: #fff;
  623. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  624. position: relative;
  625. z-index: 10;
  626. .nav-item {
  627. flex: 1;
  628. display: flex;
  629. justify-content: center;
  630. align-items: center;
  631. height: 100%;
  632. font-size: $font-lg + 4rpx;
  633. color: $font-color-dark;
  634. position: relative;
  635. &.current {
  636. color: $base-color;
  637. &:after {
  638. content: '';
  639. position: absolute;
  640. left: 50%;
  641. bottom: 0;
  642. transform: translateX(-50%);
  643. width: 140rpx;
  644. height: 0;
  645. border-bottom: 2px solid $base-color;
  646. }
  647. }
  648. }
  649. }
  650. .address-section {
  651. padding: 30rpx 0;
  652. background: #fff;
  653. position: relative;
  654. border-top: 1px solid $border-color-light;
  655. .order-content {
  656. min-height: 100rpx;
  657. display: flex;
  658. align-items: center;
  659. padding-right: 30rpx;
  660. .cen {
  661. .top {
  662. .mobile {
  663. color: #999999;
  664. }
  665. }
  666. .address {
  667. color: #333333;
  668. }
  669. }
  670. .addAddress {
  671. text-align: center;
  672. width: 100%;
  673. .iconaddition {
  674. border-radius: 100rpx;
  675. margin-right: 20rpx;
  676. }
  677. }
  678. }
  679. .iconlocation {
  680. flex-shrink: 0;
  681. display: flex;
  682. align-items: center;
  683. justify-content: center;
  684. width: 90rpx;
  685. color: #888;
  686. font-size: 44rpx;
  687. }
  688. .cen {
  689. display: flex;
  690. flex-direction: column;
  691. flex: 1;
  692. font-size: 28rpx;
  693. color: $font-color-dark;
  694. }
  695. .name {
  696. font-size: 34rpx;
  697. margin-right: 24rpx;
  698. }
  699. .address {
  700. margin-top: 16rpx;
  701. margin-right: 20rpx;
  702. color: $font-color-light;
  703. }
  704. .icon-you {
  705. font-size: 32rpx;
  706. color: $font-color-light;
  707. margin-right: 30rpx;
  708. }
  709. .a-bg {
  710. position: absolute;
  711. left: 0;
  712. bottom: 0;
  713. display: block;
  714. width: 100%;
  715. height: 5rpx;
  716. }
  717. }
  718. .personal {
  719. margin-top: 15rpx;
  720. display: flex;
  721. flex-direction: column;
  722. background-color: #ffffff;
  723. .box-right {
  724. width: 100%;
  725. font-size: 30rpx;
  726. text-align: right;
  727. padding-right: 25rpx;
  728. }
  729. .info {
  730. padding: 10rpx 25rpx;
  731. display: flex;
  732. align-items: center;
  733. font-size: 30rpx;
  734. justify-content: space-between;
  735. .name {
  736. width: 120rpx;
  737. }
  738. input {
  739. margin-left: 12rpx;
  740. width: 100%;
  741. // background-color: pink;
  742. display: block;
  743. color: #999999;
  744. }
  745. }
  746. }
  747. .goods-section {
  748. margin-top: 16rpx;
  749. background: #fff;
  750. padding-bottom: 1px;
  751. //订单编号
  752. .order-box {
  753. display: flex;
  754. align-items: center;
  755. height: 70rpx;
  756. padding: 10rpx 30rpx 10rpx 40rpx;
  757. .order-num {
  758. width: 100%;
  759. font-size: 28rpx;
  760. font-weight: 500;
  761. color: rgba(51, 51, 51, 1);
  762. }
  763. .iconfont {
  764. float: right;
  765. }
  766. }
  767. .g-header {
  768. display: flex;
  769. align-items: center;
  770. height: 84rpx;
  771. padding: 0 30rpx;
  772. position: relative;
  773. }
  774. .logo {
  775. display: block;
  776. width: 50rpx;
  777. height: 50rpx;
  778. border-radius: 100px;
  779. }
  780. .name {
  781. font-size: 30rpx;
  782. color: $font-color-base;
  783. margin-left: 24rpx;
  784. }
  785. .g-item {
  786. display: flex;
  787. margin: 20rpx 30rpx;
  788. padding-top: 20rpx;
  789. image {
  790. flex-shrink: 0;
  791. display: block;
  792. width: 140rpx;
  793. height: 140rpx;
  794. border-radius: 4rpx;
  795. }
  796. .right {
  797. flex: 1;
  798. padding-left: 24rpx;
  799. overflow: hidden;
  800. .attr {
  801. margin-top: 10rpx;
  802. width: 195rpx;
  803. background: #f6f6f6;
  804. border-radius: 10rpx;
  805. font-size: 18rpx;
  806. font-weight: 400;
  807. color: #606972;
  808. line-height: 40rpx;
  809. text-align: center;
  810. }
  811. }
  812. .title {
  813. font-size: 30rpx;
  814. color: $font-color-dark;
  815. }
  816. .spec {
  817. font-size: 26rpx;
  818. color: $font-color-light;
  819. }
  820. .price-box {
  821. display: flex;
  822. align-items: center;
  823. font-size: 32rpx;
  824. color: $font-color-dark;
  825. padding-top: 10rpx;
  826. .price {
  827. margin-bottom: 4rpx;
  828. color: #fa2740;
  829. display: flex;
  830. align-items: center;
  831. .jf_icon_img {
  832. width: 22rpx;
  833. height: 24rpx;
  834. display: block;
  835. margin-right: 8rpx;
  836. }
  837. }
  838. .number {
  839. font-size: 26rpx;
  840. color: $font-color-base;
  841. margin-left: 20rpx;
  842. }
  843. }
  844. .step-box {
  845. position: relative;
  846. }
  847. }
  848. }
  849. .yt-list {
  850. margin-top: 16rpx;
  851. background: #fff;
  852. }
  853. .yt-list-cell {
  854. display: flex;
  855. align-items: center;
  856. padding: 10rpx 30rpx 10rpx 40rpx;
  857. line-height: 70rpx;
  858. position: relative;
  859. &.cell-hover {
  860. background: #fafafa;
  861. }
  862. &.b-b:after {
  863. left: 30rpx;
  864. }
  865. .cell-icon {
  866. height: 32rpx;
  867. width: 32rpx;
  868. font-size: 22rpx;
  869. color: #fff;
  870. text-align: center;
  871. line-height: 32rpx;
  872. background: #f85e52;
  873. border-radius: 4rpx;
  874. margin-right: 12rpx;
  875. &.hb {
  876. background: #ffaa0e;
  877. }
  878. &.lpk {
  879. background: #3ab54a;
  880. }
  881. }
  882. .cell-more {
  883. align-self: center;
  884. font-size: 24rpx;
  885. color: $font-color-light;
  886. margin-left: 8rpx;
  887. margin-right: -10rpx;
  888. }
  889. .cell-tit {
  890. flex: 1;
  891. font-size: 26rpx;
  892. color: $font-color-light;
  893. margin-right: 10rpx;
  894. }
  895. .cell-tip {
  896. font-size: 26rpx;
  897. color: $font-color-dark;
  898. &.disabled {
  899. color: $font-color-light;
  900. }
  901. &.active {
  902. color: $base-color;
  903. }
  904. &.red {
  905. color: $base-color;
  906. }
  907. }
  908. &.desc-cell {
  909. .cell-tit {
  910. max-width: 90rpx;
  911. }
  912. }
  913. .desc {
  914. flex: 1;
  915. font-size: $font-base;
  916. color: $font-color-dark;
  917. }
  918. .inte-power {
  919. color: #333333;
  920. }
  921. .integral {
  922. text-align: right;
  923. font-size: 24rpx;
  924. }
  925. .symbol {
  926. margin-right: 10rpx;
  927. font-size: 26rpx;
  928. font-weight: bold;
  929. color: #f23a30;
  930. }
  931. .idcard {
  932. width: 500rpx;
  933. font-size: 26rpx;
  934. }
  935. }
  936. // 跨境购买人信息
  937. .border-box {
  938. padding: 10rpx 30rpx 10rpx 40rpx;
  939. line-height: 70rpx;
  940. .info {
  941. width: 335rpx;
  942. height: 27rpx;
  943. font-size: 32rpx;
  944. font-weight: 500;
  945. color: rgba(51, 51, 51, 1);
  946. }
  947. .border-right {
  948. float: right;
  949. .iconfont {
  950. width: 22rpx;
  951. height: 22rpx;
  952. color: rgba(153, 153, 153, 1);
  953. }
  954. .word-1 {
  955. margin-left: 6rpx;
  956. width: 43rpx;
  957. height: 22rpx;
  958. font-size: 24rpx;
  959. font-weight: 500;
  960. color: rgba(153, 153, 153, 1);
  961. }
  962. }
  963. }
  964. .border-style {
  965. border-bottom: 1px solid #f0f0f0;
  966. &:last-of-type {
  967. border-bottom: 0;
  968. }
  969. }
  970. /* 支付列表 */
  971. .pay-list {
  972. padding-left: 40rpx;
  973. margin-top: 16rpx;
  974. background: #fff;
  975. .pay-item {
  976. display: flex;
  977. align-items: center;
  978. padding-right: 20rpx;
  979. line-height: 1;
  980. height: 110rpx;
  981. position: relative;
  982. }
  983. .icon-weixinzhifu {
  984. width: 80rpx;
  985. font-size: 40rpx;
  986. color: #6bcc03;
  987. }
  988. .icon-alipay {
  989. width: 80rpx;
  990. font-size: 40rpx;
  991. color: #06b4fd;
  992. }
  993. .icon-xuanzhong2 {
  994. display: flex;
  995. align-items: center;
  996. justify-content: center;
  997. width: 60rpx;
  998. height: 60rpx;
  999. font-size: 40rpx;
  1000. color: $base-color;
  1001. }
  1002. .tit {
  1003. font-size: 32rpx;
  1004. color: $font-color-dark;
  1005. flex: 1;
  1006. }
  1007. }
  1008. .footer {
  1009. position: fixed;
  1010. left: 0;
  1011. bottom: 0;
  1012. display: flex;
  1013. align-items: center;
  1014. width: 100%;
  1015. height: 90rpx;
  1016. justify-content: space-between;
  1017. font-size: 30rpx;
  1018. background-color: #fff;
  1019. z-index: 99;
  1020. color: $font-color-base;
  1021. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  1022. .price-content {
  1023. padding-left: 30rpx;
  1024. font-size: 36rpx;
  1025. display: flex;
  1026. align-items: center;
  1027. }
  1028. .jf_img {
  1029. width: 22rpx;
  1030. height: 24rpx;
  1031. display: block;
  1032. margin-bottom: -4rpx;
  1033. }
  1034. .jf_dw {
  1035. margin-left: 6rpx;
  1036. font-size: 24rpx;
  1037. font-family: PingFang SC;
  1038. font-weight: 500;
  1039. color: #666666;
  1040. }
  1041. .price-tip {
  1042. color: #fc4141;
  1043. margin-left: 8rpx;
  1044. font-size: 36rpx;
  1045. }
  1046. .price {
  1047. font-size: 36rpx;
  1048. color: #fc4141;
  1049. }
  1050. .submit {
  1051. display: flex;
  1052. align-items: center;
  1053. justify-content: center;
  1054. margin-right: 27rpx;
  1055. width: 200rpx;
  1056. height: 72rpx;
  1057. color: #fff;
  1058. font-size: 32rpx;
  1059. background: #ff0000;
  1060. // background: linear-gradient(0deg, rgba(250, 39, 64, 1), rgba(254, 85, 68, 1));
  1061. border-radius: 36rpx;
  1062. }
  1063. }
  1064. /* 优惠券面板 */
  1065. .mask {
  1066. display: flex;
  1067. align-items: flex-end;
  1068. position: fixed;
  1069. left: 0;
  1070. top: var(--window-top);
  1071. bottom: 0;
  1072. width: 100%;
  1073. background: rgba(0, 0, 0, 0);
  1074. z-index: 9995;
  1075. transition: 0.3s;
  1076. .mask-content {
  1077. width: 100%;
  1078. max-height: 70vh;
  1079. background: #f3f3f3;
  1080. transform: translateY(100%);
  1081. transition: 0.3s;
  1082. overflow-y: scroll;
  1083. }
  1084. &.none {
  1085. display: none;
  1086. }
  1087. &.show {
  1088. background: rgba(0, 0, 0, 0.4);
  1089. .mask-content {
  1090. transform: translateY(0);
  1091. }
  1092. }
  1093. }
  1094. /* 优惠券列表 */
  1095. .coupon-item {
  1096. display: flex;
  1097. flex-direction: column;
  1098. margin: 20rpx 24rpx;
  1099. background: #fff;
  1100. .con {
  1101. display: flex;
  1102. align-items: center;
  1103. position: relative;
  1104. height: 120rpx;
  1105. padding: 0 30rpx;
  1106. &:after {
  1107. position: absolute;
  1108. left: 0;
  1109. bottom: 0;
  1110. content: '';
  1111. width: 100%;
  1112. height: 0;
  1113. border-bottom: 1px dashed #f3f3f3;
  1114. transform: scaleY(50%);
  1115. }
  1116. }
  1117. .left {
  1118. display: flex;
  1119. flex-direction: column;
  1120. justify-content: center;
  1121. flex: 1;
  1122. overflow: hidden;
  1123. height: 100rpx;
  1124. }
  1125. .title {
  1126. font-size: 32rpx;
  1127. color: $font-color-dark;
  1128. margin-bottom: 10rpx;
  1129. }
  1130. .time {
  1131. font-size: 24rpx;
  1132. color: $font-color-light;
  1133. }
  1134. .right {
  1135. display: flex;
  1136. flex-direction: column;
  1137. justify-content: center;
  1138. align-items: center;
  1139. font-size: 26rpx;
  1140. color: $font-color-base;
  1141. height: 100rpx;
  1142. }
  1143. .price {
  1144. font-size: 44rpx;
  1145. color: $base-color;
  1146. &:before {
  1147. content: '¥';
  1148. font-size: 34rpx;
  1149. }
  1150. }
  1151. .tips {
  1152. font-size: 24rpx;
  1153. color: $font-color-light;
  1154. line-height: 60rpx;
  1155. padding-left: 30rpx;
  1156. }
  1157. .circle {
  1158. position: absolute;
  1159. left: -6rpx;
  1160. bottom: -10rpx;
  1161. z-index: 10;
  1162. width: 20rpx;
  1163. height: 20rpx;
  1164. background: #f3f3f3;
  1165. border-radius: 100px;
  1166. &.r {
  1167. left: auto;
  1168. right: -6rpx;
  1169. }
  1170. }
  1171. }
  1172. </style>