11.28前端
This commit is contained in:
@QQNZX
parent
827fffe279
commit
dea95896c2
@ -19,7 +19,7 @@
|
|||||||
<view class="jg-img">
|
<view class="jg-img">
|
||||||
<image src="../../static/imgs/viprwm.png" mode=""></image>
|
<image src="../../static/imgs/viprwm.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="jg-size">便利店</view>
|
<view class="jg-size">二维码</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="jg-box" @click="goActivity()">
|
<view class="jg-box" @click="goActivity()">
|
||||||
<view class="jg-img">
|
<view class="jg-img">
|
||||||
@ -70,9 +70,12 @@
|
|||||||
<view class="station">
|
<view class="station">
|
||||||
<view class="station-box">
|
<view class="station-box">
|
||||||
|
|
||||||
<view class="station-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}</view><!--顺通石化加油站(工业南路站)-->
|
<view class="station-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}
|
||||||
|
</view><!--顺通石化加油站(工业南路站)-->
|
||||||
<view style="display: flex;">
|
<view style="display: flex;">
|
||||||
<view class="bule-icon" v-if="welfare.length!=0" v-for="(item,index) in welfare" :key="index">{{item}}</view>
|
<view class="bule-icon" v-if="welfare.length!=0" v-for="(item,index) in welfare" :key="index">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="dis-bt">
|
<view class="dis-bt">
|
||||||
<view class="">
|
<view class="">
|
||||||
@ -125,13 +128,13 @@
|
|||||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||||
],
|
],
|
||||||
// 当前经度信息
|
// 当前经度信息
|
||||||
longitude:"",
|
longitude: "",
|
||||||
// 纬度
|
// 纬度
|
||||||
latitude:"",
|
latitude: "",
|
||||||
// 店铺信息
|
// 店铺信息
|
||||||
store:{},
|
store: {},
|
||||||
// 店铺福利信息
|
// 店铺福利信息
|
||||||
welfare:[],
|
welfare: [],
|
||||||
distance: "",
|
distance: "",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -139,21 +142,21 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getAddress();
|
// this.getAddress();
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
tabbar
|
tabbar
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取当前位置
|
// 获取当前位置
|
||||||
getAddress(){
|
getAddress() {
|
||||||
let _this = this;
|
let _this = this;
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
// 谷歌使用wgs84 其他使用gcj02
|
// 谷歌使用wgs84 其他使用gcj02
|
||||||
type: 'wgs84', // 使用国测局坐标系
|
type: 'wgs84', // 使用国测局坐标系
|
||||||
success: function(res) {
|
success: function(res) {
|
||||||
_this.longitude = res.longitude;
|
_this.longitude = res.longitude;
|
||||||
_this.latitude = res.latitude
|
_this.latitude = res.latitude
|
||||||
// console.log('经度: ' + res.longitude);
|
// console.log('经度: ' + res.longitude);
|
||||||
// console.log('纬度: ' + res.latitude);
|
// console.log('纬度: ' + res.latitude);
|
||||||
uni.request({
|
uni.request({
|
||||||
@ -163,16 +166,16 @@
|
|||||||
"lon": res.longitude,
|
"lon": res.longitude,
|
||||||
"lat": res.latitude
|
"lat": res.latitude
|
||||||
},
|
},
|
||||||
success: function(response){
|
success: function(response) {
|
||||||
_this.distance = (response.data.data.distance).toFixed(1)
|
_this.distance = (response.data.data.distance).toFixed(1)
|
||||||
_this.store = response.data.data.store
|
_this.store = response.data.data.store
|
||||||
let welfare = response.data.data.store.welfare
|
let welfare = response.data.data.store.welfare
|
||||||
if (welfare != undefined && welfare!=null && welfare!=""){
|
if (welfare != undefined && welfare != null && welfare != "") {
|
||||||
if (welfare.includes(",")){
|
if (welfare.includes(",")) {
|
||||||
_this.welfare = response.data.data.store.welfare.split(",")
|
_this.welfare = response.data.data.store.welfare.split(",")
|
||||||
}else {
|
} else {
|
||||||
_this.welfare.push(response.data.data.store.welfare)
|
_this.welfare.push(response.data.data.store.welfare)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -17,7 +17,8 @@
|
|||||||
size="12"></uni-icons> </view>
|
size="12"></uni-icons> </view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="vipnber">会员等级 <uni-icons type="right" color="#ffffff" size="16"></uni-icons></view>
|
<view class="vipnber" @click="govip()">会员等级 <uni-icons type="right" color="#ffffff"
|
||||||
|
size="16"></uni-icons></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="my-top-box">
|
<view class="my-top-box">
|
||||||
<view class="jg-box" @click="gomony()">
|
<view class="jg-box" @click="gomony()">
|
||||||
@ -100,7 +101,7 @@
|
|||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="centenr-sx">
|
<view class="centenr-sx" @click="gowriteoff()">
|
||||||
<view class="centenr-img">
|
<view class="centenr-img">
|
||||||
<image src="../../static/my/jl.png" mode=""></image>
|
<image src="../../static/my/jl.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
@ -109,7 +110,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="centenr-sx">
|
<view class="centenr-sx" @click="gorecharge()">
|
||||||
<view class="centenr-img">
|
<view class="centenr-img">
|
||||||
<image src="../../static/my/chongzhi.png" style="width: 30px;height: 30px; "></image>
|
<image src="../../static/my/chongzhi.png" style="width: 30px;height: 30px; "></image>
|
||||||
</view>
|
</view>
|
||||||
@ -117,7 +118,7 @@
|
|||||||
充值记录
|
充值记录
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="centenr-sx">
|
<view class="centenr-sx" @click="goinvte()">
|
||||||
<view class="centenr-img">
|
<view class="centenr-img">
|
||||||
<image src="../../static/my/lp.png" style="width: 30px;height: 30px; "></image>
|
<image src="../../static/my/lp.png" style="width: 30px;height: 30px; "></image>
|
||||||
</view>
|
</view>
|
||||||
@ -125,7 +126,7 @@
|
|||||||
邀请有礼
|
邀请有礼
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="centenr-sx">
|
<view class="centenr-sx" @click="goPoints()">
|
||||||
<view class="centenr-img">
|
<view class="centenr-img">
|
||||||
<image src="../../static/my/jfsc.png" style="width: 30px;height: 30px; "></image>
|
<image src="../../static/my/jfsc.png" style="width: 30px;height: 30px; "></image>
|
||||||
</view>
|
</view>
|
||||||
@ -133,7 +134,7 @@
|
|||||||
积分商城
|
积分商城
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="centenr-sx">
|
<view class="centenr-sx" @click="gocard()">
|
||||||
<view class="centenr-img">
|
<view class="centenr-img">
|
||||||
<image src="../../static/my/kb.png"></image>
|
<image src="../../static/my/kb.png"></image>
|
||||||
</view>
|
</view>
|
||||||
@ -141,7 +142,7 @@
|
|||||||
子卡管理
|
子卡管理
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="centenr-sx">
|
<view class="centenr-sx" @click="gofeedback()">
|
||||||
<view class="centenr-img">
|
<view class="centenr-img">
|
||||||
<image src="../../static/my/yj.png"></image>
|
<image src="../../static/my/yj.png"></image>
|
||||||
</view>
|
</view>
|
||||||
@ -150,14 +151,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<u-divider text="蓝鲸智慧加油站" :hairline="true"></u-divider>
|
<u-divider text="蓝鲸智慧加油站" :hairline="true"></u-divider>
|
||||||
<tabbar :msg="msg"></tabbar>
|
<tabbar :msg="msg"></tabbar>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import tabbar from "../../components/tabbar/tabbar.vue"
|
import tabbar from "../../components/tabbar/tabbar.vue"
|
||||||
export default {
|
export default {
|
||||||
@ -207,6 +206,41 @@
|
|||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pagesRefuel/pagesRefuel/index'
|
url: '/pagesRefuel/pagesRefuel/index'
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
gowriteoff() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pagesMy/writeOff/writeOff'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
gorecharge() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pagesMy/Recharge/Recharge'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goPoints() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pagesHome/PointsMall/PointsMall'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goinvte() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pagesMy/invite/invite"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
gocard() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pagesMy/CardManagement/CardManagement'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
govip() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pagesMy/VIP/vip'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
gofeedback() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pagesMy/feedback/feedback'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,16 @@
|
|||||||
<view class="my-icons"></view>
|
<view class="my-icons"></view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 顶部区域 -->
|
<!-- 顶部区域 -->
|
||||||
|
<view class="tap-top">
|
||||||
|
<view class="tap-box" :class="{ 'act' : tindex == index }" v-for="(item,index) in tapList" :key="index"
|
||||||
|
@click="tapindex(index)">
|
||||||
|
<view class="">{{ item.text }}</view>
|
||||||
|
<view class="gang" :class="{ 'lan' : tindex == index }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-empty v-if="list.length == 0 " mode="coupon" text="内容为空"
|
||||||
|
icon="http://cdn.uviewui.com/uview/empty/coupon.png">
|
||||||
|
</u-empty>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -18,6 +27,16 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: '',
|
||||||
|
tindex: 0,
|
||||||
|
tapList: [{
|
||||||
|
text: "子卡管理"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "交易统计"
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
list: []
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -27,6 +46,9 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
tapindex(index) {
|
||||||
|
this.tindex = index
|
||||||
|
},
|
||||||
goback() {
|
goback() {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
@ -66,4 +88,36 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tap-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tap-box {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gang {
|
||||||
|
width: 35px;
|
||||||
|
height: 4px;
|
||||||
|
// background: #0000ff;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.act {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lan {
|
||||||
|
background: #0000ff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -7,8 +7,17 @@
|
|||||||
<view class="my-icons"></view>
|
<view class="my-icons"></view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 顶部区域 -->
|
<!-- 顶部区域 -->
|
||||||
|
<view class="tap-top">
|
||||||
|
<view class="tap-box" :class="{ 'act' : tindex == index }" v-for="(item,index) in tapList" :key="index"
|
||||||
|
@click="tapindex(index)">
|
||||||
|
<view class="">{{ item.text }}</view>
|
||||||
|
<view class="gang" :class="{ 'lan' : tindex == index }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<!-- Recharge -->
|
<!-- Recharge -->
|
||||||
|
<u-empty v-if="list.length == 0 " mode="coupon" text="内容为空"
|
||||||
|
icon="http://cdn.uviewui.com/uview/empty/coupon.png">
|
||||||
|
</u-empty>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -18,6 +27,19 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: '',
|
||||||
|
tindex: 0,
|
||||||
|
list: [],
|
||||||
|
tapList: [{
|
||||||
|
text: "全部"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "储值卡"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "升数卡"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -27,6 +49,9 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
tapindex(index) {
|
||||||
|
this.tindex = index
|
||||||
|
},
|
||||||
goback() {
|
goback() {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
@ -66,4 +91,36 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tap-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tap-box {
|
||||||
|
width: 33%;
|
||||||
|
text-align: center;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gang {
|
||||||
|
width: 35px;
|
||||||
|
height: 4px;
|
||||||
|
// background: #0000ff;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.act {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lan {
|
||||||
|
background: #0000ff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
520
gasStation-uni/pagesMy/VIP/vip.vue
Normal file
520
gasStation-uni/pagesMy/VIP/vip.vue
Normal file
@ -0,0 +1,520 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- <view class="my-header">
|
||||||
|
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
||||||
|
<view class="my-text">核销记录</view>
|
||||||
|
<view class="my-icons"></view>
|
||||||
|
</view> -->
|
||||||
|
<view class="">
|
||||||
|
|
||||||
|
|
||||||
|
<swiper class="swiper">
|
||||||
|
<swiper-item v-for="(items,indexs) in levelList" :key="indexs">
|
||||||
|
<div class="topBg">
|
||||||
|
<view class="progress b-card" :class="{'b-level-1': items.level === 1,
|
||||||
|
'b-level-2': items.level === 2,'b-level-3': items.level === 3,'b-level-4': items.level === 4}">
|
||||||
|
<view class="heard">
|
||||||
|
尊贵会员
|
||||||
|
</view>
|
||||||
|
<view class="title">
|
||||||
|
这是一段描述：感谢您支持开源项目！
|
||||||
|
</view>
|
||||||
|
<view class="progress-artice">
|
||||||
|
<view class="outer">
|
||||||
|
<view class="inside" :style="{'width': items.ratio+'%'}">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content-item" :style="{'flex':item.flex}"
|
||||||
|
v-for="(item,index) in items.list" :key="index">
|
||||||
|
<view class="rangle">
|
||||||
|
<view class="rangle-text" v-show="index<items.list.length-1"></view>
|
||||||
|
<image class="rangle-gift"
|
||||||
|
src="https://zhoukaiwen.com/img/medal/icon-medal-gift.png" mode=""
|
||||||
|
v-show="index == items.list.length-1"></image>
|
||||||
|
</view>
|
||||||
|
<view class="level">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text">
|
||||||
|
<text>分享小程序解锁其他开源项目！</text>
|
||||||
|
<text class="text-des">1.5k人已解锁</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="medal">
|
||||||
|
<view class="medal-title">
|
||||||
|
<text>特别奖章</text>
|
||||||
|
<text class="text">0个</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="medal-box">
|
||||||
|
<view class="medal-item" v-for="(item,index) in medalList" :key="index">
|
||||||
|
<image class="img" :src="item.imgUrl">
|
||||||
|
</image>
|
||||||
|
<view class="title">
|
||||||
|
{{item.title}}
|
||||||
|
</view>
|
||||||
|
<view class="text">
|
||||||
|
{{item.text}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
levelList: [{
|
||||||
|
level: 1,
|
||||||
|
ratio: 10,
|
||||||
|
list: [{
|
||||||
|
flex: 2,
|
||||||
|
achieve: 25,
|
||||||
|
name: 'LV.1'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 50,
|
||||||
|
name: 'LV.2'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 75,
|
||||||
|
name: 'LV.3'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 100,
|
||||||
|
name: 'LV.4'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
level: 2,
|
||||||
|
ratio: 50,
|
||||||
|
list: [{
|
||||||
|
flex: 1,
|
||||||
|
achieve: 14.2,
|
||||||
|
name: 'LV.1'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 42.8,
|
||||||
|
name: 'LV.2'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 71.5,
|
||||||
|
name: 'LV.3'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 100,
|
||||||
|
name: 'LV.4'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
level: 3,
|
||||||
|
ratio: 80,
|
||||||
|
list: [{
|
||||||
|
flex: 1,
|
||||||
|
achieve: 14.2,
|
||||||
|
name: 'LV.1'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 42.8,
|
||||||
|
name: 'LV.2'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 71.5,
|
||||||
|
name: 'LV.3'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 100,
|
||||||
|
name: 'LV.4'
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
level: 4,
|
||||||
|
ratio: 10,
|
||||||
|
list: [{
|
||||||
|
flex: 1,
|
||||||
|
achieve: 14.2,
|
||||||
|
name: 'LV.1'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 42.8,
|
||||||
|
name: 'LV.2'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 71.5,
|
||||||
|
name: 'LV.3'
|
||||||
|
}, {
|
||||||
|
flex: 2,
|
||||||
|
achieve: 100,
|
||||||
|
name: 'LV.4'
|
||||||
|
}]
|
||||||
|
}],
|
||||||
|
|
||||||
|
|
||||||
|
medalList: [{
|
||||||
|
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-1.png",
|
||||||
|
title: "VIP专属",
|
||||||
|
text: "成为VIP会员"
|
||||||
|
}, {
|
||||||
|
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-2.png",
|
||||||
|
title: "栏目真粉",
|
||||||
|
text: "订阅10个栏目"
|
||||||
|
}, {
|
||||||
|
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-3.png",
|
||||||
|
title: "实力听霸",
|
||||||
|
text: "完成200个音频"
|
||||||
|
}, {
|
||||||
|
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-4.png",
|
||||||
|
title: "时间管家",
|
||||||
|
text: "完成50组短听"
|
||||||
|
}, {
|
||||||
|
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-5.png",
|
||||||
|
title: "养成习惯",
|
||||||
|
text: "连续21天登录音频"
|
||||||
|
}, {
|
||||||
|
imgUrl: "https://zhoukaiwen.com/img/medal/icon-medal-6.png",
|
||||||
|
title: "乐享达人",
|
||||||
|
text: "分享好友20次"
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.my-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 88px;
|
||||||
|
background: #1678ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #ffffff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0px 15px;
|
||||||
|
padding-top: 40px;
|
||||||
|
|
||||||
|
.my-icons {
|
||||||
|
width: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topBg {
|
||||||
|
width: 100%;
|
||||||
|
background: url(https://zhoukaiwen.com/img/qdpz/topBg.png);
|
||||||
|
height: 400rpx;
|
||||||
|
padding-top: 80rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-card {
|
||||||
|
background-color: #fefefe;
|
||||||
|
background-image: linear-gradient(-45deg, #e8e9ec, #f2f2f2);
|
||||||
|
padding: 30rpx 40rpx;
|
||||||
|
margin: 0 30rpx;
|
||||||
|
height: 500rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 2rpx 2rpx 2rpx #efeef3;
|
||||||
|
color: #9a9ca1;
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
color: #6f7275;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background-color: #d8dcdd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
background-color: #d8dcdd;
|
||||||
|
|
||||||
|
.inside {
|
||||||
|
background-color: #6f7275;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rangle {
|
||||||
|
.rangle-text {
|
||||||
|
background-color: #6f7275;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-level-1 {
|
||||||
|
background-image: linear-gradient(45deg, #dde1ea, #a3abb8);
|
||||||
|
color: #34424b;
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
color: #34424b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background-color: #e4e9ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
background-color: #e4e9ed;
|
||||||
|
|
||||||
|
.inside {
|
||||||
|
background-color: #34424b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rangle {
|
||||||
|
.rangle-text {
|
||||||
|
background-color: #34424b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-level-2 {
|
||||||
|
background-image: linear-gradient(45deg, #f0daa4, #d1a165);
|
||||||
|
color: #323b4a;
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
color: #313a49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background-color: #e4e7ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
background-color: #e4e7ec;
|
||||||
|
|
||||||
|
.inside {
|
||||||
|
background-color: #313a49;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rangle {
|
||||||
|
.rangle-text {
|
||||||
|
background-color: #323b4a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-level-3 {
|
||||||
|
background-image: linear-gradient(45deg, #ddc1b5, #c59073);
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
|
||||||
|
.inside {
|
||||||
|
background-color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rangle {
|
||||||
|
.rangle-text {
|
||||||
|
background-color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-level-4 {
|
||||||
|
background-image: linear-gradient(45deg, #303030, #1a1a1a);
|
||||||
|
color: #f0daa4;
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
color: #f0daa4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background-color: #f2e3c4;
|
||||||
|
color: #77582a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
background-color: #f2e3c4;
|
||||||
|
|
||||||
|
.inside {
|
||||||
|
background-color: #f2e3c4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rangle {
|
||||||
|
.rangle-text {
|
||||||
|
background-color: #77582a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.warp {}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
height: 600rpx;
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
.heard {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-artice {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
height: 10rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.inside {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.rangle {
|
||||||
|
height: 10rpx;
|
||||||
|
line-height: 10rpx;
|
||||||
|
margin-top: -10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.rangle-text {
|
||||||
|
width: 10rpx;
|
||||||
|
height: 10rpx;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rangle-gift {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background-color: #cacdd0;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.achieveClass {
|
||||||
|
background-color: #765528;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.level {
|
||||||
|
margin-top: 50rpx;
|
||||||
|
margin-right: -20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
.level {
|
||||||
|
margin-right: 0rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.text-des {
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal {
|
||||||
|
margin: 10rpx 30rpx;
|
||||||
|
|
||||||
|
.medal-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #30333b;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #7c7f81;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.medal-box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.medal-item {
|
||||||
|
width: 33.3333333333333%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #30333b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #7c7f81;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,11 +2,26 @@
|
|||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="my-header">
|
<view class="my-header">
|
||||||
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
|
<view class="my-icons" @click="goback"> <uni-icons type="left" color="#ffffff" size="16"></uni-icons>
|
||||||
|
</view>
|
||||||
<view class="my-text">意见反馈</view>
|
<view class="my-text">意见反馈</view>
|
||||||
<view class="my-icons"></view>
|
<view class="my-icons"></view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 顶部区域 -->
|
<!-- 顶部区域 -->
|
||||||
|
<view class="box-top">
|
||||||
|
<view class="top-title">
|
||||||
|
反馈内容
|
||||||
|
</view>
|
||||||
|
<u--textarea v-model="value5" placeholder="请填写您的反馈和建议" border="bottom"></u--textarea>
|
||||||
|
<view class="top-title" style="border-bottom: none;">
|
||||||
|
相关截图（选填）
|
||||||
|
</view>
|
||||||
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||||
|
:maxCount="5"></u-upload>
|
||||||
|
<view class="anniu">
|
||||||
|
<text>提交反馈</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
@ -14,11 +29,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import upload from '@/utils/upload.js'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: '',
|
||||||
|
value5: '',
|
||||||
|
fileList1: [],
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -27,6 +44,41 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
deletePic(event) {
|
||||||
|
this[`fileList${event.name}`].splice(event.index, 1)
|
||||||
|
},
|
||||||
|
// 新增图片
|
||||||
|
async afterRead(event) {
|
||||||
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||||
|
let lists = [].concat(event.file)
|
||||||
|
let fileListLen = this[`fileList${event.name}`].length
|
||||||
|
lists.map((item) => {
|
||||||
|
this[`fileList${event.name}`].push({
|
||||||
|
...item,
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
for (let i = 0; i < lists.length; i++) {
|
||||||
|
const result = await this.uploadFilePromise(lists[i].url)
|
||||||
|
let item = this[`fileList${event.name}`][fileListLen]
|
||||||
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||||
|
status: 'success',
|
||||||
|
message: '',
|
||||||
|
url: result
|
||||||
|
}))
|
||||||
|
fileListLen++
|
||||||
|
}
|
||||||
|
},
|
||||||
|
uploadFilePromise(url) {
|
||||||
|
upload({
|
||||||
|
url: '/common/upload',
|
||||||
|
filePath: url,
|
||||||
|
}).then((res) => {
|
||||||
|
// console.log('images', res.fileName);
|
||||||
|
// this.images.push(res.fileName)
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
goback() {
|
goback() {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
@ -36,24 +88,24 @@
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.content {
|
.content {
|
||||||
background: #f4f5f6;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-top: 88px;
|
padding-top: 88px;
|
||||||
|
z-index: 999999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-header {
|
.my-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
background: #ffffff;
|
background: #1678ff;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: #000;
|
color: #ffffff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0px 15px;
|
padding: 0px 15px;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
@ -66,4 +118,32 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box-top {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-title {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 0px;
|
||||||
|
border-bottom: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anniu {
|
||||||
|
width: 95%;
|
||||||
|
background: #1678ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
margin: 10px auto;
|
||||||
|
border-radius: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 0px;
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -7,7 +7,17 @@
|
|||||||
<view class="my-icons"></view>
|
<view class="my-icons"></view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 顶部区域 -->
|
<!-- 顶部区域 -->
|
||||||
<view class=""> </view>
|
<view class="tap-top">
|
||||||
|
<view class="tap-box" :class="{ 'act' : tindex == index }" v-for="(item,index) in tapList" :key="index"
|
||||||
|
@click="tapindex(index)">
|
||||||
|
<view class="">{{ item.text }}</view>
|
||||||
|
<view class="gang" :class="{ 'lan' : tindex == index }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-empty v-if="list.length == 0 " mode="coupon" text="内容为空"
|
||||||
|
icon="http://cdn.uviewui.com/uview/empty/coupon.png">
|
||||||
|
</u-empty>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -18,6 +28,18 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: '',
|
||||||
|
tindex: 0,
|
||||||
|
list: [],
|
||||||
|
tapList: [{
|
||||||
|
text: "洗车券"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "兑换券"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "商家券"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -27,6 +49,9 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
tapindex(index) {
|
||||||
|
this.tindex = index
|
||||||
|
},
|
||||||
goback() {
|
goback() {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
@ -66,4 +91,36 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tap-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tap-box {
|
||||||
|
width: 33%;
|
||||||
|
text-align: center;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gang {
|
||||||
|
width: 35px;
|
||||||
|
height: 4px;
|
||||||
|
// background: #0000ff;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.act {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lan {
|
||||||
|
background: #0000ff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user