Uniapp 销售界面
Uniapp 销售界面设计要点
布局与功能模块 销售界面通常包含商品展示区、购物车、订单结算和促销信息模块。商品展示区采用网格或列表布局，支持分类筛选和搜索功能。购物车图标固定在底部导航栏，实时显示商品数量。
交互设计 商品卡片需包含图片、名称、价格和立即购买按钮。点击商品跳转至详情页，详情页需有规格选择、数量增减和加入购物车功能。结算流程简化，支持多种支付方式选择。
数据绑定与状态管理
使用 Vuex 管理全局状态，如购物车数据和用户信息。商品数据通过 API 从后端获取，利用 uni.request 实现异步加载。购物车操作（增删改）需实时同步到本地存储。
样式与主题
采用符合品牌形象的配色方案，使用 uni.scss 定义全局样式变量。确保按钮和关键操作区域醒目，适配不同屏幕尺寸。通过 CSS 动画增强交互反馈，如加入购物车时的抛物线动画。
核心代码示例
商品列表数据绑定
<template>
<view class="goods-list">
<view v-for="item in goods" :key="item.id" @click="navToDetail(item.id)">
<image :src="item.image" mode="aspectFill"></image>
<text>{{item.name}}</text>
<text class="price">¥{{item.price}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goods: []
}
},
onLoad() {
this.loadGoods()
},
methods: {
async loadGoods() {
const res = await uni.request({
url: '/api/goods/list'
})
this.goods = res.data
},
navToDetail(id) {
uni.navigateTo({
url: `/pages/detail?id=${id}`
})
}
}
}
</script>购物车功能实现
// store.js
export default new Vuex.Store({
state: {
cart: uni.getStorageSync('cart') || []
},
mutations: {
addToCart(state, goods) {
const index = state.cart.findIndex(item => item.id === goods.id)
if (index >= 0) {
state.cart[index].count += goods.count
} else {
state.cart.push(goods)
}
uni.setStorageSync('cart', state.cart)
}
}
})
// 组件调用
methods: {
addCart() {
this.$store.commit('addToCart', {
id: this.goods.id,
count: this.count,
...this.selectedSpec
})
uni.showToast({
title: '已加入购物车'
})
}
}性能优化建议
列表页实现分页加载，避免一次性渲染大量数据。使用 uni.previewImage 实现商品图片预览功能。对频繁操作如数量增减做防抖处理。采用条件编译区分各平台特性，如微信小程序的开放能力。
支付流程集成
调用 uni.requestPayment 实现支付功能，需提前获取订单号和支付参数。支付结果通过回调处理，成功时跳转至订单完成页，失败时显示错误提示。建议添加支付倒计时限制，防止长时间未支付占用库存。
