smart-admin/rc-busness/pages/personal/settlement.vue

<template>
  <div>
    <Myheader></Myheader>
     <tabs></tabs>
 <div class="online"></div>
 
      <div class="rc-main"  v-for="(item,index) in goldmedal" :key="index" >
        <div class="rc-border"></div>
        <div
          class="mypersonal"
          v-for="(dataaddress, index) in useraddress"
          :key="index"
        >
          <div class="my-delivery">
            <span>{{ dataaddress.state }}</span>
            <i>{{ dataaddress.tel }}</i>
          </div>
          <div class="per-delivery">
            <span>{{ dataaddress.address }}</span>
          </div>
     
        </div>
             <div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
        <div>
        <div class="rc-center">
          <div class="rc-usermain">
            <div class="rc-image">
             <img :src="item.catimage" alt="" /> 
            </div>
            <div class="rc-right">
              <div class="rc-usercenter">
                <em>{{ item.usereat }}</em>
                <div class="rc-userright">
                  <span>规格:{{ item.num }}</span>
                </div>
              </div>
              <div class="rc-userbottom">
                <span>数量:{{ item.specification }}件</span>
                <i>￥{{ item.userprice }}</i>
                 <div class="rc-bottom">
            <span>联系客服申请售后</span>
          </div>
              </div>
                  <div class="rc-bottomm">
            <span>联系客服申请售后</span>
          </div>
              <!-- <div class="rc-userbottomm">
                <i>￥{{ item.userprice }}</i>
                <span>{{ item.orderstype }}</span>
                <i>￥{{ item.userprice }}</i>
              </div> -->
            </div>
          </div>
         
        </div>

        <div class="rc-merchandise">
          <ul>
            <li>
              <span>配送方式:</span>
              <i>{{ shopprice.price }}</i>
            </li>
            <li>
              <span> 活动促销:</span>
              <i>{{ shopprice.distribution }}</i>
            </li>
            <li>
              <span>商品总价:</span>
              <i>{{ shopprice.promotion }}</i>
            </li>
            <li>
              <span>配送费用:</span>
              <i>{{ shopprice.payment }}</i>
            </li>
          </ul>
        </div>


        <div class="rc-foot">
          <div class="rc-foo">
              <div style="padding-top:55px">
              <i>合计金额:</i>
               <em>￥167.00</em>
               </div>
               <div style="padding-bottom:40px">
               <span>再次购买</span>
               </div>
          </div>

        </div>

        </div>
      </div>
 
    <div class="rc-button">
        <div class="rc-left">
            <span>总计：</span>
           <em>￥167.00</em>
        </div>
        <strong ref="rccolor"  @click="jiesuan">结算</strong>

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

<script>
import Myheader from "~/components/header.vue";
  import {userin} from "../../ajax/getData";
  import tabs from "@/components/tabs.vue";
export default {
     middleware: 'metaTitle',
  meta: {title: '订单结算'},
  data() {
    return {
      goldmedal:[],
      addressstype: null,
      orderstatus: '',
      userisdelivery:'待收货',
      userdelivery: "派送中",
      isshow:true,
      leftico: require("../../assets/image/rc-left.png"),
      orderNumber:'',

    //   delivery: [
    //     {
    //       state: "派送中",
    //       time: "2021-11-21",
    //       address: "广州天河—刘某某【15124617917】正在派送中",
    //     },
    //   ],

      useraddress: [
        {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
           {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
           {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
           {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
      ],

      goldmedal: [
        {
          ordernumber: "1111111111111111111",
          orderstype: 1,
          index:0,
          usereat: "英国短毛猫成猫全价湿粮",
          num: "5kg",
          specification: "1",
          userprice: "167.00",
          catimage: require("../../assets/image/rc-win.png"),
        },
      ],
      shopprice: {
        price: "标准快递",
        distribution: "限时折扣全场商品8折",
        promotion: "￥167.00",
        payment: "￥0.00 ",
      },
      information: {
        reference: "1111111111111111",
        ordertime: "2012-12-01    11:20:00",
        paymentmethod: "微信支付",
        distribution: "快递",
        trackingnumber: "11111111111111",
         catimage: require("../../assets/image/rc-left.png"),
      },
    };
  },
  methods: {
jiesuan(){
  //  let userdata=this.$route.query.wxdata
        this.$router.push({
        path: "/personal/userpay",
           query: {
          wxdata:userdata
        },
       
      });  
},
    async canceldanhao(orderNumber){
 let data=await userin(orderNumber);
 console.log(data);
//  this.goldmedal=data;
 console.log(this.goldmedal);
},
  },
  mounted() {
    this.addressstype = this.$route.query.stype;
    this.orderNumber=this.$route.query.orderNumber;
    this.canceldanhao(this.orderNumber)
  console.log(this.$refs.rccolor)
  this.$refs.rccolor.style.background='gray';
  },
  components: {
    Myheader,
    tabs
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/global.less");
@import url("../../assets/css/settlement.less");
</style>