修改问题

src/pages/top-up/index.vue

@@ -16,22 +16,84 @@
         </picker>
       </view>
     </view> -->
-    <view class="list flex_r flex_ac flex_jb mar_t16" v-if="index == 0">
+    <view class="con">
+      <view class="list flex_r flex_ac">
+        <view class="list_name">当前余额:</view>
+        <input
+          class="list_input flex_grow"
+          type="text"
+          v-model="userinfo.user_money"
+          readonly
+          placeholder="当前余额"
+        />
+      </view>
+      <view class="list flex_r flex_ac">
+        <view class="list_name">充值金额:</view>
+        <input
+          class="list_input flex_grow"
+          type="text"
+          v-model="price"
+          placeholder="请输入充值金额"
+        />
+      </view>
+      <view class="list flex_r flex_ac">
+        <view class="list_name">支付方式:</view>
+        <view class="flex_r flex_ac">
+          <!-- <view class="way_radio select_way"></view> -->
+          <view class="way_con flex_r flex_ac">
+            <image
+              class="way_img"
+              src="/static/weixin_icon.png"
+              mode=""
+            ></image>
+            <view class="way_text">微信支付</view>
+          </view>
+        </view>
+        <!-- <input
+          class="list_input flex_grow"
+          type="text"
+          v-model="price"
+          placeholder="请输入充值金额"
+        /> -->
+      </view>
+      <div class="checkbox-box flex_r flex_ac">
+        <checkbox-group @change="checkboxChange" class="flex_r flex_ac">
+          <label class="checkbox flex_r flex_ac">
+            <checkbox class="checkboxCom" value="agree" />
+            <view>我同意</view>
+          </label>
+          <navigator url="/pages/agreement/privacy" hover-class="li_hover"
+            ><text>《充值协议》</text></navigator
+          >
+        </checkbox-group>
+      </div>
+      <!-- <view class="privacy">
+				<navigator url="/pages/agreement/privacy" hover-class="li_hover"><text>查看《隐私协议》</text></navigator>
+			</view> -->
+
+      <view class="btn flex_r flex_ac flex_jc" @tap="confimTopUp"
+        >立即充值</view
+      >
+    </view>
+    <view>
+      <image class="adv_img" :src="advertisingImg" mode="aspectFit"></image>
+    </view>
+
+    <!-- <view class="list flex_r flex_ac flex_jb mar_t16" v-if="index == 0">
       <view class="list_name">当前余额:</view>
       <view class="list_text flex_r flex_ac flex_je"
         ><text>￥</text>{{ userinfo.user_money }}</view
       >
     </view>
-    <view class="list flex_r flex_ac flex_jb mar_t16" v-if="index == 1">
-      <view class="list_name">当前拼团金:</view>
-      <view class="list_text flex_r flex_ac"
-        ><text>￥</text>{{ detail.qxMoney }}</view
-      >
-    </view>
     <view class="list flex_r flex_ac flex_jb mar_t16">
       <view class="list_name">充值金额:</view>
       <view class="list_text flex_r flex_ac">
-        <input type="text" v-model="price" placeholder="自定义金额" placeholder-style="color:#ddd;"/>
+        <input
+          type="text"
+          v-model="price"
+          placeholder="自定义金额"
+          placeholder-style="color:#ddd;"
+        />
       </view>
     </view>
 
@@ -49,7 +111,7 @@
       </view>
     </view>
 
-    <view class="btn flex_r flex_ac flex_jc" @tap="confimTopUp">立即充值</view>
+    <view class="btn flex_r flex_ac flex_jc" @tap="confimTopUp">立即充值</view> -->
   </view>
 </template>
 
