Commit 1cebb90f authored by youjie's avatar youjie

幸福存折,积分,省钱

parent 5df2d07e
...@@ -136,13 +136,6 @@ ...@@ -136,13 +136,6 @@
} }
} }
}, },
{
"path": "happinessPasDetails",
"style": {
"navigationBarBackgroundColor": "#F3F1EF",
"backgroundColor": "#F3F1EF"
}
},
{ {
"path": "points", "path": "points",
"style": { "style": {
...@@ -154,7 +147,7 @@ ...@@ -154,7 +147,7 @@
} }
}, },
{ {
"path": "pointsDetails", "path": "discountDetails",
"style": { "style": {
"navigationBarBackgroundColor": "#F3F1EF", "navigationBarBackgroundColor": "#F3F1EF",
"backgroundColor": "#F3F1EF" "backgroundColor": "#F3F1EF"
......
...@@ -479,7 +479,7 @@ ...@@ -479,7 +479,7 @@
this.apipost("GetDetailsByErpOrderId_post",{ this.apipost("GetDetailsByErpOrderId_post",{
OrderNo: this.OrderNo, OrderNo: this.OrderNo,
ErpOrderId: this.id, ErpOrderId: this.id,
OrderTypeStr: this.OrderTypeStr, OrderTypeStr: 'DMC',
},res=>{ },res=>{
if(res.resultCode==1){ if(res.resultCode==1){
this.OrderNo = res.data.OrderNo this.OrderNo = res.data.OrderNo
......
...@@ -767,8 +767,11 @@ ...@@ -767,8 +767,11 @@
this.msg.companyId = this.branchList[0].BId; this.msg.companyId = this.branchList[0].BId;
// #endif // #endif
this.currentBrachName = this.branchList[0].BName; if(this.branchList&&this.branchList.length>0) {
this.CityId = this.branchList[0].CityId; this.currentBrachName = this.branchList[0].BName;
this.CityId = this.branchList[0].CityId;
}
this.currentLineId = this.lineList[0] this.currentLineId = this.lineList[0]
if (this.msg.lineId != 0) { if (this.msg.lineId != 0) {
let temp = this.lineList.find(x => x.LineID == this.msg.lineId) let temp = this.lineList.find(x => x.LineID == this.msg.lineId)
......
...@@ -632,6 +632,7 @@ ...@@ -632,6 +632,7 @@
onLoad(option) { onLoad(option) {
if (option.orderData) { if (option.orderData) {
this.orderData = JSON.parse(decodeURIComponent(option.orderData)); this.orderData = JSON.parse(decodeURIComponent(option.orderData));
this.orderId = this.orderData.model.OrderId
} else if(option.OrderNo){ } else if(option.OrderNo){
this.OrderNo = option.OrderNo this.OrderNo = option.OrderNo
this.getOrderInfoHandler(this.OrderNo) this.getOrderInfoHandler(this.OrderNo)
...@@ -729,7 +730,7 @@ ...@@ -729,7 +730,7 @@
}) })
}, },
getOrderInfoByIdAndType(){ getOrderInfoByIdAndType(){
const parameter={ErpOrderId:this.orderData.model.OrderId,OrderTypeStr:'DMC'} const parameter={ErpOrderId:this.orderId,OrderTypeStr:'DMC'}
this.apipost("GetDetailsByErpOrderId_post",parameter,res=>{ this.apipost("GetDetailsByErpOrderId_post",parameter,res=>{
if(res.resultCode==1){ if(res.resultCode==1){
this.OrderNo = res.data.OrderNo this.OrderNo = res.data.OrderNo
...@@ -893,7 +894,7 @@ ...@@ -893,7 +894,7 @@
); );
// #endif // #endif
// #ifdef MP-DI // #ifdef MP-DI
if(!this.OrderNo){ if(!this.OrderNo||!this.orderId){
this.getOrderInfoByIdAndType() this.getOrderInfoByIdAndType()
} }
// #endif // #endif
......
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
我的积分 我的积分
</text> </text>
</view> </view>
<view class="column"> <view class="column" @click="goUrl('/pages/user-center/costSavingStatistics')">
<text> <text>
{{statistics.totalSavings>0?formatNumberWithUnit(statistics.totalSavings):0}} {{statistics.totalSavings>0?formatNumberWithUnit(statistics.totalSavings):0}}
</text> </text>
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
我的积分 我的积分
</text> </text>
</view> </view>
<view class="column"> <view class="column" @click="goUrl('/pages/user-center/costSavingStatistics')">
<text>{{statistics.totalSavings>0?formatNumberWithUnit(statistics.totalSavings):0}}</text> <text>{{statistics.totalSavings>0?formatNumberWithUnit(statistics.totalSavings):0}}</text>
<text class="userHeadPasTTeT">累计已省</text> <text class="userHeadPasTTeT">累计已省</text>
</view> </view>
......
This diff is collapsed.
<template> <template>
<view class="hapPasDetBox column" style="width:100vw;height:100vh;background: #F3F1EF;"> <view class="hapPasDetBox column" style="width:100vw;height:100vh;background: #F3F1EF;">
<view class="hapPasDetTitle">积分{{PassbookAata.type==1?'收获':'消耗'}}</view> <view class="hapPasDetTitle">
<view class="hapPasDetNum">{{PassbookAata.type==1?'+':'-'}}{{ PassbookAata.integralNum }}</view> {{pageTitle}}
<view class="hapPasDetBox"> <template v-if="discountType==1||discountType==5">{{PassbookAata.type==1?'收入':'支出'}}</template>
<view class="hapPasDetImg row" @click="goProduct"> <template v-if="discountType>1&&discountType<5">{{PassbookAata.type==1?'领取':'使用'}}</template>
<template v-else-if="discountType==6">{{PassbookAata.type==1?'收获':'消耗'}}</template>
</view>
<view class="hapPasDetNum">
<template v-if="PassbookAata.type==1">+</template>
<template v-else>
<template v-if="discountType<5">-</template>
</template>
<template v-if="discountType<6">{{ PassbookAata.money }}</template>
<template v-else-if="discountType==6">{{ PassbookAata.integralNum }}</template>
</view>
<view class="hapPasDetBJ">
<view class="hapPasDetImg row" @click="goDetails">
<image mode="scaleToFill" :src="PassbookAata.imgCover" /> <image mode="scaleToFill" :src="PassbookAata.imgCover" />
<view class="col">{{ PassbookAata.lineName }}</view> <view class="col">{{ PassbookAata.lineName }}</view>
</view> </view>
<view class="row hapPasDetText" v-if="PassbookAata.orderType">
<text class="hapPasDetL">订单类型</text>
<view class="hapPasDetR col">
<text class="hapPasDetRC">
<template v-if="PassbookAata.orderType==1">线路</template>
<template v-else-if="PassbookAata.orderType==2">签证</template>
<template v-else-if="PassbookAata.orderType==3">包车</template>
<template v-else-if="PassbookAata.orderType==4">门票</template>
<template v-else-if="PassbookAata.orderType==5">机票</template>
<template v-else-if="PassbookAata.orderType==6">酒店</template>
</text>
</view>
</view>
<view class="row hapPasDetText"> <view class="row hapPasDetText">
<text class="hapPasDetL">订单号</text> <text class="hapPasDetL">订单号</text>
<view class="hapPasDetR col"> <view class="hapPasDetR col">
...@@ -15,19 +40,24 @@ ...@@ -15,19 +40,24 @@
</view> </view>
</view> </view>
<view class="row hapPasDetText"> <view class="row hapPasDetText">
<text class="hapPasDetL">{{PassbookAata.type==1?'收获':'消耗'}}日期</text> <text class="hapPasDetL">
<template v-if="discountType==1||discountType==5">{{PassbookAata.type==1?'收入':'支出'}}</template>
<template v-else-if="discountType>1&&discountType<5">{{PassbookAata.type==1?'领取':'使用'}}</template>
<template v-else-if="discountType==6">{{PassbookAata.type==1?'收获':'消耗'}}</template>
日期
</text>
<view class="hapPasDetR col"> <view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.updateTime }}</text> <text class="hapPasDetRC">{{ PassbookAata.updateTime }}</text>
</view> </view>
</view> </view>
<view class="row hapPasDetText"> <view class="row hapPasDetText" v-if="PassbookAata.tcnum">
<text class="hapPasDetL">团号</text> <text class="hapPasDetL">团号</text>
<view class="hapPasDetR col"> <view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.tcnum }}</text> <text class="hapPasDetRC">{{ PassbookAata.tcnum }}</text>
<text class="hapPasDetRCop" @click="handleCopy(PassbookAata.tcnum)">复制</text> <text class="hapPasDetRCop" @click="handleCopy(PassbookAata.tcnum)">复制</text>
</view> </view>
</view> </view>
<view class="row hapPasDetText"> <view class="row hapPasDetText" v-if="PassbookAata.tcnum">
<text class="hapPasDetL">出团日期</text> <text class="hapPasDetL">出团日期</text>
<view class="hapPasDetR col"> <view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.tcStartDate }}</text> <text class="hapPasDetRC">{{ PassbookAata.tcStartDate }}</text>
...@@ -51,8 +81,10 @@ ...@@ -51,8 +81,10 @@
}, },
data() { data() {
return { return {
pageTitle: '',
scrollTop: 0, scrollTop: 0,
PassbookAata:{}, PassbookAata:{},
discountType: 0,
}; };
}, },
onLoad(option) { onLoad(option) {
...@@ -60,6 +92,18 @@ ...@@ -60,6 +92,18 @@
this.PassbookAata = JSON.parse( this.PassbookAata = JSON.parse(
decodeURIComponent(option.data) decodeURIComponent(option.data)
) )
this.discountType = option.discountType
if(option.discountType==1||option.discountType==5){
this.pageTitle = '幸福存折'
}else if(option.discountType==2){
this.pageTitle = 'VIP折扣'
}else if(option.discountType==3){
this.pageTitle = '抵用券'
}else if(option.discountType==4){
this.pageTitle = '折扣券'
}else if(option.discountType==6){
this.pageTitle = '积分'
}
} }
}, },
...@@ -74,25 +118,61 @@ ...@@ -74,25 +118,61 @@
data: String(text), data: String(text),
}); });
}, },
goProduct(){ goDetails(){
return let item = this.PassbookAata
uni.navigateTo({ let url = null
url: "/pages/product/productDetails/productDetails?id="+this.PassbookAata.orderId let msg = null
}) // #ifdef MP-DI
} if(item.orderType==1) {
msg = `orderId=${item.orderId}`
url = `jiuzhai/jz_SureOrder?` //线路
}
else if(item.orderType==4){//景点门票
}else if(item.orderType==6){//酒店住宿
}else if(item.orderType==3){//目的地用车
}else if(item.orderType==2) {//签证
msg = `orderId=${item.orderId}&OrderTypeStr=Visa`
url = `visa/visa_SureOrder?`
}else if(item.orderType==5){//机票
msg = `id=${item.orderId}&OrderTypeStr=DMC`
url = `airTicket/airTicketOrderDetail?`
}
// #endif
// #ifdef MP-AG
msg = `orderId=${item.orderId}`
if(item.orderType==1) url = `jiuzhai/jz_SureOrder?`//线路
else if(item.orderType==4){//景点门票
}else if(item.orderType==6){//酒店住宿
}else if(item.orderType==3){//目的地用车
}else if(item.orderType==2) url = `visa/visa_SureOrder?`//签证
else if(item.orderType==5){//机票
url = `airTicket/airTicketOrderDetail?`
msg = `id=${item.orderId}`
}
// #endif
if(url) {
let path = `/pages/${url}${msg}`
uni.navigateTo({
url: path,
});
}
},
} }
}; };
</script> </script>
<style scoped> <style scoped>
@import url('../../asset/css/flex.css'); @import url('../../asset/css/flex.css');
.hapPasDetBox{
padding: 0 30rpx;
}
.hapPasDetTitle{ .hapPasDetTitle{
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #080A0A; color: #080A0A;
line-height: 70rpx; line-height: 70rpx;
text-align: center; text-align: center;
padding: 0rpx 0 40rpx 0; padding: 0rpx 0 10rpx 0;
} }
.hapPasDetNum{ .hapPasDetNum{
font-weight: bold; font-weight: bold;
...@@ -102,10 +182,10 @@ ...@@ -102,10 +182,10 @@
text-align: center; text-align: center;
margin-bottom: 48rpx; margin-bottom: 48rpx;
} }
.hapPasDetBox{ .hapPasDetBJ{
background: #FFFFFF; background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx; border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 40rpx; padding: 40rpx 40rpx 40rpx 40rpx;
} }
.hapPasDetImg{ .hapPasDetImg{
margin-bottom: 50rpx; margin-bottom: 50rpx;
......
<template>
<view class="hapPasDetBox column" style="width:100vw;height:100vh;background: #F3F1EF;">
<view class="hapPasDetTitle">幸福存折{{PassbookAata.type==1?'收入':'支出'}}</view>
<view class="hapPasDetNum">{{PassbookAata.type==1?'+':'-'}}{{ PassbookAata.money }}</view>
<view class="hapPasDetBox">
<view class="hapPasDetImg row" @click="goProduct">
<image mode="scaleToFill" :src="PassbookAata.imgCover" />
<view class="col">{{ PassbookAata.lineName }}</view>
</view>
<view class="row hapPasDetText">
<text class="hapPasDetL">订单号</text>
<view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.orderId }}</text>
<text class="hapPasDetRCop" @click="handleCopy(PassbookAata.orderId)">复制</text>
</view>
</view>
<view class="row hapPasDetText">
<text class="hapPasDetL">{{PassbookAata.type==1?'收入':'支出'}}日期</text>
<view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.updateTime }}</text>
</view>
</view>
<view class="row hapPasDetText">
<text class="hapPasDetL">团号</text>
<view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.tcnum }}</text>
<text class="hapPasDetRCop" @click="handleCopy(PassbookAata.tcnum)">复制</text>
</view>
</view>
<view class="row hapPasDetText">
<text class="hapPasDetL">出团日期</text>
<view class="hapPasDetR col">
<text class="hapPasDetRC">{{ PassbookAata.tcStartDate }}</text>
</view>
</view>
<view class="row hapPasDetText">
<text class="hapPasDetL">订单人数</text>
<view class="hapPasDetR col">
<text class="hapPasDetRC active">{{ PassbookAata.peopleNum }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
scrollTop: 0,
PassbookAata:{},
};
},
onLoad(option) {
if(option.datas){
this.PassbookAata = JSON.parse(
decodeURIComponent(option.data)
)
}
},
onShow() {
uni.setNavigationBarTitle({
title: ""
})
},
methods: {
handleCopy(text){
uni.setClipboardData({
data: String(text),
});
},
goProduct(){
return
uni.navigateTo({
url: "/pages/product/productDetails/productDetails?id="+this.PassbookAata.orderId
})
}
}
};
</script>
<style scoped>
@import url('../../asset/css/flex.css');
.hapPasDetTitle{
font-weight: bold;
font-size: 32rpx;
color: #080A0A;
line-height: 70rpx;
text-align: center;
padding: 0rpx 0 40rpx 0;
}
.hapPasDetNum{
font-weight: bold;
font-size: 52rpx;
color: #B99846;
line-height: 70rpx;
text-align: center;
margin-bottom: 48rpx;
}
.hapPasDetBox{
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 40rpx;
}
.hapPasDetImg{
margin-bottom: 50rpx;
}
.hapPasDetImg image{
width: 141rpx;
height: 141rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx;
border: 1rpx solid #000000;
display: inline-block;
}
.hapPasDetImg view{
margin-left: 30rpx;
font-weight: bold;
font-size: 28rpx;
color: #080A0A;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.hapPasDetText{
padding: 0 0 10rpx 0;
}
.hapPasDetL{
width: 180rpx;
font-weight: 500;
font-size: 28rpx;
color: #757776;
line-height: 70rpx;
}
.hapPasDetR{
font-size: 28rpx;
line-height: 70rpx;
}
.hapPasDetRC{
font-weight: bold;
color: #080A09;
}
.hapPasDetRC.active{
color: #FF3166;
}
.hapPasDetRCop{
line-height: 35rpx;
background: #E9E4E0;
border-radius: 15rpx 15rpx 15rpx 15rpx;
color: #000000;
font-weight: 500;
display: inline-block;
padding: 0 10rpx;
margin-left: 30rpx;
}
</style>
\ No newline at end of file
...@@ -106,7 +106,10 @@ ...@@ -106,7 +106,10 @@
<text>共{{item.peopleNum}}人</text> <text>共{{item.peopleNum}}人</text>
</view> </view>
<view class="userHeadPListA col column"> <view class="userHeadPListA col column">
<view class="userHeadPListATitel">幸福存折{{ item.type==1?'收入':'支出' }}</view> <view class="userHeadPListATitel">
<!--幸福存折{{ item.type==1?'收入':'支出' }}-->
{{ item.lineName }}
</view>
<view class="userHeadPListATime"> <view class="userHeadPListATime">
{{ item.updateTime }} {{ item.updateTime }}
</view> </view>
...@@ -233,7 +236,7 @@ ...@@ -233,7 +236,7 @@
}, },
goDetails(item) { goDetails(item) {
let obj = JSON.stringify(item); let obj = JSON.stringify(item);
let path = `/pages/user-center/happinessPasDetails?datas=${encodeURIComponent(obj)}` let path = `/pages/user-center/discountDetails?data=${encodeURIComponent(obj)}&discountType=5`
uni.navigateTo({ uni.navigateTo({
url: path, url: path,
}); });
...@@ -477,6 +480,10 @@ ...@@ -477,6 +480,10 @@
font-size: 28rpx; font-size: 28rpx;
color: #080A09; color: #080A09;
margin-top: 5rpx; margin-top: 5rpx;
width: 348rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.userHeadPListATime{ .userHeadPListATime{
font-weight: 500; font-weight: 500;
......
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<view class="userHeadPNum active"> <view class="userHeadPNum active">
<view class="userHeadPNumT">待获取</view> <view class="userHeadPNumT">待获取</view>
<view class="userHeadPNumB"> <view class="userHeadPNumB">
<text></text> <text></text>
{{ CustomerIntegral.waitIntegral>=0?CustomerIntegral.waitIntegral:0 }} {{ CustomerIntegral.waitIntegral>=0?CustomerIntegral.waitIntegral:0 }}
</view> </view>
</view> </view>
...@@ -107,13 +107,16 @@ ...@@ -107,13 +107,16 @@
<text>共{{item.peopleNum}}人</text> <text>共{{item.peopleNum}}人</text>
</view> </view>
<view class="userHeadPListA col column"> <view class="userHeadPListA col column">
<view class="userHeadPListATitel">积分{{ item.type==1?'收获':'消耗' }}</view> <view class="userHeadPListATitel">
<!--积分{{ item.type==1?'收获':'消耗' }}-->
{{ item.lineName }}
</view>
<view class="userHeadPListATime"> <view class="userHeadPListATime">
{{ item.updateTime }} {{ item.updateTime }}
</view> </view>
</view> </view>
<view class="userHeadPListR"> <view class="userHeadPListR">
¥{{item.type==1?'+':''}}{{ item.integralNum }} {{item.type==1?'+':''}}{{ item.integralNum }}
</view> </view>
</view> </view>
</view> </view>
...@@ -234,7 +237,7 @@ ...@@ -234,7 +237,7 @@
}, },
goDetails(item) { goDetails(item) {
let obj = JSON.stringify(item); let obj = JSON.stringify(item);
let path = `/pages/user-center/pointsDetails?data=${encodeURIComponent(obj)}` let path = `/pages/user-center/discountDetails?data=${encodeURIComponent(obj)}&discountType=6`
uni.navigateTo({ uni.navigateTo({
url: path, url: path,
}); });
...@@ -480,6 +483,10 @@ ...@@ -480,6 +483,10 @@
font-size: 28rpx; font-size: 28rpx;
color: #080A09; color: #080A09;
margin-top: 5rpx; margin-top: 5rpx;
width: 348rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.userHeadPListATime{ .userHeadPListATime{
font-weight: 500; font-weight: 500;
......
<template>
<view style="width:100vw;height:100vh;" class="column">
<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" class="col" style="height: 1px;width: 100%;">
<view class="userStyle" style="min-height:100vh">
<view class="headStatus" v-if="scrollTop > 50" :style="{
zIndex: scrollTop < 10 ? 'unset' : 2,
opacity: scrollTop < 10 ? '100' : scrollTop,
}">
<view class="title">{{ pageTitle }}</view>
</view>
<view class="userBox">
<vipUserHeader></vipUserHeader>
<view class="userMyOrderBox">
<view style="position: relative;top:-13rpx">
<view class="userMyOrder">
<view class="userMyOrderTitle row-sbas-n col">
<view class="userMyOrderTitL">我的订单</view>
<view class="userMyOrderTitR row" @click="goUrl('/pages/order/index/index')">
<text>全部</text>
<view>
<u-icon class="userMyOrderTitRIght" name="arrow-up" size="30" color="#B2B3B3"></u-icon>
</view>
</view>
</view>
<view class="order_bar_list">
<view class="order_bar_item" @click="goUrl('/pages/order/index/index?status=1')">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748963970628311.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">待付款</Text>
<view class="badge"></view>
</view>
<view class="order_bar_item" @click="goUrl('/pages/order/index/index?status=2')">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748963971941398.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">未确认</Text>
<view class="badge"></view>
</view>
<view class="order_bar_item" @click="goUrl('/pages/order/index/index?status=3')">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748963971902348.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">已完成</Text>
<view class="badge"></view>
</view>
<view class="order_bar_item">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748964440207840.png" style="width: 66rpx; height: auto" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">待处理</Text>
<view class="badge"></view>
</view>
</view>
<view class="orderProductBox">
<view class="orderProduct row items-center">
<view class="orderProductL">
<image style="width: 91rpx; height: 88rpx;" mode="aspectFill" src="http://imgfile.oytour.com/Upload/WebSite/202501090355546390000000073.jpg"></image>
</view>
<view class="orderProductR col column" style="width: 1px;">
<view class="orderProductR_state">待处理</view>
<view class="orderProductR_text">(东东一地) 河津樱早樱东京富士山纯 河津樱早樱东京富士山纯</view>
</view>
</view>
</view>
</view>
<view style="height: 20rpx;"></view>
<view class="userMyOrder" style="padding: 12rpx 0 20rpx 0;">
<view class="order_bar_list">
<view class="order_bar_item relative" style="margin-top: 0;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749519965857485.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">在线客服</Text>
<button open-type="contact" style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 1;opacity: 0;"></button>
</view>
<view class="order_bar_item" style="margin-top: 0;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520007722617.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">年底大红包</Text>
</view>
<view class="order_bar_item" style="margin-top: 0;" @click="goUrl('/pages/index/index')">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520286130928.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">我的旅行社</Text>
</view>
<view class="order_bar_item" style="margin-top: 0;" @click="goUrl('/pages/coupon/list/list')">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638749520367368328.png" style="width: 70rpx; height: 70rpx" mode="widthFix"></image>
<Text style="margin-top: 10rpx;font-size: 24rpx;">领券中心</Text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<auth v-if="showAuth"></auth>
<tabbars></tabbars>
</view>
</template>
<script>
import tabbars from "@/components/tabbar/index";
import auth from "@/components/auth/index.vue";
import vipUserHeader from "./components/vipUserHeader.vue";
export default {
components: {
tabbars,
auth,
vipUserHeader
},
data() {
return {
pageTitle: "个人中心",
scrollTop: 0,
showAuth: false,
b2b_user_info: {},
mall_UserInfo: {}
};
},
onLoad() {
this.b2b_user_info = uni.getStorageSync('b2b_user');
this.mall_UserInfo = uni.getStorageSync("mall_UserInfo");
this.showAuth = !this.mall_UserInfo || !this.b2b_user_info;
},
methods: {
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
},
scrollTopHandler() {
this.scrollTop = 0;
},
goUrl(url) {
uni.navigateTo({ url });
}
}
};
</script>
<style>
@import url('../../asset/css/flex.css');
.row-sbas-n {
justify-content: space-between;
}
.relative {
position: relative;
}
.userStyle .userBox {
display: flex;
flex-direction: column;
align-items: center;
background: #f3f4f6;
min-height: 100vh;
padding-bottom: env(safe-area-inset-bottom);
}
.order_bar_list {
padding: 22rpx 55rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.order_bar_item {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
position: relative;
}
.badge {
position: absolute;
right: -10rpx;
top: -10rpx;
padding: 0 8rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
background: #FF3166;
color: #fff;
min-width: 28rpx;
height: 28rpx;
border-radius: 14rpx;
}
.headStatus {
position: fixed;
width: 140vw;
padding-right: 40vw;
padding-bottom: 10px;
left: 0;
right: 0;
top: 0;
display: flex;
background-image: linear-gradient(to right, #e6b865, #ebb45e);
}
.headStatus .title {
font-size: 18px;
color: #fff;
flex: 1;
width: 1px;
line-height: 34px;
text-align: center;
}
.userMyOrderBox {
padding: 0 31rpx;
}
.userMyOrder {
background: #FFF;
border-radius: 20rpx;
padding: 33rpx 0 22rpx 0;
}
.userMyOrderTitle {
padding: 23rpx 31rpx 0 31rpx;
}
.userMyOrderTitL {
font-family: PingFang SC;
font-weight: 800;
font-size: 32rpx;
color: #080A09;
}
.userMyOrderTitR {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #B2B3B3;
align-items: center;
}
.userMyOrderTitRIght {
margin-left: 11rpx;
transform: rotate(90deg);
}
.orderProductBox {
padding: 0 20rpx;
}
.orderProduct {
width: 648rpx;
height: 132rpx;
background: #F7F7F7;
border-radius: 18rpx;
padding: 21rpx 20rpx;
}
.orderProductL {
width: 91rpx;
height: 88rpx;
border-radius: 14rpx;
overflow: hidden;
margin-right: 18rpx;
}
.orderProductR_state {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #080A09;
padding-top: 5rpx;
}
.orderProductR_text {
width: 100%;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #8C8C8C;
padding-top: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
\ No newline at end of file
...@@ -693,7 +693,7 @@ ...@@ -693,7 +693,7 @@
this.apipost("GetDetailsByErpOrderId_post",{ this.apipost("GetDetailsByErpOrderId_post",{
OrderNo: this.OrderNo, OrderNo: this.OrderNo,
ErpOrderId: this.orderId, ErpOrderId: this.orderId,
OrderTypeStr: this.OrderTypeStr, OrderTypeStr: 'Visa',
},res=>{ },res=>{
if(res.resultCode==1){ if(res.resultCode==1){
this.OrderNo = res.data.OrderNo this.OrderNo = res.data.OrderNo
......
## 1.0.8(2023-08-15)
## 新增slot布局
- 可自定义title布局
- 可自定unit布局
```vue
<template>
<view class="content">
<mrsongCharts type='column' title="柱状图" align='left'>
<div slot="title" class="chart-title">测试slot自定义title</div>
<div slot="unit" class="chart-unit">测试slot自定义unit</div>
</mrsongCharts>
<mrsongCharts type='line' title="折线图" align='left' />
<mrsongCharts type='mount' title="山峰图无边渐变色" align='left' />
<mrsongCharts type='pie' title="圆角条状图+渐变色" align='left' />
<mrsongCharts type='bar' title="带分割线+渐变色" align='left' />
<mrsongCharts type='ring' title="环形图" align='left' />
<mrsongCharts type='funnel' title="标准漏斗图" align='left' />
</view>
</template>
```
## 1.0.7(2023-08-15)
## 更新示例工程
## 1.0.6(2023-08-15)
## 更改组件样式表
## 1.0.5(2023-08-15)
## 修复小程序兼容问题
## 修复tooltip不显示问题
注意:包裹组件的元素不能出现定位,否则tooltip显示异常
## 1.0.4(2022-08-18)
## 修复bug
小程序语法兼容
## 1.0.3(2022-08-15)
## 新增个人配置
```json
// config:组件props,个人配置
{
"itemCount": 3, //x轴单屏显示数据的数量,默认为5
"scrollShow": false, //新增是否显示滚动条,默认false
"scrollAlign": 'left', //滚动条初始位置
"rotateLabel": true, //X轴label旋转
"min": 0, //Y轴最小值
"max": 150, //Y轴大值
"unit": "", //Y轴单位
"enableScroll": false, //开启滚动模式
"color": [//颜色设置
"#9A60B4",
"#ea7ccc"
],
}
```
## 1.0.2(2022-08-02)
## 图表新增unit单位展示
## 1.0.1(2022-08-02)
修复bug
## 1.0.0(2022-08-02)
init
<template>
<view v-if="showChart" class="mrsong-charts">
<view class="chart-title-box" :style="'text-align:' + align">
<slot name="title">
<text class="chart-title">{{ title }}</text>
</slot>
</view>
<view class="charts-box">
<slot name="unit">
<view v-if="unit" class="chart-unit">单位:{{ unit ? `(${unit})` : '' }}</view>
</slot>
<qiun-data-charts :opts="opts" type="column" :chart-data="currentData" background="none" :animation="false" :ontouch="true" />
</view>
</view>
</template>
<script>
import { initColumnData, initLineData, initFunnelData, initRingData, initMountData, initBarData, initPieData } from './uchart.config.js';
import qiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts';
export default {
name: 'MrsongCharts',
components: {
qiunDataCharts
},
props: {
type: {
type: String,
default: 'column'
},
unit: {
type: String,
default: ''
},
chartsData: {
type: Object,
default() {
return null;
}
},
config: {
type: Object,
default() {
return {
itemCount: 3, // x轴单屏显示数据的数量,默认为5个
scrollShow: false, // 新增是否显示滚动条,默认false
scrollAlign: 'left', // 滚动条初始位置
rotateLabel: true, // X轴label旋转
min: 0, // Y轴最小值
// "max": 150, //Y轴大值
unit: '', // Y轴单位
enableScroll: false, // 开启滚动模式
color: [
// 颜色设置
'#9A60B4',
'#ea7ccc'
]
};
}
},
options: {
type: Object,
default() {
return {
color: ['#008749', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
xAxis: {
itemCount: 4, // x轴单屏显示数据的数量,默认为5个
scrollShow: false, // 新增是否显示滚动条,默认false
scrollAlign: 'left', // 滚动条初始位置
rotateLabel: true // X轴label旋转
},
yAxis: {
data: [
{
min: 0, // Y轴最小值
// "max": 150, //Y轴大值
unit: '' // Y轴单位
}
]
},
enableScroll: false // 开启滚动模式
};
}
},
title: {
type: String,
default: ''
},
align: {
type: String,
default: 'center'
}
},
data() {
return {
opts: {},
yMax: 10,
currentData: {
categories: [],
series: []
},
showChart: false
};
},
computed: {},
watch: {
type: {
handler(val) {
if (val) {
this.formatType(val);
}
},
deep: true,
immediate: true
},
options: {
handler(val) {
if (val) {
let opts = this.assignDeep(this.opts, val);
if (this.config) {
let xAxis = opts.xAxis;
let yAxis = opts.yAxis.length ? opts.yAxis[0] : {};
let color = this.config.color;
if (opts.color) opts.color = color;
for (let key in this.config) {
if (Object.keys(xAxis).includes(key)) xAxis[key] = this.config[key];
if (Object.keys(yAxis).includes(key)) yAxis[key] = this.config[key];
if (Object.keys(opts).includes(key)) {
opts[key] = this.config[key];
}
}
this.opts = opts;
}
}
},
deep: true,
immediate: true
},
chartsData: {
handler(val) {
if (val) {
this.currentData = val;
let list = [];
let opts = {};
let seriesItem = val.series || [];
seriesItem.map((item) => {
list = [...list, ...item.data];
});
if (this.type == 'column' || this.type == 'line') {
let max = Math.max.apply(
Math,
list.map((item) => {
return item;
})
);
this.yMax = max > 10 ? max : 10;
this.opts.yAxis.data.forEach((item) => {
if (max > 10) {
delete item.max;
} else {
item.max = this.yMax;
}
});
}
} else {
this.currentData = this.initchartsData();
}
},
deep: true,
immediate: true
}
},
mounted() {
uni.showLoading({
title: '正在加载'
});
this.$nextTick(() => {
this.showChart = true;
uni.hideLoading();
});
},
methods: {
initchartsData() {
if (this.type == 'mount' || this.type == 'pie' || this.type == 'ring' || this.type == 'funnel') {
return {
series: [
{
data: [
{
name: '一班',
value: 82
},
{
name: '二班',
value: 63
},
{
name: '三班',
value: 50
},
{
name: '四班',
value: 40
},
{
name: '五班',
value: 30
}
]
}
]
};
} else {
return {
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
series: [
{
name: '目标值',
data: [40, 36, 31, 33, 13, 34]
},
{
name: '完成量',
data: [18, 27, 21, 24, 6, 28]
}
]
};
}
},
assignDeep(target) {
// 判断是否是纯粹对象
const isPlainObject = (obj) => {
return Object.prototype.toString.call(obj) === '[object Object]';
};
const args = Array.from(arguments);
if (args.length < 2) return args[0];
let result = args[0];
args.shift();
args.forEach((item) => {
if (isPlainObject(item)) {
if (!isPlainObject(result)) result = {};
for (let key in item) {
if (result[key] && isPlainObject(item[key])) {
result[key] = this.assignDeep(result[key], item[key]);
} else {
result[key] = item[key];
}
}
} else if (item instanceof Array) {
if (!(result instanceof Array)) result = [];
item.forEach((arrItem, arrIndex) => {
if (isPlainObject(arrItem)) {
result[arrIndex] = this.assignDeep(result[arrIndex]);
} else {
result[arrIndex] = arrItem;
}
});
}
});
return result;
},
formatType(str) {
switch (str) {
case 'column':
this.opts = initColumnData();
break;
case 'line':
this.opts = initLineData();
break;
case 'funnel':
this.opts = initFunnelData();
break;
case 'ring':
this.opts = initRingData();
break;
case 'mount':
this.opts = initMountData();
break;
case 'bar':
this.opts = initBarData();
break;
case 'pie':
this.opts = initPieData();
break;
default:
break;
}
}
}
};
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
.charts-box {
width: 100%;
height: 600rpx;
// padding: 50rpx 0;
.chart-unit {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 80rpx;
font-size: 28rpx;
}
}
.chart-title-box,
.mrsong-charts {
width: 100%;
box-sizing: border-box;
}
.chart-title-box {
font-size: 30rpx;
color: '#666666';
font-weight: 500;
text-align: left;
}
.mrsong-charts {
// padding: 30rpx;
}
</style>
<template>
<view class="chartsview">
<view class="charts-error"></view>
<view class="charts-font">{{errorMessage==null?'请点击重试':errorMessage}}</view>
</view>
</template>
<script>
export default {
name: 'qiun-error',
props: {
errorMessage: {
type: String,
default: null
},
},
data() {
return {
};
},
}
</script>
<style>
.chartsview {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
}
.charts-font{
font-size: 14px;
color: #CCCCCC;
margin-top: 10px;
}
.charts-error{
width: 128px;
height: 128px;
background: url("data:image/png;base64,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");
background-position: center;
}
</style>
<template>
<view class="container loading1">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading1',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading1 .shape1 {
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
animation: animation1shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
@keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
.loading1 .shape2 {
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
animation: animation1shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
@keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
.loading1 .shape3 {
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
animation: animation1shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
@keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
.loading1 .shape4 {
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
animation: animation1shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
@keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
</style>
<template>
<view class="container loading2">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading2',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading2 {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.container.loading2 .shape {
border-radius: 5px;
}
.container.loading2{
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading2 .shape1 {
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
animation: animation2shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
.loading2 .shape2 {
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
animation: animation2shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
.loading2 .shape3 {
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
animation: animation2shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
.loading2 .shape4 {
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
animation: animation2shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
</style>
<template>
<view class="container loading3">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading3',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading3 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading3 .shape1 {
border-top-left-radius: 10px;
}
.container.loading3 .shape2 {
border-top-right-radius: 10px;
}
.container.loading3 .shape3 {
border-bottom-left-radius: 10px;
}
.container.loading3 .shape4 {
border-bottom-right-radius: 10px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading3 .shape1 {
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
animation: animation3shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
@keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
.loading3 .shape2 {
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
animation: animation3shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
@keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
.loading3 .shape3 {
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
animation: animation3shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
@keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
.loading3 .shape4 {
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
animation: animation3shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
@keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
</style>
<template>
<view class="container loading5">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading5',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading5 .shape {
width: 15px;
height: 15px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading5 .shape1 {
animation: animation5shape1 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
@keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
.loading5 .shape2 {
animation: animation5shape2 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
@keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
.loading5 .shape3 {
animation: animation5shape3 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
@keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
.loading5 .shape4 {
animation: animation5shape4 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
@keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
</style>
<template>
<view class="container loading6">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading6',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading6 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading6 .shape {
width: 12px;
height: 12px;
border-radius: 2px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading6 .shape1 {
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
animation: animation6shape1 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
@keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
.loading6 .shape2 {
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
animation: animation6shape2 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
@keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
.loading6 .shape3 {
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
animation: animation6shape3 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
@keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
.loading6 .shape4 {
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
animation: animation6shape4 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
@keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
</style>
<template>
<view>
<Loading1 v-if="loadingType==1"/>
<Loading2 v-if="loadingType==2"/>
<Loading3 v-if="loadingType==3"/>
<Loading4 v-if="loadingType==4"/>
<Loading5 v-if="loadingType==5"/>
</view>
</template>
<script>
import Loading1 from "./loading1.vue";
import Loading2 from "./loading2.vue";
import Loading3 from "./loading3.vue";
import Loading4 from "./loading4.vue";
import Loading5 from "./loading5.vue";
export default {
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
name: 'qiun-loading',
props: {
loadingType: {
type: Number,
default: 2
},
},
data() {
return {
};
},
}
</script>
<style>
</style>
# uCharts JSSDK说明
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`120kb`
2、如果120kb的体积仍需压缩,请手到uCharts官网通过在线定制选择您需要的图表。
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。
4、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"id": "qiun-data-charts",
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
"version": "2.4.3-20220505",
"description": "uCharts 新增双指缩放、新增山峰图!支持H5及APP用 ucharts echarts 渲染图表,uniapp可视化首选组件",
"keywords": [
"ucharts",
"echarts",
"f2",
"图表",
"可视化"
],
"repository": "https://gitee.com/uCharts/uCharts",
"engines": {
"HBuilderX": "^3.3.8"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "474119"
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/~qiun"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## <font color='red'>写给uCharts使用者的一封信</font>
<font color='red'>
亲爱的用户:
- 由于最近上线的官网中实行了部分收费体验,收到了许多用户的使用反馈,大致反馈的问题都指向同一矛头:为何新官网的在线工具也要收费?对于这件事,我们深表歉意。由于新官网本身未提供技术文档,使得用户误以为我们对文档实行了收费。经我们连夜整改,新官网目前已经将技术文档开放出来供大家阅读使用,并免费对外开放了【演示】中的查看全端全平台的代码的功能,为此再次向所受影响的用户们致以诚恳的歉意。
- 其次,我们须澄清几点,如下:
1. uCharts的插件本身遵循开源原则,并不收费,用户可自行到DCloud市场与Gitee码云上获取源码
2. uCharts的技术文档永久对用户开放
3. 收费内容仅针对原生工具、组件工具、定制功能以及模板市场的部分收费模板
- uCharts为什么实行收费原则?
1. 服务器的费用支撑
2. 团队的运营支出;正如你所见,我们的群里有大量的用户在请教图表配置与反馈问题,群里的每一位管理员都在花费不少精力在积极解决用户的问题,然而遇到巨大的咨询量时,我们无法及时、精准解答回复,因此,我们推出了会员优先服务
3. 与其说模板市场是收费,倒不如说给野生用户提供了创造价值的机会,用户既可以在上面发布模板赚取费用,遇到心动的模板也能免费/付费使用
- 收费不是目的,正如你们所见,用户可以申请成为[【开发者】](https://www.ucharts.cn/v2/#/agreement/developer),开发者不限制任何官网功能,并享有官方指导、开发、改造uCharts的权力,并且活动期间【返还超级会员费用】!我们想说的是,我们新版官网上线旨在希望更多的用户加入到开发者的队伍,我们共同去维护uCharts!
我们相信:星星之火可以燎原!
uCharts技术团队
2022.4.23
</font>
![logo](https://img-blog.csdnimg.cn/4a276226973841468c1be356f8d9438b.png)
[![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
[![fork](https://gitee.com/uCharts/uCharts/badge/fork.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/members)
[![License](https://img.shields.io/badge/license-Apache%202-4EB1BA.svg)](https://www.apache.org/licenses/LICENSE-2.0.html)
[![npm package](https://img.shields.io/npm/v/@qiun/ucharts.svg?style=flat-square)](https://www.npmjs.com/~qiun)
## uCharts简介
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。
## 官方网站
## [https://www.ucharts.cn](https://www.ucharts.cn)
## 快速体验
一套代码编到多个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!其他平台请自行编译。
![](https://www.ucharts.cn/images/web/guide/qrcode20220224.png)
## 致开发者
感谢各位开发者`四年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具,我们推出了新版官网,增加了在线定制、问答社区、在线配置等一些增值服务,为确保您能更好的应用图表组件,建议您先`仔细阅读本页指南`以及`常见问题`,而不是下载下来`直接使用`。如仍然不能解决,请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
## 社群支持
uCharts官方拥有4个2000人的QQ群及专属VIP会员群支持,庞大的用户量证明我们一直在努力,请各位放心使用!uCharts的开源图表组件的开发,团队付出了大量的时间与精力,经过四来的考验,不会有比较明显的bug,请各位放心使用。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持!
#### 官方交流群
- 交流群1:371774600(已满)
- 交流群2:619841586(已满)
- 交流群3:955340127(已满)
- 交流群4:641669795
- 口令`uniapp`
#### 专属VIP会员群
- 开通会员后详见【账号详情】页面中顶部的滚动通知
- 口令`您的用户ID`
## 版权信息
uCharts始终坚持开源,遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议,意味着您无需支付任何费用,即可将uCharts应用到您的产品中。
注意:这并不意味着您可以将uCharts应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,uCharts相关方及秋云科技不承担任何责任。
## 合作伙伴
[![DIY官网](https://www.ucharts.cn/images/web/guide/links/diy-gw.png)](https://www.diygw.com/)
[![HasChat](https://www.ucharts.cn/images/web/guide/links/haschat.png)](https://gitee.com/howcode/has-chat)
[![uViewUI](https://www.ucharts.cn/images/web/guide/links/uView.png)](https://www.uviewui.com/)
[![图鸟UI](https://www.ucharts.cn/images/web/guide/links/tuniao.png)](https://ext.dcloud.net.cn/plugin?id=7088)
[![thorui](https://www.ucharts.cn/images/web/guide/links/thorui.png)](https://ext.dcloud.net.cn/publisher?id=202)
[![FirstUI](https://www.ucharts.cn/images/web/guide/links/first.png)](https://www.firstui.cn/)
[![nProUI](https://www.ucharts.cn/images/web/guide/links/nPro.png)](https://ext.dcloud.net.cn/plugin?id=5169)
[![GraceUI](https://www.ucharts.cn/images/web/guide/links/grace.png)](https://www.graceui.com/)
## 更新记录
详见官网指南中说明,[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
## 相关链接
- [uCharts官网](https://www.ucharts.cn)
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
- [uCharts npm开源地址](https://www.ucharts.cn)
- [ECharts官网](https://echarts.apache.org/zh/index.html)
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
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