订单详情页面调整

src/api/client/order.js

@@ -60,3 +60,19 @@ export function orderDetailGoodApi(id, data) {
     },
   });
 }
+
+/**
+ * 订单接口 - 取消订单
+ * @returns
+ */
+
+export function cancelOrder(id) {
+  return request({
+    url: `/maintain/cancelOrder/${id}`,
+    method: 'get',
+    header: {
+      'content-type': 'application/json',
+    },
+  });
+}
+

src/components/settleBottomBtn/settleBottomBtn.vue

@@ -40,40 +40,52 @@
       allPrice() {
         let sum = 0
         this.goodsCateList.map(rs => {
-          sum += Number((rs.price).toFixed(2))
+          sum += Number((rs.price).toFixed(2) * rs.quantity)
         })
         console.log('@@@@sum', sum);
         return sum
       },
       allNumb() {
-        return this.goodsCateList.length
+        let allNumber = 0
+        this.goodsCateList.map(rs=>{
+          allNumber += Number(rs.quantity)
+        })
+        return allNumber
       }
     },
     methods: {
       // 结算按钮
       handlerSettleBtn() {
-        this.goodsCateList.map(rs => {
-          addShoppingCart(rs).then(res => {
-            if (res.code == 200) {
-              wx.showLoading({
-                title: '结算中',
-              })
-            } else {
-              uni.showToast({
-                title: res.message,
-                icon: 'none'
-              })
-              return
-            }
+        // this.goodsCateList.map(rs => {
+        //   addShoppingCart(rs).then(res => {
+        //     if (res.code == 200) {
+        //       wx.showLoading({
+        //         title: '结算中',
+        //       })
+        //     } else {
+        //       uni.showToast({
+        //         title: res.message,
+        //         icon: 'none'
+        //       })
+        //       return
+        //     }
+        //   })
+        // })
+        // setTimeout(()=>{
+        //   wx.hideLoading()
+        //   this.goodsCateList = []
+        if(this.goodsCateList.length == 0){
+          uni.showToast({
+            title:'请添加购物车',
+            icon:'none'
           })
-        })
-        setTimeout(()=>{
-          wx.hideLoading()
-          this.goodsCateList = []
+          return
+        }else{
           uni.navigateTo({
           	url:`/pages/client/clientPackage/uptickOrder?ids=${this.ids}`
           })
-        },1500)
+        }
+        // },1500)
       }
     }
   }

src/pages.json

@@ -127,6 +127,12 @@
             "navigationBarTitleText": "我的订单"
           }
         },
