From 5a72a35e3c9d76299b0d4d2f8f7ca61eff4c1284 Mon Sep 17 00:00:00 2001 From: xuxy <1059738716@qq.com> Date: 星期三, 26 六月 2024 14:12:30 +0800 Subject: [PATCH] update --- pages/farmer/flower-manage/flower-add.vue | 509 +++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 317 insertions(+), 192 deletions(-) diff --git a/pages/farmer/flower-manage/flower-add.vue b/pages/farmer/flower-manage/flower-add.vue index bf2fb5f..740c168 100644 --- a/pages/farmer/flower-manage/flower-add.vue +++ b/pages/farmer/flower-manage/flower-add.vue @@ -1,72 +1,87 @@ <template> - <view class="container-page"> + <view class="container-page" style="padding: 0rpx;"> <view> <view class="form-item"> <view class="label required">商品分类</view> - <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{ - if(!id){ - show_select_type=true - } + <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{ + // show_select_category=true + $refs.picker_category.showPicker() }"> - <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view> + <view>{{dto.categoryStr||dto.category || '请选择'}}</view> <u-icon class="m-l-a" name="arrow-right"></u-icon> </view> </view> <view class="form-item before-line"> + <view class="label required">商品名称</view> + <view class="m-l-a m-r-0 flex"> + <input v-model="dto.name" placeholder="请输入商品名称" style="margin-top: 16px;text-align: right;"></input> + + </view> + </view> + <view class="form-item before-line"> <view class="label required">商品单位</view> <view class="m-l-a m-r-0 flex"> - <input v-model="dto.applicationTitle" placeholder="请输入店铺名称" - style="margin-top: 16px;text-align: right;"></input> + <input v-model="dto.unit" placeholder="请输入商品单位" style="margin-top: 16px;text-align: right;"></input> </view> </view> <view class="form-item before-line"> <view class="label required">商品颜色</view> - <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{ - if(!id){ - show_select_type=true - } + <!-- <view class="m-l-a m-r-0 flex " :class="[!dto.color?'desc-gray':'']" @click="()=>{ + show_select_color=true }"> <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view> <u-icon class="m-l-a" name="arrow-right"></u-icon> + </view> --> + <view class="m-l-a m-r-0 flex"> + <input v-model="dto.color" placeholder="请输入商品颜色" + style="margin-top: 16px;text-align: right;"></input> </view> - </view> <view class="line-gray-big"></view> <view class="form-item"> - <view class="label required">列表封面图(130*120px)</view> + <view class="label required" style="width: 400rpx;">列表封面图(130*120px)</view> <view class="m-l-a m-r-0 flex"> - <view class="component-button-upload" @click="uploadIcon('icon')" - :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}"> + <view class="component-button-upload" @click="uploadIcon('cover')" + :style="{'background-image':dto.icon&&`url('${dto.cover}')`||''}"> </view> </view> </view> - <view class="form-item before-line"> - <view class="label required">商品轮播图(300*160px)</view> + <view class="form-item before-line bottom-border-no"> + <view class="label required" style="width: 400rpx;">商品轮播图(300*160px)</view> <view class="m-l-a m-r-0 flex"> - <view class="component-button-upload" @click="uploadIcon('icon')" - :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}"> + <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" --> + <view class="component-button-upload" @click="uploadIcon('bannerList')"> </view> + </view> + </view> + <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx" + v-if="dto.bannerList&&dto.bannerList.length>0"> + <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.bannerList" :key="index"> + <image class="banner-img" :src="tBanner" @click.stop="previewImg(tBanner)"> + + </image> + <view class="t-red text-center" @click.stop="deleteBanner(index)">删除</view> </view> </view> <view class="line-gray-big"></view> <view class="form-item before-line"> - <view class="label required">售价</view> + <view class="label required">售价(元)</view> <view class="m-l-a m-r-0 flex"> - <input v-model="dto.applicationTitle" placeholder="请输入数字" type="digit" + <input v-model="dto.price" placeholder="请输入数字" type="digit" style="margin-top: 16px;text-align: right;"></input> </view> </view> - <view class="form-item before-line"> + <view class="form-item "> <view class="label required">库存</view> <view class="m-l-a m-r-0 flex"> - <input v-model="dto.applicationTitle" placeholder="请输入数字" type="number" + <input v-model="dto.stock" placeholder="请输入数字" type="number" style="margin-top: 16px;text-align: right;"></input> </view> </view> @@ -76,11 +91,18 @@ <view class="form-item "> <view class="label required">商品参数详情</view> <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{ - if(!id){ - show_select_type=true + if(!dto.category){ + $message.showToast('请先选择分类') + }else{ + if(dto.params&&dto.params.length==0){ + $message.showToast('暂无参数可以设置') + }else{ + $refs.popup_param.open() + } + } }"> - <view>{{dto.applicationTypeStr||dto.applicationType || '去设置'}}</view> + <view>{{ paramstr || '去设置'}}</view> <u-icon class="m-l-a" name="arrow-right"></u-icon> </view> @@ -88,12 +110,10 @@ <view class="line-gray-big"></view> <view class="form-item before-line"> <view class="label required">商品等级</view> - <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{ - if(!id){ - show_select_type=true - } + <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{ + show_select_level=true }"> - <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view> + <view>{{dto.levelStr||dto.level || '请选择'}}</view> <u-icon class="m-l-a" name="arrow-right"></u-icon> </view> @@ -103,37 +123,64 @@ <view class="form-item before-line"> <view class="label required">商品视频</view> <view class="m-l-a m-r-0 flex"> - <view class="component-button-upload m-r-15" @click="uploadIcon('icon')" - :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}"> + <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" --> + <view class="component-button-upload m-r-15" @click="uploadIcon('video')"> </view> </view> </view> - - - - - <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit"> - 提交审核 + <view v-if="dto.video"> + <video :src="dto.video" style="display: block;margin: 0 auto;"></video> </view> + <view style="min-height: 200rpx;"> + + </view> + <view class="button-green-1 m-t-20 button-fixed-bottom " @click="submit" v-if="!dto.id"> + 提交审核 + </view> + <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="dto.id"> + 修改 + </view> </view> + <!-- + + <u-picker @confirm="select_category" keyName="name" @cancel="show_select_category=false" + :show="show_select_category" :columns="columns_categorys"></u-picker> --> + + <u-picker @confirm="select_level" keyName="label" @cancel="show_select_level=false" :show="show_select_level" + :columns="columns_levels"></u-picker> - <u-picker @confirm="select_type" keyName="label" @cancel="show_select_type=false" :show="show_select_type" - :columns="columns_types"></u-picker> + <uni-popup ref="popup_param" type="top"> + <view class="component-popup_input" v-if="dto.params"> + <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view> + <!-- 输入框--> + <view v-for="(item,i) in dto.params" :key="i" class="m-b-20"> + <view class="title topic-font" style="font-size: 36rpx;font-weight: 600;">{{item.name}}</view> + <view class="m-t-12"> + <u-radio-group v-model="item.value" placement="row"> + <u-radio + :customStyle="{'margin-bottom': '16rpx','margin-right': '24rpx','font-size':'28rpx'}" + v-for="(each, j) in item.values" :key="j" :label="each" :name="each"> + </u-radio> + </u-radio-group> + </view> + </view> - <u-picker @confirm="select_user" keyName="label" @cancel="show_select_user=false" :show="show_select_user" - :columns="userListCols"></u-picker> - - + <!-- 提交按钮 --> + <view class="button-green" @click="closeParamPop">返回</view> + </view> + </uni-popup> + <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory"> + </dying318picker> </view> </template> <script> import environments from '@/environments' - import xflSelect from '@/components/xfl-select/xfl-select.vue'; //导入 + import dying318picker from '@/components/dying318-picker/Picker.vue' import { mapState @@ -144,97 +191,134 @@ data() { return { id: '', - orderId: '', - show_addlog: false, - log_remarks: '', - refresh: false, - api: '', dto: { id: '', - applicationType: '', + name: '', + category: '', + unit: '', + color: '', + cover: '', + bannerList: [], //str[] + video: '', + level: '', //FLOWER_LEVEL + price: 0.00, + stock: 0, + params: [], //id,value }, - show_select_type: false, - show_select_user: false, - columns_types: [], - audit_remarks: '', - audit_result: false, - show_audit: false, - - - //审核方式 - shTypeList: [{ - name: '身份证', - disabled: false - }, - { - name: '营业执照', - disabled: false - } - ], - radiovalue1: '身份证', - + show_select_category: false, + show_select_level: false, + columns_categorys: [], + columns_levels: [], + // columns_params: [], //弹窗选择具体的值 + cancel: { + color: '#999', + }, + confirm: { + color: '#20613D', + }, + // column: [ + // {flex: 1}, + // {flex: 1}, + // {flex: 3}, + // ] } }, - onLoad(options) { - if (options.id) { - this.id = options.id - this.getDetail() - } else { - // this.$http.request('get', '/api/personnel/employee/list', { - // params: { - // size: 4000, - // current: 1 - // } - // }).then(res => { - // this.userListAll = (res.data && res.data.records || []).map(item => { - // item.label = item.label || item.name || item.nickName || item.loginName || '-' - // return item - // }) - // var index = 0 - // this.userList = this.userListAll.map(item => { - // index += 1 - // return `${index}.` + item.label + (item.tel ? `(${item.tel})` : '') - // }) - // var arr = this.userListAll.map(item => { - // return { - // label: item.label + (item.tel ? `(${item.tel})` : ''), - // value: item.id - // } - // }) - // this.userListCols = [arr] + async onLoad(options) { + //tree + this.$http.request('get', '/api/flower/category/tree', {}).then(res => { + var data = res.data + this.columns_categorys = data || [] + console.log('columns_categorys', this.columns_categorys) + // this.columns_categorys = [data || []] + // this.columns_categorys[0].unshift({ + // label: '全部', + // value: '', + // children: [] // }) + }) - this.$http.request('get', '/api/dict/value', { - params: { - typeCode: 'APPLICATION_TYPE' - } - }).then(res => { - var data = res.data - this.columns_types = [data || []] - this.columns_types[0].unshift({ - label: '全部', - value: '' - }) - + this.$http.request('get', '/api/code/value', { + params: { + typeCode: 'FLOWER_LEVEL' + } + }).then(res => { + var data = res.data + this.columns_levels = [data || []] + this.columns_levels[0].unshift({ + label: '全部', + value: '' }) + + }) + if (options.id) { + this.id = options.id + uni.setNavigationBarTitle({ + title: '商品详情' + }) + this.getDetail() + } else { + if (options.copyId) { + this.id = options.copyId + await this.getDetail() + this.id = '' + delete this.dto.id + uni.setNavigationBarTitle({ + title: '复制商品并新增' + }) + } else { + uni.setNavigationBarTitle({ + title: '商品新增' + }) + } + + } }, methods: { - - - select_type(e) { - this.show_select_type = false - this.dto.applicationTypeStr = e.value[0].label - this.dto.applicationType = e.value[0].value + async confirmPickerCategory(picker) { + console.log('confirmPickerCategory', picker) + var id = picker.value + var name = picker.label + if (id !== this.dto.category) { + if (this.dto.category) { + await this.$message.confirm('修改分类将清空商品参数,确定修改吗') + } + this.dto.categoryStr = name + this.dto.category = id + this.$message.showLoading() + await this.refresh_category() + this.$message.hideLoading() + } }, - select_user(e) { - this.show_select_user = false - this.dto.auditPersonStr = e.value[0].label - this.dto.auditPersonId = e.value[0].value + closeParamPop() { + this.$refs.popup_param.close() + }, + + async refresh_category() { + // this.columns_params = [] + this.dto.params = [] + //获取分类参数 + if (this.dto.category) { + const res = await this.$http.request('get', '/api/supplier/flower/params', { + params: { + categoryId: this.dto.category + } + }) + if (res.code == 0) { + // this.columns_params = res.data || [] + this.dto.params = res.data || [] + } + } + + }, + select_level(e) { + this.show_select_level = false + this.dto.levelStr = e.value[0].label + this.dto.level = e.value[0].value }, async getDetail() { @@ -242,125 +326,165 @@ const { code, data - } = await this.$http.request('get', "/api/app/application/get/" + this.id, {}) + } = await this.$http.request('get', "/api/supplier/flower/list/view?id=" + this.id, {}) if (code == 0) { this.dto = { ...data, } - if (this.dto.applicationDate) { - this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate)) + // if (this.dto.applicationDate) { + // this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate)) + // } + // // console.log('this.dto', this.dto) + if (!this.dto.bannerList) { + this.dto.bannerList = [] } - // console.log('this.dto', this.dto) - + // if (this.dto.category) { + // await this.refresh_category() + // } } this.$message.hideLoading() }, async submit() { - if (!this.dto.applicationType) { - this.$message.showToast('未选择类型') - return - } - if (!this.dto.applicationTitle) { - this.$message.showToast('未填写申请主题') - return - } - if (!this.dto.auditPersonId) { - this.$message.showToast('未选择审批人') - return - } - await this.$message.confirm(`是否确定提交申请${this.auditPersonName?(",审批人为:"+this.auditPersonName):""}`) + // if (!this.dto.applicationType) { + // this.$message.showToast('未选择类型') + // return + // } + // if (!this.dto.applicationTitle) { + // this.$message.showToast('未填写申请主题') + // return + // } + // if (!this.dto.auditPersonId) { + // this.$message.showToast('未选择审批人') + // return + // } + // await this.$message.confirm(`是否确定提交申请${this.auditPersonName?(",审批人为:"+this.auditPersonName):""}`) // this.$message.showToast('1') // return var dto = { ...this.dto, - applicationDate: this.$util.toDate(new Date()), - applicantId: this.currentInfo.id + // applicationDate: this.$util.toDate(new Date()), + // applicantId: this.currentInfo.id } this.$message.showLoading() - const re = await this.$http.request('post', '/api/app/application/create', { + const re = await this.$http.request('post', `/api/supplier/flower/list/${this.id?'edit':'new'}`, { data: dto }) this.$message.hideLoading() if (re.code == 2000 || re.code == 0) { this.$message.showToast('操作成功') //需要标记加一下 - this.$store.dispatch('sign_add', 'application'); + // this.$store.dispatch('sign_add', 'application'); this.backpage() } }, - async submitAudit() { - var url = '' - if (this.audit_result) { - url = '/api/app/application/audit/pass' - } else { - url = '/api/app/application/audit/reject' - } - var dto = { - id: this.id, - auditRemarks: this.audit_remarks - } - this.show_audit = false - this.$message.showLoading() - const re = await this.$http.request('post', url, { - data: dto - }) - this.$message.hideLoading() - if (re.code == 2000 || re.code == 0) { - this.$message.showToast('操作成功') - this.$store.dispatch('sign_add', 'application'); - - this.getDetail() - } + async deleteBanner(index) { + await this.$message.confirm('是否确认删除此图片') + // this.dto.bannerList = + this.dto.bannerList.splice(index, 1) }, uploadIcon(key) { + console.log('that dto key', key) const that = this - uni.chooseImage({ - count: 1, // 最多可以选择的图片张数,默认9 - sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有 - sourceType: ['camera', 'album'], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 - success: function({ - errMsg, - tempFiles - }) { - if (errMsg === 'chooseImage:ok') { - // console.log(tempFiles[0]) - that.$message.showLoading() - that.$http.upload(tempFiles[0].path).then(async res => { - var pic = res.data && res.data.length > 0 && res.data[ - 0] - .url || '' - that.$message.hideLoading() - that.dto[key] = pic || '' - that.$forceUpdate() - }).catch(res => { - that.$message.hideLoading() + if (key == 'video') { + uni.chooseVideo({ + sourceType: ['camera', 'album'], + success: function(res) { + if (res.tempFilePath) { + console.log('res.tempFilePath', res.tempFilePath) + that.$message.showLoading() + that.$http.upload(res.tempFilePath).then(async res => { + console.log('res1', res) + var pic = res.data && res.data.length > 0 && res.data[ + 0] + .url || '' + that.$message.hideLoading() + that.dto[key] = pic || '' - }) + that.$forceUpdate() + console.log('that dto', that.dto) + }).catch(res => { + that.$message.hideLoading() + console.error(res) + }) + } } - } - }) + }); + } else { + + uni.chooseImage({ + count: 1, // 最多可以选择的图片张数,默认9 + sizeType: ['compressed'], //original 原图,compressed 压缩图,默认二者都有 + sourceType: ['camera', 'album'], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 + success: function({ + errMsg, + tempFiles + }) { + if (errMsg === 'chooseImage:ok') { + // console.log(tempFiles[0]) + that.$message.showLoading() + that.$http.upload(tempFiles[0].path).then(async res => { + console.log('res1', res) + var pic = res.data && res.data.length > 0 && res.data[ + 0] + .url || '' + that.$message.hideLoading() + if (key == 'bannerList') { + that.dto[key].push(pic) + } else { + that.dto[key] = pic || '' + } + + that.$forceUpdate() + }).catch(res => { + that.$message.hideLoading() + console.error(res) + }) + } + } + }) + } }, }, computed: { - ...mapState(['currentInfo']) + ...mapState(['currentInfo']), + paramstr() { + if (this.dto && this.dto.params) { + var strs = [] + for (var i of this.dto.params) { + if (i.value) { + strs.push(i.value) + } + } + return strs.join(',') + } + return '' + } }, components: { - xflSelect + dying318picker } } </script> <style lang="scss" scoped> + .banner-img { + width: 96rpx; + height: 96rpx; + border-radius: 4rpx; + border: 2rpx dashed #CECECE; + } + .form-item { // padding: 40rpx; border-bottom: 1px solid #F3F3F3; display: flex; + padding: 20rpx; // height: 100px; .label { @@ -380,6 +504,7 @@ } + } .form-item.bottom-border-no { -- Gitblit v1.9.3