<script setup>
import sHeader from "@/components/SimpleHeader";
import { ref } from 'vue'

const certificate = ref('SsfOS75GxUGjGk') // 买家用户名
const price = ref(80.02) // 价格
const tradeNumber = ref(2000) // 股票数量
const totalPrice = ref(0)
totalPrice.value = price.value * tradeNumber.value;

</script>

<template>
    <div class="sellConf">
        <s-header :name="'确认收款'" :noback="false"></s-header>

        <!-- 卖家操作 -->
        <van-form @submit="onSubmit">
            <br>
            <!-- 买家应付款 -->
            <van-cell-group inset>
                <van-field v-model="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
                    left-icon="coupon" />
                <van-field v-model="tradeNumber" readonly name="卖出数量" label="卖出数量" placeholder="卖出数量"
                    left-icon="goods-collect" :rules="[{ required: true, message: '买出数量不能为空' }]" />
                <van-field v-model="price" readonly name="卖出单价" label="卖出单价" placeholder="卖出单价" left-icon="gold-coin" />
                <van-field v-model="totalPrice" readonly name="应收款￥" label="应收款￥" placeholder="应收款￥" left-icon="bill" />
            </van-cell-group>

            <br>
            <van-cell-group inset>
                <!-- 买家的付款截图 -->
                <van-field name="uploader" label="买家的付款截图">
                    <template #input>
                        <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    确认收款
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<style scoped>
.sellConf {
    background-color: #e3e3e3;
}
</style>