parent
4f5a95b13f
commit
d7f4aae565
@ -0,0 +1,45 @@ |
|||||||
|
import { |
||||||
|
POST |
||||||
|
} from './Request.js'; |
||||||
|
let app = getApp(); |
||||||
|
let base = app.globalData.url; |
||||||
|
|
||||||
|
|
||||||
|
//新增门店图片
|
||||||
|
export const insertStoreImg = params => { |
||||||
|
return POST('POST', `${base}/storeImg/insertStoreImg`, params).then(res => res.data); |
||||||
|
} |
||||||
|
|
||||||
|
//查询门店图片列表
|
||||||
|
export const getBsStoreImgByList = params => { |
||||||
|
return POST('GET', `${base}/storeImg/getBsStoreImgByList`, params).then(res => res.data); |
||||||
|
} |
||||||
|
|
||||||
|
//删除门店图片
|
||||||
|
export const deleteStoreImg = params => { |
||||||
|
return POST('GET', `${base}/storeImg/deleteStoreImg`, params).then(res => res.data); |
||||||
|
} |
||||||
|
|
||||||
|
//根据id查询门店图片详情
|
||||||
|
export const getStoreImgById = params => { |
||||||
|
return POST('GET', `${base}/storeImg/getStoreImgById`, params).then(res => res.data); |
||||||
|
} |
||||||
|
|
||||||
|
//新增门店产品
|
||||||
|
export const insertStoreProduct = params => { |
||||||
|
return POST('POST', `${base}/storeProduct/insertStoreProduct`, params).then(res => res.data); |
||||||
|
} |
||||||
|
//编辑门店产品
|
||||||
|
export const editStoreProduct = params => { |
||||||
|
return POST('POST', `${base}/storeProduct/editStoreProduct`, params).then(res => res.data); |
||||||
|
} |
||||||
|
|
||||||
|
//门店产品列表
|
||||||
|
export const getStoreProductByList = params => { |
||||||
|
return POST('GET', `${base}/storeProduct/getStoreProductByList`, params).then(res => res.data); |
||||||
|
} |
||||||
|
|
||||||
|
//查询门店产品详情
|
||||||
|
export const getStoreProductById = params => { |
||||||
|
return POST('GET', `${base}/storeProduct/getStoreProductById`, params).then(res => res.data); |
||||||
|
} |
||||||
@ -0,0 +1,298 @@ |
|||||||
|
<template> |
||||||
|
<view class="next-bubble-menu" |
||||||
|
> |
||||||
|
|
||||||
|
<view @click.stop="showContainer"> |
||||||
|
<slot></slot> |
||||||
|
</view> |
||||||
|
<view class="mask" v-show="show && showUi" @click.stop="show=false"></view> |
||||||
|
<view class="container" v-show="show && showUi"> |
||||||
|
<view class="block" :style="{left: `calc(50% - ${(width*0.5).toFixed(0)}rpx)`}"> |
||||||
|
<view class="arrow" |
||||||
|
:style="{ |
||||||
|
left:0, |
||||||
|
top: showTop && (arrowTop+12)+'rpx' |
||||||
|
}"> |
||||||
|
</view> |
||||||
|
<view class="list-container" |
||||||
|
:style="'height:'+(dHeight?dHeight+'rpx':'auto')+';max-height:'+dMaxHeight+'rpx;border-radius:'+radius+'rpx;width:'+width+'rpx;left:'+ relativeAllow +'rpx;'"> |
||||||
|
<view :class="'list-item '+(index==dataList.length-1?'':'bt')" v-for="(item,index) in dataList" :key="index" @click.stop="clickItem(item)"> |
||||||
|
<image class="list-item-image" :src="item.iconSrc" v-if="item.iconSrc" /> |
||||||
|
<text class="list-item-text">{{item.text}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
let closeOtherHooks = new Set() |
||||||
|
const closeOtherPopUp = (closePopUp) => { |
||||||
|
closeOtherHooks.forEach(hook => { |
||||||
|
if (closePopUp !== hook) { //closePopUp当前页面关闭方法，hook所有页面的关闭方法 |
||||||
|
hook() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
props: { |
||||||
|
bingEleId: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
//气泡框数据源 |
||||||
|
dataList: { |
||||||
|
type: Array, |
||||||
|
default: () => { |
||||||
|
return [] |
||||||
|
} |
||||||
|
}, |
||||||
|
hasBar: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
radius: { |
||||||
|
type: Number, |
||||||
|
default: 8 |
||||||
|
}, |
||||||
|
dWidth: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
dHeight: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
dMaxHeight: { |
||||||
|
type: Number, |
||||||
|
default: 400 |
||||||
|
}, |
||||||
|
relativeAllow: { |
||||||
|
type: Number, |
||||||
|
default: -30 |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
show: false, |
||||||
|
width: 0, |
||||||
|
height: 0, |
||||||
|
left: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0, |
||||||
|
rectTop: 0, |
||||||
|
screenWidth: 0, |
||||||
|
showTop: false, |
||||||
|
arrowTop: 0, |
||||||
|
showUi: false |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
const closePopUp = () => { |
||||||
|
this.show = false; |
||||||
|
} |
||||||
|
closeOtherHooks.add(closePopUp) //closeOtherHooks每个页面的关闭方法都加上 |
||||||
|
this.closePopUp = closePopUp |
||||||
|
|
||||||
|
this.$nextTick(() => { |
||||||
|
if (!this.bingEleId) return |
||||||
|
// #ifdef APP-PLUS |
||||||
|
uni.createSelectorQuery().in(this).select('.next-bubble-menu').boundingClientRect(res => { |
||||||
|
let difference = res.left |
||||||
|
uni.createSelectorQuery().select('#' + this.bingEleId).boundingClientRect(rect => { |
||||||
|
const systemInfo = uni.getSystemInfoSync() |
||||||
|
const windowHeight = systemInfo.windowHeight |
||||||
|
this.screenWidth = systemInfo.screenWidth |
||||||
|
if (!this.dWidth) { |
||||||
|
this.width = this.px2rpx(rect.width, this.screenWidth) |
||||||
|
} else { |
||||||
|
let screenW = this.px2rpx(this.screenWidth, this.screenWidth) |
||||||
|
this.width = this.dWidth > screenW ? screenW : this.dWidth |
||||||
|
} |
||||||
|
this.height = rect.height |
||||||
|
this.rectTop = rect.top |
||||||
|
this.bottom = windowHeight - rect.bottom |
||||||
|
|
||||||
|
}).exec() |
||||||
|
}).exec() |
||||||
|
// #endif |
||||||
|
// #ifndef APP-PLUS |
||||||
|
uni.createSelectorQuery().in(this).select('.next-bubble-menu').boundingClientRect(res => { |
||||||
|
let difference = res.left |
||||||
|
uni.createSelectorQuery().select('#' + this.bingEleId).boundingClientRect(rect => { |
||||||
|
const systemInfo = uni.getSystemInfoSync() |
||||||
|
const windowHeight = systemInfo.windowHeight |
||||||
|
this.screenWidth = systemInfo.screenWidth |
||||||
|
if (!this.dWidth) { |
||||||
|
this.width = this.px2rpx(rect.width, this.screenWidth) |
||||||
|
} else { |
||||||
|
let screenW = this.px2rpx(this.screenWidth, this.screenWidth) |
||||||
|
this.width = this.dWidth > screenW ? screenW : this.dWidth |
||||||
|
} |
||||||
|
this.height = rect.height |
||||||
|
this.rectTop = rect.top |
||||||
|
this.bottom = windowHeight - rect.bottom |
||||||
|
}).exec() |
||||||
|
}).exec() |
||||||
|
// #endif |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
showContainer() { |
||||||
|
if (!this.bingEleId) return |
||||||
|
else this.show = !this.show |
||||||
|
if (this.show) { |
||||||
|
closeOtherPopUp(this.closePopUp) //关掉其他的 |
||||||
|
|
||||||
|
this.$nextTick(res => { |
||||||
|
// #ifdef APP-PLUS |
||||||
|
let view = uni.createSelectorQuery().in(this).select(".list-container") |
||||||
|
view.boundingClientRect(res => { |
||||||
|
let arrHeight = res.height |
||||||
|
let height = this.bottom - arrHeight - 15 |
||||||
|
if (height < 0) { |
||||||
|
this.showTop = true |
||||||
|
this.top = this.px2rpx((this.rectTop - arrHeight - 10), this |
||||||
|
.screenWidth) |
||||||
|
this.arrowTop = this.px2rpx(arrHeight - 5, this.screenWidth) |
||||||
|
} else { |
||||||
|
this.showTop = false |
||||||
|
this.top = this.px2rpx(this.rectTop + this.height + 10, this |
||||||
|
.screenWidth) |
||||||
|
} |
||||||
|
this.$nextTick(() => { |
||||||
|
this.showUi = true |
||||||
|
}) |
||||||
|
}).exec() |
||||||
|
// #endif |
||||||
|
// #ifndef APP-PLUS |
||||||
|
uni.createSelectorQuery().in(this).select('.list-container').boundingClientRect(res => { |
||||||
|
const left = res.left |
||||||
|
let arrHeight = res.height |
||||||
|
let height = this.bottom - arrHeight - 15 |
||||||
|
if (height < 0) { |
||||||
|
this.showTop = true |
||||||
|
if (this.hasBar) { |
||||||
|
// #ifdef H5 |
||||||
|
this.top = this.px2rpx((this.rectTop - arrHeight + 35), this |
||||||
|
.screenWidth) |
||||||
|
// #endif |
||||||
|
// #ifndef H5 |
||||||
|
this.top = this.px2rpx((this.rectTop - arrHeight - 10), this |
||||||
|
.screenWidth) |
||||||
|
// #endif |
||||||
|
} else { |
||||||
|
this.top = this.px2rpx((this.rectTop - arrHeight - 10), this |
||||||
|
.screenWidth) |
||||||
|
} |
||||||
|
this.arrowTop = this.px2rpx(arrHeight - 5, this.screenWidth) |
||||||
|
} else { |
||||||
|
this.showTop = false |
||||||
|
if (this.hasBar) { |
||||||
|
// #ifdef H5 |
||||||
|
this.top = this.px2rpx(this.rectTop + this.height + 54, this |
||||||
|
.screenWidth) |
||||||
|
// #endif |
||||||
|
// #ifndef H5 |
||||||
|
this.top = this.px2rpx(this.rectTop + this.height + 10, this |
||||||
|
.screenWidth) |
||||||
|
// #endif |
||||||
|
} else { |
||||||
|
this.top = this.px2rpx(this.rectTop + this.height + 10, this |
||||||
|
.screenWidth) |
||||||
|
} |
||||||
|
} |
||||||
|
this.$nextTick(() => { |
||||||
|
this.showUi = true |
||||||
|
}) |
||||||
|
}).exec() |
||||||
|
// #endif |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
px2rpx(px, screenWidth) { |
||||||
|
return px / (screenWidth / 750) |
||||||
|
}, |
||||||
|
//点击选项 |
||||||
|
clickItem(item) { |
||||||
|
this.show = false |
||||||
|
this.$emit('change', item) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
$bgColor:#3da7e7; |
||||||
|
$ftColor:#ffffff; |
||||||
|
|
||||||
|
.mask{ |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
z-index: 999999 !important; |
||||||
|
// background:rgba(0, 0, 0, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.next-bubble-menu { |
||||||
|
position: relative; |
||||||
|
border: solid transparent 1px; |
||||||
|
} |
||||||
|
|
||||||
|
.block { |
||||||
|
/* position: fixed; */ |
||||||
|
position: absolute; |
||||||
|
z-index: 99999999 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.container{ |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.list-container { |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: auto; |
||||||
|
// padding: 16rpx 20rpx; |
||||||
|
background-color: $bgColor; |
||||||
|
box-shadow: 2rpx 4rpx 10rpx rgba(0,0,0,.1); |
||||||
|
} |
||||||
|
.arrow { |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
margin: -10rpx auto 0; |
||||||
|
border-top: 10rpx solid transparent; |
||||||
|
border-bottom: 10rpx solid $bgColor; |
||||||
|
border-right: 10rpx solid transparent; |
||||||
|
border-left: 10rpx solid transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.list-item { |
||||||
|
line-height: 80rpx; |
||||||
|
text-align: center; |
||||||
|
color: $ftColor; |
||||||
|
&:active{ |
||||||
|
background-color:$ftColor; |
||||||
|
color: $bgColor; |
||||||
|
} |
||||||
|
} |
||||||
|
.bt{ |
||||||
|
border-bottom: 1px solid $ftColor; |
||||||
|
} |
||||||
|
|
||||||
|
.list-item .list-item-image { |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
} |
||||||
|
.list-item .list-item-text { |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<!-- 菜单功能 --> |
||||||
|
<view class="backcor6 all-container pd-main" > |
||||||
|
<view class="funcss" v-for="(item,index) in funcList" :key="index" @click="jumpdesfun(item)"> |
||||||
|
<image :src="item.img" mode="widthFix" class="funicon"></image> |
||||||
|
<view class="width100 font14 mart5">{{item.title}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
funcList:[ |
||||||
|
{ |
||||||
|
title: '门店图片', |
||||||
|
url: './storeImg/storeImg', |
||||||
|
img: '/static/img/home4.png' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '门店产品', |
||||||
|
url: './storeProduct/storeProduct', |
||||||
|
img: '/static/img/home4.png' |
||||||
|
}, |
||||||
|
|
||||||
|
], |
||||||
|
storeId:'', |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options){ |
||||||
|
if(options.storeId){ |
||||||
|
this.storeId = options.storeId; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
/** |
||||||
|
* 跳转功能 |
||||||
|
*/ |
||||||
|
jumpdesfun(item) { |
||||||
|
let that = this; |
||||||
|
uni.navigateTo({ |
||||||
|
url: item.url+"?storeId="+that.storeId |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
// 菜单 |
||||||
|
.funcss { |
||||||
|
width: 33%; |
||||||
|
height: 100px; |
||||||
|
border-right: 1px solid #e8e8e8; |
||||||
|
border-bottom: 1px solid #e8e8e8; |
||||||
|
background-color: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
.funicon { |
||||||
|
width: 35px; |
||||||
|
padding-top: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,291 @@ |
|||||||
|
<template> |
||||||
|
<!-- backcorfff backcor6--> |
||||||
|
<view class="all-container pd-main backcor6 font15"> |
||||||
|
<view class="dis-flex width100 mart10"> |
||||||
|
<button class="btns " @click.stop="clickToAdd()">新增</button> |
||||||
|
<button class="btns bgRed " @click.stop = "clickToDelete()">删除</button> |
||||||
|
</view> |
||||||
|
<view class="mart20 backcorfff"> |
||||||
|
<view class="dis-flex height40 bor-botm1"> |
||||||
|
<view class="checkFlex fotct fontwig6"></view> |
||||||
|
<view class="flex-1 fotct fontwig6">图片</view> |
||||||
|
<next-bubble-menu class="flex-1" :d-width="200" :dataList="dataList" bingEleId="imgType" @change="getItem($event)"> |
||||||
|
<view class=" fotct fontwig6 down " id="imgType">{{imgType.imgTypeText}}</view> |
||||||
|
</next-bubble-menu> |
||||||
|
|
||||||
|
<view class="flex-1 fotct fontwig6">图片状态</view> |
||||||
|
</view> |
||||||
|
<checkbox-group @change="checkClick"> |
||||||
|
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 " v-for="(item,index) in imgDataList" :key="index"> |
||||||
|
<view class="checkFlex fotct"> |
||||||
|
<checkbox @click.stop class=" checkContainer" color="#FFC71E" |
||||||
|
:value="String(item.id)" :checked="false" /> |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct"> |
||||||
|
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct">{{item.type | filterType}}</view> |
||||||
|
<view :class="' flex-1 fotct '+(item.status == 0 ? ' fcRed ':'')">{{ item.status | filterStatus}}</view> |
||||||
|
</view> |
||||||
|
</checkbox-group> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue" |
||||||
|
|
||||||
|
import {getBsStoreImgByList, |
||||||
|
deleteStoreImg |
||||||
|
} from '@/Utils/groupBuying.js'; |
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||||
|
dataList: [{ |
||||||
|
id: 0, |
||||||
|
text: '全部', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
text: '菜品', |
||||||
|
}, { |
||||||
|
id: 2, |
||||||
|
text: '环境', |
||||||
|
},{ |
||||||
|
id:3, |
||||||
|
text:'菜单' |
||||||
|
} |
||||||
|
], |
||||||
|
|
||||||
|
imgType:{ |
||||||
|
// isShowImgType:false, |
||||||
|
imgTypeText:"图片类型", |
||||||
|
imgTypeId:0, |
||||||
|
}, |
||||||
|
storeId:"",//门店id |
||||||
|
imgDataList:[], |
||||||
|
imgSelectList:[], |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
components: { |
||||||
|
nextBubleMenu |
||||||
|
}, |
||||||
|
onLoad(options){ |
||||||
|
if(options.storeId){ |
||||||
|
this.storeId = options.storeId; |
||||||
|
} |
||||||
|
}, |
||||||
|
onShow(){ |
||||||
|
this.imgType.imgTypeId=0; |
||||||
|
this.imgType.imgTypeText="图片类型"; |
||||||
|
this.getBsStoreImgByList(); |
||||||
|
}, |
||||||
|
filters:{ |
||||||
|
filterType(type){ |
||||||
|
switch (type) { |
||||||
|
case 1: |
||||||
|
return "菜品"; |
||||||
|
case 2: |
||||||
|
return "环境"; |
||||||
|
case 3: |
||||||
|
return "菜单"; |
||||||
|
|
||||||
|
default: |
||||||
|
return "未知"; |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
filterStatus(value){ |
||||||
|
switch (value) { |
||||||
|
case 1: |
||||||
|
return "正常"; |
||||||
|
case 0: |
||||||
|
return "失败"; |
||||||
|
default: |
||||||
|
return "未知"; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/* 获取列表 */ |
||||||
|
getBsStoreImgByList(){ |
||||||
|
let params={ |
||||||
|
storeId:this.storeId, |
||||||
|
type:this.imgType.imgTypeId, |
||||||
|
} |
||||||
|
if(params.type==0){ |
||||||
|
delete params.type; |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中", |
||||||
|
mask:true, |
||||||
|
}) |
||||||
|
this.imgDataList = []; |
||||||
|
getBsStoreImgByList(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.imgDataList = res.return_data; |
||||||
|
// console.log(res.return_data) |
||||||
|
|
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
previewImage(img){ |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, |
||||||
|
indicator: "number", |
||||||
|
loop: "true", |
||||||
|
urls:[img] |
||||||
|
}) |
||||||
|
}, |
||||||
|
getItem(data) { |
||||||
|
console.log(data) |
||||||
|
if (data.id == 0) { |
||||||
|
this.imgType.imgTypeText = "图片类型"; |
||||||
|
this.imgType.imgTypeId = data.id; |
||||||
|
}else{ |
||||||
|
this.imgType.imgTypeText = data.text; |
||||||
|
this.imgType.imgTypeId = data.id; |
||||||
|
} |
||||||
|
this.getBsStoreImgByList(); |
||||||
|
this.imgSelectList = []; |
||||||
|
|
||||||
|
}, |
||||||
|
/* 点击去新增页面 */ |
||||||
|
clickToAdd(){ |
||||||
|
let that = this; |
||||||
|
uni.navigateTo({ |
||||||
|
url:"./storeImgAdd?storeId="+that.storeId |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 点击删除 */ |
||||||
|
clickToDelete(){ |
||||||
|
if(this.imgSelectList.length==0){ |
||||||
|
uni.showToast({ |
||||||
|
icon:'none', |
||||||
|
title:"请勾选想要删除的图片" |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
let _this = this; |
||||||
|
uni.showModal({ |
||||||
|
title: '提示', |
||||||
|
content: '确定要删除选中的这些图片吗?', |
||||||
|
success: function(res) { |
||||||
|
if (res.confirm) { |
||||||
|
let params={ |
||||||
|
id:_this.imgSelectList.join(",") |
||||||
|
} |
||||||
|
deleteStoreImg(params).then(res=>{ |
||||||
|
let title ; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
}else{ |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
_this.imgSelectList =[]; |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000, |
||||||
|
}) |
||||||
|
setTimeout(()=>{ |
||||||
|
_this.getBsStoreImgByList() |
||||||
|
},2000) |
||||||
|
}) |
||||||
|
|
||||||
|
} else if (res.cancel) { |
||||||
|
|
||||||
|
// console.log('用户点击取消'); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
// checkChange |
||||||
|
checkClick(e) { |
||||||
|
this.imgSelectList = e.detail.value; |
||||||
|
console.log(this.imgSelectList,"this.imgSelectList") |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.width60 { |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
.alin-stretch { |
||||||
|
align-self: stretch; |
||||||
|
} |
||||||
|
|
||||||
|
.btns { |
||||||
|
width: 21%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 12px; |
||||||
|
padding: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.bgRed { |
||||||
|
background-color: red; |
||||||
|
} |
||||||
|
.fcRed{ |
||||||
|
color: red; |
||||||
|
} |
||||||
|
// 箭头 |
||||||
|
|
||||||
|
.down{ |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
display: inline-block; |
||||||
|
border: solid black; |
||||||
|
border-width: 0 1px 1px 0; |
||||||
|
padding: 4px; |
||||||
|
margin-left: 10px; |
||||||
|
vertical-align: 3px; |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.up{ |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
display: inline-block; |
||||||
|
border: solid black; |
||||||
|
border-width: 0 2px 2px 0; |
||||||
|
padding: 4px; |
||||||
|
margin-left: 10px; |
||||||
|
// vertical-align: 3px; |
||||||
|
transform: rotate(225deg); |
||||||
|
} |
||||||
|
} |
||||||
|
//checkbox |
||||||
|
.checkContainer{ |
||||||
|
width: 40px; |
||||||
|
// height: 200rpx; |
||||||
|
// line-height: 200rpx; |
||||||
|
// padding-left: 10px; |
||||||
|
} |
||||||
|
.checkFlex{ |
||||||
|
flex: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,334 @@ |
|||||||
|
<template> |
||||||
|
<view class="all-container pd-main font15" style="padding-bottom: 60px;"> |
||||||
|
<view class="username"> |
||||||
|
<view class="namecont font16">图片类型</view> |
||||||
|
<picker mode="selector" style="width: 70%;" :range="imgTypeList" range-key="text" |
||||||
|
@change="bindImgType"> |
||||||
|
<view class=" text1 marRight10 font14" v-if="imgType"> |
||||||
|
{{imgName}} |
||||||
|
</view> |
||||||
|
<view class=" text1 marRight10 fcor999 font14" v-else> |
||||||
|
请选择图片类型 |
||||||
|
</view> |
||||||
|
</picker> |
||||||
|
<image src="/static/img/jtg.png" mode="widthFix" class="iconw"></image> |
||||||
|
</view> |
||||||
|
<view> |
||||||
|
<view class="imageUploadContainer"> |
||||||
|
<view class="imageUploadList"> |
||||||
|
<view class="imageItem" v-for="(item,index) in imgValue" :key="index"> |
||||||
|
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)" :data-index="index"></image> |
||||||
|
<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view> |
||||||
|
</view> |
||||||
|
<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="footer-btn"> |
||||||
|
<button class="backcor89 fcorfff" @click="clickToSave">保存</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import {insertStoreImg} from '@/Utils/groupBuying.js' |
||||||
|
|
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
reqUrl: app.globalData.url, //请求地址 |
||||||
|
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||||
|
imgTypeList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
text: '菜品', |
||||||
|
}, { |
||||||
|
id: 2, |
||||||
|
text: '环境', |
||||||
|
},{ |
||||||
|
id:3, |
||||||
|
text:'菜单' |
||||||
|
} |
||||||
|
], //图片类型 |
||||||
|
imgType: '', //" 1：菜品 2：环境，3：菜单", |
||||||
|
imgName: '', //1：菜品 2：环境，3：菜单", |
||||||
|
/* ================== */ |
||||||
|
imgValue:[], |
||||||
|
merId:'', |
||||||
|
storeId:'', |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed:{ |
||||||
|
isShowDel(){ |
||||||
|
return true |
||||||
|
}, |
||||||
|
isShowAdd(){ |
||||||
|
if(this.imgValue.length>=1){ |
||||||
|
return false |
||||||
|
}else{ |
||||||
|
return true |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
onLoad(options){ |
||||||
|
if(options.storeId){ |
||||||
|
this.storeId = options.storeId; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
/* 点击保存 */ |
||||||
|
clickToSave(){ |
||||||
|
if(!this.imgType){ |
||||||
|
uni.showToast({ |
||||||
|
icon:'none', |
||||||
|
title:"请选择图片类型" |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
if(this.imgValue.length==0){ |
||||||
|
uni.showToast({ |
||||||
|
icon:'none', |
||||||
|
title:"请选择图片" |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
this.insertStoreImg(); |
||||||
|
|
||||||
|
}, |
||||||
|
insertStoreImg(){ |
||||||
|
let params={ |
||||||
|
img:this.imgValue.join(","), |
||||||
|
storeId:this.storeId, |
||||||
|
type:this.imgType, |
||||||
|
}; |
||||||
|
console.log(params,"params") |
||||||
|
|
||||||
|
insertStoreImg(params).then(res=>{ |
||||||
|
let title ; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
}else{ |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack(); |
||||||
|
},2000) |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除 |
||||||
|
deleteImage(data){ |
||||||
|
let arr = this.imgValue.filter((item)=>item!=data); |
||||||
|
this.imgValue = arr; |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
previewImage(img){ |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, |
||||||
|
indicator: "number", |
||||||
|
loop: "true", |
||||||
|
urls:[img] |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* ====== */ |
||||||
|
//图片类型 |
||||||
|
bindImgType(e) { |
||||||
|
this.imgType = this.imgTypeList[e.target.value].id; |
||||||
|
this.imgName = this.imgTypeList[e.target.value].text; |
||||||
|
}, |
||||||
|
//上传图片 |
||||||
|
upload() { |
||||||
|
let that = this; |
||||||
|
uni.chooseImage({ |
||||||
|
count: 1, |
||||||
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||||
|
sourceType: ['camera', 'album'], |
||||||
|
success: function(res) { |
||||||
|
const tempFilePaths = res.tempFilePaths; |
||||||
|
that.uploadFile(tempFilePaths[0]); |
||||||
|
}, |
||||||
|
error: function(e) { |
||||||
|
console.log(e); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//上传 |
||||||
|
uploadFile(imgURL) { |
||||||
|
const that = this; |
||||||
|
uni.uploadFile({ |
||||||
|
url: that.reqUrl + '/fileUpload/uploadfile', |
||||||
|
filePath: imgURL, |
||||||
|
header: { |
||||||
|
"Authorization": app.globalData.token |
||||||
|
}, |
||||||
|
name: 'files', |
||||||
|
success: function(uploadFileRes) { |
||||||
|
that.getImgSignedUrl(JSON.parse(uploadFileRes.data) |
||||||
|
.return_data); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//查看临时图片路径 |
||||||
|
getImgSignedUrl( item1) { |
||||||
|
this.imgValue.push(item1); |
||||||
|
console.log(this.imgValue,"this.imgValue") |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.username{ |
||||||
|
width: calc(100% - 90upx); |
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background-color: rgba($color: #ffffff, $alpha: 0.1); |
||||||
|
border-bottom: 1px solid #f6f6f6; |
||||||
|
padding: 8upx 45upx; |
||||||
|
|
||||||
|
input { |
||||||
|
width: 50%; |
||||||
|
height: 50upx; |
||||||
|
font-size: 16px; |
||||||
|
color: #333333; |
||||||
|
font-weight: blod; |
||||||
|
} |
||||||
|
|
||||||
|
.get-code { |
||||||
|
position: absolute; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
right: 7px; |
||||||
|
z-index: 3; |
||||||
|
border: 1px solid #bfbfbf; |
||||||
|
width: 25%; |
||||||
|
padding: 3px 5px; |
||||||
|
border-radius: 22px; |
||||||
|
|
||||||
|
&:after { |
||||||
|
content: " "; |
||||||
|
width: 1upx; |
||||||
|
height: 50upx; |
||||||
|
position: absolute; |
||||||
|
z-index: 3; |
||||||
|
margin-right: 100%; |
||||||
|
left: 0; |
||||||
|
top: 20upx; |
||||||
|
} |
||||||
|
} |
||||||
|
.namecont { |
||||||
|
color: #666666; |
||||||
|
width: 28%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 图片 */ |
||||||
|
.imageUploadContainer{ |
||||||
|
padding: 10upx 5upx; |
||||||
|
margin: 10upx 5upx; |
||||||
|
} |
||||||
|
.name{ |
||||||
|
text-align: center; |
||||||
|
margin-top:-30upx; |
||||||
|
} |
||||||
|
.dragging{ |
||||||
|
transform: scale(1.2) |
||||||
|
} |
||||||
|
|
||||||
|
.imageUploadList{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.imageItem, .imageUpload{ |
||||||
|
width: 200upx; |
||||||
|
height: 200upx; |
||||||
|
margin: 30upx 15upx 30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageDel{ |
||||||
|
position: relative; |
||||||
|
left: 180upx; |
||||||
|
bottom: 225upx; |
||||||
|
background-color: rgba(0,0,0,0.5); |
||||||
|
width: 36upx; |
||||||
|
text-align: center; |
||||||
|
line-height: 35upx; |
||||||
|
border-radius: 17upx; |
||||||
|
color: white; |
||||||
|
font-size: 30upx; |
||||||
|
padding-bottom: 2upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageItem image, .moveImage{ |
||||||
|
width: 200upx; |
||||||
|
height: 200upx; |
||||||
|
border-radius: 8upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageUpload{ |
||||||
|
line-height: 200upx; |
||||||
|
text-align: center; |
||||||
|
font-size: 150upx; |
||||||
|
color: #D9D9D9; |
||||||
|
border: 1px solid #D9D9D9; |
||||||
|
border-radius: 8upx; |
||||||
|
} |
||||||
|
|
||||||
|
.moveImage{ |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.uni-list { |
||||||
|
width: 260px; |
||||||
|
} |
||||||
|
.popup_foot { |
||||||
|
display: flex; |
||||||
|
border-top: 1px #F9F9F9 solid; |
||||||
|
line-height: 40px; |
||||||
|
height: 40px; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
.build_01{ |
||||||
|
line-height: 35px; |
||||||
|
} |
||||||
|
.build_01 input{ |
||||||
|
background: #ededed; |
||||||
|
} |
||||||
|
.popup_foot_l { |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.popup_foot_r { |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
border-left: 1px #F9F9F9 solid; |
||||||
|
color: #5095D3; |
||||||
|
} |
||||||
|
|
||||||
|
/* 底部按钮 */ |
||||||
|
.footer-btn{ |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
button{ |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,268 @@ |
|||||||
|
<template> |
||||||
|
<!-- backcorfff backcor6--> |
||||||
|
<view class="all-container pd-main backcor6 font15"> |
||||||
|
<view class=" width100 mart10"> |
||||||
|
<button class="btns " @click.stop="clickToAdd()">新增</button> |
||||||
|
</view> |
||||||
|
<view class="mart20 backcorfff"> |
||||||
|
<view class="dis-flex height40 bor-botm1"> |
||||||
|
<view class="flex-1 fotct fontwig6 " ></view> |
||||||
|
<view class="flex-1 fotct fontwig6">名称</view> |
||||||
|
<view class="flex-1 fotct fontwig6">价格</view> |
||||||
|
<!-- <view class="flex-1 fotct fontwig6">规格</view> --> |
||||||
|
<view class="flex-1 fotct fontwig6">售卖数量</view> |
||||||
|
<view class="flex-1 fotct fontwig6">操作</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="dis-flex bor-botm1 paddtop5 paddbotm5 " v-for="(item,index) in productList" @click="cilckToShowDetail(item)" :key="index"> |
||||||
|
<view class="flex-1 fotct"> |
||||||
|
<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct text1">{{item.name}}</view> |
||||||
|
<view class="flex-1 fotct">{{item.price}}</view> |
||||||
|
<!-- <view class="flex-1 fotct text1">{{item.spec}}</view> --> |
||||||
|
<view class="flex-1 fotct">{{item.saleCount}}</view> |
||||||
|
<view class="flex-1 fotct fcor41c" @click.stop="clickToEdit(item)">编辑</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="500" width="500" :scrollY="true" |
||||||
|
radius="6" :showCloseIcon="true"> |
||||||
|
<view class="pop-contain pd-main"> |
||||||
|
<view class="pop-title fontwig6"><text>详情</text></view> |
||||||
|
|
||||||
|
<view class="dis-flex flex-wrap" v-if="productDetail"> |
||||||
|
<view class="width100 dis-flex bor-botm1"> |
||||||
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">名称</view> |
||||||
|
<view class="flex-1 fotct ">{{productDetail.name}}</view> |
||||||
|
</view> |
||||||
|
<view class="width100 dis-flex bor-botm1"> |
||||||
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">价格</view> |
||||||
|
<view class="flex-1 fotct ">{{productDetail.price}}</view> |
||||||
|
</view> |
||||||
|
<view class="width100 dis-flex bor-botm1"> |
||||||
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">规格</view> |
||||||
|
<view class="flex-1 fotct ">{{productDetail.spec}}</view> |
||||||
|
</view> |
||||||
|
<view class="width100 dis-flex bor-botm1"> |
||||||
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">售卖数量</view> |
||||||
|
<view class="flex-1 fotct ">{{productDetail.saleCount}}</view> |
||||||
|
</view> |
||||||
|
<view class="width100 dis-flex "> |
||||||
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight80">图片</view> |
||||||
|
<view class="flex-1 fotct "> |
||||||
|
<image :src="imgUrl+productDetail.img" @click.stop="previewImage(imgUrl+productDetail.img)" mode="aspectFit" class="width100 height60 verc"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
</wybPopup> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
|
||||||
|
import {getStoreProductByList,getStoreProductById |
||||||
|
} from '@/Utils/groupBuying.js'; |
||||||
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue' |
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||||
|
storeId:"",//门店id |
||||||
|
productList:[], |
||||||
|
productDetail:null, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onLoad(options){ |
||||||
|
if(options.storeId){ |
||||||
|
this.storeId = options.storeId; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
onShow(){ |
||||||
|
this.getStoreProductByList(); |
||||||
|
}, |
||||||
|
components:{ |
||||||
|
wybPopup |
||||||
|
}, |
||||||
|
filters:{ |
||||||
|
/* filterType(type){ |
||||||
|
switch (type) { |
||||||
|
case 1: |
||||||
|
return "菜品"; |
||||||
|
case 2: |
||||||
|
return "环境"; |
||||||
|
case 3: |
||||||
|
return "菜单"; |
||||||
|
|
||||||
|
default: |
||||||
|
return "未知"; |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
filterStatus(value){ |
||||||
|
switch (value) { |
||||||
|
case 1: |
||||||
|
return "正常"; |
||||||
|
case 0: |
||||||
|
return "失败"; |
||||||
|
default: |
||||||
|
return "未知"; |
||||||
|
} |
||||||
|
} */ |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/* 获取列表 */ |
||||||
|
getStoreProductByList(){ |
||||||
|
let params={ |
||||||
|
storeId:this.storeId, |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中", |
||||||
|
mask:true, |
||||||
|
}) |
||||||
|
getStoreProductByList(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.productList = res.return_data; |
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 点击行显示详情 */ |
||||||
|
cilckToShowDetail(data){ |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中", |
||||||
|
}) |
||||||
|
let params={ |
||||||
|
id:data.id |
||||||
|
} |
||||||
|
getStoreProductById(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.$refs.popup.show(); |
||||||
|
this.productDetail =res.return_data; |
||||||
|
|
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
hide(){ |
||||||
|
this.productDetail=null; |
||||||
|
}, |
||||||
|
|
||||||
|
// 预览 |
||||||
|
previewImage(img){ |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, |
||||||
|
indicator: "number", |
||||||
|
loop: "true", |
||||||
|
urls:[img] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
/* 点击去新增页面 */ |
||||||
|
clickToAdd(){ |
||||||
|
let that = this; |
||||||
|
uni.navigateTo({ |
||||||
|
url:"./storeProductAdd?status=1&storeId="+that.storeId |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 点击去编辑 */ |
||||||
|
clickToEdit(data){ |
||||||
|
let that = this; |
||||||
|
uni.navigateTo({ |
||||||
|
url:"./storeProductAdd?status=2&storeId="+that.storeId+"&id="+data.id |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.width60 { |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
.alin-stretch { |
||||||
|
align-self: stretch; |
||||||
|
} |
||||||
|
|
||||||
|
.btns { |
||||||
|
width: 21%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 12px; |
||||||
|
padding: 0px; |
||||||
|
margin: 0 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.bgRed { |
||||||
|
background-color: red; |
||||||
|
} |
||||||
|
.fcRed{ |
||||||
|
color: red; |
||||||
|
} |
||||||
|
|
||||||
|
/* 弹窗 */ |
||||||
|
.pop-contain { |
||||||
|
text-align: center; |
||||||
|
padding-top: 50px; |
||||||
|
background-color: #ffffff; |
||||||
|
|
||||||
|
.pop-title { |
||||||
|
text-align: center; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 18px; |
||||||
|
position: fixed; |
||||||
|
z-index: 10; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
background: #ffffff; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.flex-wrap{ |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.titleWidth{ |
||||||
|
width: 80px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.minheight40{ |
||||||
|
padding: 15px 0; |
||||||
|
} |
||||||
|
.minheight80{ |
||||||
|
min-height: 80px; |
||||||
|
line-height: 80px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,389 @@ |
|||||||
|
<template> |
||||||
|
<view class="all-container pd-main font18 backcor6" style="padding-bottom: 60px;"> |
||||||
|
<view class="form-gorup backcorfff"> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">名称: |
||||||
|
</view> |
||||||
|
<input type="text" name="name" v-model.trim="productData.name" placeholder-class="corf6" |
||||||
|
class=" flex-1 " placeholder="请输入名称"> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">价格: |
||||||
|
</view> |
||||||
|
<input type="digit" name="name" v-model.trim="productData.price" placeholder-class="corf6" |
||||||
|
class=" flex-1 " placeholder="请输入价格(保留两位小数)"> |
||||||
|
</view> |
||||||
|
<view class="dis-flex marb10 bor-botm1"> |
||||||
|
<view class=" marRight10 fontwig6 padleft15 paddtright10">规格: |
||||||
|
</view> |
||||||
|
<input type="text" name="name" v-model.trim="productData.spec" placeholder-class="corf6" |
||||||
|
class=" flex-1 " placeholder="请输入规格"> |
||||||
|
</view> |
||||||
|
<view class="imageUploadContainer"> |
||||||
|
<view class="imageUploadList"> |
||||||
|
<view class="imageItem" v-for="(item,index) in imgValue" :key="index"> |
||||||
|
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(imgUrl+item)" :data-index="index"></image> |
||||||
|
<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view> |
||||||
|
</view> |
||||||
|
<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="footer-btn"> |
||||||
|
<button class="backcor89 fcorfff" @click="clickToSave">保存</button> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {insertStoreProduct,getStoreProductById,editStoreProduct} from '@/Utils/groupBuying.js' |
||||||
|
|
||||||
|
const app = getApp(); |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
reqUrl: app.globalData.url, //请求地址 |
||||||
|
imgUrl: app.globalData.imgUrl, //图片访问地址 |
||||||
|
status:'',//1.新增 2.编辑 |
||||||
|
productData:{ |
||||||
|
name:'',//名称 |
||||||
|
price:'',//价格 |
||||||
|
spec:'',//规格 |
||||||
|
storeId:'',//门店id |
||||||
|
img:'',//图片 |
||||||
|
|
||||||
|
}, |
||||||
|
imgValue:[],//图片 |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed:{ |
||||||
|
isShowDel(){ |
||||||
|
return true |
||||||
|
}, |
||||||
|
isShowAdd(){ |
||||||
|
if(this.imgValue.length>=1){ |
||||||
|
return false |
||||||
|
}else{ |
||||||
|
return true |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
this.productData.storeId = option.storeId; |
||||||
|
this.status=option.status; |
||||||
|
if(this.status==1){ |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title:"添加产品" |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title:"编辑产品" |
||||||
|
}) |
||||||
|
} |
||||||
|
if(option.id){ |
||||||
|
this.productData.id =option.id; |
||||||
|
this.getStoreProductById() |
||||||
|
} |
||||||
|
console.log(option,"=======") |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
|
||||||
|
clickToSave(){ |
||||||
|
|
||||||
|
if(!this.validate()) return; |
||||||
|
|
||||||
|
this.productData.img = this.imgValue.join(""); |
||||||
|
|
||||||
|
if(this.status==1){//1.新增 2.编辑 |
||||||
|
this.insertStoreProduct() |
||||||
|
return |
||||||
|
} |
||||||
|
if(this.status==2){ |
||||||
|
this.editStoreProduct() |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
/* 根据id查询详情 */ |
||||||
|
getStoreProductById(){ |
||||||
|
uni.showLoading({ |
||||||
|
title:"加载中", |
||||||
|
}) |
||||||
|
let that =this; |
||||||
|
let params={ |
||||||
|
id:that.productData.id |
||||||
|
} |
||||||
|
getStoreProductById(params).then(res=>{ |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
console.log(res.return_data) ; |
||||||
|
this.productData.name = res.return_data.name; |
||||||
|
this.productData.price = res.return_data.price; |
||||||
|
this.productData.spec = res.return_data.spec; |
||||||
|
this.productData.img = res.return_data.img; |
||||||
|
this.imgValue.push(res.return_data.img); |
||||||
|
}else{ |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 增加 */ |
||||||
|
insertStoreProduct(){ |
||||||
|
insertStoreProduct(this.productData).then(res=>{ |
||||||
|
let title ; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
}else{ |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack(); |
||||||
|
},1000) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 修改 */ |
||||||
|
editStoreProduct(){ |
||||||
|
editStoreProduct(this.productData).then(res=>{ |
||||||
|
let title ; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
}else{ |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack(); |
||||||
|
},1000) |
||||||
|
}) |
||||||
|
}, |
||||||
|
validate(){ |
||||||
|
var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/; |
||||||
|
if(!reg.test(this.productData.price)||this.productData.price==0){ |
||||||
|
uni.showToast({ |
||||||
|
title:"请输入正确的金额格式", |
||||||
|
icon:"none" |
||||||
|
}) |
||||||
|
this.productData.price=""; |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
if(!this.productData.name||!this.productData.price||!this.productData.spec){ |
||||||
|
uni.showToast({ |
||||||
|
title:"请填写完整哦!", |
||||||
|
icon:"none" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
if(this.imgValue.length==0){ |
||||||
|
uni.showToast({ |
||||||
|
title:"请选择图片上传", |
||||||
|
icon:"none" |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除图片 |
||||||
|
deleteImage(data){ |
||||||
|
let arr = this.imgValue.filter((item)=>item!=data); |
||||||
|
this.imgValue = arr; |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
previewImage(img){ |
||||||
|
uni.previewImage({ |
||||||
|
current: 0, |
||||||
|
indicator: "number", |
||||||
|
loop: "true", |
||||||
|
urls:[img] |
||||||
|
}) |
||||||
|
}, |
||||||
|
//上传图片 |
||||||
|
upload() { |
||||||
|
let that = this; |
||||||
|
uni.chooseImage({ |
||||||
|
count: 1, |
||||||
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||||
|
sourceType: ['camera', 'album'], |
||||||
|
success: function(res) { |
||||||
|
const tempFilePaths = res.tempFilePaths; |
||||||
|
that.uploadFile(tempFilePaths[0]); |
||||||
|
}, |
||||||
|
error: function(e) { |
||||||
|
console.log(e); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//上传 |
||||||
|
uploadFile(imgURL) { |
||||||
|
const that = this; |
||||||
|
uni.uploadFile({ |
||||||
|
url: that.reqUrl + '/fileUpload/uploadfile', |
||||||
|
filePath: imgURL, |
||||||
|
header: { |
||||||
|
"Authorization": app.globalData.token |
||||||
|
}, |
||||||
|
name: 'files', |
||||||
|
success: function(uploadFileRes) { |
||||||
|
that.getImgSignedUrl(JSON.parse(uploadFileRes.data) |
||||||
|
.return_data); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//查看临时图片路径 |
||||||
|
getImgSignedUrl( item1) { |
||||||
|
this.imgValue.push(item1); |
||||||
|
console.log(this.imgValue,"this.imgValue") |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 表单 */ |
||||||
|
.form-gorup { |
||||||
|
padding: 20rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
input { |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
border-radius: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
.form-gorup-title { |
||||||
|
padding: 20rpx 0; |
||||||
|
margin-bottom: 5rpx; |
||||||
|
font-weight: 500; |
||||||
|
|
||||||
|
width: 74px; |
||||||
|
white-space: nowrap; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
/* 图片 */ |
||||||
|
.imageUploadContainer{ |
||||||
|
padding: 10upx 5upx; |
||||||
|
margin: 10upx 5upx; |
||||||
|
} |
||||||
|
.name{ |
||||||
|
text-align: center; |
||||||
|
margin-top:-30upx; |
||||||
|
} |
||||||
|
.dragging{ |
||||||
|
transform: scale(1.2) |
||||||
|
} |
||||||
|
|
||||||
|
.imageUploadList{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.imageItem, .imageUpload{ |
||||||
|
width: 200upx; |
||||||
|
height: 200upx; |
||||||
|
margin: 30upx 15upx 30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageDel{ |
||||||
|
position: relative; |
||||||
|
left: 180upx; |
||||||
|
bottom: 225upx; |
||||||
|
background-color: rgba(0,0,0,0.5); |
||||||
|
width: 36upx; |
||||||
|
text-align: center; |
||||||
|
line-height: 35upx; |
||||||
|
border-radius: 17upx; |
||||||
|
color: white; |
||||||
|
font-size: 30upx; |
||||||
|
padding-bottom: 2upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageItem image, .moveImage{ |
||||||
|
width: 200upx; |
||||||
|
height: 200upx; |
||||||
|
border-radius: 8upx; |
||||||
|
} |
||||||
|
|
||||||
|
.imageUpload{ |
||||||
|
line-height: 200upx; |
||||||
|
text-align: center; |
||||||
|
font-size: 150upx; |
||||||
|
color: #D9D9D9; |
||||||
|
border: 1px solid #D9D9D9; |
||||||
|
border-radius: 8upx; |
||||||
|
} |
||||||
|
|
||||||
|
.moveImage{ |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.uni-list { |
||||||
|
width: 260px; |
||||||
|
} |
||||||
|
.popup_foot { |
||||||
|
display: flex; |
||||||
|
border-top: 1px #F9F9F9 solid; |
||||||
|
line-height: 40px; |
||||||
|
height: 40px; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
.build_01{ |
||||||
|
line-height: 35px; |
||||||
|
} |
||||||
|
.build_01 input{ |
||||||
|
background: #ededed; |
||||||
|
} |
||||||
|
.popup_foot_l { |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.popup_foot_r { |
||||||
|
width: 50%; |
||||||
|
text-align: center; |
||||||
|
border-left: 1px #F9F9F9 solid; |
||||||
|
color: #5095D3; |
||||||
|
} |
||||||
|
|
||||||
|
/* 底部按钮 */ |
||||||
|
.footer-btn{ |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
button{ |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue