market-app/src/pages/my-class/course/course-detail.vue

<template>
  <view class="content">
    <view class="content-view">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        indicator-active-color="#0251FF"
      >
        <swiper-item>
          <view class="swiper-item">
            <img class="swiper-item-pic" src="@/static/swiper_pic.png" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-green">B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-blue">C</view>
        </swiper-item>
      </swiper>
      <view class="detail-view">
        <view class="detail-top">
          <view class="right-tag"><text class="cost-text">￥800/人</text></view>
          <view class="title-text-view">
            <text class="title-text">花样跳绳（B）</text>
          </view>
          <view class="time-text">
            <u-icon name="clock"></u-icon>每周 星期三 17:00~18:10
          </view>
        </view>

        <view class="detail-info-view">
          <view class="detail-title">
            课程详情
          </view>
          <view class="detail-info">
            1.掌握跳绳技术，通过跳绳技术的学习，发展下肢以及及时空感觉，控制平衡能力。
            2.树立安全意识，懂得自我保护和相互保护的方法和意义。
            3.为中考打下良好的体能基础。
          </view>
          <view class="detail-title">
            课程备注
          </view>
          <view class="detail-info">
            含跳绳一条1.课程收费均为一学期14次课时的学费标准。
            2.请家长以自愿为原则，根据孩子兴趣爱好，为孩子报名。
            3.每班不超过30人，15人开班。4.所以项目开班后不接受
            退班费或直接转让。5.人数不够开不了班的可以选择退费或
            换班。6.如因学员个人原因，请假缺课，不予补课或退款。
          </view>
        </view>
      </view>
    </view>

    <view class="bottom">
      <view class="btn-view">
        <u-button
          :hair-line="false"
          size="mini"
          plain
          :custom-style="bBtnStyle"
        >
          <u-icon name="kefu-ermai" size="40"></u-icon>
          <br />
          客服
        </u-button>
      </view>
      <view class="btn-view">
        <u-button
          :hair-line="false"
          size="mini"
          plain
          :custom-style="bBtnStyle"
        >
          <u-icon name="order" size="40"></u-icon>
          <br />
          选课单
        </u-button>
      </view>
      <view class="btn-view1">
        <u-button v-if="btnMode === 1" shape="circle" size="medium" :custom-style="submitBtnStyle">立即报名</u-button>
        <u-button v-else-if="btnMode === 2" shape="circle" size="medium" disabled="true" :custom-style="submitBtnDisableStyle">报名已结束</u-button>
        <u-button v-else-if="btnMode === 3" shape="circle" size="medium" type="primary" plain :custom-style="cancleBtnStyle" @click="handleCancle">取消报名</u-button>
      </view>
      <u-select title="请选择取消原因" v-model="selectShow" mode="single-column" :list="selectList" @confirm="selectConfirm"></u-select>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data: () => ({
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 500,
    btnMode: 3,
    bBtnStyle: {
      width: '100rpx',
      height: '100rpx',
      display: 'inline-block',
      color: '#0251FF',
      paddingTop: '20rpx',
      lineHeight: '40rpx',
      border: '0',
    },
    submitBtnStyle: {
      background: 'linear-gradient(3deg, #0251FF 0%, #2794F6 100%)',
      color: '#fff',
      width: '100%'
    },
    submitBtnDisableStyle: {
      background: ' linear-gradient(3deg, #0251FF 0%, #2794F6 100%)',
      color: '#fff',
      width: '100%',
      opacity: '0.5'
    },
    cancleBtnStyle: {
      width: '100%'
    },
    selectList: [
					{
						value: '1',
						label: '个人原因'
					},
					{
						value: '2',
						label: '计划有变'
					},
					{
						value: '3',
						label: '其他'
					}
				],
        selectShow: false
  }),
  computed: {},
  methods: {
    handleCancle() {
      this.selectShow = true
    },
    selectConfirm() {

    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh()
  },
  // 页面处理函数--监听用户上拉触底
  onReachBottom() {},
}
</script>

<style>
.content-view {
  padding-bottom: 110rpx;
}
.swiper {
  height: 450rpx;
}
.swiper-item {
  height: 450rpx;
}
.swiper-item-pic {
  width: 100%;
  height: 100%;
  display: block;
}
.right-tag {
  background: #fce6e5;
  width: 178rpx;
  height: 62rpx;
  border-radius: 30rpx 0 0 30rpx;
  text-align: center;
  position: relative;
  float: right;
}
.cost-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #ec655b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 62rpx;
}
.detial-top {
  margin-top: 30rpx;
  margin-left: 30rpx;
}
.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}
.title-text-view {
  margin-bottom: 47rpx;
}
.time-text {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}
.detail-info-view {
  margin-top: 50rpx;
  margin-right: 20rpx;
}
.detail-view {
  margin-top: 30rpx;
  margin-left: 20rpx;
}
.detail-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}
.detail-info {
  font-size: 24rpx;
  font-weight: 400;
  color: #a3abbf;
  line-height: 36rpx;
  margin-bottom: 30rpx;
}
.bottom {
  position: fixed;
  bottom: 0px;
  height: 108rpx;
  width: 100%;
  background: #ffffff;
  border: 1rpx solid #d6dcf1;
}
.btn-view {
  margin: 0 30rpx;
  display: inline-block;
}
.btn-view1 {
  width: 50%;
  display: inline-block;
  margin-bottom: 50rpx;
  vertical-align: middle;
  margin-left: 20rpx;
}
</style>