更新记录

1.0.61（2024-06-14）

• 个人中心补充

1.0.6（2024-06-14）

• 个人中心

1.0.5（2024-06-07）

• 提交支付

平台兼容性

wts-SimpleMall

一款简易的商城前端组建，包含了首页、商品分类页、商品搜索、商品详情、购物车、商品下单、支付、地址、订单等功能

简单易懂，易于修改

可根据自己的数据结构进行调整

首页使用方法

<template>
    <view class="content">
        <!-- bannerList：轮播图数据 -->
        <!-- menuList：金刚区数据 -->
        <!-- goodsList：商品列表数据 -->
        <!-- goodsDetail：前往商品详情 -->
        <wts-storeIndex :bannerList="bannerList" :menuList="menuList" :goodsList="goodsList"
            @goodsDetail="goodsAction"></wts-storeIndex>
    </view>
</template>

商品详情(目前是单规格)

<template>
    <view>
        <!-- goodsInfo：商品详情数据 -->
        <!-- buyAction：购买按钮 -->
        <!-- addCarAction：添加到购物车 -->
        <!-- gocarAction：前往购物车 -->
        <!-- collectionAction：收藏按钮 -->
        <wts-goodsDetail :goodsInfo="goodsInfo" @buyAction="buyAction" @addCarAction="addCarAction"
            @gocarAction="gocarAction" @collectionAction="collectionAction"></wts-goodsDetail>
    </view>
</template>

购物车

<template>
    <view>
        <!-- goodsList：数据源 -->
        <!-- buyAction：底部购买按钮 -->
        <wts-storeCar :goodsList="dataList" @buyAction="buyAction"></wts-storeCar>
    </view>
</template>

地址列表

<template>
    <view>
        <!-- dataList:数据源 -->
        <!-- deletAddress：删除地址 -->
        <!-- editAddress：编辑地址 -->
        <!-- addAddress：新增地址 -->
        <wts-addressList :dataList="dataList" @deletAddress="deletAddress" @editAddress="editAddress"
            @addAddress="addAddress"></wts-addressList>
    </view>
</template>

添加编辑地址

<template>
    <view>
    <!-- addressInfo：地址信息 -->
    <!--    addressInfo: {
        id: '',
        name: '',
        mobile: '',
        provice: '',
        provice_id: '',
        city: '',
        city_id: '',
        distract: '',
        distract_id: '',
        address: '',
        default: false
    } -->
    <!-- selectDistrict:选择地区，使用三方选择器，或者直接修改成手动输入 -->
    <!-- saveAction：保存地址 -->
    <wts-addressAdd :addressInfo="addressInfo"></wts-addressAdd>
</view>
</template>

确认订单

<template>
    <view>
        <!-- addressInfo：地址信息数据 -->
        <!-- orderInfo：确认订单数据 -->
        <!-- selectAddress：选择地址 -->
        <!-- submitOrder：提交订单 -->
        <wts-confirmOrder :addressInfo="addressInfo" :orderInfo="orderInfo" @selectAddress="selectAddress"
            @submitOrder="submitOrder"></wts-confirmOrder>
    </view>
</template>

提交支付

<template>
    <view>
        <!-- payInfo：支付信息 -->
        <!-- submitPay：提交支付 携带有支付方式选择下标 -->
    <!-- 数据结构，可自行修改
        payInfo: {
            pay_price: '123.00',
            order_id: '1',
            payList: [{
                    name: '微信支付',
                    type: 'WeChatPay'
                },
                {
                    name: '支付宝支付',
                    type: 'Alipay'
                },
                {
                    name: '余额支付',
                    type: 'balance'
                }
            ]
        } -->
        <wts-orderPay :payInfo="payInfo" @submitPay="submitPay"></wts-orderPay>
    </view>
</template>

个人中心

<template>
    <view>
        <!-- navBarHeght：适配刘海屏（通过uni.getSystemInfo获取），有导航栏可忽略 -->
        <!-- orderMenu：订单菜单，格式为：orderMenu:[{name:'',image:'',type:''，badge:''}] -->
        <!-- @menuAction：订单 -->
        <wts-personal :navBarHeght="navBarHeght" :orderMenu="orderMenu"></wts-personal>
    </view>
</template>