代金券订单列表+详情+若干 bug

api/shop.js

@@ -3,7 +3,7 @@ import request from './request';
 export default {
   category:()=>request.get('/api/merchant-categories'),
   list(category_id,longitude,latitude){
-    const data = {longitude,latitude};
+    const data = {};
     if(category_id){
       data.category_id = category_id;
     }

api/user.js

@@ -33,7 +33,15 @@ export default {
     list:()=>request.get('/api/order/user/list'),
     cancel:(orderid)=>request.post(`/api/order/${orderid}/user/cancel`),
     merchantList:()=>request.get('/api/merchant/order/user'),
-    merchantDetail:(order_id)=>request.get(`/api/merchant/order/${order_id}`),
+    merchantDetail(order_id,longitude,latitude){
+      const data = {};
+      if(longitude&&latitude){
+        data.longitude = longitude;
+        data.latitude = latitude;
+      }
+      return request.get(`/api/merchant/order/${order_id}`,data);
+    },
+    orderQRCode:(order_id)=>request.get(`/api/merchant/order/${order_id}/verify-qrcode`),
     detail:(orderid)=>request.get(`/api/order/${orderid}`)
   },
   coupon:{

app.js

@@ -7,9 +7,6 @@ App({
       key:'accessToken',
       success:(res)=>{
         this.globalData.accessToken = res.data;
-        if(res.data){
-          this.getUserInfo();
-        }
       }
     })
   },

components/merchantOrder/index.js

@@ -0,0 +1,68 @@
+import shopApi from '../../api/shop';
+import userApi from '../../api/user';
+
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    calculatedPrice:{},
+    product:{},
+    isShowConfirm:false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    preOrder(product){
+      shopApi.calculateOrderPrice(product.id).then((data)=>{
+        this.setData({
+          calculatedPrice:data,
+          product,
+          isShowConfirm:true
+        });
+      })
+    },
+    getOrder(){
+      shopApi.order(this.data.product.id).then((data)=>{
+        userApi.createPayment(data.order_id,'PRODUCT').then((data)=>{
+          this.triggerEvent('orderCreated');
+          wx.requestPayment({
+            timeStamp:data.payment_params.timeStamp,
+            nonceStr:data.payment_params.nonceStr,
+            package:data.payment_params.package,
+            signType:data.payment_params.signType,
+            paySign:data.payment_params.paySign,
+            success:(res)=>{
+              console.log(res);
+              wx.navigateTo({
+                url: '/pages/shop/success/index',
+              })
+            },
+            fail:(res)=>{
+              console.log(res);
+            }
+          })
+        });
+      }).catch((error)=>{
+        this.setData({
+          isShowConfirm:false
+        })
+        wx.showModal({
+          title: error.message,
+          showCancel:false,
+          complete: (res) => {
+          }
+        })
+      });
+    },
+  }
+})

components/merchantOrder/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "styleIsolation": "shared"
+}

components/merchantOrder/index.wxml

@@ -0,0 +1,22 @@
+<page-container show="{{isShowConfirm}}" round close-on-slide-down>
+  <view class="content pc-content">
+    <view class="title">{{product.name}}</view>
+    <view class="tags">
+      <view class="tag" wx:for="{{product.tags}}" 
+          wx:for-item="tag" wx:for-index="tIndex" wx:key="tIndex">{{tag}}</view>
+    </view>
+    <view class="spliter"></view>
+    <view class="price">
+      <view class="left">
+        <label class="key">团购价</label>
+        <label class="money">{{calculatedPrice.amount}}</label>
+      </view>
+      <view class="right">
+        <label class="key">赠送蜂蜜</label>
+        <label class="weight">{{calculatedPrice.gift_points}}克</label>
+      </view>
+    </view>
+
+    <button class="button" type="primary" bind:tap="getOrder">立即抢购</button>
+  </view>
+</page-container>

components/merchantOrder/index.wxss

@@ -0,0 +1,31 @@
+.pc-content{
+  padding:60rpx 30rpx 0 30rpx;
+}
+.pc-content .title{
+  font-size: 40rpx;
+  font-weight: 500;
+}
+.pc-content .tags{
+  margin-top:20rpx;
+}
+.pc-content .spliter{
+  margin:40rpx 0;
+}
+.pc-content .price{
+  display: flex;
+  justify-content: space-between;
+}
+.pc-content .price .key{
+  font-size: 28rpx;
+  margin-right: 12rpx;
+}
+.pc-content .price .money{
+  font-size: 44rpx;
+}
+.pc-content .price .weight{
+  font-size: 44rpx;
+  color:#FFC300;
+}
+.pc-content .button{
+  margin:54rpx 0 50rpx;
+}

