yovinchen/xlcs
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

调整小程序

Browse Source
This commit is contained in:
yovinchen
2023-09-22 15:41:37 +08:00
parent b0ce6e2ad1
commit e06438f776
52 changed files with 4958 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
atguigu-tuan/pages/my/my.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<view class="gg">
<u-navbar :background="{ 'background-image': 'linear-gradient(to right, rgb(255,180,61), rgb(255, 101, 0))' }" :border-bottom="false"
:is-back="false"></u-navbar>
<view class="gg-content">
<view class="gg-header u-p-l-20 u-p-r-20">
<view class="u-flex u-m-l-20">
<u-image :src="userInfo.photoUrl" height="100rpx" shape="circle" width="100rpx"/>
<view class="u-font-lg u-type-info-light u-m-l-20">Hi {{ userInfo.nickName }}</view>
</view>
<view class="wrap u-p-t-20" justify="between">
<u-row gutter="16">
<u-col span="4">
<view class="gg-order-item">
<view class="u-font-lg u-type-info-light">0元</view>
<view class="u-font-xs u-type-info-light">资产</view>
</view>
</u-col>
<u-col span="4">
<view class="gg-order-item">
<view class="u-font-lg u-type-info-light">0.00元</view>
<view class="u-font-xs u-type-info-light">红包</view>
</view>
</u-col>
<u-col span="4">
<view class="gg-order-item">
<view class="u-font-lg u-type-info-light">0张</view>
<view class="u-font-xs u-type-info-light">优惠券</view>
</view>
</u-col>
</u-row>
</view>
</view>
<view class="gg-header-bottom"></view>
<view class="gg-content-container">
<view class="gg-content-container-box">
<view class="u-flex u-row-between">
<view class="u-m-20">我的订单</view>
<view class="u-m-20 u-font-xs u-type-info" @click="gotoOrderList(-1)">查看全部 ></view>
</view>
<view class="u-flex u-row-around">
<view class="gg-order-item" @click="gotoOrderList(0)">
<view class="iconfont icon-daifukuan u-type-warning"></view>
<view class="u-font-xs">待付款</view>
</view>
<view class="gg-order-item" @click="gotoOrderList(1)">
<view class="iconfont icon-daifahuo1 u-type-warning"></view>
<view class="u-font-xs u-p-l-5">待发货</view>
</view>
<view class="gg-order-item" @click="gotoOrderList(2)">
<view class="iconfont icon-tihuoguanli u-type-warning"></view>
<view class="u-font-xs u-p-l-5">待提货</view>
</view>
<view class="gg-order-item" @click="gotoOrderList(3)">
<view class="iconfont icon-pinglun2 u-type-warning"></view>
<view class="u-font-xs u-p-l-10">待评价</view>
</view>
<view class="gg-order-item" @click="gotoOrderList(4)">
<view class="iconfont icon-tuikuanshouhou u-type-warning"></view>
<view class="u-font-xs">已完结</view>
</view>
</view>
<view class="u-p-20"></view>
</view>
<view class="gg-content-container-box u-m-t-20">
<view class="u-flex u-row-around u-p-t-20">
<view class="gg-order-item">
<image :src="recommend" class="gg-svg-icon"></image>
<view class="u-font-xs">有奖推荐</view>
</view>
<view class="gg-order-item">
<image :src="invite" class="gg-svg-icon"></image>
<view class="u-font-xs u-p-l-5">邀新团长有奖</view>
</view>
<view class="gg-order-item">
<image :src="fruit" class="gg-svg-icon"></image>
<view class="u-font-xs u-p-l-5">7天种水果</view>
</view>
<view class="gg-order-item">
<image :src="discount" class="gg-svg-icon"></image>
<view class="u-font-xs u-p-l-10">天天低价</view>
</view>
</view>
<view class="u-p-20"></view>
</view>
<view class="gg-content-container-box u-m-t-20">
<u-swiper :list="list"></u-swiper>
</view>
<view class="gg-content-container-box u-m-t-20">
<view class="wrap u-p-t-20" justify="between">
<u-row gutter="16">
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-ico"></view>
<view class="u-font-xs">提货码</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item" @click="gotoMyPickUpLocation">
<view class="iconfont icon-dianpu"></view>
<view class="u-font-xs">提货点管理</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-miaosha"></view>
<view class="u-font-xs">秒杀提醒</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-yonghu"></view>
<view class="u-font-xs">成为团长</view>
</view>
</u-col>
</u-row>
<u-gap height="30"></u-gap>
<u-row gutter="16">
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-kefu"></view>
<view class="u-font-xs">联系客服</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-shanghupiliangruzhu"></view>
<view class="u-font-xs">商户入驻</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-jiameng"></view>
<view class="u-font-xs">代理商加盟</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-tousu"></view>
<view class="u-font-xs">投诉与建议</view>
</view>
</u-col>
</u-row>
<u-gap height="30"></u-gap>
<u-row gutter="16">
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-shezhi"></view>
<view class="u-font-xs">设置</view>
</view>
</u-col>
</u-row>
<u-gap height="30"></u-gap>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// https://www.zhangxinxu.com/sp/svgo/ 利用在线svg转base64功能
// 将svg图形转成base64，然后再设置成js变量的形式引入使用
// 需要注意将变量设置到data中
// 强调：为什么不用iconfont呢？和上面的iconfont一样。因为彩色图标变黑了，色彩没起作用。
import {fruit, recommend, invite, discount} from '@/common/svgIcon.js';
export default {
data() {
return {
userInfo: {},
fruit,
recommend,
invite,
discount,
list: [
{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
]
};
},
methods: {
gotoOrderList(index) {
this.$u.route('/pagesOrder/orderList/orderList?current=' + index);
},
gotoMyPickUpLocation() {
uni.navigateTo({
url: '/pagesLocation/myPickUpLocation/myPickUpLocation'
});
}
},
async mounted() {
this.userInfo = uni.getStorageSync('userInfo');
}
};
</script>
<style lang="scss" scoped>
.gg {
height: 100%;
&-content {
height: 100%;
background-color: $u-bg-color;
}
&-header {
background-image: linear-gradient(to right, rgb(255, 180, 61), rgb(255, 101, 0));
height: 300rpx;
}
// 头部区域底部左右圆角区域
&-header-bottom {
background-image: linear-gradient(to right, rgb(255, 180, 61), rgb(255, 101, 0));
height: 100rpx;
border-bottom-left-radius: 100rpx;
border-bottom-right-radius: 100rpx;
}
&-content-container {
margin-left: 20rpx;
width: 710rpx;
position: absolute;
top: 370rpx;
&-box {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 25rpx;
.iconfont {
font-size: 50rpx;
width: 80rpx;
height: 60rpx;
text-align: center;
}
}
}
&-order-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&-svg-icon {
width: 80rpx;
height: 80rpx;
}
}
</style>