<view class="all">
  <!-- 商品框 -->
  <view class="box"  >
    <view class="xinxi">
      <view class="juzhong">
        <image class="image" mode="scaleToFill" src="{{commoditiesImage}}" />
      </view>
      <view class="biaoti">
        <view style="margin-top:30rpx">
          <text class="text">{{commoditiesName}}</text>
        <view style="margin-top:5rpx">
          <text>￥{{commoditiesPrice}}</text> 
        </view>
        <view style="margin-top:5rpx">
          <text style="color:#898c90">共1件</text>
        </view>
        </view>
      </view>
    </view>
    <view class="xian"></view>
    <view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">商品总价</text>
        <text style="margin-right:50rpx">￥{{commoditiesPrice}}</text>
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">姓名</text>
        <input style="width:90px" placeholder="请输入姓名" onInput="name" />
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">联系方式</text>
        <input style="width:125px" placeholder="请输入联系方式" onInput="phone"/>
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">备注</text>
        <input style="width:90px" placeholder="备注"  onInput="note" />
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">蚂蚁积分</text>
        <text style="margin-right:30rpx;color:#a3abb2">暂不可用</text>
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">预约时间</text>
        <text style="margin-right:30rpx;">{{yuyuetime}}</text>
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:space-between;margin-top:20rpx">
        <text style="font-size:19px;margin-left:30rpx">指定美甲师</text>
        <text style="margin-right:30rpx;">{{meijiashiname}}</text>
      </view>
      <view class="xian" style="margin-top: 10rpx;"></view>
      <view style="display:flex;justify-content:right;margin-top:20rpx">
        <text style="font-size:19px;">小计</text>
        <text style="font-size:19px;color:red;margin-right:20rpx">￥{{commoditiesPrice}}</text>
      </view>
    </view>
  </view>
  <view class="zhifu" onTap="zhifu">
    <text style="color:white">立即预约</text>
  </view>
</view>