微信支付

src/api/common.js

@@ -19,8 +19,20 @@ export function getGoodsSpecs(data) {
   return httpRequest.post('/api/shop/commodity/spu/spec/value/search', data)
 }
 /**
- * 创建订单
+ * 支付下单
  */
 export function createOrder(data) {
   return httpRequest.post('/api/shop/order/add', data)
+}
+/**
+ * 查询支付状态
+ */
+export function checkPayStatus(data) {
+  return httpRequest.post('/api/shop/pay/order/callback', data)
+}
+/**
+ * 查询订单
+ */
+export function getOrderList(data) {
+  return httpRequest.post('/api/shop/order/range/search', data)
 }
\ No newline at end of file

src/components/TagSelection.vue

@@ -47,6 +47,7 @@ export default {
             price: item.price
           }
         })
+        console.log(this.list)
       },
       immediate: true,
       deep: true

src/pages/buy/components/BuyPopup.vue

@@ -11,7 +11,7 @@
     </div>
     <van-field label="规格" class="tag-item">
       <template #input>
-        <tag-selection v-model="spec" :data="specList" :options="{ label: 'spec_values', value: 'spec_value_ids'}" @currentSelected="handleTagSelected"/>
+        <tag-selection v-model="spec" :data="specList" :options="{ label: 'spec_values', value: 'sku_id'}" @currentSelected="handleTagSelected"/>
       </template>
     </van-field>
     <van-form :show-error="false" @submit="handleSuccess">
