Uniapp + Vue3 + Vite +Uview + Pinia 实现提交订单以及付出功能（最新附源 ...

乌市泽哥  金牌会员 | 2024-9-18 22:35:47 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 677|帖子 677|积分 2031

1 效果展示


2 提交订单

2.1 cart.js

  1. // src/pages/store/cart/cart.js
  2. import {
  3.         defineStore
  4. } from 'pinia';
  5. import {
  6.         reactive,
  7.         computed
  8. } from 'vue';
  10. export const useCartStore = defineStore('cart', () => {
  11.         // 用 reactive 管理购物车数据
  12.         const state = reactive({
  13.                 cartItems: [], // 购物车商品列表
  14.                 allChose: false // 全选状态
  15.         });
  17.         // 设置购物车数据
  18.         const setCartItems = (items) => {
  19.                 state.cartItems = items.map(item => ({
  20.                         ...item,
  21.                         isChoose: false, // 初始化为未选中状态
  22.                         num: item.num || 1 // 初始化数量
  23.                 }));
  24.                 saveCartToLocalStorage(); // 每次设置后将数据持久化
  25.         };
  27.         // 计算已选中的商品数量
  28.         const selectedItemsCount = computed(() => {
  29.                 return state.cartItems.reduce((count, shop) => {
  30.                         return count + shop.items.filter(item => item.isChoose).reduce((shopCount, item) =>
  31.                                 shopCount + item.num, 0);
  32.                 }, 0);
  33.         });
  35.         // 计算已选中商品的总价格
  36.         const totalSelectedPrice = computed(() => {
  37.                 return state.cartItems.reduce((total, shop) => {
  38.                         return total + shop.items.filter(item => item.isChoose).reduce((shopTotal, item) =>
  39.                                 shopTotal + item.price * item.num, 0);
  40.                 }, 0);
  41.         });
  43.         // 切换商品的选中状态
  44.         const toggleItemChoose = (shopName, itemId) => {
  45.                 const shop = state.cartItems.find(shop => shop.shopName === shopName);
  46.                 console.log(shop);
  47.                 if (shop) {
  48.                         const cartItem = shop.items.find(cartItem => cartItem.id === itemId);
  49.                         if (cartItem) {
  50.                                 cartItem.isChoose = !cartItem.isChoose;
  51.                         }
  52.                         updateAllChoseStatus(); // 每次切换选中状态后更新全选状态
  53.                         saveCartToLocalStorage();
  54.                 }
  55.         };
  57.         // 修改商品数量
  58.         const changeItemQuantity = (shopName, itemId, quantity) => {
  59.                 const shop = state.cartItems.find(shop => shop.shopName === shopName);
  60.                 if (shop) {
  61.                         const cartItem = shop.items.find(cartItem => cartItem.id === itemId);
  62.                         if (cartItem) {
  63.                                 cartItem.num = quantity;
  64.                         }
  65.                         saveCartToLocalStorage();
  66.                 }
  67.         };
  69.         // 获取所有已选中的商品
  70.         const selectedItems = computed(() => {
  71.                 const groupedSelectedItems = [];
  72.                 state.cartItems.forEach(shop => {
  73.                         const selectedShopItems = shop.items.filter(item => item.isChoose);
  74.                         if (selectedShopItems.length > 0) {
  75.                                 // 查找是否已经存在相同店铺名的对象
  76.                                 const groupedShop = groupedSelectedItems.find(group => group.shopName === shop
  77.                                         .shopName);
  78.                                 if (groupedShop) {
  79.                                         // 如果存在，直接将选中的商品添加到该店铺的商品列表中
  80.                                         groupedShop.items.push(...selectedShopItems);
  81.                                         // 检查是否已经有 notes 字段，如果没有则添加
  82.                                         if (!groupedShop.hasOwnProperty('notes')) {
  83.                                                 groupedShop.notes = "";
  84.                                         }
  85.                                 } else {
  86.                                         // 如果不存在，创建一个新的店铺对象，并将选中的商品添加进去
  87.                                         groupedSelectedItems.push({
  88.                                                 shopName: shop.shopName,
  89.                                                 items: selectedShopItems,
  90.                                                 notes: ""
  91.                                         });
  92.                                 }
  93.                         }
  94.                 });
  95.                 return groupedSelectedItems;
  96.         });
  98.         // 切换全选状态
  99.         const toggleAllChose = () => {
  100.                 state.allChose = !state.allChose;
  101.                 state.cartItems.forEach(shop => {
  102.                         shop.items.forEach(item => {
  103.                                 item.isChoose = state.allChose;
  104.                         });
  105.                 });
  106.                 saveCartToLocalStorage();
  107.         };
  109.         // 更新全选状态
  110.         const updateAllChoseStatus = () => {
  111.                 // 遍历所有店铺的所有商品，如果有一个未选中，则全选状态为 false
  112.                 state.allChose = state.cartItems.every(shop =>
  113.                         shop.items.every(item => item.isChoose)
  114.                 );
  115.         };
  117.         // 将购物车数据保存到 localStorage
  118.         const saveCartToLocalStorage = () => {
  119.                 localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
  120.         };
  122.         // 从 localStorage 中恢复购物车数据
  123.         const loadCartFromLocalStorage = () => {
  124.                 const savedCart = localStorage.getItem('cartItems');
  125.                 if (savedCart) {
  126.                         state.cartItems = JSON.parse(savedCart);
  127.                 }
  128.         };
  130.         return {
  131.                 state,
  132.                 setCartItems, // 暴露 setCartItems 方法
  133.                 selectedItems,
  134.                 selectedItemsCount,
  135.                 totalSelectedPrice,
  136.                 toggleItemChoose,
  137.                 changeItemQuantity,
  138.                 toggleAllChose,
  139.                 loadCartFromLocalStorage
  140.         };
  141. });
