saas_miniprogram/pages2/order/confirm_success.vue

<template>
  <view>
    <nav-bar title="支付成功"></nav-bar>
    <view>
      <view>
        <view class="box1">
          <view class="box1_t1">
            <!-- <u-icon name="checkmark-circle" color="#34C759" size="32"></u-icon
            > -->
            <image src="../static/icon-succecc.png" mode="" />
            <text>订单支付成功</text>
          </view>

          <view class="tip">您可在“我的＞我的订单”中查询</view>
          <view class="fl_c" v-if="isBK === '1'">
            <view class="btn1" @click="backMyStudent"> 返回我的网课 </view>
            <view class="btn2" @click="gots"> 继续本次的考试预约 </view>
          </view>
          <view class="fl_c" v-else>
            <view class="btn1" @click="goCourse"> 继续选课 </view>
            <view class="btn2" @click="goOrder"> 立即学习 </view>
          </view>
        </view>
        <!-- #ifdef H5 -->
        <view class="collect">
          <view class="fl" v-if="config.gzhImage">
            <image :src="$method.splitImgHost(config.gzhImage)" mode="" />
            <text>长按二维码，关注公众号 <br />方便下次进入学习哦 </text>
          </view>
          <view class="fl" v-else>
            <image src="../static/icon-collect.png" mode="" />
            <text>收藏链接，方便下次进入学习哦</text>
          </view>
        </view>
        <!-- #endif -->
        <view class="box2">
          <view class="title2">订单信息</view>
          <view
            style="padding: 10rpx 0"
            v-for="(item, index) in shoppingCartList"
            :key="index"
          >
            <view class="list_item">
              <view class="txt_left">商品名称</view>
              <view class="txt_right u-line-1">{{ 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>
        </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;
    }
  },
  onShow() {
    console.log(this.config.gzhImage);
    /* 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'
      // });
      uni.switchTab({
        url: "/pages/learn/index",
      });
    },
    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", "config"]) },
};
</script>
<style>
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.btn2 {
  padding: 0rpx 30rpx;
  height: 76rpx;
  background: #007aff;
  border-radius: 100rpx;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
  line-height: 76rpx;
}
.btn1 {
  padding: 0 30rpx;
  height: 76rpx;
  border-radius: 100rpx;
  border: 1px solid #828282;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #222222;
  line-height: 76rpx;
  margin-right: 48rpx;
}
.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: 28rpx;
  color: #999999;
  height: 40rpx;
  line-height: 40rpx;
  color: #7c7c7c;
  margin: 24rpx 0 48rpx;
}
.collect {
  width: 89%;
  background: #e7f1ff;
  padding: 30rpx 40rpx;
  margin-left: 34rpx;
  border-radius: 24rpx;
  &:nth-of-type(2) {
    image {
      width: 112rpx;
      height: 112rpx;
    }
  }
  text {
    margin-left: 32rpx;
    color: #222222;
    font-size: 30rpx;
    line-height: 44rpx;
  }
}
.txt_right_sn {
  color: #666666;
}
.txt_right_price {
  font-weight: bold;
  color: #eb5757;
}
.txt_left {
  color: #444444;
}
.txt_right {
  width: 70%;
  text-align: right;
  color: #666666;
}
.list_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
}
.title2 {
  font-weight: bold;
  color: #222222;
}
.box2 {
  margin: 0 40rpx;
  margin-top: 64rpx;
  font-size: 32rpx;
}
.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;
  image {
    width: 72rpx;
    height: 72rpx;
  }
}
.box1 {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 56rpx 0 80rpx;
  text {
    margin-left: 8rpx;
    font-weight: bold;
    color: #222222;
    font-size: 36rpx;
  }
}
.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>