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

<template>
  <div>
    <Myheader></Myheader>
	<div class="rc-top"></div>
	<div class="online" style=""></div>
    <div class="rc-layout-container rc-one-column rc-full-width">
		
	  <div class="rc-full-width" v-for="(item, index) in goldmedal" :key="index" >
		  <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"></div>
        <div>
        <div class="rc-center rc-max-width--xl" v-for="(item, index) in goldmedal" :key="index">
          <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 class="ts-standard-btn ts-standard-btn--two">联系客服申请售后</span>
        		</div>
              </div>
        		<div class="rc-bottomm">
        			<span class="ts-standard-btn ts-standard-btn--two">联系客服申请售后</span>
        		</div>
              <!-- <div class="rc-userbottomm">
                <i>￥{{ item.userprice }}</i>
                <span>{{ item.orderstype }}</span>
                <i>￥{{ item.userprice }}</i>
              </div> -->
            </div>
          </div>
        </div>
		<div class="online bold"></div>
        <div class="rc-merchandise rc-max-width--xl">
          <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="online bold"></div>
        <div class="rc-foot rc-max-width--xl">
          <div class="rc-foo">
              <div class="ts-total">
        		<i>合计金额:</i>
        		<em>￥167.00</em>
               </div>
               <div style="padding-bottom:40px;cursor: pointer;">
               <span class="ts-standard-btn" @click="oncebuy()">再次购买</span>
               </div>
          </div>
        
        </div>

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

<script>
import Myheader from "~/components/header.vue";
  import { userin} from "../../ajax/getData";
export default {
  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号",
        },
      ],

      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,
  },
};
</script>

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