第一次上传

This commit is contained in:
Ls
2026-03-09 16:39:03 +08:00
commit 3d9efaf15c
924 changed files with 326227 additions and 0 deletions

View File

@@ -0,0 +1,421 @@
class Calendar {
constructor({
selected,
startDate,
endDate,
range,
} = {}) {
// 当前日期
this.date = this.getDateObj(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 起始时间
this.startDate = startDate
// 终止时间
this.endDate = endDate
// 是否范围选择
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
this.lastHover = false
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
const selectDate = this.getDateObj(date)
this.getWeeks(selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
setStartDate(startDate) {
this.startDate = startDate
}
setEndDate(endDate) {
this.endDate = endDate
}
getPreMonthObj(date) {
date = fixIosDateFormat(date)
date = new Date(date)
const oldMonth = date.getMonth()
date.setMonth(oldMonth - 1)
const newMonth = date.getMonth()
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
date.setMonth(newMonth - 1)
}
return this.getDateObj(date)
}
getNextMonthObj(date) {
date = fixIosDateFormat(date)
date = new Date(date)
const oldMonth = date.getMonth()
date.setMonth(oldMonth + 1)
const newMonth = date.getMonth()
if (newMonth - oldMonth > 1) {
date.setMonth(newMonth - 1)
}
return this.getDateObj(date)
}
/**
* 获取指定格式Date对象
*/
getDateObj(date) {
date = fixIosDateFormat(date)
date = new Date(date)
return {
fullDate: getDate(date),
year: date.getFullYear(),
month: addZero(date.getMonth() + 1),
date: addZero(date.getDate()),
day: date.getDay()
}
}
/**
* 获取上一个月日期集合
*/
getPreMonthDays(amount, dateObj) {
const result = []
for (let i = amount - 1; i >= 0; i--) {
const month = dateObj.month - 1
result.push({
date: new Date(dateObj.year, month, -i).getDate(),
month,
disable: true
})
}
return result
}
/**
* 获取本月日期集合
*/
getCurrentMonthDays(amount, dateObj) {
const result = []
const fullDate = this.date.fullDate
for (let i = 1; i <= amount; i++) {
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
const isToday = fullDate === currentDate
// 获取打点信息
const info = this.selected && this.selected.find((item) => {
if (this.dateEqual(currentDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
disableBefore = dateCompare(this.startDate, currentDate)
}
if (this.endDate) {
disableAfter = dateCompare(currentDate, this.endDate)
}
let multiples = this.multipleStatus.data
let multiplesStatus = -1
if (this.range && multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, currentDate)
})
}
const checked = multiplesStatus !== -1
result.push({
fullDate: currentDate,
year: dateObj.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
month: dateObj.month,
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
currentDate, this.endDate)),
isToday,
userChecked: false,
extraInfo: info
})
}
return result
}
/**
* 获取下一个月日期集合
*/
_getNextMonthDays(amount, dateObj) {
const result = []
const month = dateObj.month + 1
for (let i = 1; i <= amount; i++) {
result.push({
date: i,
month,
disable: true
})
}
return result
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
return res ? res : this.getDateObj(date)
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
before = new Date(fixIosDateFormat(before))
after = new Date(fixIosDateFormat(after))
return before.valueOf() === after.valueOf()
}
/**
* 比较真实起始日期
*/
isLogicBefore(currentDate, before, after) {
let logicBefore = before
if (before && after) {
logicBefore = dateCompare(before, after) ? before : after
}
return this.dateEqual(logicBefore, currentDate)
}
isLogicAfter(currentDate, before, after) {
let logicAfter = after
if (before && after) {
logicAfter = dateCompare(before, after) ? after : before
}
return this.dateEqual(logicAfter, currentDate)
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
if (!this.range) return
let {
before,
after
} = this.multipleStatus
if (before && after) {
if (!this.lastHover) {
this.lastHover = true
return
}
this.multipleStatus.before = fullDate
this.multipleStatus.after = ''
this.multipleStatus.data = []
this.multipleStatus.fulldate = ''
this.lastHover = false
} else {
if (!before) {
this.multipleStatus.before = fullDate
this.multipleStatus.after = undefined;
this.lastHover = false
} else {
this.multipleStatus.after = fullDate
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before);
}
this.lastHover = true
}
}
this.getWeeks(fullDate)
}
/**
* 鼠标 hover 更新多选状态
*/
setHoverMultiple(fullDate) {
//抖音小程序点击会触发hover事件需要避免一下
// #ifndef MP-TOUTIAO
if (!this.range || this.lastHover) return
const {
before
} = this.multipleStatus
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
this.getWeeks(fullDate)
// #endif
}
/**
* 更新默认值多选状态
*/
setDefaultMultiple(before, after) {
this.multipleStatus.before = before
this.multipleStatus.after = after
if (before && after) {
if (dateCompare(before, after)) {
this.multipleStatus.data = this.geDateAll(before, after);
this.getWeeks(after)
} else {
this.multipleStatus.data = this.geDateAll(after, before);
this.getWeeks(before)
}
}
}
/**
* 获取每周数据
* @param {Object} dateData
*/
getWeeks(dateData) {
const {
year,
month,
} = this.getDateObj(dateData)
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
const currentMonthDayAmount = new Date(year, month, 0).getDate()
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
const weeks = new Array(6)
for (let i = 0; i < calendarDays.length; i++) {
const index = Math.floor(i / 7)
if (!weeks[index]) {
weeks[index] = new Array(7)
}
weeks[index][i % 7] = calendarDays[i]
}
this.calendar = calendarDays
this.weeks = weeks
}
}
function getDateTime(date, hideSecond) {
return `${getDate(date)} ${getTime(date, hideSecond)}`
}
function getDate(date) {
date = fixIosDateFormat(date)
date = new Date(date)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}-${addZero(month)}-${addZero(day)}`
}
function getTime(date, hideSecond) {
date = fixIosDateFormat(date)
date = new Date(date)
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
}
function addZero(num) {
if (num < 10) {
num = `0${num}`
}
return num
}
function getDefaultSecond(hideSecond) {
return hideSecond ? '00:00' : '00:00:00'
}
function dateCompare(startDate, endDate) {
startDate = new Date(fixIosDateFormat(typeof startDate === 'string' ? startDate.trim() : startDate))
endDate = new Date(fixIosDateFormat(typeof endDate === 'string' ? endDate.trim() : endDate))
return startDate <= endDate
}
function checkDate(date) {
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
return date.match(dateReg)
}
//ios低版本15及以下无法匹配 没有 ’秒‘ 时的情况,所以需要在末尾 秒 加上 问号
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
function fixIosDateFormat(value) {
if (typeof value === 'string' && dateTimeReg.test(value)) {
value = value.replace(/-/g, '/')
}
return value
}
export {
Calendar,
getDateTime,
getDate,
getTime,
addZero,
getDefaultSecond,
dateCompare,
checkDate,
fixIosDateFormat
}

View File

@@ -0,0 +1,348 @@
{
"easycom": {
// 注意一定要放在custom里否则无效https://ask.dcloud.net.cn/question/131175
"custom": {
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}
},
"pages": [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#36394D",
"navigationStyle": "custom",
"backgroundColor": "#F8F8F8"
}
},
{
"path": "pages/index/community",
"style": {
"navigationBarTitleText": "社区",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/user",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path" : "pages/index/shop",
"style" :
{
"navigationBarTitleText" : "积分商城"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "v派商家",
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#F8F8F8"
},
"subPackages": [{
"root": "pages/community",
"pages": [{
"path": "noticeList",
"style": {
"navigationBarTitleText": "社区公告"
}
},
{
"path": "merchantCom",
"style": {
"navigationBarTitleText": "社区商家"
}
},
{
"path" : "merchantDetail",
"style" :
{
"navigationBarTitleText" : "美食小店"
}
}
]
},
{
"root": "pages/goods",
"pages": [
{
"path": "integralGoods",
"style": {
"navigationBarTitleText": "积分商品"
}
},
{
"path": "merchant",
"style": {
"navigationBarTitleText": "热门商家"
}
},
{
"path" : "goodsDetail",
"style" :
{
"navigationBarTitleText" : "商品详情"
}
},
{
"path" : "goodsContro",
"style" :
{
"navigationBarTitleText" : "商品管理"
}
},
{
"path" : "addGoods",
"style" :
{
"navigationBarTitleText" : "添加商品"
}
},
{
"path" : "Pay",
"style" :
{
"navigationBarTitleText" : "付款"
}
},
{
"path": "goodsPay",
"style": {
"navigationBarTitleText": "积分订单"
}
},
{
"path" : "search",
"style" :
{
"navigationBarTitleText" : "搜索",
"navigationStyle": "custom"
}
},
{
"path" : "goodsClass",
"style" :
{
"navigationBarTitleText" : "分类",
"navigationStyle": "custom"
}
}
]
},
{
"root": "pages/article",
"pages": [{
"path": "articleCom",
"style": {
"navigationBarTitleText": "社区公告"
}
},
{
"path": "newsList",
"style": {
"navigationBarTitleText": "新闻公告"
}
},
{
"path": "news",
"style": {
"navigationBarTitleText": "新闻详情"
}
}
]
}, {
"root": "pages/userFunc",
"pages": [{
"path" : "setData",
"style" :
{
"navigationBarTitleText" : "编辑资料"
}
},
{
"path" : "integration",
"style" :
{
"navigationBarTitleText" : "积分明细"
}
},
{
"path" : "trade",
"style" :
{
"navigationBarTitleText" : "交易记录"
}
},
{
"path" : "editStore",
"style" :
{
"navigationBarTitleText" : "编辑店铺"
}
},
{
"path" : "statistics",
"style" :
{
"navigationBarTitleText" : "数据统计"
}
},
{
"path" : "set",
"style" :
{
"navigationBarTitleText" : "设置"
}
},
{
"path" : "bind",
"style" :
{
"navigationBarTitleText" : "绑定手机号"
}
},
{
"path" : "password",
"style" :
{
"navigationBarTitleText" : "修改支付密码"
}
},
{
"path" : "storeInter",
"style" :
{
"navigationBarTitleText" : "积分明细"
}
},
{
"path" : "withdrow",
"style" :
{
"navigationBarTitleText" : "提现"
}
},
{
"path" : "vip",
"style" :
{
"navigationBarTitleText" : "会员码"
}
},
{
"path" : "promoteCode",
"style" :
{
"navigationBarTitleText" : "推广码"
}
},
{
"path" : "addressList",
"style" :
{
"navigationBarTitleText" : "收货地址"
}
},
{
"path" : "addAddress",
"style" :
{
"navigationBarTitleText" : "添加地址"
}
},
{
"path": "alliance-card",
"style": {
"navigationBarTitleText": "我的联盟卡",
"navigationStyle": "custom"
}
},
{
"path": "member-benefits",
"style": {
"navigationBarTitleText": "会员权益",
"navigationStyle": "custom"
}
},
{
"path": "promotion",
"style": {
"navigationBarTitleText": "我的推广",
"navigationStyle": "custom"
}
},
{
"path": "invite",
"style": {
"navigationBarTitleText": "邀请好友",
"navigationStyle": "custom"
}
},
{
"path": "feedback",
"style": {
"navigationBarTitleText": "意见反馈",
"navigationStyle": "custom"
}
},
{
"path": "about-us",
"style": {
"navigationBarTitleText": "关于我们",
"navigationStyle": "custom"
}
},
{
"path": "coupon",
"style": {
"navigationBarTitleText": "优惠券",
"navigationStyle": "custom"
}
}
]
}
],
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#EC754B",
"backgroundColor": "#ffffff",
"list": [{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "/static/tabBar/home.png",
"selectedIconPath": "/static/tabBar/homed.png"
},
// {
// "text": "社区",
// "pagePath": "pages/index/community",
// "iconPath": "/static/tabBar/community.png",
// "selectedIconPath": "/static/tabBar/communityed.png"
// }
// ,
{
"text": "积分商城",
"pagePath": "pages/index/shop",
"iconPath": "/static/tabBar/shop.png",
"selectedIconPath": "/static/tabBar/shoped.png"
},
{
"text": "个人中心",
"pagePath": "pages/index/user",
"iconPath": "/static/tabBar/user.png",
"selectedIconPath": "/static/tabBar/usered.png"
}]
}
}

View File

@@ -0,0 +1,29 @@
import { Service } from '@/Service/Service';
/*****地址*****/
class vpHomeService {
private static GetMerchListPath: string = '/Home/GetMerchList';
/*****商家列表*****/
static GetMerchList(assId: string,comId:string,lon:number,lat:number,page:number) {
var result = Service.Request(this.GetMerchListPath, 'GET', {assId,comId,lon,lat,page});
return result;
}
private static GetMerchInfoPath: string = '/Home/GetMerchInfo';
/*****店铺详情*****/
static GetMerchInfo(merchId: string,page:number) {
var result = Service.Request(this.GetMerchInfoPath, 'GET', {merchId,page});
return result;
}
private static GetGoodsInfoPath: string = '/Home/GetGoodsInfo';
/*****商品详情*****/
static GetGoodsInfo(goodsId: string,page:number) {
var result = Service.Request(this.GetGoodsInfoPath, 'GET', {goodsId,page});
return result;
}
}
export { Service, vpHomeService };

View File

@@ -0,0 +1,255 @@
<template>
<view>
<view class="" style=" width: 100%; height: 310rpx; background: linear-gradient(45deg,#FF6B35,#FF8B65);">
</view>
<view class=""
style=" margin: 0 30rpx; margin-top: -110rpx; padding: 30rpx; background-color: #fff; border-radius: 20rpx; ">
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
<view class=""
style=" gap: 10rpx; font-size: 36rpx; font-weight: 600; display: flex; align-items: center; ">
<img :src="Service.GetMateUrlByImg(userInfo.headImg)" alt=""
style="width: 100rpx; height: 100rpx; border-radius: 50%;" />
{{userInfo?.nick}}
</view>
<view @click="Service.GoPage('/pages/userFunc/setData')" class="">
<up-icon name="arrow-right" size="18" color='#333333' :bold='true'></up-icon>
</view>
</view>
<view class=""
style="display: flex; align-items: center; margin-top: 40rpx; justify-content: space-between; ">
<view @click="Service.GoPage('/pages/userFunc/integration')" class=""
style=" width: 48%; display: flex;align-items: center;">
<view class=""
style=" display: flex;align-items: center;justify-content: center; width: 80rpx; height: 80rpx; background-color: #FF6B35; border-radius: 50%; ">
<img :src="Service.GetIconImg('/static/index/user/code.png')"
style="width: 50rpx; height: 50rpx; " alt="" />
</view>
<view class=""
style=" margin-left: -20rpx; flex: 1; text-align: center; font-size: 28rpx; font-weight: 600;">
{{accInfo?.integral}}积分
</view>
<view class="">
<up-icon name="arrow-right" size="14" color='#9CA3AF' :bold='true'></up-icon>
</view>
</view>
<view class="" @click="Service.GoPage('/pages/userFunc/trade?type='+1)"
style=" width: 48%; display: flex;align-items: center;">
<view class=""
style=" display: flex;align-items: center;justify-content: center; width: 80rpx; height: 80rpx; background-color: #FF6B35; border-radius: 50%; ">
<img :src="Service.GetIconImg('/static/index/user/list.png')"
style="width: 50rpx; height: 50rpx; " alt="" />
</view>
<view class=""
style=" margin-left: -20rpx; flex: 1; text-align: center; font-size: 28rpx; font-weight: 600;">
交易记录
</view>
<view class="">
<up-icon name="arrow-right" size="14" color='#9CA3AF' :bold='true'></up-icon>
</view>
</view>
</view>
</view>
<!-- 管理中心 -->
<view class="service-section" style="margin: 40rpx 30rpx 0; border-radius: 20rpx; ">
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
<text class="section-title" style="font-weight: 600;">商家管理中心</text>
<view class="" @click="Service.GoPage('/pages/userFunc/storeInter')"
style=" font-size: 24rpx;color: #666; display: flex; align-items: baseline; gap: 10rpx; font-size: 28rpx; ">
积分明细<up-icon name="arrow-right" color="#9CA3AF" :bold="true" size="14"></up-icon>
</view>
</view>
<view class="service-grid">
<view class="service-item" @click="gotopage(controItem)" v-for="(controItem,serviceIndex) in controList"
:key="serviceIndex">
<view class="flex-center" style=" border-radius: 50%; padding: 20rpx; background-color: #FFF5F0; ">
<image :src="Service.GetIconImg(controItem.img)" class="service-icon"></image>
</view>
<text class="service-text">{{controItem.name}}</text>
</view>
</view>
</view>
<!-- 个人服务 -->
<view class="service-section" style="margin: 40rpx 30rpx 0; border-radius: 20rpx; ">
<text class="section-title" style="font-weight: 600;">我的服务</text>
<view class="" style=" margin-top: 40rpx; ">
<view :style="{ 'border-bottom':serviceIndex!==myServiceList.length-1?'1rpx solid #e2e2e2':'','padding-bottom':serviceIndex!==myServiceList.length-1?'20rpx':'' }" style=" margin-bottom: 20rpx; display: flex; align-items: center;"
@click="serviceFunc(myServiceItem,serviceIndex)"
v-for="(myServiceItem,serviceIndex) in myServiceList" :key="serviceIndex">
<image :src="Service.GetIconImg(myServiceItem.img)" style="width: 45rpx; height: 45rpx; "></image>
<text
style=" flex: 1; margin-left: 30rpx; font-size: 30rpx; ">{{myServiceItem.name}}</text>
<up-icon name="arrow-right" size="14" color='#9CA3AF' :bold='true'></up-icon>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app";
import { Service } from "@/Service/Service"
import { ref } from "vue";
import { vpUserService } from '@/Service/vp/vpUserService'
interface accInfo {
account : number
integral : number
userId : string
}
let controList = ref([
{
img: '/static/index/user/analysis.png',
name: '数据统计',
path: '/pages/userFunc/statistics'
},
{
img: '/static/index/user/trad.png',
name: '订单记录',
path: '/pages/userFunc/trade?type=' + 0
},
{
img: '/static/index/user/shop.png',
name: '商品管理',
path: '/pages/goods/goodsContro'
},
{
img: '/static/index/user/store.png',
name: '编辑店铺',
path: '/pages/userFunc/editStore'
}
])
let myServiceList = ref([
{
img: '/static/index/user/kefu.png',
name: '客服咨询',
path: ''
},
{
img: '/static/index/user/set.png',
name: '隐私政策',
path: '/pages/userFunc/set'
},
{
img: '/static/index/user/vip.png',
name: '会员码',
path: '/pages/userFunc/vip'
},
{
img: '/static/index/user/userCode.png',
name: '推广码',
path: '/pages/userFunc/promoteCode'
},
{
img: '/static/index/user/location.png',
name: '收货地址',
path: '/pages/userFunc/addressList'
}
])
let page = ref(1)
let accInfo = ref<accInfo>()
let userInfo = ref<any>({
headImg: ''
})
onLoad(() => {
});
onShow(() => {
getUserinfo()
getUseraccInfo()
});
const gotopage = (item : any) => {
if (item.path) {
Service.GoPage(item.path)
}
}
const serviceFunc = (item : any, index : any) => {
if (index == 0) {
wx.openCustomerServiceChat({
extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc959c128ce7801256' },
corpId: 'wwb1123fbb286554ab',
success(res) { },
fail(err) {
console.log(err, '失败')
// 失败回调
}
})
} else {
Service.GoPage(item.path)
}
}
const getUserinfo = () => {
vpUserService.GetUserInfo().then(res => {
userInfo.value = res.data.userInfo
})
}
const getUseraccInfo = () => {
vpUserService.GetUserAccInfo(page.value).then(res => {
accInfo.value = res.data.accInfo
})
}
</script>
<style lang="scss">
page {
background-color: #f6f6f6;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* 服务区域通用样式 */
.service-section,
.value-added-section {
background-color: #fff;
margin: 20rpx 0rpx;
overflow: hidden;
padding: 20rpx;
}
/* 服务网格 */
.service-grid {
display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx 30rpx;
}
.service-item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
}
.service-icon {
width: 40rpx;
height: 40rpx;
}
.service-text {
font-size: 24rpx;
color: #666;
margin-top: 16rpx;
text-align: center;
}
</style>

View File

@@ -0,0 +1,184 @@
/*
Animation 微动画
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
*/
/* css 滤镜 控制黑白底色gif的 */
.gif-black{
mix-blend-mode: screen;
}
.gif-white{
mix-blend-mode: multiply;
}
/* Animation css */
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}