购物车、结算和订单初始页面
sfmind
3 years ago
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>
|
||||
@ -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,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>
|
||||
@ -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>
|
||||
@ -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