6.8
This commit is contained in:
@@ -23,11 +23,11 @@
|
||||
</view>
|
||||
<view class="address-operate">
|
||||
<view @click="editAddress">
|
||||
<img src="@/pageE/static/mine/24.png" />
|
||||
<image src="@/pageE/static/mine/24.png"></image>
|
||||
<view>编辑</view>
|
||||
</view>
|
||||
<view>
|
||||
<img src="@/pageE/static/mine/25.png" />
|
||||
<image src="@/pageE/static/mine/25.png"></image>
|
||||
<view>删除</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -54,12 +54,12 @@ export default {
|
||||
methods: {
|
||||
editAddress() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/mine/EditAddress'
|
||||
url: '/pageE/more/EditAddress'
|
||||
});
|
||||
},
|
||||
addAddress() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/mine/AddAddress'
|
||||
url: '/pageE/more/AddAddress'
|
||||
});
|
||||
},
|
||||
changeDefault(event) {
|
||||
@@ -136,9 +136,21 @@ export default {
|
||||
&:not(:last-child) {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
> img {
|
||||
height: 23rpx;
|
||||
> image {
|
||||
margin-right: 15rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&:first-child {
|
||||
> image {
|
||||
width: 23rpx;
|
||||
height: 23rpx;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
> image {
|
||||
width: 17rpx;
|
||||
height: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="article-list">
|
||||
<view v-for="(item, index) in articleList" :key="index" class="list-item" @click="toDetailsPage()">
|
||||
<view>{{ type }}</view>
|
||||
<img src="@/pageE/static/mine/21.png" />
|
||||
<image src="@/pageE/static/mine/21.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -18,7 +18,7 @@ export default {
|
||||
methods: {
|
||||
toDetailsPage() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/mine/ArticleDetails?title=' + this.type
|
||||
url: '/pageE/mine/ArticleDetails?title=' + this.type + "详情"
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -26,7 +26,7 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.article-list {
|
||||
min-height: calc(100vh-var(--custom-bar-height));
|
||||
min-height: calc(100vh - var(--window-top));
|
||||
background-color: #ECECEC;
|
||||
.list-item {
|
||||
display: flex;
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
padding: 0 30rpx;
|
||||
font-size: 30rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
> img {
|
||||
> image {
|
||||
width: 14rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
114
components/mine/collection-item/index.vue
Normal file
114
components/mine/collection-item/index.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view class="collection-item">
|
||||
<u-swipe-action
|
||||
v-for="(item, index) in list" :key="index"
|
||||
:index='index'
|
||||
:show="item.show"
|
||||
:options="options"
|
||||
@click="click"
|
||||
@open="open"
|
||||
>
|
||||
<view class="item u-border-bottom">
|
||||
<image src="@/pageE/static/mine/23.png"></image>
|
||||
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
|
||||
<view class="title-wrap">
|
||||
<view class="item-top u-line-2">木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子</view>
|
||||
<view class="item-bottom">
|
||||
<view class="item-price">￥99</view>
|
||||
<view class="item-date">
|
||||
<image src="@/pageE/static/mine/26.png"></image>
|
||||
<view>2020-05-17</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
show: false,
|
||||
}
|
||||
],
|
||||
btnWidth: 152,
|
||||
show: false,
|
||||
options: [
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#FF3131'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(index) {
|
||||
this.list.splice(index, 1);
|
||||
this.$u.toast(`删除了第${index+1}个cell`);
|
||||
},
|
||||
open(index) {
|
||||
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
|
||||
// 原本为'false'，再次设置为'false'会无效
|
||||
this.list[index].show = true;
|
||||
this.list.map((val, idx) => {
|
||||
if(index != idx) this.list[idx].show = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.collection-item {
|
||||
.item {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
> image {
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.title-wrap {
|
||||
.item-top {
|
||||
font-size: 30rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
line-height: 44rpx;
|
||||
margin-bottom: 54rpx;
|
||||
}
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.item-price {
|
||||
font-size: 30rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
.item-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> image {
|
||||
margin-right: 25rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
components/mine/comment/index.vue
Normal file
72
components/mine/comment/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="comment">
|
||||
<view class="user-info">
|
||||
<image src="@/pageE/static/mine/23.png" class="user-avatar"></image>
|
||||
<view class="user-name">***雪</view>
|
||||
</view>
|
||||
<view class="user-comment">
|
||||
<view class="text u-line-2">宝贝收到了和卖家描述的一样,质量不错,很漂亮一直想买这样的杯子，这个蓝色的稍微有点小瑕疵，不过自己用没问题没问题没问题</view>
|
||||
<view class="image">
|
||||
<image v-for="(src, index) in ImageList" :key="index" :src="src" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ImageList: [
|
||||
require('@/pageE/static/mine/23.png'),
|
||||
require('@/pageE/static/mine/23.png'),
|
||||
require('@/pageE/static/mine/23.png'),
|
||||
require('@/pageE/static/mine/23.png')
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.comment {
|
||||
padding: 30rpx;
|
||||
width: 750rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 19rpx;
|
||||
.user-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.user-name {
|
||||
font-size: 26rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
}
|
||||
.user-comment {
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 19rpx;
|
||||
}
|
||||
.image {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> image {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
flex-shrink: 0;
|
||||
&:not(:nth-child(3n)) {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
components/mine/integral-page/index.vue
Normal file
65
components/mine/integral-page/index.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view class="integral1">
|
||||
<view class="integral-top">
|
||||
<view>
|
||||
<view class="title">总积分</view>
|
||||
<view class="value">999</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="title">经验值</view>
|
||||
<view class="value">999</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="title">预计进度</view>
|
||||
<view class="value">999</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="integral-botom">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: '<h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.integral1 {
|
||||
.integral-top {
|
||||
padding: 79rpx 88rpx;
|
||||
width: 750rpx;
|
||||
height: 271rpx;
|
||||
background: linear-gradient(0deg,rgba(246,211,119,1) 1%,rgba(240,154,105,1) 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255,255,255, 0.6);
|
||||
margin-bottom: 29rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 48rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.integral-botom {
|
||||
position: absolute;
|
||||
width: 750rpx;
|
||||
// height: 856rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
top: 251rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
components/mine/order-item/index.vue
Normal file
163
components/mine/order-item/index.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="order-item">
|
||||
<view class="order-title">
|
||||
<view class="store-info">
|
||||
<image src="@/pageE/static/mine/23.png"></image>
|
||||
<view class="store-name">胖胖的店</view>
|
||||
</view>
|
||||
<view class="order-status">交易成功</view>
|
||||
</view>
|
||||
<view class="goods-info" @click="toDetailsPage">
|
||||
<image src="@/pageE/static/mine/23.png"></image>
|
||||
<view class="goods-text">
|
||||
<view class="goods-name u-line-2">木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子</view>
|
||||
<view class="goods-sku u-line-1" v-if="current !== 5 && current !== 6">XL;红色条纹XL;红色条纹XL;红色条纹</view>
|
||||
<view class="goods-time u-line-1" v-if="current == 1 || current == 4">距离结束：23:23:38</view>
|
||||
<view class="goods-price u-line-1" v-if="current == 5 || current == 6">总价：￥99.00，实付款￥99</view>
|
||||
<view class="goods-date" v-if="current == 5 || current == 6">
|
||||
<image src="@/pageE/static/mine/26.png"></image>
|
||||
<view>2020.05.17</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-btn" v-if="[0, 2, 4].indexOf(current) < 0">
|
||||
<view class="logistics" v-if="current == 3" @click="toLogistics">查看物流</view>
|
||||
<view class="comment" v-if="current == 5" @click="toComment">立即评价</view>
|
||||
<view class="payment" v-if="current == 1">立即支付</view>
|
||||
<view class="service" v-if="current == 6">联系官方客服</view>
|
||||
<view class="submit" v-if="current == 6">提交官方审核</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
current: Number
|
||||
},
|
||||
methods: {
|
||||
toDetailsPage() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/order/Details?current=' + this.current
|
||||
});
|
||||
},
|
||||
toLogistics() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/order/Logistics'
|
||||
});
|
||||
},
|
||||
toComment() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/order/Comment'
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-item {
|
||||
width: 690rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
.order-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
.store-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.store-name {
|
||||
font-size: 26rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
.order-status {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255,120,15,1);
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
margin-bottom: 28rpx;
|
||||
> image {
|
||||
flex-shrink: 0;
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.goods-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
line-height: 38rpx;
|
||||
}
|
||||
.goods-sku {
|
||||
max-width: 230rpx;
|
||||
background: rgba(236,236,236,1);
|
||||
border-radius: 6rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
.goods-time {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,49,49,1);
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 24rpx;
|
||||
color: rgba(253,211,96,1);
|
||||
}
|
||||
.goods-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
> image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@mixin btn-class($width, $color) {
|
||||
width: $width;
|
||||
height: 60rpx;
|
||||
border: 2rpx solid $color;
|
||||
color: $color;
|
||||
border-radius: 30rpx;
|
||||
padding: 15rpx 23rpx;
|
||||
font-size: 28rpx;
|
||||
&:not(:last-child) {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
.logistics, .comment, .payment {
|
||||
@include btn-class($width: 160rpx, $color: rgba(255,119,15,1));
|
||||
}
|
||||
.service {
|
||||
@include btn-class($width: 216rpx, $color: rgba(155,153,153,1));
|
||||
}
|
||||
.submit {
|
||||
@include btn-class($width: 216rpx, $color: rgba(255,119,15,1));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user