流量活动领取；

src/api/pay.js

@@ -51,4 +51,31 @@ export function order(data) {
     method: 'get',
     data
   })
+}
+
+
+
+// 获取流量活动详情信息 /order/4GActivity/getDetailInfo
+export function getFlowActivityDetailInfo(data) {
+  return request({
+    header: {
+      'content-type': 'application/x-www-form-urlencoded' // 设置请求头
+    },
+    url: `/order/4GActivity/getDetailInfo`,
+    method: 'post',
+    data: data,
+  })
+}
+
+
+// 立即兑换
+export function doDlowActivityExchange(data) {
+  return request({
+    header: {
+      'content-type': 'application/x-www-form-urlencoded' // 设置请求头
+    },
+    url: `/order/4GActivity/doExchange`,
+    method: 'post',
+    data
+  })
 }

src/pages.json

@@ -206,6 +206,15 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			// 流量活动页面
+			"path": "pages/flowactivity/index",
+			"style": {
+				"navigationBarTitleText": "流量活动页面",
+				"navigationStyle": "custom",
+				"onReachBottomDistance": 50
+			}
 		}
 	]
 }

src/pages/flowactivity/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <view v-if="pic" class='app-container'>
+    <img :src="pic" />
+    <button class="submit" type="submit" circle @click="getSubmit">立即领取</button>
+
+    <!-- 弹窗 -->
+    <uni-popup ref="popup" type="center" :is-mask-click="false">
+      <view class="popup">
+        <h3>领取成功</h3>
+        <view class="center">{{ content }}</view>
+        <view class="submit-btn">
+          <button type="submit" circle @click="getClose">确定</button>
+<!--          <span>该套餐内容仅可在WIFI/移动数据模式下收听</span>-->
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import {doDlowActivityExchange} from "@/api/pay";
+export default {
+  data() {
+    return {
+      pic: '',
+      form: {
+        activityId: '',
+        state: ''
+      },
+      // 弹窗内容
+      content: '',
+      // 领取成功
+      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
+  },
+  methods: {
+    // 立即领取
+    getSubmit() {
+      doDlowActivityExchange(this.form).then(res => {
+        console.log(res)
+
+        this.$refs.popup.open()
+        this.content = "恭喜获得120G移动数据流量"
+        this.isShow = true
+        // if (res.code === 0) {
+        //   this.$refs.popup.open()
+        //   this.content = res.data
+        //   this.isShow = true
+        // } else {
+        //
+        //   // console.log(res.data.message)
+        //   uni.showToast({
+        //     title: res.message,
+        //     icon: 'none',
+        //     mask: true,
+        //     duration: 2000
+        //   })
+        // }
+      })
+    },
+
+    // 关闭弹窗
+    getClose() {
+      this.$refs.popup.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.submit {
+  position: absolute;
+  bottom: 20rpx;
+  left: 50%;
+  transform: translate(-50%);
+  width: calc(100% - 120rpx);
+}
+
+.popup {
+  width: 576rpx;
+  height: 600rpx;
+  background: #fff;
+  border-radius: 32rpx;
+  color: #000;
+  font-weight: bold;
+  text-align: center;
+  padding: 48rpx 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  .center {
+    font-size: 32rpx;
+  }
+
+  .submit-btn {
+    button {
+      width: 320rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 32rpx;
+    }
+
+    span {
+      font-size: 24rpx;
+    }
+  }
+}
+</style>

src/pages/pay/index.vue

@@ -1,56 +1,37 @@
 <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>
+          <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
-            >
+              }}GB
+            </text>
             <text style="margin-left: 10px">{{ this.rateplan.dayStr }}</text>
           </view>
           <text>已用：{{ (this.rateplan.used / 1024).toFixed(2) }}GB</text>
         </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>
@@ -58,26 +39,18 @@
       </view>
     </view>
     <view class="main">
+      <button class="button popup-success" @click="getFlowActivityDetailInfo()">
+        <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>
@@ -86,11 +59,8 @@
       </view>
       <view class="explain" flex column>
         <text>说明：</text>
-        <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内dasd发</text>
-        <text
-          >2、预充值流量因运营商结算时效，上一个流量包使用完后1小时
-          内生效，如有疑问，请咨询客服。
-        </text>
+        <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内</text>
+        <text>2、预充值流量因运营商结算时效，上一个流量包使用完后1小时 内生效，如有疑问，请咨询客服。</text>
         <text>3、如在有效期内流量未使用完毕，流量将被清零</text>
       </view>
     </view>
@@ -102,37 +72,50 @@
     </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>
     </uni-popup>
+
+    <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>
+    </view>
+    <view>
+      <!-- 提示信息弹窗 -->
+      <uni-popup ref="message" type="message">
+        <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
+      </uni-popup>
+    </view>
+
   </view>
+
 </template>
 
 <script>
-import { detail, openId, options, order, wechatPay } from "@/api/pay";
+import {openId, wechatPay, detail, options, order, getFlowActivityDetailInfo} from "@/api/pay"
+
 export default {
   data() {
     return {
+      type: 'center',
+      msgType: 'success',
+      messageText: '这是一条成功提示',
+      value: '',
+      showClose: false,
       // 流量信息
       info: {},
       rateplan: {},
@@ -146,127 +129,180 @@ export default {
       active: 0,
       // 流量套餐id
       goddsId: 0,
-      state: "",
+      state: '',
       // 待生效流量
       orderList: [],
-    };
+      isReceive: false,
+      description: "",
+      id: "",
+      name: "",
+      pic: ""
+
+    }
   },
   onLoad(e) {
-    console.log("gadfadfqewrqr===" + JSON.stringify(e));
-    this.state = e.state;
-    this.getOpenId(e);
-    this.getDetail();
-    this.getOptions();
-    this.getOrder();
+    this.state = e.state
+    this.getOpenId(e)
+    this.getDetail()
+    this.getOptions()
+    this.getOrder()
+
+    this.getFlowActivityDetailInfo()
   },
   methods: {
+    dialogConfirm() {
+      console.log('点击确认')
+      this.messageText = `点击确认了 ${this.msgType} 窗口`
+      this.$refs.alertDialog.open()
+      console.log('跳转到活动页面')
+      // 跳转到活动页面
+      uni.navigateTo({
+        url: `/pages/flowactivity/index?state=${this.state}&id=${this.id}&pic=${this.pic}`,
+      })
+    },
+    dialogClose() {
+      // alert("关闭")
+    },
+
     // 获取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()
+          }
+        } else {
+          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>
@@ -277,7 +313,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;
@@ -336,7 +372,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 {
@@ -350,17 +386,15 @@ export default {
 
   .active {
     background-color: rgba(199, 170, 134, 0.12);
-    border: 2px solid #a4d099 !important;
-    // background-color: #A4D099;
   }
 
   .list {
     width: calc(100% / 3 - 10px);
     height: 268rpx;
-    border: 1px solid #ffffff26;
+    border: 1px solid #C7AA86;
     border-radius: 16rpx;
     padding: 48rpx 10px;
-    color: #ffd5a0;
+    color: #FFD5A0;
     position: relative;
     margin: 24rpx 5px 0;
 
@@ -381,7 +415,7 @@ export default {
     }
 
     .icon::before {
-      content: "￥";
+      content: '￥';
       font-size: 24rpx;
     }
   }
@@ -391,7 +425,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;
@@ -402,7 +436,7 @@ export default {
     position: absolute;
     left: 0px;
     bottom: -1px;
-    background-color: #ffd5a0;
+    background-color: #FFD5A0;
     color: #765626;
     font-size: 22rpx;
     width: 100%;
@@ -425,7 +459,7 @@ export default {
 
   .warning {
     font-size: 22rpx;
-    background-color: #2a2a2a;
+    background-color: #2A2A2A;
     padding: 16rpx 32rpx;
   }
 }
@@ -451,15 +485,16 @@ 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;