.

src/components/AssetItem.vue

@@ -1,20 +1,22 @@
 <template>
-    <div class="asset" ref="el">
+    <div class="asset" ref="el" v-loading="loading">
         <img :src="info.pic[0].thumb || info.pic[0].url" class="cover" />
         <div class="name">{{ name }}</div>
         <div class="number">{{ number ? '#' : '' }}{{ number }}</div>
         <div style="flex-grow: 1"></div>
         <div class="opt">
-            <button v-if="info.consignment">下架</button>
-            <button v-else>上架</button>
+            <button v-if="info.consignment" @click="cancelPublic">下架</button>
+            <button v-else @click="consignment">上架</button>
             <span class="price">
-                <span v-if="info.price">¥{{ info.price }}</span>
+                <span v-if="info.consignment">¥{{ info.sellPrice }}</span>
             </span>
         </div>
     </div>
 </template>
 <script setup>
 import { ref, watchEffect } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { http } from '@/plugins/http'
 
 const props = defineProps({
     info: {
@@ -27,9 +29,9 @@ const props = defineProps({
     }
 })
 
-const info = props.info || {}
-const name = ref(info.name)
-const number = ref(info.number)
+const name = ref(props.info.name)
+const number = ref(props.info.number)
+const emit = defineEmits(['update:info'])
 watchEffect(() => {
     const m = /^(.*?)\s*(#\d+)$/.exec(name.value)
     if (m) {
@@ -37,6 +39,49 @@ watchEffect(() => {
         number.value = m[2].replace('#', '')
     }
 })
+const loading = ref(false)
+
+const consignment = async () => {
+    try {
+        loading.value = true
+        const { value: price } = await ElMessageBox.prompt('请填写寄售价格', '寄售上架', {
+            inputPattern: /(^\d{1,10}$)|(^\d{1,10}\.\d{1,2}$)/,
+            inputErrorMessage: '填写有误',
+            confirmButtonText: '确定',
+            cancelButtonText: '取消'
+        })
+        await http.post('/asset/consignment', {
+            id: props.info.id,
+            price: price,
+            tradeCode: sessionStorage.getItem('tradeCode')
+        })
+        const res = await http.get(`/asset/get/${props.info.id}`)
+        emit('update:info', res)
+        loading.value = false
+    } catch (e) {
+        loading.value = false
+        if (e !== 'cancel') {
+            ElMessage.showError(e)
+        }
+    }
+}
+
+const cancelPublic = async () => {
+    try {
+        loading.value = true
+        await http.post('/asset/cancelPublic', {
+            id: props.info.id
+        })
+        const res = await http.get(`/asset/get/${props.info.id}`)
+        emit('update:info', res)
+        loading.value = false
+    } catch (e) {
+        loading.value = false
+        if (e !== 'cancel') {
+            ElMessage.showError(e)
+        }
+    }
+}
 </script>
 <style lang="less" scoped>
 .asset {

src/views/HomeView.vue

@@ -48,9 +48,9 @@
             <el-row :gutter="20" style="margin: 10px">
                 <el-col :span="6" key="list" class="list-container">
                     <list-item
-                        :info="item"
                         v-for="item in list"
                         :key="item.id"
+                        :info="item"
                         @refresh="getData"
                         showBuyBtn
                     ></list-item>
@@ -61,9 +61,9 @@
                 <el-col :span="12" class="list-container" ref="assetListEl" style="padding: 0">
                     <div class="assets-container">
                         <AssetItem
-                            v-for="item in assets"
-                            :key="item.id"
-                            :info="item"
+                            v-for="i in assets.length"
+                            :key="assets[i - 1].id"
+                            v-model:info="assets[i - 1]"
                             :size="itemSize"
                             @refresh="getAssets"
                         ></AssetItem>
@@ -92,14 +92,11 @@ const { width: assetListWidth } = useElementSize(assetListEl)
 const itemSize = ref(0)
 const cssSize = useCssVar('--item-size', assetListEl, { initialValue: '0px' })
 watchEffect(() => {
-    console.log(assetListWidth.value)
     itemSize.value = assetListWidth.value / Math.round(assetListWidth.value / 150)
-    console.log(itemSize.value)
     cssSize.value = `${itemSize.value}px`
 })
 
 const router = useRouter()
-console.log(router)
 const logout = () => {
     http.setToken(null)
     store.userInfo = null

src/views/LoginView.vue

@@ -48,7 +48,11 @@ import { inject, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import router from '@/router/index'
 import { store } from '@/stores/store'
-const loginForm = ref({ username: '15077886171', password: 'x1ongDrew', tradeCode: '' })
+const loginForm = ref({
+    username: import.meta.env.VITE_USERNAME || '',
+    password: import.meta.env.VITE_PASSWORD || '',
+    tradeCode: import.meta.env.VITE_TRADE_CODE || ''
+})
 const form = ref(null)
 const rules = {
     username: [{ required: true, message: '请输入用户名' }],