flyx/pages/user/index.vue
2024-12-07 12:57:43 +08:00

1693 lines
35 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="mine">
<uni-nav-bar left-text="我的" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true"
:fixed="false"></uni-nav-bar>
<view class="user-card">
<view class="user-info" @click="$c.to({ url: '/pages/user/change' })">
<view class="avatar">
<image :src="userinfo.headimg" mode="scaleToFill" />
</view>
<view class="info">
<view v-if="userinfo.nickname" class="nick hang1">
{{ userinfo.nickname }}
</view>
<view v-else class="nick">未登录</view>
<view v-if="userinfo" class="user-day">
吧唧一番赏已经陪你走过了{{ userinfo.day }}天
</view>
</view>
</view>
<view v-if="userinfo" class="lv-box align-center justify-between">
<text class="lv-box-dengji">LV.{{userinfo.quan_yi_level.level}}</text>
<view class="lv-box-ouqi column">
<text>
<template v-if="userinfo.quan_yi_level.cha > 0">还差{{userinfo.quan_yi_level.cha}}欧气值升级</template>
<template v-if="userinfo.quan_yi_level.cha == -1">已满级</template>
</text>
<view class="mt10 relative">
<text class="lv-box-num">{{userinfo.quan_yi_level.jindu+'%'}}</text>
<cmd-progress :percent="userinfo.quan_yi_level.jindu" :show-info="false"
stroke-color="#4BCAFF" :strokeWidth="12"></cmd-progress>
</view>
</view>
<text class="lv-box-detail" @click="$c.to({ url: '/package/mine/equity' })">查看详情</text>
</view>
<view class="rbtn flex" @click="$c.to({ url: '/pages/user/vip' })">
<image class="img100" :src="$img1('my/huiyuan.png')"></image>
</view>
<view class="rbtn btn1 flex" @click="$c.to({ url: '/package/index/sign' })">
<image class="img100" :src="$img1('my/sign.png')"></image>
</view>
<!-- <view class="rbtn btn1 flex">
<button class="hide" open-type="contact"></button>
<image class="img100" :src="$img1('my/kefu.png')"></image>
</view> -->
</view>
<view class="">
</view>
<view class="money-card">
<view class="other-num">
<view class="other-item" @click="$c.to({ url: '/pages/user/bi_jl' })">
<view class="title">吧唧币</view>
<view class="num" style="color: #ff873a;">{{ userinfo.integral || 0 }}</view>
</view>
<view class="other-item" @click="$c.to({ url: '/pages/user/jf_jl' })">
<view class="title">积分</view>
<view class="num" style="color: #479EE3;">{{ userinfo.score || 0 }}</view>
</view>
<view class="other-item" @click="$c.to({ url: '/pages/user/my_coupon' })">
<view class="title">欧气券</view>
<view class="num">{{ userinfo.coupon || 0 }}</view>
</view>
</view>
<view class="moneyTitle mt30">我的星钻</view>
<view class="money mt20 align-center justify-between br20">
<view class="align-center">
<image :src="$img1('my/yue.png')"></image>
<text>¥</text>
<text>{{ userinfo.money || '0.00' }}</text>
</view>
<view class="money-detail" @click="$c.to({ url: '/pages/user/yetx' })">
<text>查看明细</text>
<uni-icons type="right" color="#FFFFFF"></uni-icons>
</view>
</view>
</view>
<view v-if="taskList.length > 0" class="task">
<view class="task-title">主要任务</view>
<view class="task-list">
<view class="task-item" v-for="(item, i) in taskList" :key="i">
<view class="task-l">
<view class="title">{{ item.title }}</view>
<view class="num">欧气值+{{ item.z_number }}</view>
<view class="progress">
<view class="progress-inner">
<cmd-progress :percent="item.percentage" :show-info="false"
stroke-color="linear-gradient(90deg, #7836FF 0%, #A465F2 100%)"
:strokeWidth="8"></cmd-progress>
</view>
{{ item.ywc_count }}/{{ item.number }}
</view>
</view>
<view class="task-r">
<view v-if="item.is_complete == 0" class="btn"
@click="$c.to({ type: 3, url: '/pages/shouye/index' })">
<text>去完成</text>
</view>
<view v-if="item.is_complete == 1" class="btn act" @click="completeTask(item)">
<text>待领取</text>
</view>
<view v-if="item.is_complete == 2" class="btn dis">
<text>已领取</text>
</view>
</view>
</view>
</view>
</view>
<view class="qita mt30">
<view class="qita-title">其他服务</view>
<view class="menu-card">
<template v-for="(item, i) in menuList">
<view v-if="item.show" class="menu-item" :key="i" @click="menuTo(item)">
<view class="icon">
<image :src="$img1(item.icon)" mode=""></image>
</view>
<view class="title">
{{ item.title }}
</view>
</view>
</template>
<view class="menu-item relative" :key="-1">
<view class="icon">
<image :src="$img1('my/s9.png')" mode=""></image>
</view>
<view class="title">
客服
</view>
<button class="hide" open-type="contact"></button>
</view>
</view>
</view>
<!-- #ifdef MP -->
<!-- <view class="copyright"></view> -->
<!-- #endif -->
<!-- 群聊弹窗 -->
<uni-popup ref="qunliao_show" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
<view class="pop">
<view class="flex">
<image class="img100" :src="ewm" :show-menu-by-longpress="true" mode="aspectFit"></image>
</view>
<view class="pop-view column">
<text class="ziti">添加客服领优惠</text>
<text>识别图中二维码</text>
</view>
<image class="pop-liwu" :src="$img1('index/liwu.png')"></image>
<view @click="$refs.qunliao_show.close()" class="pop-close flex">
<image :src="$img1('common/close.png')" class="img100" />
</view>
</view>
</uni-popup>
<!-- 星钻充值弹窗 -->
<uni-popup ref="chongzhi_show" type="bottom">
<view class="order animated fadeInUp">
<view class="order_title">
<view class="title">星钻充值</view>
<view class="ca" @click="$refs.chongzhi_show.close()">
<image :src="$img('/static/icon/close1.png')"
style="width: 30rpx; height: 30rpx; margin-top: 14rpx"></image>
</view>
</view>
<view class="pop_coucent">
<view>选择充值金额</view>
<view class="pop_box">
<view class="common_bg" @click="money_1 = v" v-for="(v, i) in moneyArr" :key="i" :style="{
'background-image': `url(${$img(
money_1 == v
? '/static/img/mine_chong_tab_bg_act.png'
: '/static/img/mine_chong_tab_bg.png'
)})`
}">
<text style="font-size: 32rpx">{{ v }}</text>
</view>
</view>
</view>
<view class="pop_coucent">
<view>输入充值金额</view>
<input type="text" placeholder="请输入金额最低1元" v-model="money_1" placeholder-style="color:#999999" />
</view>
<view class="chong-bt">
<view class="money">需支付:{{ money_1 || 0 }}元</view>
<view @click="chongzhi_click" class="pay-btn common_bg" :style="{
'background-image': `url(${$img('/static/img/mine_qrcz.png')})`
}"></view>
</view>
<!-- <view
class="pop_chongzhi"
@click="chongzhi_click"
:style="
'background: url(' +
z_imgPath +
'mine/allBtn_bg.png' +
') no-repeat 0 0 / 100% 100%;'
"
>
确认充值
</view> -->
</view>
</uni-popup>
<!-- 星钻提现 -->
<view class="mengban animated fadeIn" v-if="tixian_show">
<view class="order animated fadeInUp">
<view class="order_title">
<image :src="z_imgPath + 'mine/tx_tips.png'" style="width: 162rpx; height: 47rpx"></image>
<view class="ca" @click="tixian_show = false">
<image :src="z_imgPath + 'mine/qu_close.png?11'"
style="width: 48rpx; height: 48rpx; margin-top: 14rpx"></image>
</view>
</view>
<view class="pop_head">
<view @click="tixian_index = 1">
<text :class="tixian_index == 1 ? 'xzs' : 'wzs'">微信零钱</text>
<view class="qiehuan_line" v-if="tixian_index == 1"></view>
</view>
<view @click="tixian_index = 2">
<text :class="tixian_index == 2 ? 'xzs' : 'wzs'">支付宝</text>
<view class="qiehuan_line" v-if="tixian_index == 2">
<!-- <image src="../../static/shouye/top.png"></image> -->
</view>
</view>
</view>
<view class="pop_coucent" v-if="tixian_index == 1">
<view>输入提现金额</view>
<view class="flex_center pop_tixian_input">
<input type="number" placeholder="¥请输入金额最低1元" placeholder-style="font-size:24rpx"
:value="money_2" @input="getmoney_2" />
<view style="color: #1ff7f0" @click="money_2 = userinfo.money">
全部提现
</view>
</view>
<view class="flex_center" style="justify-content: space-between">
<view>到账账户</view>
<view style="color: #999999">微信零钱</view>
</view>
</view>
<view class="pop_coucent" style="padding: 0 30rpx" v-if="tixian_index == 2">
<view class="flex_center name_phone">
<view>姓名</view>
<input type="text" placeholder="请输入姓名" @input="getname" />
</view>
<view class="flex_center name_phone">
<view>账户</view>
<input type="text" placeholder="请输入支付宝账号" @input="getnumber" />
</view>
<view style="margin-top: 30rpx">输入提现金额</view>
<view class="flex_center pop_tixian_input" style="border: none">
<input type="number" placeholder="¥请输入金额最低1元" placeholder-style="font-size:24rpx"
:value="money_2" @input="getmoney_2" />
<view style="color: #1ff7f0" @click="money_2 = userinfo.money">
全部提现
</view>
</view>
</view>
<view class="pop_chongzhi" @click="tixian_click" :style="
'background: url(' +
z_imgPath +
'mine/allBtn_bg.png' +
') no-repeat 0 0 / 100% 100%;'
">
确认提现
</view>
<!-- <image :src="z_imgPath+'mine/qrtx.png'" class="pop_chongzhi" @click="tixian_click()"></image> -->
</view>
</view>
<!-- <tab-bar :index="4"></tab-bar> -->
</view>
</template>
<script>
export default {
components: {},
data() {
return {
z_imgPath: this.$z_img2,
userinfo: '',
moneyArr: [100, 200, 500, 1000, 3000],
menuList: [{
id: 1,
show: true,
title: '消费记录',
icon: 'my/s1.png',
path: '/pages/user/xfjl'
},
{
id: 2,
show: true,
title: '兑换记录',
icon: 'my/s2.png',
path: '/pages/user/hsjl'
},
{
id: 3,
show: true,
title: '我的收藏',
icon: 'my/s3.png',
path: '/package/mine/collect'
},
{
id: 4,
show: true,
title: '优惠券',
icon: 'my/s4.png',
path: '/pages/user/coupon'
},
{
id: 5,
show: true,
title: '邀请好友',
icon: 'my/s5.png',
path: '/pages/user/tui-guang'
},
{
id: 6,
show: true,
title: '加入福利群',
icon: 'my/s6.png',
path: ''
},
{
id: 7,
show: true,
title: '用户协议',
icon: 'my/s7.png',
path: '/pages/guize/guize?type=4'
},
{
id: 8,
show: true,
title: '道具卡',
icon: 'my/s8.png',
path: '/package/mine/skill-card'
},
// {
// id: 9,
// show:true,
// title: '挂售记录',
// icon: '/static/img/2_gsjl.png',
// path: ''
// },
// {
// id: 10,
// show:true,
// title: '晋升排行榜',
// icon: '/static/img/2_jsphb.png',
// path: '/pages/shouye/bangdan'
// },
],
// 星钻充值金额
money_1: '',
// 二维码
ewm: '',
// 1:微信提现 2:支付宝提现
tixian_index: 1,
// 星钻提现金额
money_2: '',
// 提现姓名
name: '',
// 提现账户
number: '',
// 收藏数组
mycollectArr: [],
list: [{
// img: 'mine/img01.png?1',
// sel: 'mine/sel01.png?1',
name: '一番赏收藏'
},
{
// img: 'mine/img02.png?1',
// sel: 'mine/sel02.png?1'
name: '无限池收藏'
}
],
show: 1,
tixian_show: false,
taskList: []
}
},
onLoad(e) {
if (e.ou_coupon_id) {
uni.setStorageSync('_ou_coupon_id', e.ou_coupon_id)
}
if (e.pid) {
uni.setStorageSync('pid', e.pid)
}
},
onHide() {
uni.setStorageSync('page', this.$mp.page.route)
},
onShareAppMessage() {
return {
title: "吧唧一番,正版潮玩手办一番赏",
// imageUrl: '',
path: '/pages/user/index?pid=' + uni.getStorageSync('userinfo').ID
}
},
onShow() {
this.getdata()
// this.getmycollect()
let that = this
const curPages = getCurrentPages()[0]; // 获取当前页面实例
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 4
});
}
},
methods: {
receiveCoupon() {
const coupon_id = uni.getStorageSync('_ou_coupon_id')
this.req({
url: 'coupon_ling',
data: {
coupon_id
},
success: res => {
uni.removeStorageSync('_ou_coupon_id')
if (res.status == 1) {
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.$c.to({
url: '/package/mine/coupon-detail',
query: {
id: coupon_id
}
})
}
})
} else if (res.status == 2222) {
this.$c.to({
url: '/package/mine/coupon-detail',
query: {
id: coupon_id
}
})
}
}
})
},
completeTask(item) {
this.req({
url: 'ling_task',
data: {
task_list_id: item.id
},
success: res => {
if (res.status == 1) {
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.getdata()
}
})
}
}
})
},
menuTo(item) {
switch (item.id) {
case 6:
this.$refs.qunliao_show.open()
break
default:
this.$c.to({
url: item.path
})
break
}
},
copy(e) {
uni.setClipboardData({
data: `${e}`,
success: result => {},
fail: error => {}
})
},
tokefu() {
// #ifdef MP-WEIXIN
wx.openCustomerServiceChat({
extInfo: {
url: uni.getStorageSync('wx_link') //客服地址链接
},
corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
success(res) {
console.log(res, 1)
},
fail(res) {
console.log(res, 2)
}
})
// #endif
},
getPhoneNumber(e) {
// console.log(e)
let that = this
uni.login({
success(res) {
// console.log(res)
uni.checkSession({
success() {
that.req({
url: 'login_bind_mobile',
data: {
code: e.detail.code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
},
success(res) {
if (res.status == 1) {
uni.showToast({
title: '绑定成功~',
success() {
that.getdata()
}
})
}
}
})
}
})
}
})
},
getlist(index) {
this.show = index
this.mycollectArr = []
this.getmycollect()
},
todetail(a) {
if (a.type == 2) {
uni.navigateTo({
url: '/pages/shouye/detail_wuxian?goods_id=' + a.goods_id
})
} else {
uni.navigateTo({
url: '/pages/shouye/detail?goods_id=' +
a.goods_id +
'&goods_num=' +
a.num
})
}
},
del_soucang(a) {
let that = this
that.req({
url: 'delCollect',
data: {
id: a
},
success(res) {
if (res.status == 1) {
that.getmycollect()
}
}
})
},
chongzhi_click() {
let that = this
that.req({
url: 'recharge',
data: {
money: that.money_1
},
success(res) {
if (res.status == 1) {
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: 'MD5',
paySign: res.data.paySign,
complete(res) {
if (res.errMsg == 'requestPayment:fail cancel') {
uni.showToast({
title: '取消支付',
icon: 'loading',
duration: 1000
})
}
if (res.errMsg == 'requestPayment:ok') {
that.$refs.chongzhi_show.close()
that.getdata()
}
}
})
}
}
})
},
getdata() {
let that = this
that.req({
url: 'user',
success(res) {
if (res.status == 1) {
that.ewm = res.data.other.erweima
that.moneyArr = res.data.other.recharge
that.userinfo = res.data.userinfo
that.taskList = res.data.task_list
uni.setStorageSync('userinfo', that.userinfo)
uni.setStorageSync('jump_appid', res.data.other.jump_appid)
uni.setStorageSync('wx_link', res.data.other.wx_link)
uni.setStorageSync('corpid', res.data.other.corpid)
console.log(res.data.userinfo.js_is_open)
if (
uni.getStorageSync('_ou_coupon_id') &&
uni.getStorageSync('token')
) {
setTimeout(() => {
that.receiveCoupon()
}, 100)
}
that.menuList.map(item => {
/* 判断集市是否展示 */
if (
item.id == 11 &&
res.data.userinfo.js_is_open == 1 &&
res.data.userinfo.is_show_js == 1
) {
item.show = true
}else{
if(item.id == 11){
item.show = false
}
}
})
}
}
})
},
getmycollect() {
let that = this
that.req({
url: 'listCollect',
Loading: true,
data: {
type: that.show
},
success(res) {
if (res.status == 1) {
that.mycollectArr = res.data.data
}
}
})
},
tixian_click() {
let that = this
console.log(that.money_2)
that.req({
url: 'withdraw',
data: {
type: that.tixian_index,
money: that.money_2,
name: that.name,
number: that.number
},
success(res) {
that.money_2 = ''
if (res.status == 0) {
that.tixian_show = false
}
}
})
}
}
}
</script>
<style lang="scss">
.pop_title {
font-size: 48rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #ffffff;
text-align: center;
margin-bottom: 30rpx;
}
.mineInfo {
width: 720rpx;
/* height: 323rpx; */
/* background: url(https://xiongmaomh.languoyun.cn/newindex/mineTop.png) no-repeat; */
background-size: 100% 100%;
box-sizing: border-box;
margin: 0 auto;
box-sizing: border-box;
padding: 35rpx 36rpx 0;
}
page {
/* background: #000000; */
}
.selTitle {
font-size: 36rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #ffffff;
text-shadow: 0px 3px 8px rgba(48, 251, 253, 0.32);
}
.noTitle {
font-size: 36rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #666666;
}
.qiehuan {
display: flex;
justify-content: space-between;
align-items: center;
width: 750rpx;
}
.qiehuan_line {
margin: -10rpx auto;
width: 30rpx;
height: 20rpx;
border-bottom: 4rpx solid #1ff7f0;
border-radius: 4rpx;
}
.qiehuan image {
width: 169rpx;
height: 38rpx;
}
.qiehuan>view {
flex: 1;
text-align: center;
}
.wzs {
font-size: 28rpx;
color: rgb(255, 255, 255);
}
.xzs {
font-size: 32rpx;
color: #ffffff;
text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7);
}
button::after {
border: none;
}
button {
background-color: transparent;
padding-left: 0;
padding-right: 0;
line-height: inherit;
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 54rpx;
height: 54rpx;
}
.name_phone>input {
font-size: 28rpx;
margin-left: 40rpx;
}
.name_phone {
padding: 20rpx 0;
box-sizing: border-box;
border-bottom: 1px solid #eeeeee;
}
.pop_tixian_input {
margin: 20rpx 0;
padding-bottom: 20rpx;
display: flex;
justify-content: space-between;
font-size: 24rpx;
border-bottom: 1px solid #eeeeee;
}
.pop_head>view {
flex: 1;
text-align: center;
font-size: 28rpx;
margin-top: 20rpx;
}
.pop_head {
display: flex;
justify-content: space-between;
}
.pop_box>view {
width: 180rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30rpx;
margin-right: 35rpx;
font-size: 28rpx;
font-family: zihun152hao-jijiachaojihei;
font-weight: 400;
color: #ffffff;
}
.pop_box>view:nth-child(3n + 3) {
margin-right: 0;
}
.pop_box {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.pop_coucent>input {
width: 630rpx;
height: 88rpx;
background: #222222;
border: none;
border-radius: 10rpx;
padding-left: 40rpx;
font-size: 24rpx;
box-sizing: border-box;
margin-top: 30rpx;
}
.pop_coucent {
width: 690rpx;
// border: 1rpx solid #fff;
// box-shadow: 0px 0px 10rpx 0px #1ff7f0;
padding: 30rpx;
background: rgba(34, 34, 34, 0.5);
box-sizing: border-box;
margin-top: 20rpx;
font-size: 28rpx;
color: #ffffff;
}
.pop_chongzhi {
width: 692rpx;
height: 88rpx;
margin: 48rpx auto 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #ffffff;
}
.ca {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.order_title {
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
color: #ffffff;
position: relative;
font-weight: normal;
padding: 10rpx 0;
.title {
text-align: center;
font-size: 36rpx;
font-family: zihun152hao-jijiachaojihei;
font-weight: 400;
color: #ffffff;
}
}
.order {
width: 750rpx;
background: #0d0d0d;
border-radius: 30rpx 30rpx 0px 0px;
padding: 10rpx 30rpx 48rpx;
box-sizing: border-box;
position: absolute;
bottom: var(--window-bottom);
border-top: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #000, #000),
linear-gradient(20deg, #ffffff, #a11aff, #85dfff, #ba39ff);
.chong-bt {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 0 0;
.money {
font-size: 28rpx;
font-family: zihun152hao-jijiachaojihei;
font-weight: 400;
color: #ffffff;
}
.pay-btn {
width: 206rpx;
height: 84rpx;
}
}
}
.pop {
width: 506rpx;
height: 380px;
position: relative;
background: #B198E2;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137,77,211,0.33);
border-radius: 44rpx;
>view:nth-child(1){
padding-top: 40rpx;
>image{
width: 430rpx;
height: 430rpx;
margin: 0 auto 0;
background: #FFFFFF;
}
}
&-view{
position: absolute;
left: 0;
bottom: 0;
width: 506rpx;
height: 276rpx;
box-sizing: border-box;
padding: 68rpx 0 0 40rpx;
background: url($imgurl+'index/hudu.png') no-repeat 0 0 / 100% 100%;
>text:nth-child(1){
font-weight: 400;
font-size: 52rpx;
color: #894DD3;
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
}
>text:nth-child(2){
font-weight: 400;
font-size: 24rpx;
color: #894DD3;
margin-top: 10rpx;
}
}
&-liwu{
position: absolute;
right: -160rpx;
width: 380rpx;
height: 260rpx;
bottom: -60rpx;
z-index: 10;
}
&-close{
width: 94rpx;
height: 94rpx;
position: absolute;
bottom: -140rpx;
left: 50%;
transform: translateX(-50%);
opacity: 0.6;
}
}
.mengban {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.45);
display: flex;
justify-content: center;
align-items: center;
}
.p_t_r {
position: absolute;
top: -20rpx;
right: -10rpx;
width: 32rpx !important;
height: 32rpx !important;
}
.shop_item>image {
width: 216rpx;
height: 216rpx;
border-radius: 8rpx 8rpx 0 0;
margin: 13rpx auto;
display: block;
}
.shop_text>.hang1 {
margin-bottom: 10rpx;
}
.shop_text {
padding: 2rpx 23rpx;
box-sizing: border-box;
}
.shop_item {
width: 242rpx;
height: 343rpx;
/* border-radius: 10rpx; */
margin-top: 10rpx;
position: relative;
color: #ffffff;
font-size: 24rpx;
}
.shop_coucent>view:nth-child(3n-1) {
margin: 10rpx 0rpx 0;
}
.shop_coucent {
display: flex;
flex-wrap: wrap;
font-size: 24rpx;
}
.sc_title {
width: 686rpx;
height: 22rpx;
margin: 0 auto;
}
.tuijian {
width: 750rpx;
padding: 0 13rpx 100rpx 13rpx;
box-sizing: border-box;
margin: 30rpx auto;
/* background-color: #222; */
}
.list>view>view>image {
margin-right: 20rpx;
}
.list image {
width: 12rpx;
height: 22rpx;
}
.list>view>view>image:nth-of-type(1) {
width: 32rpx;
height: 32rpx;
}
.list>view>view {
display: flex;
align-items: center;
}
.list>view {
display: flex;
justify-content: space-between;
align-items: center;
/* border-bottom: 1px solid #EEEEEE; */
padding: 24rpx 0;
}
.list {
width: 710rpx;
/* height: 700rpx; */
margin: 0 auto;
padding: 0rpx 20rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #ffffff;
/* background: linear-gradient(135deg, transparent 10px, #F07D17 0); */
/* background: url(https://hdyfs.languowangluo.cn/zcq/mine/cz_bg.png) no-repeat; */
/* background-size: 100% 100%; */
}
.hegui image {
width: 32rpx;
height: 32rpx;
margin-right: 20rpx;
}
.hegui>image {
width: 40rpx;
height: 40rpx;
margin: 0;
}
.hegui>view {
display: flex;
align-items: center;
color: #ffffff;
font-size: 28rpx;
}
.hegui {
display: flex;
align-items: center;
justify-content: space-between;
width: 690rpx;
height: 99rpx;
background: rgba(15, 31, 67, 0.43);
border: 1px solid;
border-image: linear-gradient(269deg, #1ed3f9, #a31f9e, #2ad3f3, #c41fc1) 1 1;
border-radius: 10rpx;
margin: 30rpx auto;
padding: 0 20rpx;
box-sizing: border-box;
}
.tixian_r>image {
width: 143rpx;
height: 59rpx;
}
.tixian_r {
text-align: right;
}
.tixian_r>view:nth-child(2) {
width: 132rpx;
height: 48rpx;
background: #1ac762;
border-radius: 24rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
margin-top: 20rpx;
}
.tixian_r>view:nth-child(1) {
width: 132rpx;
height: 48rpx;
border: 1px solid #1ac762;
color: #1ac762;
border-radius: 24rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
/* text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7);
font-family: 'zcq'; */
}
.tixian_l image {
width: 12rpx;
height: 22rpx;
margin-left: 10rpx;
}
.tixian_l {
font-size: 28rpx;
font-family: zihun152hao-jijiachaojihei;
font-weight: 400;
color: #ffffff;
}
.tixian {
width: 720rpx;
height: 210rpx;
margin: 30rpx auto 0;
border-radius: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 46rpx;
box-sizing: border-box;
color: #ffffff;
}
.youhui text {
margin-right: 10rpx;
font-size: 32rpx;
/* font-family: 'zcq'; */
}
.youhui>view>view:nth-of-type(2) {
font-size: 24rpx;
margin-top: 28rpx;
}
.youhui>view:nth-of-type(1)::after,
.youhui>view:nth-of-type(2)::after {
content: '';
width: 2rpx;
height: 40rpx;
/* background: #FFFFFF; */
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.youhuiTitle {
font-size: 28rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
}
.youhui>view {
font-size: 24rpx;
text-align: center;
position: relative;
flex: 1;
}
.youhui {
display: flex;
justify-content: space-between;
align-items: center;
/* width: 690rpx; */
height: 193rpx;
margin: 0rpx auto 0;
color: #ffffff;
padding-bottom: 30rpx;
}
.id_z>image {
width: 84rpx;
height: 20rpx;
margin-left: 20rpx;
}
.id_z {
font-size: 24rpx;
margin-top: 10rpx;
color: #999999;
}
.phone_z {
font-size: 32rpx;
/* font-weight: bold; */
}
.headimg {
width: 105rpx;
height: 105rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.jp_headimg>image {
width: 132rpx;
height: 132rpx;
/* border: 1px solid #FE0032; */
border-radius: 50%;
/* clip-path: polygon(50% 10%, 85% 30%, 85% 70%, 50% 92%, 17% 71%, 16% 30%); */
/* polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0) */
}
.jp_headimg {
width: 132rpx;
height: 132rpx;
margin: 25rpx 0 0 12rpx;
}
.head_name {
display: flex;
justify-content: space-between;
position: relative;
/* text-shadow: rgba(150, 255, 254, 0.7) 0px 0px 10rpx; */
}
.header_title {
font-size: 40rpx;
font-family: iFontszhounianti;
font-weight: bold;
font-style: oblique;
color: #ffffff;
}
.header {
width: 100%;
color: #ffffff;
position: relative;
box-sizing: border-box;
padding-top: calc(var(--status-bar-height) + 80rpx);
}
.mine {
width: 750rpx;
position: relative;
padding-bottom: 100px;
min-height: 100vh;
box-sizing: border-box;
background: #1C1B20 url($imgurl+'my/myBg.png') no-repeat 0 0 / 750rpx 500rpx;
.user-card {
position: relative;
padding: 20rpx 30rpx;
.user-info {
display: flex;
align-items: center;
.avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
background: #000;
image {
width: 100%;
height: 100%;
}
}
.info {
width: calc(100% - 100rpx);
box-sizing: border-box;
padding-left: 30rpx;
.nick {
max-width: 200rpx;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.user-day {
margin-top: 10rpx;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #cccccc;
}
}
}
.lv-box {
height: 100rpx;
margin-top: 80rpx;
box-sizing: border-box;
background: url($imgurl+'my/userVip.png') no-repeat 0 0 / 100% 100%;
padding-left: 136rpx;
&-dengji{
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
width: 100rpx;
text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
}
&-ouqi{
>text{
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
}
>view{
width: 280rpx;
// height: 24rpx;
border-radius: 12rpx;
border: 1px solid #111111;
>text{
font-weight: 400;
font-size: 20rpx;
color: #D2DBFF;
position: absolute;
left: 50%;
top: 0;
line-height: 24rpx;
transform: translateX(-50%);
z-index: 10;
}
}
}
&-detail{
width: 140rpx;
text-align: center;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
}
}
.rbtn {
position: absolute;
z-index: 10;
right: 10rpx;
top: 10rpx;
width: 110rpx;
height: 50rpx;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
&.btn1 {
top: 80rpx;
}
}
}
.money-card {
width: 690rpx;
margin: 0 auto 0;
.other-num {
display: flex;
justify-content: space-around;
padding: 40rpx 0 0;
.other-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200rpx;
height: 110rpx;
background: #1C1B20;
border: 4rpx solid #5B5B5D;
border-radius: 20rpx;
.title {
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.num {
margin-top: 10rpx;
font-size: 40rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
}
}
}
.moneyTitle{
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
}
.money {
display: flex;
align-items: flex-end;
padding: 0 10rpx;
font-size: 60rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
height: 120rpx;
background: #313133;
border: 6rpx solid #5B5B5D;
>view:nth-child(1){
>image{
width: 100rpx;
height: 80rpx;
}
>text:nth-of-type(1){
font-weight: 400;
font-size: 40rpx;
color: #F8D300;
}
>text:nth-of-type(2){
font-weight: 500;
font-size: 48rpx;
color: #F8D300;
}
}
.money-detail {
display: flex;
align-items: center;
padding-left: 16rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
}
}
}
.task {
margin: 30rpx auto 0;
width: 690rpx;
box-sizing: border-box;
padding: 0 0 20rpx;
.task-title {
position: relative;
z-index: 1;
margin-bottom: 30rpx;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff
}
.task-list{
background: #313133;
border-radius: 20rpx;
border: 4rpx solid #5B5B5D;
padding: 30rpx;
}
.task-item {
padding: 20rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
.task-l {
.title {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.num {
margin: 20rpx 0;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #cccccc;
}
.progress {
display: flex;
align-items: center;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #cccccc;
.progress-inner {
width: 300rpx;
margin-right: 6rpx;
/deep/.cmd-progress-inner {
background: #5B5B5D;
}
}
}
}
.task-r {
flex: 1;
display: flex;
justify-content: flex-end;
padding-left: 30rpx;
.btn {
width: 150rpx;
height: 60rpx;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ff873a;
text {
font-weight: 400;
font-size: 28rpx;
color: #ff873a;
}
&.act {
background: #ff873a;
text {
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
}
}
&.dis {
background: #1C1B20;
border-radius: 30rpx;
text {
color: #CCCCCC;
}
}
}
}
}
}
.qita{
&-title{
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
padding-left: 40rpx;
}
.menu-card {
margin: 30rpx auto 0;
width: 690rpx;
padding: 1rpx 0 40rpx;
display: flex;
flex-flow: row wrap;
.menu-item {
margin-top: 40rpx;
display: flex;
flex-flow: column nowrap;
align-items: center;
width: 25%;
.icon {
width: 60rpx;
height: 60rpx;
}
.title {
margin-top: 10rpx;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #dddddd;
}
}
}
}
}
.copyright {
padding: 30rpx;
text-align: center;
font-size: 24rpx;
color: #888;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
font-size: 40rpx;
font-family: iFontszhounianti;
font-weight: bold;
font-style: oblique;
color: #ffffff;
margin-bottom: 10rpx;
}
</style>