265 lines
7.4 KiB
Vue
265 lines
7.4 KiB
Vue
<template>
|
|
<view>
|
|
<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
|
|
<scroll-view class="list" scroll-y>
|
|
<view class="title">
|
|
设置
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">
|
|
声音设置
|
|
</view>
|
|
<view class="item-group">
|
|
<view class="item-audio">
|
|
<view class="item-audio-text">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐.png" mode="widthFix"></image>
|
|
<text style="padding-left: 8px;">背景音乐</text>
|
|
</view>
|
|
<view class="item-audio-bar">
|
|
<view class="item-audio-icon">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐off.png" mode="widthFix"></image>
|
|
</view>
|
|
<view style="flex: 1;justify-content: center;display: flex;" class="">
|
|
<slider style="width: 100%;" :value="audioBckValue * 100" activeColor="#000000" backgroundColor="#C4FF46" block-color="#C4FF46" block-size="16" @changing="changeAudioBck"/>
|
|
</view>
|
|
<view class="item-audio-icon" style="justify-content: flex-end;">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐on.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-audio">
|
|
<view class="item-audio-text">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐.png" mode="widthFix"></image>
|
|
<text style="padding-left: 8px;">音效音乐</text>
|
|
</view>
|
|
<view class="item-audio-bar">
|
|
<view class="item-audio-icon">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐off.png" mode="widthFix"></image>
|
|
</view>
|
|
<view style="flex: 1;justify-content: center;display: flex;" class="">
|
|
<slider style="width: 100%;" :value="audioClickValue * 100" activeColor="#000000" backgroundColor="#C4FF46" block-color="#C4FF46" block-size="16" @changing="changeAudioClick"/>
|
|
</view>
|
|
<view class="item-audio-icon" style="justify-content: flex-end;">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-音乐on.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="item-title">
|
|
基础设置
|
|
</view>
|
|
<view class="item-group" style="padding: 0 15px;">
|
|
<view class="item-base" @click="goUserAgreement">
|
|
<view class="">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-用户协议.png" mode="widthFix"></image>
|
|
</view>
|
|
<view style="flex: 1;padding: 0 10px;">
|
|
用户协议
|
|
</view>
|
|
<view class="">
|
|
<image style="height: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png"
|
|
mode="heightFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="item-base" @click="goPrivacyAgreement">
|
|
<view class="">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-用户协议.png" mode="widthFix"></image>
|
|
</view>
|
|
<view style="flex: 1;padding: 0 10px;">
|
|
隐私协议
|
|
</view>
|
|
<view class="">
|
|
<image style="height: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png"
|
|
mode="heightFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</touch-popup>
|
|
|
|
<popup-agreement ref="pAgreementUser" :agreementMode="0"></popup-agreement>
|
|
<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const app = getApp()
|
|
import {
|
|
ref,
|
|
defineExpose,
|
|
getCurrentInstance,
|
|
onMounted
|
|
} from 'vue'
|
|
const popup = ref() // ref组件
|
|
const pAgreementUser = ref()
|
|
const pAgreementPrivate = ref()
|
|
const {proxy} = getCurrentInstance()
|
|
|
|
const audioBckValue = ref(uni.getStorageSync('audio_bck')) // 背景音乐数值
|
|
const audioClickValue = ref(uni.getStorageSync('audio_click')) // 音效音乐数值
|
|
|
|
const screenWidth = ref(app.globalData.sysInfo.windowWidth)
|
|
|
|
onMounted(() => {
|
|
if (audioBckValue.value === '') {
|
|
audioBckValue.value = 0
|
|
uni.setStorageSync('audio_bck', 0)
|
|
}
|
|
if (audioClickValue.value === '') {
|
|
audioClickValue.value = 0
|
|
uni.setStorageSync('audio_click', 0)
|
|
}
|
|
})
|
|
|
|
const goUserAgreement = () => {
|
|
app.playAudio() // 点击音效
|
|
pAgreementUser.value.open()
|
|
}
|
|
const goPrivacyAgreement = () => {
|
|
app.playAudio() // 点击音效
|
|
pAgreementPrivate.value.open()
|
|
}
|
|
const changeAudioBck = (e) => {
|
|
if (audioBckValue.value == e) return
|
|
audioBckValue.value = e.detail.value / 100
|
|
uni.setStorageSync('audio_bck', e.detail.value / 100)
|
|
app.globalData.audioBck.volume = e.detail.value > 0 ? (e.detail.value / 100) : 0
|
|
}
|
|
const changeAudioClick = (e) => {
|
|
if (audioClickValue.value == e) return
|
|
audioClickValue.value = e.detail.value / 100
|
|
uni.setStorageSync('audio_click', e.detail.value / 100)
|
|
app.globalData.audioClick.volume = e.detail.value > 0 ? (e.detail.value / 100) : 0
|
|
}
|
|
const open = () => {
|
|
popup.value.open()
|
|
}
|
|
const close = () => {
|
|
proxy.$emit('close')
|
|
}
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* #ifdef H5 */
|
|
/deep/ .uni-slider-handle-wrapper{
|
|
height: 6px !important;
|
|
}
|
|
/deep/ .uni-slider-handle-wrapper::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 6px;
|
|
border: 2px solid #000;
|
|
box-sizing: border-box;
|
|
background-color: #C4FF46;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: -3px;
|
|
margin-left: -8px;
|
|
}
|
|
/deep/ .uni-slider-handle-wrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -3px;
|
|
border-radius: 6px;
|
|
border: 2px solid #000;
|
|
box-sizing: border-box;
|
|
background-color: #C4FF46;
|
|
width: 12px;
|
|
height: 12px;
|
|
top: -3px;
|
|
}
|
|
/deep/ .uni-slider-thumb {
|
|
border: 2px solid #000 !important;
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
width: 12px !important;
|
|
}
|
|
|
|
/* #endif */
|
|
.item-base image {
|
|
width: 24px;
|
|
height: auto;
|
|
}
|
|
|
|
.item-base view {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 21px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.item-base {
|
|
display: flex;
|
|
padding: 15px 0;
|
|
|
|
}
|
|
|
|
.item-audio-text {
|
|
display: flex;
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-audio-icon {
|
|
width: 30px;
|
|
display: flex;
|
|
}
|
|
|
|
.item-audio-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.item-audio image {
|
|
width: 18px;
|
|
height: auto;
|
|
}
|
|
|
|
.item-audio {}
|
|
|
|
.item-group {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.item-title {
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 21px;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.item {
|
|
padding: 15px;
|
|
}
|
|
|
|
.title {
|
|
padding: 30px 15px 15px 15px;
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 27px;
|
|
text-align: center;
|
|
}
|
|
|
|
.list {
|
|
height: 100%;
|
|
}
|
|
</style> |