Skip to content

G
gxpt_wechat
Commit 3426f2fb by zhangzhen
Options

界面优化

parent 39a51a8d
Showing with 316 additions and 142 deletions
pages.json
......@@ -227,6 +227,13 @@
}
},
{
"path" : "rule/vipRule",
"style": {
"navigationBarTitleText": "活动规则",
"enablePullDownRefresh" : false
}
},
{
"path" : "levelDetail/index",
"style": {
"navigationBarTitleText": "会员等级详情",
......
pages/vipCreate/vipCreate.vue
......@@ -81,18 +81,18 @@
<view v-if="tabIndex ==2" class="flex-col list-box-2">
<view v-if="consumerMemberStatus" class="flex-between part-1">
<view class="flex-row-center">
<view class="text-bg-1">
<text>专属</text>
</view>
<text class="text-2">超值回馈!</text>
<text class="text-3">（权益会员独享）</text>
</view>
<view v-if="consumerMemberStatus" class="flex-between part-1">
<view class="flex-row-center">
<view class="text-bg-1">
<text>专属</text>
</view>
<text class="text-2">超值回馈!</text>
<text class="text-3">（权益会员独享）</text>
</view>
<view class="" @tap="onShareByQrcode">
<text class="text-red sm">分享得返利</text>
</view>
</view>
</view>
<view v-else class="flex-row part-1">
<view class="text-bg-1">
<text>特惠</text>
......@@ -102,24 +102,7 @@
</view>
<view class="part-2">
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<view v-if="consumerMemberStatus" class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">次卡</text>
<text class="text-2">充值 畅玩无忧</text>
</view>
<text class="text-3">有效期：领取后1年内有效</text>
</view>
<view class="flex-3">
<view class="flex-col">
<text class="text-2">暂未上线</text>
<text class="text-2">敬请期待</text>
</view>
</view>
</view>
<view v-else class="absolute">
<view class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">权益</text>
......@@ -155,16 +138,62 @@
<text>我已阅读</text><text class="text-pink"
@tap="onNavToRule2">用户充值协议</text><text>,并同意协议内容</text>
</view>
<view class="bg-box-2">
<view class="flex-row-center title-content">
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
<view class="title-text">
<view class="text">
<text>权益会员专属活动</text>
</view>
<view class="line">
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="prefer-box-list">
<view v-for="(item,k) in preferList" :key="k" class="list-item"
@tap="onNavToRule3(item)">
<image class="img" :src="item.iconUrl" mode="widthFix"></image>
<text class="text-title">{{item.title}}</text>
<text class="text-slogan">{{item.slogan}}</text>
</view>
</view>
<view class="look-prefer-nav" @tap="onNavToRule3">
<text class="text-title">点击可查看权益详情</text>
<image class="img" :src="assetsPath+'/vip/icon_right.png'" mode="widthFix"></image>
</view>
</view>
<view class="adorn-2">
<image class="img" :src="assetsPath+'/vip/adorn_2.png'" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<!-- <view class="active-bg">
<view v-if="tabIndex ==1" class="active-bg" @tap="onTabChange(2)">
<image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
</view>
<view v-if="tabIndex ==1" class="banner-box">
<swiper class="banner-swiper" :indicator-dots="true" :circular="true" :autoplay="true"
:duration="1000" :interval="3000" indicator-active-color="#FFD600" indicator-color="rgba(0,0,0,0.5)">
<swiper-item v-for="(item,k) in bannerList" :key="k">
<view class="banner-item" @tap="onNavTo(item)">
<image class="img-bg" :src="item.imgUrl" mode="scaleToFill"></image>
</view>
</swiper-item>
<view class="active-bg-2">
<image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
</view> -->
</swiper>
</view>
<view v-if="tabIndex ==1" class="flex-col">
<button class="cu-btn confirm-btn" @tap="onNavToRecharge">
......@@ -179,53 +208,69 @@
</view>
</view>
<view v-if="tabIndex ==1" class="active-bg">
<!-- <view v-if="tabIndex ==1" class="active-bg">
<image :src="assetsPath+'/vip/active_bg.png'" mode="widthFix"></image>
</view>
<view v-if="tabIndex ==1" class="active-bg-2">
<image :src="assetsPath+'/vip/banner2.png'" mode="widthFix"></image>
</view>
</view> -->
<view v-if="tabIndex ==2" class="bg-box-1 margin-top">
<view class="bg-box-2">
<view class="flex-row-center title-content">
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
<view class="title-text">
<view class="text">
<text>权益会员专属活动</text>
<view class="flex-col list-box-2">
<view class="flex-row-center title-content">
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
<view class="line">
<view class="title-text">
<view class="text">
<text>次卡专属购</text>
</view>
<view class="line">
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
</view>
</view>
<view class="xx">
<image :src="assetsPath+'/xx.png'" mode="widthFix"></image>
<view class="flex-row part-1">
<view class="text-bg-1">
<text>专属</text>
</view>
<text class="text-2">超值回馈!</text>
<text class="text-3">（权益会员独享）</text>
</view>
</view>
<view class="prefer-box-list">
<view v-for="(item,k) in preferList" :key="k" class="list-item" @tap="onNavToRule3(item)">
<image class="img" :src="item.iconUrl" mode="widthFix"></image>
<text class="text-title">{{item.title}}</text>
<text class="text-slogan">{{item.slogan}}</text>
<view class="part-2">
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<view class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">次卡</text>
<text class="text-2">充值 畅玩无忧</text>
</view>
<text class="text-3">有效期：领取后1年内有效</text>
</view>
<view class="flex-3">
<view class="flex-col">
<text class="text-2">暂未上线</text>
<text class="text-2">敬请期待</text>
</view>
</view>
</view>
</view>
<view class="rule-tip">
<checkbox-group @change="onRuleTipChange">
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked"
value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>, 并同意协议内容</text>
</view>
</view>
<view class="look-prefer-nav" @tap="onNavToRule3">
<text class="text-title">点击可查看权益详情</text>
<image class="img" :src="assetsPath+'/vip/icon_right.png'" mode="widthFix"></image>
</view>
</view>
<view class="adorn-1">
<image class="img" :src="assetsPath+'/vip/adorn_1.png'" mode="widthFix"></image>
</view>
<view class="adorn-2">
<image class="img" :src="assetsPath+'/vip/adorn_2.png'" mode="widthFix"></image>
</view>
</view>
</view>
......@@ -352,43 +397,43 @@
</view>
</uni-popup>
<uni-popup ref="popupShare" type="center">
<view class="popup-box-content popup-box-share">
<view class="popup-box popup-box-2">
<view class="close-box" @tap="onClose">
<text class="cuIcon-close text-xl text-icon"></text>
</view>
<view class="title-header">
<text class="text-title text-black text-lg text-bold">分享邀请</text>
</view>
<view class="flex-col popup-content">
<view class="share-qrcode">
<view class="qrcode-box">
<tki-qrcode ref="qrcode" :cid="cid" :val="text" :size="size" unit="upx"
icon="../../static/logo_icon.png" :iconSize="iconSize" :onval="true" :loadMake="loadMake"
:showLoading="true" @result="qrR" />
</view>
<view class="part-bottom">
<button class="btn cu-btn bg-white" @tap="onSaveImg">
<image src="../../static/icon_album.png" mode="widthFix"></image>
<text>保存到相册</text>
</button>
<button open-type="share" class="btn cu-btn bg-blue">
<image src="../../static/share_icon_2.png" mode="widthFix"></image>
<text>分享邀请</text>
</button>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="popupShare" type="center">
<view class="popup-box-content popup-box-share">
<view class="popup-box popup-box-2">
<view class="close-box" @tap="onClose">
<text class="cuIcon-close text-xl text-icon"></text>
</view>
<view class="title-header">
<text class="text-title text-black text-lg text-bold">分享邀请</text>
</view>
<view class="flex-col popup-content">
<view class="share-qrcode">
<view class="qrcode-box">
<tki-qrcode ref="qrcode" :cid="cid" :val="text" :size="size" unit="upx"
icon="../../static/logo_icon.png" :iconSize="iconSize" :onval="true"
:loadMake="loadMake" :showLoading="true" @result="qrR" />
</view>
<view class="part-bottom">
<button class="btn cu-btn bg-white" @tap="onSaveImg">
<image src="../../static/icon_album.png" mode="widthFix"></image>
<text>保存到相册</text>
</button>
<button open-type="share" class="btn cu-btn bg-blue">
<image src="../../static/share_icon_2.png" mode="widthFix"></image>
<text>分享邀请</text>
</button>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
<f-tabbar></f-tabbar>
</view>
</template>
......@@ -442,67 +487,81 @@
iconUrl: config.assetsPath + "/vip/p_1.png",
title: "会员价",
slogan: "最低享98折",
value:0
value: 0
},
{
iconUrl: config.assetsPath + "/vip/p_2.png",
title: "专属礼物",
slogan: "好礼享不停",
value:1
value: 1
},
{
iconUrl: config.assetsPath + "/vip/p_3.png",
title: "会员日",
slogan: "半价活动",
value:2
value: 2
},
{
iconUrl: config.assetsPath + "/vip/p_4.png",
title: "特定活动",
slogan: "免报名费",
value:3
value: 3
},
{
iconUrl: config.assetsPath + "/vip/p_5.png",
title: "邀请有礼",
slogan: "推荐返利",
value:4
value: 4
},
{
iconUrl: config.assetsPath + "/vip/p_6.png",
title: "专享礼物",
slogan: "一年使用期限",
value:5
value: 5
},
{
iconUrl: config.assetsPath + "/vip/p_7.png",
title: "专属客服",
slogan: "一对一服务",
value:6
value: 6
},
{
iconUrl: config.assetsPath + "/vip/p_9.png",
title: "商城",
slogan: "会员折扣",
value:7
value: 7
},
{
iconUrl: config.assetsPath + "/vip/p_10.png",
title: "次卡",
slogan: "特惠购",
value:8
value: 8
},
{
iconUrl: config.assetsPath + "/vip/p_8.png",
title: "联营开店",
slogan: "共享资源",
value:9
value: 9
}
]
],
bannerList:[
{
imgUrl:config.assetsPath+'/banner/1.png',
routePath:''
},
{
imgUrl:config.assetsPath+'/banner/2.png',
routePath:''
},
{
imgUrl:config.assetsPath+'/banner/3.png',
routePath:'/pages/storeList/storeList'
},
],
};
},
onLoad(query) {
console.log(query,"页面传递过来的参数")
console.log(query, "页面传递过来的参数")
if (query.q) {
const q = decodeURIComponent(query.q)
let d = q.split('?')
......@@ -512,7 +571,7 @@
let l = item.split('=');
obj[l[0]] = l[1];
})
console.log(obj,"参数对象")
console.log(obj, "参数对象")
if (obj.uid) {
uni.setStorageSync("shareUserId", obj.uid)
this.tabIndex = 2
......@@ -524,7 +583,7 @@
this.tabIndex = 2
this.onLoading()
}
uni.hideTabBar();
this.onGetRechargeConf();
this.onLoading();
......@@ -536,6 +595,13 @@
}
},
methods: {
onNavTo(val){
if(val.routePath){
uni.navigateTo({
url:val.routePath
})
}
},
onConfirmPay() {
if (this.tabIndex == 1) {
this.onCreateRecharge()
......@@ -632,7 +698,7 @@
onNavToRule() {
uni.navigateTo({
url: "/setting/rule/rule?keyData=vip_user_rule"
url: "/setting/rule/vipRule"
})
},
onNavToRule2() {
......@@ -778,9 +844,9 @@
console.log(r, "二维码路径")
this.qrPath = r;
},
onShareByQrcode(){
onShareByQrcode() {
this.text = `https://www.coujio.com/vipShare?uid=${this.userInfo.id}&act=0`;
console.log(this.text,"text")
console.log(this.text, "text")
this.loadMake = true;
this.$refs.popupShare.open()
},
......@@ -857,7 +923,7 @@
justify-content: center;
align-items: center;
width: 690upx;
min-height: 496upx;
min-height: 300upx;
background: #FFCA7E;
border-radius: 32upx;
padding: 6px 0;
......@@ -972,9 +1038,7 @@
padding: 0 1%;
justify-content: center;
align-items: center;
// margin: 42upx 0;
margin: 42upx 0;
.item {
position: relative;
display: flex;
......@@ -1144,9 +1208,11 @@
align-items: center;
width: 90%;
margin-top: 24upx;
.part-2{
.part-2 {
align-items: center;
}
.text-bg-1 {
display: flex;
justify-content: center;
......@@ -1647,19 +1713,22 @@
max-height: 218upx;
}
}
.popup-box-share{
.popup-box-share {
width: 90vw;
border-radius: 12upx;
overflow: hidden;
.popup-box-2{
.popup-box-2 {
background: #f1f1f1;
}
.share-qrcode {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.qrcode-box {
background-color: #ffffff;
border-radius: 12upx;
......@@ -1667,13 +1736,14 @@
padding: 20upx;
margin-top: 24upx;
}
.part-bottom {
display: flex;
flex-direction: row;
justify-content: center;
margin: 36upx 0;
width: 100%;
.btn {
display: flex;
flex-direction: row;
......@@ -1683,14 +1753,14 @@
height: 88upx;
border-radius: 20upx;
margin: 0 20upx;
image {
display: block;
width: 32upx;
height: auto;
margin-right: 6upx;
}
text {
font-size: 24upx;
}
......@@ -1698,5 +1768,23 @@
}
}
}
.banner-box{
display: flex;
justify-content: center;
width: 100%;
margin: 24upx 0 10upx;
.banner-swiper{
height: 100px;
width: 100%;
.banner-item{
width: 700upx;
height: 100%;
margin: 0 auto;
.img-bg{
width: 100%;
height: 100%;
}
}
}
}
</style>
\ No newline at end of file
setting/equityFundLog/index.vue
......@@ -45,18 +45,17 @@
<view class="flex-between padding-sm part-top">
<text class="text-title text-lg text-black">权益金入账信息</text>
<view class="flex-row-center">
<!-- <view class="flex-row-center">
<button v-for="(item,k) in tabList" :key="k" class="cu-btn sm" :class="tabIndex ===k?'bg-blue':'bg-white'" @tap="onTabChange(k)">{{item.name}}</button>
</view>
</view> -->
</view>
<view class="list-content">
<view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)">
<view v-if="tabIndex ==1 && list2.length" class="list-content">
<view v-for="(item,index) in list2" :key="index" class="list-item">
<view class="flex-between">
<view class="flex-row-center">
<text class="">入账时间:</text>
<text class="margin-left">{{item.createTime}}</text>
<text class="">待入账时间:</text>
<text class="margin-left">{{item.expireTime}}</text>
</view>
<view class="">
......@@ -64,7 +63,7 @@
</view>
<view class="flex-between">
<text class="">金额:</text>
<text class="">待入账金额:</text>
<text class="text-pink text-bold text-lg">￥{{item.equityFund}}</text>
</view>
......@@ -72,12 +71,48 @@
<text class="">说明:</text>
<text class="text-black"><text
class="text-bold">{{item.newNickName || '凑角用户'}}_{{item.phone4Last}}</text>进行<text
class="text-bold">{{equityFundTypeEnum[item.equityFundType]}}</text></text>
class="text-bold">{{equityFundTypeEnum[item.equityFundType||'2']}}</text></text>
</view>
<view class="flex-between">
<view class="flex-row-center">
<text class="">创建时间:</text>
<text class="margin-left">{{item.createTime}}</text>
</view>
<view class="">
</view>
</view>
</view>
</view>
<view v-else-if="tabIndex != 1 && list.length " class="list-content">
<view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)">
<view class="flex-between">
<view class="flex-row-center">
<text class="">入账日期:</text>
<text class="margin-left">{{item.createTime}}</text>
</view>
<view class="">
</view>
</view>
<view class="flex-between">
<text class="">已入账金额:</text>
<text class="text-pink text-bold text-lg">￥{{item.equityFund}}</text>
</view>
<view class="flex-between">
<text class="">说明:</text>
<text class="text-black"><text
class="text-bold">{{item.newNickName || '凑角用户'}}_{{item.phone4Last}}</text>进行<text
class="text-bold">{{equityFundTypeEnum[item.equityFundType]}}</text></text>
</view>
</view>
</view>
<view v-if="list.length == 0" class="empty-box">
<u-empty text="暂无数据" textColor='#C1C1C1' width="120" :icon="listBlankImage">
......@@ -123,6 +158,7 @@
nomoreText: '到底啦',
statusIndex: 0,
list: [],
list2:[],
assetsPath: config.assetsPath,
scrollTop: 0,
queryParams: {
......@@ -282,17 +318,17 @@
})
if (this.queryParams.pageNum === 1) {
this.list = list
this.list2 = list
} else {
this.list.push(...list);
this.list2.push(...list);
}
if (this.list.length < res.data.total) {
if (this.list2.length < res.data.total) {
this.status = "loadmore"
} else {
this.status = "nomore"
}
console.log(this.list2,99999999999)
} else if (res.data.code == 401) {
this.loginStatus = false
}
......
setting/rule/vipRule.vue 0 → 100644
<template>
<view class="article">
<image class="img" :src="assetsPath+'/vip_rule.png'" mode="widthFix"></image>
</view>
</template>
<script>
import config from "@/config/index.config";
export default {
data() {
return {
assetsPath: config.assetsPath,
article: {
protocolTitle: '',
content: '',
},
keyData: ""
};
},
onLoad(option) {
},
methods: {
}
}
</script>
<style>
</style>
<style lang="scss">
.article {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
.img{
width: 100%;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment