78 changed files with 5791 additions and 289 deletions
@ -0,0 +1,44 @@ |
|||
# ---> Vue |
|||
# gitignore template for Vue.js projects |
|||
# |
|||
# Recommended template: Node.gitignore |
|||
|
|||
# TODO: where does this rule come from? |
|||
docs/_book |
|||
|
|||
# TODO: where does this rule come from? |
|||
test/ |
|||
|
|||
# ---> macOS |
|||
# General |
|||
.DS_Store |
|||
.AppleDouble |
|||
.LSOverride |
|||
|
|||
# Icon must end with two \r |
|||
Icon |
|||
|
|||
# Thumbnails |
|||
._* |
|||
|
|||
# Files that might appear in the root of a volume |
|||
.DocumentRevisions-V100 |
|||
.fseventsd |
|||
.Spotlight-V100 |
|||
.TemporaryItems |
|||
.Trashes |
|||
.VolumeIcon.icns |
|||
.com.apple.timemachine.donotpresent |
|||
|
|||
# Directories potentially created on remote AFP share |
|||
.AppleDB |
|||
.AppleDesktop |
|||
Network Trash Folder |
|||
Temporary Items |
|||
.apdisk |
|||
|
|||
node_modules/ |
|||
unpackage |
|||
|
|||
.idea/ |
|||
.hbuilderx/ |
|||
@ -0,0 +1,85 @@ |
|||
let baseUrl = 'http://192.168.66.221:8000' |
|||
|
|||
let API = { |
|||
login(data, success, fail){ |
|||
API.sendRequest('post', data, '/passport/login', success, fail) |
|||
}, |
|||
register(data, success, fail){ |
|||
API.sendRequest('post', data, '/passport/register', success, fail) |
|||
}, |
|||
// 找回密码
|
|||
retrieve(data, success, fail){ |
|||
API.sendRequest('post', data, '/passport/retrieve', success, fail) |
|||
}, |
|||
modifyPassword(data, success, fail){ |
|||
API.sendRequest('post', data, '/user/modifyPassword', success, fail) |
|||
}, |
|||
// 短信验证码
|
|||
sendCode(data, success, fail){ |
|||
API.sendRequest('post', data, '/passport/sendCode', success, fail) |
|||
}, |
|||
// 提现记录
|
|||
getWithdrawal(data, success, fail){ |
|||
API.sendRequest('post', data, '/user/withdrawalRecords', success, fail) |
|||
}, |
|||
getRecharge(data, success, fail){ |
|||
API.sendRequest('post', data, '/user/rechargeRecords', success, fail) |
|||
}, |
|||
// 消费记录
|
|||
getConsumption(data, success, fail){ |
|||
API.sendRequest('post', data, '/user/consumptionRecords', success, fail) |
|||
}, |
|||
// 中奖记录
|
|||
getAwards(data, success, fail){ |
|||
API.sendRequest('post', data, '/user/awardsRecords', success, fail) |
|||
}, |
|||
// 首页专区
|
|||
getZoneList(data, success, fail){ |
|||
API.sendRequest('post', data, '/zone/zoneList', success, fail) |
|||
}, |
|||
// 首页专区-专区列表
|
|||
getGoodsList(data, success, fail){ |
|||
API.sendRequest('post', data, '/zone/zoneGoodsList', success, fail) |
|||
}, |
|||
// 开始刮奖
|
|||
beginLottery(data, success, fail){ |
|||
API.sendRequest('post', data, '/zone/beginLottery', success, fail) |
|||
}, |
|||
// 刮完奖请求
|
|||
endLottery(data, success, fail){ |
|||
API.sendRequest('post', data, '/zone/endLottery', success, fail) |
|||
}, |
|||
// 首页中奖纪录
|
|||
getAwardRecords(data, success, fail){ |
|||
API.sendRequest('post', data, '/index/awardRecords', success, fail) |
|||
}, |
|||
// 首页轮播图
|
|||
getRotationChart(data, success, fail){ |
|||
API.sendRequest('post', data, '/index/rotationChart', success, fail) |
|||
}, |
|||
// 通用api
|
|||
request(url, data, success, fail){ |
|||
API.sendRequest('post', data, url, success, fail) |
|||
}, |
|||
|
|||
sendRequest(method, data, url, success, fail){ |
|||
uni.request({ |
|||
url:baseUrl+url, |
|||
data: data, |
|||
method: method, |
|||
success(res) { |
|||
// console.log(res, '000');
|
|||
// 200=成功， 400 = 失败错误返回、404 token验证失败
|
|||
if(res.data.code==200){ |
|||
success && success(res.data); |
|||
}else{ |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
export default API; |
|||
@ -0,0 +1,56 @@ |
|||
export default { |
|||
changeUser(){ |
|||
uni.setTabBarItem({ |
|||
index:0, |
|||
visible: true |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:1, |
|||
visible: false |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:2, |
|||
visible: false |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:3, |
|||
visible: false |
|||
}) |
|||
}, |
|||
changeAgent(){ |
|||
uni.setTabBarItem({ |
|||
index:1, |
|||
visible: true |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:0, |
|||
visible: false |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:2, |
|||
visible: false |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:3, |
|||
visible: false |
|||
}) |
|||
}, |
|||
changebackground(){ |
|||
uni.setTabBarItem({ |
|||
index:0, |
|||
visible: true |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:2, |
|||
visible: true |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:3, |
|||
visible: true |
|||
}) |
|||
uni.setTabBarItem({ |
|||
index:1, |
|||
visible: false |
|||
}) |
|||
}, |
|||
} |
|||
@ -1,21 +1,52 @@ |
|||
{ |
|||
"name": "qrcodejs2", |
|||
"version": "0.0.2", |
|||
"description": "Javsacript QRCode for all browsers", |
|||
"main": "qrcode.js", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git://github.com/davidshimjs/qrcodejs.git" |
|||
"_args": [ |
|||
[ |
|||
"qrcodejs2@0.0.2", |
|||
"D:\\newProjectAddress\\guaguale_uniapp" |
|||
] |
|||
], |
|||
"_from": "qrcodejs2@0.0.2", |
|||
"_id": "qrcodejs2@0.0.2", |
|||
"_inBundle": false, |
|||
"_integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA==", |
|||
"_location": "/qrcodejs2", |
|||
"_phantomChildren": {}, |
|||
"_requested": { |
|||
"type": "version", |
|||
"registry": true, |
|||
"raw": "qrcodejs2@0.0.2", |
|||
"name": "qrcodejs2", |
|||
"escapedName": "qrcodejs2", |
|||
"rawSpec": "0.0.2", |
|||
"saveSpec": null, |
|||
"fetchSpec": "0.0.2" |
|||
}, |
|||
"_requiredBy": [ |
|||
"/" |
|||
], |
|||
"_resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz", |
|||
"_spec": "0.0.2", |
|||
"_where": "D:\\newProjectAddress\\guaguale_uniapp", |
|||
"author": { |
|||
"name": "davidshimjs", |
|||
"email": "ssm0123@gmail.com" |
|||
}, |
|||
"bugs": { |
|||
"url": "https://github.com/davidshimjs/qrcodejs/issues" |
|||
}, |
|||
"description": "Javsacript QRCode for all browsers", |
|||
"gitHead": "06c7a5e134f116402699f03cda5819e10a0e5787", |
|||
"homepage": "https://github.com/davidshimjs/qrcodejs#readme", |
|||
"keywords": [ |
|||
"qrcode", |
|||
"javascript" |
|||
], |
|||
"author": "davidshimjs <ssm0123@gmail.com>", |
|||
"license": "MIT", |
|||
"gitHead": "06c7a5e134f116402699f03cda5819e10a0e5787", |
|||
"readmeFilename": "README.md", |
|||
"bugs": { |
|||
"url": "https://github.com/davidshimjs/qrcodejs/issues" |
|||
} |
|||
"main": "qrcode.js", |
|||
"name": "qrcodejs2", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git://github.com/davidshimjs/qrcodejs.git" |
|||
}, |
|||
"version": "0.0.2" |
|||
} |
|||
|
|||
@ -1,29 +1,34 @@ |
|||
{ |
|||
"name": "ggjuni", |
|||
"version": "2.1.4", |
|||
"lockfileVersion": 2, |
|||
"lockfileVersion": 1, |
|||
"requires": true, |
|||
"packages": { |
|||
"": { |
|||
"version": "2.1.4", |
|||
"dependencies": { |
|||
"qrcodejs2": "^0.0.2" |
|||
}, |
|||
"engines": { |
|||
"HBuilderX": "^3.2.6" |
|||
"dependencies": { |
|||
"echarts": { |
|||
"version": "5.4.3", |
|||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", |
|||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", |
|||
"requires": { |
|||
"tslib": "2.3.0", |
|||
"zrender": "5.4.4" |
|||
} |
|||
}, |
|||
"node_modules/qrcodejs2": { |
|||
"version": "0.0.2", |
|||
"resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz", |
|||
"integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA==" |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"qrcodejs2": { |
|||
"version": "0.0.2", |
|||
"resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz", |
|||
"integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA==" |
|||
}, |
|||
"tslib": { |
|||
"version": "2.3.0", |
|||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", |
|||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" |
|||
}, |
|||
"zrender": { |
|||
"version": "5.4.4", |
|||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz", |
|||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", |
|||
"requires": { |
|||
"tslib": "2.3.0" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="aboutPage"> |
|||
<uni-list class="center-list" v-for="(listitem,index) in aboutList" :key="index"> |
|||
<uni-list-item v-for="(item,i) in listitem" :title="item.title" link :rightText="item.rightText" :key="i" |
|||
:clickable="true" :to="item.to" @click="aboutListClick(item)" :show-extra-icon="true" |
|||
:extraIcon="{type:item.icon,color:'#999'}"> |
|||
<template v-slot:footer> |
|||
<view class="icon_new" v-if="item.iconN"> |
|||
<image :src="'../../static/user/icon_'+item.iconN+'.png'" mode=""></image> |
|||
</view> |
|||
<view v-if="item.showBadge" class="item-footer"> |
|||
<text class="item-footer-text">{{item.rightText}}</text> |
|||
<view class="item-footer-badge"></view> |
|||
</view> |
|||
</template> |
|||
</uni-list-item> |
|||
</uni-list> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
aboutList: [ |
|||
[ |
|||
{ |
|||
"title": '充值设置', |
|||
"to": '/pages/about/rechargeSet/rechargeSet', |
|||
"icon": "compose", |
|||
"iconN": "coin" |
|||
}, |
|||
{ |
|||
"title": '奖金设置', |
|||
"to": '/pages/about/bonusSet/index', |
|||
"icon": "compose", |
|||
"iconN": "gold" |
|||
}, |
|||
{ |
|||
"title": '客服设置', |
|||
"to": '/pages/about/serviceSet/serviceSet', |
|||
"icon": "compose", |
|||
"iconN": "manager" |
|||
} |
|||
] |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
aboutListClick(item) { |
|||
if (!item.to && item.event) { |
|||
this[item.event](); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
} |
|||
.aboutPage{ |
|||
padding: 10px 0px; |
|||
} |
|||
.icon_new{ |
|||
position: absolute; |
|||
left: 40rpx; |
|||
top: 30rpx; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
background-color: #fff; |
|||
image{ |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
} |
|||
.center-list /deep/ .uni-list-item__container{ |
|||
padding: 16px 50rpx; |
|||
} |
|||
.center-list /deep/ .uni-icon-wrapper{ |
|||
padding: 0px 40rpx 0px 10px; |
|||
font-size: 12px !important; |
|||
} |
|||
.center-list /deep/ .uni-list--border:after{ |
|||
content: none; |
|||
} |
|||
.center-list ::v-deep .uni-list--border-top, |
|||
.center-list ::v-deep .uni-list--border-bottom { |
|||
display: none; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="setPage"> |
|||
<view class="switch_item" v-for="(item, index) in datasList" @click="toSet"> |
|||
<view class="icon_new"><image src="" mode=""></image></view> |
|||
<view style="flex:1;"> |
|||
<view class=""><text>面值：</text>{{amount}}</view> |
|||
<view style="font-size: 12px;"><text>最高中奖金额：</text>20万</view> |
|||
</view> |
|||
<switch checked="true" @change="" color="#00E266" @click.stop="" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
datasList: [1,2,3], |
|||
amount: '', |
|||
} |
|||
}, |
|||
methods: { |
|||
toSet(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/about/bonusSet/bonusSet' |
|||
}) |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
uni.setNavigationBarTitle({ |
|||
title: e.title |
|||
}) |
|||
this.amount = e.title.split('专区')[0]; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
} |
|||
.setPage{ |
|||
padding: 40rpx; |
|||
font-size: 14px; |
|||
color: #444; |
|||
} |
|||
.switch_item{ |
|||
height: 132rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 40rpx; |
|||
line-height: 60rpx; |
|||
|
|||
.icon_new{ |
|||
width: 240rpx; |
|||
height: 132rpx; |
|||
margin-right: 20rpx; |
|||
image{ |
|||
width: 240rpx; |
|||
height: 132rpx; |
|||
border-radius: 5px; |
|||
background-color: #000; |
|||
} |
|||
} |
|||
text{ |
|||
color: #999; |
|||
} |
|||
switch{ |
|||
scale: (0.8); |
|||
transform-origin: 100% 50%;//垂直居中、靠右 |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,219 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="setPage"> |
|||
<view v-for="(item,index) in setList" :key="index" class="set_item"> |
|||
<view class="icon_new"><image src="" mode=""></image></view> |
|||
<view style="flex:1;" class="flex-col"> |
|||
<view class=""><text>中奖金额：</text>{{item.zj}}元</view> |
|||
<view class=""><text>中奖率：</text>{{item.gl}}%</view> |
|||
</view> |
|||
<view style="" class="flex-col"> |
|||
<view class="blue" @click="edit(item,index)">编辑</view> |
|||
<text class="" @click="remove(item,index)">删除</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showEdit" @click.stop=""> |
|||
<view class="edit_area"> |
|||
<view class="title">{{title}}</view> |
|||
<view class="content"> |
|||
<view class="input_box"> |
|||
<view class="">奖金金额:</view> |
|||
<view class="input_box2"> |
|||
<input type="text" placeholder="请输入奖金金额" placeholder-style="color: #999;"> |
|||
<text>元</text> |
|||
</view> |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="">中奖率:</view> |
|||
<view class="input_box2"> |
|||
<input type="text" placeholder="请输入中奖概率" placeholder-style="color: #999;"> |
|||
<text>%</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="cancel">取消</view> |
|||
<view class="confirm" @click="confirm">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
setList: [ |
|||
{zj:'5',gl:'80'}, |
|||
{zj:'0',gl:'80'}, |
|||
{zj:'10',gl:'60'}, |
|||
{zj:'20000',gl:'0.001'} |
|||
|
|||
], |
|||
showEdit: false, |
|||
title: "添加奖金", |
|||
editInfo: { |
|||
|
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
edit(val, i){ |
|||
this.title = "编辑"; |
|||
this.showEdit = true; |
|||
this.editInfo = item; |
|||
}, |
|||
remove(val, i){ |
|||
uni.showModal({ |
|||
title:'温馨提示', |
|||
content:"确定是否该奖金信息", |
|||
success() { |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
cancel(){ |
|||
this.showEdit = false; |
|||
this.editInfo = {}; |
|||
}, |
|||
confirm(){ |
|||
|
|||
} |
|||
}, |
|||
onNavigationBarButtonTap() { |
|||
this.title = "添加奖金"; |
|||
this.showEdit = true; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
} |
|||
.setPage{ |
|||
padding: 0px 40rpx; |
|||
font-size: 14px; |
|||
color: #444; |
|||
} |
|||
.set_item{ |
|||
height: 132rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20px 0px; |
|||
border-bottom: 1px solid #ebebeb; |
|||
|
|||
.icon_new{ |
|||
width: 240rpx; |
|||
height: 132rpx; |
|||
margin-right: 20rpx; |
|||
image{ |
|||
width: 240rpx; |
|||
height: 132rpx; |
|||
border-radius: 5px; |
|||
background-color: #000; |
|||
} |
|||
} |
|||
text{ |
|||
color: #999; |
|||
} |
|||
.flex-col{ |
|||
height: 100%; |
|||
display: flex;flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.blue{ |
|||
color: #00A1ED; |
|||
} |
|||
} |
|||
.edit_mask{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
background-color: rgba(0,0,0,.5); |
|||
z-index: 999; |
|||
} |
|||
.edit_area{ |
|||
width: 670rpx; |
|||
height: 480rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
margin: calc(50vh - 240rpx) auto; |
|||
color: #444; |
|||
|
|||
.title{ |
|||
height: 140rpx; |
|||
text-align: center; |
|||
line-height: 140rpx; |
|||
font-size: 18px; |
|||
} |
|||
.content{ |
|||
height: 248rpx; |
|||
.input_box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0px 40rpx; |
|||
margin-bottom: 40rpx; |
|||
font-size: 16px; |
|||
.input_box2{ |
|||
width: 426rpx; |
|||
height: 80rpx; |
|||
font-size: 14px; |
|||
border: 1px solid #ededed; |
|||
border-radius: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #999; |
|||
|
|||
input{ |
|||
flex: 1; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
text{ |
|||
flex: 0.2; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btngroup{ |
|||
height: 90rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-top: 2rpx solid #f1f1f1; |
|||
.cancel{ |
|||
line-height: 90rpx; |
|||
color: #999; |
|||
border-right: 2rpx solid #f1f1f1; |
|||
} |
|||
.confirm, .cancel{ |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,99 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="setPage"> |
|||
<uni-list class="center-list" v-for="(listitem,index) in bonusList" :key="index"> |
|||
<uni-list-item v-for="(item,i) in listitem" :title="item.title" link :rightText="item.rightText" :key="i" |
|||
:clickable="true" :to="'/pages/about/bonusSet/bonusList?title='+item.title" @click="bonusListClick(item)" :show-extra-icon="true" |
|||
:extraIcon="{type:'compose',color:'#999'}"> |
|||
<template v-slot:footer> |
|||
<view class="icon_new"> |
|||
<image :src="'../../../static/user/icon_coin.png'" mode=""></image> |
|||
</view> |
|||
<view v-if="item.showBadge" class="item-footer"> |
|||
<text class="item-footer-text">{{item.rightText}}</text> |
|||
<view class="item-footer-badge"></view> |
|||
</view> |
|||
</template> |
|||
</uni-list-item> |
|||
</uni-list> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
bonusList: [ |
|||
[ |
|||
{ |
|||
"title": '3元专区' |
|||
}, |
|||
{ |
|||
"title": '5元专区' |
|||
}, |
|||
{ |
|||
"title": '10元专区' |
|||
} |
|||
] |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
bonusListClick(item) { |
|||
if (!item.to && item.event) { |
|||
this[item.event](); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
} |
|||
.setPage{ |
|||
padding: 10px 0px; |
|||
} |
|||
.icon_new{ |
|||
position: absolute; |
|||
left: 40rpx; |
|||
top: 30rpx; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
background-color: #fff; |
|||
image{ |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
} |
|||
.center-list /deep/ .uni-list-item__container{ |
|||
padding: 16px 50rpx; |
|||
} |
|||
.center-list /deep/ .uni-icon-wrapper{ |
|||
padding: 0px 40rpx 0px 10px; |
|||
font-size: 12px !important; |
|||
} |
|||
.center-list /deep/ .uni-list--border:after{ |
|||
content: none; |
|||
} |
|||
.center-list ::v-deep .uni-list--border-top, |
|||
.center-list ::v-deep .uni-list--border-bottom { |
|||
display: none; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="setPage"> |
|||
<view class="switch_item"> |
|||
<view class="icon_new"><image src="../../../static/user/ze-gold-coin-o@2x.png" mode=""></image></view> |
|||
<view style="flex:1;">用户端充值按钮</view> |
|||
<switch checked="true" @change="" color="#00E266" /> |
|||
</view> |
|||
<view class="switch_item"> |
|||
<view class="icon_new"><image src="../../../static/user/ze-gold-coin-o@2x.png" mode=""></image></view> |
|||
<view style="flex:1;">代理端充值按钮</view> |
|||
<switch checked="true" @change="" color="#00E266" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
} |
|||
.setPage{ |
|||
padding: 40rpx; |
|||
font-size: 14px; |
|||
color: #444; |
|||
} |
|||
.switch_item{ |
|||
height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20rpx 0px; |
|||
margin-bottom: 40rpx; |
|||
.icon_new{ |
|||
left: 32rpx; |
|||
top: 22rpx; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
margin-right: 14rpx; |
|||
image{ |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
} |
|||
switch{ |
|||
scale: (0.8); |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="setPage"> |
|||
<view class=""> |
|||
<view v-for="(item,index) in dataList" :key="index" class="set_item"> |
|||
<view class="item_top"> |
|||
<view class="icon_new"></view> |
|||
<view class=""> |
|||
客服名： |
|||
<text>钱多多</text> |
|||
</view> |
|||
<view class=""> |
|||
微信号码： |
|||
<text>18655554444</text> |
|||
</view> |
|||
</view> |
|||
<view class="item_bottom"> |
|||
<view style="color: #E33837;" @click="edit(item,index)">编辑</view> |
|||
<view style="color: #999;" @click="remove(item,index)">删除</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showEdit" @click.stop=""> |
|||
<view class="edit_area"> |
|||
<view class="title">{{title}}</view> |
|||
<view class="content"> |
|||
<view class="input_box"> |
|||
<view class="">客服名称:</view> |
|||
<input type="text" placeholder="请输入客服名称" placeholder-style="color: #999;"> |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="">微信号码:</view> |
|||
<input type="text" placeholder="请输入微信号码" placeholder-style="color: #999;"> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="cancel">取消</view> |
|||
<view class="confirm" @click="confirm">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dataList: [ |
|||
{name:'11'} |
|||
], |
|||
showEdit: false, |
|||
title: "添加客服", |
|||
editInfo: { |
|||
|
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
edit(val, i){ |
|||
this.title = "编辑客服信息"; |
|||
this.showEdit = true; |
|||
this.editInfo = item; |
|||
}, |
|||
remove(val, i){ |
|||
uni.showModal({ |
|||
title:'温馨提示', |
|||
content:"确定是否删除该客服信息", |
|||
success() { |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
cancel(){ |
|||
this.showEdit = false; |
|||
this.editInfo = {}; |
|||
}, |
|||
confirm(){ |
|||
|
|||
} |
|||
}, |
|||
onNavigationBarButtonTap(e){ |
|||
this.title = "添加客服"; |
|||
this.showEdit = true; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
} |
|||
.setPage{ |
|||
padding: 40rpx; |
|||
font-size: 14px; |
|||
} |
|||
.set_item{ |
|||
width: 670rpx; |
|||
height: 150rpx; |
|||
border-radius: 10px; |
|||
font-size: 14px; |
|||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11); |
|||
|
|||
.item_top{ |
|||
height: 50%; |
|||
padding: 0px 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
color: #999; |
|||
|
|||
text{ |
|||
color: #101010; |
|||
} |
|||
} |
|||
.item_bottom{ |
|||
height: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
} |
|||
.icon_new{ |
|||
left: 32rpx; |
|||
top: 22rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background-color: #fff; |
|||
background-image: url("../../../static/user/icon_manager.png"); |
|||
background-size: contain; |
|||
} |
|||
.edit_mask{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
background-color: rgba(0,0,0,.5); |
|||
z-index: 999; |
|||
} |
|||
.edit_area{ |
|||
width: 670rpx; |
|||
height: 480rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
margin: calc(50vh - 240rpx) auto; |
|||
color: #444; |
|||
|
|||
.title{ |
|||
height: 140rpx; |
|||
text-align: center; |
|||
line-height: 140rpx; |
|||
font-size: 18px; |
|||
} |
|||
.content{ |
|||
height: 248rpx; |
|||
.input_box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0px 40rpx; |
|||
margin-bottom: 40rpx; |
|||
font-size: 16px; |
|||
input{ |
|||
width: 426rpx; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border: 1px solid #ededed; |
|||
border-radius: 5px; |
|||
} |
|||
} |
|||
} |
|||
.btngroup{ |
|||
height: 90rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-top: 2rpx solid #f1f1f1; |
|||
.cancel{ |
|||
line-height: 90rpx; |
|||
color: #999; |
|||
border-right: 2rpx solid #f1f1f1; |
|||
} |
|||
.confirm, .cancel{ |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<view style="padding-top: 10px;"> |
|||
<view v-for="(item,index) in goodsList" :key="index" class="dis-flex-between-center goods-item"> |
|||
<view class=""> |
|||
<image :src="item.cover_image" mode=""></image> |
|||
</view> |
|||
<view class="goods-info"> |
|||
<view class="" style="color: #333;font-size: 16px;">{{item.title}}</view> |
|||
<view class="">面值:{{item.price}}元</view> |
|||
<view class="">{{item.important}}</view> |
|||
</view> |
|||
<view class="btn" @click="toUrl(item)">立即刮奖</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import API from '@/common/js/api.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: '', |
|||
type: '20元', |
|||
goodsList: [ |
|||
{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", }, |
|||
{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", }, |
|||
{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", }, |
|||
{cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", } |
|||
], |
|||
} |
|||
}, |
|||
methods: { |
|||
toUrl(item){ |
|||
uni.navigateTo({ |
|||
url:'/pages/scratchCard/scratchCard?id='+item.id+'&type='+this.type |
|||
}) |
|||
}, |
|||
getGoodsList(){ |
|||
API.getGoodsList({zone_id: this.id}, res=>{ |
|||
console.log(res); |
|||
this.goodsList = res.data; |
|||
}) |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
uni.setNavigationBarTitle({ |
|||
title: e.type, |
|||
// +'元专区' |
|||
}) |
|||
this.type = e.type; |
|||
this.id = e.id; |
|||
this.getGoodsList(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dis-flex-between-center{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.goods-item{ |
|||
height: 88px; |
|||
padding: 10px 13px; |
|||
color: #999; |
|||
font-size: 14px; |
|||
|
|||
>view{ |
|||
height: 88px; |
|||
} |
|||
image{ |
|||
width: 138px; |
|||
height: 88px; |
|||
border-radius: 10px; |
|||
} |
|||
.goods-info{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.btn{ |
|||
width: 78px; |
|||
height: 40px; |
|||
background-color: #e33838; |
|||
border-radius: 5px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,558 @@ |
|||
<template> |
|||
<view class="homePage"> |
|||
<view class="nav_area dis-flex-between-center"> |
|||
<view class="left-btn" @click="toUrl('login')" v-html="(!isLogin&&userType=='user')?'请登录':''" |
|||
:class="(!isLogin&&userType=='user')?'haveIcon':''"></view> |
|||
<view class="" style="font-size: 18px;color: #101010;" v-html="userType=='user'?'顶呱刮':'顶呱刮-总平台'"></view> |
|||
<view class="right-btn" @click="changeAudio" v-html="userType=='user'?'音乐':''" |
|||
:class="(userType=='user'&&!isPlay)?'playIcon':(userType=='user'&&isPlay)?'pauseIcon':''"> |
|||
<!-- <audio src="../../static/audio/pd-5b7671cee8051387.mp3" poster="" name="" author="" action="" controls></audio> --> |
|||
</view> |
|||
</view> |
|||
<view class="home_1" v-if="userType=='user'"> |
|||
<view class="banner_area"> |
|||
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"> |
|||
<swiper-item v-for="(item, index) in bannerList" :key="index"> |
|||
<image :src="item.image" mode=""></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
</view> |
|||
<view class="" style="color: #b0b0b0;font-size: 14px;height: 30px;line-height: 14px;"> |
|||
公告：<text style="color: #101010;">关于中奖概率调整问题</text> |
|||
</view> |
|||
<view class="dis-flex goods_area"> |
|||
<view v-for="(item,index) in goodsList" :key="index" class="goods_item"> |
|||
<view class="" @click="toUrl(item)"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list_area"> |
|||
<view class="list_title">中奖记录</view> |
|||
<view class="dis-flex-between-center t-h"> |
|||
<view class="">ID</view> |
|||
<view class="">手机号码</view> |
|||
<view class="">中奖金额</view> |
|||
</view> |
|||
<view v-for="(item,index) in recordsList" :key="index" class="t-d dis-flex-between-center"> |
|||
<view class="">{{item.user_id}}</view> |
|||
<view class="">{{item.phone}}</view> |
|||
<view class="black"><text class="red">{{item.awards_amount}}</text>元</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="home_2" v-if="userType=='background'"> |
|||
<view class=""> |
|||
<view class="title"> |
|||
待办<text style="color: #999;font-size: 12px;">（更新于：2023/08/30 19:00）</text> |
|||
</view> |
|||
<view class="card"> |
|||
<view class="">待下分额度</view> |
|||
<view class="t2">10000.00</view> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="title"> |
|||
用户统计 |
|||
</view> |
|||
<view class="pie_area"> |
|||
<view class="pie_box" id="piechart"> |
|||
|
|||
</view> |
|||
<view class="right"> |
|||
<view class="right1"> |
|||
<view class=""> |
|||
<view class="label" style="font-size: 12px;">代理人数</view> |
|||
<view class="" style="font-weight: bold;padding-left: 20px;">1200</view> |
|||
</view> |
|||
<view class="" style="font-weight: bold;">20%</view> |
|||
</view> |
|||
<view class="right1"> |
|||
<view class=""> |
|||
<view class="label" style="font-size: 12px;">用户人数</view> |
|||
<view class="" style="font-weight: bold;padding-left: 20px;">120000</view> |
|||
</view> |
|||
<view class="" style="font-weight: bold;">80%</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="title"> |
|||
上下分数据 |
|||
</view> |
|||
<view class="chart_tab"> |
|||
<view class="item" @click="changeChartIndex(0)" :class="chartIndex==0?'active':''">上分统计</view> |
|||
<view class="item" @click="changeChartIndex(1)" :class="chartIndex==1?'active':''">下分数据</view> |
|||
</view> |
|||
<view class="chart_area"> |
|||
<view class="chart"> |
|||
<view class="" style="color: #999;font-size: 14px;"> |
|||
{{ chartIndex==0?'上分总数':'下分总数' }}：<text style="color: #101010;">{{ chartIndex==0?'1200':'12000' }}</text> |
|||
</view> |
|||
<view class="" id="mychart" style="width: 670rpx;height: 250px;"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
import API from '@/common/js/api.js' |
|||
// import updateTabBar from '@/common/js/updateTabBar.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
userType: 'background',//user|agent|background |
|||
bannerList: [], |
|||
goodsList: [], |
|||
recordsList: [1,2,3,4,5,6], |
|||
chartIndex: 0, |
|||
myChart: null, |
|||
pieChart: null, |
|||
innerAudioContext: null, |
|||
isPlay: false, |
|||
nomore: false, |
|||
page: 1 |
|||
} |
|||
}, |
|||
computed: { |
|||
isLogin(){ |
|||
return uni.getStorageSync('user_token'); |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getAwardRecords(); |
|||
|
|||
}, |
|||
created() { |
|||
this.userType = uni.getStorageSync('userType'); |
|||
this.getRotationChart(); |
|||
this.getZoneList(); |
|||
|
|||
}, |
|||
mounted() { |
|||
if(this.userType=='user'){ |
|||
this.innerAudioContext = uni.createInnerAudioContext(); |
|||
this.innerAudioContext.autoplay = false; |
|||
this.innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'; |
|||
this.innerAudioContext.onPlay(() => { |
|||
console.log('开始播放'); |
|||
}); |
|||
this.innerAudioContext.onPause(() => { |
|||
console.log('暂停播放'); |
|||
}); |
|||
this.innerAudioContext.onError((res) => { |
|||
console.log(res.errMsg); |
|||
console.log(res.errCode); |
|||
}); |
|||
} |
|||
|
|||
if(this.userType=='background'){ |
|||
this.pieChart = echarts.init(document.getElementById('piechart')); |
|||
this.myChart = echarts.init(document.getElementById('mychart')); |
|||
setTimeout(()=>{ |
|||
this.renderPie(); |
|||
this.renderChart(); |
|||
}, 200) |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
toUrl(item){ |
|||
if(item=='login'){ |
|||
uni.navigateTo({ |
|||
url: '/uni_modules/uni-id-pages/pages/login/login-withpwd' |
|||
}) |
|||
}else if(item=='login'){ |
|||
|
|||
}else if(item=='login'){ |
|||
|
|||
}else{ |
|||
uni.navigateTo({ |
|||
url:'/pages/goodslist/goodslist?type='+item.title+'&id='+item.id |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
changeChartIndex(type){ |
|||
this.chartIndex = type; |
|||
this.myChart.clear(); |
|||
this.renderChart(); |
|||
}, |
|||
renderChart(){ |
|||
let yMax = 450; |
|||
let interval = yMax / 5; |
|||
let option = { |
|||
color: ['#5087EC','#74C0C8'], |
|||
// title: { |
|||
// text: '上分总数：', |
|||
// textStyle: { |
|||
// color: '#999', |
|||
// fontSize: 14, |
|||
// fontWeight: 'normal' |
|||
// } |
|||
// }, |
|||
grid: { |
|||
top: '12%', |
|||
bottom: '12%' |
|||
}, |
|||
tooltip: {}, |
|||
xAxis: { |
|||
data: ['1月', '2月', '3月', '4月', '5月'], |
|||
|
|||
}, |
|||
yAxis: [{ |
|||
min: 0, |
|||
max: yMax, |
|||
interval: interval |
|||
}, |
|||
{ |
|||
min: 0, |
|||
max: yMax, |
|||
interval: interval |
|||
}], |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'bar', |
|||
barMaxWidth: 30, |
|||
data: [155, 250, 360, 100, 180, 204] |
|||
}, |
|||
{ |
|||
name: '', |
|||
type: 'line', |
|||
data: [175, 180, 410, 208, 195, 330], |
|||
yAxisIndex: 1 |
|||
} |
|||
] |
|||
}; |
|||
|
|||
this.myChart.setOption(option); |
|||
}, |
|||
renderPie(){ |
|||
let option = { |
|||
color: ['#678CFD', '#22c18b'], |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: ['68%', '98%'], |
|||
avoidLabelOverlap: false, |
|||
itemStyle: { |
|||
borderRadius: 4, |
|||
borderColor: '#fff', |
|||
borderWidth: 0 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 40, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ value: 1200, name: 'Search Engine' }, |
|||
{ value: 12000, name: 'Direct' } |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
this.pieChart.setOption(option); |
|||
}, |
|||
changeAudio(){ |
|||
if(this.userType!=='user') return; |
|||
if(this.isPlay){ |
|||
this.isPlay = false; |
|||
this.innerAudioContext.pause(); |
|||
}else{ |
|||
this.isPlay = true; |
|||
this.innerAudioContext.play(); |
|||
} |
|||
}, |
|||
|
|||
/*轮播图*/ |
|||
getRotationChart(){ |
|||
API.getRotationChart({ |
|||
page:1, limit: 10 |
|||
}, res=>{ |
|||
this.bannerList = res.data.list; |
|||
}) |
|||
}, |
|||
/*专区*/ |
|||
getZoneList(){ |
|||
API.getZoneList({}, res=>{ |
|||
this.goodsList = res.data; |
|||
}) |
|||
}, |
|||
/*记录*/ |
|||
getAwardRecords(page=1, limit=20){ |
|||
API.getAwardRecords({ |
|||
page:page, limit: limit |
|||
}, res=>{ |
|||
this.recordsList = res.data.list; |
|||
if(res.data.list.length<10){ |
|||
this.nomore = true; |
|||
} |
|||
}) |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
if(!this.nomore){ |
|||
this.page++; |
|||
this.getAwardRecords(this.page, 10); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dis-flex{ |
|||
display: flex; |
|||
} |
|||
.dis-flex-between-center{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.homePage{ |
|||
padding: 90rpx 12.5px 50px; |
|||
} |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
|
|||
.left-btn{ |
|||
flex: 0.3; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
|
|||
&.haveIcon::before{ |
|||
content: ''; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
display: inline-block; |
|||
background-image: url("../../static/home/iconPark-me@2x.png"); |
|||
background-size: contain; |
|||
vertical-align: middle; |
|||
margin-right: 10rpx; |
|||
margin-top: -2px; |
|||
} |
|||
} |
|||
.right-btn{ |
|||
flex: 0.3; |
|||
text-align: right; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
|
|||
&.playIcon::after{ |
|||
content: ''; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
display: inline-block; |
|||
background-image: url("../../static/home/md-volume_off@2x.png"); |
|||
background-size: contain; |
|||
vertical-align: middle; |
|||
margin-left: 10rpx; |
|||
margin-top: -2px; |
|||
} |
|||
&.pauseIcon::after{ |
|||
content: ''; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
display: inline-block; |
|||
background-image: url("../../static/home/md-volume_up@2x.png"); |
|||
background-size: contain; |
|||
vertical-align: middle; |
|||
margin-left: 10rpx; |
|||
margin-top: -2px; |
|||
} |
|||
} |
|||
} |
|||
.home_1{ |
|||
.banner_area{ |
|||
padding: 20px 0px; |
|||
swiper{ |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
} |
|||
image{ |
|||
width: 700rpx; |
|||
height: 300rpx; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
.goods_area{ |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
.goods_item{ |
|||
width: 107px; |
|||
height: 54px; |
|||
border: 1px solid #FAAB0E; |
|||
border-radius: 10px; |
|||
margin-bottom: 20px; |
|||
color: #FAAB0E; |
|||
font-size: 14px; |
|||
line-height: 54px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.list_area{ |
|||
font-size: 14px; |
|||
|
|||
.list_title{ |
|||
font-size: 16px; |
|||
color: #101010; |
|||
font-weight: bold; |
|||
height: 30px; |
|||
} |
|||
.t-h{ |
|||
color: #cecece; |
|||
height: 30px; |
|||
} |
|||
.t-d{ |
|||
color: #999; |
|||
height: 30px; |
|||
} |
|||
.red{ |
|||
color: #e50000; |
|||
} |
|||
.black{ |
|||
color: #101010; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.home_2{ |
|||
padding: 20px 7.5px; |
|||
.title{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 18px; |
|||
color: #101010; |
|||
font-weight: bold; |
|||
} |
|||
.card{ |
|||
width: 670rpx; |
|||
height: 160rpx; |
|||
border-radius: 10px; |
|||
background-image: linear-gradient(to right, #B2E6FF, #57ACFF); |
|||
margin: 10px auto 20px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
box-sizing: border-box; |
|||
padding: 30rpx 20rpx; |
|||
.t2{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
.pie_area{ |
|||
display: flex; |
|||
.pie_box{ |
|||
width: 332rpx;height: 332rpx; |
|||
margin: 0px 20rpx 20rpx -20rpx; |
|||
box-sizing: border-box; |
|||
border: 10px solid #fff; |
|||
} |
|||
.right{ |
|||
padding-top: 40rpx; |
|||
} |
|||
.right1{ |
|||
width: 304rpx; |
|||
height: 86rpx; |
|||
border-radius: 5px; |
|||
background-color: #fafaff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10rpx 20rpx; |
|||
margin-bottom: 20rpx; |
|||
font-size: 14px; |
|||
} |
|||
.label{ |
|||
padding-left: 20px; |
|||
position: relative; |
|||
margin-bottom: 3px; |
|||
} |
|||
.right1:nth-of-type(1) .label::before{ |
|||
content: ''; |
|||
display: inline-block; |
|||
width: 24rpx;height: 24rpx; |
|||
border-radius: 2px; |
|||
background-color: #22c18b; |
|||
position: absolute; |
|||
top: 3px; |
|||
left: 0px; |
|||
} |
|||
.right1:nth-of-type(2) .label::before{ |
|||
content: ''; |
|||
display: inline-block; |
|||
width: 24rpx;height: 24rpx; |
|||
border-radius: 2px; |
|||
background-color: #678CFD; |
|||
position: absolute; |
|||
top: 3px; |
|||
left: 0px; |
|||
} |
|||
} |
|||
|
|||
.chart_tab{ |
|||
width: 380rpx; |
|||
height: 160rpx; |
|||
border-radius: 10px; |
|||
text-align: center; |
|||
background-color: #fafaff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
margin-top: 20rpx; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.item{ |
|||
width: 160rpx; |
|||
height: 120rpx; |
|||
text-align: center; |
|||
line-height: 120rpx; |
|||
color: #101010; |
|||
font-size: 14px; |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
} |
|||
.item.active{ |
|||
color: #678CFD; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.chart_area{ |
|||
|
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,477 @@ |
|||
<template> |
|||
<view class="" style="padding-top: 88rpx;"> |
|||
<view class="nav_area dis-flex-between-center"> |
|||
<view style="flex: 0.3;"></view> |
|||
<view class="" style="font-size: 18px;color: #101010;">代理</view> |
|||
<view style="flex: 0.3;text-align: right;" @click="add">新增代理</view> |
|||
</view> |
|||
<view class="search_area"> |
|||
<view class="search_box"> |
|||
<input type="text" v-model="keyword" placeholder="请输入代理人员id/手机号码" placeholder-style="color: #ededed;"> |
|||
<button @click="search()">搜索</button> |
|||
</view> |
|||
</view> |
|||
<view class="list_area"> |
|||
<view v-for="(item,index) in listsData" :key="index" class="list-item"> |
|||
<view class="edit" @click="edit(item, index)"></view> |
|||
<view class="delete" @click="remove(item, index)">删除</view> |
|||
<view class="info"> |
|||
<image :src="item.avatar" mode=""></image> |
|||
<view class="">ID：{{item.id}}</view> |
|||
</view> |
|||
<view class="amount"> |
|||
<view class="amount2"> |
|||
<view class=""><text>电话：</text>{{item.phone}}</view> |
|||
<view class=""><text>余额：</text>{{item.balance}}</view> |
|||
<view class=""><text>可提余额：</text>{{item.withdrawal_balance}}</view> |
|||
</view> |
|||
<view class="amount1"> |
|||
<view class="red" @click="modifyScore(1, item, index)">上分</view> |
|||
<view class="red" @click="modifyScore(2, item, index)">下分</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" style="height: 0px;padding: 0px;"></view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showEdit" @click.stop=""> |
|||
<view class="edit_area" :class="editType=='add'?'add':'edit'"> |
|||
<view class="title">{{title}}</view> |
|||
<view class="content"> |
|||
<view class="input_box" v-if="editType=='edit'"> |
|||
<view class="">ID:</view> |
|||
<input type="text" disabled v-model="editInfo.id"> |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="">电话:</view> |
|||
<input type="text" placeholder="电话为登陆账号" v-model="editInfo.phone" :disabled="editType=='edit'"> |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="">密码:</view> |
|||
<input password placeholder="请输入新密码" v-model="editInfo.password"> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="cancel">取消</view> |
|||
<view class="confirm" @click="confirm">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showScore" @click.stop=""> |
|||
<view class="score_area"> |
|||
<view class="title">{{scoreTitle}}</view> |
|||
<view class="content"> |
|||
<view class="info_box"> |
|||
<view class="">ID：<text>{{scoreInfo.id}}</text></view> |
|||
</view> |
|||
<view class="info_box"> |
|||
<view class="">电话：<text>{{scoreInfo.phone}}</text></view> |
|||
</view> |
|||
<view class="info_box"> |
|||
<view class="">余额：<text>{{scoreInfo.balance}}</text></view> |
|||
<view class="">可提余额：<text>{{scoreInfo.withdrawal_balance}}</text></view> |
|||
</view> |
|||
<view class="input_box"> |
|||
<input password :placeholder="scoreTip" v-model="limit"> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="showScore=false">取消</view> |
|||
<view class="confirm" @click="submit">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import API from '@/common/js/api.js' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
keyword: '', |
|||
listsData: [ |
|||
{id:111,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'}, |
|||
{id:123,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'}, |
|||
{id:222,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'} |
|||
], |
|||
showEdit: false, |
|||
editType: 'add',//add/edit |
|||
title: "新增代理", |
|||
originInfo: { |
|||
id: '',phone: '',password: '' |
|||
}, |
|||
editInfo: {}, |
|||
showScore: false, |
|||
scoreTitle: '', |
|||
scoreTip: '',//输入框默认显示 |
|||
scoreInfo: {}, |
|||
limit: '',// 上下分额度 |
|||
account: '',//搜索 |
|||
noMore: false, |
|||
page: 1, |
|||
modifyType: 1,//1上2下 |
|||
} |
|||
}, |
|||
methods: { |
|||
getAgentList(){ |
|||
API.request('/adminTeam/agentList', { |
|||
limit: 10,title: this.account,page: this.page |
|||
}, res=>{ |
|||
if(res.data.length<10){ |
|||
this.noMore = true; |
|||
} |
|||
if(this.page>1){ |
|||
this.listsData = this.listsData.concat(res.data.list); |
|||
}else{ |
|||
this.listsData = res.data.list; |
|||
} |
|||
}) |
|||
}, |
|||
// 编辑代理 |
|||
edit(val, i){ |
|||
this.title = "编辑"; |
|||
this.editType = "edit"; |
|||
this.showEdit = true; |
|||
this.editInfo = val; |
|||
}, |
|||
// 删除代理 |
|||
remove(val, i){ |
|||
let _this = this; |
|||
uni.showModal({ |
|||
title:'温馨提示', |
|||
content:"确定是否删除该代理信息", |
|||
success() { |
|||
API.request('/adminAgentTeam/deleteAgent', { |
|||
aid: val.id |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
_this.listsData.splice(i, 1); |
|||
// _this.account = ''; |
|||
// _this.search(); |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
cancel(){ |
|||
this.showEdit = false; |
|||
this.editInfo = this.originInfo; |
|||
}, |
|||
// 提交代理新增编辑 |
|||
confirm(){ |
|||
if(!this.editInfo.password){ |
|||
uni.showToast({ |
|||
title: '请输入新密码', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
if(!this.editInfo.phone){ |
|||
uni.showToast({ |
|||
title: '请输入登陆账号', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
API.request('/adminAgentTeam/editUser', { |
|||
aid: this.editInfo.id, |
|||
password: this.editInfo.password |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
this.account = ''; |
|||
this.search(); |
|||
}) |
|||
}, |
|||
add(){ |
|||
this.title = "新增代理"; |
|||
this.editType = "add"; |
|||
this.showEdit = true; |
|||
}, |
|||
// 打开上分下分弹窗 |
|||
modifyScore(type, val, i){ |
|||
if(type===1){ |
|||
this.scoreTitle = '上分' |
|||
this.scoreTip = '请输入上分额度' |
|||
}else if(type===2){ |
|||
this.scoreTitle = '下分' |
|||
this.scoreTip = '请输入下分额度' |
|||
} |
|||
this.scoreInfo = val; |
|||
this.modifyType = type; |
|||
this.showScore = true; |
|||
}, |
|||
// 提交上分下分 |
|||
submit(){ |
|||
if(!this.limit){ |
|||
uni.showToast({ |
|||
title: this.scoreTip, |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
let url = this.modifyType===1?'/adminTeam/agentUpScores':'/adminTeam/agentDownScores' |
|||
API.request(url, { |
|||
aid: this.scoreInfo.id, |
|||
quota: this.limit |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
this.account = ''; |
|||
this.search(); |
|||
}) |
|||
}, |
|||
search(){ |
|||
this.page = 1; |
|||
this.noMore = false; |
|||
this.getAgentList(); |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getAgentList(); |
|||
}, |
|||
onReachBottom() { |
|||
if(!this.noMore){ |
|||
this.page++; |
|||
this.getAgentList(); |
|||
}else{ |
|||
uni.showToast({ |
|||
title: '没有更多了' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dis-flex-between-center{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
|
|||
} |
|||
.search_area{ |
|||
.search_box{ |
|||
width: 700rpx; |
|||
height: 80rpx; |
|||
border: 1px solid #EDEDED; |
|||
border-radius: 40rpx; |
|||
display: flex; |
|||
margin: 15px auto; |
|||
} |
|||
input{ |
|||
flex: 1; |
|||
height: 80rpx; |
|||
padding: 0px 20px; |
|||
font-size: 14px; |
|||
} |
|||
button{ |
|||
width: 165rpx; |
|||
height: 80rpx; |
|||
background-color: #F05859; |
|||
border-radius: 40rpx; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
|
|||
.list_area{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
padding: 0px 10px; |
|||
|
|||
.list-item{ |
|||
width: 340rpx; |
|||
// height: 172rpx; |
|||
border-radius: 10px; |
|||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11); |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
margin: 0px auto 10px; |
|||
font-size: 14px; |
|||
position: relative; |
|||
|
|||
.edit{ |
|||
position: absolute; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
background-image: url("../../static/backgroundUser/riLine-edit-line@2x.png"); |
|||
background-size: contain; |
|||
top: 108rpx; |
|||
right: 26rpx; |
|||
} |
|||
.delete{ |
|||
position: absolute; |
|||
width: 76rpx; |
|||
height: 48rpx; |
|||
top: 0px; |
|||
right: 0px; |
|||
border-radius: 3px 10px 3px 3px; |
|||
font-size: 12px; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
color: #999; |
|||
background-color: #f1f1f1; |
|||
} |
|||
} |
|||
.info{ |
|||
text-align: center; |
|||
margin-right: 10px; |
|||
} |
|||
.amount{ |
|||
flex: 1; |
|||
margin-top: 10px; |
|||
} |
|||
.amount2{ |
|||
line-height: 50rpx; |
|||
} |
|||
.amount1{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 20px; |
|||
margin: 10px 0px 5px; |
|||
} |
|||
text{ |
|||
color: #999; |
|||
} |
|||
.red{ |
|||
color: #F05859; |
|||
} |
|||
image{ |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.edit_mask{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
background-color: rgba(0,0,0,.5); |
|||
z-index: 999; |
|||
|
|||
.title{ |
|||
height: 140rpx; |
|||
text-align: center; |
|||
line-height: 140rpx; |
|||
font-size: 18px; |
|||
} |
|||
.btngroup{ |
|||
height: 90rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-top: 2rpx solid #f1f1f1; |
|||
.cancel{ |
|||
line-height: 90rpx; |
|||
color: #999; |
|||
border-right: 2rpx solid #f1f1f1; |
|||
} |
|||
.confirm, .cancel{ |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
.edit_area{ |
|||
width: 670rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
color: #444; |
|||
&.add{ |
|||
height: 480rpx; |
|||
margin: calc(50vh - 240rpx) auto; |
|||
.content{ |
|||
height: 248rpx; |
|||
} |
|||
} |
|||
&.edit{ |
|||
height: 626rpx; |
|||
margin: calc(50vh - 313rpx) auto; |
|||
.content{ |
|||
height: 394rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.input_box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0px 40rpx; |
|||
margin-bottom: 40rpx; |
|||
font-size: 16px; |
|||
view{ |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
input{ |
|||
width: 430rpx; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border: 1px solid #ededed; |
|||
border-radius: 5px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.score_area{ |
|||
width: 670rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
color: #444; |
|||
height: 570rpx; |
|||
margin: calc(50vh - 285rpx) auto; |
|||
|
|||
.content{ |
|||
height: 338rpx; |
|||
padding: 0px 55rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.info_box{ |
|||
height: 66rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 16px; |
|||
color: #999; |
|||
margin-bottom: 6rpx; |
|||
|
|||
text{ |
|||
color: #101010; |
|||
} |
|||
} |
|||
.input_box{ |
|||
width: 560rpx; |
|||
height: 80rpx; |
|||
border-radius: 5px; |
|||
border: 1px solid #ededed; |
|||
text-align: center; |
|||
input{ |
|||
height: 80rpx; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,301 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="nav_area"></view> |
|||
<view class="search_area"> |
|||
<view class="search_box"> |
|||
<input type="text" v-model="account" placeholder="请输入团队人员id/手机号码" placeholder-style="color: #ededed;"> |
|||
<button @click="search()">搜索</button> |
|||
</view> |
|||
</view> |
|||
<view class="list_area"> |
|||
<view v-for="(item,index) in listsData" :key="index" class="list-item"> |
|||
<view class="info"> |
|||
<image :src="item.avatar" mode=""></image> |
|||
<view class="">ID：{{item.id}}</view> |
|||
</view> |
|||
<view class="amount"> |
|||
<view class="amount1"> |
|||
<view class=""><text>余额：</text>{{item.balance}}</view> |
|||
<view class="red" @click="modifyScore(1, item, index)">上分</view> |
|||
</view> |
|||
<view class="amount1"> |
|||
<view class=""><text>可提余额：</text>{{item.withdrawal_balance}}</view> |
|||
<view class="red" @click="modifyScore(2, item, index)">下分</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showScore" @click.stop=""> |
|||
<view class="score_area"> |
|||
<view class="title">{{scoreTitle}}</view> |
|||
<view class="content"> |
|||
<view class="info_box"> |
|||
<view class="">ID：<text>{{scoreInfo.id}}</text></view> |
|||
</view> |
|||
<view class="info_box"> |
|||
<view class="">余额：<text>{{scoreInfo.balance}}</text></view> |
|||
<view class="">可提余额：<text>{{scoreInfo.withdrawal_balance}}</text></view> |
|||
</view> |
|||
<view class="input_box"> |
|||
<input password :placeholder="scoreTip" v-model="limit"> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="showScore=false">取消</view> |
|||
<view class="confirm" @click="submit">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import API from '@/common/js/api.js' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
listsData: [ |
|||
{id:111,balance:'1000.00',withdrawal_balance:'1000.00'}, |
|||
{id:123,balance:'1000.00',withdrawal_balance:'1000.00'}, |
|||
{id:222,balance:'1000.00',withdrawal_balance:'1000.00'} |
|||
], |
|||
showScore: false, |
|||
scoreTitle: '', |
|||
scoreTip: '',//输入框默认显示 |
|||
scoreInfo: {}, |
|||
limit: '',// 上下分额度 |
|||
page: 1, |
|||
noMore: false, |
|||
submitType: 1,//1上2下 |
|||
account: '',//搜索 |
|||
} |
|||
}, |
|||
methods: { |
|||
getDataList(){ |
|||
API.request('/agentTeam/userList', { |
|||
limit: 10, |
|||
title: this.account, |
|||
page: this.page |
|||
}, res=>{ |
|||
// console.log(res); |
|||
|
|||
if(res.data.length<10){ |
|||
this.noMore = true; |
|||
} |
|||
if(this.page>1){ |
|||
this.listsData = this.listsData.concat(res.data.list); |
|||
}else{ |
|||
this.listsData = res.data.list; |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
// 打开上分下分弹窗 |
|||
modifyScore(type, val, i){ |
|||
this.submitType = type; |
|||
if(type===1){ |
|||
this.scoreTitle = '上分' |
|||
this.scoreTip = '请输入上分额度' |
|||
}else if(type===2){ |
|||
this.scoreTitle = '下分' |
|||
this.scoreTip = '请输入下分额度' |
|||
} |
|||
this.scoreInfo = val; |
|||
this.modifyType = type; |
|||
this.showScore = true; |
|||
}, |
|||
// 提交上分下分 |
|||
submit(){ |
|||
if(!this.limit){ |
|||
uni.showToast({ |
|||
title: this.scoreTip, |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
let url = this.submitType===1?'/agentTeam/upScores':'/agentTeam/downScores' |
|||
API.request(url, { |
|||
user_id: this.scoreInfo.id, |
|||
quota: this.limit |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
this.account = ''; |
|||
this.search(); |
|||
}) |
|||
}, |
|||
search(){ |
|||
this.page = 1;this.noMore= false; |
|||
this.getDataList(); |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getDataList(); |
|||
}, |
|||
onReachBottom() { |
|||
if(!this.noMore){ |
|||
this.page++; |
|||
this.getDataList(); |
|||
}else{ |
|||
uni.showToast({ |
|||
title: '没有更多了' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
|
|||
} |
|||
|
|||
.search_area{ |
|||
.search_box{ |
|||
width: 700rpx; |
|||
height: 80rpx; |
|||
border: 1px solid #EDEDED; |
|||
border-radius: 40rpx; |
|||
display: flex; |
|||
margin: 15px auto; |
|||
} |
|||
input{ |
|||
flex: 1; |
|||
height: 80rpx; |
|||
padding: 0px 20px; |
|||
font-size: 14px; |
|||
} |
|||
button{ |
|||
width: 165rpx; |
|||
height: 80rpx; |
|||
background-color: #F05859; |
|||
border-radius: 40rpx; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
|
|||
.list_area{ |
|||
.list-item{ |
|||
width: 700rpx; |
|||
height: 172rpx; |
|||
border-radius: 10px; |
|||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11); |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
margin: 20px auto; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
} |
|||
.info{ |
|||
text-align: center; |
|||
margin-right: 10px; |
|||
} |
|||
.amount{ |
|||
flex: 1; |
|||
} |
|||
.amount1{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 10px; |
|||
margin: 10px 0px; |
|||
} |
|||
text{ |
|||
color: #999; |
|||
} |
|||
.red{ |
|||
color: #F05859; |
|||
} |
|||
image{ |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.edit_mask{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
background-color: rgba(0,0,0,.5); |
|||
z-index: 999; |
|||
|
|||
.title{ |
|||
height: 140rpx; |
|||
text-align: center; |
|||
line-height: 140rpx; |
|||
font-size: 18px; |
|||
} |
|||
.btngroup{ |
|||
height: 90rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-top: 2rpx solid #f1f1f1; |
|||
.cancel{ |
|||
line-height: 90rpx; |
|||
color: #999; |
|||
border-right: 2rpx solid #f1f1f1; |
|||
} |
|||
.confirm, .cancel{ |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
.score_area{ |
|||
width: 670rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
color: #444; |
|||
height: 500rpx; |
|||
margin: calc(50vh - 250rpx) auto; |
|||
|
|||
.content{ |
|||
height: 268rpx; |
|||
padding: 0px 55rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.info_box{ |
|||
height: 66rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 16px; |
|||
color: #999; |
|||
margin-bottom: 6rpx; |
|||
|
|||
text{ |
|||
color: #101010; |
|||
} |
|||
} |
|||
.input_box{ |
|||
width: 560rpx; |
|||
height: 80rpx; |
|||
border-radius: 5px; |
|||
border: 1px solid #ededed; |
|||
text-align: center; |
|||
input{ |
|||
height: 80rpx; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,478 @@ |
|||
<template> |
|||
<view class="" style="padding-top: 88rpx;"> |
|||
<view class="nav_area dis-flex-between-center"> |
|||
<view style="flex: 0.3;"></view> |
|||
<view class="" style="font-size: 18px;color: #101010;">用户</view> |
|||
<view style="flex: 0.3;text-align: right;" @click="add">新增用户</view> |
|||
</view> |
|||
<view class="search_area"> |
|||
<view class="search_box"> |
|||
<input type="text" v-model="account" placeholder="请输入用户id/手机号码" placeholder-style="color: #ededed;"> |
|||
<button @click="search()">搜索</button> |
|||
</view> |
|||
</view> |
|||
<view class="list_area"> |
|||
<view v-for="(item,index) in listsData" :key="index" class="list-item"> |
|||
<view class="edit" @click="edit(item, index)"></view> |
|||
<view class="delete" @click="remove(item, index)">删除</view> |
|||
<view class="info"> |
|||
<image :src="item.avatar" mode=""></image> |
|||
<view class="">ID：{{item.id}}</view> |
|||
</view> |
|||
<view class="amount"> |
|||
<view class="amount2"> |
|||
<view class=""><text>所属代理ID：</text>{{item.aid}}</view> |
|||
<view class=""><text>电话：</text>{{item.phone}}</view> |
|||
<view class=""><text>余额：</text>{{item.balance}}</view> |
|||
<view class=""><text>可提余额：</text>{{item.withdrawal_balance}}</view> |
|||
</view> |
|||
<view class="amount1"> |
|||
<view class="red" @click="modifyScore(1, item, index)">上分</view> |
|||
<view class="red" @click="modifyScore(2, item, index)">下分</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" style="height: 0px;padding: 0px;"></view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showEdit" @click.stop=""> |
|||
<view class="edit_area" :class="editType=='add'?'add':'edit'"> |
|||
<view class="title">{{title}}</view> |
|||
<view class="content"> |
|||
<view class="input_box" v-if="editType=='edit'"> |
|||
<view class="">ID:</view> |
|||
<input type="text" disabled v-model="editInfo.id"> |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="">电话:</view> |
|||
<input type="text" placeholder="电话为登陆账号" v-model="editInfo.phone" :disabled="editType=='edit'"> |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="">密码:</view> |
|||
<input password placeholder="请输入新密码" v-model="editInfo.password"> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="cancel">取消</view> |
|||
<view class="confirm" @click="confirm">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="edit_mask" v-if="showScore" @click.stop=""> |
|||
<view class="score_area"> |
|||
<view class="title">{{scoreTitle}}</view> |
|||
<view class="content"> |
|||
<view class="info_box"> |
|||
<view class="">ID：<text>{{scoreInfo.id}}</text></view> |
|||
</view> |
|||
<view class="info_box"> |
|||
<view class="">电话：<text>{{scoreInfo.phone}}</text></view> |
|||
</view> |
|||
<view class="info_box"> |
|||
<view class="">余额：<text>{{scoreInfo.balance}}</text></view> |
|||
<view class="">可提余额：<text>{{scoreInfo.withdrawal_balance}}</text></view> |
|||
</view> |
|||
<view class="input_box"> |
|||
<input password :placeholder="scoreTip" v-model="limit"> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup"> |
|||
<view class="cancel" @click="showScore=false">取消</view> |
|||
<view class="confirm" @click="submit">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import API from '@/common/js/api.js' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
listsData: [ |
|||
{id:111,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'}, |
|||
{id:123,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'}, |
|||
{id:222,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'} |
|||
], |
|||
showEdit: false, |
|||
editType: 'add',//add/edit |
|||
title: "新增用户", |
|||
originInfo: { |
|||
id: '',phone: '',password: '' |
|||
}, |
|||
editInfo: {}, |
|||
showScore: false, |
|||
scoreTitle: '', |
|||
scoreTip: '',//输入框默认显示 |
|||
scoreInfo: {}, |
|||
limit: '',// 上下分额度 |
|||
account: '',//搜索 |
|||
noMore: false, |
|||
page: 1, |
|||
modifyType: 1,//1上2下 |
|||
} |
|||
}, |
|||
methods: { |
|||
getUserList(){ |
|||
API.request('/adminTeam/userList', { |
|||
limit: 10,title: this.account,page: this.page |
|||
}, res=>{ |
|||
if(res.data.length<10){ |
|||
this.noMore = true; |
|||
} |
|||
if(this.page>1){ |
|||
this.listsData = this.listsData.concat(res.data.list); |
|||
}else{ |
|||
this.listsData = res.data.list; |
|||
} |
|||
}) |
|||
}, |
|||
// 编辑用户 |
|||
edit(val, i){ |
|||
this.title = "编辑"; |
|||
this.editType = "edit"; |
|||
this.showEdit = true; |
|||
this.editInfo = val; |
|||
}, |
|||
// 删除用户 |
|||
remove(val, i){ |
|||
let _this = this; |
|||
uni.showModal({ |
|||
title:'温馨提示', |
|||
content:"确定是否删除该用户信息", |
|||
success() { |
|||
API.request('/adminTeam/deleteUser', { |
|||
user_id: val.id |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
_this.listsData.splice(i, 1); |
|||
// _this.account = ''; |
|||
// _this.search(); |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
cancel(){ |
|||
this.showEdit = false; |
|||
this.editInfo = this.originInfo; |
|||
}, |
|||
// 提交用户新增编辑 |
|||
confirm(){ |
|||
if(!this.editInfo.password){ |
|||
uni.showToast({ |
|||
title: '请输入新密码', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
if(!this.editInfo.phone){ |
|||
uni.showToast({ |
|||
title: '请输入登陆账号', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
API.request('/adminTeam/editUser', { |
|||
user_id: this.editInfo.id, |
|||
phone: this.editInfo.phone, |
|||
password: this.editInfo.password |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
this.account = ''; |
|||
this.search(); |
|||
}) |
|||
}, |
|||
add(){ |
|||
this.title = "新增用户"; |
|||
this.editType = "add"; |
|||
this.showEdit = true; |
|||
}, |
|||
// 打开上分下分弹窗 |
|||
modifyScore(type, val, i){ |
|||
if(type===1){ |
|||
this.scoreTitle = '上分' |
|||
this.scoreTip = '请输入上分额度' |
|||
}else if(type===2){ |
|||
this.scoreTitle = '下分' |
|||
this.scoreTip = '请输入下分额度' |
|||
} |
|||
this.scoreInfo = val; |
|||
this.modifyType = type; |
|||
this.showScore = true; |
|||
}, |
|||
// 提交上分下分 |
|||
submit(){ |
|||
if(!this.limit){ |
|||
uni.showToast({ |
|||
title: this.scoreTip, |
|||
icon: 'none' |
|||
}) |
|||
return; |
|||
} |
|||
let url = this.modifyType===1?'/adminTeam/upScores':'/adminTeam/downScores' |
|||
API.request(url, { |
|||
user_id: this.scoreInfo.id, |
|||
quota: this.limit |
|||
}, res=>{ |
|||
uni.showToast({ |
|||
title: res.msg |
|||
}) |
|||
this.account = ''; |
|||
this.search(); |
|||
}) |
|||
}, |
|||
search(){ |
|||
this.page = 1; |
|||
this.noMore = false; |
|||
this.getUserList(); |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getUserList(); |
|||
}, |
|||
onReachBottom() { |
|||
if(!this.noMore){ |
|||
this.page++; |
|||
this.getUserList(); |
|||
}else{ |
|||
uni.showToast({ |
|||
title: '没有更多了' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dis-flex-between-center{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
|
|||
} |
|||
.search_area{ |
|||
.search_box{ |
|||
width: 700rpx; |
|||
height: 80rpx; |
|||
border: 1px solid #EDEDED; |
|||
border-radius: 40rpx; |
|||
display: flex; |
|||
margin: 15px auto; |
|||
} |
|||
input{ |
|||
flex: 1; |
|||
height: 80rpx; |
|||
padding: 0px 20px; |
|||
font-size: 14px; |
|||
} |
|||
button{ |
|||
width: 165rpx; |
|||
height: 80rpx; |
|||
background-color: #F05859; |
|||
border-radius: 40rpx; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
|
|||
.list_area{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
padding: 0px 10px; |
|||
|
|||
.list-item{ |
|||
width: 340rpx; |
|||
// height: 172rpx; |
|||
border-radius: 10px; |
|||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11); |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
margin: 0px auto 10px; |
|||
font-size: 14px; |
|||
position: relative; |
|||
|
|||
.edit{ |
|||
position: absolute; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
background-image: url("../../static/backgroundUser/riLine-edit-line@2x.png"); |
|||
background-size: contain; |
|||
top: 108rpx; |
|||
right: 26rpx; |
|||
} |
|||
.delete{ |
|||
position: absolute; |
|||
width: 76rpx; |
|||
height: 48rpx; |
|||
top: 0px; |
|||
right: 0px; |
|||
border-radius: 3px 10px 3px 3px; |
|||
font-size: 12px; |
|||
line-height: 48rpx; |
|||
text-align: center; |
|||
color: #999; |
|||
background-color: #f1f1f1; |
|||
} |
|||
} |
|||
.info{ |
|||
text-align: center; |
|||
margin-right: 10px; |
|||
} |
|||
.amount{ |
|||
flex: 1; |
|||
margin-top: 10px; |
|||
} |
|||
.amount2{ |
|||
line-height: 50rpx; |
|||
} |
|||
.amount1{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 20px; |
|||
margin: 10px 0px 5px; |
|||
} |
|||
text{ |
|||
color: #999; |
|||
} |
|||
.red{ |
|||
color: #F05859; |
|||
} |
|||
image{ |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.edit_mask{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
background-color: rgba(0,0,0,.5); |
|||
z-index: 999; |
|||
|
|||
.title{ |
|||
height: 140rpx; |
|||
text-align: center; |
|||
line-height: 140rpx; |
|||
font-size: 18px; |
|||
} |
|||
.btngroup{ |
|||
height: 90rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-top: 2rpx solid #f1f1f1; |
|||
.cancel{ |
|||
line-height: 90rpx; |
|||
color: #999; |
|||
border-right: 2rpx solid #f1f1f1; |
|||
} |
|||
.confirm, .cancel{ |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
.edit_area{ |
|||
width: 670rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
color: #444; |
|||
&.add{ |
|||
height: 480rpx; |
|||
margin: calc(50vh - 240rpx) auto; |
|||
.content{ |
|||
height: 248rpx; |
|||
} |
|||
} |
|||
&.edit{ |
|||
height: 626rpx; |
|||
margin: calc(50vh - 313rpx) auto; |
|||
.content{ |
|||
height: 394rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
.input_box{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0px 40rpx; |
|||
margin-bottom: 40rpx; |
|||
font-size: 16px; |
|||
view{ |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
input{ |
|||
width: 430rpx; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
border: 1px solid #ededed; |
|||
border-radius: 5px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.score_area{ |
|||
width: 670rpx; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
color: #444; |
|||
height: 570rpx; |
|||
margin: calc(50vh - 285rpx) auto; |
|||
|
|||
.content{ |
|||
height: 338rpx; |
|||
padding: 0px 55rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.info_box{ |
|||
height: 66rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 16px; |
|||
color: #999; |
|||
margin-bottom: 6rpx; |
|||
|
|||
text{ |
|||
color: #101010; |
|||
} |
|||
} |
|||
.input_box{ |
|||
width: 560rpx; |
|||
height: 80rpx; |
|||
border-radius: 5px; |
|||
border: 1px solid #ededed; |
|||
text-align: center; |
|||
input{ |
|||
height: 80rpx; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view class="rechargePage"> |
|||
<view>当前余额：<text style="color: #4976FF;">10000.00</text></view> |
|||
<view class="">请选择充值金额</view> |
|||
<view class="selec_area"> |
|||
<view v-for="(item,index) in dataList" :key="index" class="selec_item"> |
|||
￥{{item}} |
|||
</view> |
|||
<view class="input_box"> |
|||
<view class="icon"></view> |
|||
<input type="text" v-model="amount" placeholder="请输入充值金额" placeholder-style="color: #999;" /> |
|||
</view> |
|||
</view> |
|||
<view class="">支付方式</view> |
|||
<view class="selec2_area" @click="ZFBselected=!ZFBselected"> |
|||
<image src="../../static/user/ze-alipay@2x.png" mode=""></image> |
|||
<view style="flex: 1;"> |
|||
<view style="color: #101010;">支付宝支付</view> |
|||
<view style="color: #999999;">数亿用户都在用，安全可托付</view> |
|||
</view> |
|||
<view class="selected" v-if="ZFBselected"></view> |
|||
<view class="no-select" v-else></view> |
|||
</view> |
|||
<view class="submitBtn">充值</view> |
|||
<view class="explain"> |
|||
充值说明：<br /> |
|||
为了防止恶意套现和洗钱，您在本平台充值金额只能用于消费 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dataList: [10,50,100,200,500,1000], |
|||
amount: '', |
|||
ZFBselected: true |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
|
|||
} |
|||
.rechargePage{ |
|||
padding: 20rpx 40rpx; |
|||
color: #444; |
|||
line-height: 80rpx; |
|||
} |
|||
.selec_area { |
|||
width: 610rpx; |
|||
margin: 10px auto 20px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
.selec_item{ |
|||
width: 160rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
border: 1px solid #ededed; |
|||
border-radius: 5px; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
.input_box{ |
|||
width: 610rpx; |
|||
height: 80rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 5px; |
|||
border: 1px solid #ededed; |
|||
display: flex; |
|||
|
|||
.icon{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
background-image: url("../../static/user/ze-gold-coin-o@2x.png"); |
|||
background-size: contain; |
|||
margin: 20rpx; |
|||
} |
|||
input{ |
|||
height: 76rpx; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
.selec2_area{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
line-height: 18px; |
|||
font-size: 12px; |
|||
|
|||
image{ |
|||
width: 60rpx;height: 60rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.selected{ |
|||
width: 48rpx;height: 48rpx; |
|||
background-image: url("../../static/user/check-circle@2x.png"); |
|||
background-size: contain; |
|||
} |
|||
.no-select{ |
|||
width: 48rpx;height: 48rpx; |
|||
background-image: url("../../static/user/check-circle-n.png"); |
|||
background-size: contain; |
|||
} |
|||
} |
|||
.submitBtn{ |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
border-radius: 5px; |
|||
margin: 40rpx auto; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
color: #fff; |
|||
background-color: #E33837; |
|||
} |
|||
.explain{ |
|||
font-size: 14px; |
|||
color: #999; |
|||
line-height: 28px; |
|||
text-align:justify;/*文字两端对齐*/ |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,248 @@ |
|||
<template> |
|||
<view> |
|||
<view class="nav_area"></view> |
|||
<view v-for="(item,index) in recordsList" :key="index" class="record-item"> |
|||
<view class="record-item-top"> |
|||
<view class="">记录事项名称</view> |
|||
<view class="" style="color: #CD2731;"> |
|||
<text v-if="type=='CZ'||type=='ZJ'||type=='DOWN'">+</text> |
|||
<text v-else>-</text> |
|||
{{item.amount1}} |
|||
</view> |
|||
</view> |
|||
<view class="record-item-bottom"> |
|||
<view class="">{{item.time}}</view> |
|||
<view class=""> |
|||
<text v-if="type=='TX'||type=='ZJ'||type=='DOWN'">可提余额：</text> |
|||
<text v-else-if="type=='CZ'">剩余：</text> |
|||
<text v-else-if="type=='XF'||type=='UP'">余额：</text> |
|||
{{item.amount2}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import API from '@/common/js/api.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
type: null, |
|||
recordsList:[ |
|||
{ |
|||
amount1: '100.00', |
|||
amount2: '1000.00', |
|||
time: '08月27日 12:00', |
|||
}, |
|||
{ |
|||
amount1: '100.00', |
|||
amount2: '1000.00', |
|||
time: '08月27日 12:00', |
|||
}, |
|||
], |
|||
page: 1, |
|||
noMore: true, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
onLoad(e) { |
|||
this.type = e.type; |
|||
let title = ''; |
|||
switch(e.type){ |
|||
case 'ZJ': |
|||
title = '中奖' |
|||
break; |
|||
case 'XF': |
|||
title = '消费' |
|||
break; |
|||
case 'CZ': |
|||
title = '充值' |
|||
break; |
|||
case 'TX': |
|||
title = '提现'; |
|||
break; |
|||
case 'UP': |
|||
title = '上分' |
|||
break; |
|||
case 'DOWN': |
|||
title = '下分' |
|||
break; |
|||
} |
|||
uni.setNavigationBarTitle({ |
|||
title: title+'记录' |
|||
}) |
|||
this['get'+this.type](this.page); |
|||
|
|||
}, |
|||
methods: { |
|||
getTX(page=1){ |
|||
API.getWithdrawal({ |
|||
page: page, |
|||
limit: 10 |
|||
}, res=>{ |
|||
let list = res.list.map(item=>{ |
|||
return { |
|||
amount1: item.withdrawal_amount, |
|||
amount2: item.withdrawal_balence, |
|||
time: item.apply_time, |
|||
} |
|||
}); |
|||
if(page===1){ |
|||
list.length>0 ? this.noMore=false : false; |
|||
this.recordsList = list; |
|||
}else{ |
|||
if(res.list.length==0){ |
|||
uni.showToast({ |
|||
title: '没有更多了', |
|||
icon: 'none' |
|||
}) |
|||
this.noMore = true; |
|||
} |
|||
this.recordsList = this.recordsList.concat(list) |
|||
} |
|||
}) |
|||
}, |
|||
getCZ(page=1){ |
|||
API.getRecharge({ |
|||
page: page, |
|||
limit: 10 |
|||
}, res=>{ |
|||
let list = res.list.map(item=>{ |
|||
return { |
|||
amount1: item.recharge_amount, |
|||
amount2: item.residue_amount, |
|||
time: item.recharge_time, |
|||
} |
|||
}); |
|||
if(page===1){ |
|||
list.length>0 ? this.noMore=false : false; |
|||
this.recordsList = list; |
|||
}else{ |
|||
if(res.list.length==0){ |
|||
uni.showToast({ |
|||
title: '没有更多了', |
|||
icon: 'none' |
|||
}) |
|||
this.noMore = true; |
|||
} |
|||
this.recordsList = this.recordsList.concat(list) |
|||
} |
|||
}) |
|||
}, |
|||
getXF(page=1){ |
|||
API.getConsumption({ |
|||
page: page, |
|||
limit: 10 |
|||
}, res=>{ |
|||
let list = res.list.map(item=>{ |
|||
return { |
|||
amount1: item.actual_price, |
|||
amount2: item.residue_amount, |
|||
time: item.create_time, |
|||
} |
|||
}); |
|||
if(page===1){ |
|||
list.length>0 ? this.noMore=false : false; |
|||
this.recordsList = list; |
|||
}else{ |
|||
if(res.list.length==0){ |
|||
uni.showToast({ |
|||
title: '没有更多了', |
|||
icon: 'none' |
|||
}) |
|||
this.noMore = true; |
|||
} |
|||
this.recordsList = this.recordsList.concat(list) |
|||
} |
|||
}) |
|||
}, |
|||
getZJ(page=1){ |
|||
API.getAwards({ |
|||
page: page, |
|||
limit: 10 |
|||
}, res=>{ |
|||
let list = res.list.map(item=>{ |
|||
return { |
|||
amount1: item.awards_amount, |
|||
amount2: item.withdrawal_balance, |
|||
time: item.create_time, |
|||
} |
|||
}); |
|||
if(page===1){ |
|||
list.length>0 ? this.noMore=false : false; |
|||
this.recordsList = list; |
|||
}else{ |
|||
if(res.list.length==0){ |
|||
uni.showToast({ |
|||
title: '没有更多了', |
|||
icon: 'none' |
|||
}) |
|||
this.noMore = true; |
|||
} |
|||
this.recordsList = this.recordsList.concat(list) |
|||
} |
|||
}) |
|||
}, |
|||
getUP(){ |
|||
|
|||
}, |
|||
getDOWN(){ |
|||
|
|||
}, |
|||
|
|||
}, |
|||
onReachBottom() { |
|||
if(this.noMore) return; |
|||
this.page++; |
|||
this['get'+this.type](this.page); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.nav_area { |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
|||
width: 700rpx; |
|||
height: 88rpx; |
|||
padding: 0px 25rpx; |
|||
padding-top: var(--status-bar-height); |
|||
box-sizing: content-box; |
|||
color: #b0b0b0; |
|||
font-size: 14px; |
|||
|
|||
} |
|||
.record-item{ |
|||
padding: 20rpx 40rpx 0px; |
|||
|
|||
.record-item-top, .record-item-bottom{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.record-item-top{ |
|||
font-size: 18px; |
|||
margin-bottom: 10px; |
|||
} |
|||
.record-item-bottom{ |
|||
border-bottom: 1px solid #ebebeb; |
|||
padding-bottom: 20rpx; |
|||
font-size: 14px; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.record-item:nth-last-child(1){ |
|||
.record-item-bottom{ |
|||
border: none; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
|
|||
class Scratch { |
|||
constructor (page, opts) { |
|||
opts = opts || {} |
|||
this.page = page |
|||
this.canvasId = opts.canvasId || 'canvas' |
|||
this.width = opts.width || 340 |
|||
this.height = opts.height || 150 |
|||
// this.maskColor = opts.maskColor || '#D2D2D2'
|
|||
this.maskColor = '#ccc' |
|||
this.size = opts.size || 10 |
|||
this.r = this.size * 2 |
|||
this.area = this.r * this.r |
|||
this.scale = opts.scale || 0.3 |
|||
this.totalArea = this.width * this.height |
|||
// this.show = opts.show || false
|
|||
this.init() |
|||
} |
|||
|
|||
init () { |
|||
this.show = false |
|||
this.clearPoints = [] |
|||
this.ctx = uni.createCanvasContext(this.canvasId) |
|||
this.drawMask() |
|||
this.bindTouch() |
|||
} |
|||
|
|||
drawMask () { |
|||
this.ctx.setFillStyle(this.maskColor) |
|||
this.ctx.fillRect(0, 0, this.width, this.height) |
|||
this.ctx.draw() |
|||
} |
|||
|
|||
bindTouch () { |
|||
this.page.touchStart = (e) => { |
|||
this.eraser(e, true) |
|||
} |
|||
this.page.touchMove = (e) => { |
|||
this.eraser(e, false) |
|||
} |
|||
this.page.touchEnd = (e) => { |
|||
if (this.show) { |
|||
this.ctx.clearRect(0, 0, this.width, this.height) |
|||
this.ctx.draw() |
|||
// console.log('刮奖面积达标');
|
|||
} |
|||
} |
|||
} |
|||
|
|||
eraser (e, bool) { |
|||
const len = this.clearPoints.length |
|||
let count = 0 |
|||
const x = e.touches[0].x; const y = e.touches[0].y |
|||
const x1 = x - this.size |
|||
const y1 = y - this.size |
|||
if (bool) { |
|||
this.clearPoints.push({ |
|||
x1: x1, |
|||
y1: y1, |
|||
x2: x1 + this.r, |
|||
y2: y1 + this.r |
|||
}) |
|||
} |
|||
for (const item of this.clearPoints) { |
|||
if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) { |
|||
count++ |
|||
} else { |
|||
break |
|||
} |
|||
} |
|||
if (len === count) { |
|||
this.clearPoints.push({ |
|||
x1: x1, |
|||
y1: y1, |
|||
x2: x1 + this.r, |
|||
y2: y1 + this.r |
|||
}) |
|||
} |
|||
if (len && this.r * this.r * len > this.scale * this.totalArea) { |
|||
this.show = true; |
|||
// console.log('刮奖面积达标');
|
|||
} |
|||
this.clearArcFun(x, y, this.r, this.ctx) |
|||
this.ctx.draw(true); |
|||
} |
|||
|
|||
clearArcFun (x, y, r, ctx) { |
|||
let stepClear = 1 |
|||
clearArc(x, y, r) |
|||
function clearArc (x, y, radius) { |
|||
const calcWidth = radius - stepClear |
|||
const calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth) |
|||
|
|||
const posX = x - calcWidth |
|||
const posY = y - calcHeight |
|||
|
|||
const widthX = 2 * calcWidth |
|||
const heightY = 2 * calcHeight |
|||
|
|||
if (stepClear <= radius) { |
|||
ctx.clearRect(posX, posY, widthX, heightY) |
|||
stepClear += 1 |
|||
clearArc(x, y, radius) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
export default Scratch |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<view> |
|||
<view class="prizePage"> |
|||
<!--游玩区域--> |
|||
<div class="box"> |
|||
<p class="rule">活动规则</p> |
|||
<a href="../my.html" id="myWin"> |
|||
<p class="my">我的奖品</p> |
|||
</a> |
|||
<div class="panel"> |
|||
<canvas id="canvas" width="562" height="308" @touchstart="mousedown" @touchmove="mousemove" @touchend="mouseup"></canvas> |
|||
<div id="canvas-mask"> |
|||
<a id="btn" href="javascript:;" @click="btnClick"></a> |
|||
<p>您今天还有<span id="change">3</span>次刮奖机会</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<!--游戏规则弹窗--> |
|||
<div id="mask-rule"> |
|||
<div class="box-rule"> |
|||
<span class="star"></span> |
|||
<h2>活动规则说明</h2> |
|||
<span id="close-rule"></span> |
|||
<div class="con"> |
|||
<div class="text"> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--中奖提示--> |
|||
<div id="mask"> |
|||
<div class="blin"></div> |
|||
<div class="caidai"></div> |
|||
<div class="winning"> |
|||
<div class="red-head"></div> |
|||
<div class="red-body"></div> |
|||
<div id="card"> |
|||
<a href="" target="_self" class="win"></a> |
|||
</div> |
|||
<a href="" target="_self" class="btn"></a> |
|||
<span id="close"></span> |
|||
</div> |
|||
</div> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var $canvas = $("#canvas"),//canvas |
|||
clientWidth = document.documentElement.clientWidth, |
|||
canvasWidth = Math.floor(clientWidth * 562 / 750),//canvas宽 = 屏幕宽 * 设计稿里canvas宽 / 750 |
|||
canvasHeight = Math.floor(clientWidth * 308 / 750),//canvas高 = 屏幕宽 * 设计稿里canvas高 / 750 |
|||
ctx = $canvas[0].getContext("2d"),//获取canvas的2d绘制对象 |
|||
$canvasMask = $("#canvas-mask"),//canvas遮罩层 |
|||
$btn = $("#btn"),//刮奖按钮 |
|||
$change = $("#change"),//剩余次数 |
|||
data = {count: 5},//次数 |
|||
empty = false, |
|||
bool = false;//判断是否按下去，true为按下，false未按下 |
|||
export default { |
|||
data() { |
|||
return { |
|||
// w: 330, |
|||
// h: 280, |
|||
// isfinish:false, |
|||
// isClear:false, |
|||
// isWin: false, |
|||
// isThank: false |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
$canvasMask.show(); |
|||
$change.html(data.count);//显示剩余次数 |
|||
//设置canvas宽高 |
|||
$canvas.attr('width', canvasWidth); |
|||
$canvas.attr('height', canvasHeight); |
|||
|
|||
//canvas绘图 |
|||
ctx.beginPath(); |
|||
ctx.fillStyle = '#999';//刮刮乐图层的填充色 |
|||
ctx.lineCap = "round";//绘制的线结束时为圆形 |
|||
ctx.lineJoin = "round";//当两条线交汇时创建圆形边角 |
|||
ctx.lineWidth = 20;//单次刮开面积 |
|||
ctx.fillRect(0, 0, canvasWidth, canvasHeight); |
|||
ctx.closePath(); |
|||
|
|||
ctx.globalCompositeOperation = 'destination-out';//新图像和原图像重合部分变透明 |
|||
//下面3行代码是为了修复部分手机浏览器不支持destination-out |
|||
$canvas.css("display", "none"); |
|||
$canvas.outerHeight(); |
|||
$canvas.css("display", "inherit"); |
|||
}, |
|||
btnClick () {//点击开始刮奖按钮 |
|||
if (data.count > 0) { |
|||
data.count--;//设定中奖的图片 |
|||
$canvas.css("background-image", "url('../common/image/prize/prize2.png')"); |
|||
$canvasMask.hide(); |
|||
} else { |
|||
alert("没有次数了"); |
|||
} |
|||
}, |
|||
//鼠标按下 |
|||
mousedown (e) { |
|||
e = e || window.event; |
|||
e.preventDefault(); |
|||
if (typeof e.touches !== 'undefined') { |
|||
e = e.touches[0];//获取触点 |
|||
} |
|||
var x = e.pageX - $(this).offset().left, |
|||
y = e.pageY - $(this).offset().top; |
|||
ctx.moveTo(x, y); |
|||
//touchmove事件 |
|||
$canvas.on('touchmove', eventMove); |
|||
}, |
|||
mousemove (e) { |
|||
e = e || window.event; |
|||
e.preventDefault(); |
|||
if (typeof e.touches !== 'undefined') { |
|||
e = e.touches[0]; |
|||
} |
|||
var x = e.pageX - $(this).offset().left, |
|||
y = e.pageY - $(this).offset().top; |
|||
ctx.lineTo(x, y); |
|||
ctx.stroke(); |
|||
clear(); |
|||
}, |
|||
//鼠标按键抬起 |
|||
mouseup () { |
|||
|
|||
}, |
|||
clear() { |
|||
if (empty) return; |
|||
var data = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data,//得到canvas的全部数据 |
|||
half = 0; |
|||
|
|||
//length = canvasWidth * canvasHeight * 4，一个像素块是一个对象rgba四个值，a范围为0~255 |
|||
for (var i = 3, length = data.length; i < length; i += 4) {//因为有rgba四个值，下标0开始，所以初始i=3 |
|||
data[i] === 0 && half++;//存在imageData对象时half加1 PS:该像素区域透明即为不存在该对象 |
|||
} |
|||
//当刮开的区域大于等于20%时，则可以开始处理结果 |
|||
if (half >= canvasWidth * canvasHeight * 0.2) { |
|||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);//清空画布 |
|||
empty = true; |
|||
win();//调用中奖信息 |
|||
} |
|||
}, |
|||
|
|||
|
|||
}, |
|||
onReady(e) { |
|||
this.init(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.prizePage{ |
|||
width: 750rpx; |
|||
height: 1506rpx; |
|||
background: url("../../static/home/prize-bg.png") no-repeat; |
|||
background-size: contain; |
|||
} |
|||
.gift { |
|||
width: 330px; |
|||
height: 280px; |
|||
background-color: #FFF1B9; |
|||
position: absolute; |
|||
left: 50%; |
|||
// top: 50%; |
|||
margin-left: -165px; |
|||
// margin-top: 174px; |
|||
} |
|||
.mask{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
} |
|||
.winPrize{ |
|||
width: 375px; |
|||
height: 575px; |
|||
background-image: url("../../static/home/prize.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
line-height: 550px; |
|||
color: #FFF1B9; |
|||
font-weight: bold; |
|||
font-size: 60px; |
|||
animation: showPrize 1s ease-in-out; |
|||
|
|||
.close{ |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url("../../static/home/close.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 4; |
|||
} |
|||
} |
|||
@keyframes showPrize { |
|||
0%{ |
|||
transform: translate(-50%, -50%) scale(0.4); |
|||
} |
|||
100%{ |
|||
transform: translate(-50%, -50%) scale(1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<!-- 刮奖 --> |
|||
<view v-else class="scratch"> |
|||
<view class="box"> |
|||
<!-- 刮奖结果图片 --> |
|||
<image src="../../static/home/tem11.png" class="img"></image> |
|||
<!-- 刮奖canvas容器 --> |
|||
<canvas |
|||
class="canvas-box" |
|||
canvas-id="canvas-id" |
|||
:disable-scroll="true" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
></canvas> |
|||
<!-- 刮奖前提示消息，开始刮奖后隐藏 --> |
|||
<cover-view class="tip" v-if="!toDraw"> |
|||
<cover-view class="text"> |
|||
<cover-view class="text-tip">你还有</cover-view> |
|||
<cover-view class="light">1</cover-view> |
|||
<cover-view class="text-tip">次刮奖机会</cover-view> |
|||
</cover-view> |
|||
<!-- 开始刮奖按钮 --> |
|||
<cover-view class="btn" @tap="scratchStart()"> |
|||
<cover-view class="text">立即刮奖</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
<!-- 如果后端没有不中奖的图，则不中奖时默认显示 --> |
|||
<!-- <view v-if="hasDraw" class="award-box"> |
|||
<text class="text">谢谢参与</text> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Scratch from './scratch.js' |
|||
export default { |
|||
data () { |
|||
return { |
|||
// domain: getApp().globalData.baseUrl, // 服务器域名 |
|||
toDraw: false, // 是否开始刮奖 |
|||
showResult: false, // 是否显示抽奖结果 |
|||
isWin: true, // 是否中奖 |
|||
scratchWidth: 350, // 绘制刮奖范围宽 |
|||
scratchHeight: 150, // 绘制刮奖范围高 |
|||
scratchSize: 10, // 触手大小 |
|||
scratchScale: 0.25, // 需刮开百分比 |
|||
prize_img: '', // 中奖图片 |
|||
isScratching: false ,// 是否正在刮奖, |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
initCanvas () { |
|||
// 刮奖初始化信息必须在onReady后，不然h5不支持（小程序可在onLoad执行） |
|||
new Scratch(this, { |
|||
canvasId: 'canvas-id', |
|||
width: this.scratchWidth, |
|||
height: this.scratchHeight, |
|||
size: this.scratchSize, |
|||
scale: this.scratchScale |
|||
}) |
|||
}, |
|||
// 请求刮奖结果 |
|||
doPrizeScratchTicketFun () { |
|||
if (this.isScratching) return false |
|||
this.isScratching = true |
|||
// 请求服务器刮奖结果信息 |
|||
this.$api.luckDraw |
|||
.doPrizeScratchTicket() |
|||
.then(res => { |
|||
this.prize_img = res.luckyPrize.prize_img |
|||
this.luckyPrize = res.luckyPrize |
|||
this.isWin = true |
|||
if (this.luckyPrize.is_winning === 2) this.isWin = false |
|||
this.isScratching = false |
|||
}) |
|||
.catch(() => { |
|||
this.isScratching = false |
|||
}, |
|||
// 点击按钮开始刮奖 |
|||
scratchStart () { |
|||
this.toDraw = true |
|||
this.initCanvas() |
|||
this.doPrizeScratchTicketFun() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.scratch { |
|||
width: 670upx; |
|||
height: 320upx; |
|||
background: url("../../static/home/tem11.png") no-repeat; |
|||
background-size: contain; |
|||
margin: 366upx auto 80upx; |
|||
padding: 29upx 25upx 21upx; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.box { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #ccc; |
|||
border-radius: 20upx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.img { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
.canvas-box { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100.5%; |
|||
height: 100%; |
|||
border-radius: 20upx; |
|||
overflow: hidden; |
|||
} |
|||
.tip { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 999; |
|||
text-align: center; |
|||
.text { |
|||
font-size: 30upx; |
|||
font-weight: bold; |
|||
color: #444; |
|||
margin-top: 69upx; |
|||
.text-tip { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.light { |
|||
// color: $red; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 6upx !important; |
|||
} |
|||
} |
|||
.btn { |
|||
width: 360upx; |
|||
height: 82upx; |
|||
border: none; |
|||
border-radius: 41upx; |
|||
margin: 59upx auto 0; |
|||
position: relative; |
|||
background: none; |
|||
background: #000; |
|||
.btn-img { |
|||
border: none; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.text { |
|||
display: inline; |
|||
position: absolute; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 30upx; |
|||
font-weight: bold; |
|||
margin: 0; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
.award-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20upx; |
|||
text-align: center; |
|||
line-height: 270upx; |
|||
background: #FFF1B9; |
|||
.text { |
|||
font-size: 40upx; |
|||
font-weight: bold; |
|||
color: #444; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<view> |
|||
<view class="prizePage"> |
|||
<view class=""> |
|||
|
|||
</view> |
|||
<view class="" style="position: relative;padding-top: 380px;width: 330px;margin: 0px auto;"> |
|||
<div id="gift" class="gift"></div> |
|||
<canvas canvas-id="guagua" id="guagua" @touchstart="start" @touchend="end" @touchmove="move" |
|||
style="width: 330px;height: 280px;"></canvas> |
|||
</view> |
|||
<view class="mask" v-if="isWin || isThank"> |
|||
|
|||
</view> |
|||
<view class="winPrize" v-if="isWin"> |
|||
20元 |
|||
<view class="close" @click="isWin = false"></view> |
|||
</view> |
|||
<view class="noPrize" v-if="isThank"> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var ctx; |
|||
var sx = 0, |
|||
sy = 0, |
|||
perNum = 0; |
|||
var giftWidth=0,giftHeight=0; |
|||
var canvasId = "guagua"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
w: 330, |
|||
h: 280, |
|||
isfinish:false, |
|||
isClear:false, |
|||
isWin: false, |
|||
isThank: false |
|||
} |
|||
}, |
|||
methods: { |
|||
giftWidth:function(){ |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.select('#gift').boundingClientRect(data => { |
|||
giftWidth=data.width; |
|||
giftHeight=data.height; |
|||
}).exec(); |
|||
}, |
|||
finish:function(){ |
|||
this.isfinish=true; |
|||
}, |
|||
done:function(){ |
|||
|
|||
if(1){ |
|||
this.isWin = true; |
|||
}else{ |
|||
this.isThank = true; |
|||
} |
|||
|
|||
}, |
|||
start: function(e) { |
|||
if(this.isfinish){ |
|||
if(!this.isClear){ |
|||
this.isClear=true; |
|||
this.done(); |
|||
ctx.moveTo(0, 0); |
|||
ctx.clearRect(0,0, 330, 280); |
|||
ctx.stroke() |
|||
ctx.draw(true); |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
sx = e.touches[0].x; |
|||
sy = e.touches[0].y; |
|||
ctx.moveTo(sx, sy); |
|||
console.log(e.touches[0].x + " " + e.touches[0].y) |
|||
// this.getFilledPercentage(); |
|||
|
|||
}, |
|||
end: function(e) { |
|||
if(this.isfinish) return false; |
|||
|
|||
}, |
|||
move: function(e) { |
|||
e = e || window.event; |
|||
e.preventDefault(); |
|||
|
|||
if(this.isfinish){ |
|||
if(!this.isClear){ |
|||
this.isClear=true; |
|||
this.done(); |
|||
ctx.moveTo(0, 0); |
|||
ctx.clearRect(0,0, 330, 280); |
|||
ctx.stroke() |
|||
ctx.draw(true); |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
ctx.lineTo(sx, sy); |
|||
ctx.moveTo(sx, sy); |
|||
// ctx.clearRect(sx-10, sy-10, 20, 20) |
|||
ctx.stroke() |
|||
// ctx.globalAlpha = 0; |
|||
|
|||
ctx.draw(true); |
|||
this.getFilledPercentage(); |
|||
|
|||
sx = e.touches[0].x; |
|||
sy = e.touches[0].y; |
|||
}, |
|||
createCtx: function() { |
|||
ctx = uni.createCanvasContext(canvasId); |
|||
this.createRect(); |
|||
|
|||
}, |
|||
createRect: function() { |
|||
ctx.setFillStyle('#646464'); |
|||
|
|||
ctx.fillStyle = '#999';//刮刮乐图层的填充色 |
|||
ctx.lineCap = "round";//绘制的线结束时为圆形 |
|||
ctx.lineJoin = "round";//当两条线交汇时创建圆形边角 |
|||
ctx.lineWidth = 40;//单次刮开面积 |
|||
|
|||
ctx.fillRect(0, 0, 330, 280); |
|||
// ctx.closePath(); |
|||
ctx.globalCompositeOperation = 'destination-out'; |
|||
ctx.draw(true) |
|||
}, |
|||
getFilledPercentage: function() { |
|||
var that=this; |
|||
uni.canvasGetImageData({ |
|||
canvasId: canvasId, |
|||
x: (that.w-giftWidth)/2-5, |
|||
y: (that.h-giftHeight)/2-5, |
|||
width: giftWidth, |
|||
height: giftHeight, |
|||
success: function(res) { |
|||
let pixels = res.data; |
|||
let transPixels = []; |
|||
for (let i = 0; i < pixels.length; i += 4) { |
|||
if (pixels[i + 3] < 128) { |
|||
transPixels.push(pixels[i + 3]); |
|||
} |
|||
} |
|||
perNum = (transPixels.length / (pixels.length / 4) * 100).toFixed(2); |
|||
if(perNum>=40){ |
|||
console.log("finish"); |
|||
that.finish();; |
|||
} |
|||
console.log(perNum) |
|||
} |
|||
}); |
|||
|
|||
} |
|||
}, |
|||
onReady(e) { |
|||
this.createCtx(); |
|||
this.giftWidth(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.prizePage{ |
|||
width: 750rpx; |
|||
height: 1506rpx; |
|||
background: url("../../static/home/prize-bg.png") no-repeat; |
|||
background-size: contain; |
|||
} |
|||
.gift { |
|||
width: 330px; |
|||
height: 280px; |
|||
background-color: #FFF1B9; |
|||
position: absolute; |
|||
left: 50%; |
|||
// top: 50%; |
|||
margin-left: -165px; |
|||
// margin-top: 174px; |
|||
} |
|||
.mask{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
} |
|||
.winPrize{ |
|||
width: 375px; |
|||
height: 575px; |
|||
background-image: url("../../static/home/prize.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
line-height: 550px; |
|||
color: #FFF1B9; |
|||
font-weight: bold; |
|||
font-size: 60px; |
|||
animation: showPrize 1s ease-in-out; |
|||
|
|||
.close{ |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url("../../static/home/close.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 4; |
|||
} |
|||
} |
|||
@keyframes showPrize { |
|||
0%{ |
|||
transform: translate(-50%, -50%) scale(0.4); |
|||
} |
|||
100%{ |
|||
transform: translate(-50%, -50%) scale(1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,411 @@ |
|||
<template> |
|||
<view class="prizePage" :style="{'background-image':`url('${ticketInfo.bgImg}')`}"> |
|||
<view class="ticketInfoPrice">面值{{ticketInfo.price}}元</view> |
|||
<view class="ticketInfoPrice2">面值{{ticketInfo.price}}元</view> |
|||
<view class="scratch"> |
|||
<view class="box"> |
|||
<!-- 刮奖结果图片 --> |
|||
<!-- <image src="../../static/home/logo.png" class="img" :class="toDraw?'zIndex1':''" v-if="showResult||1"></image> --> |
|||
<view class="img" :class="toDraw?'zIndex1':''"> |
|||
<view v-for="(item,index) in dataList" :key="index" class="data_item"> |
|||
<image :src="item.image" mode=""></image> |
|||
<view class="">￥{{item.amount}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 刮奖canvas容器 --> |
|||
<canvas |
|||
class="canvas-box" |
|||
canvas-id="guagua" |
|||
:disable-scroll="true" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
></canvas> |
|||
<!-- 刮奖前提示消息，开始刮奖后隐藏 --> |
|||
<cover-view class="tip" v-if="!toDraw"> |
|||
<!-- 开始刮奖按钮 --> |
|||
<cover-view class="btn" @tap="scratchStart()"> |
|||
<cover-view class="text">立即刮奖</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
</view> |
|||
<view class="mask" v-if="isWin || isThank"> |
|||
|
|||
</view> |
|||
<view class="winPrize" v-if="isWin"> |
|||
{{awards_amount}}元 |
|||
<view class="close" @click="isWin = false"></view> |
|||
</view> |
|||
<view class="noPrize" v-if="isThank"> |
|||
<view class="thank">谢谢惠顾</view> |
|||
<view class="thank2">再接再厉</view> |
|||
<view class="again" @click="again">再刮一次</view> |
|||
<view class="close" @click="isThank = false"></view> |
|||
</view> |
|||
</view> |
|||
<view class="ticketInfoCon">{{ticketInfo.content}}</view> |
|||
<view class="ticketInfoCon2">{{ticketInfo.content}}</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import API from '@/common/js/api.js' |
|||
import Scratch from './scratch.js' |
|||
export default { |
|||
data () { |
|||
return { |
|||
id: '', |
|||
ticketInfo: { |
|||
// bgImg: '../../static/home/prize-bg.png', |
|||
bgImg: '', |
|||
price: '20', |
|||
content: `刮开覆盖膜，如果出现背书标志“1倍”、“2倍”、“5倍”、“10倍”、“20倍”、 |
|||
“50倍”、“100倍”，既中得该标志下方所示的金额乘以该倍数； |
|||
如果在“全中”区出现标志“赢”，即中图刮开区内所示的20个金额之和。` |
|||
}, |
|||
awards_amount: '20', |
|||
dataList: [ |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'}, |
|||
{image: '',amount:'100.00'} |
|||
], |
|||
toDraw: false, // 是否开始刮奖 |
|||
showResult: false, // 是否显示抽奖结果 |
|||
isWin: false, // 是否中奖 |
|||
scratchWidth: 330, // 绘制刮奖范围宽 |
|||
scratchHeight: 280, // 绘制刮奖范围高 |
|||
scratchSize: 10, // 触手大小 |
|||
scratchScale: 0.6, // 需刮开百分比 |
|||
prize_img: '', // 中奖图片 |
|||
isScratching: false, // 是否正在刮奖, |
|||
isThank: false, |
|||
// show: false, |
|||
guaCanvas: null, |
|||
isShow: false |
|||
} |
|||
}, |
|||
updated() { |
|||
// console.log(this.show); |
|||
}, |
|||
watch: { |
|||
isShow(n){ |
|||
this.showResult = true; |
|||
this.doPrizeScratchTicketFun(); |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
uni.setNavigationBarTitle({ |
|||
title: e.type, |
|||
// +'元专区' |
|||
}) |
|||
this.id = e.id; |
|||
|
|||
API.request('/zone/beginInitInfo', {zone_goods_id: this.id}, res=>{ |
|||
this.ticketInfo = res.data.data; |
|||
}) |
|||
|
|||
let timer = setInterval(()=>{ |
|||
if(this.guaCanvas && this.guaCanvas.show){ |
|||
this.isShow = true; |
|||
clearInterval(timer); |
|||
} |
|||
}, 500) |
|||
}, |
|||
methods: { |
|||
initCanvas () { |
|||
// 刮奖初始化信息必须在onReady后，不然h5不支持（小程序可在onLoad执行） |
|||
this.guaCanvas = new Scratch(this, { |
|||
canvasId: 'guagua', |
|||
width: this.scratchWidth, |
|||
height: this.scratchHeight, |
|||
size: this.scratchSize, |
|||
scale: this.scratchScale |
|||
}) |
|||
|
|||
}, |
|||
// 开始刮奖获取信息 |
|||
beginLottery(){ |
|||
API.beginLottery({zone_goods_id: this.id}, res=>{ |
|||
this.dataList = res.data.list; |
|||
}) |
|||
}, |
|||
// 请求刮奖结果 |
|||
doPrizeScratchTicketFun () { |
|||
// this.isWin = true; |
|||
// this.isThank = true; |
|||
API.endLottery({c_r_id: this.id}, res=>{ |
|||
this.awards_amount = res.data.awards_amount; |
|||
this.isWin = true; |
|||
}, fail=>{ |
|||
this.isWin = false |
|||
this.isThank = true; |
|||
// this.isScratching = false |
|||
}) |
|||
}, |
|||
// 点击按钮开始刮奖 |
|||
scratchStart () { |
|||
this.toDraw = true |
|||
this.initCanvas() |
|||
this.beginLottery() |
|||
}, |
|||
// 再刮一次 |
|||
again(){ |
|||
this.isThank = false; |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.prizePage{ |
|||
width: 750rpx; |
|||
min-height: 100vh; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
background-color: #8c8c8c; |
|||
|
|||
.ticketInfoPrice{ |
|||
position: fixed;top: 60px;right: 20px;z-index: 3; |
|||
color: #fff; |
|||
font-size: 30px; |
|||
} |
|||
.ticketInfoPrice2{ |
|||
position: fixed;top: 64px;right: 16px;z-index: 2; |
|||
color: #000; |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
} |
|||
.ticketInfoCon{ |
|||
position: fixed;top: 150px;left:10vw; |
|||
width: 80vw;text-align: justify; |
|||
color: #fff; |
|||
z-index: 3; |
|||
} |
|||
.ticketInfoCon2{ |
|||
position: fixed; |
|||
top: 152px; |
|||
left:calc(10vw + 2px); |
|||
width: 80vw;text-align: justify; |
|||
font-weight: bold; |
|||
color: #000; |
|||
z-index: 2; |
|||
} |
|||
} |
|||
.scratch { |
|||
position: relative; |
|||
padding-top: 380px; |
|||
width: 330px; |
|||
height: 280px; |
|||
margin: 0px auto; |
|||
.box { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: transparent; |
|||
// border-radius: 20rpx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.img { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: -1; |
|||
background-color: #DCDEDD; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-content: space-around; |
|||
|
|||
&.zIndex1{ |
|||
z-index: 1; |
|||
} |
|||
.data_item{ |
|||
width: 25%; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
|
|||
image{ |
|||
width: 80rpx; |
|||
height: 60rpx; |
|||
background-color: #000; |
|||
} |
|||
} |
|||
} |
|||
.canvas-box { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100.5%; |
|||
height: 100%; |
|||
// border-radius: 20rpx; |
|||
overflow: hidden; |
|||
z-index: 2; |
|||
} |
|||
.tip { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 999; |
|||
text-align: center; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
color: #444; |
|||
margin-top: 69rpx; |
|||
.text-tip { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.light { |
|||
// color: $red; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 6rpx !important; |
|||
} |
|||
} |
|||
.btn { |
|||
width: 400rpx; |
|||
height: 88rpx; |
|||
border: none; |
|||
border-radius: 20rpx; |
|||
margin: 245rpx auto 0; |
|||
position: relative; |
|||
background: #E33838; |
|||
.text { |
|||
display: inline; |
|||
position: absolute; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
margin: 0; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 1; |
|||
} |
|||
} |
|||
} |
|||
.award-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20rpx; |
|||
text-align: center; |
|||
line-height: 270rpx; |
|||
background: #FFF1B9; |
|||
.text { |
|||
font-size: 40rpx; |
|||
font-weight: bold; |
|||
color: #444; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mask{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
} |
|||
.winPrize{ |
|||
width: 375px; |
|||
height: 575px; |
|||
background-image: url("../../static/home/prize.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
line-height: 550px; |
|||
color: #FFF1B9; |
|||
font-weight: bold; |
|||
font-size: 60px; |
|||
animation: showPrize 1s ease-in-out; |
|||
|
|||
.close{ |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url("../../static/home/close.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 4; |
|||
} |
|||
} |
|||
.noPrize{ |
|||
width: 550rpx; |
|||
height: 370rpx; |
|||
background-image: url("../../static/home/noPrize.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
transform: translate(-50%, -50%); |
|||
animation: showPrize 1s ease-in-out; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
|
|||
.thank{ |
|||
width: 100%; |
|||
color: #fff; |
|||
position: absolute; |
|||
top: 20rpx; |
|||
} |
|||
.thank2{ |
|||
line-height: 150px; |
|||
color: #DB4542; |
|||
font-weight: bold; |
|||
font-size: 30px; |
|||
} |
|||
.again{ |
|||
width: 240rpx; |
|||
height: 66rpx; |
|||
line-height: 66rpx; |
|||
border-radius: 20px; |
|||
position: absolute; |
|||
left: 155rpx; |
|||
top: 256rpx; |
|||
color: #F05859; |
|||
background-color: #FFE1AE; |
|||
} |
|||
.close{ |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url("../../static/home/close.png"); |
|||
background-size: contain; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 230px; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 4; |
|||
} |
|||
} |
|||
@keyframes showPrize { |
|||
0%{ |
|||
transform: translate(-50%, -50%) scale(0.4); |
|||
} |
|||
100%{ |
|||
transform: translate(-50%, -50%) scale(1); |
|||
} |
|||
} |
|||
</style> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 443 B |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 352 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 795 B |
|
After Width: | Height: | Size: 709 B |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 717 B |
|
After Width: | Height: | Size: 471 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 392 B |
|
After Width: | Height: | Size: 632 B |
|
After Width: | Height: | Size: 694 B |
|
After Width: | Height: | Size: 985 B |
|
After Width: | Height: | Size: 585 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 704 B |
|
After Width: | Height: | Size: 715 B |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 414 B |
|
After Width: | Height: | Size: 718 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1020 B |
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 640 B |
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 692 B |
|
After Width: | Height: | Size: 968 B |
|
After Width: | Height: | Size: 1000 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 466 B |
|
After Width: | Height: | Size: 279 B |
|
After Width: | Height: | Size: 973 B |
|
After Width: | Height: | Size: 774 B |
Loading…
Reference in new issue