购物车、结算和订单初始页面
parent
0b9ddddd18
commit
6878ac04c9
|
@ -0,0 +1,5 @@
|
||||||
|
const { http } = uni.$u
|
||||||
|
|
||||||
|
//获取购物车数据
|
||||||
|
export const getCartProductDetail = () => http.get('/trade/cart/get-detail')
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
const { http } = uni.$u
|
||||||
|
|
||||||
|
//获得订单交易分页
|
||||||
|
export const getOrderPageData = params => http.get('/trade/order/page', { params })
|
|
@ -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>
|
|
@ -11,7 +11,7 @@
|
||||||
* 广告滚动图
|
* 广告滚动图
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'mkt-banner',
|
name: 'yd-banner',
|
||||||
components: {},
|
components: {},
|
||||||
props: {
|
props: {
|
||||||
keyName: {
|
keyName: {
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* 商品列表
|
* 商品列表(加载更多)
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'yd-product-more',
|
name: 'yd-product-more',
|
||||||
|
|
|
@ -56,12 +56,30 @@
|
||||||
"navigationBarTitleText": "个人资料"
|
"navigationBarTitleText": "个人资料"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/setting/setting",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "账户设置"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/product/product",
|
"path": "pages/product/product",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "商品详情"
|
"navigationBarTitleText": "商品详情"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/checkout/checkout",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "填写订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/order/order",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/address/list",
|
"path": "pages/address/list",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
@ -1,15 +1,50 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="cart-empty">
|
<!-- 购物车为空 -->
|
||||||
<u-empty mode="car" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
|
<view v-if="!hasLogin || cartList.length === 0">
|
||||||
|
<view class="cart-empty">
|
||||||
|
<u-empty text="去逛逛添点什么吧" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
|
||||||
|
</view>
|
||||||
</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 v-if="!hasLogin" class="login-tips-box">
|
||||||
<view class="login-tips">
|
<view class="login-tips">
|
||||||
<navigator url="/pages/login/social" open-type="navigate" hover-class="none">
|
<navigator url="/pages/login/social" open-type="navigate" hover-class="none">
|
||||||
<text class="login-link">登录</text>
|
<view class="login-link">登录查看</view>
|
||||||
</navigator>
|
</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -19,34 +54,172 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: ''
|
title: '',
|
||||||
|
cartList: [],
|
||||||
|
checkedNumber: 0,
|
||||||
|
totalAmount: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {},
|
|
||||||
methods: {},
|
|
||||||
computed: {
|
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() {
|
hasLogin() {
|
||||||
return this.$store.getters.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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cart-empty {
|
|
||||||
padding-top: 100rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-tips-box {
|
.login-tips-box {
|
||||||
padding-top: 100rpx;
|
padding-top: 100rpx;
|
||||||
|
|
||||||
.login-tips {
|
.login-tips {
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
color: #939393;
|
color: #939393;
|
||||||
font-size: 28rpx;
|
font-size: 24rpx;
|
||||||
letter-spacing: 5rpx;
|
letter-spacing: 5rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-link {
|
.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>
|
</style>
|
||||||
|
|
|
@ -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>
|
|
@ -8,7 +8,7 @@
|
||||||
</u-sticky>
|
</u-sticky>
|
||||||
|
|
||||||
<!--轮播图-->
|
<!--轮播图-->
|
||||||
<mkt-banner :banner-list="bannerList"></mkt-banner>
|
<yd-banner :banner-list="bannerList"></yd-banner>
|
||||||
|
|
||||||
<u-gap height="20px"></u-gap>
|
<u-gap height="20px"></u-gap>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -4,14 +4,14 @@
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="label">头像:</view>
|
<view class="label">头像:</view>
|
||||||
<view class="info" @click="handleAvatarClick">
|
<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>
|
<u-icon class="btn" name="arrow-right"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="label">昵称:</view>
|
<view class="label">昵称:</view>
|
||||||
<view class="info">
|
<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>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
|
@ -41,8 +41,7 @@ export default {
|
||||||
mobile: ''
|
mobile: ''
|
||||||
},
|
},
|
||||||
avatarFiles: [],
|
avatarFiles: [],
|
||||||
tempName: '',
|
tempName: ''
|
||||||
borderStyle: 'none'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -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>
|
|
@ -1,9 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="user-header">
|
<view class="user-header">
|
||||||
<view class="user-info" @click="loginOrJump('/pages/profile/profile')">
|
<view class="user-info" @click="pageRouter('/pages/profile/profile')">
|
||||||
<u-avatar size="80" :src="userInfo.avatar"></u-avatar>
|
<u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar>
|
||||||
<text class="nick-name">{{ hasLogin ? userInfo.nickname || '游客' : '登录/注册' }}</text>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
@ -12,7 +18,7 @@
|
||||||
<view>
|
<view>
|
||||||
<view class="order-header">
|
<view class="order-header">
|
||||||
<text class="order-title">我的订单</text>
|
<text class="order-title">我的订单</text>
|
||||||
<view class="see-all">
|
<view class="see-all" @click="pageRouter(orderPage, -1)">
|
||||||
<text>查看全部</text>
|
<text>查看全部</text>
|
||||||
<u-icon name="arrow-right"></u-icon>
|
<u-icon name="arrow-right"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
|
@ -20,7 +26,7 @@
|
||||||
|
|
||||||
<view class="order-status-box">
|
<view class="order-status-box">
|
||||||
<u-grid :border="false" :col="orderStatusList.length">
|
<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>
|
<u-icon :name="item.icon" :size="32"></u-icon>
|
||||||
<text class="grid-title">{{ item.title }}</text>
|
<text class="grid-title">{{ item.title }}</text>
|
||||||
</u-grid-item>
|
</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="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="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="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>
|
</u-cell-group>
|
||||||
|
|
||||||
<view v-if="hasLogin" class="logout-btn">
|
|
||||||
<u-button type="error" color="#ea322b" text="退出登录" @click="logout"></u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -58,11 +61,12 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
orderPage: '/pages/order/order',
|
||||||
orderStatusList: [
|
orderStatusList: [
|
||||||
{ icon: 'rmb-circle', title: '待支付' },
|
{ icon: 'red-packet', title: '待付款', state: '0' },
|
||||||
{ icon: 'car', title: '代发货' },
|
{ icon: 'car', title: '待发货', state:'20' },
|
||||||
{ icon: 'order', title: '待收货' },
|
{ icon: 'order', title: '待收货', state: '30' },
|
||||||
{ icon: 'integral', title: '已完成' }
|
{ icon: 'integral', title: '已完成', state: '40' }
|
||||||
],
|
],
|
||||||
statList: [
|
statList: [
|
||||||
{ value: '0', title: '我的收藏' },
|
{ value: '0', title: '我的收藏' },
|
||||||
|
@ -77,9 +81,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loginOrJump(pageUrl) {
|
pageRouter(pageUrl, param) {
|
||||||
if (!this.hasLogin) {
|
if (!this.hasLogin) {
|
||||||
uni.$u.route('/pages/login/social')
|
uni.$u.route('/pages/login/social')
|
||||||
|
} else if (pageUrl === this.orderPage) {
|
||||||
|
uni.$u.route(this.orderPage, {
|
||||||
|
status: param
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.$u.route(pageUrl)
|
uni.$u.route(pageUrl)
|
||||||
}
|
}
|
||||||
|
@ -110,17 +118,38 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.user-header {
|
.user-header {
|
||||||
@include flex-center(column);
|
background-color: #fff;
|
||||||
height: 280rpx;
|
@include flex-space-between;
|
||||||
|
padding: 30rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
@include flex-center(column);
|
@include flex-left;
|
||||||
.nick-name {
|
align-items: center;
|
||||||
margin-top: 20rpx;
|
|
||||||
font-size: 32rpx;
|
.info-text {
|
||||||
font-weight: 700;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-header {
|
.order-header {
|
||||||
|
@ -168,8 +197,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
|
||||||
margin: 60rpx auto 0;
|
|
||||||
width: 400rpx;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
import user from './mudules/user'
|
import user from './mudules/user'
|
||||||
|
import cart from './mudules/cart'
|
||||||
import getters from './getters'
|
import getters from './getters'
|
||||||
|
|
||||||
Vue.use(Vuex) // vue的插件机制
|
Vue.use(Vuex) // vue的插件机制
|
||||||
|
@ -8,7 +9,8 @@ Vue.use(Vuex) // vue的插件机制
|
||||||
// Vuex.Store 构造器选项
|
// Vuex.Store 构造器选项
|
||||||
const store = new Vuex.Store({
|
const store = new Vuex.Store({
|
||||||
modules: {
|
modules: {
|
||||||
user
|
user,
|
||||||
|
cart
|
||||||
},
|
},
|
||||||
getters
|
getters
|
||||||
})
|
})
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue