main
parent
2d5093ca8d
commit
884296bd8b
|
|
@ -0,0 +1,2 @@
|
|||
unpackage/
|
||||
node_modules/
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"version" : "1.0",
|
||||
"configurations" : [
|
||||
{
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"h5" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"provider" : "aliyun",
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: async function() {
|
||||
this.globalData.sysInfo = uni.getSystemInfoSync()
|
||||
let token = uni.getStorageSync('jinxiangguo_login_token')
|
||||
this.globalData.token = token
|
||||
if (token) {
|
||||
uni.request({
|
||||
url: this.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + token
|
||||
},
|
||||
success: (res) => {
|
||||
this.globalData.userinfo = res.data.data
|
||||
}
|
||||
})
|
||||
// #ifdef H5
|
||||
let sharecode = this.getQueryString('code')
|
||||
if (sharecode) {
|
||||
this.globalData.helpCode = sharecode
|
||||
this.doHelp()
|
||||
}
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef MP-WEIXIN
|
||||
const loginPromise = new Promise((resolve, reject) => {
|
||||
wx.cloud.init()
|
||||
let that = this
|
||||
wx.cloud.callFunction({
|
||||
name:'getOpenid'
|
||||
}).then(res => {
|
||||
// 根据unionid从后台要用户信息
|
||||
uni.request({
|
||||
url: that.globalData.requestUrl + '/api/user/wxLogin',
|
||||
data: {
|
||||
unionid: res.result.unionid
|
||||
},
|
||||
success(resuser) {
|
||||
console.log('登录结果', resuser.data)
|
||||
that.globalData.unionid = res.result.unionid
|
||||
if (resuser.data.data.user) {
|
||||
that.globalData.userinfo = resuser.data.data.user
|
||||
that.globalData.token = resuser.data.data.token
|
||||
}
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
this.globalData.loginPromise = loginPromise
|
||||
// #endif
|
||||
}
|
||||
|
||||
let audio_bck = uni.getStorageSync('audio_bck')
|
||||
let audio_click = uni.getStorageSync('audio_click')
|
||||
if (audio_bck === '') audio_bck = 0
|
||||
if (audio_click === '') audio_click = 0
|
||||
|
||||
const audioBck = uni.createInnerAudioContext()
|
||||
audioBck.loop = true
|
||||
audioBck.volume = audio_bck
|
||||
audioBck.src = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/audio/bck.mp3'
|
||||
this.globalData.audioBck = audioBck
|
||||
|
||||
const audioClick = uni.createInnerAudioContext()
|
||||
audioClick.autoplay = true
|
||||
audioClick.volume = audio_click
|
||||
audioClick.src = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/audio/click.mp3'
|
||||
this.globalData.audioClick = audioClick
|
||||
|
||||
setTimeout(() => {
|
||||
this.globalData.isFirstOnLoad = false
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5
|
||||
preloadImages: async function(urls) {
|
||||
const promises = urls.map(url => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image();
|
||||
image.src = url;
|
||||
image.onload = () => resolve(url);
|
||||
image.onerror = reject;
|
||||
});
|
||||
});
|
||||
|
||||
return Promise.all(promises);
|
||||
},
|
||||
wxinit: function() {
|
||||
uni.request({
|
||||
url: this.globalData.requestUrl + '/api/user/getJSSDK',
|
||||
data: {
|
||||
url: location.origin + location.pathname + location.search
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data.data)
|
||||
res.data.data.openTagList = ['wx-open-launch-weapp']
|
||||
this.$wx.config(res.data.data)
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '微信配置初始化失败',
|
||||
icon: 'fail'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
isWechat: function() {
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/micromessenger/i) == 'micromessenger') {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 正则获取url参数
|
||||
getQueryString: function (name) {
|
||||
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if(r!=null)return unescape(r[2]); return null;
|
||||
},
|
||||
// #endif
|
||||
doHelp: function() {
|
||||
let that = this
|
||||
uni.request({
|
||||
url: this.globalData.requestUrl + '/api/user/code/save',
|
||||
data: {
|
||||
code: this.globalData.helpCode
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + this.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success(res) {
|
||||
if (res.data.code === 200) {
|
||||
that.globalData.helpCode = ''
|
||||
uni.showToast({
|
||||
title: '助力成功',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
playAudio: function () {
|
||||
// 播放点击效果和背景音乐
|
||||
if (this.globalData.audioBck.paused) {
|
||||
this.globalData.audioBck.play()
|
||||
}
|
||||
if (this.globalData.audioClick.paused) {
|
||||
this.globalData.audioClick.play()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
if (!this.globalData.isFirstOnLoad && this.globalData.audioBck.paused) {
|
||||
this.globalData.audioBck.play()
|
||||
}
|
||||
},
|
||||
onHide: function() {
|
||||
if (!this.globalData.audioBck.paused) {
|
||||
this.globalData.audioBck.pause()
|
||||
}
|
||||
},
|
||||
globalData: {
|
||||
isFirstOnLoad: true, // 是否首次启动
|
||||
sysInfo: {}, // 系统信息
|
||||
audioBck: {}, // 背景音乐
|
||||
audioClick: {}, // 点击音乐
|
||||
|
||||
requestUrl: process.env.NODE_ENV === 'development' ?
|
||||
'http://jinxiangguo.tianci.com' :
|
||||
'https://www.quxun.fun',
|
||||
token: '', // 请求用token
|
||||
unionid: '',
|
||||
userinfo: {}, // 用户信息
|
||||
helpCode: '', // 助力code
|
||||
isReloadMarkers: true, // 是否需要重算硬币与圈圈
|
||||
mapKey: 'FRDBZ-UU6L3-AOV3E-RSLD3-Y2PJ3-4MBYS' ,// 正式腾讯地图key
|
||||
// mapKey: '6I7BZ-SUIKL-GVMPP-EY5NY-3PORV-GYBCH' // 测试腾讯地图key
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
uni-toast {
|
||||
z-index: 10000;
|
||||
}
|
||||
uni-modal {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
/* #ifdef MP-WEIXIN */
|
||||
wx-slider .wx-slider-handle-wrapper{
|
||||
height: 6px !important;
|
||||
}
|
||||
wx-slider .wx-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;
|
||||
}
|
||||
wx-slider .wx-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;
|
||||
}
|
||||
wx-slider .wx-slider-thumb {
|
||||
border: 2px solid #000 !important;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
width: 12px !important;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# 宝藏猎人-Home
|
||||
|
||||
#### Description
|
||||
宝藏猎人前端
|
||||
|
||||
#### Software Architecture
|
||||
Software architecture description
|
||||
|
||||
#### Installation
|
||||
|
||||
1. xxxx
|
||||
2. xxxx
|
||||
3. xxxx
|
||||
|
||||
#### Instructions
|
||||
|
||||
1. xxxx
|
||||
2. xxxx
|
||||
3. xxxx
|
||||
|
||||
#### Contribution
|
||||
|
||||
1. Fork the repository
|
||||
2. Create Feat_xxx branch
|
||||
3. Commit your code
|
||||
4. Create Pull Request
|
||||
|
||||
|
||||
#### Gitee Feature
|
||||
|
||||
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
|
||||
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
|
||||
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
|
||||
4. The most valuable open source project [GVP](https://gitee.com/gvp)
|
||||
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
|
||||
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# 宝藏猎人-Home
|
||||
|
||||
#### 介绍
|
||||
宝藏猎人前端
|
||||
|
||||
#### 软件架构
|
||||
软件架构说明
|
||||
|
||||
|
||||
#### 安装教程
|
||||
|
||||
1. xxxx
|
||||
2. xxxx
|
||||
3. xxxx
|
||||
|
||||
#### 使用说明
|
||||
|
||||
1. xxxx
|
||||
2. xxxx
|
||||
3. xxxx
|
||||
|
||||
#### 参与贡献
|
||||
|
||||
1. Fork 本仓库
|
||||
2. 新建 Feat_xxx 分支
|
||||
3. 提交代码
|
||||
4. 新建 Pull Request
|
||||
|
||||
|
||||
#### 特技
|
||||
|
||||
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
|
||||
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
|
||||
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
|
||||
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
|
||||
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
|
||||
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popupAgreement" background="linear-gradient(180deg, #FFFFFB -19.14%, #FFFEEB 50.07%)" :backShow="true">
|
||||
<scroll-view scroll-y class="list">
|
||||
<view v-if="agreementMode === 0" class="agreement">
|
||||
<view>一、前言</view>
|
||||
<view class="p">宝藏猎人是义乌趣巡科技有限公司（以下简称“我们”）开发运营和管理的生活服务类产品（以下简称“本产品”）。我们充分尊重和保护用户的个人隐私。在为你提供优质服务的同时，我们将根据本“用户协议”（以下简称“本协议”）收集、使用、披露、存储和保护的个人数据。为了更好地为你提供产品及服务，请你在开始使用本产品之前，务必认真完整阅读并充分理解本协议，特别是涉及免除或者限制责任的条款、权利许可和信息使用的条款、同意开通和使用特殊单项服务的条款、法律适用和争议解决条款等。其中，免除或者限制责任条款等重要内容将以加粗形式提示你注意，你应重点阅读。</view>
|
||||
<view>本协议就本产品以及你对本产品的使用，构成你与我们之间具有法律约束力的协议。除非你已阅读并接受本协议所有条款，否则请勿使用本产品。如你不同意本协议，我们将无法为你正常提供服务。一旦你使用本产品，即视为你已阅读并同意接受本协议及其他与本协议相关协议和规则的约束。</view>
|
||||
<view class="p">未成年人员声称接受本协议条款均属无效。如果你属于符合上述条件的未成年人，你应在监护人的陪同下阅读本协议条款及使用本产品，并且在你的监护人确认同意的情况下使用本产品。</view>
|
||||
<view class="p">二、关于宝藏猎人</view>
|
||||
<view class="p">目标：为用户提供优惠券服务，并给予其寻宝功能。</view>
|
||||
<view class="p">主要功能：定位地图范围内的多种硬币，通过小程序寻找使用。</view>
|
||||
<view class="p">三、用户信息</view>
|
||||
<view class="p">3.1、我们尊重授权用户的合法权利，尊重授权用户的自由选择权，不会以违反法律、行政法规以及本协议约定的方式收集、使用用户信息，仅会在用户授权或《隐私政策》约定免责情况下，以信息受保护方式，向第三方提供用户信息。我们竭尽全力保护用户隐私信息，配合本协议和《隐私政策》对用户信息的获取、授权、使用做了更加明确的说明与解释。《隐私政策》为本协议不可分割的一部分。</view>
|
||||
<view>3.2、特别说明：用户信息删除的选择权。注册用户在使用过程中发现有任何不妥或者不满意之处，有权通过软件内的账号注销功能主动删除相关信息，亦可通过电子邮箱（） 向客服团队申请相关信息之删除。</view>
|
||||
<view class="p">
|
||||
四、使用规则
|
||||
</view>
|
||||
<view class="p">
|
||||
4.1、用户完全了解并同意：用户对以其帐号注册、登录、使用本产品的全部行为，包括其提供给我们的全部用户信息、以其本产品帐号进行的所有行为和事件独立承担完全的法律责任。
|
||||
</view>
|
||||
<view class="p">
|
||||
4.2、用户同意在使用本产品过程中，严格遵守以下规则：
|
||||
</view>
|
||||
<view>（1）遵守中国法律、法规、行政规章及规范性文件；</view>
|
||||
<view>（2）遵守所有与本产品及服务有关的协议、规定、程序、通知、使用守则等全部文件；</view>
|
||||
<view>（3）不得为任何违法、犯罪目的而使用本产品；</view>
|
||||
<view>（4）不得以任何形式使用本产品及服务侵犯本产品及其运营方的合法权利；</view>
|
||||
<view>（5）不得利用本产品之服务进行任何可能对互联网正常运转造成不利影响的行为；</view>
|
||||
<view>（6）不得利用我们提供的服务上传、展示或传播任何虚假的、骚扰性的、中伤他人的、种族歧视性的、辱骂性的、恐吓性的、情色的或其他违反国家法律法规政策的信息（详见第4.10.b款）；</view>
|
||||
<view>（7）不得以任何方式侵犯其他任何人依法享有的专利权、著作权、商标权、商业秘密等知识产权，第三人的名誉权或其他任何第三方的合法权益；</view>
|
||||
<view>（8）保证在本产品及服务上展示的相关信息内容，包括但是不限于在前条“用户信息条款”中的内容，没有违反相关法律规定，没有侵犯第三方的合法权利。</view>
|
||||
<view class="p">4.3、我们有权对用户使用本产品及服务的情况进行审查和监督（包括但不限于自行或委托第三方对用户上传、发布和传播的内容进行必要的合法性审查），如用户在使用本产品及服务时违反任何上述约定，我们有权要求用户改正或直接单方面采取一切必要措施，以消除或减轻用户不当行为给我们、第三方、互联网服务或社会公共利益造成的任何影响。我们在进行前述操作前，操作过程中或操作完成后不对用户进行任何方式的通知。</view>
|
||||
<view class="p">4.4、如发生下列任何一种情形，本产品运营方有权随时中断或终止向用户提供本协议项下的本产品及服务（包括收费服务和免费服务）而无需对用户或任何第三方承担任何责任，由此造成的损失由用户自行独立承担：</view>
|
||||
<view>4.4.1、用户提供的个人资料不真实；</view>
|
||||
<view>4.4.2、用户违反法律法规国家政策或本协议中规定的使用规则；</view>
|
||||
<view>4.4.3、用户在使用收费服务时未按规定为其所使用的收费服务向本公司支付相关服务费用；</view>
|
||||
<view>4.4.4、用户侵犯个人、企业事业单位或社会团体的合法权益，包括但不限于专利权、著作权、商标权，或姓名权、名称权、名誉权、荣誉权、肖像权、隐私权等；</view>
|
||||
<view>4.4.5、用户损害监管部门、国家机关及政府形象；用户以任何方式损害本产品运营方及其关联公司的商誉或信誉等合法权益；</view>
|
||||
<view>4.4.6、本产品运营方有其他合理理由认为需要中断或终止向用户提供本产品及服务。</view>
|
||||
<view class="p">4.5、如用户在申请开通本产品之服务后在任何连续180日内未实际使用，则本产品运营方有权在法律法规允许的范围内选择采取以下任何一种方式进行处理：</view>
|
||||
<view>4.5.1 、回收用户昵称或（及）帐号；</view>
|
||||
<view>4.5.2 、停止为该用户提供本产品及之服务。</view>
|
||||
<view class="p">4.6、用户选择将本产品帐号与本产品运营方合作的第三方帐号进行绑定的，除用户自行解除绑定关系外，如发生下列任何一种情形，用户已绑定的第三方帐号也有可能被解除绑定，本产品运营方无需对用户或任何第三方承担任何责任：</view>
|
||||
<view>4.6.1 、用户违反法律法规国家政策、本协议的；</view>
|
||||
<view>4.6.2 、用户违反第三方用户协议或其相关规定的；</view>
|
||||
<view>4.6.3 、第三方帐号所属的站方要求解除绑定的；</view>
|
||||
<view>4.6.4 、第三方帐号所属平台或业务已关停的；</view>
|
||||
<view>4.6.5 、依据法律法规国家政策规定或主管部门要求的；</view>
|
||||
<view>4.6.6 、本产品运营方有合理理由认为需要解除绑定的。</view>
|
||||
<view class="p">4.7、用户同意本产品运营方在提供本产品服务过程中以各种方式投放各种商业性广告或其他任何类型的商业信息（包括但不限于在本产品之平台网站的任何页面上投放广告）且用户同意接受本产品运营方通过电子邮件、私信或其他方式向用户发送商品促销或其他相关商业信息。</view>
|
||||
<view class="p">4.8、用户同意，我们有权随时变更、中止或终止部分或全部的生活服务，我们无需就此提前通知用户，我们不因此对用户或任何第三方承担任何责任。</view>
|
||||
|
||||
<view class="p">4.9、用户承诺：</view>
|
||||
<view>其一经取得利用本产品服务提供的网络服务上传、发布、传送或通过其他方式传播的内容的权利人（如有）的书面授权，并已与前述权利人就权益分配达成内部协议，保证其在将相关内容提交、上传至本产品服务前拥有充分、完整无瑕疵、排他的所有权及知识产权。</view>
|
||||
<view>用户利用本产品提供的网络服务上传、发布、传送或通过其他方式传播的内容，不得含有任何违反国家法律法规政策的信息，包括但不限于下列信息：</view>
|
||||
<view>反对宪法所确定的基本原则的；</view>
|
||||
<view>危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</view>
|
||||
<view>损害国家荣誉和利益的；</view>
|
||||
<view>煽动民族仇恨、民族歧视，破坏民族团结的；</view>
|
||||
<view>破坏国家宗教政策，宣扬邪教和封建迷信的；</view>
|
||||
<view>散布谣言，扰乱社会秩序，破坏社会稳定的；</view>
|
||||
<view>散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</view>
|
||||
<view>侮辱或者诽谤他人，侵害他人合法权益的；</view>
|
||||
<view>含有法律、行政法规禁止的其他内容的。</view>
|
||||
<view>用户不得利用本产品的服务从事以下活动：</view>
|
||||
<view>未经允许，进入计算机信息网络或者使用计算机信息网络资源的；</view>
|
||||
<view>未经允许，对计算机信息网络功能进行删除、修改或者增加的；</view>
|
||||
<view>未经允许，对进入计算机信息网络中存储、处理或者传输的数据和应用程序进行删除、修改或者增加的；</view>
|
||||
<view>故意制作、传播计算机病毒等破坏性程序的；</view>
|
||||
<view>其他危害计算机信息网络安全的行为。</view>
|
||||
<view>如因用户利用本产品提供的网络服务上传、发布、传送或通过其他方式传播的内容存在权利瑕疵或侵犯了第三方的合法权益（包括但不限于专利权、商标权、著作权及著作权邻接权、肖像权、隐私权、名誉权等）而导致我们或与我们合作的其他单位面临任何投诉、举报、质询、索赔、诉讼；或者使我们或者与我们合作的其他单位因此遭受任何名誉、声誉或者财产上的损失，用户应积极地采取一切 可能采取的措施，以保证我们及与我们合作的其他单位免受上述索赔、诉讼的影响。同时用户对我们及与我们合作的其他单位因此遭受的直接及间接经济损失负有全部的损害赔偿责任。</view>
|
||||
<view class="p">4.10、此外，你已知悉并同意：在现行法律法规允许的范围内，本产品运营方可能会将你非敏感的个人信息用于市场营销，使用方式包括但不限于：本产品运营方会使用你所提供信息在本产品及平台中向你展示或提供广告和促销资料，向你通告或推荐本产品的服务或产品信息，以及其他此类根据你使用本产品的情况所认为你可能会感兴趣的信息。其中也包括你在采取授权等某动作时选择分享的信息，例如当你新增好友、在动态中新增地标、使用本产品的联络人汇入工具等。</view>
|
||||
<view class="p">五、所有权</view>
|
||||
<view class="p">5.1、“知识产权”是指与本产品服务相关的各种类的过去有效的、现行有效的、或即将产生的知识产权，包括但不限于发明专利、商标、著作权、实用新型、外观设计、布图设计、商业秘密、其他知识产权以及相关申请的权利。</view>
|
||||
<view class="p">5.2、我们保留对以下各项内容、信息完全的、不可分割的所有权及知识产权：</view>
|
||||
<view>除用户自行上载、传播的内容外，本产品及其所有元素，包括但不限于所有内容、数据、技术、软件、代码、用户界面以及与其相关的任何衍生作品；</view>
|
||||
<view>用户信息；</view>
|
||||
<view>用户本产品提供的与该服务相关的任何信息及反馈。</view>
|
||||
<view>未经我们同意，上述资料均不得在任何媒体直接或间接发布、播放、出于播放或发布目的而改写或再发行，或者被用于其他任何商业目的。上述资料或其任何部分仅可作为私人用途而保存在某台计算机内。本产品不就由上述资料产生或在传送或递交全部或部分上述资料过程中产生的延误、不准确、错误和遗漏或从中产生或由此产生的任何损害赔偿，以任何形式向用户或任何第三方负法律、经济责任；</view>
|
||||
<view>本产品为提供网络服务而使用的任何软件（包括但不限于软件中所含的任何图像、照片、动画、录像、录音、音乐、文字和附加程序、随附的帮助材料）的一切权利均属于该软件的著作权人，未经该软件的著作权人许可，用户不得对该软件进行反向工程（reverse engineer）、反向编译（decompile）或反汇编（disassemble），或以其他方式发现其原始编码，以及实施任何涉嫌侵害著作权的行为。</view>
|
||||
<view class="p">5.3、对于用户本人创作并上传到本产品及网站或平台的任何文本、图片、图形、音频或视频等，我们保留对其内容进行实时监控的权利，并有权依我们独立判断对任何违反本协议约定或涉嫌违法、违规的内容实施删除。我们对于删除用户作品引起的任何后果或导致用户的任何损失不负任何责任。</view>
|
||||
<view class="p">5.4、本条款非经我们书面同意将持续有效，不因用户关闭本产品服务帐户或者停止使用本产品而失效。</view>
|
||||
<view class="p">六、知识产权保护</view>
|
||||
<view>如果用户上传的内容允许其他用户下载、查看、收听或以其他方式访问或分发，其必须保证该内容的发布和相关行为实施符合相关知识产权法律法规中相关的版权政策，包括但不限于：</view>
|
||||
<view>用户在收到侵权通知之时，应立即删除或禁止访问声明的侵权内容，并同时联系递送通知的人员以了解详细信息。</view>
|
||||
<view>用户知悉并同意我们将根据相关法律法规对第三方发出的合格的侵权通知进行处理，并按照要求删除或禁止访问声明的侵权内容，采用并实施适当的政策，对其做出限制或禁止使用部分功能、直至封禁该帐号网盘功能的处罚，以期杜绝在相应条件下重复侵权。</view>
|
||||
<view class="p">七、其他免责声明</view>
|
||||
|
||||
<view class="p">7.1、信息依现状提供。我们提供的全部服务信息仅依照该等信息提供时的现状提供并仅供用户参考，我们不对前述信息的准确性、完整性、适用性等做任何承诺和保证。用户应对我们提供的信息自行判断，并承担因使用前述信息而引起的任何、全部风险，包括因其对信息的正确性、完整性或实用性的任何依赖或信任而导致的风险。我们无需对因用户使用信息的任何行为导致的任何损失承担责任。</view>
|
||||
|
||||
<view class="p">7.2、对于因不可抗力或我们不能预料、或不能控制的原因（包括但不限于计算机病毒或黑客攻击、系统不稳定、用户不当使用帐户、以及其他任何技术、互联网络、通信线路原因等）造成的包括但不限于用户计算机信息和数据的安全，用户个人信息的安全等给用户或任何第三方造成的任何损失等，我们不承担任何责任。</view>
|
||||
|
||||
<view class="p">7.3、由于用户以违法、违规或违反本协议约定等任何方式使用本产品服务的行为，包括但不限于登录网站内容违法、不真实、不正当，侵犯第三方任何合法权益等，给我们或其他第三人造成的任何损失，用户同意承担由此造成的全部损害赔偿责任。</view>
|
||||
|
||||
<view class="p">7.4、我们及其合作方对本产品服务的任何及全部内容不作任何形式的承诺或保证，不论是明确的或暗示的。前述承诺或保证包括但不限于：本产品服务真实性、适销性、对特定用途的适用性、任何形式的所有权保证，非侵权保证等。我们对因前述未做承诺或保证的内容导致的任何直接、间接、偶然、特殊及后续的损害，不承担任何责任。</view>
|
||||
<view class="p">八、适用法律和争议解决</view>
|
||||
|
||||
<view class="p">8.1、本协议的成立、生效、履行、解释及因本协议产生的任何争议，均适用中华人民共和国法律（不包括港澳台地区法律）。</view>
|
||||
|
||||
<view class="p">8.2、用户和我们之间与本协议有关的任何争议，首先应友好协商解决，在争议发生之日起九十日内仍不能通过协商达成一致的，用户在此同意将前述争议提交义乌趣巡科技有限公司所在地的人民法院进行诉讼。</view>
|
||||
<view class="p">九、未成年人使用条款</view>
|
||||
<view class="p">9.1、若用户未满18周岁，则为未成年人，应在监护人监护、指导下阅读本协议和使用本服务。</view>
|
||||
<view class="p">9.2、未成年人用户涉世未深，容易被网络虚像迷惑，且好奇心强，遇事缺乏随机应变的处理能力，很容易被别有用心的人利用而又缺乏自我保护能力。因此，未成年人用户在使用本服务时应注意以下事项，提高安全意识，加强自我保护。</view>
|
||||
<view class="p">9.3、认清网络世界与现实世界的区别，避免沉迷于网络，影响日常的学习生活。</view>
|
||||
<view class="p">9.4、填写个人资料时，加强个人保护意识，以免不良分子对个人生活造成骚扰。</view>
|
||||
<view class="p">9.5、在监护人或老师的指导下，学习正确使用网络。</view>
|
||||
<view class="p">9.6、避免陌生网友随意会面或参与联谊活动，以免不法分子有机可乘，危及自身安全。</view>
|
||||
<view class="p">9.7、监护人、学校均应对未成年人使用本服务多做引导。特别是家长应关心子女的成长，注意与子女的沟通，指导子女上网应该注意的安全问题，防患于未然。</view>
|
||||
<view class="p">9.8、已满18周岁的成年人因任何原因不具备完全民事行为能力的，参照适用本协议之未成年人使用条款之相关约定。</view>
|
||||
<view class="p">十、其他规定</view>
|
||||
<view class="p">10.1、宝藏猎人运营方有权随时修改本协议的任何条款，一旦本协议的内容发生变动，宝藏猎人运营方将会在APP内关于页面中公布修改之后的协议内容，宝藏猎人运营方也可选择通过其他适当方式（比如系统通知）向用户通知修改内容。</view>
|
||||
|
||||
<view class="p">10.2、如果不同意宝藏猎人运营方对本协议相关条款所做的修改，用户有权停止使用本产品的服务。如果用户继续使用本产品的服务，则视为用户接受宝藏猎人运营方对本协议相关条款所做的修改。</view>
|
||||
|
||||
<view class="p">10.3、如本协议中的任何条款因任何原因完全或部分无效或不具有执行力，均不影响本协议其他条款的效力。</view>
|
||||
<view>若你对我们及本服务有任何意见，欢迎通过邮件 与我们沟通。</view>
|
||||
</view>
|
||||
<view v-else class="agreement">
|
||||
<view class="title1">本指引是宝藏猎人小程序开发者“义乌趣巡网络科技有限公司”（以下简称“开发者”）为处理你的个人信息而制定。</view>
|
||||
<view class="title2">1、开发者处理的信息</view>
|
||||
<view>·为了在寻找硬币时附加位置信息，开发者将在获取你的明示同意后，收集你的位置信息。</view>
|
||||
<view>·为了应网信办《互联网论坛社区服务管理规定》要求，开发者将在获取你的明示同意后，收集你的手机号。</view>
|
||||
<view>·为了实现海报分享功能，开发者将在获取你的明示同意后，使用你的相册（仅写入）权限。</view>
|
||||
<view>·开发者收集你选中的照片或视频信息，用于在找到硬币后附加图片、视频。</view>
|
||||
<view>·开发者读取你的剪切板，用于实现复制文本功能。</view>
|
||||
<view>·开发者使用你的日历（仅写入）权限，用于提醒会议日程。</view>
|
||||
<view>·开发者收集你选中的文件，用于在发帖时添加加附件。</view>
|
||||
<view class="title2">2、你的权益</view>
|
||||
<view>2.1 关于收集你的位置信息、使用你的相册（仅写入）权限、获取你选择的位置信息，你可以通过以下路径：小程序主页右上角“…”—“设置”—点击特定信息—点击“不允许”，撤回对开发者的授权。</view>
|
||||
<view>2.2 关于收集你的手机号、收集你的地址、收集你选中的照片或视频信息、读取你的剪切板、收集你选中的文件，你可以通过以下路径：小程序主页右上角“...” — “设置” — “小程序已获取的信息” — 点击特定信息 — 点击“通知开发者删除”，开发者承诺收到通知后将删除信息。法律法规另有规定的，开发者承诺将停止除存储和采取必要的安全保护措施之外的处理。</view>
|
||||
<view>2.3 关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</view>
|
||||
<view>2.4 若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。</view>
|
||||
<view>- 邮箱: </view>
|
||||
<view class="title2">3、开发者对信息的存储</view>
|
||||
<view>3.1开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。</view>
|
||||
<view class="title2">4、信息的使用规则</view>
|
||||
<view>4.1 开发者将会在本指引所明示的用途内使用收集的信息</view>
|
||||
<view>4.2 如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以公告、站内信息方式告知并征得你的明示同意。</view>
|
||||
<view class="title2">5、信息对外提供</view>
|
||||
<view>5.1 开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。</view>
|
||||
<view>5.2 开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。</view>
|
||||
<view class="title2">6、若你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</view>
|
||||
<view>- 邮箱: </view>
|
||||
<view class="title2"></view>
|
||||
<view>更新日期：2024年4月28日</view>
|
||||
<view>生效日期：2024年4月28日</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, watch, defineProps, getCurrentInstance } from 'vue'
|
||||
const popupAgreement = ref() // ref组件
|
||||
|
||||
const props = defineProps({
|
||||
agreementMode: Number
|
||||
})
|
||||
|
||||
const open = () => {
|
||||
popupAgreement.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.title1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.title2 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.agreement {
|
||||
padding: 30px 15px 15px 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.list {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" :backShow="true">
|
||||
<view class="bck">
|
||||
<view style="width: 100%;height: 15px;"></view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="title center">
|
||||
联系我们
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-title">
|
||||
类型
|
||||
</view>
|
||||
<view class="item-input">
|
||||
商务合作
|
||||
<!-- <select :value="typeStr">
|
||||
<option value="1">商务合作</option>
|
||||
<option value="2">广告洽谈</option>
|
||||
</select> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-title">
|
||||
联系人
|
||||
</view>
|
||||
<view class="item-input">
|
||||
<input type="text" v-model="lianxiren" placeholder="请输入联系人" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-title">
|
||||
联系方式
|
||||
</view>
|
||||
<view class="item-input">
|
||||
<input type="text" v-model="phone" placeholder="请输入联系方式" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-title">
|
||||
详细信息
|
||||
</view>
|
||||
<view class="item-input2">
|
||||
<textarea placeholder="请输入详细信息" name="details" maxlength="500" v-model="details"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button">
|
||||
<view class="submit" @click="submit">
|
||||
<text>{{isSave ? '当前内容已提交' : '提交信息'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, computed } from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const isSave = ref(false)
|
||||
|
||||
const typeStr = ref(1)
|
||||
const lianxiren = ref('') // 联系人
|
||||
const phone = ref('') // 联系方式
|
||||
const details = ref('') // 详细信息
|
||||
|
||||
const submit = (e) => {
|
||||
let toast = ''
|
||||
if (!lianxiren.value) {
|
||||
toast = '请输入联系人'
|
||||
}
|
||||
if (!phone.value) {
|
||||
toast = '请输入联系方式'
|
||||
}
|
||||
if (toast != '') {
|
||||
uni.showToast({
|
||||
title: toast,
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (isSave.value) {
|
||||
uni.showToast({
|
||||
title: '您的内容已提交，可以重新打开窗口再次提交新内容！',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/contact/save',
|
||||
data: {
|
||||
type: typeStr.value,
|
||||
name: lianxiren.value,
|
||||
mobile: phone.value,
|
||||
content: details.value
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '提交成功！',
|
||||
icon: 'none'
|
||||
})
|
||||
isSave.value = true
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
isSave.value = false
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.submit text {
|
||||
background: linear-gradient(180deg, #C2FF9A 0%, #41FEB6 116.67%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.submit {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 15px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
width: 260px;
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
|
||||
}
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
.item-input2 {
|
||||
border-radius: 15px;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
background: #FFFFFF;
|
||||
padding: 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
select {
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
input {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
.item-input {
|
||||
height: 35px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
background: #FFFFFF;
|
||||
padding: 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item-title {
|
||||
padding: 5px;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
scroll-view {
|
||||
height: calc(100% - 15px);
|
||||
}
|
||||
.title {
|
||||
padding: 15px;
|
||||
}
|
||||
.bck {
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.7)" :is-mask-click="false">
|
||||
<view class="coin-result">
|
||||
<view class="center hint">
|
||||
<text>恭喜找到宝藏！</text>
|
||||
</view>
|
||||
<view class="center hint2">
|
||||
硬币名称：{{props.coinName}}
|
||||
</view>
|
||||
<view class="center hint3">
|
||||
硬币编号：{{props.coinId}}
|
||||
</view>
|
||||
<view class="coin-content">
|
||||
<view class="star-left">
|
||||
<image class="star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star1.png" mode="widthFix"></image>
|
||||
<image class="star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="coin">
|
||||
<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/' + coinTypeImg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star-right">
|
||||
<image class="star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star3.png" mode="widthFix"></image>
|
||||
<image class="star3-box" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star3-box.png" mode="widthFix"></image>
|
||||
<image class="star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/star4.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="btn center" @click="openUploadPopup">
|
||||
上传视频
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<touch-popup ref="bindCoin" @close="close" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
|
||||
<scroll-view scroll-y style="height: 100%;margin-top: 15px;">
|
||||
<view class="top">
|
||||
<view class="star-left">
|
||||
<image class="bindcoin-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="bindcoin-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star2.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="bck-circle center">
|
||||
<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinTypeImg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-right">
|
||||
<image class="bindcoin-star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star3.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="bindcoin-star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star4.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-title">
|
||||
<view class="center">
|
||||
硬币名称：{{props.coinName}}
|
||||
</view>
|
||||
<view class="center">
|
||||
硬币编号：{{props.coinId}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-video center">
|
||||
<view class="video">
|
||||
<video :src="video"></video>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!checkedVideo" class="center-hint center">
|
||||
请参照以上视频示例拍摄视频并上传
|
||||
</view>
|
||||
<view v-else class="center-address center">
|
||||
<view class="center-address-bck">
|
||||
<view class="center">
|
||||
产出地址
|
||||
</view>
|
||||
<view class="center">
|
||||
{{props.coinAddress}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center" style="padding: 5px 20px;">
|
||||
<view v-if="!checkedVideo" class="btn center" @click="uploadCheck">
|
||||
上传视频
|
||||
</view>
|
||||
<view v-else class="btn2 center" @click="uploadOss">
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
<view class="logo" v-if="!checkedVideo">
|
||||
<image class="img-logo" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/logo.png" mode="heightFix"></image>
|
||||
<view class="center bck-hint">
|
||||
<view class="">
|
||||
上传视频至抖音
|
||||
</view>
|
||||
<view class="">
|
||||
并@官方号可额外获得橡果
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
defineExpose,
|
||||
getCurrentInstance,
|
||||
defineProps
|
||||
} from 'vue'
|
||||
const props = defineProps({
|
||||
coinId: Number,
|
||||
coinType: Number,
|
||||
coinName: String,
|
||||
coinAddress: String,
|
||||
})
|
||||
const {proxy} = getCurrentInstance()
|
||||
const popup = ref() // ref组件
|
||||
const bindCoin = ref()
|
||||
|
||||
const video = ref('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/findcoin-exam.mp4')
|
||||
let tmpVideoPath = '' // 选定的视频文件路径
|
||||
let videoFile = '' // 选定的视频文件
|
||||
let coin_id = ''
|
||||
const checkedVideo = ref(false)
|
||||
|
||||
const coinTypeImg = computed(() => {
|
||||
if (props.coinType === 2) {
|
||||
return 'silver.png'
|
||||
} else if (props.coinType === 3) {
|
||||
return 'copper.png'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
// 上传至oss
|
||||
const uploadOss = () => {
|
||||
uni.showLoading({
|
||||
title: '正在上传视频'
|
||||
})
|
||||
uni.uploadFile({
|
||||
url: app.globalData.requestUrl + '/api/file/upload',
|
||||
filePath: tmpVideoPath,
|
||||
file: videoFile,
|
||||
name: 'file',
|
||||
success(res) {
|
||||
let data = JSON.parse(res.data)
|
||||
if (data.code === 200) {
|
||||
// let url = data.data[0]
|
||||
// 保存硬币
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/coin/save',
|
||||
data: {
|
||||
coin_id: props.coinId,
|
||||
content: data.data[0]
|
||||
},
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
popup.value.close()
|
||||
bindCoin.value.close()
|
||||
uni.showToast({
|
||||
title: '已成功获取硬币!可前往硬币列表查看',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
console.log('err', err)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
// 选择视频
|
||||
const uploadCheck = () => {
|
||||
console.log('上传')
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
success: function(res) {
|
||||
video.value = res.tempFilePath
|
||||
checkedVideo.value = true
|
||||
tmpVideoPath = res.tempFilePath
|
||||
videoFile = res.tempFile
|
||||
}
|
||||
})
|
||||
}
|
||||
// 打开上传视频的弹窗
|
||||
const openUploadPopup = () => {
|
||||
console.log('打开上传视频的弹窗')
|
||||
bindCoin.value.open()
|
||||
}
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
}
|
||||
const close = () => {
|
||||
proxy.$emit('close')
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-logo {
|
||||
position: relative;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.bck-hint {
|
||||
position: absolute;
|
||||
left: 85px;
|
||||
top: 50%;
|
||||
font-size: 10px;
|
||||
color: #888888;
|
||||
background-color: rgba(255, 229, 200, 0.9);
|
||||
border-radius: 16px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.center-address-bck view:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.center-address-bck view:last-child {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.center-address-bck {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.center-address {
|
||||
padding: 20px 15px;
|
||||
|
||||
}
|
||||
|
||||
.center-hint {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
padding: 5px;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.video {
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
width: 300px;
|
||||
height: 180px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.center-title view:first-child {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.center-title view:last-child {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
|
||||
.bck-circle image {
|
||||
width: 55px;
|
||||
}
|
||||
.bck-circle {
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(180deg, #C1FF8F 0%, #0DFFB9 100%);
|
||||
width: 143px;
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
border-radius: 24px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.star1 {
|
||||
right: -15px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.star2 {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.star3,.star3-box {
|
||||
left: -20px;
|
||||
top: 0px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.star4 {
|
||||
left: 0;
|
||||
top: 30%;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.bindcoin-star1 {
|
||||
width: 36px;
|
||||
right: 15px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.bindcoin-star2 {
|
||||
width: 16px;
|
||||
right: 30px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.bindcoin-star3 {
|
||||
width: 22px;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bindcoin-star4 {
|
||||
width: 12px;
|
||||
left: 45px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.star-left image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.star-right image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.star-left,
|
||||
.star-right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
image {
|
||||
height: auto;
|
||||
}
|
||||
.coin {
|
||||
padding: 10px;
|
||||
}
|
||||
.coin image {
|
||||
width: 146px;
|
||||
}
|
||||
|
||||
.coin-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hint3 {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hint2 {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
text {
|
||||
background: linear-gradient(180deg, #BCFD90 0%, #16FFB7 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.hint {
|
||||
padding: 5px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.coin-result {
|
||||
height: auto;
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
|
||||
<scroll-view scroll-y style="height: 100%;margin-top: 15px;">
|
||||
<view class="top">
|
||||
<view class="star-left">
|
||||
<image class="bindcoin-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="bindcoin-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star2.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="bck-circle center">
|
||||
<image v-if="coinTypeImg" :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinTypeImg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="star-right">
|
||||
<image class="bindcoin-star3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star3.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="bindcoin-star4" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/bindcoin-star4.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-title">
|
||||
<view class="center">
|
||||
硬币名称：{{curCoin.name}}
|
||||
</view>
|
||||
<view class="center">
|
||||
硬币编号：{{curCoin.id}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-video center">
|
||||
<view class="video">
|
||||
<video :src="video_url"></video>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-hint center">
|
||||
此硬币已被找到，可查看证据视频
|
||||
</view>
|
||||
<view class="center-address center">
|
||||
<view class="center-address-bck">
|
||||
<view class="center">
|
||||
产出地址
|
||||
</view>
|
||||
<view class="center">
|
||||
{{curCoin.address}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="logo">
|
||||
<image class="img-logo" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/findcoin/logo.png" mode="heightFix"></image>
|
||||
<view class="center bck-hint">
|
||||
<view class="">
|
||||
上传视频至抖音
|
||||
</view>
|
||||
<view class="">
|
||||
并@官方号可额外获得橡果
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, computed, getCurrentInstance } from 'vue'
|
||||
const popup = ref() // ref组件
|
||||
const {proxy} = getCurrentInstance()
|
||||
const curCoin = ref({})
|
||||
const video_url = ref('')
|
||||
|
||||
const coinTypeImg = computed(() => {
|
||||
if (curCoin.value.type === 2) {
|
||||
return 'silver.png'
|
||||
} else if (curCoin.value.type === 3) {
|
||||
return 'copper.png'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
// 加载页面数据
|
||||
const loadData = () => {
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/getVideo',
|
||||
data: {
|
||||
coin_id: curCoin.value.id
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
video_url.value = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
proxy.$emit('close')
|
||||
}
|
||||
const open = (coin) => {
|
||||
if (JSON.stringify(coin) !== JSON.stringify(curCoin.value)) {
|
||||
console.log(coin)
|
||||
curCoin.value = coin
|
||||
loadData()
|
||||
}
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-logo {
|
||||
position: relative;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.bck-hint {
|
||||
position: absolute;
|
||||
left: 85px;
|
||||
width: 204px;
|
||||
top: 50%;
|
||||
font-size: 10px;
|
||||
color: #888888;
|
||||
background-color: rgba(255, 229, 200, 0.9);
|
||||
border-radius: 16px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
.btn {
|
||||
background: linear-gradient(180deg, #C1FF8F 0%, #0DFFB9 100%);
|
||||
width: 143px;
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.btn2 {
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
border-radius: 24px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
.center-address-bck view:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-address-bck view:last-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 22.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-address-bck {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.center-address {
|
||||
padding: 20px 15px;
|
||||
|
||||
}
|
||||
.center-hint {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
padding: 5px;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.video {
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
width: 300px;
|
||||
height: 180px;
|
||||
padding: 12px;
|
||||
}
|
||||
.center-title view:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-title view:last-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
padding: 15px;
|
||||
|
||||
}
|
||||
.bck-circle image {
|
||||
width: 55px;
|
||||
height: auto;
|
||||
}
|
||||
.bck-circle {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.star-left image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.star-right image {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.star-left,
|
||||
.star-right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.bindcoin-star1 {
|
||||
width: 36px;
|
||||
right: 15px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.bindcoin-star2 {
|
||||
width: 16px;
|
||||
right: 30px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.bindcoin-star3 {
|
||||
width: 22px;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bindcoin-star4 {
|
||||
width: 12px;
|
||||
left: 45px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-top: 30px;
|
||||
|
||||
}
|
||||
scroll-view {
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
}
|
||||
/* video {
|
||||
border-radius: 15px;
|
||||
}
|
||||
.unlock-logo {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -101px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.unlock-close image {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.unlock-close {
|
||||
display: flex;
|
||||
float: right;
|
||||
right: 0;
|
||||
}
|
||||
.unlock-center {
|
||||
display: flex;
|
||||
padding: 0 15px 5px 15px;
|
||||
}
|
||||
|
||||
.unlock-title {
|
||||
padding: 0 15px 10px 15px;
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unlock-bck {
|
||||
padding: 3px;
|
||||
border-radius: 15px;
|
||||
background: rgba(232, 232, 232, 0.5);
|
||||
border: 2px solid rgba(169, 169, 169, 0.5);
|
||||
}
|
||||
|
||||
.unlock-content {
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||||
}
|
||||
|
||||
.unlock-group {
|
||||
padding: 25px;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
||||
<view class="bck">
|
||||
<view style="width: 100%;height: 15px;"></view>
|
||||
<view class="title">
|
||||
<view>
|
||||
专属于你的
|
||||
</view>
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star1.png" mode="widthFix"></image>
|
||||
<view>
|
||||
寻宝<text>指南</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true">
|
||||
|
||||
<view class="tips">
|
||||
<view class="tips-item">
|
||||
<view class="tips-hint">
|
||||
<image class="image1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/TIPS1.png" mode="heightFix"></image>
|
||||
<image class="image2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-title">
|
||||
寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币
|
||||
</view>
|
||||
<view class="tips-vedio">
|
||||
<video src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips1.mp4"></video>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<view class="tips-hint2">
|
||||
<image class="image1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/TIPS2.png" mode="heightFix"></image>
|
||||
<image class="image2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star3.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-title">
|
||||
寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币寻找金币如何寻找金币
|
||||
</view>
|
||||
<view class="tips-vedio">
|
||||
<video src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips1.mp4"></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
computed,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
|
||||
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
<style scoped>
|
||||
scroll-view {
|
||||
height: calc(100% - 105px);
|
||||
}
|
||||
|
||||
.tips-hint2 {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.tips-hint {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
height: 15px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image2 {
|
||||
width: 24px;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 13px;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
video {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tips-vedio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 5px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
padding: 0 30px 15px 30px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title view:first-child {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.title view:last-child {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.title text {
|
||||
color: #ffb800;
|
||||
}
|
||||
|
||||
.title image {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
left: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
flex-direction: column;
|
||||
padding: 15px 30px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bck {
|
||||
height: 100%;
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/bck.png') no-repeat;
|
||||
background-size: 750rpx;
|
||||
background-position: bottom;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,359 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
|
||||
<scroll-view scroll-y>
|
||||
<view class="top">
|
||||
<view class="top-left">
|
||||
今日活动
|
||||
</view>
|
||||
<view v-if="userInfo" class="top-right">
|
||||
<view class="price-bck">
|
||||
<view class="logo-bck">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix"></image>
|
||||
</view>
|
||||
{{userInfo.amount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-icon">
|
||||
<!-- <image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo.png" mode="heightFix"></image> -->
|
||||
</view>
|
||||
<view class="hint">
|
||||
<view class="center">
|
||||
橡果大转盘
|
||||
</view>
|
||||
<view class="center">
|
||||
轻松解锁更多踪迹
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="lottery">
|
||||
<view v-for="(item,index) in lotteryList" key="lottery" class="center">
|
||||
<view class="lottery-item" :class="{check: item.check}">
|
||||
<view class="">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo-black.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="">
|
||||
{{item.amount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center" style="padding: 15px;">
|
||||
<view class="btn center" @click="startLottery">
|
||||
<text v-if="lotteryFree">{{!isLottery ? '免费抽奖' : '正在抽奖...'}}</text>
|
||||
<text v-else>{{!isLottery ? (lotteryPrice + '橡果抽一次') : '正在抽奖...'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-terms">
|
||||
<view @click="openTerms1Popup">
|
||||
使用条款
|
||||
</view>
|
||||
<view @click="openTerms2Popup">
|
||||
隐私政策
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</touch-popup>
|
||||
<touch-popup ref="terms1Popup" :backShow="true"
|
||||
background="linear-gradient(180deg, #FFFFFB -19.14%, #FFFEEB 50.07%)">
|
||||
<scroll-view scroll-y style="height: 100%;margin-top: 25px;">
|
||||
<view class="terms-text">
|
||||
这里是使用条款
|
||||
</view>
|
||||
</scroll-view>
|
||||
</touch-popup>
|
||||
<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
defineExpose
|
||||
} from 'vue'
|
||||
const popup = ref() // ref组件
|
||||
const terms1Popup = ref()
|
||||
const pAgreementPrivate = ref()
|
||||
|
||||
const userInfo = ref(false)
|
||||
const lotteryList = ref(false) // 抽奖列表
|
||||
const lotteryPrice = ref(0) // 抽奖价格
|
||||
const lotteryFree = ref(false) // 是否免费抽奖
|
||||
|
||||
// 抽奖开始闪烁
|
||||
const isLottery = ref(false) // 正在抽奖标识
|
||||
var interval = false
|
||||
const startLottery = () => {
|
||||
if (isLottery.value) return
|
||||
for (let i = 0; i < lotteryList.value.length; i++) {
|
||||
lotteryList.value[i].check = false
|
||||
}
|
||||
isLottery.value = true
|
||||
if (!lotteryFree.value) {
|
||||
userInfo.value.amount -= lotteryPrice.value
|
||||
}
|
||||
let i = 0,
|
||||
k = 30 // 执行30次时请求后台
|
||||
interval = setInterval(() => {
|
||||
if (k === 0) {
|
||||
golottery()
|
||||
}
|
||||
k--
|
||||
if (i - 1 >= 0) lotteryList.value[i - 1].check = false // 上一个熄灭
|
||||
if ((i + 1) > lotteryList.value.length) i = 0 // 到底重置
|
||||
lotteryList.value[i++].check = true
|
||||
}, 100)
|
||||
}
|
||||
const golottery = () => {
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/lottery/go',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success(res) {
|
||||
if (res.data.code === 200) {
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (resuser) => {
|
||||
app.globalData.userinfo = resuser.data.data
|
||||
userInfo.value = resuser.data.data
|
||||
|
||||
}
|
||||
}) // 重新请求余额
|
||||
for (let i = 0; i < lotteryList.value.length; i++) {
|
||||
let item = lotteryList.value[i]
|
||||
if (res.data.data.id === item.id) {
|
||||
lotteryList.value[i].check = true
|
||||
} else {
|
||||
lotteryList.value[i].check = false
|
||||
}
|
||||
}
|
||||
isLottery.value = false
|
||||
lotteryFree.value = false
|
||||
uni.showToast({
|
||||
title: '抽奖完成，奖励' + res.data.data.amount,
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '抽奖失败',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
complete() {
|
||||
clearInterval(interval)
|
||||
}
|
||||
})
|
||||
}
|
||||
const openTerms1Popup = () => {
|
||||
terms1Popup.value.open()
|
||||
}
|
||||
const openTerms2Popup = () => {
|
||||
pAgreementPrivate.value.open()
|
||||
}
|
||||
const open = () => {
|
||||
userInfo.value = app.globalData.userinfo
|
||||
if (lotteryList.value) {
|
||||
popup.value.open()
|
||||
return
|
||||
}
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/lottery/get',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success(res) {
|
||||
console.log(res.data.data)
|
||||
if (res.data.code === 200) {
|
||||
lotteryList.value = res.data.data.list
|
||||
lotteryPrice.value = res.data.data.price
|
||||
lotteryFree.value = res.data.data.free
|
||||
popup.value.open()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取奖品信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '获取奖品信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.check {
|
||||
border: 4px solid #8F00FF;
|
||||
}
|
||||
|
||||
.btn text {
|
||||
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 180px;
|
||||
height: 44px;
|
||||
font-size: 14px;
|
||||
background-color: #000;
|
||||
box-shadow: 0px 4px 0px 0px #7F720040;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.bottom-terms view {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.bottom-terms {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 12px;
|
||||
color: #626262;
|
||||
}
|
||||
|
||||
.lottery-item image {
|
||||
width: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lottery-item view {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lottery-item {
|
||||
margin: 8px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 17px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lottery {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
background: linear-gradient(119.74deg, #C1FF90 0.63%, #13FFB7 100%);
|
||||
box-shadow: 0px 4px 4px 0px #00000080;
|
||||
border-radius: 24px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.hint view:first-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.top-icon image {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.top-icon {
|
||||
height: 150px;
|
||||
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo.png) no-repeat,
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/TreasureHunter.png) no-repeat,
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star1.png) no-repeat,
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star2.png) no-repeat,
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star3.png) no-repeat,
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star4.png) no-repeat;
|
||||
background-size: 180px, auto 90px, 28px, 52px, 38px, 13px;
|
||||
background-position: center, center, calc(50% - 104px) 18px, left bottom, calc(50% + 120px) 18px, bottom 25px right 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.price-bck image {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.logo-bck {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background: #FFCC18;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.price-bck {
|
||||
height: 26px;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
padding-top: 15px;
|
||||
position: relative;
|
||||
height: calc(100% - 15px);
|
||||
}
|
||||
|
||||
.terms-text {
|
||||
height: calc(100% - 15px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
||||
<view style="width: 100%;height: 15px;"></view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="content">
|
||||
<view class="center">
|
||||
您收藏的
|
||||
</view>
|
||||
<block v-if="coinList.length > 0">
|
||||
<view class="center coin-title">
|
||||
硬币名称：{{coinList[curSwiperIndex].name}}
|
||||
</view>
|
||||
<view class="center" style="font-size: 14px;font-weight: 400;">
|
||||
ID：{{coinList[curSwiperIndex].id}}
|
||||
</view>
|
||||
|
||||
<!-- 硬币swiper -->
|
||||
<z-swiper ref="zSwiper" v-model="coinList" style="padding-top: 15px;height: 180px;" @swiper="swiperCoin" :options="{slidesPerView : 2,centeredSlides : true, effect: 'coverflow'}">
|
||||
<z-swiper-item v-for="(item,index) in coinList" key="coin1">
|
||||
<view class="coin-item">
|
||||
<image :src="item.img" mode="heightFix"></image>
|
||||
</view>
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- 产出地址 -->
|
||||
<view class="center coin-address">
|
||||
<view class="">
|
||||
产出地址
|
||||
</view>
|
||||
<view class="">
|
||||
{{coinList[curSwiperIndex].address}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的收藏 -->
|
||||
<view class="collect">
|
||||
<view class="collect-text">
|
||||
我的收藏
|
||||
</view>
|
||||
<scroll-view scroll-y style="height: 165px;">
|
||||
<view class="mycoin-list">
|
||||
<view v-for="(item,index) in coinList" key="coin2" class="center"
|
||||
style="flex-direction: column;">
|
||||
<view class="mycoin-warp" :class="{'mycoin-warp-check': curCoin.id === item.id}" @click="switchCoin(index, item)">
|
||||
<view class="mycoin-item">
|
||||
<image :src="item.img2" mode="widthFix"></image>
|
||||
</view>
|
||||
<image v-if="item.pay_status === 1" class="coinstar" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/mycoin-star.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view style="font-size: 8px;padding-bottom: 10px;padding-top: 5px;">
|
||||
{{dateFormat(item.date)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btm-bck">
|
||||
<text v-if="JSON.stringify(curCoin) === '{}'" class="duihuan-disable">兑换奖励</text>
|
||||
<text v-else-if="curCoin.apply_status === 0" class="duihuan-available" @click="duihuan">兑换奖励</text>
|
||||
<text v-else class="duihuan-disable">{{curCoin.pay_status === 0 ? '已申请，审核后自动发放' : '已兑换'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="null-collect center">
|
||||
暂无收藏品
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view style="position: absolute;bottom: 0;left: 0;width: 100%;display: flex;">
|
||||
<image style="width: 100%;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/bottom-bck.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'mycoin',
|
||||
data() {
|
||||
return {
|
||||
curSwiperIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperCoin() {
|
||||
let that = this
|
||||
this.$refs.zSwiper.swiper.on("slideChange", (swiper) => {
|
||||
that.curSwiperIndex = swiper.activeIndex;
|
||||
})
|
||||
},
|
||||
slideTo(i) {
|
||||
this.$refs.zSwiper.swiper.slideTo(i, 1000, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
computed,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
const {ctx}=getCurrentInstance()
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const coinList = ref([]);
|
||||
const curCoin = ref({});
|
||||
const test = () => {
|
||||
console.log('这里是setup test');
|
||||
}
|
||||
const switchCoin = (index, item) => {
|
||||
curCoin.value = item;
|
||||
ctx.slideTo(index);
|
||||
}
|
||||
const duihuan = () => {
|
||||
if (JSON.stringify(curCoin.value) === '{}') return;
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/coin/pay',
|
||||
data: {
|
||||
coin_id: curCoin.value.id
|
||||
},
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '已申请兑换奖励',
|
||||
icon: 'none'
|
||||
});
|
||||
curCoin.value.apply_status = 1;
|
||||
loadData();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const dateFormat = (val) => {
|
||||
let d = new Date(val)
|
||||
return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`
|
||||
}
|
||||
const loadData = (isOpen = false) => {
|
||||
if (isOpen) {
|
||||
uni.showLoading();
|
||||
}
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/coin/list',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
console.log(res.data)
|
||||
for (let i = 0; i < res.data.data.length; i++) {
|
||||
let coin = res.data.data[i]
|
||||
if (coin.type === 1) {
|
||||
coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/gold.png'
|
||||
coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/gold.png'
|
||||
} else if (coin.type === 2) {
|
||||
coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/silver.png'
|
||||
coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/silver.png'
|
||||
} else if (coin.type === 3) {
|
||||
coin.img = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/copper.png'
|
||||
coin.img2 = 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/copper.png'
|
||||
}
|
||||
res.data.data[i] = coin
|
||||
}
|
||||
coinList.value = res.data.data;
|
||||
if (isOpen) {
|
||||
popup.value.open();
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
if (isOpen) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const open = () => {
|
||||
loadData(true);
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.duihuan-available {
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
background-image: linear-gradient(180deg, #C5FF99 0%, #3DFEB7 100%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.duihuan-disable {
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
color: #FFFFFF80;
|
||||
}
|
||||
|
||||
.coinstar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 18px !important;
|
||||
height: auto;
|
||||
}
|
||||
.mycoin-item image {
|
||||
width: 38px;
|
||||
}
|
||||
.mycoin-warp {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.mycoin-warp-check {
|
||||
background: linear-gradient(315deg, #00EADC 0%, #75FF83 100%);;
|
||||
}
|
||||
.mycoin-item {
|
||||
background-color: #fff;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mycoin-list {
|
||||
padding: 5px 30px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.btm-bck {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #000;
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/collect-bottom-bck.png') no-repeat;
|
||||
background-size: 180rpx;
|
||||
background-color: #000;
|
||||
background-position: left 0 bottom 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collect-text {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.collect {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin: 0 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/collect-bck.png') no-repeat,
|
||||
linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||||
background-size: 550rpx;
|
||||
background-position: right 0 top 0;
|
||||
}
|
||||
|
||||
.coin-address {
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.coin-item image {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.coin-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.coin-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100% - 45px);
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/mycoin/top-bck.png') no-repeat;
|
||||
background-position: top;
|
||||
background-size: 750rpx;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
height: calc(100% - 15px);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.null-collect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,442 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
||||
<view class="bck">
|
||||
<view style="width: 100%;height: 15px;"></view>
|
||||
<view class="star1">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star1.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star2">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star3">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star3.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star4">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star4.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="center" style="padding: 15px;">
|
||||
排行榜
|
||||
</view>
|
||||
<!-- 金币、铜币、银币点击切换榜单 -->
|
||||
<view class="tabbar">
|
||||
<view class="tabbar-item" @click="switchTab(2)">
|
||||
<view class="coin-item" :class="{ check: curCoin === 2 }">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/silver.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="coin-text">
|
||||
银币榜
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabbar-item" @click="switchTab(1)">
|
||||
<view class="coin-item" :class="{ check: curCoin === 1 }">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/gold.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="coin-text">
|
||||
金币榜
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabbar-item" @click="switchTab(3)">
|
||||
<view class="coin-item" :class="{ check: curCoin === 3 }">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/copper.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="coin-text">
|
||||
铜币榜
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 排行榜列表 -->
|
||||
<scroll-view scroll-y>
|
||||
<view class="pd-25">
|
||||
<view class="rank-list">
|
||||
<view v-for="(item, index) in curList" key="rank" class="rank-item">
|
||||
<view class="leftnum" :class="{'rank-weight': index < 3}">
|
||||
{{index+1}}
|
||||
</view>
|
||||
<view class="centeravatar">
|
||||
<image v-if="index <= 2" class="zhuangshi" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/皇冠.png" mode="widthFix">
|
||||
</image>
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/avatar.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="centernickname">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="rightbalance">
|
||||
<view class="price-item">
|
||||
<view class="price-bck">
|
||||
<view class="logo-bck">
|
||||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinType" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<text>{{item.num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="mypoint">
|
||||
<view class="my-bck">
|
||||
<view class="myavatar">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/avatar.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="mynickname center">
|
||||
{{app.globalData.userinfo.name}}
|
||||
</view>
|
||||
<view class="mybanance">
|
||||
<view class="">
|
||||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinType" mode="widthFix"></image>
|
||||
<text>{{curMyCoinNum.num ? curMyCoinNum.num : 0}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="myrank">
|
||||
我的名次：<text>{{curMyCoinNum.hasOwnProperty('i') ? '上海市NO.'+(curMyCoinNum.i+1) : '暂无排名'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
computed
|
||||
} from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const curCoin = ref(1) // 0银币 1金币 2铜币
|
||||
const rankList = ref({}) // 银币排行榜列表
|
||||
const mySilverRank = ref({}) // 我的银币排名信息
|
||||
const myGoldRank = ref({}) // 我的金币排名信息
|
||||
const myCopperRank = ref({}) // 我的铜币排名信息
|
||||
|
||||
/* 计算属性 */
|
||||
// 获取当前列表的金币、铜币还是银币图标
|
||||
const coinType = computed(() => {
|
||||
if (curCoin.value === 2) {
|
||||
return 'silver.png'
|
||||
} else if (curCoin.value === 1) {
|
||||
return 'gold.png'
|
||||
} else if (curCoin.value === 3) {
|
||||
return 'copper.png'
|
||||
}
|
||||
})
|
||||
// 当前列表
|
||||
const curList = computed(() => {
|
||||
return rankList.value[curCoin.value]
|
||||
})
|
||||
// 我的硬币数量
|
||||
const curMyCoinNum = computed(() => {
|
||||
if (curCoin.value === 2) {
|
||||
if (JSON.stringify(mySilverRank.value) === '{}') return 0
|
||||
return mySilverRank.value
|
||||
} else if (curCoin.value === 1) {
|
||||
if (JSON.stringify(myGoldRank.value) === '{}') return 0
|
||||
return myGoldRank.value
|
||||
} else if (curCoin.value === 3) {
|
||||
if (JSON.stringify(myCopperRank.value) === '{}') return 0
|
||||
return myCopperRank.value
|
||||
}
|
||||
})
|
||||
|
||||
/* 方法 */
|
||||
const switchTab = (e) => {
|
||||
if (curCoin.value === e) return
|
||||
curCoin.value = e
|
||||
}
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
if (JSON.stringify(rankList.value) !== '{}') return
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/user/top',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
rankList.value = res.data.data
|
||||
for (let i = 0; i < res.data.data[1].length; i++) {
|
||||
if (res.data.data[1][i].user_id == app.globalData.userinfo.id) {
|
||||
myGoldRank.value = res.data.data[1][i]
|
||||
myGoldRank.value.i = i
|
||||
break
|
||||
}
|
||||
} // 我的金币排名信息
|
||||
for (let i = 0; i < res.data.data[2].length; i++) {
|
||||
if (res.data.data[2][i].user_id == app.globalData.userinfo.id) {
|
||||
mySilverRank.value = res.data.data[2][i]
|
||||
mySilverRank.value.i = i
|
||||
break
|
||||
}
|
||||
} // 我的银币排名信息
|
||||
for (let i = 0; i < res.data.data[3].length; i++) {
|
||||
if (res.data.data[3][i].user_id == app.globalData.userinfo.id) {
|
||||
myCopperRank.value = res.data.data[3][i]
|
||||
myCopperRank.value.i = i
|
||||
break
|
||||
}
|
||||
} // 我的铜币排名信息
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取排行榜列表失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rank-weight {
|
||||
color: #FFD600;
|
||||
}
|
||||
.my-bck {
|
||||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||||
border-radius: 25px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.myavatar image {
|
||||
border: 3px solid #000;
|
||||
border-radius: 20px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.myavatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.mynickname {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mybanance view {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 2px solid rgba(0, 0, 0, 0.1);
|
||||
border-right: 2px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mybanance image {
|
||||
width: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mybanance text {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mybanance {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.myrank {
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mypoint {
|
||||
padding: 0 15px 15px 15px;
|
||||
}
|
||||
|
||||
.price-bck text {
|
||||
padding: 0 8px 0 5px;
|
||||
}
|
||||
|
||||
.price-bck image {
|
||||
width: 23px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.price-bck .logo-bck {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.price-bck {
|
||||
height: 18px;
|
||||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.leftnum {
|
||||
font-family: Baloo;
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
line-height: 39.35px;
|
||||
width: 50px;
|
||||
font-weight: bolder;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zhuangshi {
|
||||
width: 11px !important;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.centeravatar image {
|
||||
width: 29px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.centeravatar {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.centernickname {
|
||||
flex: 2;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rightbalance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.pd-25 {
|
||||
padding: 5px 25px;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
height: calc(100% - 300px);
|
||||
}
|
||||
|
||||
.coin-text {
|
||||
font-size: 14px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar-item image {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.check image {
|
||||
width: 75px !important;
|
||||
}
|
||||
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 105px;
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
padding: 15px 50px 15px 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.star1 image {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.star1 {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.star2 image {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.star2 {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.star3 image {
|
||||
width: 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.star3 {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 145px;
|
||||
}
|
||||
|
||||
.star4 image {
|
||||
width: 75px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.star4 {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.bck {
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,483 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
||||
<view class="bck">
|
||||
<view style="width: 100%;height: 15px;"></view>
|
||||
<view class="img-bck">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/背景图案.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<scroll-view scroll-y="true">
|
||||
<view class="title">
|
||||
<view>
|
||||
邀请好友
|
||||
</view>
|
||||
<view>
|
||||
获取<text>专属神秘宝藏</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode">
|
||||
<view class="qrcode-bck">
|
||||
<!-- #ifdef H5 -->
|
||||
<canvas id="qrcode" canvas-id="qrcode"></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<image v-if="qrcodeUrl" :show-menu-by-longpress="true" :src="qrcodeUrl" mode="widthFix"></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="qrcode-download" @click="downloadQrcode">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/download.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
分享给好友扫一扫，成为宝藏猎人
|
||||
</view>
|
||||
</view>
|
||||
<view class="share">
|
||||
<view class="share-info">
|
||||
<view class="share-title">
|
||||
当前邀请好友
|
||||
</view>
|
||||
<view class="share-count">
|
||||
<view class="">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-count-left.png" mode="heightFix">
|
||||
</image>
|
||||
</view>
|
||||
<view style="justify-content: center;">
|
||||
{{helpNumber}}
|
||||
</view>
|
||||
<view class="">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-count-right.png" mode="heightFix">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="share-help">
|
||||
<view class="help-input">
|
||||
<input type="text" v-model="helpCode" placeholder="输入邀请码"
|
||||
placeholder-style="font-size: 12px;" />
|
||||
</view>
|
||||
<view @click="doHelp" class="help-btn">
|
||||
<view class="">
|
||||
帮TA助力
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="share-code">
|
||||
<view class="">
|
||||
我的邀请码
|
||||
</view>
|
||||
<view class="">
|
||||
{{myHelpCode}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="buttons">
|
||||
<view class="btn btn1" @click="copyCode">
|
||||
<view class="">
|
||||
<text>复制邀请码</text>
|
||||
</view>
|
||||
<view class="">
|
||||
邀请好友
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="btn btn2" @click="copyUrl">
|
||||
分享链接
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="btn btn2" open-type="share">
|
||||
分享链接
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
nextTick
|
||||
} from 'vue'
|
||||
// #ifdef H5
|
||||
import UQRCode from 'uqrcodejs'
|
||||
// #endif
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const helpCode = ref('') // 输入邀请码帮助别人助力
|
||||
const myHelpCode = ref('') // 我的邀请码
|
||||
const helpNumber = ref(0) // 已邀请人数
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const qrcodeUrl = ref('')
|
||||
// #endif
|
||||
|
||||
const doHelp = () => {
|
||||
if (!helpCode.value) return
|
||||
if (helpCode.value === myHelpCode.value) {
|
||||
uni.showToast({
|
||||
title: '不能为自己助力',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/code/save',
|
||||
data: {
|
||||
code: helpCode.value
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success(res) {
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '已为TA助力成功',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
const downloadQrcode = () => {
|
||||
// #ifdef H5
|
||||
const toast = '请截图页面发送给好友'
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
const toast = '长按保存二维码'
|
||||
// #endif
|
||||
uni.showToast({
|
||||
title: toast,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
const copyCode = () => {
|
||||
uni.setClipboardData({
|
||||
data: myHelpCode.value,
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '邀请码复制成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const copyUrl = () => {
|
||||
uni.setClipboardData({
|
||||
data: (location.origin + location.pathname + '?code=' + myHelpCode.value),
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '链接复制成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const showQrcode = (code) => {
|
||||
// #ifdef H5
|
||||
const qr = new UQRCode()
|
||||
qr.data = location.origin + location.pathname + '?code=' + myHelpCode.value
|
||||
qr.size = 140
|
||||
qr.make()
|
||||
const canvasContext = uni.createCanvasContext('qrcode', this)
|
||||
qr.canvasContext = canvasContext
|
||||
qr.drawCanvas()
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/wechat/qrcode',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success(res) {
|
||||
if (res.data.code === 200) {
|
||||
qrcodeUrl.value = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
if (myHelpCode.value) {
|
||||
popup.value.open()
|
||||
nextTick(() => {
|
||||
showQrcode()
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/code',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
myHelpCode.value = res.data.data.code
|
||||
helpNumber.value = res.data.data.number
|
||||
app.globalData.userinfo.code = res.data.data.code
|
||||
popup.value.open()
|
||||
nextTick(() => {
|
||||
showQrcode()
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取排行榜列表失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
width: 256px;
|
||||
height: 49px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn1 text {
|
||||
color: #D0FF66;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
background-color: #000;
|
||||
color: #9F9F9F;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
background-color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.share-code view:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.share-code view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.share-code {
|
||||
background-color: rgba(65, 255, 183, .8);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
border-radius: 20px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.help-input input {
|
||||
background-color: rgba(221, 221, 221, 0.8);
|
||||
border-radius: 10px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.help-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.help-btn view {
|
||||
background-color: rgba(170, 170, 170, 0.8);
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.share-help {
|
||||
padding: 10px 15px 15px 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.share-count image {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.share-count view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.share-count view:first-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.share-count {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.share-info {
|
||||
box-shadow: 0px 4px 5px 0px #00000040;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode-download image {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.qrcode-download {
|
||||
position: absolute;
|
||||
right: calc(50% - 120px);
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.qrcode view:last-child {
|
||||
padding: 8px;
|
||||
color: #626262;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.qrcode-bck canvas {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
.qrcode-bck image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.qrcode-bck {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 888;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.img-bck {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title view:last-child {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title text {
|
||||
color: #ffb800;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 30px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
height: calc(100% - 15px);
|
||||
}
|
||||
|
||||
.bck {
|
||||
height: 100%;
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/bck.png') no-repeat;
|
||||
background-size: 750rpx;
|
||||
background-position: bottom;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" background="linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%)" :backShow="true">
|
||||
<view class="bck">
|
||||
<view style="width: 100%;height: 15px;"></view>
|
||||
<view class="star1">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star1.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star2">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star3">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star3.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star4">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star4.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="star5">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/star5.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="logo">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/松鼠ip.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="title center">
|
||||
社区号
|
||||
</view>
|
||||
<view class="qrcode">
|
||||
<view class="item">
|
||||
<view>
|
||||
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/wx-qrcode.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
微信
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view>
|
||||
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/douyin-qrcode.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
抖音
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view>
|
||||
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/qq-qrcode.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
QQ
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view>
|
||||
<image show-menu-by-longpress src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/xhs-qrcode.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
小红书
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, computed } from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item image {
|
||||
width: 120px;
|
||||
}
|
||||
.item view:first-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.item view:last-child {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
}
|
||||
.item {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.qrcode {
|
||||
padding: 15px 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.title {
|
||||
padding: 15px;
|
||||
}
|
||||
.logo image {
|
||||
width: 400rpx;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.star5 image {
|
||||
width: 44px;
|
||||
}
|
||||
.star5 {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 29px;
|
||||
}
|
||||
.star4 image {
|
||||
width: 14px;
|
||||
}
|
||||
.star4 {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 150px;
|
||||
}
|
||||
.star3 image {
|
||||
width: 14px;
|
||||
}
|
||||
.star3 {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: calc(50% + 30px);
|
||||
}
|
||||
.star2 image {
|
||||
width: 20px;
|
||||
}
|
||||
.star2 {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: calc(40% - 50px);
|
||||
}
|
||||
.star1 image {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
.star1 {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: calc(50% - 100px);
|
||||
}
|
||||
.bck {
|
||||
height: 100%;
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/shequ/bck.png') no-repeat;
|
||||
background-size: 750rpx;
|
||||
background-position: bottom;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,510 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup @close="close" ref="popup" background="transparent">
|
||||
<view class="tabbar">
|
||||
<view class="top-icon">
|
||||
<view class="icon-item">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="icon-item"></view>
|
||||
</view>
|
||||
<view class="top-left">
|
||||
<view class="top-left-item" >
|
||||
<view style="padding-top: 15px;">签到中心</view>
|
||||
<view class="mybalance">
|
||||
<text>我的橡果</text>
|
||||
<text>{{user.amount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-right">
|
||||
<view class="top-right-item">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png" mode="heightFix"></image>
|
||||
<view class="sign-hint">
|
||||
<view class="">
|
||||
记得签到！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="list" scroll-y>
|
||||
<!-- 签到 -->
|
||||
<view class="pd-15">
|
||||
<view class="bck-group">
|
||||
<view class="sign-title">
|
||||
<text>已连续签到{{signUser.continuity_days}}天</text>
|
||||
<text>再连续签到{{dayCount}}天，共获得{{dayAmount}}橡果</text>
|
||||
</view>
|
||||
<view class="sign-content">
|
||||
<view class="sign-item" v-for="(item,index) in signConfig" key="sign">
|
||||
<view class="sign-item-top">
|
||||
<view style="flex: 1;padding: 2px;">
|
||||
<view class="sign-item-icon" :class="{ 'sign-check': item.day <= signUser.continuity_days }">
|
||||
<view>
|
||||
<image style="width: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-松果.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view style="height: 12px;">
|
||||
<image v-if="item.day <= signUser.continuity_days" style="width: 12px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/signin-ok.png" mode="widthFix"></image>
|
||||
<text v-else style="font-size: 8px;">+{{item.number}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sign-item-bottom">
|
||||
<view class="" style="display: flex;width: 100%;">
|
||||
<view class="signline" :class="{ 'bck-black' : item.day > 1 && item.day <= signUser.continuity_days }"></view>
|
||||
<view class="signcircle" :class="{ 'bck-black': item.day <= signUser.continuity_days }"></view>
|
||||
<view class="signline":class="{ 'bck-black': item.day < signConfig.length && item.day <= signUser.continuity_days }"></view>
|
||||
</view>
|
||||
<view class="signtext">
|
||||
<text v-if="item.day <= signUser.continuity_days">{{signUser.is_sign && item.day === signUser.continuity_days ? '今日': ''}}已签</text>
|
||||
<text v-else>{{item.day}}天</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="sign-btn">
|
||||
<view class="sign-btn-item" @click="signDo">
|
||||
<text>{{signUser.is_sign ? '今日已签到' : '签到领取橡果'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 活动 -->
|
||||
<view class="pd-15">
|
||||
<view class="bck-group">
|
||||
<view class="task-title">
|
||||
今日活动
|
||||
</view>
|
||||
<view class="task-content">
|
||||
<view class="task-item">
|
||||
<view class="task-item-left">
|
||||
<image style="width: 30px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-星星.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="task-item-center">
|
||||
<view class="">
|
||||
橡果大转盘
|
||||
</view>
|
||||
<view>
|
||||
今日首次免费
|
||||
</view>
|
||||
</view>
|
||||
<view class="task-item-right">
|
||||
<view class="task-btn" @click="openLottery">
|
||||
<text>打开</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
</touch-popup>
|
||||
<popup-lottery ref="pLottery"></popup-lottery>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, getCurrentInstance, computed } from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
const pLottery = ref()
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
const signConfig = ref([]) // 签到公共信息
|
||||
const signUser = ref({}) // 用户的签到信息
|
||||
const user = ref({}) // 用户信息，展示橡果数量
|
||||
|
||||
/* 计算属性 */
|
||||
const dayCount = computed(() => {
|
||||
return signConfig.value.length - signUser.value.continuity_days
|
||||
})
|
||||
const dayAmount = computed(() => {
|
||||
let amount = 0
|
||||
for (let i = signUser.value.continuity_days;i < signConfig.value.length;i++) {
|
||||
amount += signConfig.value[i].number
|
||||
}
|
||||
return amount
|
||||
})
|
||||
|
||||
/* 方法 */
|
||||
const openLottery = () => {
|
||||
pLottery.value.open()
|
||||
}
|
||||
const signDo = () => {
|
||||
if (signUser.value.is_sign) {
|
||||
uni.showToast({
|
||||
title: '今日已签到～',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
// 签到
|
||||
uni.showLoading({
|
||||
title: '正在签到'
|
||||
})
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/sign',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
// 更改本地余额
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
app.globalData.userinfo = res.data.data
|
||||
getUserSignInfo(false) // 再次请求用户签到信息
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '签到成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const open = () => {
|
||||
user.value = app.globalData.userinfo
|
||||
if (JSON.stringify(signUser.value) !== '{}'){
|
||||
popup.value.open()
|
||||
return
|
||||
}
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/sign/config',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
signConfig.value = res.data.data
|
||||
getUserSignInfo()
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '获取签到信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 请求用户签到信息
|
||||
*/
|
||||
const getUserSignInfo = (first = true) => {
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/sign/info',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success(res2) {
|
||||
console.log(res2.data)
|
||||
if (!res2.data.data.hasOwnProperty('continuity_days')) {
|
||||
res2.data.data.continuity_days = 0
|
||||
res2.data.data.is_sign = false
|
||||
res2.data.data.last_sign = '1970-01-01 03:00:00'
|
||||
}
|
||||
signUser.value = res2.data.data
|
||||
},
|
||||
complete() {
|
||||
if (first) {
|
||||
popup.value.open()
|
||||
} else {
|
||||
user.value = app.globalData.userinfo
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const close = () => {
|
||||
proxy.$emit('close')
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signtext {
|
||||
padding-top: 5px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 8px;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
color: #717171;
|
||||
}
|
||||
.mybalance text:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
.mybalance text:last-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 39px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.task-btn {
|
||||
border: 1px solid #70EB3D;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.task-item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.task-item-center view:first-child {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.task-item-center view:last-child {
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
}
|
||||
.task-item-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.task-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.task-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.task-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.task-title {
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sign-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
.sign-btn-item text {
|
||||
background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
}
|
||||
.sign-btn-item {
|
||||
background-color: #000;
|
||||
width: 200px;
|
||||
border-radius: 20px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bck-black {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
.bck-white {
|
||||
background-color: #FFF !important;
|
||||
}
|
||||
.signline {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
.signcircle {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.sign-item-bottom {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.sign-check {
|
||||
border: 2px solid #70EB3D !important;
|
||||
}
|
||||
.sign-item-icon {
|
||||
padding: 4px 7px;
|
||||
flex-direction: column;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
.sign-item-top {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.sign-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.sign-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sign-item view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sign-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sign-title text:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
.sign-title text:last-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
line-height: 13.5px;
|
||||
color: #717171;
|
||||
}
|
||||
.bck-group {
|
||||
background: #F5F5F5CC;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
.pd-15 {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
.list {
|
||||
background: linear-gradient(#acf393, #11ffb7);
|
||||
height: calc(100% - 66px);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.list .item {
|
||||
background: #F5F5F5CC;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
padding: 25px 15px;
|
||||
margin: 15px;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
.tabbar {
|
||||
display: flex;
|
||||
}
|
||||
.top-left {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
flex: 1;
|
||||
background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
|
||||
}
|
||||
.top-left-item, .top-right-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 0 15px;
|
||||
height: 78px;
|
||||
}
|
||||
.top-left-item {
|
||||
flex-direction: column;
|
||||
border-top-right-radius: 15px;
|
||||
background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 27px;
|
||||
}
|
||||
.top-right-item {
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
.top-right-item image {
|
||||
height: 150px;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: -55px;
|
||||
}
|
||||
.sign-hint {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
width: 325rpx;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sign-hint view {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
margin-left: -50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
.top-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.top-icon image {
|
||||
height: 6px;
|
||||
}
|
||||
.icon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup @close="close" ref="popup" background="transparent">
|
||||
<view class="tabbar">
|
||||
<view class="top-icon">
|
||||
<view class="icon-item">
|
||||
<image v-if="curIndex === 1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="icon-item">
|
||||
<image v-if="curIndex === 2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="leftClassBck">
|
||||
<view :class="leftClassObject" @click="switchTab(1)">
|
||||
<image :src="tabbarIcon1" mode="widthFix"></image>
|
||||
<text :class="{ colorWhite: curIndex == 2 }">悬赏</text>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="rightClassBck">
|
||||
<view :class="rightClassObject" @click="switchTab(2)">
|
||||
<image :src="tabbarIcon2" mode="widthFix"></image>
|
||||
<text :class="{ colorWhite: curIndex == 1 }">赏金任务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="list" :style="listClassObject" scroll-y>
|
||||
<view v-if="curIndex == 1" v-for="(item, index) in task1List" key="taskTask1" class="item-group">
|
||||
<view class="item itemA">
|
||||
<view style="display: flex;">
|
||||
<view class="item-left">
|
||||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/star.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
<view class="">
|
||||
{{item.content}}
|
||||
</view>
|
||||
<view class="">
|
||||
任务奖励：{{item.award_number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<view v-if="item.user_number < item.number">
|
||||
<text>{{item.user_number}}</text>/{{item.number}}
|
||||
</view>
|
||||
<view v-else>
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.action === 1 && item.user_number < item.number" style="padding-top: 20px;display: flex;">
|
||||
<!-- #ifdef H5 -->
|
||||
<button @click="goAction(item.action, item.id)" class="btn-done"><text>去完成</text></button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button @click="goAction(item.action, item.id)" open-type="share" class="btn-done"><text>去完成</text></button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view v-if="item.action === 2 && item.user_task_status !== 1" style="padding-top: 20px;display: flex;flex-direction: column;">
|
||||
<button v-if="item.user_task_status === 0 && item.user_number < item.number" @click="goAction(item.action, item.id)" class="btn-done">
|
||||
<text>去完成</text>
|
||||
</button>
|
||||
<block v-else>
|
||||
<button v-if="item.user_task_status === 0" class="btn-done"><text>正在审核</text></button>
|
||||
<button v-else-if="item.user_task_status === 2" @click="goAction(item.action, item.id)" class="btn-done"><text>重新上传</text></button>
|
||||
<view style="text-align: center;font-size: 12px;color: #717171;padding-top: 5px;">
|
||||
{{item.user_task_status === 0 ? '审核通过将自动获得橡果' : '很抱歉，审核未通过，请重新上传转发证明'}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="item.action === 3 && item.user_number < item.number" style="padding-top: 20px;display: flex;flex-direction: column;">
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-if="proxy.$wx && app.isWechat()" class="opentag" v-html="wxOpenTags"></view>
|
||||
<view v-else style="font-size: 12px;text-align: center;">
|
||||
微信搜索“宝藏猎人QuXun”，打开小程序观看视频广告
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button @click="createVideoAd" class="btn-done"><text>观看视频</text></button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else v-for="(item, index) in task2List" key="taskTask2" class="item-group">
|
||||
<view class="item itemB">
|
||||
<view style="display: flex;">
|
||||
<view style="flex: 1;">
|
||||
<view class="item-top">
|
||||
{{item.name}}：
|
||||
</view>
|
||||
<view class="item-bottom">
|
||||
<view class="item-center">
|
||||
<view class="">
|
||||
{{item.content}}
|
||||
</view>
|
||||
<view class="">
|
||||
任务奖励：{{item.award_number}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;">
|
||||
<view class="item-right">
|
||||
<image v-if="item.user_number >= item.number" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.user_number < item.number" style="padding-top: 20px;display: flex;">
|
||||
<button @click="goTask2(item)" class="btn-done"><text>去完成</text></button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</touch-popup>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uni-popup ref="poster">
|
||||
<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||||
<image :src="curPosterUrl" show-menu-by-longpress style="width: 600rpx;border-radius: 10px;" mode="widthFix"></image>
|
||||
<image @click="posterClose" style="width: 24px;padding-top: 15px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- #endif -->
|
||||
<popup-uptaskimg ref="pUptaskimg" @close="uptaskimgClose"></popup-uptaskimg>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, computed, onMounted, getCurrentInstance } from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
const pUptaskimg = ref() // ref组件
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
// #ifdef H5
|
||||
const wxOpenTags = ref('')
|
||||
// #endif
|
||||
|
||||
const curIndex = ref(1) // 1悬赏 2赏金任务
|
||||
const task1List = ref(false)
|
||||
const task2List = ref(false)
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const poster = ref()
|
||||
const curPosterUrl = ref('')
|
||||
const posterClose = () => {
|
||||
poster.value.close()
|
||||
}
|
||||
let rewardedVideoAd = null
|
||||
onMounted(() => {
|
||||
if(wx.createRewardedVideoAd){
|
||||
rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
|
||||
rewardedVideoAd.onLoad(() => {
|
||||
console.log('onLoad event emit')
|
||||
})
|
||||
rewardedVideoAd.onError((err) => {
|
||||
console.log('onError event emit', err)
|
||||
})
|
||||
rewardedVideoAd.onClose((res) => {
|
||||
console.log('onClose event emit', res)
|
||||
})
|
||||
} else {
|
||||
console.log('没有广告组件')
|
||||
}
|
||||
})
|
||||
const createVideoAd = () => {
|
||||
uni.showToast({
|
||||
title: '正在观看视频',
|
||||
icon: 'loading'
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
var opend = false
|
||||
const wxopeninit = () => {
|
||||
if (!proxy.$wx || !app.isWechat() || opend) return
|
||||
wxOpenTags.value = `
|
||||
<wx-open-launch-weapp
|
||||
id="launch-weapp"
|
||||
path="pages/game/game"
|
||||
env-version="trial"
|
||||
appid="wx60d549932b7d4267"
|
||||
style="width: 200px;height: 43px;display: flex;"
|
||||
>
|
||||
<template>
|
||||
<style>
|
||||
.wxbtn span {
|
||||
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.wxbtn {
|
||||
background-color: #000;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
width: 200px;
|
||||
height: 43px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
<div class="wxbtn"><span>前往小程序看视频</span></div>
|
||||
</template>
|
||||
</wx-open-launch-weapp>`
|
||||
opend = true
|
||||
}
|
||||
// #endif
|
||||
const goTask2 = (item) => {
|
||||
// #ifdef H5
|
||||
location.href = item.platform_data.link_h5 // 直接跳转
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
curPosterUrl.value = item.platform_data.poster_link
|
||||
poster.value.open()
|
||||
// #endif
|
||||
}
|
||||
const goAction = (action, id) => {
|
||||
if (action === 1) {
|
||||
// #ifdef H5
|
||||
uni.showToast({
|
||||
title: '请点击右上角分享',
|
||||
icon: 'none'
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/task/save',
|
||||
data: {
|
||||
id: id
|
||||
},
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success(res) {
|
||||
console.log(res.data)
|
||||
loadData(1)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
// 弹出上传图片的窗口
|
||||
pUptaskimg.value.open(id)
|
||||
}
|
||||
}
|
||||
/* 方法 */
|
||||
const loadData = (type) => {
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/task/list',
|
||||
data: {
|
||||
type: type
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success(res) {
|
||||
console.log(res.data)
|
||||
if (type === 1) {
|
||||
task1List.value = res.data.data
|
||||
} else {
|
||||
task2List.value = res.data.data
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
/* 一系列的计算属性 */
|
||||
const leftClassBck = computed(() => {
|
||||
return ['flex1', curIndex.value === 1 ? 'bck-black' : 'bck-top-color2']
|
||||
})
|
||||
const rightClassBck = computed(() => {
|
||||
return ['flex1', curIndex.value === 1 ? 'bck-top-color1' : 'bck-black']
|
||||
})
|
||||
const leftClassObject = computed(() => {
|
||||
const classArr = ['top-menu']
|
||||
if (curIndex.value === 1) {
|
||||
classArr.push('radius-t-r')
|
||||
classArr.push('bck-top-color1')
|
||||
} else {
|
||||
classArr.push('radius-b-r')
|
||||
classArr.push('bck-black')
|
||||
}
|
||||
return classArr
|
||||
})
|
||||
const rightClassObject = computed(() => {
|
||||
const classArr = ['top-menu']
|
||||
if (curIndex.value === 1) {
|
||||
classArr.push('radius-b-l')
|
||||
classArr.push('bck-black')
|
||||
} else {
|
||||
classArr.push('radius-t-l')
|
||||
classArr.push('bck-top-color2')
|
||||
}
|
||||
return classArr
|
||||
})
|
||||
const tabbarIcon1 = computed(() => {
|
||||
if (curIndex.value === 1) {
|
||||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-left-black.png'
|
||||
} else {
|
||||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-left-white.png'
|
||||
}
|
||||
})
|
||||
const tabbarIcon2 = computed(() => {
|
||||
if (curIndex.value === 2) {
|
||||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-right-black.png'
|
||||
} else {
|
||||
return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-right-white.png'
|
||||
}
|
||||
})
|
||||
const listClassObject = computed(() => {
|
||||
return {
|
||||
background: curIndex.value === 1 ? 'linear-gradient(#acf393, #11ffb7)' : 'linear-gradient(#f9c87c, #e5f499)'
|
||||
}
|
||||
})
|
||||
|
||||
/* 方法 */
|
||||
const switchTab = (i) => {
|
||||
app.playAudio() // 点击音效
|
||||
console.log(i, curIndex.value)
|
||||
if (i === curIndex.value) return
|
||||
curIndex.value = i
|
||||
if (!task2List.value) loadData(2)
|
||||
}
|
||||
const uptaskimgClose = () => {
|
||||
loadData(1)
|
||||
}
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
if (!task1List.value) loadData(1)
|
||||
// #ifdef H5
|
||||
wxopeninit()
|
||||
// #endif
|
||||
}
|
||||
const close = () => {
|
||||
proxy.$emit('close')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.opentag {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 43px;
|
||||
}
|
||||
.item-group {
|
||||
padding: 0 15px 15px 15px;
|
||||
}
|
||||
.list .item-group:first-child {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.list .item-group:last-child {
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 15px);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
|
||||
}
|
||||
.btn-done text {
|
||||
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.btn-done {
|
||||
background-color: #000;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
width: 200px;
|
||||
height: 43px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.list {
|
||||
height: calc(100% - 62px);
|
||||
}
|
||||
.list .item {
|
||||
background: #F5F5F5CC;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
padding: 25px 15px;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
.list .itemA {
|
||||
/* flex-direction: column; */
|
||||
}
|
||||
.list .itemB {
|
||||
padding: 15px;
|
||||
}
|
||||
.list .item-top {
|
||||
font-weight: bold;
|
||||
}
|
||||
.list .itemB .item-bottom {
|
||||
display: flex;
|
||||
}
|
||||
.list .itemB .item-bottom .item-center {
|
||||
padding: 0;
|
||||
}
|
||||
.list .itemB .item-bottom .item-center > view:first-child {
|
||||
padding: 5px 0;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
|
||||
}
|
||||
|
||||
.list .item .item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list .item .item-left image {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
.list .item .item-center {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 12px;
|
||||
font-weight: 350;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
.list .item .item-center > view:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
}
|
||||
.list .item .item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
}
|
||||
.list .item .item-right image {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
}
|
||||
.list .item .item-right text {
|
||||
color: #0057ff;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.top-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.icon-item image {
|
||||
height: 7px !important;
|
||||
}
|
||||
.icon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
}
|
||||
.left-bck {
|
||||
flex: 1;
|
||||
background-color: #000;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.top-menu {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.radius-t-r {
|
||||
border-top-right-radius: 15px;
|
||||
}
|
||||
.radius-t-l {
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
.radius-b-r {
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
.radius-b-l {
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
.colorWhite {
|
||||
color: #fff;
|
||||
}
|
||||
.tabbar image{
|
||||
width: 23px;
|
||||
height: auto;
|
||||
}
|
||||
.bck-black {
|
||||
background-color: #000;
|
||||
}
|
||||
.bck-top-color1 {
|
||||
background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
|
||||
}
|
||||
.bck-top-color2 {
|
||||
background: linear-gradient(#fac479, #f9c87c); /* 橙色 */
|
||||
}
|
||||
.bck-content-color1 {
|
||||
background: linear-gradient(#acf393, #11ffb7); /* 绿色内容 */
|
||||
}
|
||||
.bck-content-color2 {
|
||||
background: linear-gradient(#f9c87c, #e5f499); /* 橙色内容 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,865 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%)">
|
||||
<view class="top-icon">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<scroll-view scroll-y class="list">
|
||||
<view class="title">
|
||||
<view>
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/icon-踪迹.png" mode="widthFix"></image>
|
||||
<text>踪迹</text>
|
||||
</view>
|
||||
<view>
|
||||
硬币编号：{{coinInfo.id}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in traceList" key="trace" class="pd-15">
|
||||
<view class="item">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<view class="left-top">
|
||||
<text v-if="coinInfo.type !== 1">{{item.type == 1 ? '文字' : '图片'}}{{item.name}}：</text>
|
||||
<text v-else>{{item.name}}</text>
|
||||
</view>
|
||||
<view class="left-bottom">
|
||||
<text @click="showImg(item)"
|
||||
:class="{'img-show' : item.is_unlock === 1 && item.type === 2}">{{item.is_unlock === 1 ? (item.type === 1 ? item.content : '点击查看图片') : '解锁踪迹后查看'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<image v-if="item.is_unlock === 1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.is_unlock === 0" class="bottom">
|
||||
<button @click="unlock(index)" class="btn-done">
|
||||
<text>{{item.amount}}橡果解锁踪迹</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="coinInfo.type === 1" class="pd-15">
|
||||
<view class="item">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<view class="left-top">
|
||||
缩小宝藏范围：
|
||||
</view>
|
||||
<view class="left-bottom">
|
||||
<text>随机消除不存在宝藏的格子</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<button @click="goUnlockGold()" class="btn-done">
|
||||
<text>328橡果消除金币</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</touch-popup>
|
||||
<uni-popup ref="popupSafe" style="z-index: 9999;" type="center">
|
||||
<view style="width: 750rpx;">
|
||||
<view class="unlock-group">
|
||||
<view class="unlock-bck">
|
||||
<view class="unlock-content">
|
||||
<view class="unlock-logo">
|
||||
<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/safe-icon.png"
|
||||
mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="unlock-title">
|
||||
<view class="">
|
||||
安全需知
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="safe-center">
|
||||
<view class="htext">
|
||||
1.硬币不会藏在禁止通行或需要特殊凭证才能进入的区域
|
||||
</view>
|
||||
<view class="htext">
|
||||
2.硬币不会藏在需要您做任何危险动作才能找到的区域。
|
||||
</view>
|
||||
<view class="htext">
|
||||
3.您并不需要破坏或拆除任何物品来寻找到硬币。
|
||||
</view>
|
||||
<view class="htext">
|
||||
4.硬币不会藏在水中或水底。
|
||||
</view>
|
||||
<view class="htext">
|
||||
5.硬币不会被埋在土中或草丛中，无需践踏草坪或破坏植被。
|
||||
</view>
|
||||
<view class="htext">
|
||||
6.硬币不会藏在停车场或者马路上等车辆通行区域
|
||||
</view>
|
||||
<view class="htext">
|
||||
7. 在寻找硬币的过程中，您应当遵守法律法规与公共规则。参与活动过程中的意外与事故责任应当由参与者自行承担。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="unlock-btn">
|
||||
<view class="btn-item center">
|
||||
<view @click="safeBtn" class="btn2">
|
||||
<text>我同意</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="terms">
|
||||
<view class="" @click="isTermsCheck = !isTermsCheck">
|
||||
<image style="width: 10px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/radio-icon.png" mode="widthFix"></image>
|
||||
<image v-if="isTermsCheck" class="terms-check" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/check-black.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text style="margin-left: 5px;">
|
||||
选择即表明同意上述<text class="terms-color">安全信息</text>和<text class="terms-color">须知</text>，当日不再提醒
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popupUnlock" style="z-index: 9999;" type="center">
|
||||
<view style="width: 750rpx;">
|
||||
<view class="unlock-group">
|
||||
<view class="unlock-bck">
|
||||
<view class="unlock-content">
|
||||
<view class="unlock-logo">
|
||||
<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png"
|
||||
mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="unlock-title">
|
||||
<view class="">
|
||||
解锁踪迹
|
||||
</view>
|
||||
<view class="">
|
||||
硬币名称：{{coinInfo.name}}
|
||||
</view>
|
||||
<view class="">
|
||||
硬币编号：{{coinInfo.id}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="unlock-center">
|
||||
<view class="unlock-img">
|
||||
<image class="left-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="left-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star2.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="unlock-img"
|
||||
style="display: flex;align-items: center;justify-content: center;flex: none;">
|
||||
<image class="center-bck" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-bck.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="rectagle1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="rectagle2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle2.png"
|
||||
mode="heightFix"></image>
|
||||
<image class="rectagle3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle3.png"
|
||||
mode="heightFix"></image>
|
||||
<image class="center-star" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-star.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="center-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-icon.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="unlock-img">
|
||||
<image class="right-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="right-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star2.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="unlock-price">
|
||||
<view class="price-item">
|
||||
<view class="hint-bck">
|
||||
{{curTrace.amount}}橡果解锁踪迹提示
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-item">
|
||||
<view class="price-bck">
|
||||
<view class="logo-bck">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
{{userInfo.amount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="unlock-btn">
|
||||
<view class="btn-item" style="justify-content: flex-end;">
|
||||
<view @click="cancelUnlock" class="btn1">
|
||||
再想想
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-item">
|
||||
<view @click="doUnlock" class="btn2">
|
||||
<text>确认解锁</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popupUnlockSuccess" style="z-index: 9999;" type="center">
|
||||
<view style="width: 750rpx;">
|
||||
<view class="unlock-group">
|
||||
<view class="unlock-bck">
|
||||
<view class="unlock-content">
|
||||
<view class="unlock-logo">
|
||||
<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png"
|
||||
mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="unlock-close">
|
||||
<image @click="closeUnlock" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="unlock-title">
|
||||
<view class="unlock-title">
|
||||
<view class="">
|
||||
解锁踪迹成功
|
||||
</view>
|
||||
<view class="">
|
||||
</view>
|
||||
<view class="">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="unlock-center" style="justify-content: center;">
|
||||
<image v-if="curTrace.type === 2" style="width: 100%;height: 200px;border-radius: 10px;"
|
||||
:src="curTrace.content" mode="aspectFill"></image>
|
||||
<text v-else>{{curTrace.content}}</text>
|
||||
</view>
|
||||
<view v-if="curTrace.type === 2" style="display: flex;justify-content: center;">
|
||||
<view class="unlock-down">
|
||||
<view>
|
||||
长按保存图片
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 弹窗：解锁金币 -->
|
||||
<popup-unlockgold ref="pUnlockGold"></popup-unlockgold>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
const popup = ref() // ref组件
|
||||
const pUnlockGold = ref() // 解锁金币弹窗
|
||||
const popupUnlock = ref()
|
||||
const popupUnlockSuccess = ref()
|
||||
const popupSafe = ref()
|
||||
|
||||
const isTermsCheck = ref(false);
|
||||
const _trace_d = new Date();
|
||||
const _trace_timestamp = new Date((_trace_d.getFullYear() + '/' + (_trace_d.getMonth()+1) + '/' + _trace_d.getDate())).getTime(); // 今日时间戳
|
||||
|
||||
const traceList = ref([]) // 踪迹列表
|
||||
const curTrace = ref({}) // 当前要解锁的踪迹
|
||||
const coinInfo = ref({}) // 硬币详情
|
||||
const userInfo = ref({}) // 用户详情
|
||||
|
||||
const safeModalShow = () => {
|
||||
let safeTime = uni.getStorageSync('jinxiangguo_safe_modal');
|
||||
if (safeTime) {
|
||||
// 判断是否是今天
|
||||
if (safeTime != _trace_timestamp) {
|
||||
popupSafe.value.open();
|
||||
}
|
||||
} else {
|
||||
// 如果没有
|
||||
popupSafe.value.open();
|
||||
}
|
||||
}
|
||||
const safeBtn = () => {
|
||||
if (!isTermsCheck.value) {
|
||||
uni.showToast({
|
||||
title: '请同意安全须知',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.setStorageSync('jinxiangguo_safe_modal', _trace_timestamp);
|
||||
popupSafe.value.close();
|
||||
}
|
||||
const goUnlockGold = () => {
|
||||
pUnlockGold.value.open(coinInfo.value)
|
||||
}
|
||||
const showImg = (item) => {
|
||||
if (item.type === 1) return
|
||||
curTrace.value = item
|
||||
popupUnlockSuccess.value.open()
|
||||
}
|
||||
// 加载页面数据
|
||||
const loadData = () => {
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/clue/list',
|
||||
data: {
|
||||
id: coinInfo.value.id
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
traceList.value = res.data.data
|
||||
userInfo.value = app.globalData.userinfo
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
safeModalShow();
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 关闭解锁踪迹弹窗
|
||||
const closeUnlock = () => {
|
||||
popupUnlockSuccess.value.close()
|
||||
}
|
||||
// 执行解锁踪迹
|
||||
const doUnlock = () => {
|
||||
if (userInfo.value.amount < curTrace.value.amount) {
|
||||
uni.showToast({
|
||||
title: '当前橡果余额不足',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '确认花费' + curTrace.value.amount + '橡果解锁此踪迹吗？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '解锁踪迹成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.showLoading({
|
||||
title: '正在解锁踪迹'
|
||||
})
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/coin/clue/save',
|
||||
data: {
|
||||
id: curTrace.value.id
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
// 更改本地余额
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData
|
||||
.token
|
||||
},
|
||||
success: (res) => {
|
||||
app.globalData.userinfo = res.data.data
|
||||
app.globalData.isReloadMarkers = true
|
||||
loadData()
|
||||
cancelUnlock()
|
||||
popupUnlockSuccess.value.open()
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 关闭解锁踪迹弹窗
|
||||
const cancelUnlock = () => {
|
||||
popupUnlock.value.close()
|
||||
}
|
||||
// 打开解锁踪迹弹窗
|
||||
const unlock = (e) => {
|
||||
if ((e - 1) >= 0 && traceList.value[(e - 1)].is_unlock === 0) {
|
||||
uni.showToast({
|
||||
title: '请逐级解锁',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
curTrace.value = traceList.value[e]
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/info',
|
||||
data: {
|
||||
id: coinInfo.value.id
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
popupUnlock.value.open()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const open = (coin) => {
|
||||
if (JSON.stringify(coinInfo.value) !== JSON.stringify(coin)) {
|
||||
coinInfo.value = coin;
|
||||
loadData();
|
||||
}
|
||||
popup.value.open()
|
||||
}
|
||||
const close = () => {
|
||||
// 统计当前总线索数
|
||||
proxy.$emit('close', coinInfo.value.type)
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.terms-check {
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
}
|
||||
.terms {
|
||||
color: #4A4A4A;
|
||||
font-size: 8px;
|
||||
font-weight: 400;
|
||||
padding-top: 15px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.terms view:first-child {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.terms-color {
|
||||
color: #6D24E3;
|
||||
}
|
||||
.safe-center .htext {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 15px;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
}
|
||||
.img-show {
|
||||
color: #01F0FD;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.unlock-close image {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.unlock-close {
|
||||
display: flex;
|
||||
float: right;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.unlock-down image {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.unlock-down view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unlock-down {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.unlock-logo {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -101px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-item view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
border-radius: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.btn-item .btn1 {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.btn-item .btn2 {
|
||||
background: #000000;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.btn-item .btn2 text {
|
||||
background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
|
||||
.unlock-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hint-bck {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 15px;
|
||||
padding: 4px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.price-bck image {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.logo-bck {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background: #FFCC18;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.price-bck {
|
||||
height: 26px;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.unlock-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px 25px;
|
||||
|
||||
}
|
||||
|
||||
.left-star1 {
|
||||
width: 22px;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.left-star2 {
|
||||
float: right;
|
||||
width: 10px;
|
||||
top: 70px;
|
||||
}
|
||||
|
||||
.center-bck {
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.rectagle1 {
|
||||
width: 47px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rectagle2 {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
left: 49px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rectagle3 {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.center-star {
|
||||
width: 125px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.center-icon {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.right-star1 {
|
||||
width: 36px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.right-star2 {
|
||||
width: 12px;
|
||||
left: 30px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.unlock-img {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.safe-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 15px 5px 15px;
|
||||
}
|
||||
.unlock-center {
|
||||
display: flex;
|
||||
padding: 0 15px 5px 15px;
|
||||
}
|
||||
|
||||
.unlock-title view:first-child {
|
||||
text-decoration: underline;
|
||||
font-size: 18px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.unlock-title view:last-child {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.unlock-title {
|
||||
padding: 0 15px 10px 15px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unlock-bck {
|
||||
padding: 3px;
|
||||
border-radius: 15px;
|
||||
background: rgba(232, 232, 232, 0.5);
|
||||
border: 2px solid rgba(169, 169, 169, 0.5);
|
||||
}
|
||||
|
||||
.unlock-content {
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||||
}
|
||||
|
||||
.unlock-group {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.left-top {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 350;
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left view {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.right image {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item .top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
background: #F5F5F5CC;
|
||||
border-radius: 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-done text {
|
||||
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn-done {
|
||||
background-color: #000;
|
||||
border-radius: 20px;
|
||||
height: 43px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 211px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.title text {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.title view:last-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 8px;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title image {
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
.title view:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.list {
|
||||
height: calc(100% - 15px);
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.top-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.top-icon image {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.pd-15 {
|
||||
padding: 0 15px 15px 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,365 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" style="z-index: 9999;" type="center" :is-mask-click="false">
|
||||
<view style="width: 750rpx;">
|
||||
<view class="unlock-group">
|
||||
<view class="unlock-bck">
|
||||
<view class="unlock-content">
|
||||
<view class="unlock-logo">
|
||||
<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="unlock-title">
|
||||
<view class="">
|
||||
解锁金币
|
||||
</view>
|
||||
<view class="">
|
||||
金币名称：{{coinInfo.name}}
|
||||
</view>
|
||||
<view class="">
|
||||
金币编号：{{coinInfo.id}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="unlock-center">
|
||||
<view class="unlock-img">
|
||||
<image class="left-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="left-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star2.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="unlock-img"
|
||||
style="display: flex;align-items: center;justify-content: center;flex: none;">
|
||||
<image class="center-bck" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-bck.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="rectagle1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="rectagle2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle2.png"
|
||||
mode="heightFix"></image>
|
||||
<image class="rectagle3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle3.png"
|
||||
mode="heightFix"></image>
|
||||
<image class="center-star" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-star.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="center-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/unlockgold/centerimg.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="unlock-img">
|
||||
<image class="right-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star1.png"
|
||||
mode="widthFix"></image>
|
||||
<image class="right-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star2.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="unlock-price">
|
||||
<view class="price-item">
|
||||
<view class="hint-bck">
|
||||
328橡果解锁一次
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-item">
|
||||
<view class="hint-bck">
|
||||
新用户首次免费
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-item">
|
||||
<view class="price-bck">
|
||||
<view class="logo-bck">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
{{userInfo.amount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="unlock-btn">
|
||||
<view class="btn-item" style="justify-content: flex-end;">
|
||||
<view @click="cancelUnlock" class="btn1">
|
||||
再想想
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-item">
|
||||
<view @click="doUnlock" class="btn2">
|
||||
<text>确认解锁</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, getCurrentInstance } from 'vue'
|
||||
const {proxy} = getCurrentInstance()
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const coinInfo = ref({}) // 硬币详情
|
||||
const userInfo = ref({}) // 用户详情
|
||||
|
||||
// 执行解锁踪迹
|
||||
const doUnlock = () => {
|
||||
uni.showModal({
|
||||
title: '确认解锁此硬币吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '正在解锁'
|
||||
})
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/coin/gold/save',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
console.log(res.data)
|
||||
// 更改本地余额
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (resuser) => {
|
||||
app.globalData.userinfo = resuser.data.data
|
||||
app.globalData.isReloadMarkers = true
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '消除金币成功',
|
||||
icon: 'none'
|
||||
})
|
||||
cancelUnlock()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const cancelUnlock = () => {
|
||||
proxy.$emit('close')
|
||||
popup.value.close()
|
||||
}
|
||||
const open = (coin) => {
|
||||
if (JSON.stringify(coinInfo.value) !== JSON.stringify(coin)) {
|
||||
userInfo.value = app.globalData.userinfo
|
||||
coinInfo.value = coin
|
||||
}
|
||||
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.unlock-group {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.unlock-bck {
|
||||
padding: 3px;
|
||||
border-radius: 15px;
|
||||
background: rgba(232, 232, 232, 0.5);
|
||||
border: 2px solid rgba(169, 169, 169, 0.5);
|
||||
}
|
||||
|
||||
.unlock-content {
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||||
}
|
||||
|
||||
.unlock-logo {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -101px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.unlock-title view:first-child {
|
||||
text-decoration: underline;
|
||||
font-size: 18px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.unlock-title view:last-child {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.unlock-title {
|
||||
padding: 0 15px 10px 15px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-star1 {
|
||||
width: 22px;
|
||||
float: right;
|
||||
right: 0;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.left-star2 {
|
||||
float: right;
|
||||
width: 10px;
|
||||
top: 70px;
|
||||
}
|
||||
|
||||
.center-bck {
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.rectagle1 {
|
||||
width: 47px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rectagle2 {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
left: 49px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rectagle3 {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.center-star {
|
||||
width: 125px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/unlockgold/cenger-right-img.png) no-repeat;
|
||||
background-size: 28px;
|
||||
background-position: right 20px bottom 20px;
|
||||
}
|
||||
|
||||
.center-icon {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.right-star1 {
|
||||
width: 36px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.right-star2 {
|
||||
width: 12px;
|
||||
left: 30px;
|
||||
top: 35px;
|
||||
}
|
||||
.unlock-img {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.unlock-center {
|
||||
display: flex;
|
||||
padding: 0 15px 5px 15px;
|
||||
}
|
||||
.hint-bck {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 15px;
|
||||
padding: 4px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.price-bck image {
|
||||
width: 18px;
|
||||
}
|
||||
.logo-bck {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background: #FFCC18;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.price-bck {
|
||||
height: 26px;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
.unlock-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px 25px;
|
||||
}
|
||||
.btn-item view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
border-radius: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
.btn1 {
|
||||
background: rgba(255, 255, 255, .8);
|
||||
}
|
||||
.btn2 text {
|
||||
background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.btn2 {
|
||||
background: #000000;
|
||||
}
|
||||
.btn-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
.unlock-btn {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" style="z-index: 9999;" type="center">
|
||||
<view style="width: 750rpx;">
|
||||
<view class="unlock-group">
|
||||
<view class="unlock-bck">
|
||||
<view class="unlock-content">
|
||||
<view class="unlock-close">
|
||||
<image @click="close" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view style="font-weight: bold;text-align: center;">抖音转发内容并截图</view>
|
||||
<view style="font-size: 14px;color: #515151;text-align: center;padding-top: 10px;">
|
||||
后台审核完毕可获得橡果
|
||||
</view>
|
||||
<view v-if="imgUrl" class="img-show">
|
||||
<image :src="imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view style="padding-top: 15px;">
|
||||
<block v-if="isDone">
|
||||
<view style="text-align: center;font-size: 13px;color: #717171;padding: 5px 0 0 0;">
|
||||
已上传，审核完毕将自动获得橡果
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<button v-if="!imgUrl" @click="checkImage" class="btn-done">上传截图</button>
|
||||
<block v-else>
|
||||
<button @click="save" class="btn-done">确认上传</button>
|
||||
<view @click="checkImage" style="text-align: center;font-size: 13px;color: #717171;padding: 5px 0 0 0;">
|
||||
重新选择
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, defineExpose, getCurrentInstance } from 'vue'
|
||||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||||
const popup = ref() // ref组件
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const taskid = ref(-1)
|
||||
|
||||
const imgUrl = ref('')
|
||||
const isDone = ref(false)
|
||||
|
||||
const save = () => {
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/task/save',
|
||||
data: {
|
||||
id: taskid.value,
|
||||
content: imgUrl.value
|
||||
},
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success(res) {
|
||||
console.log(res.data)
|
||||
if (res.data.code === 200) {
|
||||
isDone.value = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const checkImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success(res) {
|
||||
console.log(res)
|
||||
uni.uploadFile({
|
||||
url: app.globalData.requestUrl + '/api/file/upload',
|
||||
filePath: res.tempFilePaths[0],
|
||||
file: res.tempFiles[0],
|
||||
name: 'file',
|
||||
success(res2) {
|
||||
let data = JSON.parse(res2.data)
|
||||
if (data.code === 200) {
|
||||
imgUrl.value = data.data[0]
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
console.log('err', err)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 关闭解锁踪迹弹窗
|
||||
const close = () => {
|
||||
proxy.$emit('close', {})
|
||||
popup.value.close()
|
||||
}
|
||||
const open = (id) => {
|
||||
taskid.value = id
|
||||
popup.value.open()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.unlock-close image {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.unlock-close {
|
||||
display: flex;
|
||||
float: right;
|
||||
right: 0;
|
||||
}
|
||||
.img-show image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.img-show {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-done {
|
||||
background-color: #000;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
color: #01F0FD;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
}
|
||||
.unlock-group {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.unlock-bck {
|
||||
padding: 3px;
|
||||
border-radius: 15px;
|
||||
background: rgba(232, 232, 232, 0.5);
|
||||
border: 2px solid rgba(169, 169, 169, 0.5);
|
||||
}
|
||||
.unlock-content {
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<view>
|
||||
<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%)" :backShow="true">
|
||||
<view class="top">
|
||||
<view @click="closeCurPage" hover-class="disable" :hover-start-time="0" :hover-stay-time="50">
|
||||
取消
|
||||
</view>
|
||||
<view style="font-size: 18px;font-weight: bold;text-align: center;">
|
||||
修改名称
|
||||
</view>
|
||||
<view @click="save" :class="{'disable': !inputVerify}" hover-class="disable" :hover-start-time="0" :hover-stay-time="50">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item-title">
|
||||
三天内可修改一次名字
|
||||
</view>
|
||||
<view class="item-input">
|
||||
<!-- #ifdef H5 -->
|
||||
<input type="text" v-model="input" @input="inputEvent" maxlength="12" placeholder-class="input-class" placeholder="请输入联系人" />
|
||||
<view class="">
|
||||
{{input.length}}/12
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<input type="nickname" v-model="input" @change="inputEvent2" @input="inputEvent" maxlength="12" placeholder-class="input-class" placeholder="请输入联系人" />
|
||||
<view class="">
|
||||
{{input.length}}/12
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="item-title" style="color: #00000080;" :class="{'hint': !inputVerify}">
|
||||
请输入2-12个字符
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</touch-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import { ref, getCurrentInstance, defineExpose } from 'vue'
|
||||
const {proxy} = getCurrentInstance()
|
||||
const popup = ref() // ref组件
|
||||
|
||||
const input = ref('')
|
||||
const inputVerify = ref(true)
|
||||
const isSave = ref(false)
|
||||
|
||||
const save = () => {
|
||||
if (!inputVerify.value) return
|
||||
if (input.value.length < 2) {
|
||||
inputVerify.value = false
|
||||
return
|
||||
}
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/save/nickname',
|
||||
data: {
|
||||
nickname: input.value
|
||||
},
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
method: 'POST',
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
isSave.value = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// #ifdef MP-WEIXIN
|
||||
const inputEvent2 = (e) => {
|
||||
input.value = e.detail.value;
|
||||
}
|
||||
// #endif
|
||||
const inputEvent = () => {
|
||||
if (input.value.length >= 2 && !inputVerify.value) {
|
||||
inputVerify.value = true
|
||||
}
|
||||
}
|
||||
const closeCurPage = () => {
|
||||
popup.value.close()
|
||||
}
|
||||
const close = () => {
|
||||
proxy.$emit('closeEdit', isSave.value)
|
||||
}
|
||||
const open = () => {
|
||||
isSave.value = false
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
open
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hint {
|
||||
color: #EE3A3A !important;
|
||||
}
|
||||
.top view {
|
||||
flex: 1;
|
||||
}
|
||||
.top view:first-child {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #3C3C3C;
|
||||
}
|
||||
.top view:last-child {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #EE3A3A;
|
||||
}
|
||||
.disable {
|
||||
opacity: .5;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
padding: 30px 15px 15px 15px;
|
||||
|
||||
}
|
||||
.item-input select {
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
.item-input input {
|
||||
width: calc(100% - 60px - 30px);
|
||||
}
|
||||
.item-input view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #00000080;
|
||||
}
|
||||
.item-input {
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
background: #FFFFFF;
|
||||
padding: 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
}
|
||||
.input-class {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
color: #00000080;
|
||||
}
|
||||
.item-title {
|
||||
padding: 5px;
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" style="z-index: 9999;" :safe-area="false" type="bottom" change="change" @maskClick="change" background-color="#fff"
|
||||
border-radius="15px 15px 0 0">
|
||||
<view class="popup" :style="{ background: background }">
|
||||
<view class="top-touch" @touchstart="touchStart" @touchend="touchEnd">
|
||||
<view class="center">
|
||||
<image v-if="props.backShow" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-black.png" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
defineProps,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
const props = defineProps({
|
||||
backShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}, // 顶部小黑条是否显示
|
||||
background: String
|
||||
})
|
||||
|
||||
const popup = ref() // ref组件
|
||||
let touchStartX = 0
|
||||
let touchStartY = 0
|
||||
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
} // 自定义方法
|
||||
const close = () => {
|
||||
proxy.$emit('close')
|
||||
popup.value.close()
|
||||
}
|
||||
const touchStart = (e) => {
|
||||
touchStartX = e.touches[0].clientX
|
||||
touchStartY = e.touches[0].clientY
|
||||
}
|
||||
const touchEnd = (e) => {
|
||||
// console.log("触摸结束")
|
||||
let deltaX = e.changedTouches[0].clientX - touchStartX;
|
||||
let deltaY = e.changedTouches[0].clientY - touchStartY;
|
||||
if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
|
||||
if (deltaY > 0) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
}
|
||||
const change = (e) => {
|
||||
proxy.$emit('close')
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
}) // 暴露方法
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.popup {
|
||||
overflow: hidden;
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
.top-touch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.top-touch image {
|
||||
height: 5px;
|
||||
}
|
||||
.left,.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import App from './App'
|
||||
|
||||
// #ifdef H5
|
||||
import jwx from 'weixin-js-sdk'
|
||||
import Vconsole from 'vconsole'
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
// #ifdef H5
|
||||
app.config.globalProperties.$wx = jwx
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('开发模式');
|
||||
let vConsole = new Vconsole()
|
||||
app.use(vConsole)
|
||||
}
|
||||
// #endif
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
{
|
||||
"name" : "宝藏猎人",
|
||||
"appid" : "__UNI__B9EE997",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx60d549932b7d4267",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"cloudfunctionRoot" : "wxcloudfunctions",
|
||||
"usingComponents" : true,
|
||||
"lazyCodeLoading" : "requiredComponents",
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "将用于寻找宝物"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos" : [ "getLocation" ]
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"h5" : {
|
||||
"title" : "宝藏猎人",
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : "./"
|
||||
},
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"qqmap" : {
|
||||
"key" : "FRDBZ-UU6L3-AOV3E-RSLD3-Y2PJ3-4MBYS"
|
||||
}
|
||||
}
|
||||
},
|
||||
"devServer" : {
|
||||
"port" : 3000,
|
||||
"https" : true
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-ui": "^1.5.5",
|
||||
"copy-webpack-plugin": "^5.1.1",
|
||||
"jweixin-module": "^1.6.0",
|
||||
"mathjs": "^12.4.2",
|
||||
"uqrcodejs": "^4.0.7",
|
||||
"vconsole": "^3.15.1",
|
||||
"vue-jsonp": "^2.0.0",
|
||||
"weixin-js-sdk": "^1.6.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.76.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/game/game",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
// #ifdef MP-WEIXIN
|
||||
"disableScroll": true,
|
||||
// #endif
|
||||
"navigationBarTitleText" : "宝藏猎人"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText" : "宝藏猎人-登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/my",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
// #ifdef MP-WEIXIN
|
||||
"disableScroll": true,
|
||||
// #endif
|
||||
"navigationBarTitleText" : "我的"
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
.bck-top,
|
||||
.bck-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bck-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bck-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* 定位城市 */
|
||||
.city-position {
|
||||
position: absolute;
|
||||
/* #ifdef H5 */
|
||||
top: 25px;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
top: 44px;
|
||||
/* #endif */
|
||||
left: 10px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
display: flex;
|
||||
text-underline-offset: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
.city-position image {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 右上侧菜单 */
|
||||
.tabbar-right {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
/* #ifdef H5 */
|
||||
top: 10vh;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
top: 13vh;
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabbar-right view {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabbar-right image {
|
||||
width: 36px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tabbar-bottom {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tabbar-bottom .group {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabbar-bottom .group .item {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #292D32;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.tabbar-bottom .group .item image {
|
||||
width: 24px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item .logo {
|
||||
height: 120px !important;
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,661 @@
|
|||
<template>
|
||||
<view>
|
||||
<map id="map" ref="map" :longitude="longitude" :latitude="latitude" :scale="mapScale" style="width: 100vw;"
|
||||
:style="{ height: app.globalData.sysInfo.windowHeight + 'px' }" :circles="circles" :markers="markers"
|
||||
@markertap="markerclick" :enable-scroll="!popupOpenState" subkey="AM4BZ-UGEKQ-F355S-2PJVY-46UEO-ZXBDD" layer-style="1">
|
||||
</map>
|
||||
|
||||
<!-- 顶部阴影 -->
|
||||
<view class="bck-top">
|
||||
<image style="width: 100%;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/bck-top.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- 底部阴影 -->
|
||||
<view class="bck-bottom">
|
||||
<image style="width: 100%;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/bck-bottom.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 当前定位城市 -->
|
||||
<view class="city-position">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/city-position.png" mode="widthFix"></image>
|
||||
<text style="margin-left: 5px;">{{positionCity}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧菜单 -->
|
||||
<view class="tabbar-right">
|
||||
<view @click="openPopupSetSystem">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/set.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view @click="openPopupSignin">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view @click="scanQRCode">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/scan.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view @click="switchPageCoinType">
|
||||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + (curPageCoinType > 1 ? 'gold.png' : 'copper.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部菜单 -->
|
||||
<view class="tabbar-bottom">
|
||||
<view class="group" style="justify-content: flex-end;">
|
||||
<view class="item" @click="openPopupTask">
|
||||
<image class="logo" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png" mode="heightFix"></image>
|
||||
<image style="width: 25px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tabbar-icon1.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group" style="justify-content: center;">
|
||||
<view @click="myPosition" class="item">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tabbar-icon2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group" style="justify-content: flex-start;">
|
||||
<view @click="goMy" class="item">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tabbar-icon3.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 弹窗：设置 -->
|
||||
<popup-setsystem ref="pSetsystem" @close="publicClose"></popup-setsystem>
|
||||
<block v-if="JSON.stringify(app.globalData.userinfo) !== '{}'">
|
||||
<!-- 弹窗：悬赏、赏金任务 -->
|
||||
<popup-task ref="pTask" @close="publicClose"></popup-task>
|
||||
|
||||
<!-- 弹窗：签到 -->
|
||||
<popup-signin ref="pSign" @close="publicClose"></popup-signin>
|
||||
|
||||
<!-- 弹窗：踪迹 -->
|
||||
<popup-trace ref="pTrace" @close="traceClose"></popup-trace>
|
||||
|
||||
<!-- 弹窗：找到宝藏 -->
|
||||
<popup-findcoin ref="pFindcoin" @close="publicClose" :coinId="findCoinInfo.id" :coinType="findCoinInfo.type" :coinName="findCoinInfo.name" :coinAddress="findCoinInfo.address"></popup-findcoin>
|
||||
|
||||
<!-- 弹窗：查看视频 -->
|
||||
<popup-findvideo ref="pFindvideo" @close="publicClose"></popup-findvideo>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
jsonp
|
||||
} from 'vue-jsonp'
|
||||
const { proxy } = getCurrentInstance() // 全局对象
|
||||
|
||||
// ref组件
|
||||
const pTask = ref() // 赏金、悬赏任务弹窗
|
||||
const pSign = ref() // 签到弹窗
|
||||
const pSetsystem = ref() // 设置弹窗
|
||||
const pTrace = ref() // 踪迹弹窗
|
||||
const pFindcoin = ref() // 找到宝藏弹窗
|
||||
const pFindvideo = ref() // 查看视频弹窗
|
||||
const mapContext = ref()
|
||||
|
||||
const popupOpenState = ref(false)
|
||||
|
||||
const userInfo = ref(app.globalData.userinfo)
|
||||
// 找到宝藏
|
||||
const findCoinInfo = ref({}) // 硬币信息
|
||||
|
||||
// 当前地图类型，1金币，2银币与铜币
|
||||
const curPageCoinType = ref(2)
|
||||
// 关于地图贴片
|
||||
const curClickMarkerId = ref(0)
|
||||
|
||||
const positionCity = ref('正在定位')
|
||||
const longitude = ref(121.472644) // 我的定位 经度
|
||||
const latitude = ref(31.231706) // 我的定位 纬度
|
||||
const myPositionMarker = ref({}) // 我的位置 marker标记
|
||||
const mapScale = ref(13)
|
||||
const isShanghai = ref(false) // 是否在上海
|
||||
const markers = ref([])
|
||||
var coinMapList = [] // 银币与铜币列表
|
||||
var coinGoldMapList = [] // 金币列表
|
||||
var circlesTmp = [] // circle根据scale级别会隐藏
|
||||
const circles = ref([])
|
||||
|
||||
onLoad(async (options) => {
|
||||
// #ifdef H5
|
||||
if (!app.globalData.token) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (proxy.$wx && app.isWechat()) {
|
||||
app.wxinit()
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
await app.globalData.loginPromise // 等待登录完毕
|
||||
if (app.globalData.token && (('scene' in options) || app.globalData.helpCode)) {
|
||||
if (!app.globalData.helpCode) app.globalData.helpCode = options.scene
|
||||
app.doHelp() // 直接助力
|
||||
} else if ('scene' in options) {
|
||||
app.globalData.helpCode = options.scene
|
||||
}
|
||||
// #endif
|
||||
mapContext.value = uni.createMapContext('map', this)
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
altitude: true,
|
||||
isHighAccuracy: true,
|
||||
success(res) {
|
||||
if (app.globalData.token) {
|
||||
loadData()
|
||||
}
|
||||
myPositionMarker.value = {longitude: res.longitude, latitude: res.latitude}
|
||||
positionCity.value = '上海市'
|
||||
},
|
||||
fail(err) {
|
||||
console.error(err)
|
||||
if (app.globalData.token) {
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
/**
|
||||
* 加载所有硬币信息
|
||||
*/
|
||||
const loadData = (hideLoading = false) => {
|
||||
// 请求硬币列表
|
||||
let data = {}
|
||||
if (curPageCoinType.value === 1) {
|
||||
coinGoldMapList = []
|
||||
data.type = curPageCoinType.value
|
||||
} else {
|
||||
coinMapList = []
|
||||
}
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/list',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
console.log(res.data.data)
|
||||
// 对硬币进行分类
|
||||
if (curPageCoinType.value === 1) {
|
||||
coinGoldMapList = res.data.data
|
||||
} else {
|
||||
coinMapList = res.data.data
|
||||
}
|
||||
positionCity.value = '上海市'
|
||||
calcMapMarkers() // 去计算markers该怎么放
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
if (hideLoading) uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 摆放地图markers
|
||||
*/
|
||||
const calcMapMarkers = () => {
|
||||
if (!app.globalData.isReloadMarkers) return
|
||||
const CIRCLE_RADIUS = 1000 // 圆环暂定半径
|
||||
|
||||
let list = coinMapList
|
||||
if (curPageCoinType.value === 1) {
|
||||
list = coinGoldMapList // 当前是金币视角
|
||||
}
|
||||
let tmpMarkers = [],
|
||||
tmpCircles = []
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let coin = list[i]
|
||||
|
||||
if (curPageCoinType.value === 1 && coin.is_unlock === 1) continue // 金币需要忽略已解锁的
|
||||
if (coin.latitude < -90 || coin.latitude > 90) continue // 容错：经纬度填反
|
||||
|
||||
let icon = ''
|
||||
switch (coin.type) {
|
||||
case 1:
|
||||
icon = 'gold-marker.png'
|
||||
break
|
||||
case 2:
|
||||
icon = coin.is_unlock === 1 ? 'unlock-icon-red.png' : 'silver.png';
|
||||
break
|
||||
case 3:
|
||||
icon = coin.is_unlock === 1 ? 'unlock-icon-yellow.png' : 'copper.png';
|
||||
break
|
||||
}
|
||||
const {newLongitude, newLatitude, circleRadius} = azimuthOffset(coin)
|
||||
let data = {
|
||||
id: coin.id,
|
||||
longitude: newLongitude,
|
||||
latitude: newLatitude,
|
||||
anchor: {x: .5, y: .5},
|
||||
iconPath: 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + icon,
|
||||
width: coin.type === 1 ? 41 : 37,
|
||||
height: coin.type === 1 ? 37 : 35,
|
||||
};
|
||||
if (curPageCoinType.value !== 1 && coin.is_unlock === 1) {
|
||||
data.width = 20;
|
||||
data.height = 28;
|
||||
}
|
||||
tmpMarkers.push(data);
|
||||
|
||||
if (circleRadius === 0 || coin.is_unlock === 1) continue;
|
||||
tmpCircles.push({
|
||||
id: coin.id,
|
||||
longitude: newLongitude,
|
||||
latitude: newLatitude,
|
||||
fillColor: '#FFFFFFA3',
|
||||
color: '#B1CCCB',
|
||||
strokeWidth: 2,
|
||||
radius: circleRadius
|
||||
})
|
||||
}
|
||||
tmpMarkers.unshift({
|
||||
id: 999999999,
|
||||
longitude: myPositionMarker.value.longitude,
|
||||
latitude: myPositionMarker.value.latitude,
|
||||
iconPath: "https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/myposition.png",
|
||||
width: 49,
|
||||
height: 68
|
||||
}) // 我的位置
|
||||
console.log(tmpMarkers)
|
||||
markers.value = tmpMarkers
|
||||
app.globalData.isReloadMarkers = false
|
||||
circles.value = tmpCircles
|
||||
}
|
||||
const _d = new Date();
|
||||
const _timestamp = new Date((_d.getFullYear() + '/' + (_d.getMonth()+1) + '/' + _d.getDate())).getTime(); // 今日时间戳
|
||||
const _time = _d.getHours(); // 现在几点
|
||||
// console.log('当前_time', _time, '当前_timestamp', _timestamp);
|
||||
|
||||
/**
|
||||
* 偏移经纬度隐藏真实位置
|
||||
* @param coin 硬币信息
|
||||
* @returns {newLongitude, newLatitude, circleRadius} 新经度，新纬度，圆环半径
|
||||
*/
|
||||
const azimuthOffset = (coin) => {
|
||||
const originLongitude = parseFloat(coin.longitude); // 原经度
|
||||
const originLatitude = parseFloat(coin.latitude); // 原纬度
|
||||
const clueCount = coin.clue_count; // 总线索数
|
||||
const userClueCount = coin.user_clue_count; // 用户已解锁线索数
|
||||
const type = coin.type; // 1金币，2、3银币铜币
|
||||
const createdAt = coin.created_at; // 根据硬币创建时间缩小圆环
|
||||
|
||||
if (type === 1 || clueCount === userClueCount) {
|
||||
return {
|
||||
newLongitude: originLongitude,
|
||||
newLatitude: originLatitude,
|
||||
circleRadius: 0
|
||||
}
|
||||
} // 线索只要相等，说明完成了，或者两者都为0从未设置过线索，或者金币，统一不设圆环不偏移
|
||||
|
||||
const EARTH_RADIUS = 6371393
|
||||
let rightDist = 650 // 米，向右移动（变经度）
|
||||
let topDist = -400 // 米，向上移动（变纬度）
|
||||
let circleRadius = 1000; // 圆环半径：银币
|
||||
if (type === 3) {
|
||||
circleRadius = 800; // 圆环半径：铜币初始化800米
|
||||
}
|
||||
|
||||
// 先根据硬币的创建时间缩小圆环半径
|
||||
// 缩小规则：硬币创建的第3天开始，第3-6天每天缩小20%，第7天缩小10%，每日8点后会算做一天
|
||||
|
||||
// 获取现在的日期与时间
|
||||
let date = new Date(createdAt);
|
||||
let formatDate = (date.getFullYear() + '/' + (date.getMonth()+1) + '/' + date.getDate());
|
||||
let timestamp = new Date(formatDate).getTime();
|
||||
|
||||
// console.log('硬币时间戳', timestamp); // 获取当日时间戳
|
||||
// console.log('今日时间戳', _timestamp); // 获取当日时间戳
|
||||
let dayc = ((_timestamp - timestamp) / 1000) / 60 / 60 / 24;
|
||||
|
||||
let calcDay = dayc - 3 < 0 ? 0 : dayc - 3;
|
||||
// console.log('创建于', dayc, '天前');
|
||||
if (_time < 8 && calcDay > 0) {
|
||||
calcDay--;
|
||||
}
|
||||
// console.log('参与计算的天数', calcDay, '天');
|
||||
|
||||
if (calcDay >= 1 && calcDay <= 4) {
|
||||
let scale = (1 - calcDay * 0.2);
|
||||
circleRadius *= scale;
|
||||
rightDist *= scale;
|
||||
topDist *= scale;
|
||||
} else if (calcDay >= 5) {
|
||||
circleRadius *= 0.1;
|
||||
rightDist *= 0.1;
|
||||
topDist *= 0.1;
|
||||
}
|
||||
|
||||
// 根据线索数计算偏移量
|
||||
let lonItemDist = rightDist / clueCount
|
||||
let latItemDist = topDist / clueCount // 每份线索占多少比例（米）
|
||||
let lonDoneDist = lonItemDist * userClueCount // 已完成数量（米）
|
||||
let latDoneDist = latItemDist * userClueCount
|
||||
let logDist = rightDist - lonDoneDist // 最终的经度偏移量
|
||||
let latDist = topDist - latDoneDist // 最终的纬度偏移量
|
||||
|
||||
// 经度偏移
|
||||
let d = logDist / EARTH_RADIUS
|
||||
let cs = Math.cos(originLatitude * Math.PI / 180.0)
|
||||
let c = d / cs * 180.0 / Math.PI
|
||||
// 纬度偏移
|
||||
let d2 = latDist / EARTH_RADIUS
|
||||
let c2 = d2 / Math.PI * 180.0
|
||||
|
||||
// 确认圆环半径
|
||||
let circleItem = circleRadius / clueCount
|
||||
let circleDone = circleItem * userClueCount
|
||||
let circleRes = circleRadius - circleDone
|
||||
|
||||
return {
|
||||
newLongitude: originLongitude + c,
|
||||
newLatitude: originLatitude + c2,
|
||||
circleRadius: circleRes
|
||||
}
|
||||
}
|
||||
|
||||
// 切换地图类型
|
||||
const switchPageCoinType = () => {
|
||||
app.globalData.isReloadMarkers = true
|
||||
if (curPageCoinType.value === 1) {
|
||||
uni.showToast({
|
||||
title: '已切换为银币、铜币视角',
|
||||
icon: 'none'
|
||||
})
|
||||
curPageCoinType.value = 2
|
||||
calcMapMarkers() // 重新计算地图markers
|
||||
} else {
|
||||
|
||||
curPageCoinType.value = 1
|
||||
if (coinGoldMapList.length === 0) {
|
||||
// 请求金币
|
||||
uni.showLoading({
|
||||
title: '切换为金币视角'
|
||||
})
|
||||
mapScale.value = 12
|
||||
loadData(true)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '已切换为金币视角',
|
||||
icon: 'none'
|
||||
})
|
||||
calcMapMarkers() // 重新计算地图markers
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 去“我的”页面
|
||||
const goMy = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!app.globalData.token) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/my'
|
||||
})
|
||||
}
|
||||
// 定位我的位置
|
||||
const myPosition = () => {
|
||||
app.playAudio() // 点击音效
|
||||
// if (isShanghai.value) {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
altitude: true,
|
||||
isHighAccuracy: true,
|
||||
success(res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
mapContext.value.moveToLocation({
|
||||
longitude: res.longitude,
|
||||
latitude: res.latitude,
|
||||
success(res) {
|
||||
// console.log('移动坐标成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.log('定位错误', err)
|
||||
}
|
||||
})
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '您的定位不在上海，无法定位',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
}
|
||||
// 点击marker，弹出踪迹弹窗
|
||||
const markerclick = (e) => {
|
||||
console.log(e);
|
||||
app.playAudio() // 点击音效
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!app.globalData.token) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
const gold = coinGoldMapList.find(function(item) {
|
||||
return item.id === e.detail.markerId
|
||||
})
|
||||
if (gold) {
|
||||
popupOpenState.value = true
|
||||
pTrace.value.open(gold)
|
||||
} else {
|
||||
const curcoin = coinMapList.find(function(item) {
|
||||
return item.id === e.detail.markerId
|
||||
})
|
||||
if (!curcoin) return
|
||||
popupOpenState.value = true;
|
||||
|
||||
mapContext.value.getScale({
|
||||
success(res) {
|
||||
if (res.scale < 14) {
|
||||
if (mapScale.value === 14) {
|
||||
mapScale.value = 14.1;
|
||||
} else {
|
||||
mapScale.value = 14;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// #ifdef H5
|
||||
mapContext.value.moveToLocation({
|
||||
longitude: e.detail.longitude,
|
||||
latitude: e.detail.latitude
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
const curmarker = markers.value.find(function(item) {
|
||||
return item.id === e.detail.markerId
|
||||
})
|
||||
mapContext.value.moveToLocation({
|
||||
longitude: curmarker.longitude,
|
||||
latitude: curmarker.latitude
|
||||
});
|
||||
// #endif
|
||||
if (curcoin.is_unlock === 1) {
|
||||
pFindvideo.value.open(curcoin)
|
||||
} else {
|
||||
pTrace.value.open(curcoin)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// 踪迹弹窗的监听窗口，可能需要更新页面进行缩圈
|
||||
const traceClose = (res) => {
|
||||
popupOpenState.value = false
|
||||
if (app.globalData.isReloadMarkers) {
|
||||
if (res === 1) {
|
||||
uni.showLoading({
|
||||
title: '正在刷新金币'
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '硬币范围正在缩小'
|
||||
})
|
||||
}
|
||||
|
||||
loadData(true)
|
||||
}
|
||||
}
|
||||
// 公共关闭弹窗事件，允许页面滑动
|
||||
const publicClose = () => {
|
||||
popupOpenState.value = false
|
||||
}
|
||||
// 微信扫一扫
|
||||
const scanQRCode = () => {
|
||||
// #ifdef H5
|
||||
if (proxy.$wx && app.isWechat()) {
|
||||
proxy.$wx.scanQRCode({
|
||||
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
||||
success: function(res) {
|
||||
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
|
||||
let data = JSON.parse(result)
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/getCoinInfo',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
if (res.data.code === 200) {
|
||||
findCoinInfo.value = res.data.data
|
||||
pFindcoin.value.open() // 发现硬币，进入认领流程
|
||||
} else {
|
||||
//说明参数不合法
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '使用扫一扫功能，请在微信客户端打开本页面',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.scanCode({
|
||||
scanType: 'qrCode',
|
||||
success: function (res) {
|
||||
let data = JSON.parse(res.result)
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/coin/getCoinInfo',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
data: data,
|
||||
success: (res) => {
|
||||
console.log(res.data)
|
||||
if (res.data.code === 200) {
|
||||
findCoinInfo.value = res.data.data
|
||||
pFindcoin.value.open() // 发现硬币，进入认领流程
|
||||
} else {
|
||||
//说明参数不合法
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
}
|
||||
// 打开赏金任务弹窗
|
||||
const openPopupTask = () => {
|
||||
app.playAudio() // 点击音效
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!app.globalData.token) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
popupOpenState.value = true
|
||||
pTask.value.open()
|
||||
}
|
||||
// 打开签到弹窗
|
||||
const openPopupSignin = () => {
|
||||
app.playAudio()
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!app.globalData.token) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
popupOpenState.value = true
|
||||
pSign.value.open()
|
||||
}
|
||||
// 打开系统设置弹窗
|
||||
const openPopupSetSystem = () => {
|
||||
app.playAudio()
|
||||
popupOpenState.value = true
|
||||
pSetsystem.value.open()
|
||||
}
|
||||
// 打开踪迹弹窗
|
||||
const openPopupTrace = () => {
|
||||
app.playAudio()
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!app.globalData.token) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
popupOpenState.value = true
|
||||
pTrace.value.open()
|
||||
}
|
||||
|
||||
</script>
|
||||
<!--这里引入分离的界面样式代码-->
|
||||
<style scoped>
|
||||
@import './game.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
.content {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/TreasureHunter.png) no-repeat top 99px center,
|
||||
/* text1 顶部标题 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/findjoy.png) no-repeat top 230px center,
|
||||
/* text2 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/icon.png) no-repeat top 95px left calc(50% + 145px),
|
||||
/* icon */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png) no-repeat bottom -100px left calc(50% + 22px),
|
||||
/* 松鼠logo */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star1.png) no-repeat top 145px center,
|
||||
/* star1 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star2.png) no-repeat bottom 335px right 40px,
|
||||
/* star2 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star3.png) no-repeat bottom 360px left 58px,
|
||||
/* star3 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star4.png) no-repeat bottom 300px left 38px,
|
||||
/* star4 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star5.png) no-repeat bottom 294px right 33px,
|
||||
/* star5 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat top calc(40% - 50px) right 85px,
|
||||
/* circle1 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat top 40% right -30px,
|
||||
/* circle2 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat bottom 220px left 20px,
|
||||
/* circle3 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat bottom 400px left 25px,
|
||||
/* circle4 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/bck.png) no-repeat bottom;
|
||||
/* 彩色背景 */
|
||||
background-size: 290px auto,
|
||||
/* text1 顶部标题 */
|
||||
auto 15px,
|
||||
/* text2 */
|
||||
17px,
|
||||
/* icon */
|
||||
auto 500px,
|
||||
/* 松鼠logo */
|
||||
22px,
|
||||
/* star1 */
|
||||
44px,
|
||||
/* star2 */
|
||||
14px,
|
||||
/* star3 */
|
||||
25px,
|
||||
/* star4 */
|
||||
13px,
|
||||
/* star5 */
|
||||
72px,
|
||||
/* circle1 */
|
||||
140px,
|
||||
/* circle2 */
|
||||
208px,
|
||||
/* circle3 */
|
||||
73px,
|
||||
/* circle4 */
|
||||
100% auto;
|
||||
/* 彩色背景 */
|
||||
}
|
||||
|
||||
.disable-content-bck {
|
||||
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png) no-repeat bottom -100px left calc(50% + 22px),
|
||||
/* 松鼠logo */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star2.png) no-repeat bottom 335px right 40px,
|
||||
/* star2 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star3.png) no-repeat bottom 360px left 58px,
|
||||
/* star3 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star4.png) no-repeat bottom 300px left 38px,
|
||||
/* star4 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star5.png) no-repeat bottom 294px right 33px,
|
||||
/* star5 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat top calc(40% - 50px) right 85px,
|
||||
/* circle1 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat top 40% right -30px,
|
||||
/* circle2 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat bottom 220px left 20px,
|
||||
/* circle3 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png) no-repeat bottom 400px left 25px,
|
||||
/* circle4 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/bck.png) no-repeat bottom;
|
||||
/* 彩色背景 */
|
||||
background-size: auto 500px,
|
||||
/* 松鼠logo */
|
||||
44px,
|
||||
/* star2 */
|
||||
14px,
|
||||
/* star3 */
|
||||
25px,
|
||||
/* star4 */
|
||||
13px,
|
||||
/* star5 */
|
||||
72px,
|
||||
/* circle1 */
|
||||
140px,
|
||||
/* circle2 */
|
||||
208px,
|
||||
/* circle3 */
|
||||
73px,
|
||||
/* circle4 */
|
||||
100% auto;
|
||||
/* 彩色背景 */
|
||||
}
|
||||
|
||||
/* 手机号登录模块 */
|
||||
.mobile-container::before {
|
||||
content: '欢迎使用';
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: calc(50% - 132px - 130px);
|
||||
}
|
||||
|
||||
.mobile-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/TreasureHunter-white.png) no-repeat top calc(50% - 132px - 60px) center,
|
||||
/* text3 顶部标题 */
|
||||
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/icon2.png) no-repeat top calc(50% - 130px - 60px) left calc(50% + 5px);
|
||||
background-size: 180px auto,
|
||||
/* text3 顶部标题 */
|
||||
200px auto;
|
||||
/* icon2 */
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 320px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
width: 261px;
|
||||
height: 53px;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
background-color: #000000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn1 image {
|
||||
width: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
margin-top: 18px;
|
||||
background: linear-gradient(92.36deg, #84FF21 0%, #07FFBA 100%);
|
||||
}
|
||||
|
||||
.btn2 image {
|
||||
width: 26px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mobile-card-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mobile-icon-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||||
width: 550rpx;
|
||||
border-radius: 26px;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mobile-icon {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.mobile-input {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
margin: 20px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.mobile-input-text {
|
||||
padding: 0 10px 0 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mobile-input-input {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.smscode {
|
||||
font-family: Alfa Slab One;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.015em;
|
||||
text-align: left;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.mobile-login-btn {
|
||||
height: 40px;
|
||||
margin: 20px 10px 10px 10px;
|
||||
color: #01F0FD;
|
||||
background-color: #000;
|
||||
font-size: 14px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.terms view:first-child {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terms-check {
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.terms {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.terms-color {
|
||||
color: #85FF21;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 20px;
|
||||
background: linear-gradient(180deg, #FFFFFB -19.14%, #FFFEEB 50.07%);
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media screen and (max-width: 767px) {
|
||||
|
||||
_::-webkit-full-page-media,
|
||||
_:future,
|
||||
:root .safari_only {
|
||||
padding-bottom: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
<template>
|
||||
<view v-if="isLoaded" class="content" :class="{ 'disable-content-bck': isMobileLogin}">
|
||||
<!-- 登录按钮 -->
|
||||
<view v-if="!isMobileLogin" class="buttons center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn1 center">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon.png" mode="widthFix"></image>手机号登录
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<button @click="goMobileLogin()" class="btn1 center">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon.png" mode="widthFix"></image>手机号登录
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<popup-agreement ref="pAgreementUser" :agreementMode="0"></popup-agreement>
|
||||
<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
|
||||
|
||||
<!-- 手机号登录弹窗 -->
|
||||
<uni-popup ref="pMobile" type="center" mask-background-color="rgba(0,0,0,.65)">
|
||||
<view class="mobile-container">
|
||||
<view class="mobile-card-group" >
|
||||
<view class="mobile-card">
|
||||
<view class="center">
|
||||
<view class="flex pr-5">
|
||||
<image class="mobile-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon-black.png"
|
||||
mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view>手机号{{isWechatLogin ? '绑定' : '登录'}}</view>
|
||||
</view>
|
||||
<view class="mobile-input">
|
||||
<view class="mobile-input-text center">
|
||||
+<text>86</text>
|
||||
</view>
|
||||
<view class="mobile-input-input">
|
||||
<input type="number" v-model="userMoblie" placeholder="请输入手机号" maxlength="11" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="mobile-input">
|
||||
<view class="mobile-input-input" style="padding: 0 20px;">
|
||||
<input type="number" v-model="smscode" maxlength="6"
|
||||
placeholder-style="font-family: Alfa Slab One;font-size: 10px;font-weight: 400;" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view @click="doSendSms" class="smscode center">
|
||||
<text v-if="smscodeTime === 0" style="color: #83FF23;">获取验证码</text>
|
||||
<text v-else style="color: #939393;font-size: 14px;">{{smscodeTime}}秒再次发送</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<button @click="doLogin" class="mobile-login-btn center">{{isWechatLogin ? '绑定' : '登录'}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="terms safari_only">
|
||||
<view class="" @click="isTermsCheck = !isTermsCheck">
|
||||
<image style="width: 10px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/radio-icon.png" mode="widthFix"></image>
|
||||
<image v-if="isTermsCheck" class="terms-check" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/check.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text style="margin-left: 5px;">
|
||||
登录即表明同意
|
||||
<text @click="openAgreement(0)" class="terms-color">用户协议</text>、
|
||||
<text @click="openAgreement(1)" class="terms-color">隐私协议</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const app = getApp()
|
||||
export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {
|
||||
isMobileLogin: false, // 开启手机号登录弹窗
|
||||
isWechatLogin: false, // 微信登录成功，绑定手机号模式
|
||||
isLoaded: false, // 页面静态资源加载完毕再展示页面
|
||||
userMoblie: '', // 手机号
|
||||
smscode: '', // 验证码
|
||||
smscodeTime: 0, // 是否已发送验证码，倒计时，0可以发送
|
||||
isTermsCheck: false,
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
// 查看缓存jinxiangguo_login_token
|
||||
if (app.globalData.token) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/game/game'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
// 判断是否在微信客户端
|
||||
if (this.$wx && app.isWechat()) {
|
||||
let openid = app.getQueryString('openid')
|
||||
if (!openid) {
|
||||
location.href = app.globalData.requestUrl + '/api/user/wxsnsapi?url=' + (location.origin + location.pathname + (location.search ? location.search : '?1=1'))
|
||||
return
|
||||
}
|
||||
// 拿openid到后台换取token，拿不到就引导用户绑定手机号
|
||||
let that = this
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/getWxLoginToken',
|
||||
method: 'GET',
|
||||
data: {
|
||||
openid: openid
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data.data)
|
||||
if (!res.data.data.token) {
|
||||
this.isWechatLogin = true
|
||||
this.isMobileLogin = true
|
||||
this.$refs.pMobile.open()
|
||||
open
|
||||
} else {
|
||||
uni.setStorage({
|
||||
key: 'jinxiangguo_login_token',
|
||||
data: res.data.data.token,
|
||||
success: function () {
|
||||
location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
that.pageInit() // 加载页面静态资源
|
||||
}
|
||||
})
|
||||
}
|
||||
if (!this.isLoaded) {
|
||||
await this.pageInit()
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.isLoaded = true
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
// #ifdef MP-WEIXIN
|
||||
getPhoneNumber (e) {
|
||||
console.log(e)
|
||||
if (!e.detail.cloudID) {
|
||||
wx.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
let that = this
|
||||
wx.cloud.callFunction({ //连接云函数
|
||||
name:'getPhoneNumber', // 云函数名称
|
||||
data:{
|
||||
weRunData: wx.cloud.CloudID(e.detail.cloudID) // 这个 CloudID 值到云函数端会被替换
|
||||
}
|
||||
}).then(res => {
|
||||
if (!app.globalData.unionid) res.result.unionid
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/wechat/register',
|
||||
data: {
|
||||
unionid: res.result.unionid,
|
||||
mobile: res.result.moblie,
|
||||
openid: res.result.openid,
|
||||
},
|
||||
method: 'POST',
|
||||
success: function (res2) {
|
||||
let toast = ''
|
||||
console.log(res2.data)
|
||||
app.globalData.token = res2.data.data.token
|
||||
if (res2.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '登录成功！',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.setStorage({
|
||||
key: 'jinxiangguo_login_token',
|
||||
data: res2.data.data.token,
|
||||
success: function () {
|
||||
uni.reLaunch({
|
||||
url: '/pages/game/game'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res2.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: function (res) {
|
||||
wx.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(err=>{
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
async pageInit() {
|
||||
await app.preloadImages([
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/TreasureHunter.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/TreasureHunter-white.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/icon.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star1.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/findjoy.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/bck.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star2.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star3.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star4.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/star5.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/circle.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png',
|
||||
'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/mobile-icon.png'
|
||||
])
|
||||
this.isLoaded = true
|
||||
return true
|
||||
},
|
||||
// #endif
|
||||
// 打开用户协议
|
||||
openAgreement(mode) {
|
||||
app.playAudio()
|
||||
if (mode == 0) {
|
||||
this.$refs.pAgreementUser.open()
|
||||
} else {
|
||||
this.$refs.pAgreementPrivate.open()
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* 打开手机号登录弹窗
|
||||
*/
|
||||
goMobileLogin() {
|
||||
app.playAudio() // 点击音效
|
||||
this.isMobileLogin = true
|
||||
this.$refs.pMobile.open()
|
||||
},
|
||||
/**
|
||||
* 执行登录
|
||||
*/
|
||||
doLogin() {
|
||||
app.playAudio() // 点击音效
|
||||
if (!this.checkMobile()) return
|
||||
if (!this.isTermsCheck) {
|
||||
uni.showToast({
|
||||
title: '请勾选用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
// #ifdef H5
|
||||
let path = '/api/user/login',
|
||||
data = {
|
||||
mobile: this.userMoblie,
|
||||
code: this.smscode
|
||||
}
|
||||
// 微信登录后绑定手机号
|
||||
if (this.isWechatLogin) {
|
||||
data.openid = app.getQueryString('openid')
|
||||
path = '/api/user/wxRegister'
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '正在登录'
|
||||
})
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + path,
|
||||
method: 'POST',
|
||||
data: data,
|
||||
success: (res) => {
|
||||
let toast = ''
|
||||
console.log(res.data)
|
||||
app.globalData.token = res.data.data.token
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '登录成功！',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.setStorage({
|
||||
key: 'jinxiangguo_login_token',
|
||||
data: res.data.data.token,
|
||||
success: function () {
|
||||
location.reload()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 发送验证码
|
||||
*/
|
||||
doSendSms() {
|
||||
app.playAudio() // 点击音效
|
||||
if (!this.checkMobile()) return
|
||||
if (this.smscodeTime > 0) return
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/sms', //仅为示例，并非真实接口地址。
|
||||
method: 'POST',
|
||||
data: {
|
||||
mobile: this.userMoblie
|
||||
},
|
||||
success: (res) => {
|
||||
let toast = ''
|
||||
console.log(res.data)
|
||||
if (res.data.code === 200) {
|
||||
toast = '验证码发送成功'
|
||||
this.smscodeTime = 59
|
||||
let time = setInterval(() => {
|
||||
this.smscodeTime--
|
||||
if (this.smscodeTime <= 0) {
|
||||
clearInterval(time)
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
toast = '验证码发送失败，请重试'
|
||||
}
|
||||
uni.showToast({
|
||||
title: toast,
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 验证手机号
|
||||
*/
|
||||
checkMobile() {
|
||||
let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
|
||||
if (!this.userMoblie) { //判断如果手机号为空，提示用户输入手机号
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
} else if (!reg.test(this.userMoblie)) { //判断手机号格式时候正确
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<!--这里引入分离的界面样式代码-->
|
||||
<style scoped>
|
||||
@import './index.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,677 @@
|
|||
<template>
|
||||
<view class="back" @click="goGame">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/back.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<scroll-view scroll-y>
|
||||
<view class="top">
|
||||
<view class="balance">
|
||||
<view class="price-bck">
|
||||
<view class="logo-bck">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-橡果.png" mode="widthFix"></image>
|
||||
</view>
|
||||
{{userinfo.amount}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="avatar-group">
|
||||
<view class="avatar">
|
||||
<!-- #ifdef H5 -->
|
||||
<image :src="avatar" mode="heightFix"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button open-type="chooseAvatar" @chooseavatar="avatarHandler" class="avatar-btn">
|
||||
<image :src="avatar" mode="heightFix"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: -30px;" class="my-bck">
|
||||
<view class="center-circle">
|
||||
<view class="circle-left">
|
||||
</view>
|
||||
<view class="circle-center">
|
||||
</view>
|
||||
<view class="circle-right">
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-content">
|
||||
<view class="nickname">
|
||||
{{userinfo.name}}
|
||||
<image v-if="JSON.stringify(userinfo) !== '{}'" @click="openPopupUseredit"
|
||||
src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/edit.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view v-if="JSON.stringify(userinfo) !== '{}'" class="userid">
|
||||
ID:{{userinfo.id}}
|
||||
</view>
|
||||
<view class="content-menu">
|
||||
<view @click="openPopupMycoin">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-我的硬币.png" mode="widthFix"></image>
|
||||
<text>我的硬币</text>
|
||||
</view>
|
||||
<view @click="openPopupRank">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-排行榜.png" mode="widthFix"></image>
|
||||
<text>排行榜</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pd-25">
|
||||
<view class="menu-list">
|
||||
<view class="list-item" @click="openPopupLearning">
|
||||
<view class="item-left">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-新手教程.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
新手教程
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item" @click="openPopupShare">
|
||||
<view class="item-left">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-邀请好友.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
邀请好友
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="list-item">
|
||||
<button open-type="contact" bindcontact="handleContact" hover-class="none" class="contact-kefu">
|
||||
<view class="item-left">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-联系客服.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
联系客服
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="list-item" @click="openPopupShequ">
|
||||
<view class="item-left">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon社区号.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
社区号
|
||||
</view>
|
||||
<view class="item-center item-shequ">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-微信.png" mode="widthFix"></image>
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-qq.png" mode="widthFix"></image>
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/logo-抖音.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item" @click="openPopupSetSystem">
|
||||
<view class="item-left">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/set.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
设置
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item" @click="openPopupContactus">
|
||||
<view class="item-left">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/icon-联系我们.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
联系我们
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/setsystem/icon-right.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-if="!proxy.$wx || !app.isWechat()" class="back-login">
|
||||
<view class="back-btn" @click="logout">
|
||||
退出登录
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<!-- 弹窗：我的硬币 -->
|
||||
<popup-mycoin ref="pMycoin"></popup-mycoin>
|
||||
<!-- 弹窗：排行榜 -->
|
||||
<popup-rank ref="pRank"></popup-rank>
|
||||
|
||||
<!-- 弹窗：新手教程 -->
|
||||
<popup-learning ref="pLearning"></popup-learning>
|
||||
<!-- 弹窗：邀请好友 -->
|
||||
<popup-share ref="pShare"></popup-share>
|
||||
<!-- 弹窗：社区号 -->
|
||||
<popup-shequ ref="pShequ"></popup-shequ>
|
||||
<!-- 弹窗：设置 -->
|
||||
<popup-setsystem ref="pSetsystem"></popup-setsystem>
|
||||
<!-- 弹窗：联系我们 -->
|
||||
<popup-contactus ref="pContactus"></popup-contactus>
|
||||
<!-- 弹窗：修改昵称 -->
|
||||
<popup-useredit ref="pUseredit" @closeEdit="closeEdit"></popup-useredit>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
// #ifdef MP-WEIXIN
|
||||
export default {
|
||||
onShareAppMessage() {
|
||||
let user = getApp().globalData.userinfo,
|
||||
path = '/pages/game/game'
|
||||
if ('code' in user) {
|
||||
path += '?scene=' + user.code
|
||||
}
|
||||
return {
|
||||
title: '快来一起寻宝吧～',
|
||||
path: path
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<script setup>
|
||||
import {
|
||||
nextTick
|
||||
} from 'vue';
|
||||
const app = getApp()
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance() // 全局对象
|
||||
/* 一系列窗口对象 */
|
||||
const pMycoin = ref() // 我的硬币
|
||||
const pRank = ref() // 排行榜
|
||||
const pLearning = ref() // 新手教程
|
||||
const pShare = ref() // 邀请好友
|
||||
const pShequ = ref() // 社区
|
||||
const pSetsystem = ref() // 系统设置
|
||||
const pContactus = ref() // 联系我们
|
||||
const pUseredit = ref()
|
||||
|
||||
const userinfo = ref(app.globalData.userinfo)
|
||||
const avatar = ref(app.globalData.userinfo.avatar)
|
||||
// #ifdef MP-WEIXIN
|
||||
const avatarHandler = (e) => {
|
||||
console.log(e);
|
||||
uni.uploadFile({
|
||||
url: app.globalData.requestUrl + '/api/file/upload',
|
||||
filePath: e.detail.avatarUrl,
|
||||
name: 'file',
|
||||
success(res) {
|
||||
let data = JSON.parse(res.data)
|
||||
if (data.code !== 200) {
|
||||
uni.showToast({
|
||||
title: '上传失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user/save/avatar',
|
||||
data: {
|
||||
avatar: data.data[0]
|
||||
},
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '头像修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
app.globalData.userinfo.avatar = data.data[0];
|
||||
avatar.value = data.data[0];
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '上传失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
console.log('上传完成', res);
|
||||
},
|
||||
fail(err) {
|
||||
console.log('err', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
const closeEdit = (e) => {
|
||||
if (!e) return
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
app.globalData.userinfo = res.data.data
|
||||
userinfo.value = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取用户信息失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const logout = () => {
|
||||
// #ifdef H5
|
||||
if (proxy.$wx && app.isWechat()) return
|
||||
uni.showModal({
|
||||
title: '确认退出登录吗？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('jinxiangguo_login_token') // 移除token，刷新页面
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
const openPopupUseredit = () => {
|
||||
app.playAudio()
|
||||
pUseredit.value.open()
|
||||
}
|
||||
// 打开我的硬币弹窗
|
||||
const openPopupMycoin = () => {
|
||||
app.playAudio()
|
||||
pMycoin.value.open()
|
||||
}
|
||||
// 打开排行榜弹窗
|
||||
const openPopupRank = () => {
|
||||
app.playAudio()
|
||||
pRank.value.open()
|
||||
}
|
||||
// 打开新手教程弹窗
|
||||
const openPopupLearning = () => {
|
||||
app.playAudio()
|
||||
pLearning.value.open()
|
||||
}
|
||||
// 打开邀请好友弹窗
|
||||
const openPopupShare = () => {
|
||||
app.playAudio()
|
||||
pShare.value.open()
|
||||
}
|
||||
// 打开社区号弹窗
|
||||
const openPopupShequ = () => {
|
||||
app.playAudio()
|
||||
pShequ.value.open()
|
||||
}
|
||||
// 打开系统设置弹窗
|
||||
const openPopupSetSystem = () => {
|
||||
app.playAudio()
|
||||
pSetsystem.value.open()
|
||||
}
|
||||
// 打开联系我们弹窗
|
||||
const openPopupContactus = () => {
|
||||
app.playAudio()
|
||||
pContactus.value.open()
|
||||
}
|
||||
|
||||
const goGame = () => {
|
||||
app.playAudio()
|
||||
uni.navigateBack()
|
||||
}
|
||||
const getUser = () => {
|
||||
uni.showLoading()
|
||||
uni.request({
|
||||
url: app.globalData.requestUrl + '/api/user',
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + app.globalData.token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
app.globalData.userinfo = res.data.data
|
||||
userinfo.value = res.data.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取用户信息失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// #ifdef H5
|
||||
if (!app.globalData.token) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (JSON.stringify(app.globalData.userinfo) !== '{}') return
|
||||
getUser()
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
// await app.globalData.loginPromise // 等待登录完毕
|
||||
if (app.globalData.unionid) {
|
||||
if (JSON.stringify(app.globalData.userinfo) !== '{}') return
|
||||
getUser()
|
||||
} else {
|
||||
app.callback = res => {
|
||||
if (JSON.stringify(app.globalData.userinfo) !== '{}') return
|
||||
getUser()
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contact-kefu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.contact-kefu::after {
|
||||
border: none;
|
||||
}
|
||||
.avatar-btn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
.balance {
|
||||
padding: 10px;
|
||||
}
|
||||
.price-bck image {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.logo-bck {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background: #C4FF46;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.price-bck {
|
||||
height: 26px;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-family: Noto Sans S Chinese;
|
||||
}
|
||||
.back-btn {
|
||||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||||
border-radius: 25px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.back-login {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item-shequ image:first-child {
|
||||
width: 24px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-shequ image:last-child {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-shequ image {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.item-shequ {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.item-right image {
|
||||
width: 10px !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.item-center {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.list-item view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-item image {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
border-radius: 15px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.pd-25 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-menu image {
|
||||
width: 18px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content-menu view text {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.content-menu view {
|
||||
height: 78px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
border-radius: 15px;
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content-menu view:first-child {
|
||||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||||
|
||||
}
|
||||
|
||||
.content-menu view:last-child {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-menu {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.userid {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nickname image {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-family: Noto Sans S Chinese;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 42px;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
background: linear-gradient(182.09deg, #FFFDD8 -0.23%, #FFFFFF 91.61%);
|
||||
height: calc(100vh - 235px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.circle-left {
|
||||
width: calc(100% / 2 - 43px);
|
||||
background: #FFFDD8;
|
||||
height: calc(100% + 2px);
|
||||
top: -1px;
|
||||
border-radius: 15px 22px 0 0;
|
||||
position: absolute;
|
||||
}
|
||||
.circle-center {
|
||||
width: 92px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
left: calc(50% - 46px);
|
||||
background: radial-gradient(circle at 50% -22px, transparent, transparent 56px, #FFFDD8 56px);
|
||||
}
|
||||
.center-circle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 35px;
|
||||
}
|
||||
.circle-right {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
height: calc(100% + 2px);
|
||||
top: -1px;
|
||||
width: calc(100% / 2 - 43px);
|
||||
border-radius: 22px 15px 0 0;
|
||||
background: #FFFDD8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.avatar image {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50px;
|
||||
border: 3px solid #000;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3px solid transparent;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 200px;
|
||||
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/star1.png') no-repeat top 60px left calc(50% + 80px),
|
||||
url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/star2.png') no-repeat top 107px left 83px;
|
||||
background-size: 40px auto,
|
||||
20px auto;
|
||||
}
|
||||
|
||||
.back image {
|
||||
width: 12px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
left: 0;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
top: 34px;
|
||||
/* #endif */
|
||||
padding: 20px 10px 10px 20px;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
height: calc(100vh);
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #FBC379 0%, #FFF500 40.82%) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
## 2.0.0（2023-12-14）
|
||||
- 新增 支持 uni-app-x
|
||||
## 1.1.2（2023-04-11）
|
||||
- 修复 更改 modelValue 报错的 bug
|
||||
- 修复 v-for 未使用 key 值控制台 warning
|
||||
## 1.1.1（2023-02-21）
|
||||
- 修复代码合并时引发 value 属性为空时不渲染数据的问题
|
||||
## 1.1.0（2023-02-15）
|
||||
- 修复 localdata 不支持动态更新的bug
|
||||
## 1.0.9（2023-02-15）
|
||||
- 修复 localdata 不支持动态更新的bug
|
||||
## 1.0.8（2022-09-16）
|
||||
- 可以使用 uni-scss 控制主题色
|
||||
## 1.0.7（2022-07-06）
|
||||
- 优化 pc端图标位置不正确的问题
|
||||
## 1.0.6（2022-07-05）
|
||||
- 优化 显示样式
|
||||
## 1.0.5（2022-07-04）
|
||||
- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
|
||||
## 1.0.4（2022-04-19）
|
||||
- 修复 字节小程序 本地数据无法选择下一级的Bug
|
||||
## 1.0.3（2022-02-25）
|
||||
- 修复 nvue 不支持的 v-show 的 bug
|
||||
## 1.0.2（2022-02-25）
|
||||
- 修复 条件编译 nvue 不支持的 css 样式
|
||||
## 1.0.1（2021-11-23）
|
||||
- 修复 由上个版本引发的map、v-model等属性不生效的bug
|
||||
## 1.0.0（2021-11-19）
|
||||
- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
|
||||
## 0.4.9（2021-10-28）
|
||||
- 修复 VUE2 v-model 概率无效的 bug
|
||||
## 0.4.8（2021-10-27）
|
||||
- 修复 v-model 概率无效的 bug
|
||||
## 0.4.7（2021-10-25）
|
||||
- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
|
||||
- 修复 树型 uniCloud 数据类型为 int 时报错的 bug
|
||||
## 0.4.6（2021-10-19）
|
||||
- 修复 非 VUE3 v-model 为 0 时无法选中的 bug
|
||||
## 0.4.5（2021-09-26）
|
||||
- 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
|
||||
- 修复 readonly 为 true 时报错的 bug
|
||||
## 0.4.4（2021-09-26）
|
||||
- 修复 上一版本造成的 map 属性失效的 bug
|
||||
- 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
|
||||
## 0.4.3（2021-09-24）
|
||||
- 修复 某些情况下级联未触发的 bug
|
||||
## 0.4.2（2021-09-23）
|
||||
- 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
|
||||
- 新增 选项内容过长自动添加省略号
|
||||
## 0.4.1（2021-09-15）
|
||||
- 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
|
||||
## 0.4.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 0.3.5（2021-06-04）
|
||||
- 修复 无法加载云端数据的问题
|
||||
## 0.3.4（2021-05-28）
|
||||
- 修复 v-model 无效问题
|
||||
- 修复 loaddata 为空数据组时加载时间过长问题
|
||||
- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
|
||||
## 0.3.3（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 0.3.2（2021-04-22）
|
||||
- 修复 非树形数据有 where 属性查询报错的问题
|
||||
## 0.3.1（2021-04-15）
|
||||
- 修复 本地数据概率无法回显时问题
|
||||
## 0.3.0（2021-04-07）
|
||||
- 新增 支持云端非树形表结构数据
|
||||
- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
|
||||
## 0.2.0（2021-03-15）
|
||||
- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
|
||||
## 0.1.9（2021-03-09）
|
||||
- 修复 微信小程序某些情况下无法选择的问题
|
||||
## 0.1.8（2021-02-05）
|
||||
- 优化 部分样式在 nvue 上的兼容表现
|
||||
## 0.1.7（2021-02-05）
|
||||
- 调整为 uni_modules 目录规范
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,380 @@
|
|||
<template>
|
||||
<view class="uni-data-tree">
|
||||
<view class="uni-data-tree-input" @click="handleInput">
|
||||
<slot :data="selectedPaths" :error="error">
|
||||
<view class="input-value" :class="{'input-value-border': border}">
|
||||
<text v-if="error!=null" class="error-text">{{error!.errMsg}}</text>
|
||||
<scroll-view v-if="selectedPaths.length" class="selected-path" scroll-x="true">
|
||||
<view class="selected-list">
|
||||
<template v-for="(item, index) in selectedPaths">
|
||||
<text class="text-color">{{item[mappingTextName]}}</text>
|
||||
<text v-if="index<selectedPaths.length-1" class="input-split-line">{{split}}</text>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<text v-else-if="error==null&&!loading" class="placeholder">{{placeholder}}</text>
|
||||
<view v-if="!readonly" class="arrow-area">
|
||||
<view class="input-arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
<view v-if="loading && !isOpened" class="selected-loading">
|
||||
<slot name="picker-loading" :loading="loading"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
|
||||
<view class="uni-data-tree-dialog" v-if="isOpened">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<view class="dialog-caption">
|
||||
<view class="dialog-title-view">
|
||||
<text class="dialog-title">{{popupTitle}}</text>
|
||||
</view>
|
||||
<view class="dialog-close" @click="handleClose">
|
||||
<view class="dialog-close-plus" data-id="close"></view>
|
||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view ref="pickerView" class="uni-data-pickerview">
|
||||
<view v-if="error!=null" class="error">
|
||||
<text class="error-text">{{error!.errMsg}}</text>
|
||||
</view>
|
||||
<scroll-view v-if="!isCloudDataList" :scroll-x="true">
|
||||
<view class="selected-node-list">
|
||||
<template v-for="(item, index) in selectedNodes">
|
||||
<text class="selected-node-item" :class="{'selected-node-item-active':index==selectedIndex}"
|
||||
@click="onTabSelect(index)">
|
||||
{{item[mappingTextName]}}
|
||||
</text>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<list-view class="list-view" :scroll-y="true">
|
||||
<list-item class="list-item" v-for="(item, _) in currentDataList" @click="onNodeClick(item)">
|
||||
<text class="item-text" :class="{'item-text-disabled': item['disable']}">{{item[mappingTextName]}}</text>
|
||||
<text class="check" v-if="item[mappingValueName] == selectedNodes[selectedIndex][mappingValueName]"></text>
|
||||
</list-item>
|
||||
</list-view>
|
||||
<view class="loading-cover" v-if="loading">
|
||||
<slot name="pickerview-loading" :loading="loading"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dataPicker } from "../uni-data-pickerview/uni-data-picker.uts"
|
||||
|
||||
/**
|
||||
* DataPicker 级联选择
|
||||
* @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||
* @property {String} popup-title 弹出窗口标题
|
||||
* @property {Array} localdata 本地数据，参考
|
||||
* @property {Boolean} border = [true|false] 是否有边框
|
||||
* @property {Boolean} readonly = [true|false] 是否仅读
|
||||
* @property {Boolean} preload = [true|false] 是否预加载数据
|
||||
* @value true 开启预加载数据，点击弹出窗口后显示已加载数据
|
||||
* @value false 关闭预加载数据，点击弹出窗口后开始加载数据
|
||||
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||
* @value true 启用分布查询，仅查询当前选中节点
|
||||
* @value false 关闭分布查询，一次查询出所有数据
|
||||
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||
* @property {String|DBCollectionString} collection 表名
|
||||
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||
* @property {String} orderby 排序字段及正序倒叙设置
|
||||
* @property {String|JQLString} where 查询条件
|
||||
* @event {Function} popupshow 弹出的选择窗口打开时触发此事件
|
||||
* @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDataPicker',
|
||||
emits: ['popupopened', 'popupclosed', 'nodeclick', 'change', 'input', 'update:modelValue', 'inputclick'],
|
||||
mixins: [dataPicker],
|
||||
props: {
|
||||
popupTitle: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
heightMobile: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
split: {
|
||||
type: String,
|
||||
default: '/'
|
||||
},
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpened: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShowClearIcon() : boolean {
|
||||
if (this.readonly) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.clearIcon && this.selectedPaths.length > 0) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
},
|
||||
load() {
|
||||
if (this.isLocalData) {
|
||||
this.loadLocalData()
|
||||
} else if (this.isCloudDataList || this.isCloudDataTree) {
|
||||
this.loadCloudDataPath()
|
||||
}
|
||||
},
|
||||
show() {
|
||||
this.isOpened = true
|
||||
this.$emit('popupopened')
|
||||
if (!this.hasCloudTreeData) {
|
||||
this.loadData()
|
||||
}
|
||||
},
|
||||
hide() {
|
||||
this.isOpened = false
|
||||
this.$emit('popupclosed')
|
||||
},
|
||||
handleInput() {
|
||||
if (this.readonly) {
|
||||
this.$emit('inputclick')
|
||||
} else {
|
||||
this.show()
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.hide()
|
||||
},
|
||||
onFinish() {
|
||||
this.selectedPaths = this.getChangeNodes()
|
||||
this.$emit('change', this.selectedPaths)
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("../uni-data-pickerview/uni-data-pickerview.css");
|
||||
|
||||
.uni-data-tree {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-data-tree-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selected-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #DD524D;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 5px 5px;
|
||||
padding-right: 5px;
|
||||
overflow: hidden;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.input-value-border {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.selected-path {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.selected-list {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: grey;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-split-line {
|
||||
opacity: .5;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.arrow-area {
|
||||
position: relative;
|
||||
padding: 0 12px;
|
||||
margin-left: auto;
|
||||
justify-content: center;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.input-arrow {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-left: 2px solid #999;
|
||||
border-bottom: 2px solid #999;
|
||||
}
|
||||
|
||||
.uni-data-tree-cover {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.uni-data-tree-dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
flex-direction: column;
|
||||
z-index: 102;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dialog-caption {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dialog-title-view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
align-self: center;
|
||||
padding: 0 10px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.dialog-close-plus {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #666;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dialog-close-rotate {
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-data-pickerview {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media all and (min-width: 768px) {
|
||||
.uni-data-tree-cover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-data-tree-dialog {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
max-height: 50vh;
|
||||
background-color: #fff;
|
||||
border: 1px solid #EBEEF5;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.dialog-caption {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,551 @@
|
|||
<template>
|
||||
<view class="uni-data-tree">
|
||||
<view class="uni-data-tree-input" @click="handleInput">
|
||||
<slot :options="options" :data="inputSelected" :error="errorMessage">
|
||||
<view class="input-value" :class="{'input-value-border': border}">
|
||||
<text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
|
||||
<view v-else-if="loading && !isOpened" class="selected-area">
|
||||
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
|
||||
</view>
|
||||
<scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
|
||||
<view class="selected-list">
|
||||
<view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
|
||||
<text class="text-color">{{item.text}}</text><text v-if="index<inputSelected.length-1"
|
||||
class="input-split-line">{{split}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<text v-else class="selected-area placeholder">{{placeholder}}</text>
|
||||
<view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear" @click.stop="clear">
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons>
|
||||
</view>
|
||||
<view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly ">
|
||||
<view class="input-arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
|
||||
<view class="uni-data-tree-dialog" v-if="isOpened">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<view class="dialog-caption">
|
||||
<view class="title-area">
|
||||
<text class="dialog-title">{{popupTitle}}</text>
|
||||
</view>
|
||||
<view class="dialog-close" @click="handleClose">
|
||||
<view class="dialog-close-plus" data-id="close"></view>
|
||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||
</view>
|
||||
</view>
|
||||
<data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
|
||||
:preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
|
||||
:step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true" :map="map"
|
||||
:ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick">
|
||||
</data-picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
|
||||
import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
|
||||
|
||||
/**
|
||||
* DataPicker 级联选择
|
||||
* @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||
* @property {String} popup-title 弹出窗口标题
|
||||
* @property {Array} localdata 本地数据，参考
|
||||
* @property {Boolean} border = [true|false] 是否有边框
|
||||
* @property {Boolean} readonly = [true|false] 是否仅读
|
||||
* @property {Boolean} preload = [true|false] 是否预加载数据
|
||||
* @value true 开启预加载数据，点击弹出窗口后显示已加载数据
|
||||
* @value false 关闭预加载数据，点击弹出窗口后开始加载数据
|
||||
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||
* @value true 启用分布查询，仅查询当前选中节点
|
||||
* @value false 关闭分布查询，一次查询出所有数据
|
||||
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||
* @property {String|DBCollectionString} collection 表名
|
||||
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||
* @property {String} orderby 排序字段及正序倒叙设置
|
||||
* @property {String|JQLString} where 查询条件
|
||||
* @event {Function} popupshow 弹出的选择窗口打开时触发此事件
|
||||
* @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDataPicker',
|
||||
emits: ['popupopened', 'popupclosed', 'nodeclick', 'input', 'change', 'update:modelValue','inputclick'],
|
||||
mixins: [dataPicker],
|
||||
components: {
|
||||
DataPickerView
|
||||
},
|
||||
props: {
|
||||
options: {
|
||||
type: [Object, Array],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
popupTitle: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
heightMobile: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
split: {
|
||||
type: String,
|
||||
default: '/'
|
||||
},
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpened: false,
|
||||
inputSelected: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.load();
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
handler() {
|
||||
this.load()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
this._dispatchEvent([]);
|
||||
},
|
||||
onPropsChange() {
|
||||
this._treeData = [];
|
||||
this.selectedIndex = 0;
|
||||
|
||||
this.load();
|
||||
},
|
||||
load() {
|
||||
if (this.readonly) {
|
||||
this._processReadonly(this.localdata, this.dataValue);
|
||||
return;
|
||||
}
|
||||
|
||||
// 回显本地数据
|
||||
if (this.isLocalData) {
|
||||
this.loadData();
|
||||
this.inputSelected = this.selected.slice(0);
|
||||
} else if (this.isCloudDataList || this.isCloudDataTree) { // 回显 Cloud 数据
|
||||
this.loading = true;
|
||||
this.getCloudDataValue().then((res) => {
|
||||
this.loading = false;
|
||||
this.inputSelected = res;
|
||||
}).catch((err) => {
|
||||
this.loading = false;
|
||||
this.errorMessage = err;
|
||||
})
|
||||
}
|
||||
},
|
||||
show() {
|
||||
this.isOpened = true
|
||||
setTimeout(() => {
|
||||
this.$refs.pickerView.updateData({
|
||||
treeData: this._treeData,
|
||||
selected: this.selected,
|
||||
selectedIndex: this.selectedIndex
|
||||
})
|
||||
}, 200)
|
||||
this.$emit('popupopened')
|
||||
},
|
||||
hide() {
|
||||
this.isOpened = false
|
||||
this.$emit('popupclosed')
|
||||
},
|
||||
handleInput() {
|
||||
if (this.readonly) {
|
||||
this.$emit('inputclick')
|
||||
return
|
||||
}
|
||||
this.show()
|
||||
},
|
||||
handleClose(e) {
|
||||
this.hide()
|
||||
},
|
||||
onnodeclick(e) {
|
||||
this.$emit('nodeclick', e)
|
||||
},
|
||||
ondatachange(e) {
|
||||
this._treeData = this.$refs.pickerView._treeData
|
||||
},
|
||||
onchange(e) {
|
||||
this.hide()
|
||||
this.$nextTick(() => {
|
||||
this.inputSelected = e;
|
||||
})
|
||||
this._dispatchEvent(e)
|
||||
},
|
||||
_processReadonly(dataList, value) {
|
||||
var isTree = dataList.findIndex((item) => {
|
||||
return item.children
|
||||
})
|
||||
if (isTree > -1) {
|
||||
let inputValue
|
||||
if (Array.isArray(value)) {
|
||||
inputValue = value[value.length - 1]
|
||||
if (typeof inputValue === 'object' && inputValue.value) {
|
||||
inputValue = inputValue.value
|
||||
}
|
||||
} else {
|
||||
inputValue = value
|
||||
}
|
||||
this.inputSelected = this._findNodePath(inputValue, this.localdata)
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.hasValue) {
|
||||
this.inputSelected = []
|
||||
return
|
||||
}
|
||||
|
||||
let result = []
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
var val = value[i]
|
||||
var item = dataList.find((v) => {
|
||||
return v.value == val
|
||||
})
|
||||
if (item) {
|
||||
result.push(item)
|
||||
}
|
||||
}
|
||||
if (result.length) {
|
||||
this.inputSelected = result
|
||||
}
|
||||
},
|
||||
_filterForArray(data, valueArray) {
|
||||
var result = []
|
||||
for (let i = 0; i < valueArray.length; i++) {
|
||||
var value = valueArray[i]
|
||||
var found = data.find((item) => {
|
||||
return item.value == value
|
||||
})
|
||||
if (found) {
|
||||
result.push(found)
|
||||
}
|
||||
}
|
||||
return result
|
||||
},
|
||||
_dispatchEvent(selected) {
|
||||
let item = {}
|
||||
if (selected.length) {
|
||||
var value = new Array(selected.length)
|
||||
for (var i = 0; i < selected.length; i++) {
|
||||
value[i] = selected[i].value
|
||||
}
|
||||
item = selected[selected.length - 1]
|
||||
} else {
|
||||
item.value = ''
|
||||
}
|
||||
if (this.formItem) {
|
||||
this.formItem.setValue(item.value)
|
||||
}
|
||||
|
||||
this.$emit('input', item.value)
|
||||
this.$emit('update:modelValue', item.value)
|
||||
this.$emit('change', {
|
||||
detail: {
|
||||
value: selected
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-data-tree {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #DD524D;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
font-size: 14px;
|
||||
/* line-height: 35px; */
|
||||
padding: 0 10px;
|
||||
padding-right: 5px;
|
||||
overflow: hidden;
|
||||
height: 35px;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.input-value-border {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.selected-area {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
/* #ifndef APP-NVUE */
|
||||
margin-right: auto;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 40px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.selected-list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
/* padding: 0 5px; */
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
flex-direction: row;
|
||||
/* padding: 0 1px; */
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: grey;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.input-split-line {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.arrow-area {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin-bottom: 5px;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.input-arrow {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-left: 1px solid #999;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
.uni-data-tree-cover {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.uni-data-tree-dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 20%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
top: 200px;
|
||||
/* #endif */
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
z-index: 102;
|
||||
overflow: hidden;
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.dialog-caption {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
}
|
||||
|
||||
.title-area {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: auto;
|
||||
/* #endif */
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
/* font-weight: bold; */
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.dialog-close-plus {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #666;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dialog-close-rotate {
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media all and (min-width: 768px) {
|
||||
.uni-data-tree-cover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-data-tree-dialog {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
max-height: 50vh;
|
||||
background-color: #fff;
|
||||
border: 1px solid #EBEEF5;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.dialog-caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-clear {
|
||||
/* margin-right: 5px; */
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-popper__arrow,
|
||||
.uni-popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,622 @@
|
|||
export default {
|
||||
props: {
|
||||
localdata: {
|
||||
type: [Array, Object],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
spaceInfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
collection: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
orderby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
where: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
pageData: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
pageCurrent: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
getcount: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
getone: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
gettree: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
manual: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
preload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stepSearh: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
selfField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
parentField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
map: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
text: "text",
|
||||
value: "value"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
errorMessage: '',
|
||||
loadMore: {
|
||||
contentdown: '',
|
||||
contentrefresh: '',
|
||||
contentnomore: ''
|
||||
},
|
||||
dataList: [],
|
||||
selected: [],
|
||||
selectedIndex: 0,
|
||||
page: {
|
||||
current: this.pageCurrent,
|
||||
size: this.pageSize,
|
||||
count: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLocalData() {
|
||||
return !this.collection.length;
|
||||
},
|
||||
isCloudData() {
|
||||
return this.collection.length > 0;
|
||||
},
|
||||
isCloudDataList() {
|
||||
return (this.isCloudData && (!this.parentField && !this.selfField));
|
||||
},
|
||||
isCloudDataTree() {
|
||||
return (this.isCloudData && this.parentField && this.selfField);
|
||||
},
|
||||
dataValue() {
|
||||
let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null ||
|
||||
this.modelValue !== undefined);
|
||||
return isModelValue ? this.modelValue : this.value;
|
||||
},
|
||||
hasValue() {
|
||||
if (typeof this.dataValue === 'number') {
|
||||
return true
|
||||
}
|
||||
return (this.dataValue != null) && (this.dataValue.length > 0)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$watch(() => {
|
||||
var al = [];
|
||||
['pageCurrent',
|
||||
'pageSize',
|
||||
'spaceInfo',
|
||||
'value',
|
||||
'modelValue',
|
||||
'localdata',
|
||||
'collection',
|
||||
'action',
|
||||
'field',
|
||||
'orderby',
|
||||
'where',
|
||||
'getont',
|
||||
'getcount',
|
||||
'gettree'
|
||||
].forEach(key => {
|
||||
al.push(this[key])
|
||||
});
|
||||
return al
|
||||
}, (newValue, oldValue) => {
|
||||
let needReset = false
|
||||
for (let i = 2; i < newValue.length; i++) {
|
||||
if (newValue[i] != oldValue[i]) {
|
||||
needReset = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (newValue[0] != oldValue[0]) {
|
||||
this.page.current = this.pageCurrent
|
||||
}
|
||||
this.page.size = this.pageSize
|
||||
|
||||
this.onPropsChange()
|
||||
})
|
||||
this._treeData = []
|
||||
},
|
||||
methods: {
|
||||
onPropsChange() {
|
||||
this._treeData = [];
|
||||
},
|
||||
|
||||
// 填充 pickview 数据
|
||||
async loadData() {
|
||||
if (this.isLocalData) {
|
||||
this.loadLocalData();
|
||||
} else if (this.isCloudDataList) {
|
||||
this.loadCloudDataList();
|
||||
} else if (this.isCloudDataTree) {
|
||||
this.loadCloudDataTree();
|
||||
}
|
||||
},
|
||||
|
||||
// 加载本地数据
|
||||
async loadLocalData() {
|
||||
this._treeData = [];
|
||||
this._extractTree(this.localdata, this._treeData);
|
||||
|
||||
let inputValue = this.dataValue;
|
||||
if (inputValue === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(inputValue)) {
|
||||
inputValue = inputValue[inputValue.length - 1];
|
||||
if (typeof inputValue === 'object' && inputValue[this.map.value]) {
|
||||
inputValue = inputValue[this.map.value];
|
||||
}
|
||||
}
|
||||
|
||||
this.selected = this._findNodePath(inputValue, this.localdata);
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (单列)
|
||||
async loadCloudDataList() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let response = await this.getCommand();
|
||||
let responseData = response.result.data;
|
||||
|
||||
this._treeData = responseData;
|
||||
|
||||
this._updateBindData();
|
||||
this._updateSelected();
|
||||
|
||||
this.onDataChange();
|
||||
} catch (e) {
|
||||
this.errorMessage = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (树形)
|
||||
async loadCloudDataTree() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataTreeWhere()
|
||||
};
|
||||
if (this.gettree) {
|
||||
commandOptions.startwith = `${this.selfField}=='${this.dataValue}'`;
|
||||
}
|
||||
|
||||
let response = await this.getCommand(commandOptions);
|
||||
let responseData = response.result.data;
|
||||
|
||||
this._treeData = responseData;
|
||||
this._updateBindData();
|
||||
this._updateSelected();
|
||||
|
||||
this.onDataChange();
|
||||
} catch (e) {
|
||||
this.errorMessage = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (节点)
|
||||
async loadCloudDataNode(callback) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataNodeWhere()
|
||||
};
|
||||
|
||||
let response = await this.getCommand(commandOptions);
|
||||
let responseData = response.result.data;
|
||||
|
||||
callback(responseData);
|
||||
} catch (e) {
|
||||
this.errorMessage = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 回显 Cloud 数据
|
||||
getCloudDataValue() {
|
||||
if (this.isCloudDataList) {
|
||||
return this.getCloudDataListValue();
|
||||
}
|
||||
|
||||
if (this.isCloudDataTree) {
|
||||
return this.getCloudDataTreeValue();
|
||||
}
|
||||
},
|
||||
|
||||
// 回显 Cloud 数据 (单列)
|
||||
getCloudDataListValue() {
|
||||
// 根据 field's as value标识匹配 where 条件
|
||||
let where = [];
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField) {
|
||||
where.push(`${whereField} == '${this.dataValue}'`)
|
||||
}
|
||||
|
||||
where = where.join(' || ');
|
||||
|
||||
if (this.where) {
|
||||
where = `(${this.where}) && (${where})`
|
||||
}
|
||||
|
||||
return this.getCommand({
|
||||
field: this._cloudDataPostField(),
|
||||
where
|
||||
}).then((res) => {
|
||||
this.selected = res.result.data;
|
||||
return res.result.data;
|
||||
});
|
||||
},
|
||||
|
||||
// 回显 Cloud 数据 (树形)
|
||||
getCloudDataTreeValue() {
|
||||
return this.getCommand({
|
||||
field: this._cloudDataPostField(),
|
||||
getTreePath: {
|
||||
startWith: `${this.selfField}=='${this.dataValue}'`
|
||||
}
|
||||
}).then((res) => {
|
||||
let treePath = [];
|
||||
this._extractTreePath(res.result.data, treePath);
|
||||
this.selected = treePath;
|
||||
return treePath;
|
||||
});
|
||||
},
|
||||
|
||||
getCommand(options = {}) {
|
||||
/* eslint-disable no-undef */
|
||||
let db = uniCloud.database(this.spaceInfo)
|
||||
|
||||
const action = options.action || this.action
|
||||
if (action) {
|
||||
db = db.action(action)
|
||||
}
|
||||
|
||||
const collection = options.collection || this.collection
|
||||
db = db.collection(collection)
|
||||
|
||||
const where = options.where || this.where
|
||||
if (!(!where || !Object.keys(where).length)) {
|
||||
db = db.where(where)
|
||||
}
|
||||
|
||||
const field = options.field || this.field
|
||||
if (field) {
|
||||
db = db.field(field)
|
||||
}
|
||||
|
||||
const orderby = options.orderby || this.orderby
|
||||
if (orderby) {
|
||||
db = db.orderBy(orderby)
|
||||
}
|
||||
|
||||
const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
|
||||
const size = options.pageSize !== undefined ? options.pageSize : this.page.size
|
||||
const getCount = options.getcount !== undefined ? options.getcount : this.getcount
|
||||
const getTree = options.gettree !== undefined ? options.gettree : this.gettree
|
||||
|
||||
const getOptions = {
|
||||
getCount,
|
||||
getTree
|
||||
}
|
||||
if (options.getTreePath) {
|
||||
getOptions.getTreePath = options.getTreePath
|
||||
}
|
||||
|
||||
db = db.skip(size * (current - 1)).limit(size).get(getOptions)
|
||||
|
||||
return db
|
||||
},
|
||||
|
||||
_cloudDataPostField() {
|
||||
let fields = [this.field];
|
||||
if (this.parentField) {
|
||||
fields.push(`${this.parentField} as parent_value`);
|
||||
}
|
||||
return fields.join(',');
|
||||
},
|
||||
|
||||
_cloudDataTreeWhere() {
|
||||
let result = []
|
||||
let selected = this.selected
|
||||
let parentField = this.parentField
|
||||
if (parentField) {
|
||||
result.push(`${parentField} == null || ${parentField} == ""`)
|
||||
}
|
||||
if (selected.length) {
|
||||
for (var i = 0; i < selected.length - 1; i++) {
|
||||
result.push(`${parentField} == '${selected[i].value}'`)
|
||||
}
|
||||
}
|
||||
|
||||
let where = []
|
||||
if (this.where) {
|
||||
where.push(`(${this.where})`)
|
||||
}
|
||||
|
||||
if (result.length) {
|
||||
where.push(`(${result.join(' || ')})`)
|
||||
}
|
||||
|
||||
return where.join(' && ')
|
||||
},
|
||||
|
||||
_cloudDataNodeWhere() {
|
||||
let where = []
|
||||
let selected = this.selected;
|
||||
if (selected.length) {
|
||||
where.push(`${this.parentField} == '${selected[selected.length - 1].value}'`);
|
||||
}
|
||||
|
||||
where = where.join(' || ');
|
||||
|
||||
if (this.where) {
|
||||
return `(${this.where}) && (${where})`
|
||||
}
|
||||
|
||||
return where
|
||||
},
|
||||
|
||||
_getWhereByForeignKey() {
|
||||
let result = []
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField) {
|
||||
result.push(`${whereField} == '${this.dataValue}'`)
|
||||
}
|
||||
|
||||
if (this.where) {
|
||||
return `(${this.where}) && (${result.join(' || ')})`
|
||||
}
|
||||
|
||||
return result.join(' || ')
|
||||
},
|
||||
|
||||
_getForeignKeyByField() {
|
||||
let fields = this.field.split(',');
|
||||
let whereField = null;
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
const items = fields[i].split('as');
|
||||
if (items.length < 2) {
|
||||
continue;
|
||||
}
|
||||
if (items[1].trim() === 'value') {
|
||||
whereField = items[0].trim();
|
||||
break;
|
||||
}
|
||||
}
|
||||
return whereField;
|
||||
},
|
||||
|
||||
_updateBindData(node) {
|
||||
const {
|
||||
dataList,
|
||||
hasNodes
|
||||
} = this._filterData(this._treeData, this.selected)
|
||||
|
||||
let isleaf = this._stepSearh === false && !hasNodes
|
||||
|
||||
if (node) {
|
||||
node.isleaf = isleaf
|
||||
}
|
||||
|
||||
this.dataList = dataList
|
||||
this.selectedIndex = dataList.length - 1
|
||||
|
||||
if (!isleaf && this.selected.length < dataList.length) {
|
||||
this.selected.push({
|
||||
value: null,
|
||||
text: "请选择"
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
isleaf,
|
||||
hasNodes
|
||||
}
|
||||
},
|
||||
|
||||
_updateSelected() {
|
||||
let dl = this.dataList
|
||||
let sl = this.selected
|
||||
let textField = this.map.text
|
||||
let valueField = this.map.value
|
||||
for (let i = 0; i < sl.length; i++) {
|
||||
let value = sl[i].value
|
||||
let dl2 = dl[i]
|
||||
for (let j = 0; j < dl2.length; j++) {
|
||||
let item2 = dl2[j]
|
||||
if (item2[valueField] === value) {
|
||||
sl[i].text = item2[textField]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_filterData(data, paths) {
|
||||
let dataList = []
|
||||
let hasNodes = true
|
||||
|
||||
dataList.push(data.filter((item) => {
|
||||
return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
|
||||
}))
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
let value = paths[i].value
|
||||
let nodes = data.filter((item) => {
|
||||
return item.parent_value === value
|
||||
})
|
||||
|
||||
if (nodes.length) {
|
||||
dataList.push(nodes)
|
||||
} else {
|
||||
hasNodes = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dataList,
|
||||
hasNodes
|
||||
}
|
||||
},
|
||||
|
||||
_extractTree(nodes, result, parent_value) {
|
||||
let list = result || []
|
||||
let valueField = this.map.value
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
|
||||
let child = {}
|
||||
for (let key in node) {
|
||||
if (key !== 'children') {
|
||||
child[key] = node[key]
|
||||
}
|
||||
}
|
||||
if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
|
||||
child.parent_value = parent_value
|
||||
}
|
||||
result.push(child)
|
||||
|
||||
let children = node.children
|
||||
if (children) {
|
||||
this._extractTree(children, result, node[valueField])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_extractTreePath(nodes, result) {
|
||||
let list = result || []
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
|
||||
let child = {}
|
||||
for (let key in node) {
|
||||
if (key !== 'children') {
|
||||
child[key] = node[key]
|
||||
}
|
||||
}
|
||||
result.push(child)
|
||||
|
||||
let children = node.children
|
||||
if (children) {
|
||||
this._extractTreePath(children, result)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_findNodePath(key, nodes, path = []) {
|
||||
let textField = this.map.text
|
||||
let valueField = this.map.value
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
let children = node.children
|
||||
let text = node[textField]
|
||||
let value = node[valueField]
|
||||
|
||||
path.push({
|
||||
value,
|
||||
text
|
||||
})
|
||||
|
||||
if (value === key) {
|
||||
return path
|
||||
}
|
||||
|
||||
if (children) {
|
||||
const p = this._findNodePath(key, children, path)
|
||||
if (p.length) {
|
||||
return p
|
||||
}
|
||||
}
|
||||
|
||||
path.pop()
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,693 @@
|
|||
export type PaginationType = {
|
||||
current : number,
|
||||
size : number,
|
||||
count : number
|
||||
}
|
||||
|
||||
export type LoadMoreType = {
|
||||
contentdown : string,
|
||||
contentrefresh : string,
|
||||
contentnomore : string
|
||||
}
|
||||
|
||||
export type SelectedItemType = {
|
||||
name : string,
|
||||
value : string,
|
||||
}
|
||||
|
||||
export type GetCommandOptions = {
|
||||
collection ?: UTSJSONObject,
|
||||
field ?: string,
|
||||
orderby ?: string,
|
||||
where ?: any,
|
||||
pageData ?: string,
|
||||
pageCurrent ?: number,
|
||||
pageSize ?: number,
|
||||
getCount ?: boolean,
|
||||
getTree ?: any,
|
||||
getTreePath ?: UTSJSONObject,
|
||||
startwith ?: string,
|
||||
limitlevel ?: number,
|
||||
groupby ?: string,
|
||||
groupField ?: string,
|
||||
distinct ?: boolean,
|
||||
pageIndistinct ?: boolean,
|
||||
foreignKey ?: string,
|
||||
loadtime ?: string,
|
||||
manual ?: boolean
|
||||
}
|
||||
|
||||
const DefaultSelectedNode = {
|
||||
text: '请选择',
|
||||
value: ''
|
||||
}
|
||||
|
||||
export const dataPicker = defineMixin({
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array as PropType<Array<UTSJSONObject>>,
|
||||
default: [] as Array<UTSJSONObject>
|
||||
},
|
||||
collection: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
orderby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
where: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
pageData: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
pageCurrent: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
getcount: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gettree: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
gettreepath: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
startwith: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
limitlevel: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
groupby: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
groupField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
distinct: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pageIndistinct: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
foreignKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
loadtime: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
manual: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
preload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stepSearh: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
selfField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
parentField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
defaultProps: {
|
||||
type: Object as PropType<UTSJSONObject>,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
error: null as UniCloudError | null,
|
||||
treeData: [] as Array<UTSJSONObject>,
|
||||
selectedIndex: 0,
|
||||
selectedNodes: [] as Array<UTSJSONObject>,
|
||||
selectedPages: [] as Array<UTSJSONObject>[],
|
||||
selectedValue: '',
|
||||
selectedPaths: [] as Array<UTSJSONObject>,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
count: 0
|
||||
} as PaginationType
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mappingTextName() : string {
|
||||
// TODO
|
||||
return (this.defaultProps != null) ? this.defaultProps!.getString('text', 'text') : 'text'
|
||||
},
|
||||
mappingValueName() : string {
|
||||
// TODO
|
||||
return (this.defaultProps != null) ? this.defaultProps!.getString('value', 'value') : 'value'
|
||||
},
|
||||
currentDataList() : Array<UTSJSONObject> {
|
||||
if (this.selectedIndex > this.selectedPages.length - 1) {
|
||||
return [] as Array<UTSJSONObject>
|
||||
}
|
||||
return this.selectedPages[this.selectedIndex]
|
||||
},
|
||||
isLocalData() : boolean {
|
||||
return this.localdata.length > 0
|
||||
},
|
||||
isCloudData() : boolean {
|
||||
return this._checkIsNotNull(this.collection)
|
||||
},
|
||||
isCloudDataList() : boolean {
|
||||
return (this.isCloudData && (this.parentField.length == 0 && this.selfField.length == 0))
|
||||
},
|
||||
isCloudDataTree() : boolean {
|
||||
return (this.isCloudData && this.parentField.length > 0 && this.selfField.length > 0)
|
||||
},
|
||||
dataValue() : any {
|
||||
return this.hasModelValue ? this.modelValue : this.value
|
||||
},
|
||||
hasCloudTreeData() : boolean {
|
||||
return this.treeData.length > 0
|
||||
},
|
||||
hasModelValue() : boolean {
|
||||
if (typeof this.modelValue == 'string') {
|
||||
const valueString = this.modelValue as string
|
||||
return (valueString.length > 0)
|
||||
} else if (Array.isArray(this.modelValue)) {
|
||||
const valueArray = this.modelValue as Array<string>
|
||||
return (valueArray.length > 0)
|
||||
}
|
||||
return false
|
||||
},
|
||||
hasCloudDataValue() : boolean {
|
||||
if (typeof this.dataValue == 'string') {
|
||||
const valueString = this.dataValue as string
|
||||
return (valueString.length > 0)
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pagination.current = this.pageCurrent
|
||||
this.pagination.size = this.pageSize
|
||||
|
||||
this.$watch(
|
||||
() : any => [
|
||||
this.pageCurrent,
|
||||
this.pageSize,
|
||||
this.localdata,
|
||||
this.value,
|
||||
this.collection,
|
||||
this.field,
|
||||
this.getcount,
|
||||
this.orderby,
|
||||
this.where,
|
||||
this.groupby,
|
||||
this.groupField,
|
||||
this.distinct
|
||||
],
|
||||
(newValue : Array<any>, oldValue : Array<any>) => {
|
||||
this.pagination.size = this.pageSize
|
||||
if (newValue[0] !== oldValue[0]) {
|
||||
this.pagination.current = this.pageCurrent
|
||||
}
|
||||
|
||||
this.onPropsChange()
|
||||
}
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
onPropsChange() {
|
||||
this.selectedIndex = 0
|
||||
this.treeData.length = 0
|
||||
this.selectedNodes.length = 0
|
||||
this.selectedPages.length = 0
|
||||
this.selectedPaths.length = 0
|
||||
|
||||
// 加载数据
|
||||
this.$nextTick(() => {
|
||||
this.loadData()
|
||||
})
|
||||
},
|
||||
|
||||
onTabSelect(index : number) {
|
||||
this.selectedIndex = index
|
||||
},
|
||||
|
||||
onNodeClick(nodeData : UTSJSONObject) {
|
||||
if (nodeData.getBoolean('disable', false)) {
|
||||
return
|
||||
}
|
||||
|
||||
const isLeaf = this._checkIsLeafNode(nodeData)
|
||||
|
||||
this._trimSelectedNodes(nodeData)
|
||||
|
||||
this.$emit('nodeclick', nodeData)
|
||||
|
||||
if (this.isLocalData) {
|
||||
if (isLeaf || !this._checkHasChildren(nodeData)) {
|
||||
this.onFinish()
|
||||
}
|
||||
} else if (this.isCloudDataList) {
|
||||
this.onFinish()
|
||||
} else if (this.isCloudDataTree) {
|
||||
if (isLeaf) {
|
||||
this.onFinish()
|
||||
} else if (!this._checkHasChildren(nodeData)) {
|
||||
// 尝试请求一次，如果没有返回数据标记为叶子节点
|
||||
this.loadCloudDataNode(nodeData)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getChangeNodes(): Array<UTSJSONObject> {
|
||||
const nodes: Array<UTSJSONObject> = []
|
||||
this.selectedNodes.forEach((node : UTSJSONObject) => {
|
||||
const newNode: UTSJSONObject = {}
|
||||
newNode[this.mappingTextName] = node.getString(this.mappingTextName)
|
||||
newNode[this.mappingValueName] = node.getString(this.mappingValueName)
|
||||
nodes.push(newNode)
|
||||
})
|
||||
return nodes
|
||||
},
|
||||
|
||||
onFinish() { },
|
||||
|
||||
// 加载数据(自动判定环境)
|
||||
loadData() {
|
||||
if (this.isLocalData) {
|
||||
this.loadLocalData()
|
||||
} else if (this.isCloudDataList) {
|
||||
this.loadCloudDataList()
|
||||
} else if (this.isCloudDataTree) {
|
||||
this.loadCloudDataTree()
|
||||
}
|
||||
},
|
||||
|
||||
// 加载本地数据
|
||||
loadLocalData() {
|
||||
this.treeData = this.localdata
|
||||
if (Array.isArray(this.dataValue)) {
|
||||
const value = this.dataValue as Array<UTSJSONObject>
|
||||
this.selectedPaths = value.slice(0)
|
||||
this._pushSelectedTreeNodes(value, this.localdata)
|
||||
} else {
|
||||
this._pushSelectedNodes(this.localdata)
|
||||
}
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (单列)
|
||||
loadCloudDataList() {
|
||||
this._loadCloudData(null, (data : Array<UTSJSONObject>) => {
|
||||
this.treeData = data
|
||||
this._pushSelectedNodes(data)
|
||||
})
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (树形)
|
||||
loadCloudDataTree() {
|
||||
let commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataTreeWhere(),
|
||||
getTree: true
|
||||
} as GetCommandOptions
|
||||
if (this._checkIsNotNull(this.gettree)) {
|
||||
commandOptions.startwith = `${this.selfField}=='${this.dataValue as string}'`
|
||||
}
|
||||
this._loadCloudData(commandOptions, (data : Array<UTSJSONObject>) => {
|
||||
this.treeData = data
|
||||
if (this.selectedPaths.length > 0) {
|
||||
this._pushSelectedTreeNodes(this.selectedPaths, data)
|
||||
} else {
|
||||
this._pushSelectedNodes(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 加载 Cloud 数据 (节点)
|
||||
loadCloudDataNode(nodeData : UTSJSONObject) {
|
||||
const commandOptions = {
|
||||
field: this._cloudDataPostField(),
|
||||
where: this._cloudDataNodeWhere()
|
||||
} as GetCommandOptions
|
||||
this._loadCloudData(commandOptions, (data : Array<UTSJSONObject>) => {
|
||||
nodeData['children'] = data
|
||||
if (data.length == 0) {
|
||||
nodeData['isleaf'] = true
|
||||
this.onFinish()
|
||||
} else {
|
||||
this._pushSelectedNodes(data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 回显 Cloud Tree Path
|
||||
loadCloudDataPath() {
|
||||
if (!this.hasCloudDataValue) {
|
||||
return
|
||||
}
|
||||
|
||||
const command : GetCommandOptions = {}
|
||||
|
||||
// 单列
|
||||
if (this.isCloudDataList) {
|
||||
// 根据 field's as value标识匹配 where 条件
|
||||
let where : Array<string> = [];
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField.length > 0) {
|
||||
where.push(`${whereField} == '${this.dataValue as string}'`)
|
||||
}
|
||||
|
||||
let whereString = where.join(' || ')
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
whereString = `(${this.where}) && (${whereString})`
|
||||
}
|
||||
|
||||
command.field = this._cloudDataPostField()
|
||||
command.where = whereString
|
||||
}
|
||||
|
||||
// 树形
|
||||
if (this.isCloudDataTree) {
|
||||
command.field = this._cloudDataPostField()
|
||||
command.getTreePath = {
|
||||
startWith: `${this.selfField}=='${this.dataValue as string}'`
|
||||
}
|
||||
}
|
||||
|
||||
this._loadCloudData(command, (data : Array<UTSJSONObject>) => {
|
||||
this._extractTreePath(data, this.selectedPaths)
|
||||
})
|
||||
},
|
||||
|
||||
_loadCloudData(options ?: GetCommandOptions, callback ?: ((data : Array<UTSJSONObject>) => void)) {
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
|
||||
this.error = null
|
||||
|
||||
this._getCommand(options).then((response : UniCloudDBGetResult) => {
|
||||
callback?.(response.data)
|
||||
}).catch((err : any | null) => {
|
||||
this.error = err as UniCloudError
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
_cloudDataPostField() : string {
|
||||
let fields = [this.field];
|
||||
if (this.parentField.length > 0) {
|
||||
fields.push(`${this.parentField} as parent_value`)
|
||||
}
|
||||
return fields.join(',')
|
||||
},
|
||||
|
||||
_cloudDataTreeWhere() : string {
|
||||
let result : Array<string> = []
|
||||
let selectedNodes = this.selectedNodes.length > 0 ? this.selectedNodes : this.selectedPaths
|
||||
let parentField = this.parentField
|
||||
if (parentField.length > 0) {
|
||||
result.push(`${parentField} == null || ${parentField} == ""`)
|
||||
}
|
||||
if (selectedNodes.length > 0) {
|
||||
for (var i = 0; i < selectedNodes.length - 1; i++) {
|
||||
const parentFieldValue = selectedNodes[i].getString('value', '')
|
||||
result.push(`${parentField} == '${parentFieldValue}'`)
|
||||
}
|
||||
}
|
||||
|
||||
let where : Array<string> = []
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
where.push(`(${this.where as string})`)
|
||||
}
|
||||
|
||||
if (result.length > 0) {
|
||||
where.push(`(${result.join(' || ')})`)
|
||||
}
|
||||
|
||||
return where.join(' && ')
|
||||
},
|
||||
|
||||
_cloudDataNodeWhere() : string {
|
||||
const where : Array<string> = []
|
||||
if (this.selectedNodes.length > 0) {
|
||||
const value = this.selectedNodes[this.selectedNodes.length - 1].getString('value', '')
|
||||
where.push(`${this.parentField} == '${value}'`)
|
||||
}
|
||||
|
||||
let whereString = where.join(' || ')
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
return `(${this.where as string}) && (${whereString})`
|
||||
}
|
||||
|
||||
return whereString
|
||||
},
|
||||
|
||||
_getWhereByForeignKey() : string {
|
||||
let result : Array<string> = []
|
||||
let whereField = this._getForeignKeyByField();
|
||||
if (whereField.length > 0) {
|
||||
result.push(`${whereField} == '${this.dataValue as string}'`)
|
||||
}
|
||||
|
||||
if (this._checkIsNotNull(this.where)) {
|
||||
return `(${this.where}) && (${result.join(' || ')})`
|
||||
}
|
||||
|
||||
return result.join(' || ')
|
||||
},
|
||||
|
||||
_getForeignKeyByField() : string {
|
||||
const fields = this.field.split(',')
|
||||
let whereField = ''
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
const items = fields[i].split('as')
|
||||
if (items.length < 2) {
|
||||
continue
|
||||
}
|
||||
if (items[1].trim() === 'value') {
|
||||
whereField = items[0].trim()
|
||||
break
|
||||
}
|
||||
}
|
||||
return whereField
|
||||
},
|
||||
|
||||
_getCommand(options ?: GetCommandOptions) : Promise<UniCloudDBGetResult> {
|
||||
let db = uniCloud.databaseForJQL()
|
||||
|
||||
let collection = Array.isArray(this.collection) ? db.collection(...(this.collection as Array<any>)) : db.collection(this.collection)
|
||||
|
||||
let filter : UniCloudDBFilter | null = null
|
||||
if (this.foreignKey.length > 0) {
|
||||
filter = collection.foreignKey(this.foreignKey)
|
||||
}
|
||||
|
||||
const where : any = options?.where ?? this.where
|
||||
if (typeof where == 'string') {
|
||||
const whereString = where as string
|
||||
if (whereString.length > 0) {
|
||||
filter = (filter != null) ? filter.where(where) : collection.where(where)
|
||||
}
|
||||
} else {
|
||||
filter = (filter != null) ? filter.where(where) : collection.where(where)
|
||||
}
|
||||
|
||||
let query : UniCloudDBQuery | null = null
|
||||
if (this.field.length > 0) {
|
||||
query = (filter != null) ? filter.field(this.field) : collection.field(this.field)
|
||||
}
|
||||
if (this.groupby.length > 0) {
|
||||
if (query != null) {
|
||||
query = query.groupBy(this.groupby)
|
||||
} else if (filter != null) {
|
||||
query = filter.groupBy(this.groupby)
|
||||
}
|
||||
}
|
||||
if (this.groupField.length > 0) {
|
||||
if (query != null) {
|
||||
query = query.groupField(this.groupField)
|
||||
} else if (filter != null) {
|
||||
query = filter.groupField(this.groupField)
|
||||
}
|
||||
}
|
||||
if (this.distinct == true) {
|
||||
if (query != null) {
|
||||
query = query.distinct(this.field)
|
||||
} else if (filter != null) {
|
||||
query = filter.distinct(this.field)
|
||||
}
|
||||
}
|
||||
if (this.orderby.length > 0) {
|
||||
if (query != null) {
|
||||
query = query.orderBy(this.orderby)
|
||||
} else if (filter != null) {
|
||||
query = filter.orderBy(this.orderby)
|
||||
}
|
||||
}
|
||||
|
||||
const size = this.pagination.size
|
||||
const current = this.pagination.current
|
||||
if (query != null) {
|
||||
query = query.skip(size * (current - 1)).limit(size)
|
||||
} else if (filter != null) {
|
||||
query = filter.skip(size * (current - 1)).limit(size)
|
||||
} else {
|
||||
query = collection.skip(size * (current - 1)).limit(size)
|
||||
}
|
||||
|
||||
const getOptions = {}
|
||||
const treeOptions = {
|
||||
limitLevel: this.limitlevel,
|
||||
startWith: this.startwith
|
||||
}
|
||||
if (this.getcount == true) {
|
||||
getOptions['getCount'] = this.getcount
|
||||
}
|
||||
|
||||
const getTree : any = options?.getTree ?? this.gettree
|
||||
if (typeof getTree == 'string') {
|
||||
const getTreeString = getTree as string
|
||||
if (getTreeString.length > 0) {
|
||||
getOptions['getTree'] = treeOptions
|
||||
}
|
||||
} else if (typeof getTree == 'object') {
|
||||
getOptions['getTree'] = treeOptions
|
||||
} else {
|
||||
getOptions['getTree'] = getTree
|
||||
}
|
||||
|
||||
const getTreePath = options?.getTreePath ?? this.gettreepath
|
||||
if (typeof getTreePath == 'string') {
|
||||
const getTreePathString = getTreePath as string
|
||||
if (getTreePathString.length > 0) {
|
||||
getOptions['getTreePath'] = getTreePath
|
||||
}
|
||||
} else {
|
||||
getOptions['getTreePath'] = getTreePath
|
||||
}
|
||||
|
||||
return query.get(getOptions)
|
||||
},
|
||||
|
||||
_checkIsNotNull(value : any) : boolean {
|
||||
if (typeof value == 'string') {
|
||||
const valueString = value as string
|
||||
return (valueString.length > 0)
|
||||
} else if (value instanceof UTSJSONObject) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
_checkIsLeafNode(nodeData : UTSJSONObject) : boolean {
|
||||
if (this.selectedIndex >= this.limitlevel) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (nodeData.getBoolean('isleaf', false)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
_checkHasChildren(nodeData : UTSJSONObject) : boolean {
|
||||
const children = nodeData.getArray('children') ?? ([] as Array<any>)
|
||||
return children.length > 0
|
||||
},
|
||||
|
||||
_pushSelectedNodes(nodes : Array<UTSJSONObject>) {
|
||||
this.selectedNodes.push(DefaultSelectedNode)
|
||||
this.selectedPages.push(nodes)
|
||||
this.selectedIndex = this.selectedPages.length - 1
|
||||
},
|
||||
|
||||
_trimSelectedNodes(nodeData : UTSJSONObject) {
|
||||
this.selectedNodes.splice(this.selectedIndex)
|
||||
this.selectedNodes.push(nodeData)
|
||||
|
||||
if (this.selectedPages.length > 0) {
|
||||
this.selectedPages.splice(this.selectedIndex + 1)
|
||||
}
|
||||
|
||||
const children = nodeData.getArray<UTSJSONObject>('children') ?? ([] as Array<UTSJSONObject>)
|
||||
if (children.length > 0) {
|
||||
this.selectedNodes.push(DefaultSelectedNode)
|
||||
this.selectedPages.push(children)
|
||||
}
|
||||
|
||||
this.selectedIndex = this.selectedPages.length - 1
|
||||
},
|
||||
|
||||
_pushSelectedTreeNodes(paths : Array<UTSJSONObject>, nodes : Array<UTSJSONObject>) {
|
||||
let children : Array<UTSJSONObject> = nodes
|
||||
paths.forEach((node : UTSJSONObject) => {
|
||||
const findNode = children.find((item : UTSJSONObject) : boolean => {
|
||||
return (item.getString(this.mappingValueName) == node.getString(this.mappingValueName))
|
||||
})
|
||||
if (findNode != null) {
|
||||
this.selectedPages.push(children)
|
||||
this.selectedNodes.push(node)
|
||||
children = findNode.getArray<UTSJSONObject>('children') ?? ([] as Array<UTSJSONObject>)
|
||||
}
|
||||
})
|
||||
this.selectedIndex = this.selectedPages.length - 1
|
||||
},
|
||||
|
||||
_extractTreePath(nodes : Array<UTSJSONObject>, result : Array<UTSJSONObject>) {
|
||||
if (nodes.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const node = nodes[0]
|
||||
result.push(node)
|
||||
|
||||
const children = node.getArray<UTSJSONObject>('children')
|
||||
if (Array.isArray(children) && children!.length > 0) {
|
||||
this._extractTreePath(children, result)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
.uni-data-pickerview {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(150, 150, 150, .1);
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #DD524D;
|
||||
}
|
||||
|
||||
.selected-node-list {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.selected-node-item {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 8px 10px 8px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.selected-node-item-active {
|
||||
color: #007aff;
|
||||
border-bottom-color: #007aff;
|
||||
}
|
||||
|
||||
.list-view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-text-disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.item-text-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.check {
|
||||
margin-right: 5px;
|
||||
border: 2px solid #007aff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<view class="uni-data-pickerview">
|
||||
<view v-if="error!=null" class="error">
|
||||
<text class="error-text">{{error!.errMsg}}</text>
|
||||
</view>
|
||||
<scroll-view v-if="!isCloudDataList" :scroll-x="true">
|
||||
<view class="selected-node-list">
|
||||
<template v-for="(item, index) in selectedNodes">
|
||||
<text class="selected-node-item" :class="{'selected-node-item-active':index==selectedIndex}"
|
||||
@click="onTabSelect(index)">
|
||||
{{item[mappingTextName]}}
|
||||
</text>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<list-view class="list-view" :scroll-y="true">
|
||||
<list-item class="list-item" v-for="(item, _) in currentDataList" @click="onNodeClick(item)">
|
||||
<text class="item-text" :class="{'item-text-disabled': item['disable']}">{{item[mappingTextName]}}</text>
|
||||
<text class="check" v-if="item[mappingValueName] == selectedNodes[selectedIndex][mappingValueName]"></text>
|
||||
</list-item>
|
||||
</list-view>
|
||||
<view class="loading-cover" v-if="loading">
|
||||
<slot name="pickerview-loading" :loading="loading"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dataPicker } from "./uni-data-picker.uts"
|
||||
|
||||
/**
|
||||
* DataPickerview
|
||||
* @description uni-data-pickerview
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||
* @property {Array} localdata 本地数据，参考
|
||||
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||
* @value true 启用分布查询，仅查询当前选中节点
|
||||
* @value false 关闭分布查询，一次查询出所有数据
|
||||
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||
* @property {String|DBCollectionString} collection 表名
|
||||
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||
* @property {String} orderby 排序字段及正序倒叙设置
|
||||
* @property {String|JQLString} where 查询条件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDataPickerView',
|
||||
emits: ['nodeclick', 'change', 'update:modelValue'],
|
||||
mixins: [dataPicker],
|
||||
props: {
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
onFinish() {
|
||||
this.$emit('change', this.getChangeNodes())
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("uni-data-pickerview.css");
|
||||
</style>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<template>
|
||||
<view class="uni-data-pickerview">
|
||||
<scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
|
||||
<view class="selected-list">
|
||||
<view
|
||||
class="selected-item"
|
||||
v-for="(item,index) in selected"
|
||||
:key="index"
|
||||
:class="{
|
||||
'selected-item-active':index == selectedIndex
|
||||
}"
|
||||
@click="handleSelect(index)"
|
||||
>
|
||||
<text>{{item.text || ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="tab-c">
|
||||
<scroll-view class="list" :scroll-y="true">
|
||||
<view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList[selectedIndex]" :key="j"
|
||||
@click="handleNodeClick(item, selectedIndex, j)">
|
||||
<text class="item-text">{{item[map.text]}}</text>
|
||||
<view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="loading-cover" v-if="loading">
|
||||
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
|
||||
</view>
|
||||
<view class="error-message" v-if="errorMessage">
|
||||
<text class="error-text">{{errorMessage}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dataPicker from "./uni-data-picker.js"
|
||||
|
||||
/**
|
||||
* DataPickerview
|
||||
* @description uni-data-pickerview
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||
* @property {Array} localdata 本地数据，参考
|
||||
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||
* @value true 启用分布查询，仅查询当前选中节点
|
||||
* @value false 关闭分布查询，一次查询出所有数据
|
||||
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||
* @property {String|DBCollectionString} collection 表名
|
||||
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||
* @property {String} orderby 排序字段及正序倒叙设置
|
||||
* @property {String|JQLString} where 查询条件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniDataPickerView',
|
||||
emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
|
||||
mixins: [dataPicker],
|
||||
props: {
|
||||
managedMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.managedMode) {
|
||||
this.$nextTick(() => {
|
||||
this.loadData();
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPropsChange() {
|
||||
this._treeData = [];
|
||||
this.selectedIndex = 0;
|
||||
this.$nextTick(() => {
|
||||
this.loadData();
|
||||
})
|
||||
},
|
||||
handleSelect(index) {
|
||||
this.selectedIndex = index;
|
||||
},
|
||||
handleNodeClick(item, i, j) {
|
||||
if (item.disable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const node = this.dataList[i][j];
|
||||
const text = node[this.map.text];
|
||||
const value = node[this.map.value];
|
||||
|
||||
if (i < this.selected.length - 1) {
|
||||
this.selected.splice(i, this.selected.length - i)
|
||||
this.selected.push({
|
||||
text,
|
||||
value
|
||||
})
|
||||
} else if (i === this.selected.length - 1) {
|
||||
this.selected.splice(i, 1, {
|
||||
text,
|
||||
value
|
||||
})
|
||||
}
|
||||
|
||||
if (node.isleaf) {
|
||||
this.onSelectedChange(node, node.isleaf)
|
||||
return
|
||||
}
|
||||
|
||||
const {
|
||||
isleaf,
|
||||
hasNodes
|
||||
} = this._updateBindData()
|
||||
|
||||
// 本地数据
|
||||
if (this.isLocalData) {
|
||||
this.onSelectedChange(node, (!hasNodes || isleaf))
|
||||
} else if (this.isCloudDataList) { // Cloud 数据 (单列)
|
||||
this.onSelectedChange(node, true)
|
||||
} else if (this.isCloudDataTree) { // Cloud 数据 (树形)
|
||||
if (isleaf) {
|
||||
this.onSelectedChange(node, node.isleaf)
|
||||
} else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
|
||||
this.loadCloudDataNode((data) => {
|
||||
if (!data.length) {
|
||||
node.isleaf = true
|
||||
} else {
|
||||
this._treeData.push(...data)
|
||||
this._updateBindData(node)
|
||||
}
|
||||
this.onSelectedChange(node, node.isleaf)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
updateData(data) {
|
||||
this._treeData = data.treeData
|
||||
this.selected = data.selected
|
||||
if (!this._treeData.length) {
|
||||
this.loadData()
|
||||
} else {
|
||||
//this.selected = data.selected
|
||||
this._updateBindData()
|
||||
}
|
||||
},
|
||||
onDataChange() {
|
||||
this.$emit('datachange');
|
||||
},
|
||||
onSelectedChange(node, isleaf) {
|
||||
if (isleaf) {
|
||||
this._dispatchEvent()
|
||||
}
|
||||
|
||||
if (node) {
|
||||
this.$emit('nodeclick', node)
|
||||
}
|
||||
},
|
||||
_dispatchEvent() {
|
||||
this.$emit('change', this.selected.slice(0))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-data-pickerview {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #DD524D;
|
||||
}
|
||||
|
||||
.loading-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
opacity: .9;
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.selected-area {
|
||||
width: 750rpx;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.selected-list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 0 5px;
|
||||
border-bottom: 1px solid #f8f8f8;
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.selected-item-text-overflow {
|
||||
width: 168px;
|
||||
/* fix nvue */
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 6em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.selected-item-active {
|
||||
border-bottom: 2px solid $uni-primary;
|
||||
}
|
||||
|
||||
.selected-item-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.tab-c {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 12px 15px;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
/* flex: 1; */
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-text-overflow {
|
||||
width: 280px;
|
||||
/* fix nvue */
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 20em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.check {
|
||||
margin-right: 5px;
|
||||
border: 2px solid $uni-primary;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
transform-origin: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
transition: all 0.3s;
|
||||
/* #endif */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
{
|
||||
"id": "uni-data-picker",
|
||||
"displayName": "uni-data-picker 数据驱动的picker选择器",
|
||||
"version": "2.0.0",
|
||||
"description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"picker",
|
||||
"级联",
|
||||
"省市区",
|
||||
""
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-load-more",
|
||||
"uni-icons",
|
||||
"uni-scss"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
## DataPicker 级联选择
|
||||
> **组件名：uni-data-picker**
|
||||
> 代码块： `uDataPicker`
|
||||
> 关联组件：`uni-data-pickerview`、`uni-load-more`。
|
||||
|
||||
|
||||
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
|
||||
|
||||
支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
|
||||
|
||||
候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
|
||||
|
||||
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
|
||||
|
||||
`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
|
||||
|
||||
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
|
||||
|
||||
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
## 1.0.8（2024-03-28）
|
||||
- 修复 在vue2下:style动态绑定导致编译失败的bug
|
||||
## 1.0.7（2024-01-20）
|
||||
- 修复 长文本回显超过容器的bug，超过容器部分显示省略号
|
||||
## 1.0.6（2023-04-12）
|
||||
- 修复 微信小程序点击时会改变背景颜色的 bug
|
||||
## 1.0.5（2023-02-03）
|
||||
- 修复 禁用时会显示清空按钮
|
||||
## 1.0.4（2023-02-02）
|
||||
- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
|
||||
- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
|
||||
## 1.0.3（2023-01-16）
|
||||
- 修复 不关联服务空间报错的问题
|
||||
## 1.0.2（2023-01-14）
|
||||
- 新增 属性 `format` 可用于格式化显示选项内容
|
||||
## 1.0.1（2022-12-06）
|
||||
- 修复 当where变化时，数据不会自动更新的问题
|
||||
## 0.1.9（2022-09-05）
|
||||
- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
|
||||
## 0.1.8（2022-08-29）
|
||||
- 修复 点击的位置不准确
|
||||
## 0.1.7（2022-08-12）
|
||||
- 新增 支持 disabled 属性
|
||||
## 0.1.6（2022-07-06）
|
||||
- 修复 pc端宽度异常的bug
|
||||
## 0.1.5
|
||||
- 修复 pc端宽度异常的bug
|
||||
## 0.1.4（2022-07-05）
|
||||
- 优化 显示样式
|
||||
## 0.1.3（2022-06-02）
|
||||
- 修复 localdata 赋值不生效的 bug
|
||||
- 新增 支持 uni.scss 修改颜色
|
||||
- 新增 支持选项禁用（数据选项设置 disabled: true 即禁用）
|
||||
## 0.1.2（2022-05-08）
|
||||
- 修复 当 value 为 0 时选择不生效的 bug
|
||||
## 0.1.1（2022-05-07）
|
||||
- 新增 记住上次的选项（仅 collection 存在时有效）
|
||||
## 0.1.0（2022-04-22）
|
||||
- 初始化
|
||||
|
|
@ -0,0 +1,562 @@
|
|||
<template>
|
||||
<view class="uni-stat__select">
|
||||
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
|
||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||
<view class="uni-select__input-box" @click="toggleSelector">
|
||||
<view v-if="current" class="uni-select__input-text">{{textShow}}</view>
|
||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||
<view v-if="current && clear && !disabled" @click.stop="clearVal">
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
||||
</view>
|
||||
<view v-else>
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
|
||||
<view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
|
||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||
@click="change(item)">
|
||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染的下拉框组件
|
||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||
* @property {String} value 默认值
|
||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||
* @property {Boolean} clear 是否可以清空已选项
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||
* @property {String} label 左侧标题
|
||||
* @property {String} placeholder 输入框的提示文字
|
||||
* @property {Boolean} disabled 是否禁用
|
||||
* @property {String} placement 弹出位置
|
||||
* @value top 顶部弹出
|
||||
* @value bottom 底部弹出（default)
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uni-data-select",
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: '无选项'
|
||||
},
|
||||
clear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defItem: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
||||
format: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
current: '',
|
||||
mixinDatacomResData: [],
|
||||
apps: [],
|
||||
channels: [],
|
||||
cacheKey: "uni-data-select-lastSelectedValue",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.debounceGet = this.debounce(() => {
|
||||
this.query();
|
||||
}, 300);
|
||||
if (this.collection && !this.localdata.length) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typePlaceholder() {
|
||||
const text = {
|
||||
'opendb-stat-app-versions': '版本',
|
||||
'opendb-app-channels': '渠道',
|
||||
'opendb-app-list': '应用'
|
||||
}
|
||||
const common = this.placeholder
|
||||
const placeholder = text[this.collection]
|
||||
return placeholder ?
|
||||
common + placeholder :
|
||||
common
|
||||
},
|
||||
valueCom() {
|
||||
// #ifdef VUE3
|
||||
return this.modelValue;
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
return this.value;
|
||||
// #endif
|
||||
},
|
||||
textShow() {
|
||||
// 长文本显示
|
||||
let text = this.current;
|
||||
if (text.length > 10) {
|
||||
return text.slice(0, 25) + '...';
|
||||
}
|
||||
return text;
|
||||
},
|
||||
getOffsetByPlacement() {
|
||||
switch (this.placement) {
|
||||
case 'top':
|
||||
return "bottom:calc(100% + 12px);";
|
||||
case 'bottom':
|
||||
return "top:calc(100% + 12px);";
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
localdata: {
|
||||
immediate: true,
|
||||
handler(val, old) {
|
||||
if (Array.isArray(val) && old !== val) {
|
||||
this.mixinDatacomResData = val
|
||||
}
|
||||
}
|
||||
},
|
||||
valueCom(val, old) {
|
||||
this.initDefVal()
|
||||
},
|
||||
mixinDatacomResData: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val.length) {
|
||||
this.initDefVal()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
debounce(fn, time = 100) {
|
||||
let timer = null
|
||||
return function(...args) {
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args)
|
||||
}, time)
|
||||
}
|
||||
},
|
||||
// 执行数据库查询
|
||||
query() {
|
||||
this.mixinDatacomEasyGet();
|
||||
},
|
||||
// 监听查询条件变更事件
|
||||
onMixinDatacomPropsChange() {
|
||||
if (this.collection) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
initDefVal() {
|
||||
let defValue = ''
|
||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||
defValue = this.valueCom
|
||||
} else {
|
||||
let strogeValue
|
||||
if (this.collection) {
|
||||
strogeValue = this.getCache()
|
||||
}
|
||||
if (strogeValue || strogeValue === 0) {
|
||||
defValue = strogeValue
|
||||
} else {
|
||||
let defItem = ''
|
||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||
}
|
||||
defValue = defItem
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
this.emit(defValue)
|
||||
}
|
||||
}
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {[String, Number]} value
|
||||
* 判断用户给的 value 是否同时为禁用状态
|
||||
*/
|
||||
isDisabled(value) {
|
||||
let isDisabled = false;
|
||||
|
||||
this.mixinDatacomResData.forEach(item => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable
|
||||
}
|
||||
})
|
||||
|
||||
return isDisabled;
|
||||
},
|
||||
|
||||
clearVal() {
|
||||
this.emit('')
|
||||
if (this.collection) {
|
||||
this.removeCache()
|
||||
}
|
||||
},
|
||||
change(item) {
|
||||
if (!item.disable) {
|
||||
this.showSelector = false
|
||||
this.current = this.formatItemName(item)
|
||||
this.emit(item.value)
|
||||
}
|
||||
},
|
||||
emit(val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:modelValue', val)
|
||||
this.$emit('change', val)
|
||||
if (this.collection) {
|
||||
this.setCache(val);
|
||||
}
|
||||
},
|
||||
toggleSelector() {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.showSelector = !this.showSelector
|
||||
},
|
||||
formatItemName(item) {
|
||||
let {
|
||||
text,
|
||||
value,
|
||||
channel_code
|
||||
} = item
|
||||
channel_code = channel_code ? `(${channel_code})` : ''
|
||||
|
||||
if (this.format) {
|
||||
// 格式化输出
|
||||
let str = "";
|
||||
str = this.format;
|
||||
for (let key in item) {
|
||||
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
|
||||
}
|
||||
return str;
|
||||
} else {
|
||||
return this.collection.indexOf('app-list') > 0 ?
|
||||
`${text}(${value})` :
|
||||
(
|
||||
text ?
|
||||
text :
|
||||
`未命名${channel_code}`
|
||||
)
|
||||
}
|
||||
},
|
||||
// 获取当前加载的数据
|
||||
getLoadData() {
|
||||
return this.mixinDatacomResData;
|
||||
},
|
||||
// 获取当前缓存key
|
||||
getCurrentCacheKey() {
|
||||
return this.collection;
|
||||
},
|
||||
// 获取缓存
|
||||
getCache(name = this.getCurrentCacheKey()) {
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
return cacheData[name];
|
||||
},
|
||||
// 设置缓存
|
||||
setCache(value, name = this.getCurrentCacheKey()) {
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
cacheData[name] = value;
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
// 删除缓存
|
||||
removeCache(name = this.getCurrentCacheKey()) {
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
delete cacheData[name];
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-base-color: #6a6a6a !default;
|
||||
$uni-main-color: #333 !default;
|
||||
$uni-secondary-color: #909399 !default;
|
||||
$uni-border-3: #e5e5e5;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@media screen and (max-width: 500px) {
|
||||
.hide-on-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-stat__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 15px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-stat-box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-stat__actived {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// outline: 1px solid #2979ff;
|
||||
}
|
||||
|
||||
.uni-label-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: $uni-base-color;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-select {
|
||||
font-size: 14px;
|
||||
border: 1px solid $uni-border-3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px $uni-border-3;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 35px;
|
||||
|
||||
&--disabled {
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__label {
|
||||
font-size: 16px;
|
||||
// line-height: 22px;
|
||||
height: 35px;
|
||||
padding-right: 10px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-select__input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.uni-select__input-plac {
|
||||
font-size: 14px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.uni-select__selector {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 3;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.uni-select__selector-scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media (min-width: 768px) {
|
||||
.uni-select__selector-scroll {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.uni-select__selector-empty,
|
||||
.uni-select__selector-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* border-bottom: solid 1px $uni-border-3; */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.uni-select__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.uni-select__selector-empty:last-child,
|
||||
.uni-select__selector-item:last-child {
|
||||
/* #ifndef APP-NVUE */
|
||||
border-bottom: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-select__selector__disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* picker 弹出层通用的指示小三角 */
|
||||
.uni-popper__arrow_bottom,
|
||||
.uni-popper__arrow_bottom::after,
|
||||
.uni-popper__arrow_top,
|
||||
.uni-popper__arrow_top::after,
|
||||
{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow_bottom {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow_bottom::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.uni-popper__arrow_top {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
bottom: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow_top::after {
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -6px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.uni-select__input-text {
|
||||
// width: 280px;
|
||||
width: 100%;
|
||||
color: $uni-main-color;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-select__input-placeholder {
|
||||
color: $uni-base-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uni-select--mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
{
|
||||
"id": "uni-data-select",
|
||||
"displayName": "uni-data-select 下拉框选择器",
|
||||
"version": "1.0.8",
|
||||
"description": "通过数据驱动的下拉框选择器",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"select",
|
||||
"uni-data-select",
|
||||
"下拉框",
|
||||
"下拉选"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.1"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-load-more"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## DataSelect 下拉框选择器
|
||||
> **组件名：uni-data-select**
|
||||
> 代码块： `uDataSelect`
|
||||
|
||||
当选项过多时，使用下拉菜单展示并选择内容
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
## 2.0.9（2024-01-12）
|
||||
fix: 修复图标大小默认值错误的问题
|
||||
## 2.0.8（2023-12-14）
|
||||
- 修复 项目未使用 ts 情况下，打包报错的bug
|
||||
## 2.0.7（2023-12-14）
|
||||
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
|
||||
## 2.0.6（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.5（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.4（2023-12-06）
|
||||
- 优化 uni-app x 下示例项目图标排序
|
||||
## 2.0.3（2023-12-06）
|
||||
- 修复 nvue下引入组件报错的bug
|
||||
## 2.0.2（2023-12-05）
|
||||
-优化 size 属性支持单位
|
||||
## 2.0.1（2023-12-05）
|
||||
- 新增 uni-app x 支持定义图标
|
||||
## 1.3.5（2022-01-24）
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4（2022-01-24）
|
||||
- 优化 size 支持其他单位
|
||||
## 1.3.3（2022-01-17）
|
||||
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
|
||||
## 1.3.2（2021-12-01）
|
||||
- 优化 示例可复制图标名称
|
||||
## 1.3.1（2021-11-23）
|
||||
- 优化 兼容旧组件 type 值
|
||||
## 1.3.0（2021-11-19）
|
||||
- 新增 更多图标
|
||||
- 优化 自定义图标使用方式
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
## 1.1.7（2021-11-08）
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.5（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<text class="uni-icons" :style="styleObj">
|
||||
<slot>{{unicode}}</slot>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData, IconsDataItem } from './uniicons_file'
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icon 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: "uni-icons",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
default: 16
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
unicode() : string {
|
||||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||
if (codes !== null) {
|
||||
return codes.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() : string {
|
||||
const size = this.size
|
||||
if (typeof size == 'string') {
|
||||
const reg = /^[0-9]*$/g
|
||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||
// return '' + this.size
|
||||
}
|
||||
return this.getFontSize(size as number)
|
||||
},
|
||||
styleObj() : UTSJSONObject {
|
||||
if (this.fontFamily !== '') {
|
||||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||
}
|
||||
return { color: this.color, fontSize: this.iconSize }
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
methods: {
|
||||
/**
|
||||
* 字体大小
|
||||
*/
|
||||
getFontSize(size : number) : string {
|
||||
return size + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: UniIconsFontFamily;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-family: UniIconsFontFamily;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||
<slot></slot>
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData } from './uniicons_file_vue.js';
|
||||
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||
}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('" + iconUrl + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icons 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: fontData
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find(v => v.font_class === this.type)
|
||||
if (code) {
|
||||
return code.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() {
|
||||
return getVal(this.size)
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== '') {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,664 @@
|
|||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
|
||||
.uniui-wallet:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
|
||||
.uniui-settings-filled:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
|
||||
.uniui-auth-filled:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.uniui-shop-filled:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
|
||||
.uniui-staff-filled:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.uniui-vip-filled:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.uniui-plus-filled:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.uniui-folder-add-filled:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
|
||||
.uniui-color-filled:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
|
||||
.uniui-tune-filled:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.uniui-calendar-filled:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
|
||||
.uniui-notification-filled:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
|
||||
.uniui-wallet-filled:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.uniui-medal-filled:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.uniui-refreshempty:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.uniui-location-filled:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.uniui-person-filled:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.uniui-personadd-filled:before {
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
||||
.uniui-forward:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.uniui-arrow-right:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-left:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.uniui-eye-filled:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.uniui-eye-slash:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.uniui-eye-slash-filled:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
|
||||
.uniui-info-filled:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.uniui-reload:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
|
||||
.uniui-micoff-filled:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
|
||||
.uniui-map-pin-ellipse:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.uniui-map-pin:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.uniui-location:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
|
||||
.uniui-starhalf:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.uniui-star:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.uniui-star-filled:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
|
||||
.uniui-calendar:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
|
||||
.uniui-fire:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.uniui-medal:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.uniui-font:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.uniui-gift:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.uniui-link:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
|
||||
.uniui-notification:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.uniui-staff:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.uniui-vip:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
|
||||
.uniui-folder-add:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.uniui-tune:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.uniui-auth:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
|
||||
.uniui-person:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.uniui-email-filled:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.uniui-phone-filled:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.uniui-phone:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.uniui-email:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.uniui-personadd:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.uniui-chatboxes-filled:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.uniui-contact:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.uniui-chatbubble-filled:before {
|
||||
content: "\e694";
|
||||
}
|
||||
|
||||
.uniui-contact-filled:before {
|
||||
content: "\e695";
|
||||
}
|
||||
|
||||
.uniui-chatboxes:before {
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.uniui-chatbubble:before {
|
||||
content: "\e697";
|
||||
}
|
||||
|
||||
.uniui-upload-filled:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
|
||||
.uniui-upload:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.uniui-weixin:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.uniui-compose:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.uniui-qq:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.uniui-download-filled:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
.uniui-pyq:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.uniui-sound:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.uniui-trash-filled:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.uniui-sound-filled:before {
|
||||
content: "\e686";
|
||||
}
|
||||
|
||||
.uniui-trash:before {
|
||||
content: "\e687";
|
||||
}
|
||||
|
||||
.uniui-videocam-filled:before {
|
||||
content: "\e689";
|
||||
}
|
||||
|
||||
.uniui-spinner-cycle:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.uniui-weibo:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.uniui-videocam:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.uniui-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.uniui-help:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.uniui-navigate-filled:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.uniui-plusempty:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.uniui-smallcircle:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.uniui-minus-filled:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.uniui-micoff:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.uniui-closeempty:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.uniui-clear:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.uniui-navigate:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.uniui-minus:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.uniui-image:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.uniui-mic:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.uniui-paperplane:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.uniui-close:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.uniui-help-filled:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.uniui-paperplane-filled:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.uniui-plus:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.uniui-mic-filled:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.uniui-image-filled:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.uniui-locked-filled:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.uniui-info:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.uniui-locked:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.uniui-camera-filled:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.uniui-chat-filled:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.uniui-camera:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.uniui-circle:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.uniui-checkmarkempty:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.uniui-chat:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.uniui-circle-filled:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.uniui-flag:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.uniui-flag-filled:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.uniui-gear-filled:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.uniui-home:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.uniui-home-filled:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.uniui-gear:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.uniui-smallcircle-filled:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.uniui-map-filled:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.uniui-map:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.uniui-refresh-filled:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.uniui-refresh:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.uniui-cloud-download-filled:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.uniui-cloud-download:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload-filled:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.uniui-redo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.uniui-images-filled:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.uniui-undo-filled:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.uniui-more:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.uniui-more-filled:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.uniui-undo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.uniui-images:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.uniui-paperclip:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.uniui-settings:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.uniui-search:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.uniui-redo-filled:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.uniui-list:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.uniui-mail-open-filled:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.uniui-hand-down-filled:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.uniui-hand-down:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.uniui-hand-up-filled:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.uniui-hand-up:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.uniui-heart-filled:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.uniui-mail-open:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.uniui-heart:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.uniui-loop:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.uniui-pulldown:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.uniui-scan:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.uniui-bars:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.uniui-checkbox-filled:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.uniui-shop:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.uniui-headphones:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.uniui-cart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,664 @@
|
|||
|
||||
export type IconsData = {
|
||||
id : string
|
||||
name : string
|
||||
font_family : string
|
||||
css_prefix_text : string
|
||||
description : string
|
||||
glyphs : Array<IconsDataItem>
|
||||
}
|
||||
|
||||
export type IconsDataItem = {
|
||||
font_class : string
|
||||
unicode : string
|
||||
}
|
||||
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
] as IconsDataItem[]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
|
|
@ -0,0 +1,649 @@
|
|||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "2.0.9",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"icon",
|
||||
"图标"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.14"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## Icons 图标
|
||||
> **组件名：uni-icons**
|
||||
> 代码块： `uIcons`
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
## 1.3.3（2022-01-20）
|
||||
- 新增 showText属性 ，是否显示文本
|
||||
## 1.3.2（2022-01-19）
|
||||
- 修复 nvue 平台下不显示文本的bug
|
||||
## 1.3.1（2022-01-19）
|
||||
- 修复 微信小程序平台样式选择器报警告的问题
|
||||
## 1.3.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||
## 1.2.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.8（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.7（2021-03-30）
|
||||
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
|
||||
## 1.1.6（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"uni-load-more.contentdown": "Pull up to show more",
|
||||
"uni-load-more.contentrefresh": "loading...",
|
||||
"uni-load-more.contentnomore": "No more data"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"uni-load-more.contentdown": "上拉显示更多",
|
||||
"uni-load-more.contentrefresh": "正在加载...",
|
||||
"uni-load-more.contentnomore": "没有更多数据了"
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"uni-load-more.contentdown": "上拉顯示更多",
|
||||
"uni-load-more.contentrefresh": "正在加載...",
|
||||
"uni-load-more.contentnomore": "沒有更多數據了"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,86 @@
|
|||
{
|
||||
"id": "uni-load-more",
|
||||
"displayName": "uni-load-more 加载更多",
|
||||
"version": "1.3.3",
|
||||
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"加载更多",
|
||||
"load-more"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
|
||||
### LoadMore 加载更多
|
||||
> **组件名：uni-load-more**
|
||||
> 代码块： `uLoadMore`
|
||||
|
||||
|
||||
用于列表中，做滚动加载使用，展示 loading 的各种状态。
|
||||
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
## 1.9.1（2024-04-02）
|
||||
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
|
||||
## 1.9.0（2024-03-28）
|
||||
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
|
||||
## 1.8.9（2024-03-20）
|
||||
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
|
||||
## 1.8.8（2024-02-20）
|
||||
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
|
||||
## 1.8.7（2024-02-02）
|
||||
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
|
||||
## 1.8.6（2024-01-30）
|
||||
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
|
||||
## 1.8.5（2024-01-26）
|
||||
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
|
||||
## 1.8.4（2023-11-15）
|
||||
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
|
||||
## 1.8.3（2023-04-17）
|
||||
- 修复 uni-popup 重复打开时的 bug
|
||||
## 1.8.2（2023-02-02）
|
||||
- uni-popup-dialog 组件新增 inputType 属性
|
||||
## 1.8.1（2022-12-01）
|
||||
- 修复 nvue 下 v-show 报错
|
||||
## 1.8.0（2022-11-29）
|
||||
- 优化 主题样式
|
||||
## 1.7.9（2022-04-02）
|
||||
- 修复 弹出层内部无法滚动的bug
|
||||
## 1.7.8（2022-03-28）
|
||||
- 修复 小程序中高度错误的bug
|
||||
## 1.7.7（2022-03-17）
|
||||
- 修复 快速调用open出现问题的Bug
|
||||
## 1.7.6（2022-02-14）
|
||||
- 修复 safeArea 属性不能设置为false的bug
|
||||
## 1.7.5（2022-01-19）
|
||||
- 修复 isMaskClick 失效的bug
|
||||
## 1.7.4（2022-01-19）
|
||||
- 新增 cancelText \ confirmText 属性 ，可自定义文本
|
||||
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
|
||||
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
|
||||
## 1.7.3（2022-01-13）
|
||||
- 修复 设置 safeArea 属性不生效的bug
|
||||
## 1.7.2（2021-11-26）
|
||||
- 优化 组件示例
|
||||
## 1.7.1（2021-11-26）
|
||||
- 修复 vuedoc 文字错误
|
||||
## 1.7.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
## 1.6.2（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.6.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.6.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.5.0（2021-06-23）
|
||||
- 新增 mask-click 遮罩层点击事件
|
||||
## 1.4.5（2021-06-22）
|
||||
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.4（2021-06-18）
|
||||
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.3（2021-06-08）
|
||||
- 修复 错误的 watch 字段
|
||||
- 修复 safeArea 属性不生效的问题
|
||||
- 修复 点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.2（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.4.1（2021-04-29）
|
||||
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
|
||||
## 1.4.0 （2021-04-29）
|
||||
- 新增 type 属性的 left\right 值，支持左右弹出
|
||||
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
|
||||
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
|
||||
- 新增 safeArea 属性，是否适配底部安全区
|
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||
- 修复 App 端弹出等待的Bug
|
||||
- 优化 提升低配设备性能，优化动画卡顿问题
|
||||
- 优化 更简单的组件自定义方式
|
||||
## 1.2.9（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
## 1.2.8（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
## 1.2.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 PC 端
|
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
|
||||
:placeholder="placeholderText" :focus="focus">
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @showClose {Boolean} 是否显示关闭按钮
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @property {Number} maxlength 输入
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits: ['confirm', 'close', 'update:modelValue', 'input'],
|
||||
props: {
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #ifdef VUE2
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
|
||||
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
if (this.maxlength != -1 && this.mode === 'input') {
|
||||
this.val = val.slice(0, this.maxlength);
|
||||
} else {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
val(val) {
|
||||
// #ifdef VUE2
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', val);
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO 兼容 vue3
|
||||
this.$emit('update:modelValue', val);
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value;
|
||||
// #ifdef VUE3
|
||||
this.val = this.modelValue;
|
||||
// #endif
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input') {
|
||||
this.$emit('confirm', this.val)
|
||||
} else {
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<view class="uni-popup-message">
|
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||
<slot>
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopupMessage',
|
||||
mixins:[popup],
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
maskShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.maskShow = this.maskShow
|
||||
this.popup.messageChild = this
|
||||
},
|
||||
methods: {
|
||||
timerClose(){
|
||||
if(this.duration === 0) return
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>{
|
||||
this.popup.close()
|
||||
},this.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-popup-message__box {
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.fixforpc-width {
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
min-width: 380px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500px;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" key="share" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'ali'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'sina'
|
||||
},
|
||||
// {
|
||||
// text: '百度',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
// name: 'copy'
|
||||
// },
|
||||
// {
|
||||
// text: '其他',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
// name: 'more'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
|
||||
<view @click.stop>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
type CloseCallBack = ()=> void;
|
||||
let closeCallBack:CloseCallBack = () :void => {};
|
||||
export default {
|
||||
emits:["close","clickMask"],
|
||||
data() {
|
||||
return {
|
||||
isShow:false,
|
||||
isOpen:false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 设置show = true 时，如果没有 open 需要设置为 open
|
||||
isShow:{
|
||||
handler(isShow) {
|
||||
// console.log("isShow",isShow)
|
||||
if(isShow && this.isOpen == false){
|
||||
this.isOpen = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
},
|
||||
// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
|
||||
isOpen:{
|
||||
handler(isOpen) {
|
||||
// console.log("isOpen",isOpen)
|
||||
if(isOpen && this.isShow == false){
|
||||
this.isShow = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open(){
|
||||
// ...funs : CloseCallBack[]
|
||||
// if(funs.length > 0){
|
||||
// closeCallBack = funs[0]
|
||||
// }
|
||||
this.isOpen = true;
|
||||
},
|
||||
clickMask(){
|
||||
if(this.maskClick == true){
|
||||
this.$emit('clickMask')
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
close(): void{
|
||||
this.isOpen = false;
|
||||
this.$emit('close')
|
||||
closeCallBack()
|
||||
},
|
||||
hiden(){
|
||||
this.isShow = false
|
||||
},
|
||||
show(){
|
||||
this.isShow = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.popup-root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,503 @@
|
|||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
|
||||
<view @touchstart="touchstart">
|
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
|
||||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
|
||||
:show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [true|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
|
||||
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
|
||||
* @property {String} backgroundColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
|
||||
* @property {Boolean} safeArea 是否适配底部安全区
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
borderRadius:{
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
maskClass: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
backgroundColor: 'transparent',
|
||||
borderRadius: this.borderRadius || "0",
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let res = { backgroundColor: this.bg };
|
||||
if (this.borderRadius || "0") {
|
||||
res = Object.assign(res, { borderRadius: this.borderRadius })
|
||||
}
|
||||
return res;
|
||||
},
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.backgroundColor
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getSystemInfoSync()
|
||||
this.popupWidth = windowWidth
|
||||
this.popupHeight = windowHeight + (windowTop || 0)
|
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
|
||||
if (safeArea && this.safeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.safeAreaInsets = safeAreaInsets.bottom
|
||||
// #endif
|
||||
} else {
|
||||
this.safeAreaInsets = 0
|
||||
}
|
||||
}
|
||||
fixSize()
|
||||
// #ifdef H5
|
||||
// window.addEventListener('resize', fixSize)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// window.removeEventListener('resize', fixSize)
|
||||
// })
|
||||
// #endif
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
activated() {
|
||||
this.setH5Visible(!this.showPopup);
|
||||
},
|
||||
deactivated() {
|
||||
this.setH5Visible(true);
|
||||
},
|
||||
created() {
|
||||
// this.mkclick = this.isMaskClick || this.maskClick
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor
|
||||
},
|
||||
methods: {
|
||||
setH5Visible(visible = true) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
/**
|
||||
* 公用方法，遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
return
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error('缺少类型：', direction)
|
||||
return
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
// this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0"
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + 'px',
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = 'center'
|
||||
//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
|
||||
// #ifdef MP-WEIXIN
|
||||
this.ani = ['fade']
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
// #endif
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius:this.borderRadius || "0"
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
// padding-bottom: constant(safe-area-inset-bottom);
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
"id": "uni-popup",
|
||||
"displayName": "uni-popup 弹出层",
|
||||
"version": "1.9.1",
|
||||
"description": " Popup 组件，提供常用的弹层",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"弹出层",
|
||||
"弹窗",
|
||||
"popup",
|
||||
"弹框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-transition"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
|
||||
## Popup 弹出层
|
||||
> **组件名：uni-popup**
|
||||
> 代码块： `uPopup`
|
||||
> 关联组件：`uni-transition`
|
||||
|
||||
|
||||
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## 1.0.3（2022-01-21）
|
||||
- 优化 组件示例
|
||||
## 1.0.2（2021-11-22）
|
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||
## 1.0.1（2021-11-22）
|
||||
- 修复 vue3中scss语法兼容问题
|
||||
## 1.0.0（2021-11-18）
|
||||
- init
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import './styles/index.scss';
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import './setting/_variables.scss';
|
||||
@import './setting/_border.scss';
|
||||
@import './setting/_color.scss';
|
||||
@import './setting/_space.scss';
|
||||
@import './setting/_radius.scss';
|
||||
@import './setting/_text.scss';
|
||||
@import './setting/_styles.scss';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
|
||||
// @mixin get-styles($k,$c) {
|
||||
// @if $k == size or $k == weight{
|
||||
// font-#{$k}:#{$c}
|
||||
// }@else{
|
||||
// #{$k}:#{$c}
|
||||
// }
|
||||
// }
|
||||
$uni-ui-color:(
|
||||
// 主色
|
||||
primary: $uni-primary,
|
||||
primary-disable: $uni-primary-disable,
|
||||
primary-light: $uni-primary-light,
|
||||
// 辅助色
|
||||
success: $uni-success,
|
||||
success-disable: $uni-success-disable,
|
||||
success-light: $uni-success-light,
|
||||
warning: $uni-warning,
|
||||
warning-disable: $uni-warning-disable,
|
||||
warning-light: $uni-warning-light,
|
||||
error: $uni-error,
|
||||
error-disable: $uni-error-disable,
|
||||
error-light: $uni-error-light,
|
||||
info: $uni-info,
|
||||
info-disable: $uni-info-disable,
|
||||
info-light: $uni-info-light,
|
||||
// 中性色
|
||||
main-color: $uni-main-color,
|
||||
base-color: $uni-base-color,
|
||||
secondary-color: $uni-secondary-color,
|
||||
extra-color: $uni-extra-color,
|
||||
// 背景色
|
||||
bg-color: $uni-bg-color,
|
||||
// 边框颜色
|
||||
border-1: $uni-border-1,
|
||||
border-2: $uni-border-2,
|
||||
border-3: $uni-border-3,
|
||||
border-4: $uni-border-4,
|
||||
// 黑色
|
||||
black:$uni-black,
|
||||
// 白色
|
||||
white:$uni-white,
|
||||
// 透明
|
||||
transparent:$uni-transparent
|
||||
) !default;
|
||||
@each $key, $child in $uni-ui-color {
|
||||
.uni-#{"" + $key} {
|
||||
color: $child;
|
||||
}
|
||||
.uni-#{"" + $key}-bg {
|
||||
background-color: $child;
|
||||
}
|
||||
}
|
||||
.uni-shadow-sm {
|
||||
box-shadow: $uni-shadow-sm;
|
||||
}
|
||||
.uni-shadow-base {
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
.uni-shadow-lg {
|
||||
box-shadow: $uni-shadow-lg;
|
||||
}
|
||||
.uni-mask {
|
||||
background-color:$uni-mask;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@mixin radius($r,$d:null ,$important: false){
|
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||
// Key exists within the $uni-radius variable
|
||||
@if (map-has-key($uni-radius, $r) and $d){
|
||||
@if $d == t {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == r {
|
||||
border-top-right-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == b {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == l {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}@else if $d == tl {
|
||||
border-top-left-radius:$radius-value;
|
||||
}@else if $d == tr {
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == br {
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == bl {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}
|
||||
}@else{
|
||||
border-radius:$radius-value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $key} {
|
||||
@include radius($key)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius {
|
||||
@include radius($key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius-#{$direction} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
@mixin fn($space,$direction,$size,$n) {
|
||||
@if $n {
|
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||
} @else {
|
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||
}
|
||||
}
|
||||
@mixin get-styles($direction,$i,$space,$n){
|
||||
@if $direction == t {
|
||||
@include fn($space, top,$i,$n);
|
||||
}
|
||||
@if $direction == r {
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == b {
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == l {
|
||||
@include fn($space, left,$i,$n);
|
||||
}
|
||||
@if $direction == x {
|
||||
@include fn($space, left,$i,$n);
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == y {
|
||||
@include fn($space, top,$i,$n);
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == a {
|
||||
@if $n {
|
||||
#{$space}:#{$i*$uni-space-root}px;
|
||||
} @else {
|
||||
#{$space}:#{-$i*$uni-space-root}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $orientation in m,p {
|
||||
$space: margin;
|
||||
@if $orientation == m {
|
||||
$space: margin;
|
||||
} @else {
|
||||
$space: padding;
|
||||
}
|
||||
@for $i from 0 through 16 {
|
||||
@each $direction in t, r, b, l, x, y, a {
|
||||
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||
@include get-styles($direction,$i,$space,true);
|
||||
}
|
||||
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||
@include get-styles($direction,$i,$space,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/* #ifndef APP-NVUE */
|
||||
|
||||
$-color-white:#fff;
|
||||
$-color-black:#000;
|
||||
@mixin base-style($color) {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: mix($-color-black, $color, 8%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-black, $color, 10%);
|
||||
border-color: mix($-color-black, $color, 20%);
|
||||
color: $-color-white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@mixin is-color($color) {
|
||||
@include base-style($color);
|
||||
&[loading] {
|
||||
@include base-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&[loading],
|
||||
&:not([hover-class]):active {
|
||||
color: $-color-white;
|
||||
border-color: mix(darken($color,10%), $-color-white);
|
||||
background-color: mix($color, $-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@mixin base-plain-style($color) {
|
||||
color:$color;
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 70%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-white, $color, 80%);
|
||||
color: $color;
|
||||
outline: none;
|
||||
border-color: mix($-color-white, $color, 50%);
|
||||
}
|
||||
}
|
||||
@mixin is-plain($color){
|
||||
&[plain] {
|
||||
@include base-plain-style($color);
|
||||
&[loading] {
|
||||
@include base-plain-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&:active {
|
||||
color: mix($-color-white, $color, 40%);
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-btn {
|
||||
margin: 5px;
|
||||
color: #393939;
|
||||
border:1px solid #ccc;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
background-color: #F9F9F9;
|
||||
// TODO 暂时处理边框隐藏一边的问题
|
||||
overflow: visible;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not([type]),&[type=default] {
|
||||
color: #999;
|
||||
&[loading] {
|
||||
background: none;
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[disabled]{
|
||||
color: mix($-color-white, #999, 60%);
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
color: mix($-color-white, #999, 60%);
|
||||
background-color: mix($-color-white,$-color-black , 98%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: #999;
|
||||
background: none;
|
||||
border-color: $uni-border-1;
|
||||
&:not([hover-class]):active {
|
||||
background: none;
|
||||
color: mix($-color-white, $-color-black, 80%);
|
||||
border-color: mix($-color-white, $-color-black, 90%);
|
||||
outline: none;
|
||||
}
|
||||
&[disabled]{
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
background: none;
|
||||
color: mix($-color-white, #999, 60%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([hover-class]):active {
|
||||
color: mix($-color-white, $-color-black, 50%);
|
||||
}
|
||||
|
||||
&[size=mini] {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.uni-btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.uni-btn-mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.uni-btn-radius {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&[type=primary] {
|
||||
@include is-color($uni-primary);
|
||||
@include is-plain($uni-primary)
|
||||
}
|
||||
&[type=success] {
|
||||
@include is-color($uni-success);
|
||||
@include is-plain($uni-success)
|
||||
}
|
||||
&[type=error] {
|
||||
@include is-color($uni-error);
|
||||
@include is-plain($uni-error)
|
||||
}
|
||||
&[type=warning] {
|
||||
@include is-color($uni-warning);
|
||||
@include is-plain($uni-warning)
|
||||
}
|
||||
&[type=info] {
|
||||
@include is-color($uni-info);
|
||||
@include is-plain($uni-info)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@mixin get-styles($k,$c) {
|
||||
@if $k == size or $k == weight{
|
||||
font-#{$k}:#{$c}
|
||||
}@else{
|
||||
#{$k}:#{$c}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-headings {
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.container .uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
// @use "sass:math";
|
||||
@import '../tools/functions.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2 !default;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px !default;
|
||||
$uni-radius: () !default;
|
||||
// 边框半径断点
|
||||
$uni-radius: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
// TODO 当前版本暂时不支持 sm 属性
|
||||
// 'sm': math.div($uni-radius-root, 2),
|
||||
null: $uni-radius-root,
|
||||
'lg': $uni-radius-root * 2,
|
||||
'xl': $uni-radius-root * 6,
|
||||
'pill': 9999px,
|
||||
'circle': 50%
|
||||
),
|
||||
$uni-radius
|
||||
);
|
||||
// 字体家族
|
||||
$body-font-family: 'Roboto', sans-serif !default;
|
||||
// 文本
|
||||
$heading-font-family: $body-font-family !default;
|
||||
$uni-headings: () !default;
|
||||
$letterSpacing: -0.01562em;
|
||||
$uni-headings: map-deep-merge(
|
||||
(
|
||||
'h1': (
|
||||
size: 32px,
|
||||
weight: 300,
|
||||
line-height: 50px,
|
||||
// letter-spacing:-0.01562em
|
||||
),
|
||||
'h2': (
|
||||
size: 28px,
|
||||
weight: 300,
|
||||
line-height: 40px,
|
||||
// letter-spacing: -0.00833em
|
||||
),
|
||||
'h3': (
|
||||
size: 24px,
|
||||
weight: 400,
|
||||
line-height: 32px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h4': (
|
||||
size: 20px,
|
||||
weight: 400,
|
||||
line-height: 30px,
|
||||
// letter-spacing: 0.00735em
|
||||
),
|
||||
'h5': (
|
||||
size: 16px,
|
||||
weight: 400,
|
||||
line-height: 24px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h6': (
|
||||
size: 14px,
|
||||
weight: 500,
|
||||
line-height: 18px,
|
||||
// letter-spacing: 0.0125em
|
||||
),
|
||||
'subtitle': (
|
||||
size: 12px,
|
||||
weight: 400,
|
||||
line-height: 20px,
|
||||
// letter-spacing: 0.00937em
|
||||
),
|
||||
'body': (
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
line-height: 22px,
|
||||
// letter-spacing: 0.03125em
|
||||
),
|
||||
'caption': (
|
||||
'size': 12px,
|
||||
'weight': 400,
|
||||
'line-height': 20px,
|
||||
// 'letter-spacing': 0.03333em,
|
||||
// 'text-transform': false
|
||||
)
|
||||
),
|
||||
$uni-headings
|
||||
);
|
||||
|
||||
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||
$uni-success-light: lighten($uni-success,25%) !default;
|
||||
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||
$uni-error-light: lighten($uni-error,25%) !default;
|
||||
|
||||
$uni-info: #8f939c !default;
|
||||
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||
$uni-info-light: lighten($uni-info,25%) !default;
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||
$uni-secondary-color: #909399 !default; // 次要文字
|
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0 !default;
|
||||
$uni-border-2: #EDEDED !default;
|
||||
$uni-border-3: #DCDCDC !default;
|
||||
$uni-border-4: #B9B9B9 !default;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000 !default;
|
||||
$uni-white: #ffffff !default;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7 !default;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px !default;
|
||||
$uni-spacing-base: 15px !default;
|
||||
$uni-spacing-lg: 30px !default;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue