feat: 商品下单完成

api/checkout.js

@@ -10,6 +10,7 @@ const api = {
 
 // 结算台订单信息
 export const order = (mode, param) => {
+    console.warn('----- my data is { mode, ...param }: ', { mode, ...param })
   return request.get(api.order, { mode, ...param })
 }
 

api/order.js

@@ -1,4 +1,6 @@
 import request from '@/utils/request'
+import {httpRequest} from '@/utils/request/axios'
+const baseUrl = 'https://api.1024api.com/api-interface/app'
 
 // api地址
 const api = {
@@ -40,3 +42,19 @@ export function cancel(orderId, data) {
 export function receipt(orderId, data) {
   return request.post(api.receipt, { orderId, ...data })
 }
+
+// 获取地理位置
+export const apiGetAddressList = (data) => {
+    return httpRequest.post(
+      `${baseUrl}/buyer/address/list`,
+      data
+    );
+  }
+
+// 下单
+export const apiOrderAdd = (data) => {
+    return httpRequest.post(
+      `${baseUrl}/order/add`,
+      data
+    );
+  }

components/goods-sku-popup/index.vue

@@ -801,7 +801,7 @@
         let that = this;
         that.checkSelectComplete({
           success: function(selectShop) {
-            console.warn('----- my data is : ', selectShop)
+            console.warn('----- my data is 111: ', selectShop)
             selectShop.buy_num = that.selectNum;
             that.$emit('buy-now', selectShop);
             that.$emit('buy', selectShop);

config.js

@@ -8,7 +8,8 @@ export default {
    * 例如: https://www.你的域名.com/index.php?s=/api/
    */
 //   apiUrl: "https://shop2.client.yiovo.com/index.php?s=/api/", // 微信小程序
-  apiUrl: "/index.php?s=/api/", // H5
+//   apiUrl: "/index.php?s=/api/", // H5
+  apiUrl: "http://127.0.0.1:4523/m1/7488507-7223875-default/index.php?s=/api/", // mock
 
   /**
    * 是否启用商城设置缓存

pages/checkout/index.vue

@@ -1,18 +1,18 @@
 <template>
   <view class="container p-bottom" :style="appThemeStyle">
-    <view v-if="order.goodsList && order.goodsList.length">
+    <view>
       <!-- 实物订单：选择配送方式 -->
-      <block v-if="order.orderType == OrderTypeEnum.PHYSICAL.value">
+      <view>
         <!-- 配送方式选项卡 -->
-        <view v-if="isShowTab" class="swiper-tab dis-flex flex-y-center flex-x-around">
+       <!--  <view class="swiper-tab dis-flex flex-y-center flex-x-around">
           <view class="swiper-tab-item" :class="{ on: curDelivery == DeliveryTypeEnum.EXPRESS.value }"
             @click="handleSwichDelivery(DeliveryTypeEnum.EXPRESS.value)">
             <text>快递配送</text>
           </view>
-        </view>
+        </view> -->
 
         <!-- 快递配送：配送地址 -->
-        <view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" @click="onSelectAddress" class="flow-delivery">
+        <view @click="onSelectAddress" class="flow-delivery">
           <view class="flow-delivery__detail dis-flex flex-y-center">
             <view class="detail-location dis-flex">
               <text class="iconfont icon-dingwei"></text>
@@ -20,8 +20,8 @@
             <view class="detail-content flex-box">
               <block v-if="order.address">
                 <view class="detail-content__title dis-flex">
-                  <text class="f-30">{{ order.address.name }}</text>
+                  <text class="f-30">{{ order.address.buyerName }}</text>
-                  <text class="detail-content__title-phone f-28">{{ order.address.phone }}</text>
+                  <text class="detail-content__title-phone f-28">{{ order.address.buyerPhone }}</text>
                 </view>
                 <view class="address detail-content__describe">
                   <text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text>
@@ -40,18 +40,18 @@
           </view>
         </view>
 
-      </block>
+      </view>
 
       <!-- 商品列表 -->
       <view class="checkout_list" v-for="(item, index) in order.goodsList" :key="index">
-        <view class="flow-shopList dis-flex" data-index="index" @click="onTargetGoods(item.goods_id)">
+        <view class="flow-shopList dis-flex" data-index="index" @click="onTargetGoods(item.goodsId)">
           <!-- 商品图片 -->
           <view class="flow-list-left">
-            <image mode="scaleToFill" :src="item.goods_image"></image>
+            <image mode="scaleToFill" :src="item.image"></image>
           </view>
           <view class="flow-list-right flex-box">
             <!-- 商品名称 -->
-            <text class="goods-name twoline-hide">{{ item.goods_name }}</text>
+            <text class="goods-name twoline-hide">{{ item.title }}</text>
             <!-- 商品规格 -->
             <view class="goods-props clearfix">
               <view class="goods-props-item" v-for="(props, idx) in item.skuInfo.goods_props" :key="idx">
@@ -61,12 +61,12 @@
             </view>
             <!-- 商品数量和单价 -->
             <view class="flow-list-cont dis-flex flex-x-between flex-y-center">
-              <text class="small">×{{ item.total_num }}</text>
+              <text class="small">×{{ item.buy_num }}</text>
-              <text class="flow-cont" :class="[item.is_user_grade ? 'price-delete' : '']">￥{{ item.goods_price }}</text>
+              <text class="flow-cont" :class="[item.is_user_grade ? 'price-delete' : '']">￥{{ item.price }}</text>
             </view>
             <!-- 会员折扣价 -->
             <view v-if="item.is_user_grade" class="grade-price">
-              <text>会员折扣价：￥{{ item.grade_goods_price }}</text>
+              <text>会员折扣价：￥{{ 0 }}</text>
             </view>
           </view>
         </view>
@@ -86,7 +86,7 @@
           </view>
         </view>
         <!-- 优惠券 -->
-        <view v-if="$checkModule('market-coupon')" class="flow-all-list dis-flex">
+        <view class="flow-all-list dis-flex">
           <text class="flex-five">优惠券：</text>
           <view class="flex-five t-r">
             <view v-if="order.couponList.length > 0" @click="handleShowPopup()">
@@ -98,7 +98,7 @@
           </view>
         </view>
         <!-- 积分抵扣 -->
-        <view v-if="$checkModule('market-points') && order.isAllowPoints" class="points flow-all-list dis-flex flex-y-center">
+        <!-- <view v-if="order.isAllowPoints" class="points flow-all-list dis-flex flex-y-center">
           <view class="block-left flex-five" @click="handleShowPoints()">
             <text class="title">可用{{ setting.points_name }}抵扣：</text>
             <text class="iconfont icon-help"></text>
@@ -107,18 +107,15 @@
             <text class="points-money col-m">-￥{{ order.pointsMoney }}</text>
             <u-switch v-model="isUsePoints" size="42" :active-color="appTheme.mainBg" @change="getOrderData()"></u-switch>
           </view>
-        </view>
+        </view> -->
         <!-- 配送费用 -->
         <view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" class="dis-flex flow-all-list">
           <text class="flex-five">配送费用：</text>
           <view class="flex-five t-r">
-            <view v-if="order.address">
+            <view>
-              <text class="col-m" v-if="order.isIntraRegion">+￥{{ order.expressPrice }}</text>
+              <text class="col-m" v-if="!order.isIntraRegion">+￥{{ 0 }}</text>
               <text v-else>不在配送范围</text>
             </view>
-            <view v-else>
-              <text class="col-7">请先选择配送地址</text>
-            </view>
           </view>
         </view>
       </view>
@@ -134,7 +131,7 @@
       <view class="flow-fixed-footer b-f m-top10">
         <view class="dis-flex chackout-box">
           <view class="chackout-left pl-12">实付款：
-            <text class="col-m">￥{{ order.orderPayPrice }}</text>
+            <text class="col-m">￥{{ order.orderTotalPrice }}</text>
           </view>
           <view class="chackout-right" @click="onSubmitOrder()">
             <view class="flow-btn f-32" :class="{ disabled }">提交订单</view>
@@ -225,8 +222,8 @@
 </template>
 
 <script>
-  import * as Verify from '@/utils/verify'
   import * as CheckoutApi from '@/api/checkout'
+  import * as OrderApi from '@/api/order'
   import { CouponTypeEnum } from '@/common/enum/coupon'
   import { OrderTypeEnum, DeliveryTypeEnum } from '@/common/enum/order'
 
@@ -267,9 +264,9 @@
         // 当前页面参数
         options: {},
         // 配送方式
-        isShowTab: false,
+        // isShowTab: false,
+        curDelivery: 10,
         DeliveryTypeEnum,
-        curDelivery: null,
         // 优惠券颜色组
         CouponColors,
         // 选择的优惠券
@@ -285,9 +282,9 @@
         // 是否显示优惠券弹窗
         showPopup: false,
         // 订单信息 (从后端api中获取)
-        order: {},
+        order: {
-        // 个人信息
+            couponList: [],
-        personal: {},
+        },
         // 商城设置
         setting: {}
       }
@@ -312,45 +309,95 @@
      */
     onShow() {
       // 获取当前订单信息
-      this.getOrderData()
+      const goods = JSON.parse(decodeURIComponent(this.options.goods))
+      console.warn('----- my data is goods: ', goods)
+      goods.forEach(item => {
+        item.skuInfo = { goods_props: [] }
+      })
+      this.order.goodsList = goods
+    //   this.getOrderData()
+      OrderApi.apiGetAddressList({}).then(res => {
+        const ob = this.order.address = res.data.rows.find(item => item.status === 'default') || {}
+        this.order.address.region = [ob.province, ob.city, ob.region]
+        this.order.couponList = []
+        this.order.orderTotalPrice = goods.reduce((total, item) => total + item.price * item.buy_num, 0)
+        this.order.orderTotalNum = goods.reduce((total, item) => total + item.buy_num, 0)
+      })
     },
 
     methods: {
-
+      // 快递配送：选择收货地址
-      // 获取订单数据
+      onSelectAddress() {
-      getOrderData() {
+        this.$navTo('pages/address/index', { from: 'checkout' })
-        const app = this
-        const { options: { mode } } = app
-        // 请求的参数
-        const params = app.getRequestParam()
-        // 请求api
-        getCheckoutApi(mode)
-          .order(mode, params)
-          .then(result => app.initData(result.data))
-          .catch(err => err)
       },
 
-      // 初始化数据
+      // 跳转到商品详情页
-      initData({ order, setting, personal }) {
+      onTargetGoods(goodsId) {
+        this.$navTo('pages/goods/detail', { goodsId })
+      },
+
+      // 订单提交
+      onSubmitOrder() {
         const app = this
-        app.order = order
+        if (app.disabled) {
-        app.personal = personal
+          return false
-        app.setting = setting
-        // 显示错误信息
-        if (order.hasError) {
-          app.showToast(order.errorMsg, 3000)
         }
-        // 当前选择的配送方式
+        // 表单验证
-        app.curDelivery = order.delivery
+        if (!app.onVerifyFrom()) {
-        // 如果只有一种配送方式则不显示选项卡
+          return false
-        app.isShowTab = setting.deliveryType.length > 1
+        }
-        // 是否使用积分抵扣
+        // 按钮禁用
-        app.isUsePoints = order.isUsePoints
+        app.disabled = true
-        app.selectCouponId = order.couponId
+        const skuList = app.order.goodsList.map(item => ({
+          skuId: item.goodsSkuId,
+          num: item.buy_num,
+        }))
+        OrderApi.apiOrderAdd({ buyerAddressId: this.order.address.id, vvTradeOrderLineDTOList: skuList }).then(res => {
+            res.data.package = res.data.prepayId
+            res.data.timeStamp = String(res.data.timeStamp)
+            // 判断订单是否已支付: 已支付跳转订单列表  未支付跳转支付页
+            if (!res.data.package) {
+              app.showToast(result.message, 1500)
+              setTimeout(() => app.$navTo('pages/order/index', {}, 'redirectTo'), 1500)
+            } else {
+              // 订单未支付: 跳转到订单支付页
+              setTimeout(() => app.$navTo('pages/checkout/cashier/index', res.data, 'redirectTo'), 100)
+            }
+        }).finally(() => setTimeout(() => app.disabled = false, 1600))
       },
 
-      // 获取api请求的参数
+      // 表单提交的数据
-      getRequestParam() {
+      getFormData() {
+        const app = this
+        const { options } = app
+        // 表单数据
+        const form = {
+          delivery: app.curDelivery,
+          couponId: app.selectCouponId || 0,
+          isUsePoints: app.isUsePoints ? 1 : 0,
+          remark: app.remark || '',
+        }
+        // 获取不同模式的参数
+        const modeParam = getModeParam(options.mode, options)
+        return { ...form, ...modeParam }
+      },
+
+      // 表单验证
+      onVerifyFrom() {
+        const app = this
+        if (app.hasError) {
+          app.showToast(app.errorMsg, 3000)
+          return false
+        }
+        return true
+      },
+
+      // 显示toast信息
+      showToast(title, duration = 2000) {
+        this.$refs.uToast.show({ title, duration })
+      },
+       // 获取api请求的参数
+       getRequestParam() {
         const app = this
         const { options } = app
         // 结算模式的固定参数
@@ -363,9 +410,33 @@
         }
         return { ...orderParam, ...modeParam }
       },
+      
+      // 获取订单数据
+      getOrderData() {
+        const app = this
+        const { options: { mode } } = app
+        const params = app.getRequestParam()
+        getCheckoutApi(mode)
+          .order(mode, params)
+          .then(result => app.initData(result.data))
+          .catch(err => err)
+      },
 
+      // 初始化数据
+      initData({ order, setting }) {
+        const app = this
+        app.order = order
+        app.setting = setting
+        // 当前选择的配送方式
+        // app.curDelivery = order.delivery
+        // app.isShowTab = setting.deliveryType.length > 1 // 如果只有一种配送方式则不显示选项卡
+        // 是否使用积分抵扣
+        // app.isUsePoints = order.isUsePoints
+        app.selectCouponId = order.couponId
+      },
+      
       // 切换配送方式
-      handleSwichDelivery(key) {
+    /*   handleSwichDelivery(key) {
         this.curDelivery = key
         this.getOrderData()
       },
@@ -373,7 +444,7 @@
       // 显示积分抵扣说明
       handleShowPoints() {
         this.showPoints = true
-      },
+      }, */
 
       // 显示优惠券弹窗
       handleShowPopup() {
@@ -414,77 +485,6 @@
         this.showPopup = false
       },
 
-      // 快递配送：选择收货地址
-      onSelectAddress() {
-        this.$navTo('pages/address/index', { from: 'checkout' })
-      },
-
-      // 跳转到商品详情页
-      onTargetGoods(goodsId) {
-        this.$navTo('pages/goods/detail', { goodsId })
-      },
-
-      // 订单提交
-      onSubmitOrder() {
-        const app = this
-        if (app.disabled) {
-          return false
-        }
-        // 表单验证
-        if (!app.onVerifyFrom()) {
-          return false
-        }
-        // 按钮禁用
-        app.disabled = true
-        // 请求api
-        getCheckoutApi(app.options.mode)
-          .submit(app.options.mode, app.getFormData())
-          .then(result => {
-            // 订单创建成功
-            const orderId = result.data.orderId
-            // 判断订单是否已支付: 已支付跳转订单列表  未支付跳转支付页
-            if (result.data.isPaySuccess) {
-              app.showToast(result.message, 1500)
-              setTimeout(() => app.$navTo('pages/order/index', {}, 'redirectTo'), 1500)
-            } else {
-              // 订单未支付: 跳转到订单支付页
-              setTimeout(() => app.$navTo('pages/checkout/cashier/index', { orderId }, 'redirectTo'), 100)
-            }
-          })
-          .catch(res => app.showToast(res.errMsg, 3000))
-          .finally(() => setTimeout(() => app.disabled = false, 1600))
-      },
-
-      // 表单提交的数据
-      getFormData() {
-        const app = this
-        const { options } = app
-        // 表单数据
-        const form = {
-          delivery: app.curDelivery,
-          couponId: app.selectCouponId || 0,
-          isUsePoints: app.isUsePoints ? 1 : 0,
-          remark: app.remark || '',
-        }
-        // 获取不同模式的参数
-        const modeParam = getModeParam(options.mode, options)
-        return { ...form, ...modeParam }
-      },
-
-      // 表单验证
-      onVerifyFrom() {
-        const app = this
-        if (app.hasError) {
-          app.showToast(app.errorMsg, 3000)
-          return false
-        }
-        return true
-      },
-
-      // 显示toast信息
-      showToast(title, duration = 2000) {
-        this.$refs.uToast.show({ title, duration })
-      }
 
     }
   }

pages/goods/components/SkuPopup.vue

@@ -145,11 +145,16 @@
       buyNow(selectShop) {
         // 跳转到订单结算页
         this.$navTo('pages/checkout/index', {
-          mode: 'buyNow',
+            mode: 'buyNow',
+          goods: encodeURIComponent(JSON.stringify([{
           goodsId: selectShop.goods_id,
           goodsSkuId: selectShop.goods_sku_id,
-          goodsNum: selectShop.buy_num
+          goodsNum: selectShop.buy_num,
-        })
+          title: selectShop.goods_name,
+          image: selectShop.image,
+          price: selectShop.price,
+          buy_num: selectShop.buy_num
+         }]))})
         // 隐藏当前弹窗
         this.onChangeValue(false)
       }