feat: add buy weixin pay page

pages/buy/buy.js

@@ -0,0 +1,39 @@
+// pages/buy/buy.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    payType: 1
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  handlePayType (e) {
+    var type = Number(e.currentTarget.dataset.type)
+    console.log(type);
+    this.setData({
+      payType: type
+    })
+  }
+})

pages/buy/buy.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "检测套餐"
+}

pages/buy/buy.wxml

@@ -0,0 +1,53 @@
+<!--pages/buy/buy.wxml-->
+<view class="buy-container">
+  <view class="header">
+    <view class="info">
+      <view class="img"></view>
+      <text class="name">范一岚</text>
+    </view>
+    <view class="span">
+      <text class="count">0</text>
+      <text class="unit">次</text>
+    </view>
+  </view>
+  <view class="chose-pay-type">
+    <view class="title">选择检测套餐</view>
+    <view class="pay-type">
+      <view class="pay-item one-time {{payType == 0 ? 'pay-item-active' : ''}}" data-type="0" bindtap="handlePayType">
+        <view class="p-title">一次体验卡</view>
+        <view class="p-prise">
+          <text class="p-tag">¥</text>
+          <text class="p-num">199</text>
+        </view>
+        <view class="mark ittflex" wx:if="{{payType == 0}}">
+          <van-icon name="success" color="#fff" />
+        </view>
+      </view>
+      <view class="pay-item four-time {{payType == 1 ? 'pay-item-active' : ''}}" data-type="1" bindtap="handlePayType">
+        <view class="p-title-flex">
+          <view class="light-text ittflex">荐</view>
+          <text class="sub-title">4次套餐卡</text>
+        </view>
+        <view class="p-prise">
+          <text class="p-tag">¥</text>
+          <text class="p-num">796</text>
+        </view>
+        <view class="tips">加赠4次，共8次</view>
+        <view class="mark ittflex" wx:if="{{payType == 1}}">
+          <van-icon name="success" color="#fff" />
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="wxpay">
+    <view class="pay-con ittflex-jcs">
+      <image class="wxpaypng" src="./../../imaes/wxpay.png"/>
+      <text class="p-wxpay">微信</text>
+    </view>
+    <view class="check-icnon ittflex">
+      <van-icon name="success" color="#fff" />
+    </view>
+  </view>
+  <view class="pay-btn default-btn ittflex">立即支付</view>
+  <view class="s-tips">购买成功后，体验次数立即到账，不可退款</view>
+</view>

pages/buy/buy.wxss

@@ -0,0 +1,178 @@
+/* pages/buy/buy.wxss */
+.buy-container {
+  width: 100%;
+  height: 100%;
+  background-color: #F7F7F7;
+}
+.header {
+  width: 100%;
+  height: 120rpx;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.img {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f66;
+  margin: 0 20rpx 0 30rpx;
+}
+.name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.span {
+  padding-right: 30rpx;
+}
+.count {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.unit {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  padding-left: 12rpx;
+}
+.title {
+  width: 100%;
+  height: 114rpx;
+  text-indent: 30rpx;
+  line-height: 114rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.pay-type {
+  width: 100%;
+  height: 302rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pay-item {
+  width: 280rpx;
+  height: 302rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  border: 2rpx solid #DDDDDD;
+  position: relative;
+}
+.pay-item-active {
+  border: 2rpx solid #45A6B5;
+}
+.p-title {
+  margin-top: 40rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  text-align: center;
+}
+.p-title-flex {
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.sub-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-left: 5rpx;
+}
+.light-text {
+  width: 36rpx;
+  height: 36rpx;
+  background: #45A6B5;
+  border-radius: 4rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin-right: 5rpx;
+}
+.p-prise {
+  margin-top: 40rpx;
+  text-align: center;
+}
+.p-tag {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.p-num {
+  font-size: 60rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.one-time {
+  margin-right: 20rpx;
+}
+.four-time {
+  margin-left: 20rpx;
+}
+.tips {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #45A6B5;
+  text-align: center;
+  margin-top: 20rpx;
+}
+.mark {
+  width: 40rpx;
+  height: 40rpx;
+  background: #45A6B5;
+  border-radius: 0px 17rpx 0px 4rpx;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.wxpay {
+  width: 690rpx;
+  height: 104rpx;
+  margin: 48rpx auto 0;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.wxpaypng {
+  width: 64rpx;
+  height: 64rpx;
+  margin-left: 30rpx;
+  margin-right: 18rpx;
+}
+.check-icnon {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: var(--maincolor);
+  margin-right: 32rpx;
+}
+.pay-btn {
+  width: 690rpx;
+  height: 80rpx;
+  margin: 0 auto;
+  background: var(--maincolor);
+  border-radius: 10rpx;
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin-top: 160rpx;
+}
+.s-tips {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  text-align: center;
+  margin-top: 20rpx;
+}

pages/index/index.js

@@ -46,5 +46,19 @@ Page({
    */
   onShow() {
     wx.hideHomeButton()
+  },
+  /**
+   * 处理套餐 购买 or 预约  
+   * blanceCount: 0-购买 1-预约
+   * **/
+  handlePackage () {
+    var type = this.data.blanceCount
+    switch (type) {
+      case 0:
+        wx.navigateTo({
+          url: '/pages/buy/buy',
+        })
+      break;
+    }
   }
 })

pages/index/index.wxml

@@ -22,7 +22,7 @@
       </view>
       <view class="desc-text b-text ittflex-jcs">次健康早筛服务权益</view>
     </view>
-    <view class="btn default-btn buy-btn">{{blanceCount == 0 ? '立即购买' : '立即预约'}}</view>
+    <view class="btn default-btn buy-btn" bindtap="handlePackage">{{blanceCount == 0 ? '立即购买' : '立即预约'}}</view>
   </view>
   <view class="file-info">
     <view class="file-title">