Signed-off-by: yukangzhe <382985154@qq.com>

app.json

@@ -1,6 +1,7 @@
 {
   "plugins": {},
   "pages": [
+    "pages/myself/myself",
     "pages/orderClassDetail/orderClassDetail",
     "pages/index/index",
     "pages/leaveRecord/leaveRecord",
@@ -12,7 +13,6 @@
     "pages/piano/piano",
     "pages/login/login",
     "pages/makePiano/makePiano",
-    "pages/myself/myself",
     "pages/lessons/lessons",
     "pages/lessonsDetail/lessonsDetail",
     "pages/targetList/targetList",
@@ -21,7 +21,8 @@
     "pages/growUp/growUp",
     "pages/evaluation/evaluation",
     "pages/evaluationDetail/evaluationDetail",
-    "pages/classOrder/classOrder"
+    "pages/classOrder/classOrder",
+    "pages/quan/quan"
   ],
   "window": {
     "backgroundTextStyle": "dark",

pages/myself/myself.wxml

@@ -29,7 +29,7 @@
 				</view>
 				<image lazy-load mode="aspectFill" class="li-arrow" src="{{imageUrl? imageUrl+'arrow0603.png' : ''}}"></image>
 			</view>
-			<view class="list-item" catchtap="goNavigateTo" data-url="/pages/activeList/orderList">
+			<view class="list-item" catchtap="goNavigateTo" data-url="/pages/quan/quan">
 				<view class="li-left">
 					<image lazy-load mode="aspectFill" class="li-icon" src="/images/my-quan.png"></image>
 					<text>优惠券</text>

pages/quan/quan.js

@@ -0,0 +1,72 @@
+// pages/quan/quan.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list:[
+      {},
+      {}
+    ],
+    switchTitle:[
+      '可使用','已使用'
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/quan/quan.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "优惠券",
+  "usingComponents": {
+    "switchTab":"/pages/Components/switchTab/switchTab"
+  }
+}

pages/quan/quan.wxml

@@ -0,0 +1,44 @@
+<view class="container">
+
+  <!-- 顶部切换标题 -->
+  <switchTab arr="{{switchTitle}}"></switchTab>
+  <!-- end -->
+
+
+  <view class="quan-view">
+    <view class="quan-list">
+      <view class="quan-box">
+        <view class="{{index == 0 ? 'wrapper' : 'wrapper-ed'}}" wx:for="{{list}}" key='index'>
+          <!-- 左侧box -->
+          <view class="content">
+            <view class="{{index == 0 ? 'couponCount' : 'couponCount-ed'}}">火爆</view>
+            <view class="oilline linwidth160 lineBt"></view>
+            <view>
+              <text class="moyfh">¥</text>
+              <text class="moneyNum">20</text>
+            </view>
+            <view class="oilline  linwidth160 lineBt"></view>
+          </view>
+
+          <view class="split-line"></view>
+          <!-- 右侧box -->
+          <view class="tip">
+            <view class="oilline linwidth227 lineBt "></view>
+            <view class="vnameBx">
+              <view class="couponmaes">{{item.itemName}}</view>
+              <view class="couponmaes">20元报名优惠券</view>
+            </view>
+            <view class="oilline linwidth227 lineBt"></view>
+            <view class="  {{index == 0 ?'moveCm btnbx':'moveCm-ed btnbx-ed'  }}">
+              <view class="btnw {{index == 0?'btnBgActive':'btnBgGray'  }}">
+                <view wx:if="{{index == 0}}" class="btnn" bindtap="submitCilck">立即领取</view>
+                <view wx:if="{{index != 0}}" class="btnn-ed">已使用</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+</view>

pages/quan/quan.wxss

@@ -0,0 +1,276 @@
+.page {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  padding-top: 59rpx;
+  padding-bottom: 38rpx;
+  box-sizing: border-box;
+  position: relative;
+  background: #000;
+} 
+page{
+  background: #f1f1f1;
+}
+.quan-view{
+  margin-top: 40rpx;
+}
+
+.wrapper {
+  width: 670rpx;
+  height: 226rpx;
+  margin: 0 auto;
+  display: flex;
+  background: linear-gradient(135deg, rgba(219, 93, 115, 1) 0%, rgba(137, 29, 34, 1) 100%);
+  border-radius: 20rpx;
+  margin-bottom: 28rpx;
+}
+
+.wrapper-ed{
+  opacity: 0.5;
+  width: 670rpx;
+  height: 226rpx;
+  margin: 0 auto;
+  display: flex;
+  border-radius: 20rpx;
+  margin-bottom: 28rpx;
+  background: linear-gradient(135deg, #999 0%, #CBC9C9 100%);
+}
+.btnBgActive-ed{
+  box-shadow: none;
+  background: #ccc;
+}
+.moveCm-ed{
+  animation: none;
+}
+/*前半部分样式*/
+.content {
+  position: relative;
+  height: 229rpx;
+  flex: 0 0 200rpx;
+  text-align: center;
+  overflow: hidden;
+  border-top-left-radius: 18rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+/*后半部分样式*/
+.tip {
+  position: relative;
+  flex: 1;
+  height: 229rpx;
+  box-sizing: border-box;
+  padding-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/*中间竖直虚线样式*/
+.split-line {
+  position: relative;
+  flex: 0 0 0;
+  margin: 0 10rpx 0 6rpx;
+  border-left: 2rpx dashed #fff;
+}
+
+/*给虚线加两个伪类，基本样式如下*/
+.split-line:before,
+.split-line:after {
+  content: '';
+  position: absolute;
+  width: 32rpx;
+  height: 16rpx;
+  background: #000;
+  left: -18rpx;
+  z-index: 1;
+}
+
+/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/
+.content:before,
+.tip:before,
+.split-line:before {
+  border-radius: 0 0 16rpx 16rpx;
+  top: 0;
+}
+
+/*几个伪类化成的圆弧的样式以及位置（置于底部）我把它放在一起了*/
+.content:after,
+.tip:after,
+.split-line:after {
+  border-radius: 16rpx 16rpx 0 0;
+  bottom: 0;
+}
+
+
+.couponCount {
+  width: 150rpx;
+  height: 150rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(140, 31, 37, 1);
+  transform: rotate(-45deg);
+  position: absolute;
+  text-align: center;
+  line-height: 259rpx;
+  top: -78rpx;
+  left: -78rpx;
+  background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
+}
+
+.couponCount-ed {
+  width: 150rpx;
+  height: 150rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(140, 31, 37, 1);
+  transform: rotate(-45deg);
+  position: absolute;
+  text-align: center;
+  line-height: 259rpx;
+  top: -78rpx;
+  left: -78rpx;
+  background: #333;
+    color: #FFF;
+}
+
+.oilline {
+  background: linear-gradient(to right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 10%,
+      rgba(255, 255, 255, 0.3) 20%,
+      rgba(255, 255, 255, 0.4) 30%,
+      rgba(255, 255, 255, 0.5) 40%,
+      rgba(255, 255, 255, 0.8) 50%,
+      rgba(255, 255, 255, 0.5) 60%,
+      rgba(255, 255, 255, 0.4) 70%,
+      rgba(255, 255, 255, 0.3) 80%,
+      rgba(0, 0, 0, 0) 90%,
+      rgba(0, 0, 0, 0) 100%);
+  height: 2rpx;
+}
+
+.linwidth227 {
+  width: 227rpx;
+}
+
+.linwidth160 {
+  width: 160rpx;
+}
+
+.moyfh {
+  font-size: 69rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 1);
+  margin-right: -2rpx;
+}
+
+.moneyNum {
+  font-size: 96rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 1);
+}
+
+.couponmaes {
+  font-size: 30rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 1);
+  width: 260rpx;
+   overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+.vnameBx {
+  text-align: center;
+  width: 227rpx;
+  margin: 25rpx 0;
+}
+
+.btnbx {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnbx-ed {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnw {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 148rpx;
+  height: 148rpx;
+  border-radius: 50%;
+  margin-right: 30rpx;
+}
+.btnBgActive {
+  color: rgba(140, 31, 37, 1);
+  box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56);
+  background: linear-gradient(319deg, rgba(244, 219, 160, 1) 0%, rgba(255, 255, 255, 1) 100%);
+}
+.btnBgGray {
+  /* box-shadow: 0px 2px 29px 0px rgba(77, 12, 15, 0.56); */
+  color: #cc6031;
+    border: 1px solid #cc6031;
+    transform: rotate(-45deg);
+}
+.btnn {
+  font-size: 30rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  border: 1rpx solid rgba(142, 33, 39, 1);
+  text-align: center;
+  box-sizing: border-box;
+  padding: 18rpx;
+  line-height: 46rpx;
+}
+.btnn-ed{
+  font-size: 30rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 18rpx;
+  line-height: 90rpx;
+}
+.moveCm {
+  animation: scale 0.8s ease-in-out infinite alternate;
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}