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

首页改版，增加全部操作页面，新增店铺装修页面

Browse Source
This commit is contained in:
YeMingfei666
2025-05-28 17:00:29 +08:00
parent 6cc53db443
commit bb84b49ddc
23 changed files with 1817 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

566
pages/shopSetUp/decoration.vue Normal file
View File

@@ -0,0 +1,566 @@
<template>
<view class="page-wrapper">
<view class="page-cell column">
<view class="extendList">
<view class="extendTab">
<view class="extendTab_item" v-for="(item, index) in vdata.extendList" :key="index"
:class="{ active: vdata.extendIndex == index }" @click="extendTabClick(item, index)">
{{ item.name }}
</view>
</view>
<view class="extend_content">
<view class="extend_img">
<view class="u-flex">
<!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景图片：</view> -->
<view class="extend_title">当前背景图片：</view>
<view class=" color-main u-font-28" @click="chooseAndUploadAvatar('extendUp')">更换</view>
</view>
<view class="fileUp u-m-t-24">
<up-image width="148rpx" height="148rpx" :src="vdata.extendInfo.value"></up-image>
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
</view>
</view>
<view class="u-m-t-32 u-m-b-24">
<!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景效果：</view> -->
<view class="extend_title">当前背景效果：</view>
</view>
<view class="u-flex " :class="['bg-'+vdata.extendIndex]" :style="{
backgroundImage:'url('+vdata.extendInfo.value+')'
}">
<image style="width: 100%;" :src="imgUrl" mode="widthFix"></image>
<image class="logo" v-if="vdata.extendIndex==4" :src="vdata.extendInfo.value" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue';
import {
onShow
} from '@dcloudio/uni-app';
import go from '@/commons/utils/go.js';
import {
uploadFile
} from '@/http/api/index.js';
import {
getShopInfo,
editShopInfo,
getShopExtend,
editShopExtend
} from '@/http/api/shop.js';
const vdata = reactive({
shopInfo: {
status: 2,
isAccountPay: 0,
isMemberPrice: 0
},
extendList: [],
registerTypeList: [{
name: '先付费',
value: 'before'
},
{
name: '后付费',
value: 'after'
}
],
extendIndex: 0,
extendInfo: {},
dineIn: false,
takeout: false,
isTableFee: false,
label: '',
type: '',
inputValue: ''
});
onMounted(() => {
shopExtend();
});
onShow(() => {
shopInfo();
uni.$on('refreshPreviousPage', (params) => {
// 这里执行刷新数据的操作，例如重新调用API获取数据
refreshData(params);
});
});
/**
* 输入内容修改
*/
let refreshData = (e) => {
let params = {
id: vdata.shopInfo.id
};
params[e.name] = e.value;
vdata.type = e.name;
vdata.inputValue = e.value;
updateShopInfo(params, 'input');
};
/**
* 获取店铺信息
*/
const shopInfo = () => {
getShopInfo({
id: uni.getStorageSync('shopInfo').id
}).then((res) => {
vdata.isTableFee = res.isTableFee == 1 ? true : false;
if (res.eatModel.split(',').indexOf('dine-in') != -1) {
vdata.dineIn = true;
}
if (res.eatModel.split(',').indexOf('take-out') != -1) {
vdata.takeout = true;
}
vdata.shopInfo = res;
});
};
/**
* 获取店铺图片
*/
let shopExtend = () => {
getShopExtend().then((res) => {
if (res && res.length > 0) {
vdata.extendList = res;
vdata.extendIndex = 0;
vdata.extendInfo = res[0];
}
});
};
// 台桌清理模式修改
function tableClearChange(n) {
let params = {
id: vdata.shopInfo.id,
tableClearType: n
};
updateShopInfo(params);
}
/**
* 付费模式修改
*/
let radioChange = (n) => {
let params = {
id: vdata.shopInfo.id,
registerType: n
};
updateShopInfo(params);
};
/**
* 修改
*/
let updateShopInfo = (params, type) => {
editShopInfo(params).then((res) => {
if (type && type == 'input') {
vdata.shopInfo[vdata.type] = vdata.inputValue;
}
});
};
/**
* 修改店铺图片
*/
let updateShopExtend = () => {
editShopExtend({
autokey: vdata.extendInfo.autoKey,
value: vdata.extendInfo.value
}).then((res) => {});
};
/**
* 上传头像
*/
let chooseAndUploadAvatar = (type) => {
// 选择图片
uni.chooseImage({
count: 1, // 默认为1，只选择一张图片
sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
sourceType: ['album', 'camera'], // 图片来源，相册或相机
success: (res) => {
let file = res.tempFiles[0];
uploadFile(file)
.then((res) => {
if (type == 'coverImg') {
vdata.shopInfo.coverImg = res;
let params = {
id: vdata.shopInfo.id,
coverImg: vdata.shopInfo.coverImg
};
updateShopInfo(params);
}
if (type == 'extendUp') {
vdata.extendInfo.value = res;
updateShopExtend();
}
})
.catch((res) => {
if (res.errMsg) {
uni.showToast({
title: '图片大小超出限制',
icon: 'error'
});
}
});
},
fail: (chooseImageError) => {
// 选择图片失败处理逻辑
console.log('choose image fail:', chooseImageError);
}
});
};
/**
* 店铺图片TAB切换
*/
let extendTabClick = (item, index) => {
vdata.extendInfo = item;
vdata.extendIndex = index;
};
/**
* 修改
*/
let switchChange = (type) => {
let params = {
id: vdata.shopInfo.id
};
switch (type) {
case 'address':
params.lng = vdata.shopInfo.lng;
params.lat = vdata.shopInfo.lat;
params.address = vdata.shopInfo.address;
break;
case 'status':
params.status = vdata.shopInfo.status;
break;
case 'eatModel':
params.eatModel = [];
if (vdata.dineIn) {
params.eatModel.push('dine-in');
}
if (vdata.takeout) {
params.eatModel.push('take-out');
}
params.eatModel = params.eatModel.join(',');
break;
case 'isAccountPay':
params.isAccountPay = vdata.shopInfo.isAccountPay;
break;
case 'isMemberPrice':
params.isMemberPrice = vdata.shopInfo.isMemberPrice;
break;
case 'isTableFee':
if (vdata.isTableFee) {
params.isTableFee = 1;
} else {
params.isTableFee = 0;
}
break;
}
updateShopInfo(params);
};
const imgUrl = computed(() => {
if(vdata.extendIndex==2){
return '/static/member_bg.png'
}
return 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo
.autoKey + '.png'
})
</script>
<style lang="scss" scoped>
.page-wrapper {
background-color: #f8f8f8;
padding-bottom: 32rpx;
.page-cell {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.label {
font-weight: bold;
font-size: 28rpx;
color: #333333;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 20rpx;
.tableFee {
width: 186rpx;
height: 54rpx;
line-height: 54rpx;
margin-left: 10rpx;
font-size: 28rpx;
color: #333;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #e5e5e5;
text-align: left;
padding: 0 18rpx;
box-sizing: border-box;
}
}
.extendList {
width: 100%;
display: flex;
flex-direction: column;
.extendTab {
display: flex;
justify-content: flex-start;
background-color: #fff;
padding: 32rpx 28rpx;
.extendTab_item {
font-size: 24rpx;
font-weight: 400;
padding: 4rpx 12rpx;
border-radius: 4rpx;
border: 2rpx solid #e5e5e5;
margin-right: 20rpx;
}
.active {
background: #318afe;
border: 2rpx solid #318afe;
color: #fff;
}
}
.extend_content {
margin-top: 32rpx;
margin: 32rpx 28rpx;
padding: 32rpx 28rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
.preview {
min-width: 146rpx;
height: 342rpx;
position: relative;
margin-right: 32rpx;
background-color: #f7f7f7;
::v-deep .bg,
::v-deep .bg .u-image,
::v-deep .bg .u-image__image {
width: 146rpx !important;
height: 342rpx !important;
position: absolute;
top: 0;
}
::v-deep .index_bg .u-image,
::v-deep .index_bg .u-image__image {
width: 146rpx !important;
height: 242rpx !important;
position: absolute;
top: 0;
}
::v-deep .my_bg .u-image,
::v-deep .my_bg .u-image__image {
width: 146rpx !important;
height: 90rpx !important;
position: absolute;
top: 0;
}
::v-deep .member_bg .u-image,
::v-deep .member_bg .u-image__image {
width: 34rpx !important;
height: 63rpx !important;
position: absolute;
top: 22rpx;
left: 0;
right: 0;
margin: auto;
border-radius: 5rpx !important;
}
::v-deep .shopinfo_bg .u-image,
::v-deep .shopinfo_bg .u-image__image {
width: 146rpx !important;
height: 50rpx !important;
position: absolute;
top: 0;
}
::v-deep .bg.ticket_logo,
::v-deep .bg.ticket_logo .u-image,
::v-deep .bg.ticket_logo .u-image__image {
width: 359rpx !important;
height: 232rpx !important;
position: absolute;
top: 0;
}
::v-deep .ticket_logo.img .u-image,
::v-deep .ticket_logo.img .u-image__image {
width: 146rpx !important;
height: 50rpx !important;
position: absolute;
top: 0;
left: 10rpx;
}
.shopinfo_bg_f {
width: 146rpx;
height: 290rpx;
position: absolute;
bottom: 0;
background-color: #fff;
}
}
.extend_img {
display: flex;
flex-direction: column;
.extend_title {
font-weight: 700;
font-size: 28rpx;
color: #333333;
}
.fileUp {
width: 148rpx;
height: 148rpx;
position: relative;
.file {
width: 148rpx;
height: 148rpx;
position: absolute;
top: 0;
}
}
::v-deep .u-image,
::v-deep .u-image__image {
width: 148rpx !important;
height: 148rpx !important;
}
}
}
}
}
.column {
flex-direction: column;
.label {
align-self: flex-start;
}
}
.m {
margin-bottom: 12rpx;
}
.cutShop {
width: 530rpx;
height: 80rpx;
line-height: 80rpx;
background: #318afe;
border-radius: 56rpx;
font-weight: 500;
font-size: 32rpx;
color: #ffffff;
margin: 48rpx auto 0 auto;
text-align: center;
}
.right {
display: flex;
align-items: center;
font-weight: 400;
font-size: 28rpx;
color: #999999;
position: relative;
.file {
width: 112rpx;
height: 112rpx;
line-height: 112rpx;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.fileImg {
width: 112rpx !important;
height: 112rpx !important;
::v-deep .u-avatar__image {
width: 112rpx !important;
height: 112rpx !important;
}
}
}
}
.bg-cover {
background-size: cover;
background-position: center;
}
.bg-0 {
background-size: cover;
}
.bg-1 {
background-repeat: no-repeat;
background-position: top;
background-size: 100% auto;
}
.bg-2 {
background-position: center;
background-size: cover;
border-radius: 24rpx;
overflow: hidden;
}
.bg-3{
background-repeat: no-repeat;
background-position: top ;
background-size: 100% auto;
}
.bg-4{
background-repeat: no-repeat;
background-position: top ;
background-size: 100% auto;
position: relative;
.logo{
position: absolute;
left: 30rpx;
width: 90px;
height: 30px;
top: 30rpx;
}
}
</style>

48
pages/shopSetUp/index.vue
View File

@@ -125,53 +125,7 @@
<view class="label">店铺收款码</view>
<view class="right"><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
</view>
<view class="page-cell column">
<view class="label">店铺图片</view>
<view class="extendList">
<view class="extendTab">
<view
class="extendTab_item"
v-for="(item, index) in vdata.extendList"
:key="index"
:class="{ active: vdata.extendIndex == index }"
@click="extendTabClick(item, index)"
>
{{ item.name }}
</view>
</view>
<view class="extend_content">
<view class="preview" v-if="vdata.extendInfo.autoKey != 'ticket_logo'">
<view class="index_bg"><up-image v-if="'index_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
<view class="my_bg"><up-image v-if="'my_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
<view class="bg">
<up-image
v-if="'member_bg' == vdata.extendInfo.autoKey"
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"
></up-image>
</view>
<view class="member_bg"><up-image v-if="'member_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
<view class="shopinfo_bg"><up-image v-if="'shopinfo_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autoKey"></view>
<view class="bg" v-if="vdata.extendInfo.autoKey">
<up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"></up-image>
</view>
</view>
<view class="preview" v-else style="width: 359rpx; height: 232rpx">
<view class="bg ticket_logo" v-if="vdata.extendInfo.autoKey == 'ticket_logo'">
<up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"></up-image>
</view>
<view class="ticket_logo img"><up-image v-if="'ticket_logo' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
</view>
<view class="extend_img">
<view class="extend_title">{{ vdata.extendInfo.name }}背景图片</view>
<view class="fileUp">
<up-image :src="vdata.extendInfo.value"></up-image>
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
</view>
</template>