Skip to content

J
jiedao-app-customer-new-master
Commit 569da69b authored by lizhan's avatar lizhan
Browse files
Options

📝 【TASK-20240806-01】TASK:APP我的积分静态页面完成 

首页nav栏入口增加，我的积分页面完成，增加图片，增加icon组件
parent 003f471f
Show whitespace changes
Inline Side-by-side
Showing with 1114 additions and 502 deletions
src/pages.json
View file @ 569da69b
......@@ -267,6 +267,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/integral/integral",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/index/index.vue
View file @ 569da69b
<template>
<view class="main">
<view class="hd-v">
<view class="start-bar"></view>
<view class="tabs">
<view class="">{{$lang.lang.index.index}}</view>
<view class="">{{ $lang.lang.index.index }}</view>
<view class="igs">
<view class="index_msg" @click="$request.goPage('../msg/msg')">
<image src="../../static/img/notice.png" mode=""></image>
......@@ -24,15 +23,20 @@
</view>
</view>
<view class="nvs">
<!-- <view class="index_msg" v-for="(item, index) in nvs" @click="toPage(item.url)" :key="index">-->
<view class="index_msg" v-for="(item, index) in nvs" @click="toPage(item.url,item.isHttp)" :key="index">
<!-- <view class="index_msg" v-for="(item, index) in nvs" @click="toPage(item.url)" :key="index">-->
<view
class="index_msg"
v-for="(item, index) in nvs"
@click="toPage(item.url, item.isHttp)"
:key="index"
>
<image :src="item.icon" mode=""></image>
<view v-if="item.num>0" class="order_dian">{{item.num}}</view>
<text>{{item.name}}</text>
<view v-if="item.num > 0" class="order_dian">{{ item.num }}</view>
<text>{{ item.name }}</text>
</view>
</view>
<!-- 搜索 -->
<!-- <view class="order-tabs">
<!-- <view class="order-tabs">
<view class="order-tabs-v2">
<view class="order-tabs-v2s">
<image class="search" src="../../static/img/search.png" mode=""></image>
......@@ -44,85 +48,99 @@
<view class="mssgv">
<view class="mssgv-v" @click="$request.goPage('../notice/notice')">
<view class="mssgv-v-1">
<text>{{$lang.lang.index.system}}</text>
<text>{{$lang.lang.index.notice}}</text>
<text>{{ $lang.lang.index.system }}</text>
<text>{{ $lang.lang.index.notice }}</text>
</view>
<view class="notice">
<swiper class="swiper-nav"
<swiper
class="swiper-nav"
:circular="true"
:vertical="true"
:autoplay="true"
:interval="4000"
:duration="1000"
style="height:70px"
style="height: 70px"
>
<swiper-item
style="display: table"
@touchmove.stop="stopTouchMove"
v-for="(item, index) in noticeData"
:key="index"
>
<swiper-item style="display: table;" @touchmove.stop='stopTouchMove' v-for="(item,index) in noticeData" :key="index">
<view class="mssgv-v-2">
<view class="">{{$lang.locale=='zh'?item.titleZh:item.titleEn}}</view>
<view class="">{{ $lang.locale == 'zh' ? item.titleZh : item.titleEn }}</view>
<view class="">
<image src="../../static/img/time.png" mode=""></image>
<text>{{getDate(item.createTime)}}</text>
<text>{{ getDate(item.createTime) }}</text>
</view>
</view>
<image class="rgt" src="../../static/img/rgt.png" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="actions">
<view class="title">
<image src="../../static/img/dongtai.png" mode=""></image>
<text>{{$lang.lang.index.dynamic}}</text>
<text>{{ $lang.lang.index.dynamic }}</text>
</view>
<view class="act-list">
<view v-if="orderData.length==0" class="noData">
<view v-if="orderData.length == 0" class="noData">
<image src="../../static/img/empty.png" mode="widthFix"></image>
<text>{{$lang.lang.notices.noData}}~</text>
</view>
<view v-else class="item" v-for="(item,index) in orderData" @click="toOrderInfo(item.orderId)">
<text>{{ $lang.lang.notices.noData }}~</text>
</view>
<template v-else>
<view
class="item"
v-for="(item, index) in orderData"
:key="item.orderId"
@click="toOrderInfo(item.orderId)"
>
<view class="item-til">
<image src="../../static/img/sn.png" mode=""></image>
<text>{{$lang.lang.index.orderNo}}:{{item.orderNo}}</text>
<view class="">{{$lang.lang.index.marks}}:{{item.marks}}</view>
<text>{{ $lang.lang.index.orderNo }}:{{ item.orderNo }}</text>
<view class="">{{ $lang.lang.index.marks }}:{{ item.marks }}</view>
</view>
<view class="item-body">
<view class="item-body-v">{{item.departureName}}</view>
<view class="item-body-v">{{ item.departureName }}</view>
<view class="item-body-v-2">
<view class="">{{getStatusName(item.status)}}</view>
<view class="">{{ getStatusName(item.status) }}</view>
<image src="../../static/img/jiant1.png" mode="widthFix"></image>
</view>
<view class="item-body-v">{{item.objectiveName}}</view>
<view class="item-body-v">{{ item.objectiveName }}</view>
</view>
<view class="item-times">
<image src="../../static/img/time.png" mode=""></image>
<text>{{item.createTime}}</text>
<text>{{ item.createTime }}</text>
</view>
</view>
</template>
</view>
</view>
<view class="bom">
<view class="" @click="$request.goPage('../help/help')">
<image src="../../static/img/help.png" mode=""></image>
<text>{{$lang.lang.index.help}}</text>
<text>{{ $lang.lang.index.help }}</text>
</view>
<view class="" @click="$request.goPage('../consult/consult')">
<image src="../../static/img/zixun.png" mode=""></image>
<text>{{$lang.lang.index.consult}}</text>
<text>{{ $lang.lang.index.consult }}</text>
</view>
</view>
<uni-popup ref="adpopup" type="center" :mask-click="false">
<view class="ad-conten">
<image @click="closeAd" class="ad-bg" src='../../static/img/index_close.png'></image>
<view class="ad-title">{{$lang.locale=='zh'?adData.titleZh:adData.titleEn}}</view>
<image @click="closeAd" class="ad-bg" src="../../static/img/index_close.png"></image>
<view class="ad-title">{{ $lang.locale == 'zh' ? adData.titleZh : adData.titleEn }}</view>
<view class="ad-info">
<rich-text :nodes="$lang.locale=='zh'?adData.htmlAppZh:adData.htmlAppEn"></rich-text>
<rich-text
:nodes="$lang.locale == 'zh' ? adData.htmlAppZh : adData.htmlAppEn"
></rich-text>
</view>
<view class="ad-btns">
<view class="ad-btn" @click="closeAd">
<view>{{$lang.lang.index.know}}</view>
<view>{{ $lang.lang.index.know }}</view>
</view>
</view>
</view>
......@@ -132,27 +150,37 @@
<image @click="closeTransport" class="ad-bg1" src="../../static/img/colse1.png"></image>
<view class="transport-title">
<span>{{$lang.lang.notices.transport}}</span>
<span>{{ $lang.lang.notices.transport }}</span>
</view>
<image class="type-bg" src="../../static/img/type-1.png"></image>
<view class="transport-info">
<view v-for="item in transType" @click="toCreatOrder(item.value)" :class="'type'+item.value">{{$lang.locale=='zh'?item.label:item.labelEn}}</view>
<view
v-for="item in transType"
@click="toCreatOrder(item.value)"
:class="'type' + item.value"
>{{ $lang.locale == 'zh' ? item.label : item.labelEn }}</view
>
</view>
</view>
</uni-popup>
<uni-popup ref="vepopup" type="center" :mask-click="false">
<view class="ad-conten">
<image v-if="!forceUpdate" @click="closeVe" class="ad-bg" src='../../static/img/index_close.png'></image>
<view class="ad-title">V{{appVersion}}{{$lang.lang.notices.newVersion}}</view>
<image
v-if="!forceUpdate"
@click="closeVe"
class="ad-bg"
src="../../static/img/index_close.png"
></image>
<view class="ad-title">V{{ appVersion }}{{ $lang.lang.notices.newVersion }}</view>
<view class="ad-info">
<rich-text :nodes="veData"></rich-text>
</view>
<view class="ad-btns">
<view class="ad-btn" @click="toupdate">
<view>{{$lang.lang.notices.update}}</view>
<view>{{ $lang.lang.notices.update }}</view>
</view>
<view v-if="!forceUpdate" class="ad-btn" @click="closeVe">
<view>{{$lang.lang.notices.close}}</view>
<view>{{ $lang.lang.notices.close }}</view>
</view>
</view>
<view class="progress" v-if="showdownLine">
......@@ -164,40 +192,62 @@
</template>
<script>
import md5 from 'js-md5';
import md5 from 'js-md5'
export default {
export default {
data() {
return {
nvs: [
{name: this.$lang.lang.index.delivery, icon: '../../static/img/express.png', url: '../create_order/create_order',num:0},
{name: this.$lang.lang.index.order, icon: '../../static/img/order.png', url: '../order/order',num:0},
{
name: this.$lang.lang.index.delivery,
icon: '../../static/img/express.png',
url: '../create_order/create_order',
num: 0
},
{
name: this.$lang.lang.index.order,
icon: '../../static/img/order.png',
url: '../order/order',
num: 0
},
// {name: this.$lang.lang.index.consolidation, icon: '../../static/img/order.png', url: '../consolidation/consolidation',num:0},
// {name: this.$lang.lang.index.coupon, icon: '../../static/img/copue.png', url: '../coupon/coupon',num:0},
{name: this.$lang.lang.index.old_system, icon: '../../static/img/copue.png', url: '',num:0,isHttp:true},
{
name: this.$lang.lang.index.old_system,
icon: '../../static/img/copue.png',
url: '',
num: 0,
isHttp: true
},
{
name: this.$lang.lang.index.integral,
icon: '../../static/img/copue.png',
url: '/pages/integral/integral',
num: 0
}
// {name: this.$lang.lang.index.price, icon: '../../static/img/wallet.png', url: '../price_inquiry/price_inquiry',num:0},
],
banner: [],
orderData: [],
page: 1,
isIdcard:false,
statusData:[],
name:{},
adData:{},
noticeData:[],
msgHave:false,
version:'1.0.2',
appUrl:'',
veData:'',
versionCode:0,
appVersion:'',
forceUpdate:0,
showdownLine:false,
downloadNum:0,//下载百分比
totalSize:0,//下载总量
transType:[],
preLoginPage:false,
searchKey:'' //搜索关键词
isIdcard: false,
statusData: [],
name: {},
adData: {},
noticeData: [],
msgHave: false,
version: '1.0.2',
appUrl: '',
veData: '',
versionCode: 0,
appVersion: '',
forceUpdate: 0,
showdownLine: false,
downloadNum: 0, //下载百分比
totalSize: 0, //下载总量
transType: [],
preLoginPage: false,
searchKey: '' //搜索关键词
}
},
onLoad(options) {
......@@ -209,83 +259,85 @@ import md5 from 'js-md5';
this.getAdData()
},
onShow() {
this.getOrder()
if(this.banner.length == 0){
if (this.banner.length == 0) {
this.getBanner()
}
if(this.orderData.length == 0){
if (this.orderData.length == 0) {
this.getOrderData()
}
},
methods: {
toupdate(){
toupdate() {
let that = this
if(that.showdownLine) return
if (that.showdownLine) return
// #ifdef APP-PLUS
let platform = uni.getSystemInfoSync().platform.toLocaleLowerCase()
if (platform == 'ios') {
plus.runtime.openURL('https://apps.apple.com/us/app/e-c-logistics/id6466407990')
}else{
} else {
uni.showLoading({
title: this.$lang.lang.notices.startDown,
title: this.$lang.lang.notices.startDown
})
that.showdownLine = true
var dtask = plus.downloader.createDownload(
that.appUrl,
{
}, (d, status) => {
var dtask = plus.downloader.createDownload(that.appUrl, {}, (d, status) => {
uni.hideLoading()
if (status == 200) {
that.closeVe()
that.showdownLine = false
console.log("下载成功安装: " + d.filename);
console.log('下载成功安装: ' + d.filename)
plus.runtime.install(d.filename)
} else {
that.showdownLine = false
that.closeVe()
plus.nativeUI.alert(that.$lang.lang.notices.failDown)
}
});
})
// uni.navigateTo({
// url:'../updateView/updateView?url='+this.appUrl
// })
// 下载进度
dtask.addEventListener("statechanged", function (download, status) {
if(that.downloadNum==100){
uni.hideLoading();
dtask.addEventListener('statechanged', function (download, status) {
if (that.downloadNum == 100) {
uni.hideLoading()
}
switch (download.state) {
case 2:
break;
case 3://进度条百分比 totalSize为总量，baifen为当前下载的百分比
if(that.totalSize==0){
that.totalSize=parseInt(download.totalSize);
break
case 3: //进度条百分比 totalSize为总量，baifen为当前下载的百分比
if (that.totalSize == 0) {
that.totalSize = parseInt(download.totalSize)
}
if(parseInt(download.downloadedSize/that.totalSize*100)!=that.downloadNum){
that.downloadNum=parseInt(download.downloadedSize/that.totalSize*100);
if (parseInt((download.downloadedSize / that.totalSize) * 100) != that.downloadNum) {
that.downloadNum = parseInt((download.downloadedSize / that.totalSize) * 100)
}
break;
break
case 4:
// mui.toast("下载完成");
uni.hideLoading();
break;
uni.hideLoading()
break
}
});
dtask.start();
})
dtask.start()
}
// #endif
},
getVersion(){
this.version = uni.getStorageSync('appversion');
this.versionCode = uni.getStorageSync('versionCode');
getVersion() {
this.version = uni.getStorageSync('appversion')
this.versionCode = uni.getStorageSync('versionCode')
this.getVeData()
},
old() {
const code = md5(md5('jiedaoguoji' + this.userInfo.mobile))
const url = 'http://backend.groupage.cn/#/pages/login/free_login?phone=' + this.userInfo.mobile + '&code=' + code + '&area_code=+' + this.userInfo.areaCode
const url =
'http://backend.groupage.cn/#/pages/login/free_login?phone=' +
this.userInfo.mobile +
'&code=' +
code +
'&area_code=+' +
this.userInfo.areaCode
// #ifdef APP-PLUS
plus.runtime.openURL(url)
// #endif
......@@ -294,37 +346,36 @@ import md5 from 'js-md5';
window.open(url)
// #endif
},
getUserInfo(){
getUserInfo() {
let that = this
that.$request.get('/app-api/member/user/get').then(res => {
that.$request.get('/app-api/member/user/get').then((res) => {
console.log(res.data)
if(res.code==0&&res.data){
if(res.data.isSimplePassword){
if (res.code == 0 && res.data) {
if (res.data.isSimplePassword) {
uni.showModal({
title: that.$lang.lang.notices.notice,
confirmText:that.$lang.lang.site.editPsd,
cancelText:that.$lang.lang.index.know,
confirmText: that.$lang.lang.site.editPsd,
cancelText: that.$lang.lang.index.know,
content: that.$lang.lang.notices.easyPass,
success: function (res) {
if (res.confirm) {
uni.navigateTo({
url:"../editPsd/editPsd"
url: '../editPsd/editPsd'
})
}else if(!that.preLoginPage){
} else if (!that.preLoginPage) {
that.openAd()
// #ifdef APP-PLUS
if(that.appVersion){
if (that.appVersion) {
that.openVe()
}
// #endif
}
}
});
}else if(!that.preLoginPage){
})
} else if (!that.preLoginPage) {
that.openAd()
// #ifdef APP-PLUS
if(that.appVersion){
if (that.appVersion) {
that.openVe()
}
// #endif
......@@ -333,96 +384,100 @@ import md5 from 'js-md5';
}
})
},
getOrder(){
this.$request.get('/app-api/member/user/angle-mark').then(res=>{
if(res.code==0&&res.data){
getOrder() {
this.$request.get('/app-api/member/user/angle-mark').then((res) => {
if (res.code == 0 && res.data) {
this.nvs[1].num = res.data.allOrderNum
this.nvs[2].num = res.data.couponNum
if(res.data.unreadMessageNum&&res.data.unreadMessageNum>0){
if (res.data.unreadMessageNum && res.data.unreadMessageNum > 0) {
this.msgHave = true
}else{
} else {
this.msgHave = false
}
}
})
},
getStatusName(status){
getStatusName(status) {
var statusName = ''
let that = this
if(that.statusData.length>0){
var name = that.statusData.filter(item=>item.value == status)||[]
if(name.length>0) {
if(that.$lang.locale=='zh'){
if (that.statusData.length > 0) {
var name = that.statusData.filter((item) => item.value == status) || []
if (name.length > 0) {
if (that.$lang.locale == 'zh') {
statusName = name[0].label
}else{
} else {
statusName = name[0].labelEn
}
}
}
return statusName
},
openAd(){
openAd() {
console.log(this.adData)
if(JSON.stringify(this.adData) != "{}"){
if (JSON.stringify(this.adData) != '{}') {
this.$refs.adpopup.open()
}
},
closeAd(){
closeAd() {
this.preLoginPage = false
this.$refs.adpopup.close()
},
closeTransport(){
closeTransport() {
this.$refs.choiceTransport.close()
},
openTransport(){
openTransport() {
this.$refs.choiceTransport.open()
},
openVe(){
openVe() {
this.$refs.vepopup.open()
},
closeVe(){
closeVe() {
this.$refs.vepopup.close()
// this.getUserInfo()
},
getBanner () {
this.$request.get('/app-api/ecw/banner/page', {page: 1, rows: 20,status:0}).then(res => {
if(res.code==0&&res.data&&res.data.list&&res.data.list.length>0){
getBanner() {
this.$request
.get('/app-api/ecw/banner/page', { page: 1, rows: 20, status: 0 })
.then((res) => {
if (res.code == 0 && res.data && res.data.list && res.data.list.length > 0) {
this.banner = res.data.list
}
})
},
getOrderData () {
this.$request.get('/app-api/my/order/dynamic/page', { page: this.page, rows: 6}).then(res => {
if(res.code==0&&res.data&&res.data.list&&res.data.list.length>0){
getOrderData() {
this.$request
.get('/app-api/my/order/dynamic/page', { page: this.page, rows: 6 })
.then((res) => {
if (res.code == 0 && res.data && res.data.list && res.data.list.length > 0) {
this.orderData = res.data.list
}
})
},
getNoticeData(){
this.$request.get('/app-api/system/notice/page', { page: 1, rows: 6}).then(res => {
if(res.code==0&&res.data&&res.data.list&&res.data.list.length>0){
getNoticeData() {
this.$request.get('/app-api/system/notice/page', { page: 1, rows: 6 }).then((res) => {
if (res.code == 0 && res.data && res.data.list && res.data.list.length > 0) {
this.noticeData = res.data.list
}
})
},
getDate(time) {
const date = new Date(time);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
const date = new Date(time)
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
month = month > 9 ? month : '0' + month
day = day > 9 ? day : '0' + day
return `${year}-${month}-${day}`
},
getAdData(){
this.$request.get('/app-api/ecw/banner-pop/page', { page: 1, rows: 6}).then(res => {
if(res.code==0&&res.data&&res.data.list&&res.data.list.length>0){
getAdData() {
this.$request.get('/app-api/ecw/banner-pop/page', { page: 1, rows: 6 }).then((res) => {
if (res.code == 0 && res.data && res.data.list && res.data.list.length > 0) {
this.adData = res.data.list[0]
let pages = getCurrentPages() // 获取栈实例
if(pages.length>1){
if (pages.length > 1) {
let prevPage = pages[pages.length - 2]
if(prevPage&&prevPage.route=='pages/login/login'){
if (prevPage && prevPage.route == 'pages/login/login') {
this.preLoginPage = true
}
}
......@@ -434,89 +489,93 @@ import md5 from 'js-md5';
this.getUserInfo()
//#endif
})
},
getVeData(){
getVeData() {
let that = this
var addType = uni.getSystemInfoSync().platform=='ios'?'userIos':'userAndroid'
that.$request.get('/app-api/system/version/latestVersion', { appType: addType,versionCode:that.versionCode}).then(res => {
var addType = uni.getSystemInfoSync().platform == 'ios' ? 'userIos' : 'userAndroid'
that.$request
.get('/app-api/system/version/latestVersion', {
appType: addType,
versionCode: that.versionCode
})
.then((res) => {
console.log(res)
if(res.code==0&&res.data){
if (res.code == 0 && res.data) {
that.veData = res.data.desp
that.appUrl = res.data.appUrl
that.appVersion = res.data.appVersion
that.forceUpdate = res.data.forceUpdate
// that.openVe()
}else{
} else {
// that.getUserInfo()
}
})
},
getStatusData(){
this.$request.getConfig('order_status').then(res => {
if(res.code==0&&res.data&&res.data.list&&res.data.list.length>0){
getStatusData() {
this.$request.getConfig('order_status').then((res) => {
if (res.code == 0 && res.data && res.data.list && res.data.list.length > 0) {
this.statusData = res.data.list
}
})
},
getIdcard () {
this.$request.get('/app-api/member/user/get-auth-idcard-info').then(res => {
if(res.code==0&&res.data&&res.data.status==2){
getIdcard() {
this.$request.get('/app-api/member/user/get-auth-idcard-info').then((res) => {
if (res.code == 0 && res.data && res.data.status == 2) {
this.isIdcard = true
}
})
},
toPage(url,isHttp){
if(isHttp){
toPage(url, isHttp) {
if (isHttp) {
// window.location.href=url;
this.old()
}else{
if(url=='../create_order/create_order'){
} else {
if (url == '../create_order/create_order') {
this.openTransport()
}else{
} else {
uni.navigateTo({
url:url
url: url
})
}
}
},
toCreatOrder(id){
toCreatOrder(id) {
this.closeTransport()
uni.navigateTo({
url:'../create_order/create_order?transportId='+id
url: '../create_order/create_order?transportId=' + id
})
},
toBanner(id){
toBanner(id) {
uni.navigateTo({
url:'../banner_info/banner_info?id='+id
url: '../banner_info/banner_info?id=' + id
})
},
toOrderInfo(id){
toOrderInfo(id) {
uni.navigateTo({
url:'../orderInfo/orderInfo?id='+id
url: '../orderInfo/orderInfo?id=' + id
})
},
orderConfig () {
orderConfig() {
let that = this
that.$request.getConfig('transport_type').then(res => {
if(res.code==0&&res.data&&res.data.list.length > 0){
that.$request.getConfig('transport_type').then((res) => {
if (res.code == 0 && res.data && res.data.list.length > 0) {
that.transType = res.data.list
}
})
},
goPage(url){
goPage(url) {
uni.redirectTo({
url:url,
url: url
})
},
toMyOrder(){
toMyOrder() {
uni.navigateTo({
url:'../order/order?key='+this.searchKey
url: '../order/order?key=' + this.searchKey
})
}
}
}
</script>
<style>
@import url(../../static/css/index.css);
@import url(../../static/css/index.css);
</style>
src/pages/integral/components/gift.vue 0 → 100644
View file @ 569da69b
<template>
<view class="gift">
<view class="gift-remark">不同网点兑换积分不同</view>
<view class="gift-select">
<view class="select-list">
<view class="list-item"
>中国
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
<view class="list-item"
>大连
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
</view>
<view class="select-right">
请选择网点
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
</view>
<view class="gift-content">
<view class="gift-item" v-for="item in 7" :key="item">
<view class="gift-image-box">
<image class="gift-image" mode="cover" src="../../../static/img/wallet.png"></image>
<view class="gift-tag">
<view class="tags">
<image class="tag-image" src="../../../static/img/score.png"></image>
<view class="tag-text">{{ item }}</view>
</view>
</view>
<view class="foot-tag">剩余99份</view>
</view>
<view class="gift-name">商品名称</view>
<view class="gift-menu">
<view class="gift-menu-text">包邮</view>
<view class="gift-menu-text">到付</view>
<view class="gift-menu-text">自提</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.gift {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.gift-remark {
padding: 0 32upx;
width: 100%;
height: 42upx;
display: flex;
align-items: center;
justify-content: right;
box-sizing: border-box;
font-size: 20upx;
color: red;
}
.gift-select {
padding: 0 32upx;
display: flex;
width: 100%;
height: 70upx;
color: #b3b3b3;
box-sizing: border-box;
align-items: center;
border-bottom: 2upx solid #e7e7e7;
}
.select-list {
font-size: 20upx;
display: flex;
align-items: center;
}
.list-item {
display: flex;
align-items: center;
margin-right: 20upx;
&:last-child {
margin-right: 0;
}
}
.list-icon {
font-weight: 600;
margin-left: 50upx;
&:last-child {
margin-left: 20upx;
}
}
.select-right {
margin-left: auto;
font-size: 24upx;
}
.gift-content {
overflow-y: auto;
width: 100%;
height: calc(100% - 152upx);
padding: 32upx 32upx;
gap: 22upx;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
justify-content: space-between;
}
.gift-item {
display: flex;
flex-direction: column;
width: 300upx;
height: 318upx;
box-sizing: border-box;
// background-color: red;
}
.gift-image {
margin: 0;
width: 300upx;
height: 200upx;
}
.gift-name {
margin: 0;
display: flex;
height: 60upx;
font-size: 24upx;
color: #000000;
align-items: center;
}
.gift-menu {
display: flex;
height: 58upx;
font-size: 20upx;
color: #b3b3b3;
align-items: center;
}
.gift-menu-text {
padding: 4upx 4upx;
border: 2upx solid #ef8d15;
font-size: 24upx;
color: #ef8d15;
border-radius: 20upx;
margin-right: 10upx;
&:last-child {
margin-right: 0;
}
}
.gift-image-box {
position: relative;
}
.gift-tag {
position: absolute;
top: 0;
left: 0;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
width: 80upx;
height: 32upx;
background: linear-gradient(#ef7e1a, #f1b009);
transform: skewX(15deg);
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
.tag-image {
width: 24upx;
height: 24upx;
}
.tags {
display: flex;
align-items: center;
justify-content: center;
transform: skewX(-15deg);
}
.tag-text {
margin-left: 4upx;
font-weight: 500;
color: #fff;
font-size: 24upx;
}
.foot-tag {
position: absolute;
padding: 0 8upx;
bottom: 0;
right: 0;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
min-width: 110upx;
height: 32upx;
color: #fff;
font-size: 22upx;
box-sizing: border-box;
background: linear-gradient(#ef7e1a, #f1b009);
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
</style>
src/pages/integral/components/points.vue 0 → 100644
View file @ 569da69b
<template>
<view class="int">
<view class="int-centent" v-for="item in 6" :key="item">
<view class="int-centent-left">
<view class="centent-tag">
<view class="tag-text">APP注册</view>
</view>
<image class="centent-image" src="../../../static/img/company.png"></image>
</view>
<view class="int-centent-right">
<view class="centent-title">此处是活动标题</view>
<view class="centent-text"
>此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，</view
>
</view>
</view>
</view>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.int {
padding: 30upx 0;
height: inherit;
overflow-y: auto;
}
.int-centent {
margin-bottom: 20upx;
width: 100%;
height: 220upx;
display: flex;
padding: 0 30upx;
box-sizing: border-box;
border-bottom: 2upx solid #e7e7e7;
&:last-child {
margin-bottom: 0;
}
}
.int-centent-left {
position: relative;
width: 200upx;
height: inherit;
.centent-image {
width: 200upx;
height: 200upx;
}
}
.int-centent-right {
flex: 1;
height: inherit;
padding-left: 20upx;
box-sizing: border-box;
.centent-title {
font-size: 28upx;
color: #333;
margin-bottom: 20upx;
}
.centent-text {
font-size: 20upx;
color: #666;
line-height: 36upx;
}
}
.centent-tag {
position: absolute;
top: 0;
left: 0;
z-index: 9;
display: flex;
font-size: 24upx;
min-width: 120upx;
height: 40upx;
color: #fff;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: skewX(15deg);
background-color: #ff4d4f;
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
.tag-text {
transform: skewX(-15deg);
}
</style>
src/pages/integral/integral.vue 0 → 100644
View file @ 569da69b
<template>
<view class="integral">
<dHeader :title="$lang.lang.integral.info"></dHeader>
<view class="container">
<view class="header">
<view class="avatar">
<image src="../../static/img/vip_avatar.png" mode=""></image>
</view>
<view class="content">
<view class="content-title">{{ $lang.lang.integral.headerTitle }}白金会员</view>
<view class="content-text">
<view class="text">{{ $lang.lang.integral.spend }} 100</view>
<view class="text">{{ $lang.lang.integral.available }} 88</view>
</view>
<view class="divider">
<view class="divider-active"></view>
<view class="divider-unm">238</view>
<view class="divider-level">VIP2</view>
</view>
</view>
<view class="classification">
<image class="classification-image" src="../../static/img/vip_2.png"></image>
<view class="log-menu">
<view class="menu-item">积分日志 &gt;</view>
<view class="menu-item">兑换日志 &gt;</view>
</view>
</view>
</view>
<view class="main">
<view class="main-nav">
<view class="nav-item" :class="{ 'nav-active1': navIndex === 0 }" @click="navIndex = 0"
>兑换礼品</view
>
<view class="nav-item" :class="{ 'nav-active2': navIndex === 1 }" @click="navIndex = 1"
>积分活动</view
>
</view>
<view class="main-content">
<gift v-if="navIndex === 0"></gift>
<points v-if="navIndex === 1"></points>
</view>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
import points from './components/points.vue'
import gift from './components/gift.vue'
export default {
components: {
dHeader,
gift,
points
},
data() {
return {
navIndex: 0
}
}
}
</script>
<style>
@import url(../../static/css/integral.css);
</style>
src/static/css/integral.css 0 → 100644
View file @ 569da69b
page {
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
height: 100%;
}
.integral {
padding: 0 32upx;
height: inherit;
}
.container {
width: 100%;
display: flex;
height: inherit;
flex-direction: column;
box-sizing: border-box;
background-color: #C3C8D3;
border-top-left-radius: 12upx;
border-top-right-radius: 12upx;
}
.header {
padding: 32upx 32upx 20upx;
height: 240upx;
display: flex;
color: #8C8E97;
font-size: 24upx;
box-sizing: border-box;
}
.avatar image {
width: 68upx;
height: 68upx;
}
.content {
flex: 1;
margin-left: 10upx;
}
.content .content-title {
font-size: 32upx;
color: #2A426B;
margin-bottom: 16upx;
text-shadow: 2upx 4upx 12upx rgba(0, 0, 0, 0.5);
}
.content .content-text {
display: flex;
}
.content .content-text .text {
text-align: left;
margin-right: 20upx;
font-size: 20upx;
/* transform: scale(0.8); */
}
.content .divider {
position: relative;
margin-top: 76upx;
width: 260upx;
height: 4upx;
background-color: #fff;
border-radius: 4upx;
}
.divider-active {
position: absolute;
top: 0;
left: 0;
width: 130upx;
height: 4upx;
background-color: #2A426B;
border-radius: 4upx;
}
.divider-unm {
position: absolute;
top: 0;
right: 50%;
color: #2A426B;
transform: translate(50%, -110%);
}
.divider-level {
position: absolute;
top: 0;
right: 0;
color: #2A426B;
transform: translate(130%, -50%);
}
.classification {
position: relative;
display: flex;
flex-direction: column;
}
.classification-image {
position: absolute;
width: 164upx;
height: 116upx;
transform: translateY(-60upx);
}
.log-menu {
margin-top: auto;
text-align: right;
color: #8A8E96;
}
.menu-item {
font-size: 24upx;
margin-top: 10upx;
}
.main {
overflow: hidden;
flex: 1;
height: calc(100% - 240upx);
background-color: #fff;
border-top-left-radius: 18upx;
border-top-right-radius: 18upx;
box-shadow: -2px 0px 12px 0 rgba(0, 0, 0, 0.1)
}
.main-nav {
display: flex;
width: 100%;
height: 80upx;
align-items: center;
justify-content: space-around;
background-color: #D1D5E1;
box-sizing: border-box;
}
.nav-item {
flex: 1;
display: flex;
height: 80upx;
font-size: 28upx;
color: #3F4044;
align-items: center;
justify-content: center;
border: 0;
}
.nav-active1 {
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 80% 0%);
/* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
font-weight: 600;
background-color: #fff !important;
color: #000 !important;
position: relative;
overflow: hidden;
}
.nav-active2 {
clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
/* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
font-weight: 600;
background-color: #fff !important;
color: #000 !important;
position: relative;
overflow: hidden;
}
.main-content {
height: calc(100% - 80upx);
box-sizing: border-box;
}
src/static/lang/en.js
View file @ 569da69b
......@@ -456,7 +456,14 @@ export default {
old_system: 'Old Order',
sea: 'Groupage container',
seaAir: 'Sea&air Cargo',
air: 'Air Cargo'
air: 'Air Cargo',
integral: 'my integral'
},
integral: {
info: 'my integral',
headerTitle: 'Honorable',
spend: 'redeemed points are',
available: 'The available credits are'
},
levite: {
levite: 'warehousing notes'
......
src/static/lang/zh.js
View file @ 569da69b
......@@ -451,7 +451,14 @@ export default {
old_system: '旧订单',
sea: '海运拼柜',
seaAir: '海空联运',
air: '空运专线'
air: '空运专线',
integral: '我的积分'
},
integral: {
info: '我的积分',
headerTitle: '尊贵的',
spend: '已兑换积分为',
available: '可用积分为'
},
levite: {
levite: '入仓须知'
......
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