|
|
@@ -1,7 +1,45 @@
|
|
|
<template>
|
|
|
- <div class='app-container'>
|
|
|
- <button @click="getWechatPay">下单</button>
|
|
|
- </div>
|
|
|
+ <view class='app-container'>
|
|
|
+ <view class="header">
|
|
|
+ <view class="info" flex>
|
|
|
+ <img class="dev-img" src="../../static/logo.png" />
|
|
|
+ <view class="dev" flex column>
|
|
|
+ <view class="dev-name">123</view>
|
|
|
+ <view class="dev-history">开通记录<uni-icons type="right" color="#9fa5ad" size="11" /></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="progress" flex column center>
|
|
|
+ <progress :percent="50" activeColor="#FFD5A0" backgroundColor="#746C64" border-radius="20" />
|
|
|
+ <view class="progress-info" flex between>
|
|
|
+ <text>已用：xxxM/剩余：xxxM</text>
|
|
|
+ <text>总量：1GB</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="title">流量选择</view>
|
|
|
+ <view flex between>
|
|
|
+ <view :class="['list', active === index ? 'active' : '']" v-for="(item, index) in options" :key="index" flex
|
|
|
+ column between @click="getActive(index)">
|
|
|
+ <view class="flow">{{ item.flow }}GB</view>
|
|
|
+ <view class="discount icon">{{ item.discount }}</view>
|
|
|
+ <view class="price icon">{{ item.price }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="explain" flex column>
|
|
|
+ <text>说明：</text>
|
|
|
+ <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内</text>
|
|
|
+ <text>2、流量包购买后当日生效</text>
|
|
|
+ <text>3、如在有效期内流量未使用完毕，流量将被清零</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="warning">
|
|
|
+ 开通后仅支持当前绑定的猫王音响上通过移动数据模式使用，不支持蓝牙模式
|
|
|
+ </view>
|
|
|
+ <button @click="getWechatPay">立即购买</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -11,7 +49,23 @@ export default {
|
|
|
return {
|
|
|
openId: '',
|
|
|
// 下单表单
|
|
|
- form: {}
|
|
|
+ form: {},
|
|
|
+ // 流量选择
|
|
|
+ options: [{
|
|
|
+ flow: 10,
|
|
|
+ price: 29,
|
|
|
+ discount: 20
|
|
|
+ }, {
|
|
|
+ flow: 20,
|
|
|
+ price: 49,
|
|
|
+ discount: 40
|
|
|
+ }, {
|
|
|
+ flow: 30,
|
|
|
+ price: 69,
|
|
|
+ discount: 60
|
|
|
+ }],
|
|
|
+ // 选择
|
|
|
+ active: 0
|
|
|
}
|
|
|
},
|
|
|
onLoad(e) {
|
|
|
@@ -21,13 +75,17 @@ export default {
|
|
|
// 获取openId
|
|
|
getOpenId(e) {
|
|
|
openId(e.code).then(res => {
|
|
|
- console.log(res);
|
|
|
- if(res.code === 0) {
|
|
|
+ if (res.code === 0) {
|
|
|
this.openId = res.data.openid
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ // 选择套餐
|
|
|
+ getActive(index) {
|
|
|
+ this.active = index
|
|
|
+ },
|
|
|
+
|
|
|
// 下单
|
|
|
getWechatPay() {
|
|
|
wechatPay(this.openId).then(res => {
|
|
|
@@ -51,13 +109,160 @@ export default {
|
|
|
// 调起支付
|
|
|
onBridgeReady() {
|
|
|
WeixinJSBridge.invoke('getBrandWCPayRequest', this.form, function (res) {
|
|
|
- console.log(res);
|
|
|
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
|
|
- // 使用以上方式判断前端返回,微信团队郑重提示：
|
|
|
- //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
|
|
+ // 支付成功刷新页面
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ width: 100%;
|
|
|
+ height: 368rpx;
|
|
|
+ background: url('../../static/pay/bg.png') no-repeat 100% / 100%;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ .dev-img {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 64rpx 0 0 64rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dev {
|
|
|
+ margin-top: 88rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+
|
|
|
+ .dev-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dev-history {
|
|
|
+ color: #9fa5ad;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 48rpx;
|
|
|
+
|
|
|
+ ::v-deep uni-progress,
|
|
|
+ .progress-info {
|
|
|
+ width: 590rpx;
|
|
|
+
|
|
|
+ .uni-progress-bar,
|
|
|
+ .uni-progress-inner-bar {
|
|
|
+ border-radius: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-info {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #9fa5ad;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .active{
|
|
|
+ background-color: rgba(199, 170, 134, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: calc(100% / 3 - 20rpx);
|
|
|
+ height: 268rpx;
|
|
|
+ border: 1px solid #C7AA86;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 48rpx 0;
|
|
|
+ color: #FFD5A0;
|
|
|
+ position: relative;
|
|
|
+ margin: 24rpx 0;
|
|
|
+
|
|
|
+ .flow {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount {
|
|
|
+ font-size: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-decoration: line-through;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon::before {
|
|
|
+ content: '￥';
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list::before {
|
|
|
+ content: '联通';
|
|
|
+ position: absolute;
|
|
|
+ left: -1px;
|
|
|
+ top: -1px;
|
|
|
+ background-color: #FFD5A0;
|
|
|
+ color: #765626;
|
|
|
+ font-size: 22rpx;
|
|
|
+ border-radius: 16rpx 0 16rpx 0;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list::after {
|
|
|
+ content: '限时优惠';
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ bottom: -1px;
|
|
|
+ background-color: #FFD5A0;
|
|
|
+ color: #765626;
|
|
|
+ font-size: 22rpx;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 0 0 16rpx 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .explain {
|
|
|
+ font-size: 24rpx;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #181818;
|
|
|
+
|
|
|
+ .warning {
|
|
|
+ font-size: 22rpx;
|
|
|
+ background-color: #2A2A2A;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: calc(100% - 64rpx);
|
|
|
+ height: 92rpx;
|
|
|
+ line-height: 92rpx;
|
|
|
+ background: linear-gradient(90deg, #F3CF97 0%, #F6E5C4 100%);
|
|
|
+ border-radius: 23px;
|
|
|
+ color: #7C541A;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 32rpx auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
