新增模糊显示2

src/api/modules/order.js

@@ -148,6 +148,15 @@ const order = {
 			method:'GET',
 			params
 		})
+	},
+	//删除
+	//student/birthday/log/{ids}
+	studentBirthdayLogIds(ids){
+		return request({
+			url:`student/birthday/log/${ids}`,
+			method:'DELETE',
+		})
+
 	}
 
 }

src/components/m-line-blur/m-line-blur.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <text v-if="isBlur">{{ text1 }}</text>
+        <text v-if="isBlur" class="blur-medium">{{ text2 }}</text>
+        <text v-if="isBlur" class="blur-heavy">{{ text3 }}</text>
+        <text v-if="!isBlur">{{ text }}</text>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            text1: '',
+            text2: '',
+            text3: ''
+        }
+    },
+    watch: {
+        text(newValue, oldValue) {
+            if (this.text.length == 0) {
+                return
+            }
+            this.text1 = newValue.substring(0, Math.ceil(newValue.length / 5));
+            this.text2 = newValue.substring(Math.ceil(newValue.length / 5), Math.ceil(newValue.length / 5) + Math.ceil(newValue.length / 5))
+            this.text3 = newValue.substring(Math.ceil(newValue.length / 5) + Math.ceil(newValue.length / 5), newValue.length - 1)
+
+        }
+    },
+    props: {
+        text: {
+            type: String,
+            default: ''
+        },
+        isBlur: {
+            type: Boolean,
+            default: true
+        }
+    },
+    mounted() {
+        if (this.text.length == 0) {
+            return
+        }
+        // console.log(this.text)
+        // this.text1 = this.text.substring(0, Math.ceil(this.text.length/10) );
+        // this.text2 = this.text.substring(Math.ceil(this.text.length/10),Math.ceil(this.text.length/10)+ Math.ceil(this.text.length/10) )
+        // this.text3 = this.text.substring(Math.ceil(this.text.length/10)+ Math.ceil(this.text.length/10),this.text.length-1)
+    },
+
+}
+</script>
+
+<style lang="less" scoped>
+.blur-light {
+    color: transparent;
+    text-shadow: 2rpx 2rpx 4rpx #000000;
+}
+
+.blur-medium {
+    color: transparent;
+    text-shadow: 2rpx 2rpx 6rpx #000000;
+}
+
+.blur-heavy {
+    color: transparent;
+    text-shadow: 2rpx 2rpx 16rpx #000000;
+}
+</style>

src/components/m-map-blur/index.vue

@@ -1,31 +0,0 @@
-<template>
-    <div>
-        <div v-for="(item, index) in map" :key="index">
-            <span :style="{
-                filter:'blur('+(index-1)*2.5+'rpx)'
-            }" >{{ index }}.{{ item }}</span>
-      
-        </div>
-
-    </div>
-</template>
-
-<script>
-
-export default {
-    name: 'm-map-blur',
-    data() {
-        return {
-
-        }
-    },
-    props: {
-        map: {
-            type: Object,
-            default: {}
-        },
-    },
-}
-</script>
-
-<style lang="less" scoped></style>