复制代码
2.2 submit-order.vue

  1. <template>
  2.         <view class="">
  3.                 <AddressVue></AddressVue>
  4.                 <view class="card">
  5.                         <template v-for="(info, j) in selectedItems" :key="j">
  6.                                 <view class="cart-data card-shadow">
  7.                                         <view class="" style="display: flex;">
  8.                                                 {{info.shopName}}<up-icon name="arrow-right"></up-icon>
  9.                                         </view>
  10.                                         <template v-for="(item, index) in info.items" :key="index">
  11.                                                 <view class=""
  12.                                                         style="display: flex;padding: 20rpx 0;align-items: center;width: 100%;justify-content: space-around;">
  13.                                                         <view class="cart-image">
  14.                                                                 <up-image :src="item.image" mode="widthFix" height="200rpx" width="220rpx"
  15.                                                                         radius="10"></up-image>
  16.                                                         </view>
  17.                                                         <view>
  18.                                                                 <view class="cart-right">
  19.                                                                         <view style="margin-bottom: 10rpx;font-size: 30rpx;">{{item.title}}</view>
  20.                                                                         <view style="margin-bottom: 20rpx;font-size: 26rpx;color: #7d7e80;">{{item.type}}
  21.                                                                         </view>
  22.                                                                         <view class="" style="display: flex;align-items: center;">
  23.                                                                                 <up-text mode="price" :text="item.price"></up-text>
  24.                                                                                 <view class="" style="width: 10rpx;"></view>
  25.                                                                                 <up-number-box v-model="item.num"
  26.                                                                                         @change="val => changeItemQuantity(item,item.iid, val.value)"
  27.                                                                                         min="1"></up-number-box>
  28.                                                                         </view>
  29.                                                                 </view>
  30.                                                         </view>
  31.                                                 </view>
  32.                                         </template>
  33.                                         <view class="notes" @click="writeNoteFun(j)">
  34.                                                 <view style="flex: 1;">订单备注</view>
  35.                                                 <view style="display: flex;color: #7d7e80;width: 400rpx;justify-content: end;" >
  36.                                                         <up-text :text="info.notes.length==0?'无备注':info.notes" :lines="1"></up-text>
  37.                                                         <up-icon name="arrow-right"></up-icon>
  38.                                                 </view>
  39.                                         </view>
  40.                                         <!-- 弹出层输入备注 -->
  41.                                         <up-popup :show="show" mode="bottom" @close="close" zIndex="9999999" round="20rpx">
  42.                                                 <view class="" style="text-align: center;height: 60rpx;line-height: 60rpx;margin-top: 20rpx;">
  43.                                                         订单备注
  44.                                                 </view>
  45.                                                 <view  style="padding: 20rpx 40rpx;">
  46.                                                         <up-textarea v-model="selectedItems[noteIndex].notes"  placeholder="请输入内容" count focus
  47.                                                                 maxlength="200" height="240rpx"></up-textarea>
  48.                                                 </view>
  49.                                                 <view class="" style="display: flex;padding: 20rpx 40rpx;margin-top: 100rpx;">
  50.                                                         <up-button text="确定" type="warning" shape="circle" @click="enterNoteInputFun()"></up-button>
  51.                                                 </view>
  52.                                         </up-popup>
  53.                                 </view>
  54.                         </template>
  55.                 </view>
  56.                 <view class="" style="height: 150rpx;">
  58.                 </view>
  59.                 <view class="foot card">
  60.                         <view class="card-connect">
  61.                                 <view class="" style="display: flex; align-items: center;">
  62.                                         <view style="padding-left: 20rpx;font-size: 24rpx;">已选{{selectedItemsCount}}件,合计</view>
  63.                                         <view class="" style="display: flex;flex: 1;">
  64.                                                 <up-text mode="price" :text="totalSelectedPrice" color="red" size="18"></up-text>
  65.                                         </view>
  66.                                 </view>
  67.                                 <view class="" style="width: 20rpx;position: relative;">
  69.                                 </view>
  70.                                 <view class="" style="position: absolute;right: 40rpx;">
  71.                                         <view class="" style="display: flex;">
  72.                                                 <up-button type="error" text="去支付" shape="circle" style="width: 150rpx;"
  73.                                                         @click="toPayFun"></up-button>
  74.                                         </view>
  75.                                 </view>
  76.                                 <up-toast ref="uToastRef"></up-toast>
  77.                         </view>
  78.                 </view>
  79.         </view>
  80. </template>
  82. <script setup>
  83.         import {
  84.                 ref,
  85.                 onMounted
  86.         } from 'vue';
  87.         import AddressVue from '@/pages/components/User/Address.vue';
  88.         import {
  89.                 useCartStore
  90.         } from '@/pages/store/cart/cart.js'
  92.         import {
  93.                 storeToRefs
  94.         } from "pinia";
  95.         // 使用 Pinia store
  96.         const cartStore = useCartStore();
  97.         // 获取状态和操作
  98.         // 获取状态和操作
  99.         const {
  100.                 state,
  101.                 selectedItemsCount,
  102.                 totalSelectedPrice,
  103.                 selectedItems
  104.         } = storeToRefs(cartStore);
  105.         const {
  106.                 toggleItemChoose,
  107.                 changeItemQuantity,
  108.                 toggleAllChose
  109.         } = cartStore;
  110.         // 创建响应式数据  
  111.         const show = ref(false);
  112.         const noteIndex = ref(0);
  113.         const writeNoteFun = (index) => {
  114.                 // 记录备注数据的下标
  115.                 noteIndex.value = index;
  116.                 show.value = true;
  117.         }
  118.         const close = () => {
  119.                 // 关闭逻辑，设置 show 为 false  
  120.                 show.value = false;
  121.                 // console.log('close');  
  122.         }
  123.         const enterNoteInputFun = () => {
  124.                 show.value = false;
  125.         }
  126.         // 支付调起
  127.         const toPayFun = () => {
  128.                 uni.navigateTo({
  129.                         url: "/pages/src/home/order-pay/order-pay"
  130.                 })
  131.         }
  132.         onMounted(() => {
  134.         });
  135. </script>
  137. <style lang="scss" scoped>
  138.         .notes {
  139.                 padding-top: 20rpx;
  140.                 display: flex;
  141.                 width: 100%;
  142.                 justify-content: space-between;
  143.         }
  145.         .foot {
  146.                 position: fixed;
  147.                 bottom: 0;
  148.                 left: 0;
  149.                 width: 90%;
  150.                 /* 占据全宽 */
  151.                 height: 100rpx;
  152.                 /* Tabbar 高度 */
  153.                 background-color: #FFF;
  154.                 display: flex;
  155.                 align-items: center;
  157.                 .card-connect {
  158.                         display: flex;
  159.                         align-items: center;
  160.                         justify-content: space-between;
  161.                 }
  162.         }
  164.         .card {
  165.                 margin: 20rpx;
  166.                 padding: 20rpx;
  167.                 background-color: #FFF;
  168.                 border-radius: 20rpx;
  169.         }
  171.         .card-shadow {
  172.                 border-radius: 20rpx;
  173.                 box-shadow: 10rpx 10rpx 10rpx 10rpx rgba(0.2, 0.1, 0.2, 0.2);
  174.         }
  176.         .cart-data {
  177.                 margin-bottom: 40rpx;
  178.                 padding: 20rpx;
  179.                 display: flex;
  180.                 flex-wrap: wrap;
  181.                 align-items: center;
  183.                 .cart-image {
  184.                         // flex: 1;
  185.                 }
  187.                 .cart-right {
  188.                         display: flex;
  189.                         flex-direction: column;
  190.                         padding-left: 20rpx;
  191.                 }
  192.         }
  193. </style>
