11.28前端
This commit is contained in:
@QQNZX
parent
827fffe279
commit
dea95896c2
@ -19,7 +19,7 @@
|
||||
<view class="jg-img">
|
||||
<image src="../../static/imgs/viprwm.png" mode=""></image>
|
||||
</view>
|
||||
<view class="jg-size">便利店</view>
|
||||
<view class="jg-size">二维码</view>
|
||||
</view>
|
||||
<view class="jg-box" @click="goActivity()">
|
||||
<view class="jg-img">
|
||||
@ -70,9 +70,12 @@
|
||||
<view class="station">
|
||||
<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 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 class="dis-bt">
|
||||
<view class="">
|
||||
@ -125,13 +128,13 @@
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
],
|
||||
// 当前经度信息
|
||||
longitude:"",
|
||||
longitude: "",
|
||||
// 纬度
|
||||
latitude:"",
|
||||
latitude: "",
|
||||
// 店铺信息
|
||||
store:{},
|
||||
store: {},
|
||||
// 店铺福利信息
|
||||
welfare:[],
|
||||
welfare: [],
|
||||
distance: "",
|
||||
}
|
||||
},
|
||||
@ -139,21 +142,21 @@
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getAddress();
|
||||
// this.getAddress();
|
||||
},
|
||||
components: {
|
||||
tabbar
|
||||
},
|
||||
methods: {
|
||||
// 获取当前位置
|
||||
getAddress(){
|
||||
getAddress() {
|
||||
let _this = this;
|
||||
uni.getLocation({
|
||||
// 谷歌使用wgs84 其他使用gcj02
|
||||
type: 'wgs84', // 使用国测局坐标系
|
||||
type: 'wgs84', // 使用国测局坐标系
|
||||
success: function(res) {
|
||||
_this.longitude = res.longitude;
|
||||
_this.latitude = res.latitude
|
||||
_this.longitude = res.longitude;
|
||||
_this.latitude = res.latitude
|
||||
// console.log('经度: ' + res.longitude);
|
||||
// console.log('纬度: ' + res.latitude);
|
||||
uni.request({
|
||||
@ -163,16 +166,16 @@
|
||||
"lon": res.longitude,
|
||||
"lat": res.latitude
|
||||
},
|
||||
success: function(response){
|
||||
_this.distance = (response.data.data.distance).toFixed(1)
|
||||
_this.store = response.data.data.store
|
||||
success: function(response) {
|
||||
_this.distance = (response.data.data.distance).toFixed(1)
|
||||
_this.store = response.data.data.store
|
||||
let welfare = response.data.data.store.welfare
|
||||
if (welfare != undefined && welfare!=null && welfare!=""){
|
||||
if (welfare.includes(",")){
|
||||
_this.welfare = response.data.data.store.welfare.split(",")
|
||||
}else {
|
||||
_this.welfare.push(response.data.data.store.welfare)
|
||||
}
|
||||
if (welfare != undefined && welfare != null && welfare != "") {
|
||||
if (welfare.includes(",")) {
|
||||
_this.welfare = response.data.data.store.welfare.split(",")
|
||||
} else {
|
||||
_this.welfare.push(response.data.data.store.welfare)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
size="12"></uni-icons> </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 class="my-top-box">
|
||||
<view class="jg-box" @click="gomony()">
|
||||
@ -100,7 +101,7 @@
|
||||
|
||||
</view>
|
||||
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="gowriteoff()">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/jl.png" mode=""></image>
|
||||
</view>
|
||||
@ -109,7 +110,7 @@
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="gorecharge()">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/chongzhi.png" style="width: 30px;height: 30px; "></image>
|
||||
</view>
|
||||
@ -117,7 +118,7 @@
|
||||
充值记录
|
||||
</view>
|
||||
</view>
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="goinvte()">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/lp.png" style="width: 30px;height: 30px; "></image>
|
||||
</view>
|
||||
@ -125,7 +126,7 @@
|
||||
邀请有礼
|
||||
</view>
|
||||
</view>
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="goPoints()">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/jfsc.png" style="width: 30px;height: 30px; "></image>
|
||||
</view>
|
||||
@ -133,7 +134,7 @@
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="gocard()">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/kb.png"></image>
|
||||
</view>
|
||||
@ -141,7 +142,7 @@
|
||||
子卡管理
|
||||
</view>
|
||||
</view>
|
||||
<view class="centenr-sx">
|
||||
<view class="centenr-sx" @click="gofeedback()">
|
||||
<view class="centenr-img">
|
||||
<image src="../../static/my/yj.png"></image>
|
||||
</view>
|
||||
@ -150,14 +151,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-divider text="蓝鲸智慧加油站" :hairline="true"></u-divider>
|
||||
<tabbar :msg="msg"></tabbar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbar from "../../components/tabbar/tabbar.vue"
|
||||
export default {
|
||||
@ -207,6 +206,41 @@
|
||||
uni.navigateTo({
|
||||
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>
|
||||
<!-- 顶部区域 -->
|
||||
|
||||
<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>
|
||||
@ -18,6 +27,16 @@
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
tindex: 0,
|
||||
tapList: [{
|
||||
text: "子卡管理"
|
||||
},
|
||||
{
|
||||
text: "交易统计"
|
||||
},
|
||||
|
||||
],
|
||||
list: []
|
||||
|
||||
|
||||
}
|
||||
@ -27,6 +46,9 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
tapindex(index) {
|
||||
this.tindex = index
|
||||
},
|
||||
goback() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
@ -66,4 +88,36 @@
|
||||
position: fixed;
|
||||
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>
|
||||
@ -7,8 +7,17 @@
|
||||
<view class="my-icons"></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 -->
|
||||
|
||||
<u-empty v-if="list.length == 0 " mode="coupon" text="内容为空"
|
||||
icon="http://cdn.uviewui.com/uview/empty/coupon.png">
|
||||
</u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -18,6 +27,19 @@
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
tindex: 0,
|
||||
list: [],
|
||||
tapList: [{
|
||||
text: "全部"
|
||||
},
|
||||
{
|
||||
text: "储值卡"
|
||||
},
|
||||
{
|
||||
text: "升数卡"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -27,6 +49,9 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
tapindex(index) {
|
||||
this.tindex = index
|
||||
},
|
||||
goback() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
@ -66,4 +91,36 @@
|
||||
position: fixed;
|
||||
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>
|
||||
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="container">
|
||||
<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-icons"></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>
|
||||
@ -14,11 +29,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import upload from '@/utils/upload.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
|
||||
value5: '',
|
||||
fileList1: [],
|
||||
|
||||
}
|
||||
},
|
||||
@ -27,6 +44,41 @@
|
||||
|
||||
},
|
||||
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() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
@ -36,24 +88,24 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
background: #f4f5f6;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 88px;
|
||||
z-index: 999999999;
|
||||
}
|
||||
|
||||
.my-header {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
background: #ffffff;
|
||||
background: #1678ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #000;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 15px;
|
||||
padding-top: 40px;
|
||||
@ -66,4 +118,32 @@
|
||||
position: fixed;
|
||||
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>
|
||||
@ -7,7 +7,17 @@
|
||||
<view class="my-icons"></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>
|
||||
@ -18,6 +28,18 @@
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
tindex: 0,
|
||||
list: [],
|
||||
tapList: [{
|
||||
text: "洗车券"
|
||||
},
|
||||
{
|
||||
text: "兑换券"
|
||||
},
|
||||
{
|
||||
text: "商家券"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
@ -27,6 +49,9 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
tapindex(index) {
|
||||
this.tindex = index
|
||||
},
|
||||
goback() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
@ -66,4 +91,36 @@
|
||||
position: fixed;
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user