303 lines
8.2 KiB
Plaintext
303 lines
8.2 KiB
Plaintext
<template>
|
|
<view style="margin: 20rpx 30rpx;">
|
|
<view class="" style="border-radius: 20rpx; background-color: #fff; padding: 20rpx; ">
|
|
<view class="" style="font-weight: 600; font-size: 30rpx;">
|
|
商品封面
|
|
</view>
|
|
<view class="" @click="uploadFImg(650,650,'MerchShow','showImg')"
|
|
style=" margin-top: 20rpx; width: 100%; height: 650rpx; box-sizing: content-box; border: 4rpx dashed #e2e2e2; border-radius: 20rpx; overflow: hidden; ">
|
|
<image v-if="goodsInfo.img" :src="Service.GetMateUrlByImg(goodsInfo.img)" mode="aspectFill" style="width: 100%; height: 100%; " alt="" />
|
|
<view class="" v-else
|
|
style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; ">
|
|
<img :src="Service.GetIconImg('/static/goods/photo.png')" style="width: 80rpx; height: 80rpx;"
|
|
alt="" />
|
|
<view class="" style=" color: #666666; font-size: 28rpx;">
|
|
上传图片
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="" style=" margin-top: 20rpx; border-radius: 20rpx; background-color: #fff; padding: 20rpx; ">
|
|
<up-form labelWidth='90' :labelStyle="{'font-weight': 600 }" labelPosition="top" :model="goodsInfo"
|
|
ref="form1">
|
|
<up-form-item label="商品名称" prop="goodsInfo.name" :borderBottom="false" ref="item1">
|
|
<up-input v-if="!upImgShow" :customStyle="{'border-radius': '15rpx' }" placeholder="请输入商品名称" border='surround'
|
|
v-model="goodsInfo.name"></up-input>
|
|
</up-form-item>
|
|
<up-form-item label="价格" prop="goodsInfo.sex" :borderBottom="false">
|
|
<up-input v-if="!upImgShow" prefixIcon='rmb' :prefixIconStyle="{ 'color':'#000','font-weight': 600 }"
|
|
:customStyle="{'border-radius': '15rpx' }" placeholder="请输入价格" v-model="goodsInfo.price"
|
|
border="surround"></up-input>
|
|
</up-form-item>
|
|
<up-form-item label="描述" prop="goodsInfo.sex" :borderBottom="false">
|
|
<up-textarea v-if="!upImgShow" v-model="goodsInfo.brief" placeholder="请输入商品描述"></up-textarea>
|
|
</up-form-item>
|
|
<!-- <up-form-item label="分类" prop="goodsInfo.sex" :borderBottom="false">
|
|
<view class=""
|
|
style="padding: 12rpx 18rpx; border-radius: 7px; border: 1rpx solid #e2e2e2; width: 100%; ">
|
|
<view class="" @click="showClass=true"
|
|
style="display: flex; height: 48rpx; align-items: center; justify-content: space-between;">
|
|
<view class="" :style="{ 'color':goodsInfo.class? '#000':'#c0c4cc' } ">
|
|
{{ goodsInfo.class?goodsInfo.class:'请选择分类'}}
|
|
</view>
|
|
<view class="">
|
|
<up-icon name="arrow-right" size="14" color='#666666' :bold='true'></up-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-form-item> -->
|
|
<up-form-item label="状态" prop="goodsInfo.status" :borderBottom="false">
|
|
<up-radio-group :modelValue="goodsInfo.status" placement="row">
|
|
<up-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
|
|
:label="item.name" :name="item.value" @change="radioChange">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</up-form-item>
|
|
<!-- <up-form-item label="标签" :borderBottom="false">
|
|
<view v-for="(item, index) in tabsList" @click="clickTab(index)" :key="index"
|
|
:class="{active:!goodsInfo.tabs.includes(index),actived:goodsInfo.tabs.includes(index)}">
|
|
{{item}}
|
|
</view>
|
|
</up-form-item> -->
|
|
</up-form>
|
|
</view>
|
|
|
|
<view class="" style="width: 100%; height: 200rpx;">
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<view class="action-buttons">
|
|
<u-button type="primary" @click.stop="Service.GoPageBack()" :custom-style="ButtonStyle">取消</u-button>
|
|
<u-button type="primary" @click.stop="save()" :custom-style="ButtonStyle">{{ goodsInfo.goodsId?'修改':'添加' }}</u-button>
|
|
</view>
|
|
|
|
|
|
<!-- <up-picker :show="showClass" @cancel="showClass=!showClass" @confirm="confirmClass"
|
|
:columns="columns"></up-picker> -->
|
|
</view>
|
|
|
|
<ImageCropperFunc style="z-index: 200;" :show="upImgShow" :url="upImgUrl" :imgName="imgName" :width="upImgwidth"
|
|
:height="upImgheight" :upType="upImgType" :retFun="upImgData">
|
|
</ImageCropperFunc>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import { Service } from "@/Service/Service"
|
|
import { ref } from "vue";
|
|
import ImageCropperFunc from "@/components/ImageCropper"
|
|
import { vpMerchService } from '@/Service/vp/vpMerchService'
|
|
|
|
interface Goods{
|
|
img:string
|
|
name: string
|
|
price: number
|
|
brief: string
|
|
status: number
|
|
goodsId:string
|
|
}
|
|
|
|
let goodsInfo = ref<Goods>({
|
|
img:'',
|
|
name: "",
|
|
price: null,
|
|
brief: "",
|
|
status:1,
|
|
goodsId:''
|
|
})
|
|
|
|
let radioStatus=ref('上架中')
|
|
let showClass = ref(false)
|
|
const columns = ref([
|
|
['中国', '美国', '日本']
|
|
]);
|
|
|
|
const radiolist = ref([
|
|
{
|
|
name: '上架中',
|
|
value: 1
|
|
|
|
},
|
|
{
|
|
name: '已下架',
|
|
value: 0
|
|
}
|
|
]);
|
|
|
|
|
|
let tabsList = ref([
|
|
'新品',
|
|
'热销',
|
|
'推荐',
|
|
'折扣',
|
|
'特惠'
|
|
])
|
|
|
|
|
|
const ButtonStyle = ref({
|
|
backgroundColor: '#FF6600',
|
|
borderColor: '#FF6600',
|
|
color: '#FFFFFF',
|
|
fontSize: '28rpx',
|
|
height: '75rpx',
|
|
borderRadius: '45rpx',
|
|
marginLeft: '20rpx'
|
|
});
|
|
|
|
// 裁剪图片参数
|
|
let upImgShow = ref<boolean>(false)
|
|
let upImgUrl = ref<string>('')
|
|
let upImgwidth = ref<number>(0)
|
|
let upImgheight = ref<number>(0)
|
|
let upImgType = ref<string>('')
|
|
let imgName = ref<string>('')
|
|
|
|
onLoad((dada:any) => {
|
|
if(dada.goodsId){
|
|
goodsInfo.value.goodsId=dada.goodsId
|
|
getData()
|
|
}
|
|
|
|
});
|
|
|
|
onShow(() => {
|
|
|
|
});
|
|
|
|
|
|
const getData=()=>{
|
|
vpMerchService.GetGoodsInfo(goodsInfo.value.goodsId,1).then(res=>{
|
|
goodsInfo.value=res.data.goodsInfo
|
|
console.log(goodsInfo.value.status);
|
|
})
|
|
}
|
|
|
|
// const confirmClass = (e) => {
|
|
// goodsInfo.value.class = e.value[0]
|
|
// showClass.value = !showClass.value
|
|
// }
|
|
|
|
|
|
const radioChange = (e) => {
|
|
|
|
goodsInfo.value.status = e
|
|
}
|
|
|
|
// const clickTab = (e : any) => {
|
|
// if (goodsInfo.value.tabs.includes(e)) {
|
|
// let a = goodsInfo.value.tabs.findIndex((x) => {
|
|
// return x == e
|
|
// })
|
|
// goodsInfo.value.tabs.splice(a, 1)
|
|
// return
|
|
// }
|
|
|
|
// goodsInfo.value.tabs.push(e)
|
|
// }
|
|
|
|
const save=()=>{
|
|
if(!goodsInfo.value.img){
|
|
Service.Msg('请上传图片!')
|
|
return
|
|
}
|
|
if(!goodsInfo.value.name){
|
|
Service.Msg('请输入商品名称!')
|
|
return
|
|
}
|
|
if(!goodsInfo.value.price){
|
|
Service.Msg('请输入商品价格!')
|
|
return
|
|
}
|
|
if(!goodsInfo.value.brief){
|
|
Service.Msg('请输入商品描述!')
|
|
return
|
|
}
|
|
// if(goodsInfo.value.status){
|
|
// Service.Msg('请选择商品当前状态!')
|
|
// return
|
|
// }
|
|
vpMerchService.UpdateMerchGoods(goodsInfo.value.goodsId==''?'':goodsInfo.value.goodsId,goodsInfo.value.name,goodsInfo.value.img,goodsInfo.value.price,goodsInfo.value.brief,goodsInfo.value.status).then(res=>{
|
|
if(res.code==0){
|
|
Service.Msg(goodsInfo.value.goodsId?'修改成功':'添加成功')
|
|
setTimeout(()=>{
|
|
Service.GoPageBack()
|
|
},2500)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
const uploadFImg = (width : any, height : any, Type : any, Name : any) => {
|
|
uni.chooseImage({
|
|
count: 1, // 最多选择3张图片
|
|
sizeType: ['original', 'compressed'], // 支持原图和压缩图
|
|
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
|
|
success: function (res) {
|
|
let path = res.tempFiles[0].path
|
|
upImgUrl.value = path
|
|
upImgwidth.value = width
|
|
upImgheight.value = height
|
|
upImgType.value = Type
|
|
imgName.value = Name
|
|
upImgShow.value = true
|
|
},
|
|
fail: function (err) {
|
|
console.error('选择失败:', err.errMsg);
|
|
}
|
|
})
|
|
}
|
|
|
|
const upImgData = (e : any) => {
|
|
upImgShow.value = false
|
|
goodsInfo.value.img = e.url
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
.active {
|
|
color: #b5b5b5;
|
|
border: 1rpx solid #b5b5b5;
|
|
margin-right: 15rpx;
|
|
border-radius: 23rpx;
|
|
padding: 5rpx 16rpx;
|
|
width: fit-content;
|
|
}
|
|
|
|
.actived {
|
|
color: var(--nav-mian);
|
|
border: 1rpx solid var(--nav-mian);
|
|
margin-right: 15rpx;
|
|
border-radius: 23rpx;
|
|
padding: 5rpx 16rpx;
|
|
width: fit-content;
|
|
}
|
|
|
|
/* 底部操作按钮 */
|
|
.action-buttons {
|
|
display: flex;
|
|
padding: 30rpx 30rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
}
|
|
</style> |