zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature/1.8.0-uniapp' into feature/1.8.0-uniapp

pull/2/head
YunaiV 2022-12-08 00:07:20 +08:00
parent 7fc9689f07 6878ac04c9
commit 373188b58d
17 changed files with 994 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
yudao-ui-app/api/cart.js Normal file
View File

@ -0,0 +1,5 @@
const { http } = uni.$u
//获取购物车数据
export const getCartProductDetail = () => http.get('/trade/cart/get-detail')

4
yudao-ui-app/api/order.js Normal file
View File

@ -0,0 +1,4 @@
const { http } = uni.$u
//获得订单交易分页
export const getOrderPageData = params => http.get('/trade/order/page', { params })

106
yudao-ui-app/components/yd-address-select/yd-address-select.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<view class="address-box">
<view v-if="!address.area" class="address-empty">
<view class="address-tips">
<u--text :lines="1" size="14px" color="#333" bold="true" text="请选择收货地址"></u--text>
<u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
</view>
</view>
<view v-else class="address-selected">
<view class="address-area">
<view class="default-tag">默认</view>
<u--text :lines="1" size="12px" color="#666" :text="address.area"></u--text>
</view>
<view class="address-detail">
<u--text :lines="2" size="14px" color="#333" :bold="true" :text="address.detail"></u--text>
<u-icon class="icon-arrow-right" name="arrow-right"></u-icon>
</view>
<view class="address-user">
<view class="user-text">{{ address.name }}</view>
<view class="user-text">{{ address.mobile }}</view>
</view>
</view>
<image class="address-line" src="/static/images/address-line.png"></image>
</view>
</template>
<script>
/**
* 地址选择
*/
export default {
name: 'yd-address-select',
props: {
address: {
type: Object,
default: () => []
}
},
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped>
.address-box {
padding: 0 10rpx;
background-color: #fff;
border-radius: 0 0 30rpx 30rpx;
.address-empty {
padding: 20rpx 20rpx 0;
.address-tips {
@include flex-space-between;
padding: 10rpx 0;
.icon-arrow-right {
margin-left: 50rpx;
}
}
}
.address-selected {
padding: 20rpx 20rpx 0;
.address-area {
@include flex-left;
.default-tag {
font-size: 22rpx;
color: $u-primary;
border: 1rpx solid $u-primary;
padding: 0 6rpx;
margin-right: 10rpx;
border-radius: 5rpx;
}
}
.address-detail {
@include flex-space-between;
padding: 10rpx 0;
.icon-arrow-right {
margin-left: 50rpx;
}
}
.address-user {
@include flex-left;
.user-text {
color: #666;
font-size: 24rpx;
margin-right: 10rpx;
}
}
}
.address-line {
width: 100%;
margin: 0 auto;
height: 5rpx;
}
}
</style>

2
yudao-ui-app/components/yd-banner/yd-banner.vue
View File

@ -11,7 +11,7 @@
* 广告滚动图
*/
export default {
name: 'mkt-banner',
name: 'yd-banner',
components: {},
props: {
keyName: {

116
yudao-ui-app/components/yd-cart-product/yd-cart-product.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<view>
<view class="product-item" v-for="(item, index) in productList" :key="item.productId" @click="handleProductItemClick(item.productId)">
<view class="product-check" @click.stop="handleCheckProduct(item.productId, item.checked)">
<u-icon v-if="item.checked" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
<view v-else class="un-check-box"></view>
</view>
<image class="product-image" :src="item.coverUrl"></image>
<view class="item-info">
<view class="info-text">
<u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
<u-gap height="2px"></u-gap>
<u--text class="info-tips" :lines="1" size="12px" color="#939393" :text="item.tips"></u--text>
</view>
<view class="price-number-box">
<view class="price-box">
<yd-text-price color="red" size="13" intSize="20" :price="item.sellPrice"></yd-text-price>
<yd-text-price v-if="item.strikePrice" style="margin-left: 5px" decoration="line-through" color="#999" size="12" :price="item.sellPrice"></yd-text-price>
</view>
<view class="number-box" @click.stop>
<u-number-box min="1" max="999" bgColor="#fff" integer :disableMinus="false" :disabledInput="true" :name="item.productId" :value="item.productCount" @change="handleProductCountChange"></u-number-box>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 购物车商品列表
*/
export default {
name: 'yd-cart-product',
props: {
productList: {
type: Array,
default: () => []
}
},
data() {
return {
//status: 'nomore',
loadingText: '加载中...',
loadmoreText: '上拉加载更多',
nomoreText: '没有更多了'
}
},
methods: {
handleProductItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
})
},
handleItemCartClick(productId) {
this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: 1, addition: true }).then(res => {
uni.$u.toast('已添加到购物车')
})
},
handleCheckProduct(productId, checked) {
this.$emit('productCheckedChange', productId, !checked)
},
handleProductCountChange({ name, value }) {
this.$emit('productCartProductCountChange', name, value)
}
}
}
</script>
<style lang="scss" scoped>
.product-item {
background: #ffffff;
@include flex-space-between;
border-bottom: $custom-border-style;
padding: 10rpx 0 0 5rpx;
.product-check {
padding: 20rpx;
.un-check-box {
width: 20px;
height: 20px;
border: 1px solid #939393;
border-radius: 50%;
}
}
.product-image {
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
}
.item-info {
flex: 1;
padding: 20rpx 20rpx 0;
.info-text {
height: 70rpx;
padding-bottom: 10rpx;
}
.price-number-box {
@include flex-space-between;
.price-box {
@include flex-left();
}
.number-box {
height: 100rpx;
@include flex-center;
}
}
}
}
</style>

