465 lines
26 KiB
Plaintext
465 lines
26 KiB
Plaintext
<template>
|
|
<view class="product-edit-page">
|
|
<view class="page-header">
|
|
<view class="back-link" @click="goBack">
|
|
<text class="arrow">{"<"}</text>
|
|
<text class="back-txt">杩斿洖</text>
|
|
</view>
|
|
<text class="header-title">缂栬緫鍟嗗搧</text>
|
|
</view>
|
|
|
|
<!-- 姝ラ灞?-->
|
|
<view class="steps-card">
|
|
<view class="step-items">
|
|
<view v-for="(step, index) in steps" :key="index" class="step-item" :class="{ active: activeStep === index }">
|
|
<text class="step-txt">{{ step }}</text>
|
|
<view v-if="index < steps.length - 1" class="step-line"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 琛ㄥ崟鍐呭 -->
|
|
<view class="form-card">
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍟嗗搧绫诲瀷锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="radio-group">
|
|
<view class="radio-item active">
|
|
<text class="radio-circle on"></text>
|
|
<view class="radio-txt">
|
|
<text class="main">鏅€氬晢鍝?/text>
|
|
<text class="sub">(鐗╂祦鍙戣揣)</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍟嗗搧鍚嶇О锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="input-box">
|
|
<input class="real-input" v-model="formData.name" />
|
|
<text class="count">36/80</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍗曚綅锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="input-box small">
|
|
<input class="real-input" value="浠? />
|
|
<text class="count">1/5</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍟嗗搧杞挱鍥撅細</text></view>
|
|
<view class="input-wrap">
|
|
<view class="image-uploader">
|
|
<view v-for="(img, i) in formData.image_urls" :key="i" class="img-item">
|
|
<image :src="img" mode="aspectFill" />
|
|
<view class="img-close" @click="removeImage(i)">脳</view>
|
|
</view>
|
|
<view class="upload-btn" @click="uploadImage">
|
|
<text class="icon">+</text>
|
|
</view>
|
|
</view>
|
|
<text class="tip">寤鸿灏哄锛?00*800锛屽彲鎷栨嫿鏀瑰彉鍥剧墖椤哄簭锛岄粯璁ら寮犲浘涓轰富鍥撅紝鏈€澶氫笂浼?0寮?/text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text>娣诲姞瑙嗛锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="image-uploader">
|
|
<view v-for="(vid, i) in formData.video_urls" :key="i" class="img-item">
|
|
<video :src="vid" style="width: 100%; height: 100%; border-radius: 4px;" :controls="false"></video>
|
|
<view class="img-close" @click="removeVideo(i)">脳</view>
|
|
</view>
|
|
<view class="upload-btn v-btn" @click="uploadVideo">
|
|
<text class="v-icon">馃摴</text>
|
|
</view>
|
|
</view>
|
|
<text class="tip">寤鸿鏃堕暱锛?~30绉掞紝瑙嗛瀹介珮姣?6:9</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍟嗗搧鍒嗙被锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="tag-selector">
|
|
<view v-for="tag in categories" :key="tag" class="tag-item">
|
|
<text>{{ tag }}</text>
|
|
<text class="close">脳</text>
|
|
</view>
|
|
<text class="add-link">鏂板鍒嗙被</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍟嗗搧鍞环锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="input-box small">
|
|
<input class="real-input" type="number" v-model="formData.base_price" placeholder="璇疯緭鍏ュ敭浠? />
|
|
<text class="unit">鍏?/text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text class="required">*</text><text>鍟嗗搧搴撳瓨锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="input-box small">
|
|
<input class="real-input" type="number" v-model="formData.available_stock" placeholder="璇疯緭鍏ュ簱瀛? />
|
|
<text class="unit">浠?/text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text>鍟嗗搧鏍囩锛?/text></view>
|
|
<view class="input-wrap">
|
|
<view class="mock-btn-select">閫夋嫨鏍囩</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label"><text>鍟嗗搧鐘舵€侊細</text></view>
|
|
<view class="input-wrap">
|
|
<view class="radio-group-simple">
|
|
<view class="radio-simple on">
|
|
<text class="dot"></text>
|
|
<text>涓婃灦</text>
|
|
</view>
|
|
<view class="radio-simple">
|
|
<text class="dot"></text>
|
|
<text>涓嬫灦</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer-btns">
|
|
<button class="btn-next">涓嬩竴姝?/button>
|
|
<button class="btn-save" @click="saveProduct">淇濆瓨</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
|
|
import supa, { ensureSupabaseReady } from '@/components/supadb/aksupainstance'
|
|
|
|
const activeStep = ref(0)
|
|
const steps = ['鍩虹淇℃伅', '瑙勬牸搴撳瓨', '鍟嗗搧璇︽儏', '鐗╂祦璁剧疆', '浼氬憳浠?浣ｉ噾', '钀ラ攢璁剧疆', '鍏朵粬璁剧疆']
|
|
|
|
// 琛ㄥ崟瀵瑰簲 ml_products 鏁版嵁缁撴瀯
|
|
const formData = ref({
|
|
id: '',
|
|
merchant_id: uni.getStorageSync('merchant_id') as string || 'merchant_123',
|
|
category_id: '',
|
|
name: '鏈懡鍚嶅晢鍝?, // 榛樿鍊硷紝瀵瑰簲 input 缁戝畾 v-model="formData.name"
|
|
base_price: 0,
|
|
available_stock: 0,
|
|
main_image_url: '',
|
|
image_urls: [
|
|
'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
'https://img2.baidu.com/it/u=3025255470,3051061730&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
'https://img2.baidu.com/it/u=3775079632,546700868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
|
|
] as string[],
|
|
video_urls: [] as string[],
|
|
status: 1, // 1涓婃灦 0涓嬫灦
|
|
})
|
|
|
|
const categories = ref(['鐢熸椿瀹跺眳', '杩愬姩涓撳尯 / 361', '杩愬姩涓撳尯 / 鐗规', '杩愬姩涓撳尯 / 鍖瑰厠'])
|
|
|
|
function uploadImage() {
|
|
const maxCount = 10 - formData.value.image_urls.length
|
|
if (maxCount <= 0) {
|
|
uni.showToast({ title: '鏈€澶氫笂浼?0寮?, icon: 'none' })
|
|
return
|
|
}
|
|
uni.chooseImage({
|
|
count: maxCount,
|
|
success: (res) => {
|
|
// 妯℃嫙涓婁紶锛氱洿鎺ユ妸鎷垮埌鐨勬湰鍦颁复鏃跺湴鍧€鏀捐繘鍒楄〃銆傚疄闄呴渶浣跨敤 supabase storage 绛変笂浼? const paths = res.tempFilePaths as string[]
|
|
formData.value.image_urls.push(...paths)
|
|
},
|
|
fail: (err) => {
|
|
console.error('閫夋嫨鍥剧墖澶辫触:', err)
|
|
}
|
|
})
|
|
}
|
|
|
|
function removeImage(index: number) {
|
|
formData.value.image_urls.splice(index, 1)
|
|
}
|
|
|
|
function uploadVideo() {
|
|
uni.chooseVideo({
|
|
sourceType: ['camera', 'album'],
|
|
success: (res) => {
|
|
// 妯℃嫙涓婁紶锛氱洿鎺ユ妸鎷垮埌鐨勬湰鍦颁复鏃跺湴鍧€鏀捐繘鍒楄〃銆傚疄闄呴渶浣跨敤 supabase storage 绛変笂浼? formData.value.video_urls.push(res.tempFilePath as string)
|
|
},
|
|
fail: (err) => {
|
|
console.error('閫夋嫨瑙嗛澶辫触:', err)
|
|
}
|
|
})
|
|
}
|
|
|
|
function removeVideo(index: number) {
|
|
formData.value.video_urls.splice(index, 1)
|
|
}
|
|
|
|
function goBack() {
|
|
openRoute('product_productList')
|
|
}
|
|
|
|
// 淇濆瓨鍟嗗搧鐨勫姩浣?async function saveProduct() {
|
|
if (!formData.value.name) {
|
|
uni.showToast({ title: '璇疯緭鍏ュ晢鍝佸悕绉?, icon: 'none' })
|
|
return
|
|
}
|
|
|
|
await ensureSupabaseReady()
|
|
|
|
// 鏋勫缓淇濆瓨杞借嵎
|
|
const payload = {
|
|
merchant_id: formData.value.merchant_id,
|
|
name: formData.value.name,
|
|
base_price: formData.value.base_price,
|
|
main_image_url: formData.value.image_urls.length > 0 ? formData.value.image_urls[0] : '', // 棣栧浘
|
|
image_urls: formData.value.image_urls,
|
|
video_urls: formData.value.video_urls,
|
|
available_stock: formData.value.available_stock,
|
|
status: formData.value.status
|
|
}
|
|
|
|
try {
|
|
let result;
|
|
if (formData.value.id) {
|
|
result = await supa.from('ml_products').update(payload).eq('id', formData.value.id)
|
|
} else {
|
|
result = await supa.from('ml_products').insert([payload])
|
|
}
|
|
|
|
if (!result.error) {
|
|
uni.showToast({ title: '淇濆瓨鎴愬姛', icon: 'success' })
|
|
setTimeout(() => goBack(), 1000)
|
|
} else {
|
|
uni.showToast({ title: '淇濆瓨澶辫触: ' + result.error.message, icon: 'none' })
|
|
}
|
|
} catch (error) {
|
|
console.error('淇濆瓨鎶ラ敊:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.product-edit-page {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
min-height: auto;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
.back-link {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
.arrow { font-size: 14px; }
|
|
.back-txt { font-size: 14px; }
|
|
}
|
|
.header-title { font-size: 16px; font-weight: bold; color: #333; }
|
|
}
|
|
|
|
.steps-card {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.step-items {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.step-txt {
|
|
font-size: 14px;
|
|
color: #999;
|
|
padding: 0 16px;
|
|
}
|
|
&.active .step-txt {
|
|
color: #1890ff;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #1890ff;
|
|
padding-bottom: 4px;
|
|
}
|
|
.step-line {
|
|
width: 20px;
|
|
height: 1px;
|
|
background: #e8e8e8;
|
|
}
|
|
}
|
|
|
|
.form-card {
|
|
background: #fff;
|
|
padding: 40px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 30px;
|
|
.label {
|
|
width: 120px;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
color: #333;
|
|
padding-top: 8px;
|
|
margin-right: 20px;
|
|
.required { color: #f5222d; margin-right: 4px; }
|
|
}
|
|
.input-wrap { flex: 1; }
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid #1890ff;
|
|
border-radius: 4px;
|
|
padding: 10px 16px;
|
|
width: 160px;
|
|
position: relative;
|
|
.radio-circle {
|
|
width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 50%;
|
|
&.on { border-color: #1890ff; background: #1890ff; }
|
|
}
|
|
.radio-txt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.main { font-size: 14px; color: #333; }
|
|
.sub { font-size: 12px; color: #999; }
|
|
}
|
|
&::after {
|
|
content: '鉁?;
|
|
position: absolute;
|
|
right: 0; bottom: 0;
|
|
background: #1890ff; color: #fff; font-size: 10px; padding: 0 2px;
|
|
}
|
|
}
|
|
|
|
.input-box {
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
width: 400px;
|
|
height: 36px;
|
|
&.small { width: 150px; }
|
|
.real-input { flex: 1; font-size: 14px; color: #333; }
|
|
.count { font-size: 12px; color: #bfbfbf; }
|
|
}
|
|
|
|
.image-uploader {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
.img-item {
|
|
width: 80px; height: 80px; position: relative;
|
|
image { width: 100%; height: 100%; border-radius: 4px; }
|
|
.img-close {
|
|
position: absolute; right: -6px; top: -6px; width: 16px; height: 16px;
|
|
background: rgba(0,0,0,0.5); color: #fff; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center; font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload-btn {
|
|
width: 80px; height: 80px; border: 1px dashed #d9d9d9; border-radius: 4px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
.icon { font-size: 24px; color: #999; }
|
|
&.v-btn { width: 64px; height: 64px; margin-bottom: 8px; .v-icon { font-size: 24px; } }
|
|
}
|
|
|
|
.tip { font-size: 12px; color: #999; }
|
|
|
|
.tag-selector {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
.tag-item {
|
|
background: #f5f5f5; border: 1px solid #d9d9d9; padding: 2px 10px; border-radius: 4px;
|
|
display: flex; flex-direction: row; align-items: center; gap: 6px;
|
|
font-size: 14px; color: #666;
|
|
.close { color: #999; cursor: pointer; }
|
|
}
|
|
.add-link { font-size: 14px; color: #1890ff; cursor: pointer; }
|
|
}
|
|
|
|
.mock-btn-select {
|
|
border: 1px solid #d9d9d9; border-radius: 4px; padding: 6px 16px;
|
|
font-size: 14px; color: #666; display: inline-block;
|
|
}
|
|
|
|
.radio-group-simple {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
.radio-simple {
|
|
display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: #666;
|
|
.dot { width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 50%; position: relative; }
|
|
&.on {
|
|
color: #1890ff;
|
|
.dot { border-color: #1890ff; }
|
|
.dot::after {
|
|
content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px;
|
|
background: #1890ff; border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-btns {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding-bottom: 40px;
|
|
.btn-next { background: #1890ff; color: #fff; border: none; padding: 0 24px; height: 40px; border-radius: 4px; }
|
|
.btn-save { background: #fff; color: #1890ff; border: 1px solid #1890ff; padding: 0 24px; height: 40px; border-radius: 4px; }
|
|
}
|
|
</style>
|
|
|