兑换页规则弹窗

custom.page.js

@@ -20,7 +20,7 @@ const config = {
   // pagesInclude: ['ynyc/index.vue'],
   // 广州移动
   // pagesInclude: ['gzyd/login.vue'],
-  pagesInclude: ['redeem'],
+  pagesInclude: ['gzyd/index.vue'],
 }
 
 export function getPages() {

src/pages.json

@@ -16,12 +16,12 @@
   },
   "pages": [
     {
-      "path": "pages/redeem/index",
+      "path": "pages/gzyd/index",
       "type": "page",
       "layout": "default",
       "style": {
         "navigationStyle": "custom",
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "广州移动"
       }
     }
   ],

src/pages/jlgh/redeem.vue

@@ -10,6 +10,17 @@
   <view class="redeem-wrapper">
     <view class="top">
       <scroll-view scroll-y class="scroll-conatiner">
+        <view class="mask flex_items flex_center" v-if="ismaskRule" @click="closemsk">
+          <view class="mk plr50" style="">
+            <view class="flex_between flex_items mt40 mlr30">
+              <view></view>
+              <text class="f30 bold" style="color: #003a6e">使用说明</text>
+              <view class="close" @click="closemsk"></view>
+            </view>
+            <rich-text v-if="contentMsg" :nodes="contentMsg"></rich-text>
+            <view v-else class="f24 mt30 mlr30" style="color: #2b6da8"></view>
+          </view>
+        </view>
         <view
           v-if="ismask"
           class="mask flex_center flex_items"
@@ -70,9 +81,12 @@
                   </view>
                 </view>
               </view>
-              <view class="flex_start flex_items mr20" style="color: #eb5e42">
-                <view class="f24">￥</view>
-                <text class="f48 bolder one">{{ info.amount }}</text>
+              <view class="flex_items mr20" style="color: #eb5e42">
+                <view class="flex_start flex_items">
+                  <view class="f24">￥</view>
+                  <text class="f48 bolder one">{{ info.amount }}</text>
+                </view>
+                <view class="order-rules flex_end" @click="rulesFun">使用说明</view>
               </view>
             </view>
           </view>
@@ -136,6 +150,7 @@
 import api from './api'
 import { debounce, throttle } from '@/utils/index'
 const ismask = ref<boolean>(false)
+const ismaskRule = ref<boolean>(false)
 const info = reactive<any>({})
 const linkUrl = ref<string>('')
 const remark = ref('')
@@ -149,6 +164,7 @@ const payConfig = {
     label: '微信',
   },
 }
+const contentMsg = ref('')
 // eslint-disable-next-line camelcase
 const pay_order_id = ref('')
 // eslint-disable-next-line camelcase
@@ -176,6 +192,10 @@ onMounted(() => {
   })
 })
 
+function closemsk() {
+  ismaskRule.value = false
+}
+
 function gomy() {
   ismask.value = false
   if (linkUrl.value) {
@@ -250,6 +270,25 @@ const payEvent = throttle(async (item) => {
   }
 }, 1500)
 
+async function rulesFun() {
+  const { goods_id: goodsId, activity_code: activityCode } = info
+  const params = {
+    goods_id: goodsId,
+    activity_code: activityCode,
+  }
+  ismaskRule.value = true
+  const res: any = await api.getProductDetail(params)
+  if (res.code === 200) {
+    const msg = res.data.remark || ''
+    contentMsg.value = msg ? `<div class="mast-content f24 mt30 mlr30">${msg}</div>` : ''
+  } else {
+    uni.showToast({
+      title: res.message,
+      icon: 'none',
+    })
+  }
+}
+
 // async function payEvent(item) {
 //   const contentData: any = await api.getContent({ activity_code: info.activity_code })
 //   // eslint-disable-next-line camelcase
@@ -348,6 +387,46 @@ async function dui() {
   }
 }
 
+.order-rules {
+  // position: absolute;
+  // bottom: 8rpx;
+  // right: 24rpx;
+  display: block;
+  width: 124rpx;
+  height: 48rpx;
+  font-size: 24rpx;
+  font-weight: 400;
+  line-height: 48rpx;
+  color: #ffffff;
+  text-align: center;
+  background: linear-gradient(90deg, #ea5c41 0%, #ec7852 100%);
+  border-radius: 23rpx;
+}
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.close {
+  z-index: 1;
+  width: 36rpx;
+  height: 36rpx;
+  background-image: url('@/assets/images/jlgh/guan.png');
+  background-size: 100% 100%;
+}
+.mk {
+  width: 550rpx;
+  height: 900rpx;
+  background-image: url('@/assets/images/jlgh/mk.png');
+  background-size: 100% 100%;
+}
+
 .redeem-wrapper {
   display: flex;
   flex-direction: column;

src/pages/redeem/api.ts

@@ -1,9 +0,0 @@
-import { http } from '@/utils/http'
-
-export const getShortUrl = (params: any) => {
-  return http.post('/v1/lottery/exchange', params)
-}
-
-export default {
-  getShortUrl,
-}

src/pages/redeem/index.vue

@@ -1,90 +0,0 @@
-<route lang="json5" type="page">
-{
-  layout: 'default',
-  style: {
-    navigationStyle: 'custom',
-    navigationBarTitleText: '',
-  },
-}
-</route>
-
-<template>
-  <view
-    style="
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100vw;
-      height: 100vh;
-    "
-  >
-    <wd-loading v-if="showLoading" />
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, unref, onMounted } from 'vue'
-import Api from './api'
-const activityCode = ref('')
-const lotteryCode = ref('')
-const showLoading = ref(true)
-
-function getUrlParams() {
-  const url = window.location.href
-  const theRequest = {}
-  if (url.indexOf('?') !== -1) {
-    const index = url.indexOf('?')
-    let str = url.slice(index + 1)
-    str = str.indexOf('#') !== -1 ? str.split('#')[0] : str
-    const strs = str.split('&')
-    for (let i = 0; i < strs.length; i++) {
-      theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
-    }
-  }
-  return theRequest
-}
-
-onLoad(() => {
-  showLoading.value = true
-  // eslint-disable-next-line camelcase
-  const { activity_code, lottery_code } = getUrlParams() as any
-  // eslint-disable-next-line camelcase
-  activityCode.value = activity_code
-  // eslint-disable-next-line camelcase
-  lotteryCode.value = lottery_code
-})
-
-// 获取领取奖品短连接的方法
-const getEvent = async () => {
-  const params = { activity_code: unref(activityCode) }
-  const res: any = await Api.getShortUrl(params)
-  const { code, data, message } = res
-  if (code !== 200 || !data.shortUrl) {
-    showLoading.value = false
-    uni.showToast({
-      title: message,
-      icon: 'error',
-    })
-    return
-  }
-  if (data.shortUrl) {
-    showLoading.value = false
-    window.parent.postMessage(
-      {
-        data: {
-          message: 'success',
-          type: 'location',
-          url: data.shortUrl,
-        },
-      },
-      '*',
-    )
-  }
-}
-
-onMounted(() => {
-  getEvent()
-})
-</script>
-<style scoped lang="scss"></style>

src/types/uni-pages.d.ts

@@ -4,7 +4,7 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "/pages/redeem/index";
+  url: "/pages/gzyd/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}