submit.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <view class="page">
  3. <!-- 收货地址 -->
  4. <view class="address">
  5. <AddressCard :data="addressInfo" v-if="addressInfo.id"></AddressCard>
  6. <view class="addbtn" v-else @click="selAddress()">
  7. +选择地址
  8. </view>
  9. </view>
  10. <view class="conbg">
  11. <!-- 商品列表 -->
  12. <view class="goods">
  13. <SubmitGoodsCard v-for="(goods, index) in goodsList" :key="index" :data="goods" :showBorderBottom="index != goodsList.length - 1"></SubmitGoodsCard>
  14. </view>
  15. <!-- 优惠信息 -->
  16. <SubmitDiscounts :data="priceInfo" :couponList="canUseCouponList" :usingCoupon="usingCoupon" @selCoupon="selCouponFun"></SubmitDiscounts>
  17. <u-field v-model="remark" label="留言" placeholder="请输入您的留言"></u-field>
  18. </view>
  19. <!-- 提交订单 -->
  20. <!-- {{priceInfo}} -->
  21. <selCouponPopup :priceInfo="priceInfo" ref="selCouponPopupRef" @done="confirmSelCoupon"></selCouponPopup>
  22. <!-- 底部按钮 -->
  23. <SubmitOperate :data="priceInfo" @submitOrder="submitOrder"></SubmitOperate>
  24. </view>
  25. </template>
  26. <script>
  27. import SubmitDiscounts from '@/pages-mall/components/order/submit-discounts.vue';
  28. import SubmitGoodsCard from '@/pages-mall/components/order/submit-goods-card.vue';
  29. import SubmitOperate from '@/pages-mall/components/order/submit-operate.vue';
  30. import AddressCard from '@/pages/mine/components/address-card.vue';
  31. import selCouponPopup from '@/pages-mall/components/order/sel-coupon-popup.vue';
  32. var _self;
  33. export default {
  34. components: {
  35. AddressCard,
  36. SubmitDiscounts,
  37. SubmitGoodsCard,
  38. SubmitOperate,
  39. selCouponPopup
  40. },
  41. data() {
  42. return {
  43. orderType:'single',// cart,购物车订单 single 详情页直接下的订单
  44. cartIds:'',//有的话代表是购物车订单,无 常规订单
  45. expresstemplate:{},
  46. priceInfo: {
  47. countPrice:0,//商品总价
  48. discount:0,//优惠券
  49. freight:0,//运费
  50. },
  51. usingCoupon:{},//使用中的优惠券信息
  52. // canUseCoupon:[], //可用优惠券
  53. // notUseCoupon:[],//不可用优惠券
  54. thisTimeNum:Date.now(),
  55. remark:'',
  56. addressInfo: {},
  57. goodsList: [],
  58. };
  59. },
  60. async onLoad(opt) {
  61. _self = this;
  62. if(!opt.orderInfo){
  63. uni.navigateBack();
  64. return;
  65. }
  66. if(opt.cartIds){
  67. this.cartIds = opt.cartIds;
  68. }
  69. let orders = JSON.parse(decodeURIComponent(opt.orderInfo));
  70. this.goodsList = [].concat(orders);
  71. // 获取默认地址
  72. await this.getDefaultAddress();
  73. console.log('默认地址设置成功')
  74. console.log('执行2222222')
  75. // 是否有运费模板 express_type 运费类型
  76. if(!this.baseConfig.express_type){
  77. await this.getExpressInfo();
  78. }
  79. console.log('已经有运费模板了哦')
  80. this.expressPipei();
  81. this.comoutedPrice();
  82. this.getUserCouponList();
  83. },
  84. onShow() {
  85. uni.$once('addressInfo',function(data){
  86. _self.addressInfo = data;
  87. _self.expressPipei();
  88. // TODO 下面执行刷新的方法
  89. })
  90. },
  91. computed: {
  92. couponList() {
  93. return this.$store.state.user.couponList;
  94. },
  95. canUseCouponList(){
  96. // 是否可用优惠券
  97. // this.priceInfo.countPrice status==2 未使用
  98. let coupon = this.couponList.filter(item => item.status==2&&(item.min_amount<=this.priceInfo.countPrice));
  99. return coupon;
  100. },
  101. // 运费模板
  102. baseConfig() {
  103. return this.$store.state.pub.baseConfig;
  104. },
  105. // 商品数量
  106. goodsListCountNums(){
  107. let nums = 0;
  108. this.goodsList.forEach(e=>nums+=e.nums);
  109. return nums;
  110. },
  111. },
  112. methods:{
  113. // 获取运费模板信息
  114. async getExpressInfo(){
  115. console.log('来获取运费模板信息了哦')
  116. await this.$u.api.getBaseInfoAjax().then(({data})=>{
  117. this.$store.commit('pub/commitBaseConfig',data);
  118. console.log('运费模板信息获取成功')
  119. }).catch(()=>{
  120. })
  121. },
  122. // 邮费匹配
  123. expressPipei(){
  124. // extra_express_fee
  125. if(!_self.addressInfo.id){
  126. // 没有地址
  127. console.log('没有地址')
  128. return;
  129. }
  130. if(!this.baseConfig.express_type){
  131. // 没有邮费模板
  132. console.log('没有邮费模板')
  133. return;
  134. }
  135. const base_express_fee = Number(this.baseConfig.base_express_fee);
  136. const extra_express_fee = Number(this.baseConfig.extra_express_fee);
  137. if(this.baseConfig.express_type=='2'){
  138. // 不包邮
  139. console.log('不包邮>>>>本书',_self.goodsListCountNums);
  140. this.priceInfo.freight = base_express_fee+extra_express_fee*(_self.goodsListCountNums-1);
  141. console.log(this.priceInfo.freight);
  142. return;
  143. }
  144. if(this.baseConfig.express_type=='3'){
  145. // 全场满x包邮
  146. console.log('全场满x包邮')
  147. if(this.priceInfo.countPrice>=this.baseConfig.min_buy_amount){
  148. // 价格满了,包邮
  149. this.priceInfo.freight = 0;
  150. }else{
  151. this.priceInfo.freight = base_express_fee+extra_express_fee*(_self.goodsListCountNums-1);
  152. }
  153. return;
  154. }
  155. if(this.baseConfig.express_type=='4'){
  156. // 全场满x包邮
  157. console.log('全场满x包邮')
  158. const codes = this.baseConfig.codes.split(',');
  159. const ucodes = this.addressInfo.addressCode.split(',')[0];
  160. console.log(codes,ucodes);
  161. if(codes.includes(ucodes)){
  162. // 片段是否偏远地区
  163. this.priceInfo.freight = base_express_fee+extra_express_fee*(_self.goodsListCountNums-1);
  164. }else if(this.priceInfo.countPrice>=this.baseConfig.min_buy_amount){
  165. this.priceInfo.freight = 0;
  166. }else{
  167. this.priceInfo.freight = base_express_fee+extra_express_fee*(_self.goodsListCountNums-1);
  168. }
  169. return;
  170. }
  171. },
  172. // 选择地址
  173. selAddress(){
  174. uni.navigateTo({
  175. url: '/pages-mine/pages/address/list?isSelect=true&isBack=true'
  176. });
  177. },
  178. async getDefaultAddress(){
  179. console.log('执行11111111111')
  180. await this.$u.api.getDefaultAddressAjax().then(({data})=>{
  181. if(!data) return
  182. this.addressInfo = {
  183. ...data,
  184. address:data.province+data.city+data.area,
  185. detail_address:data.province+data.city+data.area+data.street,
  186. };
  187. })
  188. },
  189. // 计算总价
  190. comoutedPrice(){
  191. let price = 0;
  192. this.goodsList.map(item => {
  193. price += Number(item.selectdSku.price_selling) * item.nums
  194. });
  195. this.priceInfo.countPrice = parseFloat(price).toFixed(2);
  196. },
  197. // 选择优惠券
  198. selCouponFun(){
  199. this.$refs.selCouponPopupRef.showPopup({couponList:this.couponList,usingCoupon:this.usingCoupon})
  200. },
  201. // 确认选择
  202. confirmSelCoupon(e){
  203. console.log('使用中,,',e);
  204. this.usingCoupon = e;
  205. this.priceInfo.discount = e.amount||0;
  206. // this.$forceUpdate();
  207. },
  208. // 提交订单
  209. submitOrder(){
  210. if(!this.addressInfo?.id){
  211. this.$u.toast('请选择收货地址');
  212. return false;
  213. }
  214. if(this.cartIds){
  215. // 购物车订单
  216. this.submitCartGoods();
  217. return;
  218. }
  219. // 常规订单
  220. this.submitGoods();
  221. },
  222. // 提交购物车商品
  223. submitCartGoods(){
  224. let json = {
  225. address_id:this.addressInfo.id,
  226. cart_ids:this.cartIds,
  227. remark: this.remark,
  228. user_coupon_id:this.usingCoupon.id,
  229. }
  230. this.$u.api.submitCartOrderAjax(json).then(({code,data})=>{
  231. if(code==1){
  232. console.log(data);
  233. uni.redirectTo({
  234. url: '/pages-mall/pages/order/pay?orderInfo='+encodeURIComponent(JSON.stringify(data))
  235. });
  236. }
  237. })
  238. },
  239. // 直接购买单个商品
  240. submitGoods(){
  241. const info = this.goodsList[0];
  242. let json = {
  243. goods_id: info.id,
  244. nums: info.nums,
  245. address_id: this.addressInfo.id,
  246. pay_type: 'wx_miniapp',
  247. sku_id: info.selectdSku.id,
  248. remark: this.remark,
  249. user_coupon_id:this.usingCoupon.id,
  250. };
  251. this.$u.api.submitOrderAjax(json).then(({code,data})=>{
  252. if(code==1){
  253. console.log(data);
  254. uni.redirectTo({
  255. url: '/pages-mall/pages/order/pay?orderInfo='+encodeURIComponent(JSON.stringify(data))
  256. });
  257. }
  258. })
  259. },
  260. getUserCouponList(){
  261. if(this.loading)return false;
  262. this.$u.api.getUserCouponListAjax(1).then(({code,data})=>{
  263. // this.discountsList = data.data;
  264. this.$store.commit('user/commitCouponList',data.data);
  265. }).catch(()=>{
  266. // this.$store.commit('user/commitCouponList');
  267. })
  268. },
  269. },
  270. };
  271. </script>
  272. <style lang="scss" scoped>
  273. .page {
  274. padding-top: 1rpx;
  275. padding-bottom: 140rpx;
  276. }
  277. .address{
  278. margin: 20rpx 0;
  279. padding: 0 30rpx;
  280. background-color: $app-theme-bg-color;
  281. }
  282. .goods {
  283. // background-color: $app-theme-bg-color;
  284. padding: 0 30rpx;
  285. }
  286. .conbg{
  287. background-color: #fff;
  288. }
  289. .addbtn{
  290. padding: 25rpx;
  291. font-size: 36rpx;
  292. color: $app-theme-color;
  293. background-color: #fff;
  294. }
  295. </style>