100
yudao-ui-app/components/yd-order-product/yd-order-product.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<view>
<view class="product-item" v-for="(item, index) in productList" :key="item.productId">
<image class="product-image" :src="item.coverUrl"></image>
<view class="item-info">
<view class="info-text">
<u--text :lines="1" size="15px" color="#333333" :text="item.productTitle"></u--text>
<u-gap height="10"></u-gap>
<yd-text-price class="product-price" size="13" intSize="16" :price="item.sellPrice"></yd-text-price>
</view>
<view class="price-number-box">
<view class="number-box">
<view class="product-number">共 {{ item.productCount }} 件</view> 小计：
</view>
<view class="number-box" @click.stop>
<yd-text-price size="13" intSize="18" :price="item.totalPrice"></yd-text-price>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 订单商品列表
*/
export default {
name: 'yd-order-product',
props: {
productList: {
type: Array,
default: () => []
}
},
data() {
return {}
},
methods: {
handleProductItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
})
}
}
}
</script>
<style lang="scss" scoped>
.product-item {
background: #ffffff;
@include flex-space-between;
border-bottom: $custom-border-style;
padding: 10rpx 0 0 5rpx;
.product-check {
padding: 20rpx;
.un-check-box {
width: 20px;
height: 20px;
border: 1px solid #939393;
border-radius: 50%;
}
}
.product-image {
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
}
.item-info {
flex: 1;
padding: 0 20rpx;
.info-text {
padding-bottom: 10rpx;
.product-price {
margin-top: 15rpx;
}
}
.price-number-box {
@include flex-space-between;
.number-box {
font-size: 24rpx;
.product-number {
width: 200rpx;
}
}
.number-box {
height: 60rpx;
@include flex-center;
}
}
}
}
</style>

2
yudao-ui-app/components/yd-product-more/yd-product-more.vue
View File

