pk-mall/src/view/user/order/list/index.vue

<template>
  <div class="login-wrapper">
    <RightSliderBar/>

    <el-dialog v-model="evaluateFlag" :show-close="true" align-center title="评价商品">
      <el-input style="font-size: 16px"   v-model="textarea"
                :rows="5"
                type="textarea"
                placeholder="请留下您宝贵的意见…">

      </el-input>
      <div class="buttons" @click="submits">确认</div>
    </el-dialog>
    <div>
      <indexHeaders/>
    </div>
    <div class="register">
      <div class="register-left">
        <CentreNav :navIndexs="0"/>
      </div>
      <div class="register-content">
        <div class="collect-tops">
          <div class="icons">
            <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/order-icon.png">
          </div>
          <div>我的订单</div>
        </div>

        <div class="evaluate-nav">
          <div class="evaluate-nav-view" :data-id="index" @click="clickTap(index,item.id)" v-for="(item,index) in evaluateNav" :key="index">
            <div>{{item.name}}</div>
            <div class="line" v-show="nacIndex==index"></div>
          </div>

        </div>
        <div class="tops">
          <div class="tops-order-text">订单详情</div>
          <div class="tops-order-text2">金额</div>
          <div class="tops-order-text2">
            <span>状态</span>
            <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/screen-icon.png" width="12" style="margin-left: 5px">
          </div>
          <div class="tops-order-text2">操作</div>
        </div>
        <div class="news-no" v-if="newsList.arr==''">
          <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/news-no-bg6.png">
          <div>暂无订单信息</div>
        </div>
        <div style="height:20px"></div>
        <div  v-for="(item,index) in newsList.arr" :key="index">
          <div class="list" @click="details(item.id)" v-if="item.info[0]">
            <div >
              <div class="list-tops">
                <div class="list-time">{{ detailTime(item.create_time) }}</div>
                <div class="orderNo">订单号：{{item.order_no}}</div>
              </div>
              <div class="evaluate-goods">
                <div class="order-info">
                  <div class="order-img">
                    <img  :src="item.info[0].logo">
                  </div>
                  <div class="order-name overflow2">{{item.info[0].goods_name}}{{item.info[0].sku_name}}</div>
                </div>
                <div class="order-money color-s">¥{{ item.amount_pay }}</div>
                <!-- <div class="order-status order-money" :class="'class'+item.status" v-if="item.status!=10&&item.status!=20">{{status[item.status]}}</div> -->
                <div class="order-status order-money" :class="'class'+item.status" v-if="item.status!=10&&item.status!=20">{{item.info[0].refunds[0]? item.info[0].refunds[0].refund_status_text: status[item.status]}}</div>
                <div  v-if="item.status==10 || item.status==20" class="order-status order-money" :class="'class'+item.status" style="line-height: 0;padding: 30px 0">
                  <div>
                    {{status[item.status]}}
                  </div>
                  <div @click.stop="logistics_orders(item)" style="margin-top: 30px;color: #5D7FCF;cursor: pointer">
                    查看物流
                  </div>



                </div>

                <div>

                </div>
                <div class=" order-money " style="border-right: none;line-height: normal">
<!--                  <div @click.stop="logistics_orders(item)" >查看物流</div>-->
           <div v-if="item.status==30">
             <div class="download"  @click.stop="details(item.id)" style="margin-top:60px;color: #999;font-size: 12px;">查看详情</div>

           </div>
          <div style="margin: 30px 0 10px 0" v-if="item.status==0">
            <div class="download"  @click.stop="details(item.id)" style="margin:-10px 0 10px 0;color: #999;font-size: 12px;">查看详情</div>
            <div  class="size" style="font-size: 12px;cursor: pointer;" @click.stop="cancels(item.id)">取消订单</div>
            <div class="order-button" style="margin-top: 10px;" @click.stop="orderPay(item)" v-if="item.status==0">立即支付</div>
          </div>
				  <div v-if="item.status==10">
            <div class="download" @click.stop="details(item.id)" style="margin-top:18px;color: #999;font-size: 12px;">查看详情</div>
            <div class="download" @click.stop="windowHref(item.contract_link)" style="margin-top:10px;color: #999;font-size: 12px;">合同下载</div>
					  <div class="order-button" @click.stop="commits(item.id)" style="margin-top: 10px;" >确认收货</div>
					  <!-- <div class="download" v-if="item.status==5 || item.status==10 || item.status==20" @click.stop="donwload(item.contract_link)" style="margin-top: 40px;color: #999;font-size: 12px;">合同下载</div> -->
				  </div>
				  <div v-if="item.status==5">
            <div class="download" @click.stop="details(item.id)" style="margin-top:45px;color: #999;font-size: 12px;">查看详情</div>

            <div @click.stop="windowHref(item.contract_link)" class="download"  style="margin-top:10px;color: #999;font-size: 12px;">合同下载</div>
