no message

src/components/index.ts

@@ -22,4 +22,6 @@ export { default as soundRecording } from './sound-recording';
 
 export { default as FlatList } from './flat-list';
 
-export { default as  stepper} from './stepper';
+export { default as  stepper} from './stepper';
+
+export { default as  radio} from './radio';

src/components/popup/props.ts

@@ -21,6 +21,11 @@ export default {
     contentAnimate:{
         type:String,
         default:'none'
+    },
+
+    headerTitle:{
+        type:String,
+        default:''
     }
 
 }

src/components/popup/src/main.vue

@@ -3,7 +3,14 @@
            @click="trigger && changeValue"
            :class="{'center':center}"
   >
-    <section @click.stop :class="['popup-content-'+contentAnimate]">
+    <section @click.stop :class="['popup-content-'+contentAnimate]" class="relative">
+      <header v-if="headerTitle" class="absolute popup-header center">
+        <div class="popup-header-background center"
+          :style="{background:'url('+headerBackground+') 0 0'}"
+        >
+          {{headerTitle}}
+        </div>
+      </header>
       <slot></slot>
     </section>
   </section>
@@ -16,7 +23,8 @@ export default <LibMixins>{
 
   data(){
     return {
-      vValue:false
+      vValue:false,
+      headerBackground: require('../images/background.png')
     }
   },
 

src/components/popup/style.scss

@@ -10,6 +10,25 @@
 }
 /* 弹窗 */
 
