UniApp实现购物与订单管理的实现

在UniApp中，我们可以通过使用uni-list和uni-list-item组件来实现商品列表。我们可以在页面的template部分添加以下代码：

<template>

  <view>

    <uni-list>

      <uni-list-item v-for="item in productList" :key="item.id">

        <view slot="title">{{ item.name }}</view>

        <view slot="note">{{ item.price }}</view>

      </uni-list-item>

    </uni-list>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      productList: [

        { id: 1, name: '商品1', price: 10 },

        { id: 2, name: '商品2', price: 20 },

        { id: 3, name: '商品3', price: 30 },

      ],

    };

  },

};

</script>

添加到购物车
在商品列表中，我们可以通过使用uni-button来添加商品到购物车。我们可以在页面的template部分添加以下代码：

<template>

  <view>

    <uni-list>

      <uni-list-item v-for="item in productList" :key="item.id">

        <view slot="title">{{ item.name }}</view>

        <view slot="note">{{ item.price }}</view>

        <view slot="action">

          <uni-button @click="addToCart(item)">添加到购物车</uni-button>

        </view>

      </uni-list-item>

    </uni-list>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      productList: [

        { id: 1, name: '商品1', price: 10 },

        { id: 2, name: '商品2', price: 20 },

        { id: 3, name: '商品3', price: 30 },

      ],

      cartList: [],

    };

  },

  methods: {

    addToCart(item) {

      this.cartList.push(item);

    },

  },

};

</script>

购物车页面
我们可以创建一个新的页面来展示购物车中的商品。在UniApp中，我们可以通过使用uni-list和uni-list-item组件来展示购物车列表。我们可以在页面的template部分添加以下代码：

<template>

  <view>

    <uni-list>

      <uni-list-item v-for="item in cartList" :key="item.id">

        <view slot="title">{{ item.name }}</view>

        <view slot="note">{{ item.price }}</view>

      </uni-list-item>

    </uni-list>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      cartList: [],

    };

  },

};

</script>

订单管理功能实现

创建订单
在购物车页面中，我们可以通过使用uni-button来创建订单。我们可以在页面的template部分添加以下代码：

<template>

  <view>

    <uni-list>

      <uni-list-item v-for="item in cartList" :key="item.id">

        <view slot="title">{{ item.name }}</view>

        <view slot="note">{{ item.price }}</view>

        <view slot="action">

          <uni-button @click="createOrder(item)">创建订单</uni-button>

        </view>

      </uni-list-item>

    </uni-list>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      cartList: [],

      orderList: [],

    };

  },

  methods: {

    createOrder(item) {

      this.orderList.push(item);

      const index = this.cartList.indexOf(item);

      this.cartList.splice(index, 1);

    },

  },

};

</script>

订单列表
在UniApp中，我们可以通过使用uni-list和uni-list-item组件来展示订单列表。我们可以创建一个新的页面来展示订单。在页面的template部分添加以下代码：

<template>

  <view>

    <uni-list>

      <uni-list-item v-for="item in orderList" :key="item.id">

        <view slot="title">{{ item.name }}</view>

        <view slot="note">{{ item.price }}</view>

      </uni-list-item>

    </uni-list>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      orderList: [],

    };

  },

};

</script>