+        {
+          "path": "orderDetail",
+          "style": {
+            "navigationBarTitleText": "订单详情"
+          }
+        },
         {
           "path": "chatRoom/chat",
           "style": {

src/pages/client/clientPackage/orderAll.vue

@@ -5,22 +5,53 @@
     </u-sticky>
 
     <!-- 订单 -->
-    <view>
-      <view v-if="init_list.length > 0"> 1111111111 </view>
-      <view v-else style="margin-top: 40rpx">
-        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
+    <view class="order">
+      <view class="order-box">
+        <view class="order-item" v-for="(item,index) of init_list" :key='index' @click="handlerSkipDetail(item)">
+          <view class="order-top">
+            <view class="top-left"> 订单号：{{ item.orderSn }} </view>
+            <view class="top-right"> {{ type }} </view>
+          </view>
+
+          <u-line margin='20rpx 0'></u-line>
+
+          <view class="order-center">
+            <view class="center-left">
+              <image class="left-img" src="@/static/QR57a.jpg"></image>
+            </view>
+
+            <view class="center-right">
+              <view class="right-title">
+                {{ item.goodsInfo.goodsName }}
+              </view>
+              <view class="right-title">
+                Ceshi 111
+              </view>
+              <view class="right-price">
+               <view class="price"> ￥{{ item.goodsInfo.goodsPrice }} </view>
+               <view class="numb"> x {{ item.goodsInfo.realAmount }} </view>
+              </view>
+            </view>
+          </view>
+          <view class="u-border-bottom">
+            <button @click.stop='handlerCancelOrder(item)'>取消订单</button>
+          </view>
+        </view>
       </view>
+      <!-- <view v-else style="margin-top: 40rpx">
+        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
+      </view> -->
     </view>
   </view>
 </template>
 
 <script>
-import { userOrdersApi , getUserOrderList } from '@/api/client/order';
+import { userOrdersApi , getUserOrderList , cancelOrder } from '@/api/client/order';
 export default {
   data() {
     return {
       current: 0,
-      type: 'ALL',
+      type: 0,
       size: 20,
       // 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
       list: [
@@ -69,16 +100,95 @@ export default {
         status:orderStatus,
         paging: '1,20',
       });
-      console.log("@@@@res",res);
-      // if ((res.code = 200 && res.data)) {
-      //   this.init_list = res.data;
-      // }
+      if ((res.code = 200 && res.data)) {
+       this.init_list = res.data.records;
+      }
+    },
+
+    // 跳转到订单详情
+    handlerSkipDetail(e){
+      console.log('@@@@e',e);
+      uni.navigateTo({
+        url:`/pages/client/clientPackage/orderDetail?orderList=${e}`
+      })
     },
+    // 取消订单
+    handlerCancelOrder(e){
+      cancelOrder(e.id).then(res=>{
+        console.log('###res',res);
+        if(res.code == 200){
+          uni.showToast({
+            title:'取消成功',
+            icon:'none'
+          })
+          this.userOrdersPage(this.type)
+        }else{
+          console.log('###res',res);
+        }
+      })
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+  .order{
+    .order-box{
+      padding: 20rpx;
+      .order-item{
+        border-radius: 20rpx;
+        padding: 20rpx;
+        margin-bottom: 20rpx;
+        background-color: #fff;
+        box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
+        .order-top{
+          display: flex;
+          justify-content: space-between;
+          .top-left{
+            font-size: 26rpx;
+            color: #C7C7C7;
+          }
+          .top-right{
+            font-size: 28rpx;
+            color: #C54E55;
+          }
+        }
+
+        .order-center{
+          display: flex;
+          .center-left{
+            margin-right: 20rpx;
+            width: 30%;
+            .left-img{
+              width: 200rpx;
+              height: 200rpx;
+              border-radius: 20rpx;
+            }
+          }
+
+          .center-right{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            width: 70%;
+            .right-title{
+
+            }
+            .right-price{
+              display: flex;
+              justify-content: space-between;
+              .price{
+
+              }
+              .numb{
+
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 ::deep .u-tabs__wrapper__nav__item__text {
   font-size: 30px;
 }

src/pages/client/clientPackage/orderDetail.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="container">
+    {{ init_list }}
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+        init_list:null
+      }
+    },
+    onLoad(e){
+      this.init_list = JSON.parse(e.orderList)
+    }
+  }
+</script>
+
+<style>
+</style>

src/pages/client/clientPackage/storeDetail.vue

@@ -2,12 +2,11 @@
   <view class="detail">
     <!-- 轮播图 -->
     <view class="carousel-map">
-      <u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular  bgColor="#ffffff"
-        height="190" />
+      <u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular bgColor="#ffffff" height="190" />
       <view class="carousel-item">
         <view class="mark">
           <view class="mark-item">{{ merchant.score }}分</view>
-          <u-rate count="5" v-model="merchant.score"  active-color="#fff" readonly inactive-color="#fff" :size="12" />
+          <u-rate count="5" v-model="merchant.score" active-color="#fff" readonly inactive-color="#fff" :size="12" />
         </view>
         <view class="good-item">近期有6266个购买者给了给好评</view>
       </view>
@@ -96,7 +95,7 @@
 
     <!-- 底部购物车 -->
     <view class="bottom-box">
-      <settleBottomBtn :goodsCateList.sync='goodsCateList' :ids='ids'/>
+      <settleBottomBtn :goodsCateList.sync='goodsCateList' :ids='ids' />
     </view>
 
     <!-- 弹窗 -->
@@ -127,11 +126,19 @@
 </template>
 
 <script>
-  import { getSellsDetail, addReservation , addShoppingCart  } from '@/api/client/business.js';
-  import { getCurrentLocation, hotMerchant } from '@/api/client/home';
+  import {
+    getSellsDetail,
+    addReservation,
+    addShoppingCart,
+    getCartList
+  } from '@/api/client/business.js';
+  import {
+    getCurrentLocation,
+    hotMerchant
+  } from '@/api/client/home';
   import settleBottomBtn from "@/components/settleBottomBtn/settleBottomBtn.vue"
   export default {
-    components:{
+    components: {
       settleBottomBtn
     },
     data() {
@@ -143,8 +150,8 @@
           'https://cdn.uviewui.com/uview/swiper/swiper2.png',
           'https://cdn.uviewui.com/uview/swiper/swiper1.png'
         ],
-        categoryList:[], // 分类列表
-        goodsCateList:[],
+        categoryList: [], // 分类列表
+        goodsCateList: [],
         queryParams: {
           //请求参数
           id: null, //商家ID
@@ -160,7 +167,7 @@
           appointTime: '',
         },
         template_time: '',
-        ids:null // 商家id
+        ids: null // 商家id
       };
     },
     onLoad(option) {
@@ -168,6 +175,14 @@
       this.queryParams.id = option.id;
       this.handlerInitLocation();
     },
+    onShow() {
+      getCartList(this.ids).then(res => {
+        console.log('getCartList', res);
+        if(res.data.cartItems.length){
+          this.goodsCateList = res.data.cartItems
+        }
+      })
+    },
     watch: {
       reserve_show(newValue) {
         if (!newValue) {
@@ -209,8 +224,8 @@
           longitude: 119.13279,
         };
         // getCurrentLocation(point).then(rc => {
-          this.queryParams.region = 370705;
-          this.handlerInitList();
+        this.queryParams.region = 370705;
+        this.handlerInitList();
         // });
       },
       // 初始化列表
@@ -224,9 +239,7 @@
         // 获取锚点
         hotMerchant(this.queryParams.id).then();
 
-        addShoppingCart({merchantId:this.ids}).then(res=>{
-          console.log('addShoppingCart',res);
-        })
+
       },
       // 点击拨打电话
       handlerMakeCall() {
@@ -301,21 +314,31 @@
         }
       },
       // 收藏按钮
-      handlerFavouriteShop(){
+      handlerFavouriteShop() {
 
       },
       // 添加购物车
-      handlerAddCart(e){
+      handlerAddCart(e) {
         let params = {
-          merchantId:this.ids,
-          goodsId:e.id,
-          quantity:1,
-          price:e.specialPrice,
-          goodsName:e.name,
-          goodsPic:e.logo, // 这个没了
+          merchantId: this.ids,
+          goodsId: e.id,
+          quantity: 1,
+          price: e.specialPrice,
+          goodsName: e.name,
+          goodsPic: e.logo,
           // goodsSubTitle:this.goods.description
         }
-        this.goodsCateList.push(params)
+        addShoppingCart(params).then(res => {
+          if(res.code == 200){
+            this.goodsCateList.push(params)
+          }else{
+            uni.showToast({
+              title:res.msg,
+              icon:'none'
+            })
+            return
+          }
+        })
       },
       formatter(type, value) {
         if (type === 'minute') {
@@ -337,7 +360,7 @@
 
 <style lang="scss" scoped>
   .detail {
-    min-height: calc( 100vh - 200rpx );
+    min-height: calc(100vh - 200rpx);
     background-color: #efefef;
     padding-bottom: 200rpx;
   }
@@ -461,11 +484,11 @@
       margin: 10rpx 0 10rpx;
       color: #333;
       font-size: 36rpx;
-      .item-text-left{
 
-      }
-      .item-text-right{
-        .img{
+      .item-text-left {}
+
+      .item-text-right {
+        .img {
           width: 50rpx;
           height: 50rpx;
         }
@@ -483,6 +506,7 @@
       .star {
         display: flex;
         align-items: center;
+
         .line {
           margin: 0 12rpx;
           margin-top: 5rpx;
@@ -526,15 +550,18 @@
 
       .btn-box {
         display: flex;
+
         .btn {
           font-size: 26rpx;
         }
+
         .btn1 {
           border-radius: 40rpx 0 0 40rpx;
           border: 2rpx solid #ec5729;
           color: #ec5729;
           background-color: #fff;
         }
+
         .btn2 {
           color: #fff;
           background-color: #ec5729;
@@ -569,7 +596,7 @@
         border-width: 0.5px !important;
         border-color: #dadbde !important;
         border-style: solid;
-        padding:12rpx 12rpx 18rpx 18rpx;
+        padding: 12rpx 12rpx 18rpx 18rpx;
         border-radius: 8rpx;
       }
     }
@@ -593,7 +620,7 @@
     background-color: #fff;
   }
 
-  .bottom-box{
+  .bottom-box {
     width: 100%;
     position: fixed;
     bottom: 5%;

src/pages/client/clientPackage/uptickOrder.vue

@@ -41,7 +41,7 @@
 							<view class="text-number">×{{ item.quantity }}</view>
 							<view class="price-box">
 								<p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p><span
-									class="false-price">￥{{ item.originalPrice }}</span>
+									class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
 							</view>
 						</view>
 					</view>