+/* 弹窗标题 */
+.popup-header{
+  z-index: 999;
+  left: 0;
+  right: 0;
+  top: -74px;
+  pointer-events: none;
+}
+.popup-header-background{
+  width: 466px;
+  height: 166px;
+  background-size: 100% !important;
+  font-size: 30px;
+  line-height: 32px;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+/* 弹窗标题 */
+
 /* 内部动画 scale */
 .popup-content-scale {
   animation: animateScale .5s forwards;

src/components/radio/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/components/radio/props.ts

@@ -0,0 +1,23 @@
+export default {
+
+    value:{
+        type: Boolean,
+        default: false
+    },
+
+    color:{
+        type:String,
+        default:'#4590d8'
+    },
+
+    defaultColor:{
+        type:String,
+        default:'#fff'
+    },
+
+    disabled:{
+        type:Boolean,
+        default: false
+    }
+
+}

src/components/radio/src/main.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="radio center"
+    :style="{backgroundColor:vValue ? color : defaultColor}"
+       @click="toggleValue"
+       :class="{
+         'cursor-pointer': !disabled
+       }"
+  >
+    <svg v-show="vValue" class="radio-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" width="200" height="200"><path d="M416.832 798.08C400.64 798.08 384.512 791.872 372.16 779.52L119.424 525.76C94.784 500.992 94.784 460.8 119.424 436.032 144.128 411.264 184.128 411.264 208.768 436.032L416.832 644.928 814.4 245.76C839.04 220.928 879.04 220.928 903.744 245.76 928.384 270.528 928.384 310.656 903.744 335.424L461.504 779.52C449.152 791.872 432.96 798.08 416.832 798.08Z" p-id="7666" fill="#ffffff"></path></svg>
+  </div>
+</template>
+
+<script>
+import props from '../props';
+export default {
+  name: "radio",
+  props,
+
+  data(){
+    return {
+      vValue: false
+    }
+  },
+
+  watch:{
+
+    value:{
+      handler(){
+        return this.changeValue(this.value);
+      },
+      immediate:true
+    }
+
+  },
+
+  methods:{
+
+    toggleValue(){
+      return this.changeValue(!this.vValue);
+    },
+
+    changeValue(value){
+
+
+
+      if(this.vValue !== value) {
+
+        if (!this.disabled) {
+          this.vValue = value;
+        }
+
+        if (this.value !== value) {
+          return this.$emit('update:value',value);
+        }
+      }
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/components/radio/style.scss

@@ -0,0 +1,7 @@
+.radio{
+  @include square(22px);
+  border-radius: 50%;
+}
+.radio-icon{
+  @include square(70%);
+}

src/mixins/pay/data/payData.ts

@@ -4,12 +4,16 @@ export default {
 
     weChat:{
         label:'微信',
-        icon: require('../images/weChat.png')
+        icon: require('../images/weChat.png'),
+        color:'#00BE00',
+        type:2
     },
 
     alipay:{
         label:'支付宝',
-        icon: require('../images/alipay.png')
+        icon: require('../images/alipay.png'),
+        color:'#00a2ea',
+        type:1
     },
 
     balance:{

src/mixins/pay/index.ts

@@ -44,16 +44,25 @@ export default <LibMixins>{
             }
         },
 
-        triggerPayOrder(){
+        triggerPayOrder(callback){
 
             if (this.payStatus === Status.loading) return;
 
             let item = this.payData[this.payOrder[this.payCheck]];
             if (!item || item.check && !item.check(this,this.payTotal)) return ;
 
-            return this[this.triggerPayName] && this[this.triggerPayName]({
-                password:'123456'
-            });
+            if (callback) {
+                return callback({
+                    password:'123456',
+                    type: item.type
+                });
+            } else {
+                return this[this.triggerPayName] && this[this.triggerPayName]({
+                    password:'123456',
+                    type: item.type
+                });
+            }
+
         },
 
 

src/popup/popup-confirm/mixins/handle.ts

@@ -1,5 +1,13 @@
 export default <LibMixins>{
 
+    watch:{
+      title:function () {
+          if (!this.title) {
+              return this.triggerCancel();
+          }
+      }
+    },
+
     methods:{
 
         triggerCancel(){

src/popup/popup-confirm/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <popup v-model:value="value" style="z-index: 99991" content-animate="scale" @close="$emit('destroy-popup')">
+  <popup v-model:value="value" style="z-index: 999" content-animate="scale" @close="$emit('destroy-popup')">
 
     <div class="confirm-container relative">
 

src/popup/popup-export/components.ts

@@ -12,5 +12,6 @@ export default {
     [PopupExportComponent.settle]: defineAsyncComponent(()=> import('$popup/popup-settle')),
     [PopupExportComponent.detail]: defineAsyncComponent(()=> import('$popup/popup-detail')),
     [PopupExportComponent.order]: defineAsyncComponent(()=> import('$popup/popup-order')),
-    [PopupExportComponent.recharge]: defineAsyncComponent(()=> import('$popup/popup-recharge'))
+    [PopupExportComponent.recharge]: defineAsyncComponent(()=> import('$popup/popup-recharge')),
+    [PopupExportComponent.message]: defineAsyncComponent(()=> import('$popup/popup-message'))
 }

src/popup/popup-export/const/index.ts

@@ -31,7 +31,10 @@ const enum PopupExportComponent {
     order = 'popup-order',
 
     // 充值
-    recharge='popup-recharge'
+    recharge='popup-recharge',
+
+    // 介绍消息
+    message='popup-message'
 
 }
 

src/popup/popup-export/global.ts

@@ -25,7 +25,7 @@ export default {
                 }
             }
 
-            popup.$popup.open(PopupExportComponent.recharge);
+            // popup.$popup.open(PopupExportComponent.recharge);
 
         });
 

src/popup/popup-message/const/type.ts

@@ -0,0 +1,12 @@
+enum ExportType {
+
+    // 隐私政策
+    privacy,
+
+
+
+}
+
+export {
+    ExportType
+}

src/popup/popup-message/data/type.ts

@@ -0,0 +1,9 @@
+import {ExportType} from "$popup/popup-message/const/type";
+
+export default {
+
+    [ExportType.privacy]:{
+        label:'隐私政策'
+    }
+
+} as {[key in ExportType]:LibData}

src/popup/popup-message/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/popup/popup-message/mixins/handle.ts

@@ -0,0 +1,17 @@
+import typeData from '../data/type';
+
+export default <LibMixins>{
+
+    data(){
+        return {
+            typeData
+        }
+    },
+
+    computed:{
+        item(){
+            return this.typeData[this.type] || {};
+        }
+    }
+
+}

src/popup/popup-message/mixins/index.ts

@@ -0,0 +1,6 @@
+import popup from "$mixins/popup";
+import handle from './handle';
+import pay from '$mixins/pay';
+import user from '$mixins/user';
+
+export default [popup,pay,handle,user];

src/popup/popup-message/props.ts

@@ -0,0 +1,10 @@
+import {ExportType} from "$popup/popup-message/const/type";
+
+export default {
+
+    type:{
+        type: Number,
+        default: ExportType.privacy
+    }
+
+}

src/popup/popup-message/src/main.vue

@@ -0,0 +1,27 @@
+<template>
+  <popup v-model:value="value" header-title="账户充值" content-animate="scale" @close="$emit('destroy-popup')">
+    <section class="recharge-container relative">
+      <div @click="close" class="recharge-close-wrap cursor-pointer absolute animate-rotate-hover">
+        <icon type="close" class="recharge-close"></icon>
+      </div>
+    </section>
+  </popup>
+</template>
+
+<script>
+import {
+  Popup,
+  icon,
+} from '$components';
+import mixins from '../mixins';
+export default {
+  name: "popup-message",
+  components:{
+    Popup,
+    icon
+  },
+  mixins
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-message/style.scss

@@ -0,0 +1,20 @@
+/* 充值 */
+.recharge-container{
+  width: 856px;
+  padding-bottom: 30px;
+  padding-top: 50px;
+  border: 4px solid #F191AC;
+  background-color: #342971;
+  border-radius: 10px;
+}
+/* 充值 */
+
+/* 关闭按钮 */
+.recharge-close-wrap{
+  right: 20px;
+  top: 15px;
+}
+.recharge-close{
+  font-size: 18px;
+}
+/* 关闭按钮 */

src/popup/popup-recharge/mixins/handle.ts

@@ -1,13 +1,17 @@
+import popup from "$utils/tool/popup";
+import request, {InstructionsMessageType} from "$utils/request";
 export default <LibMixins>{
 
     data(){
       return {
           inputPayItem:{
               integral:'其他余额',
+              crid:0,
               format:false,
               input:true,
               value:''
           },
+          authorization:true,
           paySelect:0,
           payOrder:['weChat','alipay'],
       }
@@ -32,8 +36,127 @@ export default <LibMixins>{
                 this.paySelect = index;
             }
 
+        },
+
+        payOrderInfoVerify(callback){
+
+            this.setWaitPattern();
+            if (!this.authorization) return popup.$toast('请同意充值服务协议');
+
+            return this.triggerPayOrder(callback);
+
+        },
+
+        payOrderInfo(obj){
+
+            let item = this.payList[this.paySelect] || undefined;
+
+            if (!item) {
+                popup.$toast('未知错误');
+                return obj.none();
+            }
+
+            return this.$request({
+                url:'Pay/create_pay_order',
+                token:true,
+                data:{
+                    crid: item.crid,
+                    custom_amount: item.value || '',
+                    pay_type: obj.data.type
+                },
+                message:InstructionsMessageType.other,
+                failMessage:true
+            }).then((data)=>{
+
+                if (data.isSuccess) {
+                    window.open(data.data);
+                    this.setWaitPattern();
+                }
+
+                return obj.none();
+
+            }).catch(obj.none);
+
+        },
+
+        // 设置等待模式
+        setWaitPattern(){
+
+            // 开启验证弹窗
+            this.openConfirm();
+
+            let nowTime = Math.floor(new Date().getTime() / 1000);
+
+            // 设置终止时间
+            this.pattern = setInterval(()=>{
+
+                let diff =  Math.floor(new Date().getTime()/1000) - nowTime;
+
+                // 如果满足任意一种主动释放 本次循环
+                if (document.hidden === true || document.hidden === undefined || diff <= 300) {
+                    clearInterval(this.pattern);
+                }
+
+                if (document.hidden === true) {
+                    this.checkPayStatus();
+                }
+
+
+            },1000);
+
+        },
+
+        // 打开弹窗
+        openConfirm(){
+            popup.$confirm({
+               title:'是否支付完成?',
+               confirmText:'支付完成',
+               cancelText:'未完成',
+               confirm:()=> this.checkPayStatus()
+            });
+        },
+
+        // 查看是否 支付成功
+        checkPayStatus(){
+
+            // 防止未清除掉
+            clearInterval(this.pattern);
+
+            // 关闭弹窗
+            popup.closeConfirm();
+
+            return this.$request({
+                url:'user/get_user_info',
+                token:true,
+                failMessage:true,
+                loading:'验证中',
+                message: InstructionsMessageType.other
+            }).then((data)=>{
+
+                if (data.isSuccess) {
+                    if (data.data.integral !== this.user.integral) {
+
+                        this.user = data.data;
+
+                        popup.$toast('支付成功');
+                    } else {
+                        popup.$toast('支付未成功');
+                    }
+                }
+
+                return this.openConfirm();
+
+            }).catch(()=> this.openConfirm());
         }
 
+    },
+
+    created() {
+        this.$store.dispatch('initializationPayPromise');
+    },
+
+    beforeUnmount() {
+        clearInterval(this.pattern);
     }
 
 }

src/popup/popup-recharge/mixins/index.ts

@@ -1,5 +1,6 @@
 import popup from "$mixins/popup";
 import handle from './handle';
 import pay from '$mixins/pay';
+import user from '$mixins/user';
 
-export default [popup,pay,handle];
+export default [popup,pay,handle,user];

src/popup/popup-recharge/src/main.vue

@@ -1,12 +1,12 @@
 <template>
-  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
+  <popup v-model:value="value" header-title="账户充值" content-animate="scale" @close="$emit('destroy-popup')">
     <section class="recharge-container relative">
       <div @click="close" class="recharge-close-wrap cursor-pointer absolute animate-rotate-hover">
         <icon type="close" class="recharge-close"></icon>
       </div>
 
      <!--   内容   -->
-      <section class="screen recharge-content">
+      <section class="screen jCenter recharge-content">
         <div class="recharge-title">巧鱼币充值</div>
         <!--   余额   -->
         <section class="recording-info rowACenter">
@@ -51,12 +51,29 @@
                 'recording-pay-active': index === payCheck,
                 'cursor-pointer': index !== payCheck
               }"
+                :style="{
+                  color: index === payCheck ? payData[item].color : ''
+                }"
+                @click="triggerPayType(index)"
             >
               <img :src="payData[item].icon" class="recording-pay-icon" />
               <span>{{payData[item].label}}</span>
             </aside>
           </section>
         </section>
+        <!--   同意充值服务协议   -->
+        <section class="rowACenter recording-radio">
+            <radio v-model:value="authorization"></radio>
+            <div class="recording-agreement-margin">同意</div>
+            <div class="recording-agreement cursor-pointer">充值服务协议</div>
+        </section>
+        <!--   立即支付   -->
+        <section class="center">
+          <v-button class="recording-button" @submit="payOrderInfo" @submitVerify="payOrderInfoVerify">立即支付</v-button>
+        </section>
+        <!--   支付提醒   -->
+        <section class="recording-pay-remind">请谨防以刷单名义诈骗</section>
+
       </section>
 
     </section>
@@ -67,7 +84,9 @@
 import {
   Popup,
   icon,
-  vImage
+  vImage,
+  radio,
+  vButton
 } from '$components';
 import {
   InputNumber
@@ -79,7 +98,9 @@ export default {
     Popup,
     icon,
     vImage,
-    [InputNumber.name]:InputNumber
+    [InputNumber.name]:InputNumber,
+    radio,
+    vButton
   },
   mixins
 }

src/popup/popup-recharge/style.scss

@@ -1,7 +1,8 @@
 /* 充值 */
 .recharge-container{
   width: 856px;
-  height: 635px;
+  padding-bottom: 30px;
+  padding-top: 50px;
   border: 4px solid #F191AC;
   background-color: #342971;
   border-radius: 10px;
@@ -32,7 +33,6 @@
 .recharge-title{
   font-size: 24px;
   line-height: 28px;
-  margin-top: 50px;
 }
 .recording-info{
   margin-top: 30px;
@@ -113,6 +113,41 @@
 }
 .recording-pay-active {
   border-color: #DE6DA0;
-  color: #00BE00;
 }
-/* 支付类型 */
+/* 支付类型 */
+
+/* 充值协议 */
+.recording-radio{
+  font-size: 18px;
+  line-height: 20px;
+  color: #fff;
+  margin-top: 30px;
+}
+.recording-agreement-margin{
+  margin-left: 10px;
+}
+.recording-agreement{
+  color: #78BDFF;
+}
+/* 充值协议 */
+
+/* 按钮 */
+.recording-button{
+  width: 230px;
+  height: 50px;
+  border-radius: 25px;
+  font-size: 18px;
+  line-height: 20px;
+  margin-top: 30px;
+}
+/* 按钮 */
+
+/* 充值提醒 */
+.recording-pay-remind{
+  font-size: 18px;
+  line-height: 20px;
+  color: #fff;
+  text-align: center;
+  margin-top: 15px;
+}
+/* 充值提醒 */

src/store/modules/pay.ts

@@ -27,8 +27,6 @@ export default <Module<any,any>>{
 
         initializationPayPromise({commit}){
 
-
-
             return new Promise(function (resolve, reject) {
                 Promise.all([$request({
                     url:'pay/get_can_recharge_list',

src/utils/tool/popup.ts

@@ -17,6 +17,11 @@ export default <Record<string, LibMixinsMethod | any>>{
         return this.$popup && this.$popup.open(PopupExportComponent.confirm,this._handleOption(option));
     },
 
+    // 关闭确认弹窗
+    closeConfirm:function (){
+        return this.$popup && this.$popup.open(PopupExportComponent.confirm,{title:''});
+    },
+
     // 加载
     $loading:function (option:PopupToastOptions){
         return this.$popup && this.$popup.open(PopupExportComponent.loading,this._handleOption(option));