feat: 完成新增流量H5扫描二维码充值活动

src/api/activity.js

@@ -21,7 +21,7 @@ export function detail(data) {
   })
 }
 
-// 立即兑换
+// 一般立即兑换
 export function submit(data) {
   return request({
     url: `/serviceActivity/doExchange`,
@@ -29,4 +29,17 @@ export function submit(data) {
     method: 'post',
     data
   })
+}
+
+// 新活动（联通流量免费赠送）
+export function doNewActivity(data) {
+  return request({
+    // 设置请求头
+    header: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    url: `/order/4GActivity/doExchange`,
+    method: 'post',
+    data
+  })
 }

src/api/pay.js

@@ -8,16 +8,7 @@ export function openId(data) {
   });
 }
 
-// 下单
-export function wechatPay(data) {
-  return request({
-    url: `/wxPay/orderCreate`,
-    method: 'post',
-    data
-  })
-}
-
-// 流量信息
+// 一般流量购买详情
 export function detail(data) {
   return request({
     url: `/order/4G/cmpForward`,
@@ -27,7 +18,7 @@ export function detail(data) {
 }
 
 // 流量套餐
-export function options(data){
+export function options(data) {
   return request({
     url: `/order/4G/dataPlanList`,
     method: 'get',
@@ -35,15 +26,6 @@ export function options(data){
   })
 }
 
-// 充值记录
-export function list(data) {
-  return request({
-    url: `/order/4G/orderGet`,
-    mthod: 'get',
-    data
-  })
-}
-
 // 流量列表
 export function order(data) {
   return request({
@@ -53,29 +35,33 @@ export function order(data) {
   })
 }
 
-
-
-// 获取流量活动详情信息 /order/4GActivity/getDetailInfo
-export function getFlowActivityDetailInfo(data) {
+// 下单
+export function wechatPay(data) {
   return request({
-    header: {
-      'content-type': 'application/x-www-form-urlencoded' // 设置请求头
-    },
-    url: `/order/4GActivity/getDetailInfo`,
+    url: `/wxPay/orderCreate`,
     method: 'post',
-    data: data,
+    data
   })
 }
 
+// 充值记录
+export function list(data) {
+  return request({
+    url: `/order/4G/orderGet`,
+    mthod: 'get',
+    data
+  })
+}
 
-// 立即兑换
-export function doDlowActivityExchange(data) {
+// 联通流量详细信息 
+export function newAcitivityDetail(data) {
   return request({
+    // 设置请求头
     header: {
-      'content-type': 'application/x-www-form-urlencoded' // 设置请求头
+      'content-type': 'application/x-www-form-urlencoded'
     },
-    url: `/order/4GActivity/doExchange`,
+    url: `/order/4GActivity/getDetailInfo`,
     method: 'post',
-    data
+    data: data,
   })
 }

src/pages/activity/new.vue

@@ -1,7 +1,9 @@
 <template>
-  <view v-if="pic" class='app-container'>
+  <view v-if="pic" class="app-container">
     <img :src="pic" />
-    <button class="submit" type="submit" circle @click="getSubmit">立即领取</button>
+    <button class="submit" type="submit" circle @click="getSubmit">
+      立即领取
+    </button>
 
     <!-- 弹窗 -->
     <uni-popup ref="popup" type="center" :is-mask-click="false">
@@ -10,7 +12,7 @@
         <view class="center">{{ content }}</view>
         <view class="submit-btn">
           <button type="submit" circle @click="getClose">确定</button>
-<!--          <span>该套餐内容仅可在WIFI/移动数据模式下收听</span>-->
+          <!--          <span>该套餐内容仅可在WIFI/移动数据模式下收听</span>-->
         </view>
       </view>
     </uni-popup>
@@ -18,62 +20,56 @@
 </template>
 
 <script>
-import {doDlowActivityExchange} from "@/api/pay";
+import { doNewActivity } from "@/api/activity.js";
 export default {
   data() {
     return {
-      pic: '',
+      pic: "",
       form: {
-        activityId: '',
-        state: ''
+        activityId: "",
+        state: "",
       },
       // 弹窗内容
-      content: '',
+      content: "",
       // 领取成功
-      isShow: false
-    }
+      isShow: false,
+    };
   },
-  onLoad(e) {
-    this.id = e.id
-    this.name =e.name
-    this.pic = e.pic
-    this.description = e.description
 
-    this.form.activityId=e.id
-    this.form.state=e.state
+  onLoad(e) {
+    this.id = e.id;
+    this.name = e.name;
+    this.pic = e.pic;
+    this.description = e.description;
+    this.form.activityId = e.id;
+    this.form.state = e.state;
   },
+
   methods: {
     // 立即领取
     getSubmit() {
-      doDlowActivityExchange(this.form).then(res => {
-        console.log(res)
-
-        // this.$refs.popup.open()
-        // this.content = "恭喜获得120G移动数据流量"
-        // this.isShow = true
+      doNewActivity(this.form).then((res) => {
         if (res.code === 0) {
-          this.$refs.popup.open()
-          this.content = res.data
-          this.isShow = true
+          this.$refs.popup.open();
+          this.content = res.data;
+          this.isShow = true;
         } else {
-
-          // console.log(res.data.message)
           uni.showToast({
             title: res.message,
-            icon: 'none',
+            icon: "none",
             mask: true,
-            duration: 2000
-          })
+            duration: 2000,
+          });
         }
-      })
+      });
     },
 
     // 关闭弹窗
     getClose() {
-      this.$refs.popup.close()
-    }
-  }
-}
+      this.$refs.popup.close();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/pay/index.vue

@@ -1,22 +1,29 @@
 <template>
-  <view class='app-container' flex column>
+  <view class="app-container" flex column>
     <view :class="['header', orderList.length > 0 ? 'header-bg' : '']">
       <view class="info" flex>
         <view class="dev-img" flex center>
-          <img :src="info.devicePic"/>
+          <img :src="info.devicePic" />
         </view>
         <view class="dev" flex column>
           <view class="dev-name owt">{{ info.deviceName }}</view>
-          <view class="dev-history" @click="getRouter">开通记录
-            <uni-icons type="right" color="#9fa5ad" size="11"/>
+          <view class="dev-history" @click="getRouter"
+            >开通记录
+            <uni-icons type="right" color="#9fa5ad" size="11" />
           </view>
         </view>
       </view>
       <view class="progress" flex column center>
-        <progress :percent="percent" activeColor="#FFD5A0" backgroundColor="#746C64" border-radius="20"/>
+        <progress
+          :percent="percent"
+          activeColor="#FFD5A0"
+          backgroundColor="#746C64"
+          border-radius="20"
+        />
         <view class="progress-info" flex between>
           <view>
-            <text>剩余：{{ (this.rateplan.left / 1024).toFixed(2) }}GB / 总量：{{
+            <text
+              >剩余：{{ (this.rateplan.left / 1024).toFixed(2) }}GB / 总量：{{
                 (this.rateplan.total / 1024).toFixed(2)
               }}GB
             </text>
@@ -26,12 +33,25 @@
         </view>
       </view>
       <view v-if="orderList.length > 0">
-        <view class="progress" flex column center v-for="item in orderList" :key="item.orderId">
-          <progress activeColor="#FFD5A0" backgroundColor="#746C64" border-radius="20"/>
+        <view
+          class="progress"
+          flex
+          column
+          center
+          v-for="item in orderList"
+          :key="item.orderId"
+        >
+          <progress
+            activeColor="#FFD5A0"
+            backgroundColor="#746C64"
+            border-radius="20"
+          />
           <view class="progress-info" flex>
             <view>
               <text>待生效流量套餐</text>
-              <text style="margin-left: 10px;">总量：{{ (item.total / 1024 / 1024).toFixed(2) }}GB</text>
+              <text style="margin-left: 10px"
+                >总量：{{ (item.total / 1024 / 1024).toFixed(2) }}GB</text
+              >
             </view>
             <text style="margin-left: 10px">{{ item.dayStr }}</text>
           </view>
@@ -39,18 +59,31 @@
       </view>
     </view>
     <view class="main">
-<!--      <button class="button popup-success" @click="getFlowActivityDetailInfo()">-->
-<!--        <text-->
-<!--            class="button-text success-text">领取福利-->
-<!--        </text>-->
-<!--      </button>-->
+      <!--      <button class="button popup-success" @click="getNewAcitivityDetail()">-->
+      <!--        <text-->
+      <!--            class="button-text success-text">领取福利-->
+      <!--        </text>-->
+      <!--      </button>-->
       <view class="title" flex>
         <text>流量选择</text>
-        <uni-icons type="help" color="#828282" style="margin-left: 4px;" @click="getOpen"/>
+        <uni-icons
+          type="help"
+          color="#828282"
+          style="margin-left: 4px"
+          @click="getOpen"
+        />
       </view>
       <view flex wrap>
-        <view :class="['list', active === index ? 'active' : '']" v-for="(item, index) in options" :key="index" flex
-              column between @click="getActive(item, index)" :data-content-before="item.operators">
+        <view
+          :class="['list', active === index ? 'active' : '']"
+          v-for="(item, index) in options"
+          :key="index"
+          flex
+          column
+          between
+          @click="getActive(item, index)"
+          :data-content-before="item.operators"
+        >
           <view class="flow owt">{{ item.name }}</view>
           <view class="discount icon">{{ item.goodDiscountedPrice }}</view>
           <view class="price icon">{{ item.goodPrice }}</view>
@@ -60,7 +93,10 @@
       <view class="explain" flex column>
         <text>说明：</text>
         <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内</text>
-        <text>2、预充值流量因运营商结算时效，上一个流量包使用完后1小时 内生效，如有疑问，请咨询客服。</text>
+        <text
+          >2、预充值流量因运营商结算时效，上一个流量包使用完后1小时
+          内生效，如有疑问，请咨询客服。</text
+        >
         <text>3、如在有效期内流量未使用完毕，流量将被清零</text>
       </view>
     </view>
@@ -72,15 +108,25 @@
     </view>
 
     <!-- 弹窗 -->
-    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 10px 10px" background-color="#2a2a2a">
+    <uni-popup
+      ref="popup"
+      type="bottom"
+      border-radius="10px 10px 10px 10px"
+      background-color="#2a2a2a"
+    >
       <view class="popup">
         <view class="title">购买须知</view>
         <view class="content">
-          <h4>1.
-            支付完成后，若当前没有生效中的套餐，套餐立即生效，若当前有生效中未使用完套餐，购买套餐进入流量套餐队列，待上一个套餐失效后激活生效。</h4>
+          <h4>
+            1.
+            支付完成后，若当前没有生效中的套餐，套餐立即生效，若当前有生效中未使用完套餐，购买套餐进入流量套餐队列，待上一个套餐失效后激活生效。
+          </h4>
           <h4>2. 此卡充值流量套餐后，仅限当前设备使用。</h4>
           <h4>3. 此套餐为虚拟产品，购买后不支持退款。</h4>
-          <h4>4. 客服微信：miao friend ，有任何问题请添加客服微信，我们将耐心为您解决问题。</h4>
+          <h4>
+            4. 客服微信：miao friend
+            ，有任何问题请添加客服微信，我们将耐心为您解决问题。
+          </h4>
         </view>
         <button @click="getClose">我知道了</button>
       </view>
@@ -89,32 +135,48 @@
     <view>
       <!-- 提示窗示例 -->
       <uni-popup ref="alertDialog" type="dialog">
-        <uni-popup-dialog :showClose="showClose" :type="msgType" cancelText="不领取" confirmText="领取" title="福利通知"
-                          content="您当前有一个流量领取福利！" @confirm="dialogConfirm"
-                          @close="dialogClose"></uni-popup-dialog>
+        <uni-popup-dialog
+          :showClose="showClose"
+          :type="msgType"
+          cancelText="不领取"
+          confirmText="领取"
+          title="福利通知"
+          content="您当前有一个流量领取福利！"
+          @confirm="dialogConfirm"
+          @close="dialogClose"
+        ></uni-popup-dialog>
       </uni-popup>
     </view>
     <view>
       <!-- 提示信息弹窗 -->
       <uni-popup ref="message" type="message">
-        <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
+        <uni-popup-message
+          :type="msgType"
+          :message="messageText"
+          :duration="2000"
+        ></uni-popup-message>
       </uni-popup>
     </view>
-
   </view>
-
 </template>
 
 <script>
-import { detail, getFlowActivityDetailInfo, openId, options, order, wechatPay } from "@/api/pay";
+import {
+detail,
+newAcitivityDetail,
+openId,
+options,
+order,
+wechatPay,
+} from "@/api/pay";
 
 export default {
   data() {
     return {
-      type: 'center',
-      msgType: 'success',
-      messageText: '这是一条成功提示',
-      value: '',
+      type: "center",
+      msgType: "success",
+      messageText: "这是一条成功提示",
+      value: "",
       showClose: false,
       // 流量信息
       info: {},
@@ -129,37 +191,69 @@ export default {
       active: 0,
       // 流量套餐id
       goddsId: 0,
-      state: '',
+      state: "",
       // 待生效流量
       orderList: [],
       isReceive: false,
       description: "",
       id: "",
       name: "",
-      pic: ""
-
-    }
+      pic: "",
+    };
   },
-  
-  onLoad(e) {
-    this.state = e.state
-    this.getOpenId(e)
-    this.getDetail()
-    this.getOptions()
-    this.getOrder()
 
-    this.getFlowActivityDetailInfo()
+  onLoad(e) {
+    this.state = e.state;
+    this.getOpenId(e);
+    this.getDetail();
+    this.getOptions();
+    this.getOrder();
+    this.getNewAcitivityDetail();
   },
   methods: {
+    // 联通流量详细信息
+    getNewAcitivityDetail() {
+      newAcitivityDetail({
+        state: this.state,
+      }).then((res) => {
+        console.log("asdfqwerqrqr====" + JSON.stringify(res));
+        if (res.code === 0) {
+          this.isReceive = res.data.isReceive;
+          this.id = res.data.id;
+          this.name = res.data.name;
+          this.pic = res.data.pic;
+          this.description = res.data.description;
+
+          // 可以领取
+          if (res.data.isReceive) {
+            this.msgType = "success";
+            this.$refs.alertDialog.open();
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              icon: "none",
+              mask: true,
+              duration: 4000,
+            });
+          }
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: "none",
+            mask: true,
+            duration: 4000,
+          });
+        }
+      });
+    },
+
     dialogConfirm() {
-      console.log('点击确认')
-      this.messageText = `点击确认了 ${this.msgType} 窗口`
-      this.$refs.alertDialog.open()
-      console.log('跳转到活动页面')
+      this.messageText = `点击确认了 ${this.msgType} 窗口`;
+      this.$refs.alertDialog.close();
       // 跳转到活动页面
       uni.navigateTo({
         url: `/pages/activity/new?state=${this.state}&id=${this.id}&pic=${this.pic}`,
-      })
+      });
     },
     dialogClose() {
       // alert("关闭")
@@ -167,145 +261,107 @@ export default {
 
     // 获取openId
     getOpenId(e) {
-      openId(e.code).then(res => {
+      openId(e.code).then((res) => {
         if (res.code === 0) {
-          uni.setStorageSync('openId', res.data.openid)
+          uni.setStorageSync("openId", res.data.openid);
         }
-      })
+      });
     },
 
     // 流量信息
     getDetail() {
-      detail({state: this.state}).then(res => {
+      detail({ state: this.state }).then((res) => {
         if (res.code === 0) {
-          this.info = res.data
-          this.rateplan = res.data.rateplan
-          this.percent = this.rateplan.used / this.rateplan.total * 100
+          this.info = res.data;
+          this.rateplan = res.data.rateplan;
+          this.percent = (this.rateplan.used / this.rateplan.total) * 100;
         }
-      })
+      });
     },
 
     // 流量列表
     getOrder() {
-      order({state: this.state}).then(res => {
+      order({ state: this.state }).then((res) => {
         if (res.code === 0) {
-          this.orderList = res.data.filter(i => i.status === 1).splice(0, 2)
+          this.orderList = res.data.filter((i) => i.status === 1).splice(0, 2);
         }
-      })
+      });
     },
 
     // 流量套餐
     getOptions() {
-      options({state: this.state}).then(res => {
-        this.options = res.data
-        this.goodsId = res.data[0].id
-        res.data.map(i => document.documentElement.style.setProperty('——operators', i.operators))
-      })
+      options({ state: this.state }).then((res) => {
+        this.options = res.data;
+        this.goodsId = res.data[0].id;
+        res.data.map((i) =>
+          document.documentElement.style.setProperty("——operators", i.operators)
+        );
+      });
     },
 
     // 选择套餐
     getActive(item, index) {
-      this.active = index
-      this.goodsId = item.id
+      this.active = index;
+      this.goodsId = item.id;
     },
 
-    getFlowActivityDetailInfo() {
-      getFlowActivityDetailInfo({
-        state: this.state
-      }).then(res => {
-        if (res.code === 0) {
-
-          console.log(res.data)
-          this.isReceive = res.data.isReceive
-          this.id = res.data.id
-          this.name = res.data.name
-          this.pic = res.data.pic
-          this.description = res.data.description
-
-          // this.id = "1"
-          // this.name = "2"
-          // this.pic = "https://music-play.oss-cn-shenzhen.aliyuncs.com/device/20230807184034555054432.png"
-          // this.description = "HHHH"
-
-          // res.data.isReceive=true
-          if ( res.data.isReceive) {// 可以领取
-            this.msgType = "success"
-            this.$refs.alertDialog.open()
-          } else {
-            // this.msgType = "warn"
-            // this.messageText = res.data.msg
-            // this.$refs.message.open()
-            console.log(res.data)
-          }
-        } else {
-          console.log(res.data)
-          // this.msgType = "warn"
-          // this.messageText = res.msg
-          // this.$refs.message.open()
-        }
-      })
-    }
-    ,
-
-
     // 下单
     getWechatPay() {
       wechatPay({
-        openId: uni.getStorageSync('openId'),
+        openId: uni.getStorageSync("openId"),
         goodType: 18,
         goodsId: this.goodsId,
         ptype: 1,
         state: this.state,
-        tradeType: 2
-      }).then(res => {
+        tradeType: 2,
+      }).then((res) => {
         if (res.code === 0) {
-          this.form = JSON.parse(res.data.wxOrder.formUrl)
-          if (typeof WeixinJSBridge == 'undefined') {
+          this.form = JSON.parse(res.data.wxOrder.formUrl);
+          if (typeof WeixinJSBridge == "undefined") {
             if (document.addEventListener) {
-              document.addEventListener('WeixinJSBridge', this.onBridgeReady(), false)
+              document.addEventListener(
+                "WeixinJSBridge",
+                this.onBridgeReady(),
+                false
+              );
             } else if (document.attachEvent) {
-              document.attachEvent('WeixinJSBridge', this.onBridgeReady())
-              document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady())
+              document.attachEvent("WeixinJSBridge", this.onBridgeReady());
+              document.attachEvent(
+                "onWeixinJSBridgeReady",
+                this.onBridgeReady()
+              );
             }
           } else {
-            this.onBridgeReady()
+            this.onBridgeReady();
           }
         }
-      })
-    }
-    ,
-
+      });
+    },
     // 弹窗
     getOpen() {
-      this.$refs.popup.open()
-    }
-    ,
-
+      this.$refs.popup.open();
+    },
     // 关闭
     getClose() {
-      this.$refs.popup.close()
-    }
-    ,
-
+      this.$refs.popup.close();
+    },
     // 调起支付
     onBridgeReady() {
-      WeixinJSBridge.invoke('getBrandWCPayRequest', this.form, function (res) {
+      WeixinJSBridge.invoke("getBrandWCPayRequest", this.form, function (res) {
         if (res.err_msg == "get_brand_wcpay_request:ok") {
           // 支付成功刷新页面
           location.reload();
         }
-      })
-    }
-    ,
-
+      });
+    },
     // 开通记录
     getRouter() {
       uni.navigateTo({
         url: `/pages/pay/detail?state=${this.state}`,
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -316,7 +372,7 @@ export default {
 .header {
   width: 100%;
   height: 368rpx;
-  background: url('../../static/pay/bg.png') no-repeat 100% / 100%;
+  background: url("../../static/pay/bg.png") no-repeat 100% / 100%;
 
   .info {
     margin-bottom: 38rpx;
@@ -375,7 +431,7 @@ export default {
 
 .header-bg {
   height: 510rpx;
-  background: url('../../static/pay/bigbg.png') no-repeat 100% / 100%;
+  background: url("../../static/pay/bigbg.png") no-repeat 100% / 100%;
 }
 
 .main {
@@ -394,10 +450,10 @@ export default {
   .list {
     width: calc(100% / 3 - 10px);
     height: 268rpx;
-    border: 1px solid #C7AA86;
+    border: 1px solid #c7aa86;
     border-radius: 16rpx;
     padding: 48rpx 10px;
-    color: #FFD5A0;
+    color: #ffd5a0;
     position: relative;
     margin: 24rpx 5px 0;
 
@@ -418,7 +474,7 @@ export default {
     }
 
     .icon::before {
-      content: '￥';
+      content: "￥";
       font-size: 24rpx;
     }
   }
@@ -428,7 +484,7 @@ export default {
     position: absolute;
     left: -1px;
     top: -1px;
-    background-color: #FFD5A0;
+    background-color: #ffd5a0;
     color: #765626;
     font-size: 22rpx;
     border-radius: 16rpx 0 16rpx 0;
@@ -439,7 +495,7 @@ export default {
     position: absolute;
     left: 0px;
     bottom: -1px;
-    background-color: #FFD5A0;
+    background-color: #ffd5a0;
     color: #765626;
     font-size: 22rpx;
     width: 100%;
@@ -462,7 +518,7 @@ export default {
 
   .warning {
     font-size: 22rpx;
-    background-color: #2A2A2A;
+    background-color: #2a2a2a;
     padding: 16rpx 32rpx;
   }
 }
@@ -488,16 +544,15 @@ export default {
   }
 }
 
-
 button {
   width: calc(100% - 64rpx);
   height: 92rpx;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(90deg, #F3CF97 0%, #F6E5C4 100%);
+  background: linear-gradient(90deg, #f3cf97 0%, #f6e5c4 100%);
   border-radius: 23px;
-  color: #7C541A;
+  color: #7c541a;
   font-size: 32rpx;
   font-weight: bold;
   margin: 32rpx auto;