【愚公系列】2022年12月 uniapp专题-优购电商-商品购物车页面
【摘要】 前言网上购物车是顾客在进行网上购物时所必须使用的购物工具。它用来临时存储用户选择的商品,协助顾客从虚拟商场中选取商品、携带商品,并到虚拟的收银台结账。 1. 购物车作用电商系统中很多产品功能都是从线下已存在的产品演化到线上的,购物车也是这样。在线下商超,我们经常会使用购物车,这个时候它承担的作用有:方便运输多件商品、方便选购大件商品、方便商品统一结算。搬到线上之后,购物车被赋予了更多能力:...
前言
网上购物车是顾客在进行网上购物时所必须使用的购物工具。它用来临时存储用户选择的商品,协助顾客从虚拟商场中选取商品、携带商品,并到虚拟的收银台结账。
1. 购物车作用
电商系统中很多产品功能都是从线下已存在的产品演化到线上的,购物车也是这样。在线下商超,我们经常会使用购物车,这个时候它承担的作用有:方便运输多件商品、方便选购大件商品、方便商品统一结算。搬到线上之后,购物车被赋予了更多能力:对于用户而言,它可以保存喜欢的商品、组合计算商品价格、商品比价、促销归类、降价提醒。对平台和商家而言,可以收集购物车数据、进行购物车营销、提高客单价。
一、商品购物车页面
<template>
<view class="cart-container" v-if="cart.length !== 0">
<!-- 收货地址组件 -->
<my-address></my-address>
<!-- 商品列表的标题区域 -->
<view class="cart-title">
<!-- 左侧的图标 -->
<uni-icons type="shop" size="18"></uni-icons>
<!-- 右侧的文本 -->
<text class="cart-title-text">购物车</text>
</view>
<!-- 循环渲染购物车中的商品信息 -->
<uni-swipe-action>
<block v-for="(goods, i) in cart" :key="i">
<uni-swipe-action-item :options="options" @click="swipeItemClickHandler(goods)">
<my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<!-- 使用自定义的结算组件 -->
<my-settle></my-settle>
</view>
<!-- 空白购物车的区域 -->
<view class="empty-cart" v-else>
<image src="/static/cart_empty@2x.png" class="empty-img"></image>
<text class="tip-text">空空如也~</text>
</view>
</template>
<script>
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'
export default {
mixins: [badgeMix],
computed: {
...mapState('m_cart', ['cart'])
},
data() {
return {
options: [{
text: '删除',
style: {
backgroundColor: '#C00000'
}
}]
};
},
methods: {
...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
radioChangeHandler(e) {
this.updateGoodsState(e)
},
numberChangeHandler(e) {
this.updateGoodsCount(e)
},
swipeItemClickHandler(goods) {
this.removeGoodsById(goods.goods_id)
}
}
}
</script>
<style lang="scss">
.cart-container {
padding-bottom: 50px;
}
.cart-title {
height: 40px;
display: flex;
align-items: center;
padding-left: 5px;
border-bottom: 1px solid #EFEFEF;
.cart-title-text {
font-size: 14px;
margin-left: 10px;
}
}
.empty-cart {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 150px;
.empty-img {
width: 90px;
height: 90px;
}
.tip-text {
font-size: 12px;
color: gray;
margin-top: 15px;
}
}
</style>
my-address组件
<template>
<view>
<!-- 选择收货地址的盒子 -->
<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
</view>
<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else @click="chooseAddress">
<view class="row1">
<view class="row1-left">
<view class="username">收货人:{{address.userName}}</view>
</view>
<view class="row1-right">
<view class="phone">电话:{{address.telNumber}}</view>
<uni-icons type="arrowright" size="16"></uni-icons>
</view>
</view>
<view class="row2">
<view class="row2-left">收货地址:</view>
<view class="row2-right">{{addstr}}</view>
</view>
</view>
<!-- 底部的边框线 -->
<image src="/static/cart_border@2x.png" class="address-border"></image>
</view>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
data() {
return {
// address: {}
};
},
methods: {
...mapMutations('m_user', ['updateAddress']),
async chooseAddress() {
const [err, succ] = await uni.chooseAddress().catch(err => err)
if (err === null && succ.errMsg === 'chooseAddress:ok') {
// this.address = succ
this.updateAddress(succ)
}
if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) {
// 通过调用这个方法,让用户重新授权
this.reAuth()
}
},
// 让用户重新授权
async reAuth() {
const [err2, confirmResult] = await uni.showModal({
content: '检测到您没打开地址权限,是否去设置打开?',
confirmText: '确认',
cancelText: '取消'
})
if (err2) return
console.log(confirmResult)
if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权!')
if (confirmResult.confirm) return uni.openSetting({
success: (settingResult) => {
if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了授权!')
if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功!请选择地址')
}
})
}
},
computed: {
...mapState('m_user', ['address']),
...mapGetters('m_user', ['addstr'])
}
}
</script>
<style lang="scss">
.address-border {
display: block;
width: 100%;
height: 5px;
}
.address-choose-box {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.address-info-box {
font-size: 12px;
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5px;
.row1 {
display: flex;
justify-content: space-between;
.row1-right {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.row2 {
display: flex;
align-items: center;
margin-top: 10px;
.row2-left {
white-space: nowrap;
}
}
}
</style>
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)