以下为JAVA自营商城小程序/APP单商户源码的Uniapp核心功能代码片段包含商品展示、购物车管理、订单支付等模块1. 商品列表页pages/product/list.vuevue template view classcontainer !-- 搜索栏 -- uni-search-bar v-modelkeyword placeholder搜索商品 confirmsearchProducts /uni-search-bar !-- 分类筛选 -- scroll-view classcategory-tabs scroll-x view v-for(cat, idx) in categories :keycat.id :class[tab-item, currentCatcat.id ? active : ] clickselectCategory(cat.id) {{cat.name}} /view /scroll-view !-- 商品列表 -- view classproduct-list view v-forproduct in products :keyproduct.id classproduct-card clicktoDetail(product) image :srcproduct.cover classproduct-img/image view classproduct-info text classtitle{{product.name}}/text view classprice-row text classprice¥{{product.price}}/text text classsold已售{{product.soldCount}}件/text /view /view /view /view /view /template script export default { data() { return { keyword: , currentCat: 0, categories: [ { id: 0, name: 全部 }, { id: 1, name: 数码 }, { id: 2, name: 家居 } ], products: [] } }, onLoad() { this.loadProducts(); }, methods: { async loadProducts() { const res await uni.request({ url: http://java-backend/api/products, method: GET, data: { category: this.currentCat } }); this.products res.data; }, selectCategory(catId) { this.currentCat catId; this.loadProducts(); }, toDetail(product) { uni.navigateTo({ url: /pages/product/detail?id${product.id} }); } } } /script2. 商品详情页pages/product/detail.vuevue template view classdetail-container !-- 商品轮播图 -- swiper classproduct-swiper circular swiper-item v-forimg in product.images :keyimg image :srcimg modeaspectFill/image /swiper-item /swiper !-- 商品信息 -- view classinfo-section text classtitle{{product.name}}/text view classprice-row text classprice¥{{product.price}}/text text classstock库存{{product.stock}}件/text /view view classdesc{{product.description}}/view /view !-- 加入购物车 -- view classaction-bar button classcart-btn clickaddToCart加入购物车/button button classbuy-btn clickbuyNow立即购买/button /view /view /template script export default { data() { return { product: {} } }, onLoad(e) { this.loadProductDetail(e.id); }, methods: { async loadProductDetail(id) { const res await uni.request({ url: http://java-backend/api/product/${id} }); this.product res.data; }, addToCart() { const cartItem { id: this.product.id, name: this.product.name, price: this.product.price, quantity: 1, selected: true }; // 读取购物车数据 let cart uni.getStorageSync(cart) || []; const index cart.findIndex(item item.id cartItem.id); if(index -1) { cart[index].quantity 1; } else { cart.push(cartItem); } uni.setStorageSync(cart, cart); uni.showToast({ title: 已加入购物车 }); }, buyNow() { const cart [{ id: this.product.id, quantity: 1 }]; uni.navigateTo({ url: /pages/order/confirm?items${JSON.stringify(cart)} }); } } } /script3. 购物车页面pages/cart/index.vuevue template view classcart-container !-- 商品列表 -- view classcart-items view v-for(item, index) in cart :keyindex classcart-item checkbox :valueitem.selected clicktoggleSelect(index) /checkbox image :srcitem.cover classitem-img/image view classitem-info text classname{{item.name}}/text view classprice-row text classprice¥{{item.price}}/text view classquantity-control button clickchangeQuantity(index, -1)-/button text{{item.quantity}}/text button clickchangeQuantity(index, 1)/button /view /view /view /view /view !-- 底部结算栏 -- view classcheckout-bar text总计: ¥{{totalPrice}}/text button classcheckout-btn :disabledtotalQuantity 0 clicktoCheckout 结算({{totalQuantity}}) /button /view /view /template script export default { data() { return { cart: [] } }, computed: { totalPrice() { return this.cart.reduce((sum, item) { return item.selected ? sum item.price * item.quantity : sum; }, 0).toFixed(2); }, totalQuantity() { return this.cart.reduce((sum, item) { return item.selected ? sum item.quantity : sum; }, 0); } }, onShow() { this.loadCart(); }, methods: { loadCart() { this.cart uni.getStorageSync(cart) || []; }, toggleSelect(index) { this.cart[index].selected !this.cart[index].selected; uni.setStorageSync(cart, this.cart); }, changeQuantity(index, delta) { this.cart[index].quantity delta; if(this.cart[index].quantity 0) { this.cart.splice(index, 1); } uni.setStorageSync(cart, this.cart); }, toCheckout() { const items this.cart.filter(item item.selected); uni.navigateTo({ url: /pages/order/confirm?items${JSON.stringify(items)} }); } } } /script4. 订单确认页pages/order/confirm.vuevue template view classorder-container !-- 商品清单 -- view classorder-items view v-foritem in items :keyitem.id classorder-item text{{item.name}} x {{item.quantity}}/text text¥{{(item.price * item.quantity).toFixed(2)}}/text /view /view !-- 金额总计 -- view classamount-section view classamount-row text商品金额/text text¥{{totalAmount}}/text /view view classamount-row text运费/text text¥0.00/text /view view classamount-row total text总计/text text¥{{totalAmount}}/text /view /view !-- 支付方式 -- view classpayment-section text支付方式/text radio-group v-modelpaymentMethod label classpayment-option radio valuewxpay /微信支付 /label label classpayment-option radio valuealipay /支付宝 /label /radio-group /view !-- 提交订单 -- button classsubmit-btn clicksubmitOrder提交订单/button /view /template script export default { data() { return { items: [], paymentMethod: wxpay } }, computed: { totalAmount() { return this.items.reduce((sum, item) { return sum item.price * item.quantity; }, 0).toFixed(2); } }, onLoad(e) { this.items JSON.parse(decodeURIComponent(e.items)); }, methods: { async submitOrder() { // 创建订单 const res await uni.request({ url: http://java-backend/api/order/create, method: POST, data: { items: this.items, totalAmount: this.totalAmount, paymentMethod: this.paymentMethod } }); // 微信支付 if(this.paymentMethod wxpay) { uni.requestPayment({ provider: wxpay, orderInfo: res.data.payParams, success: () { uni.showToast({ title: 支付成功 }); uni.redirectTo({ url: /pages/order/success }); } }); } } } } /script5. Java后端订单创建示例java RestController RequestMapping(/api/order) public class OrderController { PostMapping(/create) public ResponseEntityOrderResponse createOrder(RequestBody CreateOrderRequest request) { // 生成订单号 String orderId ORD System.currentTimeMillis(); // 保存订单到数据库 Order order new Order(); order.setOrderId(orderId); order.setTotalAmount(request.getTotalAmount()); order.setPaymentMethod(request.getPaymentMethod()); order.setStatus(PENDING); // 保存订单项 ListOrderItem items request.getItems().stream() .map(item - { OrderItem orderItem new OrderItem(); orderItem.setProductId(item.getId()); orderItem.setQuantity(item.getQuantity()); orderItem.setPrice(item.getPrice()); return orderItem; }).collect(Collectors.toList()); orderRepository.save(order); orderItemRepository.saveAll(items); // 生成微信支付参数 MapString, String payParams wechatPayService.generatePayParams(order); return ResponseEntity.ok(new OrderResponse(orderId, payParams)); } }功能特点说明商品管理支持多级分类、库存管理、图片轮播展示购物车系统本地存储实现、商品选择/数量修改、价格实时计算订单流程商品确认→金额计算→支付方式选择→支付集成支付集成微信支付/支付宝双通道、支付状态回调处理数据同步购物车本地存储与后端订单数据一致性保障交互优化加载状态提示、操作反馈、支付结果跳转该代码示例实现了自营商城的核心购物流程实际项目需补充商品SKU管理、物流跟踪、售后评价等模块并完善支付安全验证与异常处理机制。