update 售后、合伙人绑定二维码

xuxueyang

2024-07-29 33988b65f7818207e4cf2686cb9be46e3976958c

 pages/order/order.vue

@@ -1,315 +1,212 @@
<script>
export default {
  data() {
    return {
      type: 'customer',
      query: {
        status: '',
      },
      status: [
        {name: '全部', value: ''},
        {name: '待付款', value: 'PENDING'},
        {name: '待发货', value: 'SEND'},
        {name: '待收货', value: 'RECEIVE'},
        {name: '待评价', value: 'EVALUATE'},
        {name: '已完成', value: 'COMPLETED'},
        {name: '已退款', value: 'REFUND'},
      ]
    };
  },
  onLoad(options) {
    this.query.status = options.status || ''
    this.listApi = `/api/customer/order/list`
    this.getList()
  },
  onReachBottom() {
    this.page.current += 1
    this.getMore()
  },
  async onPullDownRefresh() {
    this.page.current = 1
    await this.getList()
    uni.stopPullDownRefresh()
  },
  methods: {
    toDetail(item) {
      //  订单详情页面
     console.log(' toDetail item',item)
      uni.navigateTo({
        url: '/pages/order/order-detail?id=' + item.id
      })
    },
  },
}
</script>
<template>
   <view>
      <!-- 团购、粗去玩、深夜食堂、挖宝商品 -->
      <view style="position: fixed;left: 0;right: 0;top: 0;background-color: #fff;height: 84rpx;z-index: 999;">
         <top-tabs :tabs="tabs" :flg.sync="tabIndex" @change="changeTab"></top-tabs>
  <view class="order-container">
    <view class="order-top">
      <view class="title">订单信息</view>
      <view class="flex">
        <image class="image img100"
               src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/67/67acf980f310460a97d305c6ffc7e811位图@2x (1).png"></image>
        <view>消费订单：￥<span class="m-r-10">{{ '0' }}</span> 总消费：￥<span>{{ '0' }}</span></view>
      </view>
    </view>
    <view class="status-list m-t-12 flex flex-wrap-normal">
      <view v-for="each of status" :key="each.value"
            @click.stop="(e)=>{
              query.status = each.value || '';
              refreshList();
            }"
            class="status-each" :class="[query.status===each.value?'cur':'']">
        {{ each.name }}
      </view>
    </view>
    <no-data v-if="!list||list.length===0" style="width: 100%;" class="m-t-12"></no-data>
    <view v-for="(item,index) in list" :key="index" class="m-t-12">
      <view @click.stop="toDetail(item)" class="order-item list-item">
        <view class="title flex">
          <view>
            订单：{{ item.orderNo }}
          </view>
          <view class="status t-red m-l-a m-r-0">￥{{ item.paymentAmount || item.totalAmount || '0'}}</view>
        </view>
        <view class="desc flex" v-if="!query.status">
          <view class="label">
            订单状态:
          </view>
          <view class="value">{{ item.statusBackendStr }}</view>
        </view>
        <view class="desc flex">
          <view class="label">
            收货人:
          </view>
          <view class="value">{{ item.customer }}</view>
        </view>
        <view class="desc flex">
          <view class="label">
            收货人手机号码:
          </view>
          <view class="value">{{ item.customerTel }}</view>
        </view>
        <view class="desc flex">
          <view class="label">
            收货地址:
          </view>
          <view class="value">{{ item.customerAddress }}</view>
        </view>
        <view class="desc flex">
          <view class="label">
            支付时间:
          </view>
          <view class="value">{{ item.paymentTime }}</view>
        </view>
      </view>

      </view>
      <view style="height: 100rpx;"></view>
      <!-- 根据tab不同显示不同信息 -->
    </view>

      <!-- 根据不同加载不同的继续的底部 -->
      <view style="min-height: calc(100vh - 200rpx);">
         <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
         <view v-if="type=='shop'" class="order-container">
            <card-list-item source="order" :type="type" :dto="item" v-for="(item,index) in list" @refresh="refresh"
               :key="index"></card-list-item>
         </view>
         <view v-if="type=='travel'" class="order-container">
            <card-list-item source="order" :type="type" :dto="item" v-for="(item,index) in list" @refresh="refresh"
               :key="index"></card-list-item>
         </view>
         <view v-if="type=='canteen'" class="order-container">
            <!-- 时间，状态 -->
            <view class="order-item good-item" v-for="(item,index) in list" :key="index">
               <view class="flex ">
                  <view class="time">下单: {{item.createdDate}}</view>
                  <view class="status">{{item.statusStr}}</view>
               </view>

               <view class="flex">
                  <!-- overfi -->
                  <scroll-view class="flex scroll-view" :scroll-x="true" style="max-width: 500rpx;"
                     v-if="item.items">
                     <view v-for="each of item.items" class="item-each">
                        <image :src="each.cover" class="cover"></image>
                        <!-- 文字缩写 -->
                        <view class="cover-name word-e">{{each.name}}</view>
                     </view>
                  </scroll-view>
                  <view style="min-width: 100rpx;margin-left: auto;">
                     <view class="price"><span class="dot">￥</span>{{item.totalAmount||'0.0'}}</view>
                     <view class="num-tip">共{{getItemsNum(item.items)||0}}件</view>
                  </view>
               </view>
               <!--    <view class="address">
                  {{item.customerAddress}}
               </view> -->
               <view class="infos">
                  <view class="flex">
                     <view class="info-user-name flex flex1">
                        <uni-icons type="person-filled" class="icon"></uni-icons>
                        {{item.customer}}
                     </view>
                     <view class="info-user-tel flex flex1">
                        <uni-icons type="phone-filled" class="icon"></uni-icons>
                        {{item.customerTel}}
                     </view>
                  </view>
                  <view class="info-user-address flex">
                     <uni-icons type="location-filled" class="icon"></uni-icons>
                     {{item.customerAddress}}
                  </view>

               </view>
               <view class="buttons">
                  <view class="button-wuliu button" v-if="item.status=='PENDING'||item.status==='PREPAYMENT'"
                     @click.stop="toPay(item)">支付订单</view>
                  <view class="button-wuliu button" v-if="item.status=='PENDING'||item.status==='PREPAYMENT'"
                     @click.stop="cancelPay(item)">取消订单</view>

                  <view class="button-shouhuo button" @click.stop="toOrderDetail(item)">订单详情</view>
               </view>
            </view>
            <!-- 货物单 -->
            <!-- 地址 -->
         </view>
         <view v-if="type=='good'" class="order-container">
            <view class="order-item good-item" v-for="(item,index) in list" :key="index">
               <view class="flex ">
                  <view class="time">下单: {{item.createdDate}}</view>
                  <view class="status">{{item.statusStr}}</view>
               </view>
               <view class="flex">
                  <image class="cover" :src="item.items[0].cover"></image>
                  <view>
                     <view class="name">{{item.items[0].name}}</view>
                     <!-- <view>介绍尺码</view> -->
                     <view class="price"><span class="dot">￥</span>{{item.totalAmount||'0.0'}}</view>
                  </view>
               </view>
               <view class="infos">
                  <view class="info-user-name flex">
                     <uni-icons type="person-filled" class="icon"></uni-icons>
                     {{item.customer}}
                  </view>
                  <view class="info-user-tel flex">
                     <uni-icons type="phone-filled" class="icon"></uni-icons>
                     {{item.customerTel}}
                  </view>
                  <view class="info-user-address flex">
                     <uni-icons type="location-filled" class="icon"></uni-icons>
                     {{item.customerAddress}}
                  </view>

               </view>
               <view class="buttons">
                  <view class="button-wuliu button" v-if="item.status=='PENDING'||item.status==='PREPAYMENT'"
                     @click.stop="toPay(item)">支付订单</view>
                  <view class="button-wuliu button" v-if="item.status=='PENDING'||item.status==='PREPAYMENT'"
                     @click.stop="cancelPay(item)">取消订单</view>

                  <!-- <view class="button-shouhuo button"  v-if="item.status!=='PENDING'&&item.status!=='PREPAYMENT'||true">查看物流</view> -->
                  <view class="button-shouhuo button" @click.stop="toOrderDetail(item)">订单详情</view>

                  <!-- <view class="button-shouhuo button"  v-if="item.status!=='PENDING'&&item.status!=='PREPAYMENT'">确认收货</view> -->
               </view>

            </view>
         </view>
      </view>

      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

   </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            type: '',
            tabIndex: 1,
            query: {

            },
            tabs: [{
                  name: '团购',
                  id: 'shop',
                  api: '/api/buy/customer/group/list/mine'
               },
               {
                  name: '粗去玩',
                  id: 'travel',
                  api: '/api/trip/customer/list/mine'
               },
               {
                  name: '每日维C',
                  id: 'canteen',
                  api: '/api/canteen/customer/order/list'

               },
               {
                  name: '挖宝商品',
                  id: 'good',
                  api: '/api/wabao/customer/order/list'

               },
            ],
         }
      },
      onLoad(options) {
         this.type = options.type || ''
         var index = -1
         for (var item of this.tabs) {
            index++
            if (item.id == this.type) {
               this.tabIndex = index
               this.listApi = item.api
               break
            }
         }
         this.refresh()


      },
      onReachBottom() {
         this.page.current += 1
         this.getMore()
      },
      methods: {
         toOrderDetail(row) {
            var url = `/pages/order/bussiness-order/bussincess-order-detail?source=user&type=${this.type}`
            if (this.type == 'travel') {
               url += `&id=${row.id}&userId=${this.currentInfo.id}`
            } else {
               url += `&id=${row.id}`
            }
            uni.navigateTo({
               url: url
            })
         },
         async cancelPay(item) {
            if (!this.currentInfo.id) {
               await this.$message.confirm('未登录，前往登录?')
               uni.navigateTo({
                  url: '/pages/user/user'
               })
               return
            }
            await this.$message.confirm('是否确认取消支付?')
            this.$message.showLoading()
            const orderInfo = await this.$http.request('post', '/api/order/cancel/' + (item.orderId ||
               item.id || ''), {

            })
            this.$message.hideLoading()
            if (code == 0) {
               this.$message.showToast('取消成功')
               this.dto.status = 'COMPLETED'
               this.dto.statusStr = '已取消'
               setTimeout(() => {
                  that.refresh()
               }, 500)
            }

         },
         async toPay(item) {
            if (!this.currentInfo.id) {
               this.$message.showToast('请先登陆')
               return
            }
            if (item.status === 'PENDING' || item.status === 'PREPAYMENT') {
               if (this.type == 'canteen') {
                  const orderInfo = await this.$http.request('get', '/api/canteen/customer/payment/' + item
                     .id, {})
                  //支付准备
                  var info = orderInfo.data
                  let that = this
                  wx.requestPayment({
                     ...info,
                     success(res) {
                        console.log('pay success', res)
                        that.$message.showToast('支付成功')
                        setTimeout(() => {
                           that.refresh()
                        }, 500)
                     },
                     fail(err) {
                        console.error('pay fail', err)
                        that.$message.showToast('支付失败')
                     }
                  })

               } else {
                  // this.$message.showToast('等待接口，请联系开发者')
                  // return
                  this.$message.showLoading()
                  const orderInfo = await this.$http.request('post', '/api/order/pay/again/' + (item.orderId ||
                     item.id || ''), {

                  })
                  var info = orderInfo.data || {}
                  this.$message.hideLoading()
                  if (code == 0) {
                     let that = this
                     wx.requestPayment({
                        ...info,
                        success(res) {
                           console.log('pay success', res)
                           that.$message.showToast('支付成功')
                           item.status = 'PAYMENT'
                           item.statusStr = '已支付'
                           setTimeout(() => {
                              that.refresh()
                           }, 500)
                        },
                        fail(err) {
                           console.error('pay fail', err)
                           that.$message.showToast('支付失败')
                        }
                     })
                  }
               }

            } else {
               this.$message.showToast('请不要重复支付')
               return
            }
         },
         getItemsNum(arr) {
            var a = 0
            if (arr) {
               for (var item of arr) {
                  a += item.num || 0
               }
            }

            return a
         },
         refresh() {
            //获取
            console.log('refresh')
            this.page.current = 1
            this.getList()
         },
         changeTab(e) {
            this.type = this.tabs[e].id
            console.log('this.type', this.type, this.tabs, e)

            this.list = []
            for (var item of this.tabs) {
               if (item.id == this.type) {
                  this.listApi = item.api
                  break
               }
            }
            this.refresh()
         },
      }
   }