复制代码
3、付出页面

order-pay.vue

  1. <template>
  2.         <view>
  3.                 <view class="" style="display: flex;">
  4.                         <up-steps current="1" style="display: flex;">
  5.                                 <up-steps-item title="提交订单成功" :desc="nowDate"></up-steps-item>
  6.                                 <up-steps-item title="选择支付方式" desc=""></up-steps-item>
  7.                                 <up-steps-item title="卖家确认发货" desc="24小时内"></up-steps-item>
  8.                         </up-steps>
  9.                 </view>
  10.                 <view class="card">
  11.                         <view class="" style="text-align: center;padding-top: 40rpx;">
  12.                                 订单金额
  13.                         </view>
  14.                         <view class="" style="display: flex;justify-content: center;padding: 60rpx 0 20rpx 0;">
  15.                                 <up-text mode="price" :text="totalSelectedPrice" color="red" size="40"></up-text>
  16.                         </view>
  17.                         <view class="" style="text-align: center;padding-top: 20rpx;">
  18.                                 <text>订单提交成功，请在10分钟内完成支付</text>
  19.                         </view>
  20.                         <view class="" style="height: 100rpx;">
  22.                         </view>
  23.                         <up-divider text="请您选择付款方式"></up-divider>
  25.                         <view class="">
  26.                                 <radio-group @change="radioChange">
  27.                                         <view class="" style="width: 100%;">
  28.                                                 <view class=""
  29.                                                         style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
  30.                                                         <up-icon name="weixin-circle-fill" size="40" color="green"></up-icon>
  31.                                                         <text style="padding-left: 20rpx;flex: 1;">微信支付</text>
  32.                                                         <radio :checked="true" value="1"></radio>
  33.                                                 </view>
  34.                                                 <view class=""
  35.                                                         style="display: flex;align-items: center;width: 100%;justify-content: space-between;margin-top: 20rpx;">
  36.                                                         <up-icon name="zhifubao-circle-fill" size="40" color="blue"></up-icon>
  37.                                                         <text style="padding-left: 20rpx;flex: 1;">支付宝支付</text>
  38.                                                         <radio style="right: 0;" value="2"></radio>
  39.                                                 </view>
  40.                                         </view>
  41.                                 </radio-group>
  42.                         </view>
  43.                 </view>
  44.                 <view class="" style="display: flex;margin-top: 40rpx;padding: 0 20rpx;">
  45.                         <up-button type="error" text="确认支付" shape="circle" @click="toPayFun"></up-button>
  46.                 </view>
  47.         </view>
  48. </template>
  50. <script setup>
  51.         import {
  52.                 timeFormat
  53.         } from 'uview-plus';
  54.         import {
  55.                 reactive,
  56.                 ref
  57.         } from 'vue';
  58.         const nowDate = timeFormat(new Date().getTime(), 'hh:MM:ss');
  59.         import {
  60.                 useCartStore
  61.         } from '@/pages/store/cart/cart.js'
  63.         import {
  64.                 storeToRefs
  65.         } from "pinia";
  66.         // 使用 Pinia store
  67.         const cartStore = useCartStore();
  69.         // 获取状态和操作
  70.         const {
  71.                 totalSelectedPrice,
  72.                 selectedItems
  73.         } = storeToRefs(cartStore);
  75.         // up-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
  76.         const radiovalue = ref();
  77.         const radioChange = (e) => {
  78.                 radiovalue.value = e.detail.value;
  79.         };
  80.        
  81.         const toPayFun = () =>{
  82.                 // 调起支付
  83.         }
  84. </script>
  86. <style lang="less" scoped>
  87.         .card {
  88.                 margin: 20rpx;
  89.                 padding: 20rpx;
  90.                 background-color: #FFF;
  91.                 border-radius: 20rpx;
  92.         }
  93. </style>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

乌市泽哥

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表