学习：uniapp全栈微信小程序vue3后台（26） - 指南

126.将服务协议和隐私政策内容展示到页面中

是否开启广告

声明

热门搜索

用户协议隐私政策

/pages/agreement/agreement

import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue";
const dbJQL = uniCloud.databaseForJQL();
const detail = ref("")
let type;
onLoad((e) => {
type = e.type
uni.setNavigationBarTitle({
title: e.title
})
})
const getData = async () => {
let { data = {} } = await dbJQL.collection("wallpaper-system-config").orderBy("_id asc").limit(1)
.field(type)
.get({ getOne: true });
detail.value = data[type]
}
{{detail}}
.detail {
padding: 30rpx;
line-height: 1.7em;
text-indent: 2em;
}

127.创建硬币积分系统schema表及领取硬币逻辑

新建DB Schema

{
"bsonType": "object",
"required": [],
"permission": {
"read": "true",
"create": "true",
"update": "true",
"delete": "true"
},
"properties": {
"_id": {
"description": "存储文档 ID（用户 ID），系统自动生成"
},
"user_id": {
"bsonType": "string",
"description": "用户ID， 参考`uni-id-users` 表",
"foreignKey": "uni-id-users._id",
"defaultValue": {
"$env": "uid"
}
},
"total": {
"bsonType": "int",
"description": "积分总数",
"defaultValue": 0
},
"dayGet": {
"bsonType": "bool",
"description": "是否领取每日硬币",
"defaultValue": false
},
"record": {
"bsonType": "array",
"description": "操作记录",
"defaultValue": [],
"properties": {
"time": {
"bsonType": "timestamp",
"description": "操作时间",
"defaultValue": {
"$env": "now"
}
},
"score": {
"bsonType": "int",
"description": "积分流动数"
},
"desc": {
"bsonType": "string",
"description": "当前操作描述"
}
}
},
"ip": {
"bsonType": "string",
"description": "评论发表时 IP 地址",
"forceDefaultValue": {
"$env": "clientIP"
}
},
"createTime": {
"bsonType": "timestamp",
"description": "创建时间",
"defaultValue": {
"$env": "now"
}
}
},
"version": "0.0.1"
}

/uniCloud-alipay/cloudfunctions/client-user-action/index.obj.js

//每日获取硬币
async giveDayCoin() {
const dbJQL = uniCloud.databaseForJQL({
clientInfo: this.getClientInfo()
})
let res = await dbJQL.collection("wallpaper-activity-coin")
.where(`user_id == $cloudEnv_uid `)
.limit(1)
.get({ getOne: true });
return res;
}

/pages/user/user

//每日领币
const dayCoin = async () => {
console.log("每日领币");
if (!gotoLogin()) return;
try {
let { errCode } = await actionCloudObj.giveDayCoin();
if (errCode !== 0) return showToast({ title: "请重试" })
showToast({ title: "领取成功" });
} catch (err) {
showToast({ title: err.errMsg })
}
}

128.通过dayjs判断每日领币条件及实时更新硬币数量

npm i dayjs

/uniCloud-alipay/cloudfunctions/client-user-action/index.obj.js

新建js文件

import { defineStore } from 'pinia';
import { ref } from "vue";
const actionCloudObj = uniCloud.importObject("client-user-action", { customUI: true });
export const useCoinStore = defineStore('coin', () => {
const total = ref(0);
const getCoinCount = async () => {
total.value = await actionCloudObj.getCoinCount();
console.log(total.value);
}
return { total, getCoinCount };
});

/uniCloud-alipay/cloudfunctions/client-user-action/index.obj.js

async getCoinCount() {
let start = dayjs().startOf("day").valueOf()
let end = dayjs().endOf("day").valueOf()
const dbJQL = uniCloud.databaseForJQL({
clientInfo: this.getClientInfo()
})
let { data: { total = 0 } = {} } = await dbJQL.collection("wallpaper-activity-coin")
.where(`user_id == $cloudEnv_uid && createTime >= ${start} && createTime <= ${end}`)
.limit(1)
.field("total")
.get({ getOne: true });
return total;
},

/pages/user/user

129.看广告获取硬币的实现逻辑

不支持浏览器

/pages/user/user