src/components/m-map-blur/m-map-blur.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <div v-if="isBlur" v-for="(item, index) in map" :key="index">
+            <text v-if="index <= begin">{{ index }}.{{ item }}</text>
+            <text v-if="index == begin + 1" class="blur-light">{{ index }}.{{ item }}</text>
+            <text v-if="index == begin + 2" class="blur-medium">{{ index }}.{{ item }}</text>
+            <text v-if="index > begin + 2" class="blur-heavy">{{ index }}.{{ item }}</text>
+        </div>
+
+        <div v-if="!isBlur" v-for="(item, index) in map" :key="index">
+            <text>{{ index }}.{{ item }}</text>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'm-map-blur',
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        map: {
+            type: Object,
+            default: {}
+        },
+        begin: {
+            type: Number,
+            default: 1
+        },
+        isBlur: {
+            type: Boolean,
+            default: true
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.blur-light {
+    color: transparent;
+    text-shadow: 2rpx 2rpx 4rpx #000000;
+}
+
+.blur-medium {
+    color: transparent;
+    text-shadow: 2rpx 2rpx 8rpx #000000;
+}
+
+.blur-heavy {
+    color: transparent;
+    text-shadow: 2rpx 2rpx 16rpx #000000;
+}
+</style>

src/otherPages/forecastHistory/index.vue

@@ -6,14 +6,17 @@
                     <view v-for="(item, index) in list" :key="index" class="item">
                         <view>
                             {{ item.name }} {{ item.sex == '1' ? '男' : '女' }} {{ item.birthday }}
-                            <image v-if="item.isPay == 2" class="item-vip" mode="widthFix" src="/static/icon/gold_vip@2x.png">
+                            <image v-if="item.isPay == 2" class="item-vip" mode="widthFix"
+                                src="/static/icon/gold_vip@2x.png">
                             </image>
-                            <image v-if="item.isPay == 1" class="item-vip" mode="widthFix" src="/static/icon/gray_vip@2x.png">
+                            <image v-if="item.isPay == 1" class="item-vip" mode="widthFix"
+                                src="/static/icon/gray_vip@2x.png">
                             </image>
 
                         </view>
                         <view>
-                            <image mode="widthFix" class="item-del" src="/static/icon/del@2x.png"></image>
+                            <image @click="delSingleHistory(item.id)" mode="widthFix" class="item-del"
+                                src="/static/icon/del@2x.png"></image>
 
                         </view>
 
@@ -32,13 +35,13 @@
                 </view>
             </view>
             <view class="buttons">
-                <view class="pre">
+                <view @click="getPrePage()" class="pre">
                     上一页
                 </view>
                 <view class="mid">
-                    1/1
+                    {{ pageNum }}/ {{ maxPageNum }}
                 </view>
-                <view class="next">
+                <view @click="getNextPage()" class="next">
                     下一页
                 </view>
             </view>
@@ -51,17 +54,73 @@ import api from '@/api'
 export default {
     data() {
         return {
-            list: []
+            list: [],
+            total: 1,
+            pageNum: 1,
+
 
         }
     },
+    computed: {
+        maxPageNum() {
+            return Math.ceil(this.total / 10)
+        }
+    },
+    methods: {
+        delSingleHistory(id) {
+            let that =this
+            uni.showModal({
+                title: '提示',
+                content: '是否删除该记录',
+                success: function (res) {
+                    if (res.confirm) {
+                        api.order.studentBirthdayLogIds(id).then(res => {
+                            that.getPage()
+
+                        })
+                    } else if (res.cancel) {
+                        console.log('用户点击取消');
+                    }
+                }
+            })
+
+
+        },
+        getNextPage() {
+            if (this.maxPageNum == this.pageNum) {
+                uni.showToast({
+                    title: '到底了',
+                    icon: 'none'
+                })
+                return
+            }
+            this.pageNum++
+            this.getPage()
+        },
+        getPrePage() {
+            if (this.pageNum == 1) {
+                uni.showToast({
+                    title: '到底了',
+                    icon: 'none'
+                })
+                return
+            }
+            this.pageNum--
+            this.getPage()
+
+        },
+        getPage() {
+            api.order.studentBirthdayLogList({
+                pageNum: this.pageNum,
+                pageSize: 10,
+            }).then(res => {
+                this.list = res.rows
+                this.total = res.total
+            })
+        }
+    },
     onLoad() {
-        api.order.studentBirthdayLogList({
-            pageNum: 1,
-            pageSize: 1000
-        }).then(res => {
-            this.list = res.rows
-        })
+        this.getPage()
     }
 }
 </script>
@@ -82,7 +141,7 @@ export default {
     .content {
         width: 100%;
         background-color: #fff;
-        height: 160vw;
+        height: 120vw;
         padding: 0 30rpx;
 
         .item {
@@ -157,4 +216,5 @@ export default {
     }
 
 
-}</style>
+}
+</style>

src/pages/forecast/index.vue

@@ -146,9 +146,9 @@
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc result-desc_limit">
                         <!-- <div v-for="(item, index) in userData.guoGuanMap" :key="index">{{ index }}.{{ item }}</div> -->
-                        <m-map-blur :map="userData.guoGuanMap"></m-map-blur>
+                        <m-map-blur :begin="2" :isBlur="goodsStatus.isPay == 0" :map="userData.guoGuanMap"></m-map-blur>
                     </view>
-                    <!-- <view class="result-pay">开通会员立即查看</view> -->
+                    <view @click="pay" class="result-pay">开通会员立即查看</view>
                     <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                     <!-- <view class="result-content-border1">
                         <view class="result-content-border2">
@@ -167,7 +167,8 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        {{ userData.reportMap['财运'] }}
+                        <m-map-blur :isBlur="goodsStatus.isPay == 0" :map="userData.caiYun"></m-map-blur>
+
 
 
                     </view>
@@ -189,8 +190,9 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        <div v-for="(item,index) in userData.qingGan" :key="item">{{index}}.{{ item }}</div>
-                     
+                        <m-map-blur :isBlur="goodsStatus.isPay == 0" :map="userData.qingGan"></m-map-blur>
+                        <!-- <div v-for="(item,index) in userData.qingGan" :key="item">{{index}}.{{ item }}</div> -->
+
 
 
                     </view>
@@ -213,23 +215,21 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        {{ userData.reportMap['缺失五行评语'] }}
-
+                        <m-line-blur :isBlur="goodsStatus.isPay == 0"
+                            :text="(userData.reportMap['缺失五行评语'] + userData.reportMap['潮湿平衡'] + userData.reportMap['缺失十神评语'])"></m-line-blur>
+                        <!-- <div>{{ userData.reportMap['缺失五行评语'] }}</div>
 
+                        <div>{{ userData.reportMap['潮湿平衡'] }}</div>
+                        <div>{{ userData.reportMap['缺失十神评语'] }}</div> -->
                     </view>
-                    <!-- <view class="result-pay">开通会员立即查看</view> -->
-                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
-                    <!-- <view class="result-content-border1">
-                        <view class="result-content-border2">
-                        </view>
-                    </view> -->
+
                 </view>
                 <img mode="widthFix" class="imgFooter"
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view id="csph" class="result">
+            <!-- <view id="csph" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>潮</text><text>湿</text><text>平</text><text>衡</text></view>
                 <img mode="widthFix" class="imgHeader"
@@ -240,16 +240,11 @@
 
 
                     </view>
-                    <!-- <view class="result-pay">开通会员立即查看</view> -->
-                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
-                    <!-- <view class="result-content-border1">
-                        <view class="result-content-border2">
-                        </view>
-                    </view> -->
+               
                 </view>
                 <img mode="widthFix" class="imgFooter"
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
-            </view>
+            </view> -->
 
             <view style="width: 100%;height: 35rpx;"></view>
             <view id="xysz" class="result">
@@ -297,7 +292,8 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        <view>{{ userData.piQi }}</view>
+                        <m-line-blur :text="userData.piQi" :isBlur="goodsStatus.isPay == 0"></m-line-blur>
+                        <!-- <view>{{ userData.piQi }}</view> -->
 
 
                     </view>
@@ -320,8 +316,13 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        <view style="text-align: left;">称骨重量:{{ userData.chenGuMap['称骨重量'] }}</view>
-                        <view>{{ userData.chenGuMap['称骨评语'] }}</view>
+                        <div style="width: 100%;text-align: center;">
+                            <m-line-blur :is-blur="false" :text="userData.chenGuMap['称骨重量']"></m-line-blur>
+                        </div>
+
+                        <m-line-blur :isBlur="goodsStatus.isPay == 0" :text="userData.chenGuMap['称骨评语']"></m-line-blur>
+                        <!-- <view style="text-align: left;">称骨重量:{{ userData.chenGuMap['称骨重量'] }}</view>
+                        <view>{{ userData.chenGuMap['称骨评语'] }}</view> -->
 
 
                     </view>
@@ -372,9 +373,7 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        <div :key="index" v-for="(item, index) in userData.xiFangWei">
-                            {{ item }}
-                        </div>
+                        <m-map-blur :isBlur="goodsStatus.isPay == 0" :map="userData.xiFangWei"></m-map-blur>
 
                     </view>
 
@@ -398,7 +397,7 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        {{ userData.guiren }}
+                        <m-line-blur :text="userData.guiren" :isBlur="goodsStatus.isPay == 0"></m-line-blur>
                     </view>
 
 
@@ -420,7 +419,7 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        {{ userData.industry }}
+                        <m-line-blur :text="userData.industry" :isBlur="goodsStatus.isPay == 0"></m-line-blur>
                     </view>
 
 
@@ -494,7 +493,8 @@
 import Vue from 'vue';
 import api from '@/api'
 import responseDecorator from '@/utils/responseDecorator'
-import mMapBlur from '@/components/m-map-blur'
+import mMapBlur from '@/components/m-map-blur/m-map-blur.vue'
+import mLineBlur from '@/components/m-line-blur/m-line-blur.vue'
 export default {
     data() {
         return {
@@ -516,7 +516,7 @@ export default {
             { text: '财运分析', point: 'cyfx' },
             { text: '婚姻情感', point: 'hyqg' },
             { text: '五行评语', point: 'wxpy' },
-            { text: '潮湿平衡', point: 'csph' },
+            // { text: '潮湿平衡', point: 'csph' },
             { text: '喜用数字', point: 'xysz' },
             { text: '格局脾气', point: 'gjpq' },
             { text: '称骨评语', point: 'cgpy' },
@@ -799,7 +799,7 @@ export default {
             isPay: 0,
             birthday: this.form.birthday,
         }).then(res => {
-            this.goodsId = res.data
+            this.goodsStatus = res.data
         })
 
 
@@ -813,11 +813,31 @@ export default {
                 goodsId: this.goodsStatus.id
             }).then(res => {
                 uni.requestPayment({
-                    ...res.data
+                    ...res.data,
+                    complete: () => {
+                        uni.showToast({
+                            title:'查询支付结果',
+                            icon:'loading',
+                            duration:3000
+                        })
+                        setTimeout(() => {
+                            api.order.studentBirthdayLog({
+                                sex: this.form.sex,
+
+                                name: this.form.username,
+                                isPay: 0,
+                                birthday: this.form.birthday,
+                            }).then(res => {
+                                uni.hide
+                                this.goodsStatus = res.data
+                            })
+                        }, 3000);
+                    }
                 }).then(res => {
                     console.log(res)
                 })
 
+
             })
         },
         filterBlurText(text, blur) {
@@ -828,6 +848,7 @@ export default {
     },
     components: {
         mMapBlur,
+        mLineBlur
     },
 };
 </script>
@@ -876,7 +897,7 @@ export default {
     font-weight: bold;
     display: inline-block;
     white-space: nowrap;
-    overflow-x: scroll;
+    overflow-y: scroll;
     padding-top: 30rpx;
 
     .categorys-item {
@@ -1243,7 +1264,7 @@ export default {
                 margin-top: 40rpx;
                 width: 400rpx;
                 text-align: center;
-                height: 80rpx;
+
                 line-height: 80rpx;
                 color: #F5EC5A;
                 border-radius: 40px;
@@ -1311,4 +1332,5 @@ export default {
             width: 100%;
         }
     }
-}</style>
+}
+</style>