333 lines
7.3 KiB
Vue
333 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<view class="whole">
|
||
|
|
<view class="oneBox">
|
||
|
|
<view class="row flex" @click="showType = true">
|
||
|
|
<view class="span">商品类型<text>*</text></view>
|
||
|
|
<view class="text">
|
||
|
|
<text v-if="Index === ''">请选择</text>
|
||
|
|
<text v-else>{{typeList[Index].name}}</text>
|
||
|
|
<up-icon name="arrow-right" size="14" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="row flex">
|
||
|
|
<view class="span">商品名称<text>*</text></view>
|
||
|
|
<input class="input" type="text" v-model="goods_name" placeholder="请填写商品名称" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="row">
|
||
|
|
<view class="span">上传图片</view>
|
||
|
|
<view class="upImg">
|
||
|
|
<view class="hasimg" v-for="(item, index) in imgList" :key="index">
|
||
|
|
<image :src="item" class="img" mode="aspectFill"></image>
|
||
|
|
<view class="icon flexc" @click="delUpImg(item, index)"><up-icon name="close" color="#fff" size="12" /></view>
|
||
|
|
</view>
|
||
|
|
<view class="plus flexc" @click="uploadImg()">
|
||
|
|
<up-icon name="camera-fill" color="#9D9D9D" size="20" />
|
||
|
|
<text>上传图片</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="row" style="padding: 0;">
|
||
|
|
<up-textarea v-model="desc" count placeholder="请填写备注,如商品来源,商品信息" style="font-size: 28rpx;" :height="70" :maxlength="500"></up-textarea>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="btmbox flexc" @click="commitSubmit()">提交</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<up-popup :show="showType" :round="10" mode="bottom" @close="showType = false">
|
||
|
|
<view class="reasonbox">
|
||
|
|
<view class="title">请选择商品类型</view>
|
||
|
|
<view class="box">
|
||
|
|
<view class="row" v-for="(item, index) in typeList" :key="index" @click="selectType(index)">
|
||
|
|
<view class="tit">{{item.name}}</view>
|
||
|
|
<up-icon v-if="Index === index" name="checkbox-mark" color="#F14939" size="20" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</up-popup>
|
||
|
|
|
||
|
|
<!-- 隐私协议弹窗 -->
|
||
|
|
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { reactive, toRefs } from 'vue'
|
||
|
|
import { get, post } from '@/api/request.js'
|
||
|
|
import { showToast, judgePrivacy } from '@/components/common.js'
|
||
|
|
import privacyPopup from '@/components/privacyPopup/index.vue'
|
||
|
|
import { Style } from '@/utils/list.js'
|
||
|
|
import API from '/api/index'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
privacyPopup
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
const data = reactive({
|
||
|
|
reason: '',
|
||
|
|
mobile: '',
|
||
|
|
desc: '',
|
||
|
|
imgList: [],
|
||
|
|
Color: uni.getStorageSync('theme_color'),
|
||
|
|
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
||
|
|
showPrivacy: false,
|
||
|
|
goods_name: '',
|
||
|
|
typeList: [],
|
||
|
|
Index: '',
|
||
|
|
showType: false
|
||
|
|
})
|
||
|
|
|
||
|
|
function changeDesc(e) {
|
||
|
|
data.desc = e.detail
|
||
|
|
}
|
||
|
|
|
||
|
|
// 上传图片
|
||
|
|
async function uploadImg() {
|
||
|
|
if(data.imgList.length >= 3) {
|
||
|
|
showToast('最多只能添加3张图片喔')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if(await judgePrivacy()) {
|
||
|
|
data.showPrivacy = true
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
uni.chooseImage({
|
||
|
|
success(res) {
|
||
|
|
const tempFilePaths = res.tempFilePaths
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在上传...',
|
||
|
|
mask: true
|
||
|
|
})
|
||
|
|
tempFilePaths.forEach((item) => {
|
||
|
|
uni.uploadFile({
|
||
|
|
url: API.url + '/api/v1/upload',
|
||
|
|
filePath: item,
|
||
|
|
name: 'file',
|
||
|
|
header: {
|
||
|
|
Authorization: uni.getStorageSync('token') || '',
|
||
|
|
accept: 'application/json',
|
||
|
|
appid: API.appId
|
||
|
|
},
|
||
|
|
success(req) {
|
||
|
|
uni.hideLoading()
|
||
|
|
if(data.imgList.length >= 3){
|
||
|
|
showToast('最多只能添加3张图片喔')
|
||
|
|
} else {
|
||
|
|
const imgUrl = JSON.parse(req.data).data.link
|
||
|
|
data.imgList.push(imgUrl)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fail() {
|
||
|
|
uni.hideLoading()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除图片
|
||
|
|
function delUpImg(item, index) {
|
||
|
|
data.imgList.splice(index, 1)
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectType(index) {
|
||
|
|
data.Index = index
|
||
|
|
data.showType = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// 确认提交
|
||
|
|
const commitSubmit = async () => {
|
||
|
|
if(data.Index === '') {
|
||
|
|
return showToast('请选择商品类型')
|
||
|
|
}
|
||
|
|
if(!data.goods_name) {
|
||
|
|
return showToast('请填写商品名称')
|
||
|
|
}
|
||
|
|
uni.showLoading({
|
||
|
|
mask: true,
|
||
|
|
title: '正在提交'
|
||
|
|
})
|
||
|
|
let param = {
|
||
|
|
shop_group_id: data.typeList[data.Index].id,
|
||
|
|
goods_name: data.goods_name,
|
||
|
|
comment: data.desc,
|
||
|
|
images: data.imgList
|
||
|
|
}
|
||
|
|
post('/api/v1/wish', param).then(res => {
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.showToast({
|
||
|
|
title: '提交成功',
|
||
|
|
icon: 'success',
|
||
|
|
duration: 1000,
|
||
|
|
mask: true,
|
||
|
|
success() {
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateBack({delta: 1})
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCategoryList() {
|
||
|
|
get('/api/v1/group', { parent_id: 0 }).then((res) => {
|
||
|
|
data.typeList = res.data
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
changeDesc,
|
||
|
|
commitSubmit,
|
||
|
|
uploadImg,
|
||
|
|
delUpImg,
|
||
|
|
selectType,
|
||
|
|
getCategoryList
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async onLoad(options) {
|
||
|
|
// await this.$onLaunched
|
||
|
|
this.getCategoryList()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.whole {
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
position: relative;
|
||
|
|
padding-bottom: 140rpx;
|
||
|
|
.pad20{
|
||
|
|
padding: 20rpx 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.oneBox{
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.row{
|
||
|
|
padding: 0 24rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
.span{
|
||
|
|
line-height: 80rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
position: relative;
|
||
|
|
&::after{
|
||
|
|
position: absolute;
|
||
|
|
border-bottom: 1px solid #f4f4f4;
|
||
|
|
width: calc(100% + 40rpx);
|
||
|
|
left: -20rpx;
|
||
|
|
bottom: 0;
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #f00;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.input{
|
||
|
|
width: calc(100% - 250rpx);
|
||
|
|
height: 64rpx;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.upImg{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
width: 100%;
|
||
|
|
padding: 24rpx 0;
|
||
|
|
.hasimg{
|
||
|
|
width: 130rpx;
|
||
|
|
height: 130rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
position: relative;
|
||
|
|
.img{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.icon{
|
||
|
|
position: absolute;
|
||
|
|
top: -18rpx;
|
||
|
|
right: -18rpx;
|
||
|
|
width: 36rpx;
|
||
|
|
height: 36rpx;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
border-radius: 50%;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.plus{
|
||
|
|
width: 140rpx;
|
||
|
|
height: 140rpx;
|
||
|
|
flex-direction: column;
|
||
|
|
border: 1px dashed #707070;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
text{
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #9D9D9D;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btmbox{
|
||
|
|
width: 94%;
|
||
|
|
height: 80rpx;
|
||
|
|
color: #fff;
|
||
|
|
background: v-bind('Color');
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 30rpx;
|
||
|
|
left: 3%;
|
||
|
|
}
|
||
|
|
.flexc{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.flex{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.reasonbox{
|
||
|
|
padding: 0 30rpx;
|
||
|
|
.title{
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #303030;
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 30rpx 0;
|
||
|
|
border-bottom: 1rpx solid #E5E5E5;
|
||
|
|
}
|
||
|
|
.box{
|
||
|
|
height: 65vh;
|
||
|
|
overflow: auto;
|
||
|
|
.row{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
.tit{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #707070;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|