支付样式

pagesA/vipPackage/index.vue

@@ -48,17 +48,61 @@
         </uni-section>
       </view>
     </view>
-    <view class="pay">
+    <view class="pay" v-if="!list.my">
       <view class="pay-box">
         <view class="price">
           <uni-icons color="#e68735" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
-          {{ list.price }}
+          {{ amount }}
         </view>
-        <view class="btn">
+        <view class="btn" @tap="handleOpen">
           立刻升级
         </view>
         </view>
     </view>
+    <uni-popup ref="popup" :is-mask-click="false" borderRadius="10px 10px 0 0" background-color="#eee">
+      <view class="popup-content">
+        <view class="popup-content-close">
+          <view class="icon" @tap="handleClose">
+            <uni-icons
+              type="closeempty"
+              color="#999"
+              size="24"
+            />
+          </view>
+        </view>
+        <view class="popup-content-main">
+          <view class="popup-content-main-count">
+            <view class="title">{{ list.name }} 充值</view>
+            <view class="pay">
+              <uni-icons color="#000" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
+              <view>{{ amount }}</view>
+            </view>
+          </view>
+          <view class="popup-content-main-type">
+            <view class="card">
+              <radio-group @change="radioChange">
+                <label class="card-label" v-for="(item, index) in payType" :key="item.value">
+                  <view class="name">
+                    <uni-icons :color="item.color" class="mr-1" :type="item.icon" size="24" custom-prefix="iconfont"></uni-icons>
+                    {{item.name}}
+                  </view>
+                  <view>
+                    <radio :value="item.value" :checked="index === payTypeCurrent" />
+                  </view>
+                </label>
+              </radio-group>
+            </view>
+          </view>
+        </view>
+        <view class="popup-content-btn">
+          <button class="popup-content-btn-s" @tap="handlePay">
+            确认支付 
+            <uni-icons color="#FFF" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
+            {{ amount }}
+          </button>
+        </view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
@@ -77,6 +121,12 @@ const memberList = ref([])
 const recommend = ref(null)
 const chooseId = ref(null)
 
+const popup = ref()
+
+const amount = computed(() => {
+  return parseFloat(+list.value.price).toFixed(2)
+})
+
 const memberListLength = computed(() => {
   const result = [];  
   for (let i = 0; i < memberList.value.length; i += 2) {  
@@ -104,10 +154,45 @@ const list = computed(() => {
 
 const current = ref(0)
 
+const payType = ref([
+  {
+    name: '微信支付',
+    value: 'wxpay',
+    icon: 'icon-weixinzhifu',
+    color: '#1AAD19'
+  }
+  // {
+  //   name: '银行卡支付',
+  //   value: 'alipay',
+  //   icon: 'icon-alipay',
+  //   color: '#1296db'
+  // }
+])
+
+const payTypeCurrent = ref(0)
+
+const radioChange = (index) => {
+  payTypeCurrent.value = index
+}
+
+
 const handleChoose = (id) => {
   chooseId.value = id
 }
 
+const handleOpen = () => {
+  popup.value.open('bottom')
+}
+
+const handleClose = () => {
+  popup.value.close()
+}
+
+// 支付
+const handlePay = async () => {
+  uni.showToast({ title: '支付升级中', icon: 'none'})
+}
+
 const getMemberList = async () => {
   try {
     const { data } = await getMembershipPackageList()
@@ -134,6 +219,7 @@ const getMemberList = async () => {
     })
     // 低于当前套餐的(套餐)不展示
     memberList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
+    handleChoose(memberList.value[0]?.id)
     if ((!userInfo.value?.vipFlag || userInfo.value?.vipExpireDate - new Date().getTime() > 0 ) && typeof recommend.value === 'number') {
       current.value = parseInt(recommend.value / 2)
       chooseId.value = memberList.value[recommend.value]?.id
@@ -301,4 +387,92 @@ getMemberList()
   }
 }
 
+.popup-content {
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+  &-close {
+    display: flex;
+    padding: 10px;
+    justify-content: flex-end;
+    .icon {
+      width: 30px;
+      height: 30px;
+      background: #ccc;
+      border-radius: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  &-main {
+    flex: 1;
+    height: 0;
+    overflow-y: auto;
+    &-count {
+      margin-bottom: 20px;
+      text-align: center;
+      .title {
+        font-size: 28rpx;
+        color: #666
+      }
+      .pay {
+        font-size: 52rpx;
+        color: #000;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 10px 0;
+      }
+    }
+    &-type {
+      width: 100%;
+      padding: 0 20px;
+      box-sizing: border-box;
+      .card {
+        border-radius: 10px;
+        margin: 0 auto;
+        background: #FFF;
+        padding: 10px;
+        &-label {
+          padding: 15px 0;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          border-bottom: 1px solid #eee;
+          &:last-of-type {
+            border-bottom: none;
+          }
+          .name {
+            display: flex;
+            align-items: center;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+  &-btn {
+    height: 70px;
+    width: 100%;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-s {
+      height: 40px;
+      width: 75%;
+      line-height: 40px;
+      color: #FFF;
+      // color: #724d2b;
+      background: #00897B;
+      // background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
+      border-radius: 90px;
+    }
+  }
+}
+.mr-1 {
+  margin-right: 10px;
+}
 </style>

static/iconfont.wxss

@@ -11,6 +11,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-weixinzhifu:before {
+  content: "\e6e8";
+}
+
+.icon-alipay:before {
+  content: "\e601";
+}
+
+.icon-zixun:before {
+  content: "\e606";
+}
+
+.icon-wo-suoshuqiye:before {
+  content: "\e638";
+}
+
+.icon-qiyezhuanqu:before {
+  content: "\e62c";
+}
+
+.icon-zhaopinqiuzhi:before {
+  content: "\ffb6";
+}
+
+.icon-lianxikefu:before {
+  content: "\e609";
+}
+
+.icon-vip:before {
+  content: "\e60b";
+}
+
+.icon-VIP:before {
+  content: "\e6a3";
+}
+
 .icon-add:before {
   content: "\e633";
 }