zc_saas_h5/pages2/order/confirm_success.vue

<template>
  <view>
    <nav-bar title="支付成功"></nav-bar>
    <view>
      <view style="padding: 8rpx">
        <view class="box1">
          <view class="box1_t1">
            <u-icon name="checkmark-circle" color="#34C759" size="32"></u-icon
            ><text style="margin-left: 8rpx">您的订单已支付成功！</text>
          </view>

          <view class="tip">*您可在“我的＞我的订单”中查询</view>
          <view
            style="display: flex; align-items: center; justify-content: center"
            v-if="isBK === '1'"
          >
            <view class="btn1" @click="backMyStudent"> 返回我的网课 </view>
            <view class="btn2" @click="gots"> 继续本次的考试预约 </view>
          </view>
          <view
            style="display: flex; align-items: center; justify-content: center"
            v-else
          >
            <view class="btn1" @click="goCourse"> 继续选课 </view>
            <view class="btn2" @click="goOrder"> 我的订单 </view>
          </view>
        </view>

        <view class="box2">
          <view class="title2">订单信息</view>
          <u-line color="#D6D6DB" />
          <view
            style="padding: 10rpx 30rpx"
            v-for="(item, index) in shoppingCartList"
            :key="index"
          >
            <view class="list_item">
              <view class="txt_left">商品名称</view>
              <view class="txt_right">{{ item.goodsName }}</view>
            </view>
            <view class="list_item">
              <view class="txt_left">应付金额</view>
              <view class="txt_right_price">¥ {{ item.standPrice }}</view>
            </view>
            <view class="list_item">
              <view class="txt_left">订单编号</view>
              <view class="txt_right_sn">{{ sn }}</view>
            </view>
          </view>
          <u-line color="#D6D6DB" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      list: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
      ],
      array: [
        "全部",
        "建设工程施工管理",
        "机电全科",
        "机电工程管理与实",
        "机电全科",
        "全科",
      ],
      current: 0,
      menuIndex: 0,
      sn: "",
      isBK: "", //1补考商品
      getDatas: {},
    };
  },
  onPullDownRefresh() {},
  onLoad(option) {
    this.sn = option.sn;
    this.isBK = option.isBk;
    if (option.isBk === "1") {
      this.getDatas = this.$store.getters.getBackPageApplyData;
      console.log(this.isBK === "1", this.getDatas);
    }
  },
  onShow() {
    /* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
  },
  methods: {
    // 返回我的网课
    backMyStudent() {
      uni.redirectTo({
        url: "/pages2/wd/class",
      });
    },
    // 继续本次的考试预约
    gots() {
      uni.redirectTo({
        url: `/pages2/appointment/index?goodsId=${this.getDatas.goodsId}&gradeId=${this.getDatas.gradeId}&orderGoodsId=${this.getDatas.orderGoodsId}&applyId=${this.getDatas.applyId}`,
      });
    },
    goCourse() {
      uni.switchTab({
        url: "/pages/course/index",
      });
    },
    goOrder() {
      uni.redirectTo({
        url: "/pages2/order/index?current=1",
      });
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    cMenu(index) {
      this.menuIndex = index;
    },
    change(index) {
      this.current = index;
    },
  },
  onReachBottom() {},
  computed: { ...mapGetters(["userInfo", "shoppingCartList"]) },
};
</script>
<style >
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #eaeef1;
}
</style>
<style scoped>
.btn2 {
  /* width: 160rpx;		 */
  padding: 0rpx 20rpx;
  height: 56rpx;
  background: #007aff;
  border-radius: 16rpx;
  font-size: 30rpx;
  color: #ffffff;
  margin: 10rpx;
  text-align: center;
  line-height: 56rpx;
}
.btn1 {
  padding: 0rpx 20rpx;
  /* width: 160rpx; */
  height: 56rpx;
  background: #f5f5f5;
  border-radius: 16rpx;
  font-size: 30rpx;
  color: #007aff;
  margin: 10rpx;
  text-align: center;
  line-height: 56rpx;
}
.txt_left_pay {
  display: flex;
  align-items: center;
  height: 64rpx;
  font-size: 24rpx;
  color: #666666;
}
.pay_icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 10rpx;
}
.box3 {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  margin-top: 30rpx;
}
.tip {
  text-align: center;
  font-size: 24rpx;
  color: #999999;
  height: 40rpx;
  line-height: 40rpx;
}
.txt_right_sn {
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}
.txt_right_price {
  font-size: 30rpx;
  font-weight: bold;
  color: #ff2d55;
}
.txt_left {
  font-size: 24rpx;
  color: #666666;
}
.txt_right {
  text-align: right;
  color: #333333;
  font-weight: bold;
  width: 75%;
}
.list_item {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  align-items: center;
}
.title2 {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
}
.box2 {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  margin-top: 16rpx;
}
.box1_t2 {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}
.box1_t1 {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box1 {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 15rpx;
}
.bottomBtn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  background: linear-gradient(0deg, #015eea, #00c0fa);
  color: #ffffff;
  text-align: center;
  line-height: 98rpx;
  font-weight: bold;
  font-size: 30rpx;
}
</style>