mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-25 00:15:06 +08:00
购物车、结算和订单初始页面
This commit is contained in:
sfmind
106
yudao-ui-app/components/yd-address-select/yd-address-select.vue
Normal file
106
yudao-ui-app/components/yd-address-select/yd-address-select.vue
Normal 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>
|
||||
@ -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
116
yudao-ui-app/components/yd-cart-product/yd-cart-product.vue
Normal 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
100
yudao-ui-app/components/yd-order-product/yd-order-product.vue
Normal 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>
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 商品列表
|
||||
* 商品列表(加载更多)
|
||||
*/
|
||||
export default {
|
||||
name: 'yd-product-more',
|
||||
|
||||
Reference in New Issue
Block a user