//看广告获得硬币
const adCoin = () => {
if (!gotoLogin()) return;
if (uni.getSystemInfoSync().uniPlatform !== 'mp-weixin') return showToast({ title: "只支持微信小程序" })
console.log("看广告获得硬币");
}

看广告获取硬币

/uniCloud-alipay/cloudfunctions/client-user-action/index.obj.js

//看广告获取硬币
async giveAdCoin() {
let start = dayjs().startOf("day").valueOf()
let end = dayjs().endOf("day").valueOf()
const dbJQL = uniCloud.databaseForJQL({
clientInfo: this.getClientInfo()
})
let p1 = dbJQL.collection("wallpaper-activity-coin")
.where(`user_id == $cloudEnv_uid && createTime >= ${start} && createTime = ${start} && createTime <= ${end}`)
.update(params);
} else {
//新增
return await dbJQL.collection("wallpaper-activity-coin")
.add({
total: config.adCoin,
record: [recordItem]
})
}
},

/pages/user/user

const getAdcoin = async () => {
try {
uni.showLoading();
let { errCode } = await actionCloudObj.giveAdCoin();
if (errCode !== 0) return showToast({ title: "获取硬币失败，请重试" });
showToast({ title: `获取${config.value.adCoin}硬币` })
getCoin();
} catch (err) {
showToast({ title: err.errMsg })
}
}

130.微信小程序激励视频广告位的使用

/pages/user/user