<!--					  <div class="order-button" @click.stop="commits(item.id)" style="margin-top: 10px;" >确认收货</div>-->
				  </div>
				  <div v-if="item.status==20">
            <div class="download" @click.stop="details(item.id)" style="margin-top:15px;color: #999;font-size: 12px;">查看详情</div>
            <div @click.stop="windowHref(item.contract_link)" class="download" style="margin-top:10px;color: #999;font-size: 12px;cursor: pointer;">合同下载</div>
						  <div class="download"  @click.stop="download(item.tax_link)" :style="item.tax_link==null?'color:#999':'color:#4171B3'" style="margin-top:5px;font-size: 12px;cursor: pointer;">发票下载</div>
						  <div class="order-button" @click.stop="clickTaps(item.info[0].goods_id,item.info[0].order_id)" style="margin-top: 10px" v-if="item.is_evaled==false">去评价</div>
            </div>
                </div>
              </div>
            </div>
            <div class="fixeds" v-if="item.status==10 || item.status==20">
              <div class="logistts" v-if="lr_id==item.id">
                <div class="close-s" @click.stop="expressFlag=false;lr_id='';logistics.arr='';">
                  <img src="@/assets/img/close-icons.png" alt="">
                </div>
                <div class="name" style="color: #999;font-size: 14px">{{ item.logistics.com.name }}:
                  {{item.logistics.trans_no}}
                <text style="float: right;margin-right: 30px;color: #333;cursor: pointer" @click.stop="openMap(item.id)">查看轨迹</text>

                </div>
                <div class="logiFlexs" v-for="(item,index) in logistics.arr" v-if="logistics.arr!='' && logistics.arr.length>1" :key="index">
                  <div style="display: flex;padding-bottom: 5px" >
                    <div class="border-s color-ss" v-if="index==0"></div>
                    <div class="border-s " v-else></div>
                    <div class="overflow name-s"  :class="index==0?'colors':''">{{item.content}}</div>
                  </div>
                  <div class="name-s" style="margin-left: 15px;margin-top: 5px;padding-bottom: 0" :class="index==0?'colors':''">{{item.time}}</div>
                </div>
                <div class="logiFlex_s" v-if="logistics.arr.length==1 && logistics.arr!=''">
                  <div style="display: flex;">
                    <div class="border-s "></div>
                    <div class="overflow name-s" style="padding-bottom: 0" :class="index==0?'colors':''">暂无物流信息</div>
                  </div>
                  <div class="name-s" :class="index==0?'colors':''">{{item.time}}</div>
                </div>
                <div style="display: flex;margin-top: 10px">
                  <div class="border-s color-ss" v-if="index==0"></div>
                  <div class="border-s " v-else></div>
                  <div>以上为最新跟踪信息<span style="color: #5C7ECE;margin-left: 10px">查看全部</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pages">
          <el-pagination
              v-if="totalNumber>10"
              background
              layout="prev, pager, next"
              :total="totalNumber"
              class="mt-4"
              :page-size="limit"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>

    </div>
  </div>
  <Footer/>
</template>

<script setup>
import { provide, reactive, ref,onMounted} from 'vue'
import CentreNav from '@/components/User/CentreNav.vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'
import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import {detailTime, getUrlParams2, isLogin} from "@/utils";
import {
  cancel_order,
  commit,
  creates,
  goods_cart_del, logistics_map,
  logistics_order,
  oderList,
  orderEval,
  user_lsp
} from "@/api/menu1";
import {useRouter} from "vue-router";
import {router} from "@/router";
import { ElMessage, ElMessageBox } from 'element-plus'