@ -32,7 +32,7 @@
<script>
/**
* 商品列表
* 商品列表(加载更多)
*/
export default {
name: 'yd-product-more',

18
yudao-ui-app/pages.json
View File

@ -56,12 +56,30 @@
"navigationBarTitleText": "个人资料"
}
},
{
"path": "pages/setting/setting",
"style": {
"navigationBarTitleText": "账户设置"
}
},
{
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "商品详情"
}
},
{
"path": "pages/checkout/checkout",
"style": {
"navigationBarTitleText": "填写订单"
}
},
{
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "我的订单"
}
},
{
"path": "pages/address/list",
"style": {

197
yudao-ui-app/pages/cart/cart.vue
View File

@ -1,15 +1,50 @@
<template>
<view class="container">
<!-- 购物车为空 -->
<view v-if="!hasLogin || cartList.length === 0">
<view class="cart-empty">
<u-empty mode="car" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
<u-empty text="去逛逛添点什么吧" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
</view>
</view>
<!-- 购物车列表 -->
<scroll-view v-if="hasLogin && cartList.length > 0" class="cart-product" scroll-y="true">
<yd-cart-product :product-list="cartList" @productCheckedChange="handleProductCheckedChange" @productCountChange="handleProductCountChange"></yd-cart-product>
</scroll-view>
<!-- 未登录 -->
<view v-if="!hasLogin" class="login-tips-box">
<view class="login-tips">
<navigator url="/pages/login/social" open-type="navigate" hover-class="none">
<text class="login-link">登录</text>
<view class="login-link">登录查看</view>
</navigator>
<text>查看购物车</text>
</view>
</view>
<!-- 底部菜单 -->
<view class="cart-btn-container">
<view class="btn-box">
<view class="product-check-info">
<view class="check-all-btn" @click.stop="handleCheckAllProduct">
<u-icon v-if="isCheckAll" name="checkmark-circle-fill" color="#3c9cff" size="22"></u-icon>
<view v-else class="un-check-box"></view>
</view>
<view class="info-text">合计：</view>
<view>
<yd-text-price color="red" size="15" intSize="20" :price="totalAmount"></yd-text-price>
</view>
</view>
<view v-if="checkedProduct.length > 0" class="cart-btn-group">
<u-button type="warning" shape="circle" size="small" text="移除" @click="handleRemoveProduct"></u-button>
<view class="btn-gap"></view>
<u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="去结算" @click="handleCheckoutProduct"></u-button>
</view>
<view v-else class="cart-btn-group">
<u-button type="warning" shape="circle" size="small" text="移除" disabled></u-button>
<view class="btn-gap"></view>
<u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="去结算" disabled></u-button>
</view>
</view>
</view>
</view>
@ -19,34 +54,172 @@
export default {
data() {
return {
title: ''
title: '',
cartList: [],
checkedNumber: 0,
totalAmount: 0
}
},
onLoad() {},
methods: {},
computed: {
checkedProduct() {
return this.cartList.filter(item => {
return item.checked
})
},
isCheckAll() {
if (this.cartList.length < 1) {
return false
}
return this.cartList.every(item => {
return item.checked
})
},
hasLogin() {
return this.$store.getters.hasLogin
}
},
onShow() {
if (this.hasLogin) {
this.loadCartDetailData()
} else {
this.cartList =[]
}
},
methods: {
loadCartDetailData() {
this.$store.dispatch('CartProductDetail').then(res => {
this.cartList = res.data || []
})
},
/** 商品全选/取消全选 */
handleCheckAllProduct() {
if (this.cartList.length < 1) {
return
}
const productIds = this.cartList.map(item => {
return item.productId
})
this.$store.dispatch('CartProductCheckChange', { productIds, checked: !this.isCheckAll }).then(res => {
this.cartList = res.data || []
})
},
/** 商品单选/取消单选 */
handleProductCheckedChange(productId, checked) {
this.$store.dispatch('CartProductCheckChange', { productIds: [productId], checked: checked }).then(res => {
this.cartList = res.data || []
})
},
/** 修改购物车商品数量 */
handleProductCountChange(productId, number) {
this.$store.dispatch('CartProductCountChange', { productIds: [productId], productCount: number }).then(res => {
this.cartList = res.data || []
})
},
/** 移除购物车商品 */
handleRemoveProduct() {
if (this.checkedProduct < 1) {
return
}
const productIds = this.checkedProduct.map(item => {
return item.productId
})
uni.showModal({
title: '确定要移除选中的商品？',
cancelText: '取消',
confirmText: '移除',
success: res => {
if (res.confirm) {
this.$store.dispatch('CartProductCountChange', { productIds: productIds, productCount: 0 }).then(res => {
this.cartList = res.data || []
})
} else if (res.cancel) {
//console.log('用户点击取消')
}
}
})
},
/** 购物车提交结算 */
handleCheckoutProduct() {
if (this.checkedProduct < 1) {
return
}
const checkedProduct = this.checkedProduct.map(item => {
return { productId: item.productId, productCount: item.productCount, sellPrice: item.sellPrice }
})
uni.$u.route('/pages/checkout/checkout', {
checkedProduct: JSON.stringify(checkedProduct)
})
}
}
}
</script>
<style lang="scss" scoped>
.cart-empty {
padding-top: 100rpx;
}
.login-tips-box {
padding-top: 100rpx;
.login-tips {
@include flex-center;
color: #939393;
font-size: 28rpx;
font-size: 24rpx;
letter-spacing: 5rpx;
}
.login-link {
color: $u-primary;
width: 160rpx;
height: 50rpx;
line-height: 50rpx;
border-radius: 50rpx;
border: 1px solid #777;
color: #777;
text-align: center;
}
}
.cart-btn-container {
position: fixed;
bottom: 0;
left: 0;
.btn-box {
background: $custom-bg-color;
border-top: $custom-border-style;
width: 750rpx;
@include flex-space-between();
height: 100rpx;
.product-check-info {
@include flex-left;
.check-all-btn {
padding: 20rpx;
.un-check-box {
width: 20px;
height: 20px;
border: 1px solid #939393;
border-radius: 50%;
}
}
.info-text {
font-size: 26rpx;
font-weight: bold;
color: #666666;
}
}
.cart-btn-group {
@include flex-right();
width: 360rpx;
padding-right: 10px;
.btn-gap {
width: 20rpx;
}
}
}
}
</style>

219
yudao-ui-app/pages/checkout/checkout.vue Normal file
View File

@ -0,0 +1,219 @@
<template>
<view class="container">
<!-- 收货地址选择 -->
<yd-address-select :address="address"></yd-address-select>
<!-- 订单商品信息 -->
<view class="checkout-goods">
<yd-order-goods :goods-list="checkoutList"></yd-order-goods>
</view>
<view class="freight-coupon-box">
<vidw class="box-row">
<view class="title">运费</view>
<yd-text-price class="freight-fee" size="15" :price="freightAmount"></yd-text-price>
</vidw>
<vidw class="box-row">
<view class="coupon-wrap">
<view class="coupon-title-tag">
<view class="title">优惠券</view>
<scroll-view class="coupon-tag-list" scroll-x="true">
<view v-for="item in couponList" :key="item.couponId" class="coupon-tag-item">{{ item.couponTag }}</view>
</scroll-view>
</view>
<yd-text-price class="coupon-fee" color="red" size="15" symbol="-￥" :price="couponAmount"></yd-text-price>
</view>
<u-icon name="arrow-right"></u-icon>
</vidw>
</view>
<!-- 订单备注信息 -->
<view class="user-remark-box">
<view class="title">订单备注</view>
<u--input maxlength="50" border="none" fontSize="14" v-model="remark" placeholder="如您需要请备注"></u--input>
</view>
<view class="cart-btn-container">
<view class="order-total-wrap">
<view class="order-total-info">
<view class="info-text">合计：</view>
<view>
<yd-text-price color="red" size="15" intSize="20" :price="totalAmount"></yd-text-price>
</view>
</view>
<view class="cart-btn-group">
<u-button style="margin-left: 10px" class="main-btn" type="primary" shape="circle" size="small" text="提交订单" @click="handleSubmitOrder"></u-button>
</view>
</view>
<u-safe-bottom customStyle="background: #ffffff"></u-safe-bottom>
</view>
</view>
</template>
<script>
import { checkoutCartProduct } from '../../api/order'
export default {
components: {},
data() {
return {
checkedProduct: [],
address: {
name: '客户',
mobile: '139****6563',
area: 'XXX市XXX区',
detail: 'XXX街道XXX小区XXX号楼XX-XXX'
},
checkoutList: [],
couponList: [
{
couponId: 3,
couponTag: '6元运费券'
}
],
totalAmount: 0,
freightAmount: 6,
couponAmount: 6,
remark: ''
}
},
onLoad(e) {
const checkedProduct = e.checkedProduct
if (checkedProduct) {
this.checkedProduct = JSON.parse(checkedProduct)
this.loadCheckoutProductData()
} else {
uni.$u.toast('请求参数错误')
}
},
methods: {
loadCheckoutProductData() {
checkoutCartProduct(this.checkedProduct)
.then(res => {
this.checkoutList = res.data.checkoutList || []
this.totalAmount = res.data.totalAmount || 0
})
.catch(err => {
console.log(err)
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
background-color: $custom-bg-color;
height: 100vh;
overflow-x: scroll;
}
.checkout-goods {
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx;
border-radius: 20rpx;
}
.freight-coupon-box {
background-color: #fff;
margin-top: 20rpx;
padding: 20rpx 30rpx;
border-radius: 20rpx;
.box-row {
@include flex-space-between;
padding: 10rpx 0;
.coupon-wrap {
@include flex-space-between;
width: 670rpx;
.coupon-title-tag {
@include flex-left;
.coupon-tag-list {
@include flex-left;
overflow-x: scroll;
width: 360rpx;
.coupon-tag-item {
display: inline-block;
font-size: 22rpx;
color: red;
border: 1rpx solid red;
padding: 1px 6rpx;
margin-right: 10rpx;
border-radius: 5rpx;
}
}
}
}
.title {
font-weight: 700;
font-size: 30rpx;
color: #333;
margin-right: 30rpx;
}
.freight-fee {
margin-right: 50rpx;
}
.coupon-fee {
margin-right: 20rpx;
}
}
}
.user-remark-box {
@include flex-space-between;
background-color: #fff;
margin-top: 20rpx;
padding: 30rpx;
border-radius: 20rpx;
.title {
font-weight: 700;
font-size: 30rpx;
color: #333;
margin-right: 30rpx;
}
}
.cart-btn-container {
position: fixed;
bottom: 0;
left: 0;
.order-total-wrap {
background: $custom-bg-color;
border-top: $custom-border-style;
width: 750rpx;
@include flex-space-between();
height: 100rpx;
.order-total-info {
@include flex-left;
.info-text {
margin-left: 20rpx;
font-size: 26rpx;
font-weight: bold;
color: #666666;
}
}
.cart-btn-group {
@include flex-right();
width: 360rpx;
padding-right: 10px;
.btn-gap {
width: 20rpx;
}
}
}
}
</style>

2
yudao-ui-app/pages/index/index.vue
View File

@ -8,7 +8,7 @@
</u-sticky>
<!--轮播图-->
<mkt-banner :banner-list="bannerList"></mkt-banner>
<yd-banner :banner-list="bannerList"></yd-banner>
<u-gap height="20px"></u-gap>

91
yudao-ui-app/pages/order/order.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<view class="container">
<u-sticky style="top: 0" offset-top="0">
<u-tabs :list="statusArray" :current="statusIndex" @change="handleStatusChange"></u-tabs>
</u-sticky>
<view class="order-list">
<view v-for="(item, index) in orderList" :key="item.orderNo" class="order-item">
<view class="item-title">{{ item.orderNo }}</view>
<view class="item-content">{{ item.orderStatus }}</view>
<view class="item-btn-group"></view>
</view>
</view>
</view>
</template>
<script>
import { getOrderPageData } from '../../api/order'
export default {
name: 'order',
data() {
return {
pageNo: 1,
statusIndex: 0,
statusArray: [
{
name: '全部',
status: '-1'
},
{
name: '待付款',
status: '0'
},
{
name: '已付款',
status: '10'
},
{
name: '待发货',
status: '20'
},
{
name: '待收货',
status: '30'
},
{
name: '已完成',
status: '40'
},
{
name: '已取消',
status: '50'
}
],
orderList: []
}
},
onLoad(e) {
const status = e.status
if (status !== undefined) {
this.statusArray.forEach((item, index) => {
if (item.status === status) {
this.statusIndex = index
}
})
}
this.loadOrderPageData()
},
methods: {
handleStatusChange(item) {
this.statusIndex = item.status
},
loadOrderPageData() {
let params = { pageNo: this.pageNo }
const status = this.statusArray[this.statusIndex].status
if (status >= 0) {
params.orderStatus = status
}
getOrderPageData(params)
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
}
</script>
<style lang="scss" scoped></style>

7
yudao-ui-app/pages/profile/profile.vue
View File

@ -4,14 +4,14 @@
<view class="info-item">
<view class="label">头像：</view>
<view class="info" @click="handleAvatarClick">
<u-avatar size="60" :src="userInfo.avatar"></u-avatar>
<u-avatar size="50" shape="square" :src="userInfo.avatar"></u-avatar>
<u-icon class="btn" name="arrow-right"></u-icon>
</view>
</view>
<view class="info-item">
<view class="label">昵称：</view>
<view class="info">
<u--input maxlength="10" :border="borderStyle" v-model="userInfo.nickname" @focus="borderStyle = 'bottom'" inputAlign="right" @blur="borderStyle = 'none'" @change="handleNameChange"></u--input>
<u--input maxlength="10" border="none" v-model="userInfo.nickname" inputAlign="right" @change="handleNameChange"></u--input>
</view>
</view>
<view class="info-item">
@ -41,8 +41,7 @@ export default {
mobile: ''
},
avatarFiles: [],
tempName: '',
borderStyle: 'none'
tempName: ''
}
},
computed: {

62
yudao-ui-app/pages/setting/setting.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<view class="container">
<u-gap height="20"></u-gap>
<u-cell-group class="setting-list" :border="false">
<u-cell class="setting-item" icon="lock" title="修改密码" isLink></u-cell>
<u-cell class="setting-item" icon="phone" title="换绑手机" isLink></u-cell>
<u-cell v-if="hasLogin" class="setting-item" icon="minus-circle" title="用户登出" @click="logout" isLink></u-cell>
</u-cell-group>
</view>
</template>
<script>
import UGap from '../../uni_modules/uview-ui/components/u-gap/u-gap'
export default {
components: { UGap },
data() {
return {}
},
computed: {
hasLogin() {
return this.$store.getters.hasLogin
}
},
onLoad() {},
methods: {
logout() {
uni.showModal({
title: '提示',
content: '您确定要退出登录吗',
success: res => {
if (res.confirm) {
this.$store.dispatch('Logout').then(res => {
uni.switchTab({
url: '/pages/user/user'
})
})
} else if (res.cancel) {
//console.log('用户点击取消')
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.setting-list {
padding: 10rpx 0;
background-color: #fff;
border-radius: 15rpx;
.setting-item {
padding: 10rpx 0;
&:last-child {
border-bottom: none;
}
}
}
</style>

73
yudao-ui-app/pages/user/user.vue
View File

@ -1,9 +1,15 @@
<template>
<view class="container">
<view class="user-header">
<view class="user-info" @click="loginOrJump('/pages/profile/profile')">
<u-avatar size="80" :src="userInfo.avatar"></u-avatar>
<text class="nick-name">{{ hasLogin ? userInfo.nickname || '游客' : '登录/注册' }}</text>
<view class="user-info" @click="pageRouter('/pages/profile/profile')">
<u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar>
<view class="info-text">
<view class="user-nickname">{{ hasLogin ? userInfo.nickname || ' ' : '匿名用户' }}</view>
<view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view>
</view>
</view>
<view class="user-setting">
<u-icon v-if="hasLogin" name="setting" color="#939393" size="22" @click="pageRouter('/pages/setting/setting')"></u-icon>
</view>
</view>
@ -12,7 +18,7 @@
<view>
<view class="order-header">
<text class="order-title">我的订单</text>
<view class="see-all">
<view class="see-all" @click="pageRouter(orderPage, -1)">
<text>查看全部</text>
<u-icon name="arrow-right"></u-icon>
</view>
@ -20,7 +26,7 @@
<view class="order-status-box">
<u-grid :border="false" :col="orderStatusList.length">
<u-grid-item v-for="(item, index) in orderStatusList" :key="index">
<u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.state)">
<u-icon :name="item.icon" :size="32"></u-icon>
<text class="grid-title">{{ item.title }}</text>
</u-grid-item>
@ -45,12 +51,9 @@
<u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
<u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
<u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
<u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="loginOrJump('/pages/address/list')" isLink></u-cell>
<u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell>
</u-cell-group>
<view v-if="hasLogin" class="logout-btn">
<u-button type="error" color="#ea322b" text="退出登录" @click="logout"></u-button>
</view>
</view>
</template>
@ -58,11 +61,12 @@
export default {
data() {
return {
orderPage: '/pages/order/order',
orderStatusList: [
{ icon: 'rmb-circle', title: '待支付' },
{ icon: 'car', title: '代发货' },
{ icon: 'order', title: '待收货' },
{ icon: 'integral', title: '已完成' }
{ icon: 'red-packet', title: '待付款', state: '0' },
{ icon: 'car', title: '待发货', state:'20' },
{ icon: 'order', title: '待收货', state: '30' },
{ icon: 'integral', title: '已完成', state: '40' }
],
statList: [
{ value: '0', title: '我的收藏' },
@ -77,9 +81,13 @@ export default {
}
},
methods: {
loginOrJump(pageUrl) {
pageRouter(pageUrl, param) {
if (!this.hasLogin) {
uni.$u.route('/pages/login/social')
} else if (pageUrl === this.orderPage) {
uni.$u.route(this.orderPage, {
status: param
});
} else {
uni.$u.route(pageUrl)
}
@ -110,16 +118,37 @@ export default {
</script>
<style lang="scss" scoped>
.user-header {
@include flex-center(column);
height: 280rpx;
background-color: #fff;
@include flex-space-between;
padding: 30rpx;
height: 200rpx;
.user-info {
@include flex-center(column);
.nick-name {
margin-top: 20rpx;
font-size: 32rpx;
@include flex-left;
align-items: center;
.info-text {
margin-left: 20rpx;
.user-nickname {
font-size: 30rpx;
font-weight: 700;
line-height: 50rpx;
}
.user-mobile {
font-size: 24rpx;
font-weight: 700;
color: #939393;
line-height: 50rpx;
}
}
}
.user-setting {
margin-right: 5rpx;
}
}
@ -168,8 +197,4 @@ export default {
}
}
.logout-btn {
margin: 60rpx auto 0;
width: 400rpx;
}
</style>

4
yudao-ui-app/store/index.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue'
import Vuex from 'vuex'
import user from './mudules/user'
import cart from './mudules/cart'
import getters from './getters'
Vue.use(Vuex) // vue的插件机制
@ -8,7 +9,8 @@ Vue.use(Vuex) // vue的插件机制
// Vuex.Store 构造器选项
const store = new Vuex.Store({
modules: {
user
user,
cart
},
getters
})

28
yudao-ui-app/store/mudules/cart.js Normal file
View File

@ -0,0 +1,28 @@
import { getCartDetail } from '@/api/cart'
const cart = {
state: {
cartCount: 0
},
mutations: {
//记录购物车商品数量
SET_CART_COUNT(state, data) {
const arr = data.length || []
state.cartNumber = arr.length
}
},
actions: {
//获取购物车数据
CartProductDetail({ state, commit }) {
return getCartDetail()
.then(res => {
commit('SET_CART_COUNT', res.data)
return Promise.resolve(res)
})
.catch(err => {
return Promise.reject(err)
})
}
}
}
export default cart