You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
866 lines
24 KiB
866 lines
24 KiB
<template>
|
|
<view class="container">
|
|
<block v-if="!loading">
|
|
<load-ing></load-ing>
|
|
</block>
|
|
<block v-else>
|
|
<far-bottom></far-bottom>
|
|
<view class="tablist-main dis-flex flex-y-center b-f">
|
|
<view class="tab-item t-c flex-box p-r" :class="curActive===tabItem.type?'col-f4 f-30':'col-9 f-28'" v-for="(tabItem,index) in tablist"
|
|
:key="index" @click="selectTab(tabItem.type)">{{tabItem.title}}({{tabItem.num}})
|
|
<view v-if="curActive===tabItem.type" class="active-tab"></view>
|
|
</view>
|
|
</view>
|
|
<view class="packet-main">
|
|
<view class="unpacket" v-if="curActive==='0' && selectStatus">
|
|
<view class="red-square-main dis-flex flex-x-between flex-y-center b-f m-btm30" @click="navgateto">
|
|
<view class="dis-flex flex-y-center">
|
|
<image :src="imgfixUrls + 'redpacket/redsquare.png'" class="redsquareImage"></image>
|
|
<view class="f-28 col-3">{{languageStatus!=1?'红包广场':'훙보센터'}}</view>
|
|
</view>
|
|
<view class="redsquare-right iconfont icon-right col-c"></view>
|
|
</view>
|
|
<view class="receive-redpacket col-9 f-24 t-c m-btm30" v-if="!!expireSoon && expireSoon>0">您有<text class="col-f4">{{expireSoon}}</text>个红包即将过期</view>
|
|
<view class="unused-packet-main" v-if="!!redPacketList && redPacketList.length>0">
|
|
<view class="unused-packet-list">
|
|
<view v-for="(redPacketItem,index) in redPacketList" :key="index">
|
|
<view class="unused-list-item p-r m-btm20" :style="{'background-image':'url('+imageRoot+'redpacket_bg.png)'}" @click="goindex(redPacketItem.use_where,redPacketItem.link)"
|
|
>
|
|
<view class="unused-list-rad" v-if="redPacketItem.status == 6">
|
|
<view class="flex-box">
|
|
<view class="t-r" style="line-height: 210upx;color: #ffffff;">
|
|
转赠中(不可使用)
|
|
</view>
|
|
</view>
|
|
<view class="flex-box " style="padding-top: 70upx;">
|
|
<view class="closeBtn" @click="closeRed(redPacketItem)">
|
|
取消转赠
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="redPacket-type f-24 col-f">{{redPacketItem.title}}</view>
|
|
<view class="UnredPacket-detail dis-flex flex-dir-column flex-x-center">
|
|
<view class="UnredPacket-price dis-flex flex-y-center">
|
|
<view class="UnredPacket-priceStyle col-f f-50"><text class="f-30">¥</text>{{redPacketItem.cut_money}}</view>
|
|
<view class="f-26 col-f">满{{redPacketItem.full_money}}可用</view>
|
|
</view>
|
|
<view class="UnredPacket-date f-24 col-f">{{redPacketItem.time}}</view>
|
|
<view v-if="redPacketItem.usegoods_type != 0" class="UnredPacket-date f-24 col-f" @click="selectBox1(redPacketItem.id)">{{redPacketItem.use_where}}
|
|
<text
|
|
v-if="redPacketItem.id != selectId" class="iconfont icon-right col-f"></text><text
|
|
v-else-if="redPacketItem.id == selectId" class="iconfont icon-unfold col-f"></text>
|
|
</view>
|
|
<view v-else-if="redPacketItem.usegoods_type == 0" class="UnredPacket-date f-24 col-f">{{redPacketItem.use_where}}</view>
|
|
<view class="makeBtn" @click="makered(redPacketItem)" v-if="redPacketItem.transferstatus == '1'">
|
|
转赠
|
|
</view>
|
|
</view>
|
|
<view class="selectBox" v-if="redPacketItem.id == selectId">
|
|
<view class="select-con dis-flex" v-for="(item,index) in useWhereList" :key='index'>
|
|
<view class="f-24">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="f-24 t-r gohomeBtn" @click="gohone(item.link)">
|
|
前往
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="linkUser" v-if="redPacketItem.transferflag == 1">
|
|
<view class="dis-flex f-24">
|
|
<view class="flex-box">
|
|
赠送人
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.oldnickname}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex f-24" style="padding: 10upx 0;">
|
|
<view class="flex-box">
|
|
手机号
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.oldmobile}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex f-24">
|
|
<view class="flex-box">
|
|
领取时间
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.gettime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="usedpacket" v-if="(curActive==='1' || curActive==='2' || curActive==='3') && selectStatus">
|
|
<view class="search dis-flex" v-if="curActive == '3'">
|
|
<view class="iconfont icon-search t-c"
|
|
style="width: 80upx;height: 80upx;line-height: 80upx;">
|
|
|
|
</view>
|
|
<input class="searchInput" @confirm="confirm" v-model="mobile" type="text" maxlength="11" placeholder="请输入手机号" value="" />
|
|
</view>
|
|
<block v-if="!!redPacketList && redPacketList.length>0">
|
|
<view class="usedpacket-list">
|
|
<view v-for="(redPacketItem,index) in redPacketList" :key="index">
|
|
<view class="usedpacket-list-item dis-flex m-btm20" >
|
|
<view class="usedpacket-itemleft p-r dis-flex flex-dir-column flex-x-center">
|
|
<view class="usedpacket-priceStyle col-f f-50 t-c"><text class="f-30">¥</text>{{redPacketItem.cut_money}}</view>
|
|
<view class="f-24 col-f t-c">满{{redPacketItem.full_money}}可用</view>
|
|
<view class="itemleft_bgstyle"></view>
|
|
<view class="itemleft_bgstyle2"></view>
|
|
</view>
|
|
<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
|
|
<view class="usedpacket_titleType dis-flex flex-y-center">
|
|
<view class="usedpacketType t-c m-right10 dis-flex flex-y-center" v-if="!!redPacketItem.label"><text class="col-f f-24">{{redPacketItem.label}}</text></view>
|
|
<view class="usedpacketTitle onelist-hidden f-28 col-3">{{redPacketItem.title}}</view>
|
|
</view>
|
|
<view class="col-9 f-24 m-top-btm10">范围：{{redPacketItem.use_where}}</view>
|
|
<view class="col-9 f-24">{{redPacketItem.time}}</view>
|
|
<image :src="curActive==='1'? imgfixUrls + 'redpacket/usedpacket.png': imgfixUrls + 'redpacket/havepacket.png'"
|
|
class="usedpacketImage" v-if="curActive != '3'"></image>
|
|
<image :src="imgfixUrls + 'redpacket/haveGive.png'"
|
|
class="usedpacketImage" v-if="curActive == '3'"></image>
|
|
</view>
|
|
</view>
|
|
<view class="linkUser" style="background-color: #cccccc;color: #999999;" v-if="redPacketItem.transferflag == 1">
|
|
<view class="dis-flex f-24">
|
|
<view class="flex-box">
|
|
赠送人
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.oldnickname}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex f-24" style="padding: 10upx 0;">
|
|
<view class="flex-box">
|
|
手机号
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.oldmobile}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex f-24">
|
|
<view class="flex-box">
|
|
领取时间
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.gettime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="linkUser" style="background-color: #cccccc;color: #999999;" v-if="curActive == '3'">
|
|
<view class="dis-flex f-24">
|
|
<view class="flex-box">
|
|
{{redPacketItem.transfermode == 1?'赠送对象':'领取对象'}}
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.getname}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex f-24" style="padding: 10upx 0;">
|
|
<view class="flex-box">
|
|
手机号
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.mobile}}
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex f-24">
|
|
<view class="flex-box">
|
|
领取时间
|
|
</view>
|
|
<view class="flex-box t-r">
|
|
{{redPacketItem.transfertime}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<nonemores :diyTitleType="'Data'" :diyImagesSrc="img"></nonemores>
|
|
</block>
|
|
</view>
|
|
<view style="background-color: #F8F8F8;" class="m-top20" v-if="!!redPacketList && redPacketList.length>0 && selectStatus">
|
|
<load-more :isMore="loadingMore"></load-more>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<PopManager :show="showlink" type="bottom" @clickmask="showlink = false">
|
|
<view class="shareBox dis-flex" v-if="showlink">
|
|
<button class="flex-box sharebtn t-c" @click="sharelinkman">
|
|
<image :src="imgfixUrls+ 'wxhaoyou.png'" mode=""></image>
|
|
<view class="sharetext">
|
|
联系人
|
|
</view>
|
|
</button>
|
|
<!-- #ifdef H5 || APP-PLUS -->
|
|
<button class="flex-box sharebtn t-c" @click="shareover">
|
|
<image :src="imgfixUrls+ 'checkout/weixin.png'" mode=""></image>
|
|
<view class="sharetext">
|
|
微信好友
|
|
</view>
|
|
</button>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button class="flex-box sharebtn t-c" open-type="share" >
|
|
<image :src="imgfixUrls+ 'checkout/weixin.png'" mode=""></image>
|
|
<view class="sharetext">
|
|
微信好友
|
|
</view>
|
|
</button>
|
|
<!-- #endif -->
|
|
<button class="flex-box sharebtn t-c" @click="sharelint">
|
|
<image :src="imgfixUrls+ 'pengyouquan.png'" mode=""></image>
|
|
<view class="sharetext">
|
|
微信朋友圈
|
|
</view>
|
|
</button>
|
|
</view>
|
|
<view class="b-f close" @click="showlink = false">
|
|
关闭
|
|
</view>
|
|
</PopManager>
|
|
<PopManager :show="shareShow" :type="'top'" @clickmask="shareShow = false">
|
|
<cover-view>
|
|
<cover-image v-if="shareShow" :src="imageRoot + 'share.png'" class="coverImg"></cover-image>
|
|
</cover-view>
|
|
</PopManager>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from "@/common/js/app.js"
|
|
import nonemores from "@/components/template/nonemores.vue"
|
|
import wxApi from "@/common/js/wxApi.js"
|
|
import loadIng from '@/components/template/loadlogo'
|
|
import loadMore from '@/components/template/loadmore.vue'
|
|
import PopManager from '@/components/template/PopManager.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
diyImagesSrc: 'redpacket/nonemore_packet.png',
|
|
curActive: '0',
|
|
tablist: [{
|
|
title: '未使用',
|
|
type: '0'
|
|
},
|
|
{
|
|
title: '已使用',
|
|
type: '1'
|
|
},
|
|
{
|
|
title: '已过期',
|
|
type: '2'
|
|
}
|
|
],
|
|
current_page: 1,
|
|
curRedpacketTotal: "",
|
|
loading: false,
|
|
expireSoon: "",
|
|
redPacketList: [],
|
|
loadingMore: false,
|
|
selectStatus: false,
|
|
isShareBotton: false,
|
|
useWhereList: [],
|
|
selectId: '',
|
|
img:'',
|
|
showlink:false,
|
|
redItem:{},
|
|
shareShow:false,
|
|
id:null,
|
|
mobile:''
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let _this = this;
|
|
this.img = this.imgfixUrl + this.diyImagesSrc;
|
|
|
|
// #ifndef H5
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
})
|
|
uni.$once('myredpacketShare',function(data){
|
|
_this.shareover()
|
|
})
|
|
// #endif
|
|
this.$nextTick(function(){
|
|
setTimeout(()=>{
|
|
uni.setNavigationBarTitle({
|
|
title:e.title
|
|
})
|
|
},500)
|
|
})
|
|
|
|
|
|
|
|
},
|
|
onShow() {
|
|
let _this = this;
|
|
// #ifndef H5
|
|
if (_this.isShareBotton){
|
|
_this.isShareBotton = false
|
|
return
|
|
}
|
|
// #endif
|
|
_this.getRedpacket_list(true, _this.curActive);
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
gohone(link){
|
|
App.navigationTo({
|
|
url: link
|
|
})
|
|
},
|
|
goindex(title,link){
|
|
if(title == '全平台可用'){
|
|
App.navigationTo({
|
|
url: link
|
|
})
|
|
}
|
|
},
|
|
confirm(e){
|
|
this.getRedpacket_list(false,3)
|
|
},
|
|
closeRed(item){
|
|
App.showError(
|
|
`确定取消转赠?`,
|
|
data => {
|
|
if (data.confirm) {
|
|
App._post_form('&p=Order&do=cancelTransfer', {
|
|
objid:item.id,
|
|
type:2
|
|
}, res => {
|
|
uni.showToast({
|
|
title:'操作成功'
|
|
});
|
|
this.redPacketList.map((items,index)=>{
|
|
if(items.id == item.id){
|
|
items.status = 1;
|
|
}
|
|
})
|
|
})
|
|
}
|
|
},
|
|
true
|
|
);
|
|
|
|
},
|
|
async shareover(){
|
|
// #ifdef H5
|
|
let _this = this;
|
|
this.shareShow = true;
|
|
_this.id = await _this.redShare(_this.redItem.id,2);
|
|
console.log(_this.id)
|
|
let shareLinkurl = uni.getStorageSync('shareLinkurl');
|
|
shareLinkurl = shareLinkurl.replace('pages/subPages/redpacket/myredpacket','pages/mainPages/index/index');
|
|
let shareData = uni.getStorageSync('shareObj');
|
|
jWeixin.ready(() => {
|
|
wxApi.wxShare({
|
|
title: _this.id?_this.id.title:shareData.title, // 分享标题
|
|
desc: _this.id?_this.id.desc:shareData.desc, // 分享描述
|
|
link: _this.id?shareLinkurl + '&isred=' + _this.id.recordid:shareLinkurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
imgUrl:_this.id? _this.id.shareimg : shareData.imageUrl, // 分享图标
|
|
success: function(res) {
|
|
|
|
}
|
|
})
|
|
})
|
|
// #endif
|
|
},
|
|
async sharelint(){
|
|
let _this = this;
|
|
|
|
_this.id = await _this.redShare(_this.redItem.id,2);
|
|
uni.setStorageSync('redItem',_this.id);
|
|
//#ifdef MP-WEIXIN
|
|
App.showError(
|
|
`即将前往“首页”,稍后按照“界面提示”进行点击右上角“···”选择“分享到朋友圈”即可`,
|
|
data => {
|
|
if (data.confirm) {
|
|
App.navigationTo({
|
|
url: 'pages/mainPages/index/index?isRedShare=2&isRedId=' + this.redItem.id
|
|
})
|
|
}
|
|
},
|
|
true
|
|
);
|
|
//#endif
|
|
//#ifdef H5
|
|
this.shareShow = true;
|
|
let shareLinkurl = uni.getStorageSync('shareLinkurl');
|
|
shareLinkurl = shareLinkurl.replace('pages/subPages/redpacket/myredpacket','pages/mainPages/index/index');
|
|
let shareData = uni.getStorageSync('shareObj');
|
|
jWeixin.ready(() => {
|
|
wxApi.wxShare({
|
|
title: _this.id?_this.id.title:shareData.title, // 分享标题
|
|
desc: _this.id?_this.id.desc:shareData.desc, // 分享描述
|
|
link: _this.id?shareLinkurl + '&isred=' + _this.id.recordid:shareLinkurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
imgUrl:_this.id? _this.id.shareimg : shareData.imageUrl, // 分享图标
|
|
success: function(res) {
|
|
|
|
}
|
|
})
|
|
})
|
|
//#endif
|
|
},
|
|
sharelinkman(){
|
|
App.navigationTo({
|
|
url: 'pages/subPages2/redClothes/redClothes?type=2&id=' + this.redItem.id
|
|
})
|
|
},
|
|
makered(item) {
|
|
let _this = this;
|
|
this.redItem = item;
|
|
_this.showlink = true;
|
|
},
|
|
redShare(id,type){
|
|
return new Promise((resolve, reject) => {
|
|
App._post_form('&p=Order&do=planTransfer', {
|
|
id,
|
|
type
|
|
}, res => {
|
|
resolve(res.data);
|
|
})
|
|
})
|
|
},
|
|
//列表
|
|
selectLi(id) {
|
|
App._post_form('&p=redpack&do=getRedPackUserWhere', {
|
|
id
|
|
}, res => {
|
|
if (res.errno == 0) {
|
|
this.useWhereList = res.data.use_where
|
|
this.selectId = res.data.id;
|
|
} else if (res.data.use_where.length == 0) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '暂无数据'
|
|
})
|
|
}
|
|
|
|
})
|
|
},
|
|
selectBox1(id) {
|
|
if(this.selectId == id){
|
|
this.selectId = ''
|
|
}else{
|
|
this.selectLi(id);
|
|
}
|
|
|
|
|
|
},
|
|
selectBox2(id) {
|
|
this.selectId = ''
|
|
},
|
|
selectTab(type) {
|
|
let _this = this;
|
|
_this.selectStatus = false;
|
|
_this.curActive = type;
|
|
uni.showLoading()
|
|
_this.getRedpacket_list(false, type)
|
|
},
|
|
navgateto() {
|
|
App.navigationTo({
|
|
url: 'pages/subPages/redpacket/redsquare'
|
|
})
|
|
},
|
|
getRedpacket_list(init = false, status = '0', page = 1, isPage = false) {
|
|
let _this = this,
|
|
tablist = _this.tablist,
|
|
url = '&p=redpack&do=userRedPackList',
|
|
data = {
|
|
page,
|
|
status
|
|
};
|
|
if(status == 3){
|
|
url = '&p=Order&do=alreadyTransferList';
|
|
data = {
|
|
page,
|
|
mobile:_this.mobile || '',
|
|
type:2
|
|
}
|
|
}
|
|
|
|
App._post_form(url,data, res => {
|
|
if (res.errno == 0) {
|
|
let redpacketData = res.data.redpacketData;
|
|
if (init) {
|
|
tablist[0]['num'] = redpacketData.not_used;
|
|
tablist[1]['num'] = redpacketData.used;
|
|
tablist[2]['num'] = redpacketData.expired;
|
|
_this.setData({
|
|
tablist
|
|
});
|
|
if(res.data.transfer == 1 && tablist.length == 3){
|
|
_this.tablist.push({
|
|
title: '已赠送',
|
|
type: '3'
|
|
});
|
|
_this.tablist[3]['num'] = redpacketData.alltr;
|
|
}
|
|
}
|
|
if(url == '&p=Order&do=alreadyTransferList'){
|
|
_this.tablist[3]['num'] = res.data.totalnum;
|
|
}
|
|
if(_this.languageStatus == 1){
|
|
_this.tablist[0].title = '미사용';
|
|
_this.tablist[1].title = '사용완료';
|
|
_this.tablist[2].title = '기한만료';
|
|
}
|
|
if (isPage) {
|
|
if (res.data.list.length > 0) {
|
|
_this["redPacketList"].push(...res.data.list);
|
|
} else {
|
|
_this.loadingMore = true;
|
|
}
|
|
} else {
|
|
_this.setData({
|
|
current_page: 1,
|
|
redPacketList: res.data.list,
|
|
curRedpacketTotal: redpacketData?redpacketData.total:res.data.pagetotal,
|
|
loadingMore: res.data.list.length === 0 || _this.current_page === (redpacketData?redpacketData.total:res.data.pagetotal),
|
|
expireSoon: redpacketData?redpacketData.expireSoon:''
|
|
})
|
|
}
|
|
|
|
}
|
|
_this.selectStatus = true;
|
|
_this.loading = true;
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
let _this = this,
|
|
curActive = _this.curActive;
|
|
if (_this.current_page >= _this.curRedpacketTotal) {
|
|
_this.loadingMore = true;
|
|
return false;
|
|
}
|
|
_this.getRedpacket_list(false, curActive, ++_this.current_page, true)
|
|
},
|
|
components: {
|
|
nonemores,
|
|
loadIng,
|
|
loadMore,
|
|
PopManager
|
|
},
|
|
async onShareAppMessage() {
|
|
let _this = this;
|
|
this.isShareBotton = true;
|
|
console.log(this.isShareBotton, '触发转发点击事件不重新渲染数据')
|
|
let getUserinfo = uni.getStorageSync('userinfo'),
|
|
ShareData = uni.getStorageSync('shareDataInfo'),
|
|
agencyData = uni.getStorageSync('agencyData'),
|
|
aid = agencyData.aid;
|
|
if(_this.redItem.id){
|
|
_this.id = await _this.redShare(_this.redItem.id,2);
|
|
}else{
|
|
_this.id = null;
|
|
}
|
|
return {
|
|
title: _this.id?_this.id.title:ShareData.title, // 分享标题
|
|
desc: _this.id?_this.id.desc:ShareData.desc, // 分享描述
|
|
imageUrl:_this.id? _this.id.shareimg : ShareData.img, // 分享图标
|
|
path: _this.id?'pages/mainPages/index/index?head_id=' + getUserinfo.mid + '&aid=' + aid + '&isred=' + _this.id.recordid:'pages/mainPages/index/index?head_id=' + getUserinfo.mid + '&aid=' + aid
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.coverImg {
|
|
/* #ifdef H5 */
|
|
width: 750upx;
|
|
/* #endif */
|
|
/* #ifdef MP-WEIXIN */
|
|
width: 540upx;
|
|
/* #endif */
|
|
}
|
|
.selectBox {
|
|
margin: 0rpx 35rpx 0 35rpx;
|
|
background: white;
|
|
|
|
.select-con {
|
|
padding: 20rpx;
|
|
|
|
view {
|
|
width: 500rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
margin-left: 30rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
.gohomeBtn{
|
|
width: 100upx;
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
text-align: center;
|
|
background-color: #FF4444;
|
|
color: #FFFFFF;
|
|
border-radius: 10upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
page {
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
.tablist-main {
|
|
width: 100%;
|
|
height: 84upx;
|
|
line-height: 84upx;
|
|
|
|
.tab-item {
|
|
.active-tab {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 80upx;
|
|
height: 8upx;
|
|
background-color: #ff4444;
|
|
border-radius: 8upx 8upx 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.packet-main {
|
|
margin: 30upx;
|
|
}
|
|
|
|
.red-square-main {
|
|
padding: 24upx;
|
|
|
|
.redsquareImage {
|
|
display: block;
|
|
width: 40upx;
|
|
height: 40upx;
|
|
margin-right: 16upx;
|
|
}
|
|
|
|
.redsquare-right {
|
|
font-size: 24upx;
|
|
}
|
|
}
|
|
|
|
.unused-packet-main {
|
|
.unused-packet-list {
|
|
.unused-list-item {
|
|
width: 100%;
|
|
//height: 170upx;
|
|
background-size: 100% 210upx;
|
|
background-repeat: no-repeat;
|
|
padding: 20upx 0;
|
|
position: relative;
|
|
.unused-list-rad{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba(0,0,0,0.6);
|
|
z-index: 1;
|
|
border-radius: 20upx;
|
|
font-size: 28upx;
|
|
// padding-top: 40upx;
|
|
.closeBtn{
|
|
width: 150upx;
|
|
height: 70upx;
|
|
line-height: 70upx;
|
|
background-color: #FFFFFF;
|
|
font-size: 28upx;
|
|
border-radius: 10upx;
|
|
float: right;
|
|
text-align: center;
|
|
margin-right: 60upx;
|
|
}
|
|
}
|
|
|
|
.redPacket-type {
|
|
position: absolute;
|
|
right: 20upx;
|
|
top: 20upx;
|
|
}
|
|
|
|
.UnredPacket-detail {
|
|
height: 170rpx;
|
|
padding: 0 50upx;
|
|
position: relative;
|
|
}
|
|
|
|
.UnredPacket-priceStyle {
|
|
margin-right: 12upx;
|
|
|
|
>text {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.makeBtn{
|
|
width: 120upx;
|
|
height: 60upx;
|
|
background-color: #ffffff;
|
|
color: #FF4444;
|
|
text-align: center;
|
|
line-height: 60upx;
|
|
border-radius: 10upx;
|
|
font-size: 28upx;
|
|
font-weight: 700;
|
|
position: absolute;
|
|
bottom: 10upx;
|
|
right: 30upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.usedpacket {
|
|
.usedpacket-list {
|
|
.usedpacket-list-item {
|
|
height: 170upx;
|
|
|
|
.usedpacket-itemleft {
|
|
width: 28%;
|
|
height: 100%;
|
|
background-color: #CCCCCC;
|
|
padding: 0 20upx;
|
|
flex-shrink: 0;
|
|
|
|
.usedpacket-priceStyle {
|
|
margin-right: 12upx;
|
|
|
|
>text {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-top: 4upx;
|
|
}
|
|
}
|
|
|
|
.itemleft_bgstyle {
|
|
width: 30upx;
|
|
height: 30upx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: -16upx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
.itemleft_bgstyle2 {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 1%;
|
|
height: 170upx;
|
|
padding-left: 4upx;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
background: radial-gradient(transparent 0, transparent 8upx, #CCCCCC 8upx);
|
|
background-size: 16upx 16upx;
|
|
background-position: 16upx 0px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.usedpacket-itemright {
|
|
height: 100%;
|
|
|
|
.usedpacket_titleType {
|
|
.usedpacketType {
|
|
padding: 0 6upx;
|
|
height: 28upx;
|
|
background-color: #ccc;
|
|
border-radius: 14upx;
|
|
|
|
>text {
|
|
display: inline-block;
|
|
transform: scale(.85);
|
|
}
|
|
}
|
|
|
|
.usedpacketTitle {
|
|
width: 240upx;
|
|
}
|
|
}
|
|
|
|
>image {
|
|
position: absolute;
|
|
display: block;
|
|
right: 24upx;
|
|
bottom: 0;
|
|
width: 114upx;
|
|
height: 114upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.linkUser{
|
|
padding: 30upx;
|
|
background-color: #ff4444;
|
|
border-radius: 20upx;
|
|
font-size: 28upx;
|
|
// margin-bottom: 20upx;
|
|
position: relative;
|
|
top: -15upx;
|
|
margin-bottom: 10upx;
|
|
color: #ffffff;
|
|
}
|
|
.shareBox{
|
|
padding: 50upx 30upx;
|
|
width: 92vw;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30upx 30upx 0 0;
|
|
image{
|
|
width: 100upx;
|
|
height: 100upx;
|
|
}
|
|
.sharetext{
|
|
font-size: 28upx;
|
|
color: #666666;
|
|
}
|
|
/deep/.sharebtn{
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
.close{
|
|
text-align: center;
|
|
padding: 20upx;
|
|
border-top: 1upx solid #EEEEEE;
|
|
font-size: 36upx;
|
|
color: #666666;
|
|
}
|
|
.search{
|
|
// margin: 30upx;
|
|
margin-bottom: 30upx;
|
|
border-radius: 20upx;
|
|
background-color: #ffffff;
|
|
/deep/.searchInput{
|
|
height: 80upx;
|
|
line-height: 80upx;
|
|
font-size: 28upx;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|