init
This commit is contained in:
sjk
37
miniprogram/pages/usercenter/components/order-group/index.js
Normal file
37
miniprogram/pages/usercenter/components/order-group/index.js
Normal file
@@ -0,0 +1,37 @@
|
||||
Component({
|
||||
externalClasses: ['title-class', 'icon-class', 'number-class'],
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
},
|
||||
properties: {
|
||||
orderTagInfos: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '我的订单',
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
value: '全部订单',
|
||||
},
|
||||
isTop: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
classPrefix: {
|
||||
type: String,
|
||||
value: 'wr',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClickItem(e) {
|
||||
this.triggerEvent('onClickItem', e.currentTarget.dataset.item);
|
||||
},
|
||||
|
||||
onClickTop() {
|
||||
this.triggerEvent('onClickTop', {});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
||||
"t-badge": "tdesign-miniprogram/badge/badge",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<view class="order-group">
|
||||
<t-cell-group wx:if="{{isTop}}">
|
||||
<t-cell
|
||||
t-class="order-group__top"
|
||||
t-class-left="order-group__left"
|
||||
t-class-title="order-group__top__title"
|
||||
t-class-note="order-group__top__note"
|
||||
title="{{title}}"
|
||||
note="{{desc}}"
|
||||
bordered="{{false}}"
|
||||
arrow
|
||||
bind:tap="onClickTop"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<view class="order-group__content">
|
||||
<view
|
||||
class="order-group__item"
|
||||
wx:for="{{orderTagInfos}}"
|
||||
wx:for-item="item"
|
||||
wx:key="index"
|
||||
data-item="{{item}}"
|
||||
bindtap="onClickItem"
|
||||
>
|
||||
<view class="order-group__item__icon icon-class">
|
||||
<t-badge count="{{item.orderNum}}" max-count="{{99}}" color="#FF4646">
|
||||
<t-icon
|
||||
prefix="{{classPrefix}}"
|
||||
name="{{item.iconName}}"
|
||||
size="56rpx"
|
||||
customStyle="background-image: -webkit-linear-gradient(90deg, #6a6a6a 0%,#929292 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
|
||||
/>
|
||||
</t-badge>
|
||||
</view>
|
||||
<view class="order-group__item__title title-class">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,56 @@
|
||||
.order-group {
|
||||
margin-bottom: 24rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
.order-group .order-group__top {
|
||||
padding: 24rpx 18rpx 24rpx 32rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
.order-group__top___title {
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.order-group__top__note {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.order-group__content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 164rpx;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
}
|
||||
.order-group__item {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
.order-group__item:first-child {
|
||||
border-radius: 0 0 0 16rpx;
|
||||
}
|
||||
.order-group__item:last-child {
|
||||
border-radius: 0 0 16rpx 0;
|
||||
}
|
||||
.order-group__item__title {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
.order-group__item__icon {
|
||||
margin-bottom: 20rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
position: relative;
|
||||
}
|
||||
.order-group__top__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.order-group .order-group__left {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
Component({
|
||||
properties: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
observer(show) {
|
||||
if (!show) return;
|
||||
this.updateDivisions();
|
||||
},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
value: '',
|
||||
observer() {
|
||||
if (!this.data.show) return;
|
||||
this.updateDivisions();
|
||||
},
|
||||
},
|
||||
pickerOptions: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer() {
|
||||
if (!this.data.show) return;
|
||||
this.updateDivisions();
|
||||
},
|
||||
},
|
||||
headerVisible: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
},
|
||||
data: {
|
||||
pickerValue: [],
|
||||
},
|
||||
methods: {
|
||||
updateDivisions() {
|
||||
const { pickerOptions, value } = this.data;
|
||||
const index = (pickerOptions || []).findIndex(
|
||||
(item) => item.code === value,
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({ pickerValue: index >= 0 ? [index] : [0] });
|
||||
}, 0);
|
||||
},
|
||||
|
||||
getAreaByIndex(indexes) {
|
||||
const { pickerOptions } = this.data;
|
||||
return pickerOptions[indexes.toString()];
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
const currentValue = e.detail.value;
|
||||
const target = this.getAreaByIndex(currentValue);
|
||||
if (target === null) return;
|
||||
|
||||
this.setData({ pickerValue: currentValue });
|
||||
this.triggerEvent('change', { value: target.code, target: target });
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
const target = this.getAreaByIndex(this.data.pickerValue);
|
||||
this.triggerEvent('confirm', { value: target?.code, target });
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.triggerEvent('close');
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<t-popup visible="{{show}}" placement="bottom">
|
||||
<view class="city-picker-box" slot="content">
|
||||
<view wx:if="{{headerVisible}}" class="city-picker-header city-picker-more">
|
||||
<view class="btn" hover-class="btn__active" catch:tap="onClose">取消</view>
|
||||
<view wx:if="{{title}}" class="title">{{title}}</view>
|
||||
<view class="btn primary" hover-class="btn__active" catch:tap="onConfirm">确定</view>
|
||||
</view>
|
||||
<view wx:else class="city-picker-header">
|
||||
<view wx:if="{{title}}" class="title">{{title}}</view>
|
||||
</view>
|
||||
<picker-view class="picker" indicator-class="picker-center-row" value="{{pickerValue}}" bind:change="onChange">
|
||||
<picker-view-column class="picker-column">
|
||||
<view wx:for="{{ pickerOptions }}" wx:key="code">{{ item.name }}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view class="city-picker-footer" wx:if="{{!headerVisible}}">
|
||||
<view class="btn" hover-class="btn__active" catch:tap="onClose">取消</view>
|
||||
<view class="btn primary" hover-class="btn__active" catch:tap="onConfirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
@@ -0,0 +1,102 @@
|
||||
.city-picker-container {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
}
|
||||
.city-picker-container.show {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.city-picker-container.show .city-picker-box {
|
||||
bottom: 0;
|
||||
}
|
||||
.city-picker-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.city-picker-header {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.city-picker-more {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.city-picker-footer {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.city-picker-footer .btn {
|
||||
width: 330rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
}
|
||||
.city-picker-footer .btn__active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.city-picker-footer .btn::after {
|
||||
display: block;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: -50%;
|
||||
right: -50%;
|
||||
top: -50%;
|
||||
bottom: -50%;
|
||||
transform: scale(0.5);
|
||||
border: 1rpx solid #999999;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.city-picker-footer .btn.primary {
|
||||
color: #fa550f;
|
||||
}
|
||||
.city-picker-footer .btn.primary::after {
|
||||
border-color: #fa550f;
|
||||
}
|
||||
.picker-column:not(:first-child) {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.city-picker-box {
|
||||
position: absolute;
|
||||
bottom: -100%;
|
||||
transition: 0.3s bottom ease-in-out;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
color: #333333;
|
||||
font-size: 34rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.show .city-picker-shadow {
|
||||
display: block;
|
||||
}
|
||||
.picker {
|
||||
height: 300rpx;
|
||||
margin: 50rpx 0;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
}
|
||||
/* 似乎小程序picker-view的bug，indicator-class仅height生效，其他诸如line-height、text-align等放到父class中设置 */
|
||||
.picker-center-row {
|
||||
height: 88rpx;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
const AuthStepType = {
|
||||
ONE: 1,
|
||||
TWO: 2,
|
||||
THREE: 3,
|
||||
};
|
||||
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
},
|
||||
properties: {
|
||||
currAuthStep: {
|
||||
type: Number,
|
||||
value: AuthStepType.ONE,
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
value: {},
|
||||
},
|
||||
isNeedGetUserInfo: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
data: {
|
||||
defaultAvatarUrl: 'https://tdesign.gtimg.com/miniprogram/template/retail/usercenter/icon-user-center-avatar@2x.png',
|
||||
AuthStepType,
|
||||
},
|
||||
methods: {
|
||||
gotoUserEditPage() {
|
||||
this.triggerEvent('gotoUserEditPage');
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-avatar": "tdesign-miniprogram/avatar/avatar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<view class="user-center-card">
|
||||
<!-- 未登录的情况 -->
|
||||
<block wx:if="{{currAuthStep === AuthStepType.ONE}}">
|
||||
<view class="user-center-card__header" bind:tap="gotoUserEditPage">
|
||||
<t-avatar image="{{userInfo.avatarUrl || defaultAvatarUrl}}" class="user-center-card__header__avatar" />
|
||||
<view class="user-center-card__header__name">{{'请登录'}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 已登录但未授权用户信息情况 -->
|
||||
<block wx:if="{{currAuthStep === AuthStepType.TWO}}">
|
||||
<view class="user-center-card__header">
|
||||
<t-avatar image="{{userInfo.avatarUrl || defaultAvatarUrl}}" class="user-center-card__header__avatar" />
|
||||
<view class="user-center-card__header__name">{{userInfo.nickName || '微信用户'}}</view>
|
||||
<!-- 需要授权用户信息，通过slot添加弹窗 -->
|
||||
<view class="user-center-card__header__transparent" wx:if="{{isNeedGetUserInfo}}">
|
||||
<slot name="getUserInfo" />
|
||||
</view>
|
||||
<!-- 不需要授权用户信息，仍然触发gotoUserEditPage事件 -->
|
||||
<view class="user-center-card__header__transparent" bind:tap="gotoUserEditPage" wx:else></view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 已登录且已经授权用户信息的情况 -->
|
||||
<block wx:if="{{currAuthStep === AuthStepType.THREE}}">
|
||||
<view class="user-center-card__header" bind:tap="gotoUserEditPage">
|
||||
<t-avatar
|
||||
t-class="avatar"
|
||||
mode="aspectFill"
|
||||
class="user-center-card__header__avatar"
|
||||
image="{{userInfo.avatarUrl || defaultAvatarUrl}}"
|
||||
/>
|
||||
<view class="user-center-card__header__name">{{userInfo.nickName || '微信用户'}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
@@ -0,0 +1,48 @@
|
||||
.user-center-card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 480rpx;
|
||||
background-image: url('https://tdesign.gtimg.com/miniprogram/template/retail/template/user-center-bg-v1.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
.user-center-card__header {
|
||||
margin-top: 192rpx;
|
||||
margin-bottom: 48rpx;
|
||||
height: 96rpx;
|
||||
line-height: 48rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.user-center-card__header__avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-center-card__header__name {
|
||||
font-size: 36rpx;
|
||||
line-height: 48rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-left: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.user-center-card__header__transparent {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.user-center-card__icon {
|
||||
line-height: 96rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user