|
|
@@ -0,0 +1,309 @@
|
|
|
+<template>
|
|
|
+ <up-popup :show="showPopup" round="8" mode="center" closeable @close="handleCancel">
|
|
|
+ <view class="blessings-popup">
|
|
|
+ <view class="blessings-title">每日祝福</view>
|
|
|
+ <view class="blessings-cont">
|
|
|
+ <view class="head">
|
|
|
+ <view class="common-title">
|
|
|
+ <view class="line"></view>
|
|
|
+ <text>随机祝福</text>
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="getRandomPick">
|
|
|
+ <icon name="exchange" />
|
|
|
+ <text>换一换</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="blessings-list">
|
|
|
+ <view v-for="(item, index) in list" :key="index" class="blessings-item"
|
|
|
+ :class="{ active: activeIndex === index }" @click="handleMsg(index, item)">
|
|
|
+ {{ item.clockinText }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <up-textarea class="message-field" v-model="message" placeholder="给 TA 一份暖心的祝福吧~"
|
|
|
+ autoHeight></up-textarea>
|
|
|
+ </view>
|
|
|
+ <view class="blessings-footer">
|
|
|
+ <view @click="handleCancel">取消</view>
|
|
|
+ <view class="send" @click="handleSend">发送</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-popup>
|
|
|
+ <!-- 祝福成功弹窗 -->
|
|
|
+ <up-popup :show="sucessPopup" mode="center" @close="handleCancelSucess" bgColor="transparent">
|
|
|
+ <view class="sucess-popup" @click="handleCancelSucess">
|
|
|
+ <view class="sucess-bg">
|
|
|
+ <image class="img" :src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess.png`"></image>
|
|
|
+ </view>
|
|
|
+ <view class="button-group" @click="handlePage">
|
|
|
+ <view class="btn">开心收下</view>
|
|
|
+ <up-icon class="close" name="close-circle-fill" size="30" color="rgba(255, 255, 255, 0.7)"></up-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import config from "@/api/config.js"
|
|
|
+ import {
|
|
|
+ onActivated,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+ watch
|
|
|
+ } from "vue";
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ defalut: false,
|
|
|
+ },
|
|
|
+ farmBuyId: {
|
|
|
+ type: [Number, String],
|
|
|
+ defalut: "",
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const handlePage = () => {
|
|
|
+ // if (userInfo.value.tel) {
|
|
|
+ // router.push('/guard_tree')
|
|
|
+ // } else {
|
|
|
+ // router.push('/lj_home')
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const showPopup = ref(false);
|
|
|
+ const message = ref("");
|
|
|
+ const activeIndex = ref(null);
|
|
|
+ const list = ref([]);
|
|
|
+
|
|
|
+ const handleCancel = () => {
|
|
|
+ activeIndex.value = null;
|
|
|
+ message.value = "";
|
|
|
+ showPopup.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleCancelSucess = () => {
|
|
|
+ sucessPopup.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const getRandomPick = () => {
|
|
|
+ list.value = [{
|
|
|
+ id: 1,
|
|
|
+ clockinText: '晨曦微露，阳光洒满大地'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ clockinText: '新的一天，新的挑战，新的机会'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ clockinText: '记住，每一次挫折都是成功的垫脚石'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ clockinText: '道阻且长，行则将至，行而不辍，未来可期。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ clockinText: '每日数据的更替，是日积月累的结果'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ clockinText: '不必在意他人目光与期待'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // VE_API.guard_tree.randomPick({
|
|
|
+ // count: 6
|
|
|
+ // }).then(({
|
|
|
+ // data
|
|
|
+ // }) => {
|
|
|
+ // list.value = data || [];
|
|
|
+ // if (activeIndex.value != null) {
|
|
|
+ // message.value = data[activeIndex.value].clockinText;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleMsg = (index, item) => {
|
|
|
+ activeIndex.value = index;
|
|
|
+ message.value = item.clockinText;
|
|
|
+ };
|
|
|
+
|
|
|
+ const sucessPopup = ref(false);
|
|
|
+
|
|
|
+ const handleSend = () => {
|
|
|
+ const params = {
|
|
|
+ farmBuyId: props.farmBuyId,
|
|
|
+ clockinType: 3,
|
|
|
+ msg: message.value,
|
|
|
+ };
|
|
|
+ handleCancel();
|
|
|
+ sucessPopup.value = true;
|
|
|
+ // VE_API.guard_tree.clockin(params).then((res) => {
|
|
|
+ // if (res.code === 0) {
|
|
|
+ // handleCancel();
|
|
|
+ // sucessPopup.value = true;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getRandomPick();
|
|
|
+ });
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.show,
|
|
|
+ () => {
|
|
|
+ showPopup.value = true;
|
|
|
+ }
|
|
|
+ );
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ @import "@/static/style/mixin.scss";
|
|
|
+
|
|
|
+ .blessings-popup {
|
|
|
+ width: 90vw;
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 190rpx;
|
|
|
+ right: 0;
|
|
|
+ z-index: 2;
|
|
|
+ @include ossBg("subTreePage/blessing-bg.png");
|
|
|
+ width: 336rpx;
|
|
|
+ height: 336rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blessings-title {
|
|
|
+ font-size: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ }
|
|
|
+
|
|
|
+ .blessings-cont {
|
|
|
+ margin: 40rpx 0 48rpx;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .common-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: #F3C11D;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #f3c11d;
|
|
|
+ padding: 8rpx 24rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: rgba(243, 193, 29, 0.1);
|
|
|
+ border: 1px solid #f3c11d;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .blessings-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .blessings-item {
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: #f4f6f8;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #fff2c4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .blessings-footer {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ view {
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .send {
|
|
|
+ margin-left: 26rpx;
|
|
|
+ color: #fff;
|
|
|
+ background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sucess-popup {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+
|
|
|
+ .sucess-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 920rpx;
|
|
|
+ @include ossBg("subTreePage/light-effect-bg.png");
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 82%;
|
|
|
+ height: 410rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-group {
|
|
|
+ margin: 46rpx auto;
|
|
|
+ width: 312rpx;
|
|
|
+ .btn {
|
|
|
+ font-size: 44rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ color: #954600;
|
|
|
+ background: linear-gradient(120deg, #FFE6B2, #FFC339);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ margin-top: 80rpx;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
wangsisi