components/shopItem/index.js

@@ -5,7 +5,7 @@ Component({
    * 组件的属性列表
    */
   properties: {
-    data:{
+    shop:{
       type:Object,
       value:{}
     }
@@ -22,5 +22,10 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    goToDetail(event){
+      wx.navigateTo({
+        url: `/pages/shop/detail/index?id=${this.properties.shop.id}`,
+      })
+    },
   }
 })

components/shopItem/index.wxml

@@ -1,21 +1,21 @@
-<view class="page-container shop-item">
+<view class="page-container shop-item" bind:tap="goToDetail">
-  <image class="logo" src="{{data.optimized_brand_image_url}}"/>
+  <image class="logo" src="{{shop.optimized_brand_image_url}}"/>
   <view class="content">
-    <view class="line1">{{data.name}}</view>
+    <view class="line1">{{shop.name}}</view>
     <view class="line2">
-      <view class="line2-1">{{data.address}}</view>
+      <view class="line2-1">{{shop.address}}</view>
-      <view class="line2-2">{{data.distance||''}}</view>
+      <view class="line2-2">{{shop.distance||''}}</view>
     </view>
     <view class="promation buy">
       <view class="coupon">
         <label class="tag">[在线买单]</label>
-        <label class="detail">赠送蜂蜜{{data.pay_gift_points_rate}}%</label>
+        <label class="detail">赠送蜂蜜{{shop.pay_gift_points_rate}}%</label>
       </view>
     </view>
     <view class="promation">
-      <view class="coupon" wx-if="{{data.featured_product}}">
+      <view class="coupon" wx:if="{{shop.featured_product}}">
-        <label class="tag">[{{data.featured_product.promotion_text}}]</label>
+        <label class="tag">[{{shop.featured_product.promotion_text}}]</label>
-        <label class="detail">{{data.featured_product.product_name}}</label>
+        <label class="detail">{{shop.featured_product.product_name}}</label>
       </view>
     </view>
   </view>

pages/help/index/index.wxss

@@ -1,5 +1,5 @@
 .bg{
-  background: linear-gradient(180deg, #1A4DEB 62%, #F8F9FB 100%);
+  background: linear-gradient(180deg, #FEC400 62%, #F8F9FB 100%);
   height:90vw;
   width:100%;
   position:absolute;

pages/order/detail-group/index.js

@@ -1,4 +1,5 @@
 import userApi from '../../../api/user';
+const app = getApp();
 
 Page({
 
@@ -6,7 +7,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    orderDetail:{}
+    orderDetail:{},
+    qrcodeUrl:''
   },
 
   goToSuccess(){
@@ -29,13 +31,34 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    userApi.order.merchantDetail(options.id).then((data)=>{
+    app.getLocation().then((data)=>{
+      this.getOrderDetail(options.id,data.longitude,data.latitude);
+    }).catch(()=>{
+      this.getOrderDetail(options.id);
+    });
+    userApi.order.orderQRCode(options.id).then((data)=>{
+      this.setData({
+        qrcodeUrl:data.qrcode_url
+      })
+    });
+  },
+  getOrderDetail(id,lng,lat){
+    userApi.order.merchantDetail(id,lng,lat).then((data)=>{
+      if(data.distance){
+        if(data.distance>=1000){
+          data.distance = parseFloat(data.distance/1000).toFixed(1)+'km';
+        }else{
+          data.distance+='m';
+        }
+      }
+      if(data.product_tags){
+        data.product_tags = data.product_tags.split(',');
+      }
       this.setData({
         orderDetail:data
       })
-    })
+    });
   },
-
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/order/detail-group/index.wxml

@@ -3,22 +3,21 @@
     <view class="center">
       <view class="name">{{orderDetail.product_name}}</view>
       <view class="tags">
-        <view class="tag">周一至周五可用</view>
+        <view class="tag" wx:for="{{orderDetail.product_tags}}" wx:key="index">{{item}}</view>
-        <view class="tag">免预约</view>
       </view>
     </view>
     <view class="money money-normal">{{orderDetail.order_amount}}</view>
   </view>
   <view class="spliter dashed"></view>
   <view class="qrcode" bind:tap="goToSuccess">
-    二维码区域，小程序存储总量限制
+    <image src="{{qrcodeUrl}}" class="image"/>
   </view>
 </view>
 
 <view class="page-container address">
   <view class="left">
     <view class="text1">{{orderDetail.merchant_name}}</view>
-    <view class="text2">距离 xxx km</view>
+    <view class="text2">距离{{orderDetail.distance}}</view>
   </view>
   <view class="right location">
     <view class="icon-con">
@@ -52,10 +51,6 @@
     <view class="key">交易方式</view>
     <view class="value">微信支付</view>
   </view>
-  <view class="kv">
-    <view class="key">手机号码</view>
-    <view class="value">{{}}</view>
-  </view>
   <view class="kv">
     <view class="key">下单时间</view>
     <view class="value">{{orderDetail.create_time}}</view>

pages/order/detail-group/index.wxss

@@ -29,6 +29,10 @@
   margin: 0 auto;
   background-color: #999;
 }
+.prd-info .qrcode .image{
+  width:100%;height:100%;
+  vertical-align: middle;
+}
 
 .address{
   display: flex;

pages/order/index/index.js

@@ -30,13 +30,32 @@ Page({
       url: `/pages/order/detail/index?id=${orderId}`,
     })
   },
+  goToShopDetail(event){
+    const item = event.currentTarget.dataset.item;
+    //缺少 shopid
+    // wx.navigateTo({
+    //   url: `/pages/shop/detail/index?id=${item.id}`,
+    // })
+  },
   goToCouponDetail(event){
     const id = event.currentTarget.dataset.id;
     wx.navigateTo({
       url: `/pages/order/detail-group/index?id=${id}`,
     })
   },
-
+  orderAgain(event){
+    const order = event.currentTarget.dataset.item;
+    const orderConfirm = this.selectComponent("#merchantOrderConfirm");
+    orderConfirm.preOrder({
+      id:order.merchant_product_id,
+      name:order.product_name,
+      tags:order.product_tags
+    });
+  },
+  orderCreated(){
+    //创建成功之后刷新 order 列表，成功之后会跳转，不用刷新
+    this.loadMerchantOrderList();
+  },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -64,6 +83,11 @@ Page({
   loadMerchantOrderList(){
     //代金券列表
     userApi.order.merchantList().then((data)=>{
+      data.map((item)=>{
+        if(item.product_tags){
+          item.product_tags = item.product_tags.split(',');
+        }
+      })
       this.setData({
         couponList:data
       })

pages/order/index/index.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "nav-bar":"/components/navbar"
+    "nav-bar":"/components/navbar",
+    "merchant-order":"/components/merchantOrder"
   },
   "navigationStyle": "custom"
 }

pages/order/index/index.wxml

@@ -38,7 +38,7 @@
 </view>
 <view class="bill-list" wx:if="{{tabIndex==1}}" wx:for="{{merchantOrderList}}" wx:key="index">
   <view class="item">
-    <image class="image" src="{{item.product_image}}"/>
+    <image class="image" src="{{item.merchant_image}}"/>
     <view class="name">{{item.merchant_name}}</view>
     <view class="amount">-{{item.amount}}</view>
     <view class="kv">
@@ -68,27 +68,26 @@
   </view>
 </view>
 <view class="group-list" wx:if="{{tabIndex==2}}">
-  <view class="item status-waiting" wx:for="{{couponList}}" wx:key="index" bind:tap="goToCouponDetail" data-id="{{item.order_id}}">
+  <view class="item" wx:for="{{couponList}}" wx:key="index" bind:tap="goToCouponDetail" data-id="{{item.order_id}}">
     <view class="head">
-      <view class="name">
+      <view class="name" capture-catch:tap="goToShopDetail" data-item="{{item}}">
         <label>{{item.merchant_name}}</label>
         <image class="icon" src="/assets/icon/order/right-arrow@2x.png"/>
       </view>
-      <view class="status">{{merchantOrderStatusKV[item.status]}}</view>
+      <view class="status {{item.status}}">{{merchantOrderStatusKV[item.status]}}</view>
     </view>
     <view class="content">
       <view class="center">
         <view>{{item.product_name}}</view>
         <view class="tags">
-          <view class="tag">周一至周五可用</view>
+          <view class="tag" wx:for="{{item.product_tags}}" wx:key="index">{{item}}</view>
-          <view class="tag">免预约</view>
         </view>
       </view>
       <view class="money money-normal">{{item.order_amount}}</view>
     </view>
     <view class="btns">
-      <button class="button button1" plain size="mini">再来一单</button>
+      <button class="button button1" plain size="mini" capture-catch:tap="orderAgain" data-item="{{item}}">再来一单</button>
-      <button class="button button2" plain size="mini">查看券码</button>
+      <button class="button button2" plain size="mini" wx:if="{{item.status==merchantOrderStatus.unverified}}">查看券码</button>
     </view>
   </view>
 </view>
@@ -96,3 +95,6 @@
   <image class="icon" src="/assets/icon/order/empty@2x.png"/>
   <view class="text">暂无相关订单</view>
 </view>
+
+
+<merchant-order id="merchantOrderConfirm" bind:orderCreated="orderCreated"/>

pages/order/index/index.wxss

@@ -94,11 +94,14 @@
 .group-list .item{
   background-color: #fff;
   border-radius: 18rpx;
-  padding: 30rpx 40rpx;
+  padding: 20rpx 40rpx;
   margin:24rpx 0;
 }
-.group-list .item.status-waiting .status{
+.group-list .item .status{
-  color: #1A4DEB;
+  color:var(--main-color);
+}
+.group-list .item .status.VERIFIED,.group-list .item .status.REFUNDED{
+  color:var(--main-font-color);
 }
 .group-list .head{
   display: flex;
@@ -109,6 +112,7 @@
   flex:1;
   display: flex;
   align-items: center;
+  padding:10rpx 0;
 }
 .group-list .head .name .icon{
   width:28rpx;height:28rpx;
@@ -117,7 +121,7 @@
 
 .group-list .content{
   display: flex;
-  margin-top:30rpx;
+  margin-top:20rpx;
 }
 .group-list .content .image{
   width:160rpx;height:160rpx;
@@ -138,8 +142,11 @@
   padding:16rpx 26rpx;
   border-radius: 12rpx;
 }
+.group-list .btns .button1{
+  color: #555555;
+  border-color: rgba(153, 153, 153, 0.5);
+}
 .group-list .btns .button2{
-  color: #1A4DEB;
   margin-left: 20rpx;
 }
 

pages/shop/detail/index.js

@@ -19,47 +19,11 @@ Page({
 
   showConfirm(event){
     const currentProduct = event.currentTarget.dataset.item;
-    shopApi.calculateOrderPrice(currentProduct.id).then((data)=>{
+    const orderConfirm = this.selectComponent("#merchantOrderConfirm");
-      this.setData({
+    orderConfirm.preOrder(currentProduct);
-        calculatedPrice:data,
-        currentProduct,
-        isShowConfirm:true
-      });
-    })
-  },
-  getOrder(){
-    shopApi.order(this.data.currentProduct.id).then((data)=>{
-      userApi.createPayment(data.order_id,'PRODUCT').then((data)=>{
-        wx.requestPayment({
-          timeStamp:data.payment_params.timeStamp,
-          nonceStr:data.payment_params.nonceStr,
-          package:data.payment_params.package,
-          signType:data.payment_params.signType,
-          paySign:data.payment_params.paySign,
-          success:(res)=>{
-            console.log(res);
-            wx.navigateTo({
-              url: '/pages/shop/success/index',
-            })
-          },
-          fail:(res)=>{
-            console.log(res);
-          }
-        })
-      });
-    }).catch((error)=>{
-      this.setData({
-        isShowConfirm:false
-      })
-      wx.showModal({
-        title: error.message,
-        showCancel:false,
-        complete: (res) => {
-        }
-      })
-    });
   },
   
+
   /**
    * 生命周期函数--监听页面加载
    */
@@ -82,11 +46,13 @@ Page({
   },
   getOrderDetail(id,lng,lat){
     shopApi.detail(id,lng,lat).then((data)=>{
-      if(data.distance&&data.distance>=1000){
+      if(data.distance){
+        if(data.distance>=1000){
           data.distance = parseFloat(data.distance/1000).toFixed(1)+'km';
         }else{
           data.distance+='m';
         }
+      }
       this.setData({
         detail:data
       });

pages/shop/detail/index.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "nav-bar":"/components/navbar"
+    "nav-bar":"/components/navbar",
+    "merchant-order":"/components/merchantOrder"
   },
   "navigationStyle": "custom"
 }

pages/shop/detail/index.wxml

@@ -26,7 +26,7 @@
   <view class="address">
     <view class="left">
       <view class="l1">{{detail.address}}</view>
-      <view class="l2" wx-if="{{detail.distance}}">距离{{detail.distance}}</view>
+      <view class="l2" wx:if="{{detail.distance}}">距离{{detail.distance}}</view>
     </view>
     <view class="right">
       <view class="icon-con">
@@ -76,26 +76,4 @@
   </view>
 </view>
 
-
+<merchant-order id="merchantOrderConfirm"/>
-<page-container show="{{isShowConfirm}}" round close-on-slide-down>
-  <view class="content pc-content">
-    <view class="title">{{currentProduct.name}}</view>
-    <view class="tags">
-      <view class="tag" wx:for="{{currentProduct.tags}}" 
-          wx:for-item="tag" wx:for-index="tIndex" wx:key="tIndex">{{tag}}</view>
-    </view>
-    <view class="spliter"></view>
-    <view class="price">
-      <view class="left">
-        <label class="key">团购价</label>
-        <label class="money">{{calculatedPrice.amount}}</label>
-      </view>
-      <view class="right">
-        <label class="key">赠送蜂蜜</label>
-        <label class="weight">{{calculatedPrice.gift_points}}克</label>
-      </view>
-    </view>
-
-    <button class="button" type="primary" bind:tap="getOrder">立即抢购</button>
-  </view>
-</page-container>

pages/shop/detail/index.wxss

@@ -187,34 +187,4 @@
   padding:18rpx 46rpx;
   margin-left:40rpx;
 }
-.pc-content{
+
-  padding:60rpx 30rpx 0 30rpx;
-}
-.pc-content .title{
-  font-size: 40rpx;
-  font-weight: 500;
-}
-.pc-content .tags{
-  margin-top:20rpx;
-}
-.pc-content .spliter{
-  margin:40rpx 0;
-}
-.pc-content .price{
-  display: flex;
-  justify-content: space-between;
-}
-.pc-content .price .key{
-  font-size: 28rpx;
-  margin-right: 12rpx;
-}
-.pc-content .price .money{
-  font-size: 44rpx;
-}
-.pc-content .price .weight{
-  font-size: 44rpx;
-  color:#FFC300;
-}
-.pc-content .button{
-  margin:54rpx 0 50rpx;
-}

pages/shop/index/index.js

@@ -22,12 +22,6 @@ Page({
     this.setData({tabIndex})
     this.loadList(cid);
   },
-  goToDetail(event){
-    const item = event.currentTarget.dataset.item;
-    wx.navigateTo({
-      url: `/pages/shop/detail/index?id=${item.id}`,
-    })
-  },
   loadList(cid){
     shopApi.list(cid,this.data.lng,this.data.lat).then((data)=>{
       data.items.map((item)=>{

pages/shop/index/index.wxml

@@ -13,8 +13,8 @@
 </view>
 
 <view class="shop-list">
-  <block wx-if="{{shopList.length>0}}">
+  <block wx:if="{{shopList.length>0}}">
-    <shop-item wx:for="{{shopList}}" data="{{item}}" data-item="{{item}}" bind:tap="goToDetail" wx:key="index">
+    <shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
       
     </shop-item>
   </block>

pages/shop/success/index.js

@@ -1,4 +1,6 @@
 import shopApi from '../../../api/shop';
+const app = getApp();
+
 Page({
 
   /**
@@ -12,7 +14,23 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    shopApi.list().then((data)=>{
+    app.getLocation().then((res)=>{
+      this.getProductList(res.longitude,res.latitude);
+    }).catch(()=>{
+      this.getProductList();
+    })
+  },
+  getProductList(lng,lat){
+    shopApi.list(null,lng,lat).then((data)=>{
+      data.items.map((item)=>{
+        if(item.distance){
+          if(item.distance>=1000){
+            item.distance = parseFloat(item.distance/1000).toFixed(1)+'km';
+          }else{
+            item.distance+='m';
+          }
+        }
+      });
       this.setData({
         shopList:data.items
       });

pages/shop/success/index.wxml

@@ -4,7 +4,7 @@
   <button class="button" plain bind:tap="back">前往查看订单</button>
 </view>
 <view class="shop-list">
-  <shop-item wx:for="{{shopList}}" data="{{item}}" data-item="{{item}}" bind:tap="goToDetail" wx:key="index">
+  <shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
       
     </shop-item>
 </view>