czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化店铺配置

This commit is contained in:
gyq 2024-09-20 15:03:09 +08:00
parent d61c0cbb22
commit e4e99585d4
8 changed files with 687 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/shop.js
View File

@ -639,4 +639,13 @@ export function queryShopUserFlow(params) {
method: "get",
params
});
}
// 商品列表 V2
export function tbProductListV2(params) {
return request({
url: `/api/tbProduct/list/v2`,
method: "get",
params
});
}

BIN
src/assets/images/shop_editor_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

3
src/views/login.vue
View File

@ -170,7 +170,8 @@ export default {
user.password = encrypt(user.password)
this.$store.dispatch('Login', user).then(() => {
this.loading = false
this.$router.push({ path: this.redirect || '/' })
// this.$router.push({ path: this.redirect || '/' })
window.location.href = './'
}).catch(() => {
this.loading = false
this.getCode()

42
src/views/product/index.vue
View File

@ -56,18 +56,27 @@
</template>
</el-table-column>
<el-table-column label="商品规格" prop="typeEnum">
</el-table-column>
<el-table-column label="销量/库存">
<el-table-column label="库存">
<template v-slot="scope">
<span>{{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}</span>
<span>{{ scope.row.stockNumber }}</span>
</template>
</el-table-column>
<el-table-column label="耗材信息">
<template v-slot="scope">
<div v-if="scope.row.conInfos.length">{{ scope.row.conInfos.join(',') }}</div>
<el-button type="text" icon="el-icon-edit" v-else>绑定</el-button>
</template>
</el-table-column>
<el-table-column label="上架区域">
<template v-slot="scope">
<div v-if="scope.row.isShowCash">收银端</div>
<div v-if="scope.row.isShowMall">小程序</div>
<div v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</div>
<!-- <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowCash">收银端</el-button>
<el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowMall">小程序</el-button>
<el-button type="text" icon="el-icon-edit"
v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</el-button> -->
<el-switch v-model="scope.row.isGrounding" :active-value="1" :inactive-value="0"
@change="changeHot($event, scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" sortable />
@ -98,8 +107,9 @@
</el-table>
</div>
<div class="head-container">
<el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
<el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
:page-size="tableData.size" @current-change="paginationChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</div>
</template>
@ -108,7 +118,7 @@
import Sortable from 'sortablejs'
import dayjs from 'dayjs'
import settings from '@/settings'
import { tbProduct, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort } from '@/api/shop'
import { tbProductListV2, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort } from '@/api/shop'
export default {
data() {
return {
@ -131,7 +141,7 @@ export default {
}
},
async mounted() {
console.log(this.$route.query.productId,'tiaoshi1')
console.log(this.$route.query.productId, 'tiaoshi1')
if (this.$route.query.productId) {
this.query.productId = this.$route.query.productId
}
@ -212,14 +222,14 @@ export default {
}
this.tableData.loading = true
console.log(this.query,'调试2')
const res = await tbProduct({
console.log(this.query, '调试2')
const res = await tbProductListV2({
page: this.tableData.page,
size: this.tableData.size,
name: this.query.name,
categoryId: this.query.categoryId,
id: this.query.productId,
typeEnum: this.query.typeEnum,
type: this.query.typeEnum,
shopId: localStorage.getItem('shopId')
})
this.tableData.loading = false
@ -230,9 +240,9 @@ export default {
}
},
handleSizeChange(val) {
this.tableData.size = val
this.getTableData()
},
this.tableData.size = val
this.getTableData()
},
// 获取商品分类列表
async tbShopCategoryGet() {
try {

30
src/views/shop/components/collectMoneyCode.vue
View File

@ -2,18 +2,18 @@
<div v-loading="pageLoading">
<el-form :model="form" label-position="top">
<el-form-item label="门店收款码">
<el-image :src="form.paymentQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
style="width: 227px;height: 227px;"></el-image>
<canvas ref="canvas" id="QRCode_header" style="width: 227px;height: 227px;"></canvas>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码</el-button>
<el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码样式</el-button>
<!-- <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码样式</el-button> -->
</el-form-item>
</el-form>
</div>
</template>
<script>
import QRCode from 'qrcode'
import { tbShopInfo, tbShopInfoPut } from "@/api/user";
export default {
data() {
@ -30,7 +30,25 @@ export default {
methods: {
// 下载图片
downloadImgHandle(url) {
if (url) window.open(url, '_blank')
if (url) {
this.saveCanvasAsImage(this.$refs.canvas, 'pay_code')
}
},
saveCanvasAsImage(canvas, filename) {
// 获取canvas的数据URL
const dataURL = canvas.toDataURL('image/png');
// 创建一个a标签用于下载
const downloadLink = document.createElement('a');
downloadLink.href = dataURL;
downloadLink.download = filename;
document.body.appendChild(downloadLink);
// 触发下载
downloadLink.click();
// 清理临时元素
document.body.removeChild(downloadLink);
},
// 获取店铺详情
async tbShopInfo() {
@ -40,6 +58,10 @@ export default {
const res = await tbShopInfo(shopId);
this.pageLoading = false
this.form.paymentQrcode = res.paymentQrcode;
QRCode.toCanvas(this.$refs.canvas, this.form.paymentQrcode, function (error) {
console.log(error);
})
} catch (error) {
console.log(error);
}

10
src/views/shop/components/extend.vue
View File

@ -55,7 +55,6 @@
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
@ -93,9 +92,7 @@ export default {
}
},
methods: {
handleBeforeRemove(file, fileList) {
},
handleBeforeRemove(file, fileList) {},
async edit(item) {
this.title = '编辑'
this.showLocation = true
@ -110,7 +107,6 @@ export default {
type: 'success'
})
this.getList()
},
// 刷新列表数据
async doSubmit() {
@ -123,7 +119,6 @@ export default {
message: '添加成功',
type: 'success'
})
} else {
let res = await edittbShopExtend({
...this.form,
@ -146,7 +141,6 @@ export default {
this.form.value = response.data[0]
console.log("上传成功", this.form);
},
async getList() {
let res = await tbShopExtend({
shopId: localStorage.getItem('shopId')
@ -162,7 +156,7 @@ export default {
this.imageUrl = ''
this.showLocation = true
},
addtbShopExtend() { }
addtbShopExtend() {}
}
}
</script>

617
src/views/shop/components/fitment.vue Normal file
View File

@ -0,0 +1,617 @@
<template>
<div>
<el-radio-group v-model="tableActive" @change="selectItemChange">
<el-radio-button :label="item.autokey" v-for="item in tableData" :key="item.autokey">
{{ item.title }}
</el-radio-button>
</el-radio-group>
<div class="form">
<div class="preview_wrap">
<div class="phone_wrap">
<div class="index_bg" v-if="tableActive == 'index_bg'">
<img class="bg" :src="selectItem.value">
<div class="menu_wrap">
<div class="menu_wrap_div">
<div class="left">
<div class="icon_wrap">
<i class="icon el-icon-coffee"></i>
</div>
<div class="info">
<div class="t1">点餐</div>
<div class="t2">在线点不排队</div>
</div>
</div>
<div class="right">
<div class="btn">
<i class="icon el-icon-postcard"></i>
<div class="info">
<div class="t1">会员</div>
<div class="t2">入会享权益</div>
</div>
</div>
<div class="btn">
<i class="icon el-icon-wallet"></i>
<div class="info">
<div class="t1">充值</div>
<div class="t2">充值享更多优惠</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my_bg" v-if="tableActive == 'my_bg'">
<img class="bg" :src="selectItem.value">
<div class="content">
<div class="item" style="display: flex;">
<div class="left">
<div class="avatar">
<i class="icon el-icon-s-custom"></i>
</div>
<span>微信用户</span>
</div>
<div class="ewm">
<i class="icon el-icon-menu"></i>
</div>
</div>
<div class="item">
<div class="title" style="padding-bottom: 10px;">我的资产</div>
<div class="flex">
<div class="btn">
<i class="icon el-icon-s-finance"></i>
<span class="name">储值</span>
<span class="num">**</span>
</div>
<div class="btn">
<i class="icon el-icon-s-ticket"></i>
<span class="name">优惠券</span>
<span class="num">**</span>
</div>
</div>
</div>
<div class="item">
<div class="title" style="padding-bottom: 10px;">我的功能</div>
<div class="row">
<div class="left">
<i class="icon el-icon-s-ticket"></i>
<div class="label">我的优惠券</div>
</div>
<i class="arrow el-icon-arrow-right"></i>
</div>
<div class="row">
<div class="left">
<i class="icon el-icon-s-order"></i>
<div class="label">我的订单</div>
</div>
<i class="arrow el-icon-arrow-right"></i>
</div>
<div class="row">
<div class="left">
<i class="icon el-icon-user-solid"></i>
<div class="label">个人资料</div>
</div>
<i class="arrow el-icon-arrow-right"></i>
</div>
<div class="row">
<div class="left">
<i class="icon el-icon-s-management"></i>
<div class="label">我的会员卡</div>
</div>
<i class="arrow el-icon-arrow-right"></i>
</div>
</div>
</div>
</div>
<div class="member_bg" v-if="tableActive == 'member_bg'">
<div class="card_wrap">
<div class="card">
<img class="bg" :src="selectItem.value">
<div class="content">
<div class="ewm">
<i class="icon el-icon-menu"></i>
</div>
<div class="title">{{ shopName }}会员卡 Lv.1</div>
<div class="tips">
<span>欢迎加入本店会员</span>
<span>查看特权</span>
</div>
<div class="btm">
<div class="item">
<span>0.00</span>
<span>储值</span>
</div>
<div class="item">
<span>0</span>
<span>积分</span>
</div>
<div class="item">
<span>0</span>
<span>优惠券</span>
</div>
<div class="item">
<span>0</span>
<span>权益卡</span>
</div>
</div>
</div>
</div>
<div class="info_wrap">
<div class="avatar">
<i class="icon el-icon-user"></i>
</div>
<div class="info">
<div class="t1">感谢你2天陪伴</div>
<div class="t2">您今天的幸运词： <span>林波微步</span> </div>
</div>
</div>
</div>
</div>
<div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
<img class="bg" :src="selectItem.value">
<div class="shop_name">{{ shopName }}</div>
<img class="content" src="@/assets/images/shop_editor_bg.png" alt="">
</div>
</div>
</div>
<div class="editor_wrap">
<div class="header" style="padding-bottom: 20px;">
<div class="t1">
{{ selectItem.name }}
</div>
<div class="t2">注：点击图片更换</div>
</div>
<div class="form_item">
<el-upload :headers="headers" class="avatar-uploader" :action="qiNiuUploadApi"
:show-file-list="false" :on-success="handleSuccess">
<img v-if="selectItem.value" :src="selectItem.value" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- <div class="title" style="padding-left: 20px;">跳转路径</div>
<el-input style="width: 300px;margin-left: 20px;" />
<el-button type="primary" style="margin-left: 20px;">修改</el-button> -->
</div>
</div>
</div>
</div>
</template>
<script>
import { tbShopExtend, addtbShopExtend, deletetbShopExtend, querytbShopExtend, edittbShopExtend } from '@/api/extend.js'
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["qiNiuUploadApi"])
},
data() {
return {
tableActive: 'index_bg',
tableData: [],
selectItem: {},
headers: {
Authorization: getToken()
},
imageUrl: '',
shopName: localStorage.getItem('shopName')
}
},
mounted() {
this.getList()
},
methods: {
// 刷新列表数据
async doSubmit() {
await edittbShopExtend({
...this.selectItem,
})
this.$message({
message: '编辑成功',
type: 'success'
})
this.getList()
},
handleSuccess(response, file, fileList) {
this.selectItem.value = response.data[0];
console.log("上传成功", this.form);
this.doSubmit()
},
// 切换类型
selectItemChange(key) {
this.selectItem = { ...this.tableData.find(item => item.autokey == key) }
},
// 获取装修数据
async getList() {
try {
let res = await tbShopExtend({
shopId: localStorage.getItem('shopId')
})
this.tableData = res.content
this.selectItemChange(this.tableActive)
} catch (error) {
console.log(error);
}
}
}
}
</script>
<style scoped lang="scss">
.form {
display: flex;
padding-top: 30px;
.preview_wrap {
width: 317px;
.phone_wrap {
width: 100%;
height: 686px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.index_bg {
.bg {
width: 100%;
height: 500px;
object-fit: cover;
position: relative;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 10px;
.t1 {
font-size: 14px;
}
.t2 {
font-size: 10px;
color: #999;
padding-top: 4px;
}
}
.menu_wrap {
padding: 0 20px;
margin-top: -50px;
position: relative;
.menu_wrap_div {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: flex;
padding: 20px 10px;
border-radius: 10px;
background-color: #fff;
.left {
flex: 1;
display: flex;
flex-direction: column;
.icon_wrap {
display: flex;
justify-content: center;
.icon {
font-size: 34px;
}
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
border-left: 1px solid #ddd;
padding-left: 20px;
.btn {
flex: 1;
display: flex;
align-items: center;
&:last-child {
margin-top: 10px;
}
.icon {
font-size: 30px;
}
.info {
flex: 1;
padding-top: 0;
}
}
}
}
}
}
.my_bg {
background-color: #f5f5f5;
height: 100%;
.bg {
width: 100%;
height: 180px;
object-fit: cover;
position: relative;
}
.content {
padding: 0 10px;
margin-top: -40px;
position: relative;
.item {
padding: 10px;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 10px;
margin-bottom: 10px;
.left {
display: flex;
align-items: center;
.avatar {
width: 50px;
height: 50px;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
.icon {
font-size: 24px;
color: #ddd;
}
}
span {
margin-left: 10px;
}
}
.ewm {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #E3AD7F;
display: flex;
align-items: center;
justify-content: center;
.icon {
font-size: 20px;
color: #fff;
}
}
.flex {
display: flex;
.btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
.icon {
font-size: 28px;
}
.name {
font-size: 14px;
}
.num {
color: #E3AD7F;
}
}
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
.left {
display: flex;
align-items: center;
.icon {
font-size: 20px;
}
.label {
font-size: 14px;
margin-left: 10px;
}
}
.arrow {
font-size: 14px;
color: #999;
}
}
}
}
}
.member_bg {
height: 100%;
background-color: #f5f5f5;
padding: 10px;
.card_wrap {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
.card {
height: 144px;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
border-radius: 0 0 10px 10px;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 0 0 10px 10px;
color: #fff;
padding: 20px;
font-size: 14px;
.ewm {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 15px;
right: 20px;
.icon {
font-size: 16px;
color: #fff;
}
}
.title {
font-size: 16px;
}
.tips {
display: flex;
justify-content: space-between;
margin-top: 10px;
color: inherit;
}
.btm {
width: 100%;
display: flex;
position: absolute;
bottom: 20px;
left: 0;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
}
}
.info_wrap {
padding: 20px 10px;
display: flex;
align-items: center;
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
.icon {
color: #555;
font-size: 24px;
}
}
.info {
flex: 1;
padding-left: 10px;
.t1 {
font-size: 14px;
}
.t2 {
font-size: 10px;
color: #999;
padding-top: 6px;
}
}
}
}
}
.shopinfo_bg {
.bg {
width: 100%;
height: 120px;
object-fit: cover;
}
.shop_name {
padding: 10px 10px 0 10px;
}
.content {
width: 100%;
height: auto;
display: block;
}
}
}
}
.editor_wrap {
padding-left: 20px;
.header {
.t2 {
color: #999;
font-size: 12px;
margin-top: 6px;
}
}
.form_item {
display: flex;
align-items: center;
.title {
flex-shrink: 0;
}
}
}
}
</style>

8
src/views/shop/shop_configuration.vue
View File

@ -15,7 +15,7 @@
<shopSetting v-if="activeName == 2" />
<notice v-if="activeName == 3" />
<securitySetting v-if="activeName == 4" />
<extend v-if="activeName == 5" />
<Fitment v-if="activeName == 5" />
<goxcx v-if="activeName == 6" />
<notifications v-if="activeName == 7" />
<ShopMode v-if="activeName == 8" />
@ -33,6 +33,7 @@ import goxcx from './components/goxcx'
import notifications from './notifications/index.vue'
import ShopMode from './components/shopMode.vue'
import CollectMoneyCode from './components/collectMoneyCode.vue'
import Fitment from './components/fitment.vue'
export default {
components: {
shopInfo,
@ -43,11 +44,12 @@ export default {
goxcx,
notifications,
ShopMode,
CollectMoneyCode
CollectMoneyCode,
Fitment
},
data() {
return {
activeName: '1',
activeName: '5',
shopId: localStorage.getItem('shopId')
}
}