xlcs/xlcs-user/pages/my/my.vue

275 lines
9.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 {discount, fruit, invite, recommend} 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>