用uniapp写一个简单的价格计算器

好的，我可以为您提供一个基于uniapp的简单价格计算器的示例代码。

首先，你需要在uniapp中创建一个新的页面，例如"priceCalculator"。在该页面的vue文件中，你可以使用以下代码：

<template>
  <view class="container">
    <view class="title">价格计算器</view>
    <view class="input-wrapper">
      <text>商品单价：</text>
      <input type="number" v-model="unitPrice" />
    </view>
    <view class="input-wrapper">
      <text>商品数量：</text>
      <input type="number" v-model="quantity" />
    </view>
    <view class="result">
      <text>总价：</text>
      <text class="price">{{ totalPrice }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      unitPrice: 0, // 商品单价
      quantity: 0, // 商品数量
    };
  },
  computed: {
    totalPrice() {
      return this.unitPrice * this.quantity;
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.result {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
}

.price {
  font-size: 20px;
  color: red;
}
</style>

在该代码中，我们创建了一个容器视图（container），包含了一个标题（title）、两个输入框（input-wrapper）和一个总价显示框（result）。我们使用v-model指令将输入框的值绑定到data中的变量，然后使用计算属性（computed）来计算总价。

最后，我们需要在manifest.json文件中注册该页面，例如：

"pages": [
  {
    "path": "pages/priceCalculator",
    "style": {
      "navigationBarTitleText": "价格计算器"
    }
  }
],

这样，我们就可以在uniapp中打开该页面，输入商品单价和数量，即可计算出总价。