当前位置：首页 > news >正文

JAVA自营商城小程序APP商城源码单商户源码的uniapp代码片段

news 2026/5/7 5:05:21

以下为JAVA自营商城小程序/APP单商户源码的Uniapp核心功能代码片段，包含商品展示、购物车管理、订单支付等模块：

1. 商品列表页（pages/product/list.vue）

vue <template> <view class="container"> <!-- 搜索栏 --> <uni-search-bar v-model="keyword" placeholder="搜索商品" @confirm="searchProducts" ></uni-search-bar> <!-- 分类筛选 --> <scroll-view class="category-tabs" scroll-x> <view v-for="(cat, idx) in categories" :key="cat.id" :class="['tab-item', currentCat==cat.id ? 'active' : '']" @click="selectCategory(cat.id)" > {{cat.name}} </view> </scroll-view> <!-- 商品列表 --> <view class="product-list"> <view v-for="product in products" :key="product.id" class="product-card" @click="toDetail(product)" > <image :src="product.cover" class="product-img"></image> <view class="product-info"> <text class="title">{{product.name}}</text> <view class="price-row"> <text class="price">¥{{product.price}}</text> <text class="sold">已售{{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}` }); } } } </script>

2. 商品详情页（pages/product/detail.vue）

vue <template> <view class="detail-container"> <!-- 商品轮播图 --> <swiper class="product-swiper" circular> <swiper-item v-for="img in product.images" :key="img"> <image :src="img" mode="aspectFill"></image> </swiper-item> </swiper> <!-- 商品信息 --> <view class="info-section"> <text class="title">{{product.name}}</text> <view class="price-row"> <text class="price">¥{{product.price}}</text> <text class="stock">库存{{product.stock}}件</text> </view> <view class="desc">{{product.description}}</view> </view> <!-- 加入购物车 --> <view class="action-bar"> <button class="cart-btn" @click="addToCart">加入购物车</button> <button class="buy-btn" @click="buyNow">立即购买</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)}` }); } } } </script>

3. 购物车页面（pages/cart/index.vue）

vue <template> <view class="cart-container"> <!-- 商品列表 --> <view class="cart-items"> <view v-for="(item, index) in cart" :key="index" class="cart-item" > <checkbox :value="item.selected" @click="toggleSelect(index)" ></checkbox> <image :src="item.cover" class="item-img"></image> <view class="item-info"> <text class="name">{{item.name}}</text> <view class="price-row"> <text class="price">¥{{item.price}}</text> <view class="quantity-control"> <button @click="changeQuantity(index, -1)">-</button> <text>{{item.quantity}}</text> <button @click="changeQuantity(index, 1)">+</button> </view> </view> </view> </view> </view> <!-- 底部结算栏 --> <view class="checkout-bar"> <text>总计: ¥{{totalPrice}}</text> <button class="checkout-btn" :disabled="totalQuantity === 0" @click="toCheckout" > 结算({{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)}` }); } } } </script>

4. 订单确认页（pages/order/confirm.vue）

vue <template> <view class="order-container"> <!-- 商品清单 --> <view class="order-items"> <view v-for="item in items" :key="item.id" class="order-item" > <text>{{item.name}} x {{item.quantity}}</text> <text>¥{{(item.price * item.quantity).toFixed(2)}}</text> </view> </view> <!-- 金额总计 --> <view class="amount-section"> <view class="amount-row"> <text>商品金额</text> <text>¥{{totalAmount}}</text> </view> <view class="amount-row"> <text>运费</text> <text>¥0.00</text> </view> <view class="amount-row total"> <text>总计</text> <text>¥{{totalAmount}}</text> </view> </view> <!-- 支付方式 --> <view class="payment-section"> <text>支付方式</text> <radio-group v-model="paymentMethod"> <label class="payment-option"> <radio value="wxpay" />微信支付 </label> <label class="payment-option"> <radio value="alipay" />支付宝 </label> </radio-group> </view> <!-- 提交订单 --> <button class="submit-btn" @click="submitOrder">提交订单</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' }); } }); } } } } </script>

5. Java后端订单创建示例

java @RestController @RequestMapping("/api/order") public class OrderController { @PostMapping("/create") public ResponseEntity<OrderResponse> 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"); // 保存订单项 List<OrderItem> 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); // 生成微信支付参数 Map<String, String> payParams = wechatPayService.generatePayParams(order); return ResponseEntity.ok(new OrderResponse(orderId, payParams)); } }