{{userInfo.nickname|| '未登录'}}
硬币：{{coinStore.total}}
每日领币
+{{config.dayCoin}} / 日
看广告得币
+{{config.adCoin}}/ 次
硬币规则
说明
我的下载
{{record.downloadSize}}
我的评分
{{record.scoreSize}}
联系客服
订阅更新
常见问题
退出登录
退出当前账号
硬币规则说明
{{config.ruleCoin}}
确认
import pagesJson from '@/pages.json'
import { getNavBarHeight } from "@/utils/system.js"
import { apiUserInfo } from "@/api/apis.js"
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app"
import { getPageAndParams, gotoLogin, routerTo, showModal, showToast } from "@/utils/common.js"
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js'
import { useSystemStore } from "@/stores/system.js"
import { useCoinStore } from "@/stores/coin.js"
import { watch } from "vue";
const coinStore = useCoinStore();
const systemStore = useSystemStore();
const config = computed(() => systemStore.config)
const actionCloudObj = uniCloud.importObject("client-user-action", { customUI: true });
const userInfo = computed(() => store.userInfo);
const record = ref({ downloadSize: 0, scoreSize: 0 });
const rulePopRef = ref(null);
const hasLogin = computed(() => store.hasLogin);
let videoAd = null;
onLoad(() => {})
watch(() => config.value.rewardedVideo, (nv) => {
if (!config.value.rewardedVideo) return;
if (wx.createRewardedVideoAd) {
videoAd = wx.createRewardedVideoAd({
adUnitId: config.value.rewardedVideo
})
videoAd.onLoad(() => {})
videoAd.onError((err) => {
console.error('激励视频光告加载失败', err)
showToast({ title: "请稍后重试" })
})
videoAd.onClose((res) => {
if (res.isEnded) {
coinStore.getAdCoin();
} else {
showToast({ title: "广告未完播，无法获得奖励" })
}
})
}
}, { immediate: true })
const clickContact = () => {
uni.makePhoneCall({
phoneNumber: "114"
})
}
const getCoin = () => {
if (!hasLogin.value) return;
coinStore.getCoinCount();
}
const getRecord = async () => {
if (!hasLogin.value) return;
let res = await actionCloudObj.userHistoryCount();
record.value = res
}
//每日领币
const dayCoin = async () => {
console.log("每日领币");
if (!gotoLogin()) return;
try {
let { errCode } = await actionCloudObj.giveDayCoin();
if (errCode !== 0) return showToast({ title: "请重试" })
showToast({ title: "领取成功" });
} catch (err) {
showToast({ title: err.errMsg })
}
}
//看广告获得硬币
const adCoin = () => {
if (!gotoLogin()) return;
if (uni.getSystemInfoSync().uniPlatform !== 'mp-weixin') return showToast({ title: "只支持微信小程序" })
console.log("看广告获得硬币");
if (videoAd) {
videoAd.show().catch(() => {
// 失败重试
videoAd.load()
.then(() => videoAd.show())
.catch(err => {
console.error('激励视频 广告显示失败', err)
showToast({ title: "加载失败，请刷新重试" })
})
})
}
}
const getAdcoin = async () => {
try {
uni.showLoading();
let { errCode } = await actionCloudObj.giveAdCoin();
if (errCode !== 0) return showToast({ title: "获取硬币失败，请重试" });
showToast({ title: `获取${config.value.adCoin}硬币` })
getCoin();
} catch (err) {
showToast({ title: err.errMsg })
}
}
//硬币规则说明
const ruleCoin = () => {
rulePopRef.value.open();
}
//关闭硬币规则
const ruleClose = () => {
rulePopRef.value.close();
}
//退出登录
const logout = async () => {
let feedback = await showModal({ content: "是否确认退出登录" })
if (feedback == 'confirm') mutations.logout();
init();
}
//登录或者个人中心
const handleUserInfo = () => {
// 检查用户是否已登录（hasLogin.value）
if (hasLogin.value) {
// 如果已登录，跳转到用户信息页面
routerTo(`/uni_modules/uni-id-pages/pages/userinfo/userinfo`)
} else {
// 如果未登录，跳转到登录页面，并携带当前页面的路径和参数作为重定向 URL
routerTo(`/${pagesJson.uniIdRouter.loginPage}?uniIdRedirectUrl=${getPageAndParams()}`)
}
}
const downloadPage = () => {
if (!gotoLogin()) return;
routerTo('/pages/classlist/classlist?name=我的下载&type=download')
}
const scorePage = () => {
if (!gotoLogin()) return;
routerTo('/pages/classlist/classlist?name=我的评分&type=score')
}
const init = () => {
record.value = { downloadSize: 0, scoreSize: 0 };
coinStore.total = 0
}
//监听登录成功
uni.$on('uni-id-pages-login-success', () => {
getRecord();
getCoin();
})
getRecord();
getCoin();
.userLayout {
.userInfo {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 50rpx 0;
.box {
display: flex;
flex-direction: column;
align-items: center;
}
.avatar {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.name {
font-size: 44rpx;
color: #333;
padding: 20rpx 0 5rpx;
}
.other {
font-size: 26rpx;
color: #aaa;
}
}
.section {
width: 690rpx;
margin: 50rpx auto;
border: 1px solid #eee;
border-radius: 10rpx;
box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
.list {
.row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
height: 100rpx;
border-bottom: 1px solid #eee;
position: relative;
background: #fff;
&:last-child {
border-bottom: 0
}
.left {
display: flex;
align-items: center;
:deep() {
.uni-icons {
color: $brand-theme-color !important;
}
}
.text {
padding-left: 20rpx;
color: #666
}
}
.right {
display: flex;
align-items: center;
.text {
font-size: 28rpx;
color: #aaa;
}
}
button {
position: absolute;
top: 0;
left: 0;
height: 100rpx;
width: 100%;
opacity: 0;
}
}
.hoverRow {
transform: scale(0.99);
}
}
}
.grid {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(3, 1fr);
min-height: 160rpx;
margin-top: 0;
.item {
border-right: 1px solid #eee;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:last-child {
border-right: none
}
:deep() {
.uni-icons {
color: $brand-theme-color !important;
}
}
.title {
font-size: 26rpx;
padding: 8rpx 0 2rpx;
color: #666;
}
.des {
font-size: 22rpx;
color: #aaa;
}
}
.hoverItem {
transform: scale(0.96);
}
}
}
.rulePop {
background: #fff;
width: 80vw;
min-height: 200rpx;
border-radius: 20rpx;
padding-top: 50rpx;
.title {
font-size: 38rpx;
color: #333;
text-align: center;
}
.desc {
font-size: 30rpx;
color: #999;
line-height: 1.7em;
padding: 50rpx;
display: block;
}
.confirm {
border-top: 1px solid #eee;
line-height: 3.4em;
display: flex;
align-items: center;
justify-content: center;
color: $brand-theme-color;
font-size: 34rpx;
}
}

小程序累计用户数没满500人 T T