let logistics=reactive({
  arr:[]
})
let userlogistics=reactive({
  arr:[]
})
//记录访问次数
if(localStorage.getItem('USER__INFO__')){
  user_lsp().then((res)=>{
  })
}
let refs=ref([
  {"content":"快件到达【山东省临沂市兰山区】","time":"2022-11-12 10:19:00"},
  {"content":"快件到达【山东省临沂市兰山区】","time":"2022-11-12 10:19:00"}
])
let expressFlag=ref(false)

const guide = ref(['资讯中心'])
let page=ref(1)
let limit=ref(10)
let totalNumber=ref(null)
let guideIndex =ref(0)
let goodsIds=ref('')
let evaluateFlag=ref(false)
let textarea=ref('')
let orderIds=ref('')
let status_index=ref('')
const donwload=(href)=>{
	window.location.href=href;
}
const windowHref=(url,fileName)=>{
	const elink = document.createElement('a')
	  elink.href = url
	  elink.setAttribute('download', '合同')
	  elink.style.display = 'none'
	  document.body.appendChild(elink)
	  setTimeout(() => {
	    elink.click()
	    document.body.removeChild(elink)
	  }, 66)
}
 const downloadIamge=(imgsrc,name)=> {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    }
    // 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
   const downs=(index)=> {
      // 主要是为了名字不重复
      var name = new Date().getTime();
      downloadIamge(txImg.value, `${name}`);
    }