@@ -117,6 +117,7 @@ export default {
     handleTagSelected(val) {
       this.price = val.price
       this.surplus = val.stock
+      this.spec = val.value
     },
     handleSuccess(val) {
       const fields = []
@@ -131,7 +132,7 @@ export default {
         spu_id: this.spu_id,
         sku_id: this.spec,
         buy_count: this.form.count,
-        payment_method: '8',
+        payment_method: '3',
         app_button_text: JSON.stringify(fields)
       }
       this.$emit('placeOrder', params)
@@ -172,7 +173,7 @@ export default {
       getGoodsSpecs(params).then(res => {
         this.specList = res.data
         const [first = {}] = res.data
-        this.spec = first.spec_value_ids
+        this.spec = first.sku_id
         this.price = first.price
         this.surplus = first.stock
       })

src/pages/buy/index.vue

@@ -48,9 +48,10 @@
 <script>
 import BuyPopup from './components/BuyPopup.vue'
 import PhoneCodeLoginPopup from '@/components/PhoneCodeLoginPopup.vue'
-import { getGoodsList, getShopList, createOrder } from '@/api/common.js'
+import { getGoodsList, getShopList, createOrder, checkPayStatus } from '@/api/common.js'
 import store from '@/store'
 import { mapGetters } from 'vuex'
+import { Dialog } from 'vant'
 export default {
   components: { BuyPopup, PhoneCodeLoginPopup },
   data() {
@@ -62,7 +63,8 @@ export default {
       imgList: [],
       shopInfo: {},
       popupOptions: {},
-      orderInfo: {}
+      orderInfo: {},
+      payment_order_id: ''
     }
   },
   computed: {
@@ -75,11 +77,24 @@ export default {
     },
     shop_id () {
       return this.query.shop_id || '6800681447305773056'
+    },
+    isBackFormWxPay () {
+      return window.sessionStorage.getItem('isBackFormWxPay')
     }
   },
   beforeMount() {
     this.fetchGoodsDetails()
     this.fetchShopDetails()
+    if (this.isBackFormWxPay) {
+      Dialog.alert({
+        title: '支付确认',
+        message: '确认已经完成微信支付',
+        theme: 'round-button'
+      }).then(() => {
+        this.fetchCheckPayStatus()
+      })
+      window.sessionStorage.removeItem('isBackFormWxPay')
+    }
   },
   methods: {
     handleVideoClick() {
@@ -108,6 +123,7 @@ export default {
       const params = Object.assign({}, this.orderInfo)
       params.customer_id = this.user.id
       params.customer_phone = this.user.phone || ''
+      params.buy_count = (params.buy_count).toString()
       console.log(params)
       this.fetchPlaceOrder(params)
     },
@@ -145,8 +161,16 @@ export default {
     },
     fetchPlaceOrder(params) {
       createOrder(params).then(res => {
-        console.log(res)
+        if (res.code === 0 && res.payment_url) {
+          window.sessionStorage.setItem('isBackFormWxPay', 1)
+          window.sessionStorage.setItem('payment_order_id', res.payment_order_id)
+          window.location.href = res.payment_url
+        }
       })
+    },
+    fetchCheckPayStatus() {
+      const id = window.sessionStorage.getItem('payment_order_id') || ''
+      checkPayStatus({ payment_order_id: id }).then(res => {})
     }
   }
 }

src/pages/order/index.vue

@@ -18,19 +18,26 @@
     </van-tabs>
     <ul class="order-list">
       <li class="order-item" v-for="item in list" :key="item.id">
-        <div class="thumb">
-          <img :src="item.thumb">
-        </div>
         <div class="content">
-          <div class="status-row">{{item.status | statusFilter}}</div>
-          <div class="title-row">
-            <div class="title van-ellipsis">{{item.spu_name}}</div>
-            <div class="price">￥{{item.price}}</div>
+          <div class="thumb">
+            <img :src="item.thumb">
           </div>
-          <div class="spec-row">
-            <p class="spec">{{item.spec}}</p>
+          <div class="right">
+            <div class="status-row">{{item.status | statusFilter}}</div>
+            <div class="title-row">
+              <div class="title van-ellipsis">{{item.spu_name}}</div>
+              <div class="price">￥{{item.price}}</div>
+            </div>
+            <div class="spec-row">
+              <div class="spec">{{item.spec}}</div>
+              <div>×{{item.num}}</div>
+            </div>
+            <div class="sum_pay">需付款￥{{item.sum_pay}}</div>
           </div>
-          <div class="sum_pay">需付款￥{{item.sum_pay}}</div>
+        </div>
+        <div class="pay_bar" v-if="item.status === 0">
+          <p><span>更多</span></p>
+          <van-button plain round type="primary" size="mini" color="#C01540">付款</van-button>
         </div>
       </li>
     </ul>
@@ -85,46 +92,71 @@ export default {
 }
 .order-item{
   background:#fff;
-  position:relative;
-  box-sizing:border-box;
-  padding:4vw 0 4vw 30vw;
-  height:36vw;
-  margin-top:15px;
-  border-radius:3px;
-  .thumb{
-    width:26vw;
-    height:26vw;
-    position:absolute;
-    left:0;
-    top:5vw;
-    img{
-      width:80%;
-      display:block;
-      margin:10% auto;
-    }
-  }
   .content{
-    display:flex;
-    flex-direction:column;
-    height:100%;
-    padding-right:10px;
-    .status-row{
-      line-height:0.48rem;
-      color:#C01540;
-      text-align:right;
+    position:relative;
+    box-sizing:border-box;
+    padding:4vw 0 2vw 30vw;
+    height:36vw;
+    margin-top:15px;
+    border-radius:3px;
+    .thumb{
+      width:26vw;
+      height:26vw;
+      position:absolute;
+      left:0;
+      top:5vw;
+      img{
+        width:80%;
+        display:block;
+        margin:10% auto;
+      }
     }
-    .title-row{
-      line-height:30px;
-      flex:1;
+    .right{
       display:flex;
-      .price{
-        font-size:13px;
+      flex-direction:column;
+      height:100%;
+      padding-right:10px;
+      .status-row{
+        line-height:0.48rem;
+        color:#C01540;
+        text-align:right;
       }
-      .title{
-        font-size:14px;
+      .title-row{
+        line-height:30px;
         flex:1;
+        display:flex;
+        .price{
+          font-size:13px;
+        }
+        .title{
+          font-size:14px;
+          flex:1;
+        }
       }
+      .spec-row{
+        color:#9B9B9B;
+        display:flex;
+        .spec{
+          flex:1;
+        }
+      }
+      .sum_pay{
+        text-align:right;
+        line-height:26px;
+      }
+    }
+  }
+  .pay_bar{
+    display:flex;
+    padding:0 10px 10px;
+    p{
+      flex:1;
+      text-align:left;
+    }
+    .van-button{
+      width:70px;
     }
   }
 }
+
 </style>
\ No newline at end of file

src/store/modules/user.js

@@ -2,7 +2,8 @@ import { getUser, logout } from '@/api/account'
 const user = {
   state: {
     user: {},
-    isLogin: false
+    isLogin: false,
+    isWxBrowser: /micromessenger/.test(navigator.userAgent)
   },
 
   mutations: {