update

src/api/common.js

@@ -31,8 +31,14 @@ 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)
+}
+/**
+ * 查询订单列表
+ */
+export function getOrderDetails(data) {
+  return httpRequest.post('/api/shop/order/search', data)
 }
\ No newline at end of file

src/pages/buy/components/BuyPopup.vue

@@ -50,11 +50,6 @@ export default {
   data() {
     return {
       popupVisiable: false,
-      goodsBuyInfo: {
-        thumb: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-h5/goods_01.png',
-        price: '350.00',
-        surplus: 20
-      },
       thumb: '',
       price: '',
       surplus: 0,
@@ -72,6 +67,10 @@ export default {
         email: (val) => {
           if (val === '') return true
           return /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/.test(val);
+        },
+        idCard: (val) => {
+          if (val === '') return true
+          return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val) || /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/.test(val)
         }
       }
     }
@@ -133,6 +132,7 @@ export default {
         sku_id: this.spec,
         buy_count: this.form.count,
         product_price: this.price,
+        payment_money: (parseFloat(this.price) * parseInt(this.form.count)).toFixed(2),
         app_button_text: JSON.stringify(fields)
       }
       this.$emit('placeOrder', params)
@@ -150,12 +150,15 @@ export default {
         this.$set(this.form, field.key, '')
         if (item.type === 'text' && item.multiple) {
           field.type = 'textarea'
-        } else if (['email', 'phone'].includes(item.type)) {
+        } else if (['email', 'phone', 'id'].includes(item.type)) {
           field.validator = this.validatorMap[item.type]
           let errorMsg = '邮箱格式有误'
           if (item.type === 'phone') {
             field.type = 'tel'
             errorMsg = '手机格式有误'
+          } else if (item.type === 'id') {
+            field.type = 'text'
+            errorMsg = '身份证格式有误'
           }
           field.errorMsg = errorMsg
         } else if (item.type === 'number') {

src/pages/buy/index.vue

@@ -67,7 +67,8 @@ export default {
       popupOptions: {},
       payment_order_id: '',
       payment_method: '12',
-      order_params: ''
+      order_params: '',
+      order_details_url: window.location.origin + '/order-details'
     }
   },
   computed: {
@@ -85,7 +86,7 @@ export default {
       return window.sessionStorage.getItem('isBackFormPay')
     },
     openId () {
-      return window.localStorage.getItem('openId') // 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
+      return window.localStorage.getItem('openId') || 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
     }
   },
   beforeMount() {
@@ -127,7 +128,6 @@ export default {
       const isLogin = store.state.isLogin || (await store.dispatch('checkLogin'))
       if (isLogin) {
         if (this.isWxBrowser) {
-          console.log(1234)
           this.payment_method = '3'
         }
         this.popupVisiable = true
@@ -142,6 +142,7 @@ export default {
       params.customer_phone = this.user.phone || ''
       params.buy_count = (params.buy_count).toString()
       params.payment_method = this.payment_method
+      params.redirect_url = encodeURIComponent(this.order_details_url)
       if (this.payment_method === '3') {
         params.open_id = this.openId
       }
@@ -225,12 +226,14 @@ export default {
         // 微信外微信h5支付和支付宝网页支付
         window.sessionStorage.setItem('isBackFormH5Pay', 1)
         window.sessionStorage.setItem('payment_order_id', res.payment_order_id)
+        window.sessionStorage.setItem('order_detail_id', res.order_detail_id)
         window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(window.location.href)
       } else if (payType === '12') {
         // 支付宝网页支付
         window.sessionStorage.setItem('isBackFormH5Pay', 1)
         window.sessionStorage.setItem('payment_order_id', res.payment_order_id)
-        window.location.href = res.payment_url
+        window.sessionStorage.setItem('order_detail_id', res.order_detail_id)
+        // window.location.href = res.payment_url
       }
     }
   }

src/pages/home/index.vue

@@ -114,7 +114,7 @@ export default {
   background:#fff;
   position:relative;
   box-sizing:border-box;
-  padding:0.2rem 0 0.2rem 3rem;
+  padding:0.2rem 0 0.2rem 2.1rem;
   height:2rem;
   margin-bottom:0.3rem;
   border-radius:0.06rem;

src/pages/order/order-details.vue

+<template>
+  <div class="order_details main-container">
+    <div class="goods-item">
+      <div class="thumb">
+        <img :src="imgJsonParse(details.chart_oss)">
+      </div>
+      <div class="content">
+        <p class="title van-ellipsis">{{details.spu_name}}</p>
+        <div class="top">
+          <div class="price">￥<span>{{details.product_price}}</span></div>
+          <div class="right-tag">×{{details.buy_count}}</div>
+        </div>
+      </div>
+    </div>
+    <van-cell-group>
+      <van-cell title="订单编号" :value="details.order_detail_id" />
+      <van-cell title="下单时间" :value="details.pay_time" />
+      <van-cell title="支付方式" :value="payType" />
+      <van-cell title="商品总额" :value="`￥${details.payment_money}`" />
+      <van-cell title="支付状态" :value="orderStatus" />
+    </van-cell-group>
+    <div class="bottom-bar" v-if="orderStatus === '待付款'">
+      <van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">立即购买</van-button>
+    </div>
+  </div>
+</template>
+<script>
+import { getOrderDetails } from '@/api/common'
+const payTypeMap = {
+  0: '',
+  3: '微信支付',
+  4: '微信支付',
+  12: '支付宝支付'
+}
+const orderStatusMap = { 1: '待付款', 2: '待发货', 3: '已发货', 4: '已完成', 5: '已关闭', 6: '售后' }
+export default {
+  data() {
+    return {
+      order_detail_id: '6806478305244479488',
+      details: {}
+    }
+  },
+  computed: {
+    orderDetailId() {
+      return window.localStorage.getItem('order_detail_id') || '6806478305244479488'
+    },
+    payOrderId() {
+      return window.localStorage.getItem('payment_order_id') || '6806478305244479488'
+    },
+    payType() {
+      const payTypeCode = (this.details.payment_method) || 0
+      return payTypeMap[payTypeCode]
+    },
+    orderStatus() {
+      const index = this.details.order_status
+      return orderStatusMap[index]
+    }
+  },
+  created() {
+    this.fetchOrderDetails()
+  },
+  methods: {
+    imgJsonParse(val) {
+      if (typeof val === 'string' && typeof JSON.parse(val) === 'object') {
+        const [first = {}] = JSON.parse(val)
+        return first.url
+      } else {
+        return ''
+      }
+    },
+    fetchOrderDetails() {
+      getOrderDetails({ order_detail_id: this.order_detail_id }).then(res => {
+        if (res.code === 0 && Array.isArray(res.data)) {
+          const [first = {}] = res.data
+          this.details = first
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.order_details{
+  padding-top:0.3rem;
+}
+.goods-item{
+  background:#fff;
+  position:relative;
+  box-sizing:border-box;
+  padding:0.2rem 0 0.2rem 2.1rem;
+  height:2rem;
+  margin-bottom:0.3rem;
+  border-radius:0.1rem;
+  cursor: pointer;
+  .thumb{
+    width:2rem;
+    height:2rem;
+    position:absolute;
+    left:0;
+    top:0;
+    img{
+      width:80%;
+      height:80%;
+      display:block;
+      margin:10% auto;
+    }
+  }
+  .content{
+    display:flex;
+    flex-direction:column;
+    height:100%;
+    padding-right:0.2rem;
+    .top{
+      line-height:0.6rem;
+      flex:1;
+      display:flex;
+      .price{
+        color:#C01540;
+        font-size:0.24rem;
+        flex:1;
+        span{
+          font-size:0.4rem;
+        }
+      }
+      .right-tag{
+        font-size:0.26rem;
+        color:#b5b5b5;
+      }
+    }
+    .title{
+      line-height:0.64rem;
+      font-size:0.28rem;
+    }
+  }
+}
+.van-cell-group{
+  border-radius:0.1rem;
+  overflow: hidden;
+}
+.van-cell{
+  ::v-deep.van-cell__title{
+    flex: unset;
+  }
+}
+.bottom-bar{
+  margin-top:0.3rem;
+  padding:0.2rem 0.8rem;
+  background:#fff;
+  .van-button{
+    height:0.64rem;
+    line-height:0.64rem;
+    font-size:0.24rem;
+  }
+}
+</style>
\ No newline at end of file

src/router/routes.js

@@ -30,6 +30,12 @@ export default [
     name: 'Order',
     component: () => import('../pages/order/index.vue')
   },
+  /* 订单详情 */
+  {
+    path: '/order-details',
+    name: 'OrderDetails',
+    component: () => import('../pages/order/order-details.vue')
+  },
   /* 如果所有页面都没找到 - 指向 */
   { path: '*', component: () => import('@/components/errorPages/404.vue') }
 ]