const evaluateNav = [
  {
    "name":"全部订单",
    "id":-1,
  },
  {
    "name":"待付款",
    "id":0,
  },
  {
    "name":"待发货",
    "id":5,
  },
  {
    "name":"待收货",
    "id":10,
  },
  {
    "name":"已完成",
    "id":20,
  },
  {
    "name":"已取消",
    "id":30,
  },
  {
    "name":"售后",
    "id":40,
  }
]
const status= {
  "0" : '待支付',
  "5" : '待发货',
  "10" : '待收货',
  "20" : '已完成',
  "30" : '已取消',
  "40" : '退款退货',
}
const download=(url)=>{
  // console.error(url)
  if(url==null){
    ElMessage.error('发票尚未上传')
    return;
  }
  // window.open(url)
  	//实例化一个img对象
  	const img = new Image();
  	//设置img的图片路径
  	img.src = url;
  	//设置跨域解决
  	img.setAttribute('crossOrigin', 'Anonymous');
  	//img加载完后处理
  	img.onload = function() {
  		//创建一个canvas对象
          const canvas = document.createElement('canvas')
          //把图片的宽度设为canves的宽度
          canvas.width = img.width
          //把图片的高度设为canves的高度
          canvas.height = img.height
          //创建一个2d画布
          const ctx = canvas.getContext('2d')
          // 将img中的内容画到画布上
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          // 将画布内容转换为Blob
          canvas.toBlob((blob) => {
              // blob转为同源url
              let blobUrl = window.URL.createObjectURL(blob)
              // 创建a链接
              const a = document.createElement('a')
              a.href = blobUrl
              a.download = ''
              // 触发a链接点击事件，浏览器开始下载文件
              a.click()
          })
      }
}
const handleCurrentChange=(size)=>{
  page.value=size
  orderLists()
}
let nacIndex = ref(0)
const clickTap = (index,id) =>{
  expressFlag.value=false;
  lr_id.value=false
  nacIndex.value=index;
  status_index.value=id;

  page.value=1;

  setTimeout(()=>{
	  orderLists()
  },50)
}
const newsList =reactive({
  arr:[]
})
const orderPay=(item)=>{
  // let data={
  //   frm:1,
  //   form:{},
  // }
  // for(let i=0;i<item.info.length;i++){
  //   data.form[item.info[i].goods_sku_id]={num:item.info[i].num,num_install:item.info[i].num_install}
  // }
  // localStorage.setItem('order',JSON.stringify(data))
  // router.push('/user/order/submit')
  //
  const $router = useRouter()
  router.push({ path: '/user/order/pay', query: { id: item.id } })

}
const clickTaps=(goodsId,orderId)=>{
  goodsIds.value=goodsId
  orderIds.value=orderId
  evaluateFlag.value=true
}
const submits=()=>{
  if(textarea.value==''){
    ElMessage.error('请输入评价内容')
    return;
  }
  let data={
    goods_id:goodsIds.value,
    order_id:orderIds.value,
    content:textarea.value,
  }
  orderEval(data).then((res)=>{
    if(res.code==1){
      ElMessage.success('评价成功')
      orderLists()
      evaluateFlag.value=false
    }else{
      ElMessage.error(res.msg)

    }
  })
}
const commits=(id)=>{
  ElMessageBox({
    title: '提示',
    message: '是否确认收货?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        commit({id:id}).then((res)=>{
          if(res.code==1){
            ElMessage.success('收货成功')
            orderLists()
          }else{
            ElMessage.error(res.msg)
          }
        })
      }
    }
  })

}
const cancels=(id)=>{
  ElMessageBox({
    title: '提示',
    message: '确认取消该订单吗？',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        cancel_order({id:id}).then((res)=>{
          if(res.code==1){
            ElMessage.success('取消成功')
            orderLists()
          }else{
            ElMessage.error(res.msg)

          }
        })
      }
    }
  })

}
onMounted(()=>{
  let url = getUrlParams2(window.location.href);
  if(url.id){
    nacIndex.value=url.id;
    status_index.value=url.statusId;
    setTimeout(()=>{
      orderLists()
    },50)
  }else{
    orderLists()

  }

})
let lr_id=ref("");
const logistics_orders =(item)=>{
  // userlogistics.arr=item.logistics
  lr_id.value=item.id
  logistics_order({id:item.id}).then((res)=>{
    if(res.code==1){
      logistics.arr=res.data.logistics
      expressFlag.value=true
    }
  })
}
const openMap=(id)=>{
  logistics_map({id:id}).then((res)=>{
    if(res.code==1){
      let url=res.data.logistics.trailUrl
      var iTop = (window.screen.height-30-600)/2; //获得窗口的垂直位置;
      var iLeft = (window.screen.width-10-600)/2; //获得窗口的水平位置;
      if(url){
        window.open(url,"地图轨迹",'height='+600+',,innerHeight='+600+',width='+600+',innerWidth='+600+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
      }else{
        ElMessage.error('暂无地图轨迹')

      }

    }
  })
}
const orderLists=()=>{
  let data={
    page:page.value,
    limit:limit.value
  }
  if(status_index.value>=0){
    data.status=status_index.value
  }
  oderList(data).then((res)=>{
    if(res.code==1){
      newsList.arr=res.data.data
      totalNumber.value=res.data.total
    }
  })
}
const details=(id)=>{
  const $router=useRouter()
  router.push({path:'/user/order/detail',query:{id:id}})
}
isLogin()

</script>

<style lang="less" scoped >
.fixeds{
  position: absolute;
  z-index: 111;
  //bottom: 0;
  left: 50%;
  top: 50%;
  margin-top:50px;
  margin-left: 50px;
}

.color-ss{
  background-color: #4171B3!important;
}
.border-s{
  width: 8px;
  height: 8px;
  background: #333333;
  border-radius: 50%;
  margin: 5px 5px 0 0;
}
.colors{
  color: #4171B3!important;
}
.logiFlexs{
  margin-bottom: 20px;
  .name-s{
    color: #333;
    width:350px;
    //height: 20px;
    line-height: 20px;
    margin-left: 5px;
  }
}
.name{
  border-bottom: 1px solid #999;
  padding-bottom:5px;
  margin-bottom: 15px;
}
.close-s{
  position: absolute;
  cursor: pointer;
  right: 20px;
  top: 10px;
  img{
    width: 20px;
    height: 20px;
  }
}
.logistts{
  position: relative;
  width: 388px;
  height: 400px;
  background: #FFFFFF;
  border: 1px solid #4171B3;
  overflow-x: auto;
  padding: 20px;
  border-radius:10px;
  margin-bottom: 100px;
}
.download{
  cursor: pointer;
}
.class0{
	color: #EA2813;
}
.class10{
	color:#2CBB00!important;
}
.class30{
	color: #999!important
}
.class5{
	color:#2CBB00!important;
}
.class20{
	color: #4171B3!important;
}
.buttons{
  cursor: pointer;
  width: 140px;
  height: 30px;
  background: #FFFFFF;
  color: #3171B8;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #3171B8;
  margin: 30px auto 20px auto;
}
/deep/ .el-dialog__header{
  text-align: center;
}
.login-wrapper{
  background-color: #F7F8FA;
  .register{
    display: flex;
    padding: 0 260px 40px 260px;
    .register-content{
      .tops{
        height: 50px;
        background: #F0F2F5;
        margin: 20px 20px 0 20px;
        display: flex;
        color: #333;
        font-size: 16px;
        line-height: 50px;
		.tops-order-text{
			width: 40%;
			text-align: center;
      padding: 0 20px;
		}
    .tops-order-text2 {
      width: 20%;
      text-align: center;
    }
      }
      .collect-tops{
        display: flex;
        font-size: 18px;
        color: #333;
        border-bottom: 1px solid #f4f4f4;
        height: 65px;
        line-height: 65px;
        padding: 0 20px;
        div{
          margin-right: 10px;
        }
        .icons{
          margin-top: 8px;
          img{
            width: 29px;
            height: 29px;
          }
        }
      }
      .evaluate-nav{
        display: flex;
        .evaluate-nav-view{
          cursor: pointer;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #333333;
          font-size: 18px;
          box-sizing: border-box;
          flex: 1;
          position: relative;
          .line{
            width: 80px;
            margin-right: 30px;
			text-align: center;
            height: 5px;
            background: linear-gradient(270deg, #FFFFFF 0%, #4171B3 100%);
            border-radius: 3px;
			position: absolute;
			left: 50%;
			margin-left:-60px;
          }
        }
      }
      background-color: #fff;
      margin: 10px 0 0 10px;
      width: 100%;
      min-height: 700px;
      .news-no{
        margin: 120px auto;
        text-align: center;
        font-size: 20px;
        color: #999;
        img{
          width: 262px;
          height: 196px;
        }
      }
      .list{
        height: 174px;
        background: #FFFFFF;
        border: 1px solid #D7DBE0;
        margin: 0 20px 10px 20px;
        position: relative;
        .evaluate-goods{
          display: flex;
          justify-content: space-between;
          height: 140px;
          .color-s{
            color: #333330;
            font-size: 18px;
          }
          .order-button{
            width: 100px;
            height: 36px;
            background: #4171B3;
            border-radius: 2px;
            line-height: 140px;
            cursor: pointer;
          }
          .order-money{
            width: 20%;
            // font-size: 15px;
            border-right: 1px solid #f4f4f4;
            // flex: 1;
            line-height: 140px;
            text-align: center;
            .size{
              color: #999;
              font-size: 16px;
            }
            .order-button{
              width: 100px;
              height: 36px;
              background: #4171B3;
              border-radius: 2px;
              text-align: center;
              line-height: 36px;
              color: #fff;
              font-size: 16px;
              margin: 0 auto;
            }
          }
          .order-info{

            display: flex;
            // justify-content: center;
            padding: 20px;
            align-items: center;
            border-right: 1px solid #f4f4f4;
            width: 40%;
            // padding: 20px;
            .order-img{
              img{
                width: 100px;
                height: 100px;
              }
            }
            .order-name{
              font-size: 15px;
              color: #333;
              margin-left: 10px;
              // margin-top: 30px;
              height: 37px;
            }
          }

        }
        .list-tops{
          height: 34px;
          background: #F0F2F5;
          display: flex;
          line-height: 34px;
          padding: 0 70px 0 20px;
          .list-time{
            color: #999;
            font-size: 14px;
          }
          .orderNo{
            color: #999;
            font-size: 14px;
            margin-left: 20px;
          }
          .money-text{
            color: #333333;
            margin-left: 160px;
            font-size: 16px;
          }
          .money-status{
            color: #333333;
            margin-left: 190px;
            font-size: 16px;
          }
          .money-oper{
            color: #333333;
            margin-left: 180px;
            font-size: 16px;
          }
        }
        .list-right{
          text-align: right;
          .list-btn{
            color: #4171B3;
            cursor: pointer;
            font-size: 16px;
          }
          .time{
            color: #999;
            font-size: 16px;
          }
        }
        .list-cen{
          flex: 1;
          .content{
            color: #999;
            font-size: 16px;
            margin-left: 20px;
          }
          .name{
            color: #333;
            font-size: 20px;
          }
        }
        .list-img img{
          width: 90px;
          height: 70px;
        }
      }
    }
    .register-left{
      width: 320px;
      height: 100px;
      background: #FFFFFF;
      border-radius: 2px;
      margin-top: 10px;
      text-align: center;
      .colorStyle{
        color: #4B71AE!important;
      }
      .register-list{
        cursor: pointer;
        height: 100px;
        line-height: 100px;
        color: #333;
        font-size: 22px;
      }
    }
  }
}
</style>