</script>

<style lang="scss" scoped>
   @import './order.scss'
</style>
.order-container {
  padding: 24rpx 30rpx;
  .order-item {
    margin-bottom: 20rpx;
    padding: 28rpx;
   background-color: #fff;
   border-radius: 8rpx;

    .title {
      font-weight: 600;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
      .status {
        font-weight: 400;
        font-size: 28rpx;
        color: #20613D;
        line-height: 40rpx;
      }
    }
    .desc{
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 34rpx;
    }


    .line {
      height: 2rpx solid #EEEEEE;
      margin-top: 16rpx;
      margin-bottom: 16rpx;
    }


 }

  .status-list {
    overflow-x: scroll;

    .status-each {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
      margin: 0 auto;
      //min-width: ;
      // padding-left: 10rpx;
      // padding-right: 10rpx;
      width: fit-content;
      min-width: 120rpx;
      text-align: center;
    }

    .status-each.cur {
      font-weight: 600;
      font-size: 32rpx;
      color: #20613D;
      // line-height: 44rpx;
    }

    .status-each:first-child {
      margin-left: 0
    }

    .status-each:last-child {
      margin-right: 0;
    }
  }

  .order-top {
    position: relative;
    min-height: 182rpx;
    background: #E1F0E7;
    border-radius: 8rpx;
    padding: 45rpx 35rpx;

    .title {
      font-weight: 600;
      font-size: 30rpx;
      color: #000000;
      line-height: 42rpx;
    }

    .desc {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 34rpx;
    }

    .image {
      position: absolute;
      right: 0rpx;
      width: 288rpx;
      height: 148rpx;
      bottom: 0rpx;
    }
  }
}
</style>