@@ -62,22 +124,28 @@ import { get, post } from "@/request/api.js";
 export default {
   data() {
     return {
-      price: '',
+      price: "",
       isSelect: 1,
       detail: {},
       array: ["余额充值"],
       index: 0,
       userinfo: undefined, // 获取用户信息
+      isDisabled: false, //是否选中协议
+      advertisingImg: "", //广告图片
     };
   },
   onLoad: function () {
     this.userinfo = uni.getStorageSync("userinfo");
+    this.getAdvImg();
   },
   methods: {
     confimTopUp() {
-      if (this.price == 0 || this.prioce == '') {
+      if (this.price == 0 || this.prioce == "") {
         appEv.errTips("充值不能为0");
         return;
+      } else if (this.isDisabled) {
+        appEv.errTips("请阅读并同意相关协议");
+        return;
       } else {
         // #ifdef  H5
         let type = "H5";
@@ -98,8 +166,8 @@ export default {
             if (!rea) {
               // 支付成功
               appEv.errTips("支付成功");
-			  this.price = 0;
-			  this.getuserInfo()
+              this.price = 0;
+              this.getuserInfo();
             } else {
               // 支付失败
               appEv.errTips("支付已取消");
@@ -108,17 +176,25 @@ export default {
         });
       }
     },
-	getuserInfo() {
-        post("/user/userinfo").then((res) => {
-            if (res.code === 0) {
-                uni.setStorageSync('userinfo', res.data.data);
-                this.userinfo = res.data.data
-            }
-        });
+    getAdvImg() {
+      post("/adImgages").then((res) => {
+        if (res.code === 0) {
+          console.log(res.data.data);
+          this.advertisingImg = res.data.data;
+        }
+      });
     },
-    bindPickerChange: function (e) {
-      this.index = e.target.value;
-      this.loadData();
+    getuserInfo() {
+      post("/user/userinfo").then((res) => {
+        if (res.code === 0) {
+          uni.setStorageSync("userinfo", res.data.data);
+          this.userinfo = res.data.data;
+        }
+      });
+    },
+    checkboxChange(e) {
+      var value = e.detail.value;
+      this.isDisabled = value.length == 0;
     },
   },
 };
@@ -133,67 +209,65 @@ page {
 // 页面配置-end
 
 // 页面内容
-.option_con {
-  width: 100%;
+.con {
+  width: 1005;
   overflow: hidden;
+  padding: 30rpx;
+  box-sizing: border-box;
 }
 
-.way_img {
-  width: 52rpx;
-  height: 52rpx;
-  margin-right: 8rpx;
+.adv_img {
+  // width: 700px;
+  // height: 100%;
 }
 
-.way_text {
-  font-size: 22rpx;
-  color: #333333;
-  font-family: "SourceHanSansCN-Medium";
+.list {
+  width: 100%;
+  height: 100rpx;
+  border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);
 }
 
-.list_text input {
+.list_name {
   font-size: 28rpx;
   color: #333333;
-  text-align: right;
-  margin-left: 20rpx;
+  font-weight: "SourceHanSansCN-Medium";
+  width: 130rpx;
 }
 
-.list {
-  width: 100%;
-  height: 86rpx;
-  padding: 0 30rpx;
-  box-sizing: border-box;
-  background: #fff;
+.list_input {
+  width: calc(100% - 140rpx);
+  margin-left: 10rpx;
+  height: 100%;
+  font-size: 28rpx;
+  color: #333;
 }
 
-.list_text {
-  flex: 1;
-  font-family: "SourceHanSansCN-Bold";
-  font-weight: bold;
-  font-size: 36rpx;
-  color: #17bb87;
+.btn {
+  width: 395rpx;
+  height: 95rpx;
+  border-radius: 10rpx;
+  background: #17bb87;
+  color: #fff;
+  font-size: 34rpx;
+  font-family: "SourceHanSansCN-Medium";
+  margin: 100rpx auto 0;
 }
 
-.list_name {
-  flex: 1;
-  color: #333333;
+// 提交内容-end
+
+.checkbox-box {
+  margin-top: 60rpx;
+  margin-bottom: -20px;
   font-size: 28rpx;
-  font-family: "SourceHanSansCN-Medium";
-  font-weight: 500;
 }
-
-.option {
-  width: 100%;
-  overflow: hidden;
-  padding: 20rpx 30rpx 60rpx;
-  box-sizing: border-box;
-  background: #fff;
+.checkbox-box text {
+  /* color: #07d; */
+  /* color: #44A92F; */
+  color: #44a92f;
 }
-
-.list_text text {
-  font-family: "SourceHanSansCN-Medium";
-  font-size: 22rpx;
-  font-weight: 500rpx;
-  color: #17bb87;
+.checkbox-box .checkbox .checkboxCom {
+  transform: scale(0.84);
+  -webkit-transform: scale(0.84);
 }
 
 .way_radio {
@@ -205,26 +279,6 @@ page {
   background-position: center center;
 }
 
-.btn {
-  width: 689rpx;
-  height: 92rpx;
-  background: #17bb87;
-  color: #fff;
-  font-size: 42rpx;
-  font-family: "SourceHanSansCN-Medium";
-  font-weight: 500;
-  margin: 132rpx auto 0;
-  border-radius: 10rpx;
-}
-
-.select_name {
-  width: 80%;
-  text-align: end;
-  font-family: SourceHanSansCN-Medium;
-  color: #494949;
-  font-size: 28rpx;
-}
-
 .select_way {
   background: url("~@/static/xuanzhong_icon.png");
   background-repeat: no-repeat;
@@ -232,5 +286,17 @@ page {
   background-position: center center;
 }
 
+.way_img {
+  width: 52rpx;
+  height: 52rpx;
+  margin-right: 8rpx;
+}
+
+.way_text {
+  font-size: 22rpx;
+  color: #333333;
+  font-family: "SourceHanSansCN-Medium";
+}
+
 // 页面内容-end
 </style>