新增商品拼团模块
This commit is contained in:
478
pageMarket/groupGoods/addGoods.vue
Normal file
478
pageMarket/groupGoods/addGoods.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-form ref="formRef" :model="form" :rules="rules" label-position="top">
|
||||
<view class="card">
|
||||
<u-form-item prop="useShops">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">可用门店</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<my-shop-select-w v-model:useType="form.useShopType" v-model:selShops="form.useShops"></my-shop-select-w>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="wareName">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品名称</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="30" v-model="form.wareName"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品描述</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-textarea placeholder="请输入" :maxlength="50" v-model="form.wareDetail"></u-textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="wareImgs">
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">商品图片</text>
|
||||
<text class="tips">*建议优先选择jpg格式，并且最好控制在500kb内</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<my-upload-imgs v-model="form.wareImgs"></my-upload-imgs>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="originalPrice">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">原价</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.originalPrice" placeholder="请输入" @change="originalPriceInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="groupPrice">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">拼团价</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.groupPrice" placeholder="请输入" @change="groupPriceInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="groupPeopleNum">
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">成团人数</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.groupPeopleNum" placeholder="当参与人数达到成团人数才能完成拼团" @change="groupPeopleNumInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="groupTimeoutHour">
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">成团期限（小时）</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.groupTimeoutHour" placeholder="最小不低于1小时，最大不超过72小时" @change="groupTimeoutHourInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="limitBuyNum">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">限购数量</text>
|
||||
<u-switch v-model="limitBuyNumSwitch" @change="limitBuyNumSwitchChange"></u-switch>
|
||||
</view>
|
||||
<view class="info" v-if="limitBuyNumSwitch == 1">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入限购数量" :maxlength="8" v-model="form.limitBuyNum" @change="limitBuyNumInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">商品详情</text>
|
||||
<text class="tips">*建议优先选择jpg格式，并且最好控制在500kb内</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<my-upload-imgs v-model="form.wareCommentImgs"></my-upload-imgs>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</u-form>
|
||||
<my-footer-btn showCancel type="horizontal" @confirm="submitHandle" @cancel="backHandle"></my-footer-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { filterNumberInput } from '@/utils/index.js';
|
||||
import { addGbWare, updateGbWareById } from '@/http/api/ware.js';
|
||||
|
||||
const type = ref('add'); // add添加商品 editor编辑商品
|
||||
const formRef = ref(null);
|
||||
const limitBuyNumSwitch = ref(false);
|
||||
const form = ref({
|
||||
id: '',
|
||||
useShopType: 'only', // only-仅本店 all全部 /custom 指定
|
||||
useShops: [], // 可用门店（指定门店时存储门店ID，逗号分隔）
|
||||
wareName: '', // 商品名称
|
||||
wareDetail: '', // 商品描述
|
||||
wareImgs: [], // 商品图片（多个用逗号分隔）
|
||||
originalPrice: '', // 原价
|
||||
groupPrice: '', // 拼团价
|
||||
groupPeopleNum: '', // 成团人数 最小为1
|
||||
groupTimeoutHour: '', // 成团期限（小时）不低于1小时，最大72小时
|
||||
limitBuyNum: -10086, // 限购数量（每人最多购买次数） -10086
|
||||
onlineStatus: 1, // 上架状态（0下架 1上架）
|
||||
wareCommentImgs: [] // 商品详情图片（多个用逗号分隔）
|
||||
});
|
||||
|
||||
const rules = ref({
|
||||
useShops: [
|
||||
{
|
||||
trigger: ['change'],
|
||||
message: '请选择可用门店',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.useShopType == 'custom' && form.value.useShops.length == 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
wareName: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.wareName === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
wareImgs: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请选择商品图片',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.wareImgs.length == 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
originalPrice: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.originalPrice === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
groupPrice: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.groupPrice === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
groupPeopleNum: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.groupPeopleNum === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
groupTimeoutHour: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.groupTimeoutHour === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
limitBuyNum: [
|
||||
{
|
||||
trigger: ['change', 'blur'],
|
||||
message: '请输入限购数量',
|
||||
validator: (rule, value, callback) => {
|
||||
if (limitBuyNumSwitch.value && form.value.limitBuyNum == '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const limitBuyNumFalseNum = -10086;
|
||||
function limitBuyNumSwitchChange(e) {
|
||||
if (e) {
|
||||
form.value.limitBuyNum = '';
|
||||
} else {
|
||||
form.value.limitBuyNum = limitBuyNumFalseNum;
|
||||
}
|
||||
}
|
||||
|
||||
// 原价
|
||||
function originalPriceInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.originalPrice = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 拼团价
|
||||
function groupPriceInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.groupPrice = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 成团人数
|
||||
function groupPeopleNumInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.groupPeopleNum = filterNumberInput(e, 2);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 成团期限
|
||||
function groupTimeoutHourInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.groupTimeoutHour = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 限制购买数
|
||||
function limitBuyNumInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.limitBuyNum = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 保存商品
|
||||
function submitHandle() {
|
||||
console.log(form.value);
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
const data = { ...form.value };
|
||||
if (form.value.useShopType.length) {
|
||||
data.useShops = form.value.useShops.join(',');
|
||||
}
|
||||
|
||||
data.wareImgs = form.value.wareImgs.join(',');
|
||||
|
||||
if (form.value.wareCommentImgs.length) {
|
||||
data.wareCommentImgs = form.value.wareCommentImgs.join(',');
|
||||
}
|
||||
|
||||
if (form.value.id) {
|
||||
await updateGbWareById(data);
|
||||
} else {
|
||||
await addGbWare(data);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 300);
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
function backHandle() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
// 从本地获取商品信息
|
||||
function getLocalGoods() {
|
||||
let groupGoods = uni.getStorageSync('groupGoods');
|
||||
|
||||
console.log(groupGoods);
|
||||
|
||||
if (groupGoods && groupGoods.id) {
|
||||
form.value = groupGoods;
|
||||
|
||||
if (form.value.useShops !== '') {
|
||||
form.value.useShops = form.value.useShops.split(',');
|
||||
} else {
|
||||
form.value.useShops = [];
|
||||
}
|
||||
|
||||
if (form.value.wareImgs != '') {
|
||||
form.value.wareImgs = form.value.wareImgs.split(',');
|
||||
}
|
||||
|
||||
if (form.value.wareCommentImgs != '') {
|
||||
form.value.wareCommentImgs = form.value.wareCommentImgs.split(',');
|
||||
}
|
||||
|
||||
if (form.value.limitBuyNum == -10086) {
|
||||
limitBuyNumSwitch.value = false;
|
||||
} else {
|
||||
limitBuyNumSwitch.value = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.type && options.type == 'editor') {
|
||||
type.value = options.type;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑商品'
|
||||
});
|
||||
getLocalGoods();
|
||||
} else {
|
||||
type.value = 'add';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 28upx;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 28upx;
|
||||
}
|
||||
}
|
||||
.switch-wrap {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&.column {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tips {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding-top: 16upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16upx;
|
||||
.i {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
286
pageMarket/groupGoods/components/goodsList.vue
Normal file
286
pageMarket/groupGoods/components/goodsList.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-wrap" :style="{ top: `${top}px` }">
|
||||
<view class="ipt">
|
||||
<u-input
|
||||
placeholder="请输入商品名称"
|
||||
suffixIcon="search"
|
||||
shape="circle"
|
||||
clearable
|
||||
v-model="queryForm.wareName"
|
||||
@confirm="getGbWarePageAjax(1)"
|
||||
@clear="getGbWarePageAjax(1)"
|
||||
></u-input>
|
||||
</view>
|
||||
<div class="ipt" @click="showStatusSheet = true">
|
||||
<u-input placeholder="上架状态" readonly v-model="queryForm.onlineStatusLabel" suffixIcon="arrow-down"></u-input>
|
||||
</div>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||||
<view class="header">
|
||||
<text class="t1">成团人数：{{ item.groupPeopleNum }}</text>
|
||||
<text class="t1">成团期限（小时）：{{ item.groupTimeoutHour }}</text>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="img-wrap">
|
||||
<image class="img" :src="item.wareImgs.split(',')[0]" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="t1">{{ item.wareName }}</text>
|
||||
<text class="t1">原价：{{ item.originalPrice }}</text>
|
||||
<text class="t1">拼团价：{{ item.groupPrice }}</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<view class="row">
|
||||
<u-switch v-model="item.onlineStatus" :active-value="1" :inactive-value="0" @change="onlineStatusChange($event, item)"></u-switch>
|
||||
</view>
|
||||
<text class="t1">
|
||||
<template v-if="item.onlineStatus">下架</template>
|
||||
<template v-else>上架</template>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<template v-if="!item.onlineStatus">
|
||||
<view class="btn">
|
||||
<u-button shape="circle" @click="delHandle(item)">删除</u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button type="primary" shape="circle" @click="editorHandle(item)">编辑</u-button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="btn" style="width: 150px">
|
||||
<u-button shape="circle">下架后编辑/删除</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="listData.status"></u-loadmore>
|
||||
<u-action-sheet
|
||||
:actions="[
|
||||
{ name: '全部', value: '' },
|
||||
{ name: '上架', value: 1 },
|
||||
{ name: '下架', value: 0 }
|
||||
]"
|
||||
title="上架状态"
|
||||
:show="showStatusSheet"
|
||||
cancelText="取消"
|
||||
@close="showStatusSheet = false"
|
||||
@select="sheetConfirm"
|
||||
></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { getGbWarePage, editOnlineStatus, deleteGbWare } from '@/http/api/ware.js';
|
||||
|
||||
const props = defineProps({
|
||||
top: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const showStatusSheet = ref(false);
|
||||
const queryForm = reactive({
|
||||
wareName: '',
|
||||
onlineStatusLabel: '',
|
||||
onlineStatus: ''
|
||||
});
|
||||
|
||||
// 选择状态
|
||||
function sheetConfirm(e) {
|
||||
queryForm.onlineStatusLabel = e.name;
|
||||
queryForm.onlineStatus = e.value;
|
||||
getGbWarePageAjax(1);
|
||||
}
|
||||
|
||||
const listData = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loading',
|
||||
list: []
|
||||
});
|
||||
|
||||
function reachBottom() {
|
||||
if (listData.status != 'nomore') {
|
||||
listData.page++;
|
||||
getGbWarePageAjax();
|
||||
}
|
||||
}
|
||||
|
||||
// 改变状态
|
||||
async function onlineStatusChange(e, item) {
|
||||
try {
|
||||
const res = await editOnlineStatus({
|
||||
id: item.id,
|
||||
onlineStatus: item.onlineStatus
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
item.onlineStatus = !item.onlineStatus;
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function delHandle(item) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `确定要删除${item.wareName}商品吗？`,
|
||||
success: async (res) => {
|
||||
try {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
const res = await deleteGbWare(item.id);
|
||||
let index = listData.list.findIndex((val) => val.id == item.id);
|
||||
listData.list.splice(index, 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function editorHandle(item) {
|
||||
uni.setStorageSync('groupGoods', item);
|
||||
uni.navigateTo({
|
||||
url: '/pageMarket/groupGoods/addGoods?type=editor'
|
||||
});
|
||||
}
|
||||
|
||||
// 拼团商品-列表
|
||||
async function getGbWarePageAjax(page = listData.page, isPull = false) {
|
||||
try {
|
||||
const res = await getGbWarePage({
|
||||
page: page,
|
||||
size: listData.size,
|
||||
...queryForm
|
||||
});
|
||||
|
||||
if (listData.page == 1) {
|
||||
listData.list = res.records;
|
||||
} else {
|
||||
listData.list.push(...res.records);
|
||||
}
|
||||
|
||||
if (res.pageNumber >= res.totalPage) {
|
||||
listData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
if (isPull) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.stopPullDownRefresh();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reachBottom,
|
||||
getGbWarePageAjax
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getGbWarePageAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28upx;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0 28upx;
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding-bottom: 28upx;
|
||||
.item {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28upx 0;
|
||||
.img-wrap {
|
||||
$size: 160upx;
|
||||
position: relative;
|
||||
width: $size;
|
||||
height: $size;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 28upx;
|
||||
gap: 4px;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 28upx;
|
||||
.btn {
|
||||
width: 140upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
519
pageMarket/groupGoods/components/orderList.vue
Normal file
519
pageMarket/groupGoods/components/orderList.vue
Normal file
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-wrap" :style="{ top: `${top}px` }">
|
||||
<view class="top">
|
||||
<view class="ipt">
|
||||
<u-input
|
||||
placeholder="请输入订单号"
|
||||
prefixIcon="search"
|
||||
shape="circle"
|
||||
clearable
|
||||
v-model="queryForm.orderNo"
|
||||
@confirm="gbOrderPageAjax(1)"
|
||||
@clear="gbOrderPageAjax(1)"
|
||||
></u-input>
|
||||
</view>
|
||||
<div class="ipt" @click="dateRef.open()">
|
||||
<u-input placeholder="支付时间范围" readonly v-model="time" suffixIcon="arrow-down"></u-input>
|
||||
</div>
|
||||
</view>
|
||||
<view class="tab-wrap">
|
||||
<view class="item" :class="{ active: statusActive == index }" v-for="(item, index) in tabs" :key="index" @click="tabChange(index)">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||||
<view class="header">
|
||||
<view class="left">
|
||||
<text class="t1">订单号：{{ item.orderNo }}</text>
|
||||
<text class="t1">团单号：{{ item.groupOrderNo }}</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<u-tag plain plainFill :type="statusFilter(item.status).type">{{ item.status }}</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<text class="t1">用户：{{ item.userName }} {{ item.userPhone }}</text>
|
||||
<text class="t2">核销码：{{ item.verifyCode }}</text>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<image class="img" :src="item.wareJson.wareImgs.split(',')[0]" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<view class="left">
|
||||
<text class="t1">{{ item.wareJson.wareName }}</text>
|
||||
<text class="t1">x{{ item.num }}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="t1">{{ item.payAmount }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-wrap">
|
||||
<text class="t">下单时间：{{ item.createTime }}</text>
|
||||
<text class="t" v-if="item.verifyTime">核销时间：{{ item.verifyTime }}</text>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="btn">
|
||||
<u-button shape="circle" style="width: 100%" v-if="includesString(item.status, '退款中')" @click="showRefundPopupHandle(item)">审核</u-button>
|
||||
</view>
|
||||
<view class="btn" v-if="includesString(item.status, '待核销') || includesString(item.status, '待成团')">
|
||||
<u-button shape="circle" style="width: 100%" @click="refundHandle(item)">退款</u-button>
|
||||
</view>
|
||||
<view class="btn" v-if="includesString(item.status, '待核销')">
|
||||
<u-button type="primary" shape="circle" style="width: 100%" @click="checkoutHandle(item)">核销</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="listData.status"></u-loadmore>
|
||||
<my-date-pickerview ref="dateRef" @confirm="dateConfirmHandle"></my-date-pickerview>
|
||||
<u-popup :show="showRefundPopup" :round="20" mode="bottom" closeable @close="showRefundPopup = false">
|
||||
<view class="refund-popup-content">
|
||||
<view class="refund-popup-title">
|
||||
<text class="t">退款审核</text>
|
||||
</view>
|
||||
<view class="form">
|
||||
<u-form :model="refundForm" label-width="70" label-position="left">
|
||||
<u-form-item label="是否同意">
|
||||
<u-radio-group v-model="refundForm.type">
|
||||
<u-radio label="同意" :name="1" :customStyle="{ marginRight: '15px' }"></u-radio>
|
||||
<u-radio label="驳回" :name="0"></u-radio>
|
||||
</u-radio-group>
|
||||
</u-form-item>
|
||||
<u-form-item label="驳回原因" v-if="refundForm.type === 0">
|
||||
<u-textarea type="textarea" v-model="refundForm.reason" placeholder="请输入驳回原因"></u-textarea>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
<view class="dialog-footer">
|
||||
<view class="btn">
|
||||
<u-button @click="showRefundPopup = false" shape="circle" style="width: 100%">取消</u-button>
|
||||
</view>
|
||||
<div class="btn">
|
||||
<u-button type="primary" shape="circle" @click="returnCostConfirmHandle" :loading="refundLoading" style="width: 100%">确认</u-button>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { includesString } from '@/utils/index.js';
|
||||
import { gbOrderPage, agreeRefund, rejectRefund, checkout } from '@/http/api/ware.js';
|
||||
|
||||
const dateRef = ref(null);
|
||||
|
||||
const props = defineProps({
|
||||
top: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const time = ref('');
|
||||
const queryForm = reactive({
|
||||
status: '',
|
||||
orderNo: '',
|
||||
orderStartTime: '',
|
||||
orderEndTime: ''
|
||||
});
|
||||
|
||||
// 确认选择时间
|
||||
function dateConfirmHandle(e) {
|
||||
queryForm.orderStartTime = e.start;
|
||||
queryForm.orderEndTime = e.end;
|
||||
time.value = e.text;
|
||||
gbOrderPageAjax(1);
|
||||
}
|
||||
|
||||
const statusActive = ref(0);
|
||||
const tabs = ref([
|
||||
{
|
||||
value: '',
|
||||
label: '全部'
|
||||
},
|
||||
{
|
||||
value: '待成团',
|
||||
label: '待成团'
|
||||
},
|
||||
{
|
||||
value: '待核销',
|
||||
label: '待核销'
|
||||
},
|
||||
{
|
||||
value: '已核销',
|
||||
label: '已核销'
|
||||
},
|
||||
{
|
||||
value: '退款中',
|
||||
label: '退款'
|
||||
}
|
||||
]);
|
||||
|
||||
const statusList = ref([
|
||||
{
|
||||
value: '待支付',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
value: '待核销',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: '待成团',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: '已核销',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
value: '退款中',
|
||||
type: 'error'
|
||||
},
|
||||
{
|
||||
value: '已退款',
|
||||
type: 'info'
|
||||
}
|
||||
]);
|
||||
|
||||
// 过滤状态
|
||||
function statusFilter(status) {
|
||||
let obj = statusList.value.find((item) => item.value == status);
|
||||
if (obj) {
|
||||
return obj;
|
||||
} else {
|
||||
return {
|
||||
value: status,
|
||||
type: 'info'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function tabChange(index) {
|
||||
statusActive.value = index;
|
||||
listData.page = 1;
|
||||
queryForm.status = tabs.value[index].value;
|
||||
gbOrderPageAjax();
|
||||
}
|
||||
|
||||
const listData = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loading',
|
||||
list: []
|
||||
});
|
||||
|
||||
// 滚动到底部，方法需要暴露给父级
|
||||
function reachBottom() {
|
||||
if (listData.status != 'nomore') {
|
||||
listData.page++;
|
||||
gbOrderPageAjax();
|
||||
}
|
||||
}
|
||||
|
||||
// 退款
|
||||
function refundHandle(item) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `确定要给[${item.userName}/${item.userPhone}]退款吗?`,
|
||||
success: async (res) => {
|
||||
try {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '退款中...'
|
||||
});
|
||||
const res = await agreeRefund({
|
||||
recordId: item.id,
|
||||
orderNo: item.orderNo,
|
||||
reason: ''
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '退款成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 100);
|
||||
goodsRecordPageAjax(1);
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 退款popup
|
||||
const refundLoading = ref(false);
|
||||
const showRefundPopup = ref(false);
|
||||
const refundForm = ref({
|
||||
type: 1,
|
||||
recordId: '',
|
||||
orderNo: '',
|
||||
reason: ''
|
||||
});
|
||||
// 显示退款popup
|
||||
function showRefundPopupHandle(item) {
|
||||
showRefundPopup.value = true;
|
||||
refundForm.value.recordId = item.id;
|
||||
refundForm.value.orderNo = item.orderNo;
|
||||
}
|
||||
// 退款操作
|
||||
async function returnCostConfirmHandle() {
|
||||
try {
|
||||
refundLoading.value = true;
|
||||
if (refundForm.value.type == 1) {
|
||||
// 同意
|
||||
await agreeRefund(refundForm.value);
|
||||
} else {
|
||||
// 驳回
|
||||
await rejectRefund(refundForm.value);
|
||||
}
|
||||
showRefundPopup.value = false;
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 100);
|
||||
gbOrderPageAjax(1);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
refundLoading.value = false;
|
||||
}
|
||||
|
||||
// 核销操作
|
||||
async function checkoutHandle(item) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确认要核销吗?',
|
||||
success: async (res) => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '核销中...',
|
||||
mask: true
|
||||
});
|
||||
await checkout(item.verifyCode);
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '已核销',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 100);
|
||||
item.status = '已核销';
|
||||
item.verifyTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取拼团商品:订单列表
|
||||
async function gbOrderPageAjax(page = listData.page, isPull = false) {
|
||||
try {
|
||||
const res = await gbOrderPage({
|
||||
page: page,
|
||||
size: listData.size,
|
||||
...queryForm
|
||||
});
|
||||
|
||||
res.records.forEach((item) => {
|
||||
item.wareJson = JSON.parse(item.wareJson);
|
||||
});
|
||||
|
||||
if (listData.page == 1) {
|
||||
listData.list = res.records;
|
||||
} else {
|
||||
listData.list.push(...res.records);
|
||||
}
|
||||
|
||||
if (res.pageNumber >= res.totalPage) {
|
||||
listData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reachBottom,
|
||||
gbOrderPageAjax
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
gbOrderPageAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding-top: 100px;
|
||||
}
|
||||
.search-wrap {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
.top {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28upx;
|
||||
padding: 0 28upx;
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.tab-wrap {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
padding: 0 28upx;
|
||||
.item {
|
||||
--activeColor: #318afe;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--activeColor);
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
}
|
||||
.t {
|
||||
color: var(--activeColor);
|
||||
}
|
||||
}
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding-bottom: 28upx;
|
||||
.item {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28upx;
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.t1 {
|
||||
color: #999;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
margin-top: 20upx;
|
||||
justify-content: space-between;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
.t2 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
margin-top: 20upx;
|
||||
.img {
|
||||
$size: 90upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20upx;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
.t1 {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.time-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20upx;
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20upx;
|
||||
gap: 28upx;
|
||||
.btn {
|
||||
width: 180upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.refund-popup-content {
|
||||
padding: 0 28upx;
|
||||
.refund-popup-title {
|
||||
padding: 28upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.form {
|
||||
padding: 28upx;
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
192
pageMarket/groupGoods/index.vue
Normal file
192
pageMarket/groupGoods/index.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<my-header-card
|
||||
:options="{
|
||||
name: '拼团商品',
|
||||
intro: '拼团',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/90491451add14df09ce35ecdf47eef6d.png'
|
||||
}"
|
||||
showSwitch
|
||||
v-model:isOpen="form.onlineStatus"
|
||||
@load="(e) => (headHeight = e.height)"
|
||||
></my-header-card>
|
||||
<view class="tab-wrap" :style="{ top: `${headHeight}px` }">
|
||||
<view class="tab-list">
|
||||
<view class="item" v-for="(item, index) in tabs" :class="{ active: tabsActive == index }" :key="item.value" @click="tabClickHandle(item, index)">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<goodsList ref="goodsListRef" name="goodsList" key="goodsList" :top="headHeight + 54" v-if="tabsActive == 0" />
|
||||
<orderList ref="orderListRef" name="orderList" key="orderList" :top="headHeight + 54" v-if="tabsActive == 1" />
|
||||
</view>
|
||||
<my-footer-btn confirmText="添加" v-if="tabsActive == 0" @confirm="toAdd"></my-footer-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import goodsList from './components/goodsList.vue';
|
||||
import orderList from './components/orderList.vue';
|
||||
import { upShopConfig } from '@/http/api/ware.js';
|
||||
import { getShopInfo } from '@/http/api/shop.js';
|
||||
|
||||
const goodsListRef = ref(null);
|
||||
const orderListRef = ref(null);
|
||||
|
||||
const headHeight = ref(0);
|
||||
const tabsActive = ref(0);
|
||||
const tabs = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '拼团活动'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '拼团订单'
|
||||
}
|
||||
]);
|
||||
|
||||
function tabClickHandle(item, index) {
|
||||
tabsActive.value = index;
|
||||
}
|
||||
|
||||
function toAdd() {
|
||||
uni.navigateTo({
|
||||
url: '/pageMarket/groupGoods/addGoods'
|
||||
});
|
||||
}
|
||||
|
||||
// 活动开关
|
||||
const form = ref({
|
||||
onlineStatus: 1
|
||||
});
|
||||
|
||||
watch(
|
||||
() => form.value.onlineStatus,
|
||||
(newValue, oldValue) => {
|
||||
upShopConfigAjax();
|
||||
}
|
||||
);
|
||||
|
||||
// 更改开关状态
|
||||
async function upShopConfigAjax() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
const res = await upShopConfig(form.value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
switch (tabsActive.value) {
|
||||
case 0:
|
||||
goodsListRef.value?.getGbWarePageAjax(1, true);
|
||||
break;
|
||||
case 1:
|
||||
orderListRef.value?.getGbWarePageAjax(1, true);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动到底部
|
||||
onReachBottom(() => {
|
||||
switch (tabsActive.value) {
|
||||
case 0:
|
||||
goodsListRef.value?.reachBottom();
|
||||
break;
|
||||
case 1:
|
||||
orderListRef.value?.reachBottom();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 获取配置信息
|
||||
async function getShopInfoAjax() {
|
||||
try {
|
||||
const res = await getShopInfo();
|
||||
form.value.onlineStatus = res.isGroupBuy;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面显示
|
||||
onShow(() => {
|
||||
switch (tabsActive.value) {
|
||||
case 0:
|
||||
goodsListRef.value?.getGbWarePageAjax(1);
|
||||
break;
|
||||
case 1:
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
onLoad(() => {
|
||||
getShopInfoAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
$bgColor: #e6f0ff;
|
||||
$primarColor: #318afe;
|
||||
.content {
|
||||
padding: calc(54px + 28upx) 28upx 28upx;
|
||||
}
|
||||
|
||||
.tab-wrap {
|
||||
height: 54px;
|
||||
padding: 10px 14px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
.tab-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: $bgColor;
|
||||
padding: 6upx;
|
||||
border-radius: 12upx;
|
||||
.item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8upx;
|
||||
.t {
|
||||
color: $primarColor;
|
||||
font-size: 28upx;
|
||||
}
|
||||
&.active {
|
||||
background-color: $primarColor;
|
||||
.t {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
478
pageMarket/packagePopularize/addGoods.vue
Normal file
478
pageMarket/packagePopularize/addGoods.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-form ref="formRef" :model="form" :rules="rules" label-position="top">
|
||||
<view class="card">
|
||||
<u-form-item prop="useShops">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">可用门店</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<my-shop-select-w v-model:useType="form.useShopType" v-model:selShops="form.useShops"></my-shop-select-w>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="wareName">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品名称</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="30" v-model="form.wareName"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品描述</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-textarea placeholder="请输入" :maxlength="50" v-model="form.wareDetail"></u-textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="wareImgs">
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">商品图片</text>
|
||||
<text class="tips">*建议优先选择jpg格式，并且最好控制在500kb内</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<my-upload-imgs v-model="form.wareImgs"></my-upload-imgs>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="originalPrice">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">原价</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.originalPrice" placeholder="请输入" @change="originalPriceInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="groupPrice">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">拼团价</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.groupPrice" placeholder="请输入" @change="groupPriceInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="groupPeopleNum">
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">成团人数</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.groupPeopleNum" placeholder="当参与人数达到成团人数才能完成拼团" @change="groupPeopleNumInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="groupTimeoutHour">
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">成团期限（小时）</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input v-model="form.groupTimeoutHour" placeholder="最小不低于1小时，最大不超过72小时" @change="groupTimeoutHourInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="limitBuyNum">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">限购数量</text>
|
||||
<u-switch v-model="limitBuyNumSwitch" @change="limitBuyNumSwitchChange"></u-switch>
|
||||
</view>
|
||||
<view class="info" v-if="limitBuyNumSwitch == 1">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入限购数量" :maxlength="8" v-model="form.limitBuyNum" @change="limitBuyNumInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top column">
|
||||
<text class="t">商品详情</text>
|
||||
<text class="tips">*建议优先选择jpg格式，并且最好控制在500kb内</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<my-upload-imgs v-model="form.wareCommentImgs"></my-upload-imgs>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</u-form>
|
||||
<my-footer-btn showCancel type="horizontal" @confirm="submitHandle" @cancel="backHandle"></my-footer-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { filterNumberInput } from '@/utils/index.js';
|
||||
import { addGbWare, updateGbWareById } from '@/http/api/ware.js';
|
||||
|
||||
const type = ref('add'); // add添加商品 editor编辑商品
|
||||
const formRef = ref(null);
|
||||
const limitBuyNumSwitch = ref(false);
|
||||
const form = ref({
|
||||
id: '',
|
||||
useShopType: 'only', // only-仅本店 all全部 /custom 指定
|
||||
useShops: [], // 可用门店（指定门店时存储门店ID，逗号分隔）
|
||||
wareName: '', // 商品名称
|
||||
wareDetail: '', // 商品描述
|
||||
wareImgs: [], // 商品图片（多个用逗号分隔）
|
||||
originalPrice: '', // 原价
|
||||
groupPrice: '', // 拼团价
|
||||
groupPeopleNum: '', // 成团人数 最小为1
|
||||
groupTimeoutHour: '', // 成团期限（小时）不低于1小时，最大72小时
|
||||
limitBuyNum: -10086, // 限购数量（每人最多购买次数） -10086
|
||||
onlineStatus: 1, // 上架状态（0下架 1上架）
|
||||
wareCommentImgs: [] // 商品详情图片（多个用逗号分隔）
|
||||
});
|
||||
|
||||
const rules = ref({
|
||||
useShops: [
|
||||
{
|
||||
trigger: ['change'],
|
||||
message: '请选择可用门店',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.useShopType == 'custom' && form.value.useShops.length == 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
wareName: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.wareName === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
wareImgs: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请选择商品图片',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.wareImgs.length == 0) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
originalPrice: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.originalPrice === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
groupPrice: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.groupPrice === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
groupPeopleNum: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.groupPeopleNum === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
groupTimeoutHour: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.groupTimeoutHour === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
limitBuyNum: [
|
||||
{
|
||||
trigger: ['change', 'blur'],
|
||||
message: '请输入限购数量',
|
||||
validator: (rule, value, callback) => {
|
||||
if (limitBuyNumSwitch.value && form.value.limitBuyNum == '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const limitBuyNumFalseNum = -10086;
|
||||
function limitBuyNumSwitchChange(e) {
|
||||
if (e) {
|
||||
form.value.limitBuyNum = '';
|
||||
} else {
|
||||
form.value.limitBuyNum = limitBuyNumFalseNum;
|
||||
}
|
||||
}
|
||||
|
||||
// 原价
|
||||
function originalPriceInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.originalPrice = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 拼团价
|
||||
function groupPriceInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.groupPrice = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 成团人数
|
||||
function groupPeopleNumInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.groupPeopleNum = filterNumberInput(e, 2);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 成团期限
|
||||
function groupTimeoutHourInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.groupTimeoutHour = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 限制购买数
|
||||
function limitBuyNumInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.limitBuyNum = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 保存商品
|
||||
function submitHandle() {
|
||||
console.log(form.value);
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
const data = { ...form.value };
|
||||
if (form.value.useShopType.length) {
|
||||
data.useShops = form.value.useShops.join(',');
|
||||
}
|
||||
|
||||
data.wareImgs = form.value.wareImgs.join(',');
|
||||
|
||||
if (form.value.wareCommentImgs.length) {
|
||||
data.wareCommentImgs = form.value.wareCommentImgs.join(',');
|
||||
}
|
||||
|
||||
if (form.value.id) {
|
||||
await updateGbWareById(data);
|
||||
} else {
|
||||
await addGbWare(data);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 300);
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
function backHandle() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
// 从本地获取商品信息
|
||||
function getLocalGoods() {
|
||||
let groupGoods = uni.getStorageSync('groupGoods');
|
||||
|
||||
console.log(groupGoods);
|
||||
|
||||
if (groupGoods && groupGoods.id) {
|
||||
form.value = groupGoods;
|
||||
|
||||
if (form.value.useShops !== '') {
|
||||
form.value.useShops = form.value.useShops.split(',');
|
||||
} else {
|
||||
form.value.useShops = [];
|
||||
}
|
||||
|
||||
if (form.value.wareImgs != '') {
|
||||
form.value.wareImgs = form.value.wareImgs.split(',');
|
||||
}
|
||||
|
||||
if (form.value.wareCommentImgs != '') {
|
||||
form.value.wareCommentImgs = form.value.wareCommentImgs.split(',');
|
||||
}
|
||||
|
||||
if (form.value.limitBuyNum == -10086) {
|
||||
limitBuyNumSwitch.value = false;
|
||||
} else {
|
||||
limitBuyNumSwitch.value = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.type && options.type == 'editor') {
|
||||
type.value = options.type;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑商品'
|
||||
});
|
||||
getLocalGoods();
|
||||
} else {
|
||||
type.value = 'add';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 28upx;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 28upx;
|
||||
}
|
||||
}
|
||||
.switch-wrap {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&.column {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tips {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding-top: 16upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16upx;
|
||||
.i {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
286
pageMarket/packagePopularize/components/goodsList.vue
Normal file
286
pageMarket/packagePopularize/components/goodsList.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-wrap" :style="{ top: `${top}px` }">
|
||||
<view class="ipt">
|
||||
<u-input
|
||||
placeholder="请输入商品名称"
|
||||
suffixIcon="search"
|
||||
shape="circle"
|
||||
clearable
|
||||
v-model="queryForm.wareName"
|
||||
@confirm="getGbWarePageAjax(1)"
|
||||
@clear="getGbWarePageAjax(1)"
|
||||
></u-input>
|
||||
</view>
|
||||
<div class="ipt" @click="showStatusSheet = true">
|
||||
<u-input placeholder="上架状态" readonly v-model="queryForm.onlineStatusLabel" suffixIcon="arrow-down"></u-input>
|
||||
</div>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||||
<view class="header">
|
||||
<text class="t1">成团人数：{{ item.groupPeopleNum }}</text>
|
||||
<text class="t1">成团期限（小时）：{{ item.groupTimeoutHour }}</text>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="img-wrap">
|
||||
<image class="img" :src="item.wareImgs.split(',')[0]" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="t1">{{ item.wareName }}</text>
|
||||
<text class="t1">原价：{{ item.originalPrice }}</text>
|
||||
<text class="t1">拼团价：{{ item.groupPrice }}</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<view class="row">
|
||||
<u-switch v-model="item.onlineStatus" :active-value="1" :inactive-value="0" @change="onlineStatusChange($event, item)"></u-switch>
|
||||
</view>
|
||||
<text class="t1">
|
||||
<template v-if="item.onlineStatus">下架</template>
|
||||
<template v-else>上架</template>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<template v-if="!item.onlineStatus">
|
||||
<view class="btn">
|
||||
<u-button shape="circle" @click="delHandle(item)">删除</u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button type="primary" shape="circle" @click="editorHandle(item)">编辑</u-button>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="btn" style="width: 150px">
|
||||
<u-button shape="circle">下架后编辑/删除</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="listData.status"></u-loadmore>
|
||||
<u-action-sheet
|
||||
:actions="[
|
||||
{ name: '全部', value: '' },
|
||||
{ name: '上架', value: 1 },
|
||||
{ name: '下架', value: 0 }
|
||||
]"
|
||||
title="上架状态"
|
||||
:show="showStatusSheet"
|
||||
cancelText="取消"
|
||||
@close="showStatusSheet = false"
|
||||
@select="sheetConfirm"
|
||||
></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { getGbWarePage, editOnlineStatus, deleteGbWare } from '@/http/api/ware.js';
|
||||
|
||||
const props = defineProps({
|
||||
top: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const showStatusSheet = ref(false);
|
||||
const queryForm = reactive({
|
||||
wareName: '',
|
||||
onlineStatusLabel: '',
|
||||
onlineStatus: ''
|
||||
});
|
||||
|
||||
// 选择状态
|
||||
function sheetConfirm(e) {
|
||||
queryForm.onlineStatusLabel = e.name;
|
||||
queryForm.onlineStatus = e.value;
|
||||
getGbWarePageAjax(1);
|
||||
}
|
||||
|
||||
const listData = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loading',
|
||||
list: []
|
||||
});
|
||||
|
||||
function reachBottom() {
|
||||
if (listData.status != 'nomore') {
|
||||
listData.page++;
|
||||
getGbWarePageAjax();
|
||||
}
|
||||
}
|
||||
|
||||
// 改变状态
|
||||
async function onlineStatusChange(e, item) {
|
||||
try {
|
||||
const res = await editOnlineStatus({
|
||||
id: item.id,
|
||||
onlineStatus: item.onlineStatus
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
item.onlineStatus = !item.onlineStatus;
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function delHandle(item) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `确定要删除${item.wareName}商品吗？`,
|
||||
success: async (res) => {
|
||||
try {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
const res = await deleteGbWare(item.id);
|
||||
let index = listData.list.findIndex((val) => val.id == item.id);
|
||||
listData.list.splice(index, 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function editorHandle(item) {
|
||||
uni.setStorageSync('groupGoods', item);
|
||||
uni.navigateTo({
|
||||
url: '/pageMarket/groupGoods/addGoods?type=editor'
|
||||
});
|
||||
}
|
||||
|
||||
// 拼团商品-列表
|
||||
async function getGbWarePageAjax(page = listData.page, isPull = false) {
|
||||
try {
|
||||
const res = await getGbWarePage({
|
||||
page: page,
|
||||
size: listData.size,
|
||||
...queryForm
|
||||
});
|
||||
|
||||
if (listData.page == 1) {
|
||||
listData.list = res.records;
|
||||
} else {
|
||||
listData.list.push(...res.records);
|
||||
}
|
||||
|
||||
if (res.pageNumber >= res.totalPage) {
|
||||
listData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
if (isPull) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.stopPullDownRefresh();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reachBottom,
|
||||
getGbWarePageAjax
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getGbWarePageAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28upx;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0 28upx;
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding-bottom: 28upx;
|
||||
.item {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28upx 0;
|
||||
.img-wrap {
|
||||
$size: 160upx;
|
||||
position: relative;
|
||||
width: $size;
|
||||
height: $size;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 28upx;
|
||||
gap: 4px;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 28upx;
|
||||
.btn {
|
||||
width: 140upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
519
pageMarket/packagePopularize/components/orderList.vue
Normal file
519
pageMarket/packagePopularize/components/orderList.vue
Normal file
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-wrap" :style="{ top: `${top}px` }">
|
||||
<view class="top">
|
||||
<view class="ipt">
|
||||
<u-input
|
||||
placeholder="请输入订单号"
|
||||
prefixIcon="search"
|
||||
shape="circle"
|
||||
clearable
|
||||
v-model="queryForm.orderNo"
|
||||
@confirm="gbOrderPageAjax(1)"
|
||||
@clear="gbOrderPageAjax(1)"
|
||||
></u-input>
|
||||
</view>
|
||||
<div class="ipt" @click="dateRef.open()">
|
||||
<u-input placeholder="支付时间范围" readonly v-model="time" suffixIcon="arrow-down"></u-input>
|
||||
</div>
|
||||
</view>
|
||||
<view class="tab-wrap">
|
||||
<view class="item" :class="{ active: statusActive == index }" v-for="(item, index) in tabs" :key="index" @click="tabChange(index)">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||||
<view class="header">
|
||||
<view class="left">
|
||||
<text class="t1">订单号：{{ item.orderNo }}</text>
|
||||
<text class="t1">团单号：{{ item.groupOrderNo }}</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<u-tag plain plainFill :type="statusFilter(item.status).type">{{ item.status }}</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<text class="t1">用户：{{ item.userName }} {{ item.userPhone }}</text>
|
||||
<text class="t2">核销码：{{ item.verifyCode }}</text>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<image class="img" :src="item.wareJson.wareImgs.split(',')[0]" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<view class="left">
|
||||
<text class="t1">{{ item.wareJson.wareName }}</text>
|
||||
<text class="t1">x{{ item.num }}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="t1">{{ item.payAmount }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-wrap">
|
||||
<text class="t">下单时间：{{ item.createTime }}</text>
|
||||
<text class="t" v-if="item.verifyTime">核销时间：{{ item.verifyTime }}</text>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="btn">
|
||||
<u-button shape="circle" style="width: 100%" v-if="includesString(item.status, '退款中')" @click="showRefundPopupHandle(item)">审核</u-button>
|
||||
</view>
|
||||
<view class="btn" v-if="includesString(item.status, '待核销') || includesString(item.status, '待成团')">
|
||||
<u-button shape="circle" style="width: 100%" @click="refundHandle(item)">退款</u-button>
|
||||
</view>
|
||||
<view class="btn" v-if="includesString(item.status, '待核销')">
|
||||
<u-button type="primary" shape="circle" style="width: 100%" @click="checkoutHandle(item)">核销</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="listData.status"></u-loadmore>
|
||||
<my-date-pickerview ref="dateRef" @confirm="dateConfirmHandle"></my-date-pickerview>
|
||||
<u-popup :show="showRefundPopup" :round="20" mode="bottom" closeable @close="showRefundPopup = false">
|
||||
<view class="refund-popup-content">
|
||||
<view class="refund-popup-title">
|
||||
<text class="t">退款审核</text>
|
||||
</view>
|
||||
<view class="form">
|
||||
<u-form :model="refundForm" label-width="70" label-position="left">
|
||||
<u-form-item label="是否同意">
|
||||
<u-radio-group v-model="refundForm.type">
|
||||
<u-radio label="同意" :name="1" :customStyle="{ marginRight: '15px' }"></u-radio>
|
||||
<u-radio label="驳回" :name="0"></u-radio>
|
||||
</u-radio-group>
|
||||
</u-form-item>
|
||||
<u-form-item label="驳回原因" v-if="refundForm.type === 0">
|
||||
<u-textarea type="textarea" v-model="refundForm.reason" placeholder="请输入驳回原因"></u-textarea>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
<view class="dialog-footer">
|
||||
<view class="btn">
|
||||
<u-button @click="showRefundPopup = false" shape="circle" style="width: 100%">取消</u-button>
|
||||
</view>
|
||||
<div class="btn">
|
||||
<u-button type="primary" shape="circle" @click="returnCostConfirmHandle" :loading="refundLoading" style="width: 100%">确认</u-button>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { includesString } from '@/utils/index.js';
|
||||
import { gbOrderPage, agreeRefund, rejectRefund, checkout } from '@/http/api/ware.js';
|
||||
|
||||
const dateRef = ref(null);
|
||||
|
||||
const props = defineProps({
|
||||
top: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const time = ref('');
|
||||
const queryForm = reactive({
|
||||
status: '',
|
||||
orderNo: '',
|
||||
orderStartTime: '',
|
||||
orderEndTime: ''
|
||||
});
|
||||
|
||||
// 确认选择时间
|
||||
function dateConfirmHandle(e) {
|
||||
queryForm.orderStartTime = e.start;
|
||||
queryForm.orderEndTime = e.end;
|
||||
time.value = e.text;
|
||||
gbOrderPageAjax(1);
|
||||
}
|
||||
|
||||
const statusActive = ref(0);
|
||||
const tabs = ref([
|
||||
{
|
||||
value: '',
|
||||
label: '全部'
|
||||
},
|
||||
{
|
||||
value: '待成团',
|
||||
label: '待成团'
|
||||
},
|
||||
{
|
||||
value: '待核销',
|
||||
label: '待核销'
|
||||
},
|
||||
{
|
||||
value: '已核销',
|
||||
label: '已核销'
|
||||
},
|
||||
{
|
||||
value: '退款中',
|
||||
label: '退款'
|
||||
}
|
||||
]);
|
||||
|
||||
const statusList = ref([
|
||||
{
|
||||
value: '待支付',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
value: '待核销',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: '待成团',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: '已核销',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
value: '退款中',
|
||||
type: 'danger'
|
||||
},
|
||||
{
|
||||
value: '已退款',
|
||||
type: 'info'
|
||||
}
|
||||
]);
|
||||
|
||||
// 过滤状态
|
||||
function statusFilter(status) {
|
||||
let obj = statusList.value.find((item) => item.value == status);
|
||||
if (obj) {
|
||||
return obj;
|
||||
} else {
|
||||
return {
|
||||
value: status,
|
||||
type: 'info'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function tabChange(index) {
|
||||
statusActive.value = index;
|
||||
listData.page = 1;
|
||||
queryForm.status = tabs.value[index].value;
|
||||
gbOrderPageAjax();
|
||||
}
|
||||
|
||||
const listData = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loading',
|
||||
list: []
|
||||
});
|
||||
|
||||
// 滚动到底部，方法需要暴露给父级
|
||||
function reachBottom() {
|
||||
if (listData.status != 'nomore') {
|
||||
listData.page++;
|
||||
gbOrderPageAjax();
|
||||
}
|
||||
}
|
||||
|
||||
// 退款
|
||||
function refundHandle(item) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `确定要给[${item.userName}/${item.userPhone}]退款吗?`,
|
||||
success: async (res) => {
|
||||
try {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '退款中...'
|
||||
});
|
||||
const res = await agreeRefund({
|
||||
recordId: item.id,
|
||||
orderNo: item.orderNo,
|
||||
reason: ''
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '退款成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 100);
|
||||
goodsRecordPageAjax(1);
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 退款popup
|
||||
const refundLoading = ref(false);
|
||||
const showRefundPopup = ref(false);
|
||||
const refundForm = ref({
|
||||
type: 1,
|
||||
recordId: '',
|
||||
orderNo: '',
|
||||
reason: ''
|
||||
});
|
||||
// 显示退款popup
|
||||
function showRefundPopupHandle(item) {
|
||||
showRefundPopup.value = true;
|
||||
refundForm.value.recordId = item.id;
|
||||
refundForm.value.orderNo = item.orderNo;
|
||||
}
|
||||
// 退款操作
|
||||
async function returnCostConfirmHandle() {
|
||||
try {
|
||||
refundLoading.value = true;
|
||||
if (refundForm.value.type == 1) {
|
||||
// 同意
|
||||
await agreeRefund(refundForm.value);
|
||||
} else {
|
||||
// 驳回
|
||||
await rejectRefund(refundForm.value);
|
||||
}
|
||||
showRefundPopup.value = false;
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 100);
|
||||
goodsRecordPageAjax(1);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
refundLoading.value = false;
|
||||
}
|
||||
|
||||
// 核销操作
|
||||
async function checkoutHandle(item) {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确认要核销吗?',
|
||||
success: async (res) => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '核销中...',
|
||||
mask: true
|
||||
});
|
||||
await checkout(item.verifyCode);
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '已核销',
|
||||
icon: 'none'
|
||||
});
|
||||
}, 100);
|
||||
item.status = '已核销';
|
||||
item.verifyTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取拼团商品:订单列表
|
||||
async function gbOrderPageAjax(page = listData.page, isPull = false) {
|
||||
try {
|
||||
const res = await gbOrderPage({
|
||||
page: page,
|
||||
size: listData.size,
|
||||
...queryForm
|
||||
});
|
||||
|
||||
res.records.forEach((item) => {
|
||||
item.wareJson = JSON.parse(item.wareJson);
|
||||
});
|
||||
|
||||
if (listData.page == 1) {
|
||||
listData.list = res.records;
|
||||
} else {
|
||||
listData.list.push(...res.records);
|
||||
}
|
||||
|
||||
if (res.pageNumber >= res.totalPage) {
|
||||
listData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reachBottom,
|
||||
gbOrderPageAjax
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
gbOrderPageAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding-top: 100px;
|
||||
}
|
||||
.search-wrap {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
.top {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28upx;
|
||||
padding: 0 28upx;
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.tab-wrap {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
padding: 0 28upx;
|
||||
.item {
|
||||
--activeColor: #318afe;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.active {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--activeColor);
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
}
|
||||
.t {
|
||||
color: var(--activeColor);
|
||||
}
|
||||
}
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding-bottom: 28upx;
|
||||
.item {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28upx;
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.t1 {
|
||||
color: #999;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
margin-top: 20upx;
|
||||
justify-content: space-between;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
.t2 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
margin-top: 20upx;
|
||||
.img {
|
||||
$size: 90upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20upx;
|
||||
.t1 {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
.t1 {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.time-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20upx;
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20upx;
|
||||
gap: 28upx;
|
||||
.btn {
|
||||
width: 180upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.refund-popup-content {
|
||||
padding: 0 28upx;
|
||||
.refund-popup-title {
|
||||
padding: 28upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.form {
|
||||
padding: 28upx;
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
193
pageMarket/packagePopularize/index.vue
Normal file
193
pageMarket/packagePopularize/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<!-- 套餐推广 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<my-header-card
|
||||
:options="{
|
||||
name: '套餐推广',
|
||||
intro: '下单通过用户邀请好友减免金额的方式裂变宣传套餐加购',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/d660089c797346a4afba90e00464d557.png'
|
||||
}"
|
||||
showSwitch
|
||||
v-model:isOpen="form.onlineStatus"
|
||||
@load="(e) => (headHeight = e.height)"
|
||||
></my-header-card>
|
||||
<view class="tab-wrap" :style="{ top: `${headHeight}px` }">
|
||||
<view class="tab-list">
|
||||
<view class="item" v-for="(item, index) in tabs" :class="{ active: tabsActive == index }" :key="item.value" @click="tabClickHandle(item, index)">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<goodsList ref="goodsListRef" name="goodsList" key="goodsList" :top="headHeight + 54" v-if="tabsActive == 0" />
|
||||
<orderList ref="orderListRef" name="orderList" key="orderList" :top="headHeight + 54" v-if="tabsActive == 1" />
|
||||
</view>
|
||||
<my-footer-btn confirmText="添加" v-if="tabsActive == 0" @confirm="toAdd"></my-footer-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import goodsList from './components/goodsList.vue';
|
||||
import orderList from './components/orderList.vue';
|
||||
import { upShopConfig } from '@/http/api/ware.js';
|
||||
import { getShopInfo } from '@/http/api/shop.js';
|
||||
|
||||
const goodsListRef = ref(null);
|
||||
const orderListRef = ref(null);
|
||||
|
||||
const headHeight = ref(0);
|
||||
const tabsActive = ref(0);
|
||||
const tabs = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '拼团活动'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '拼团订单'
|
||||
}
|
||||
]);
|
||||
|
||||
function tabClickHandle(item, index) {
|
||||
tabsActive.value = index;
|
||||
}
|
||||
|
||||
function toAdd() {
|
||||
uni.navigateTo({
|
||||
url: '/pageMarket/groupGoods/addGoods'
|
||||
});
|
||||
}
|
||||
|
||||
// 活动开关
|
||||
const form = ref({
|
||||
onlineStatus: 1
|
||||
});
|
||||
|
||||
watch(
|
||||
() => form.value.onlineStatus,
|
||||
(newValue, oldValue) => {
|
||||
upShopConfigAjax();
|
||||
}
|
||||
);
|
||||
|
||||
// 更改开关状态
|
||||
async function upShopConfigAjax() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
const res = await upShopConfig(form.value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
switch (tabsActive.value) {
|
||||
case 0:
|
||||
goodsListRef.value?.getGbWarePageAjax(1, true);
|
||||
break;
|
||||
case 1:
|
||||
orderListRef.value?.getGbWarePageAjax(1, true);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 滚动到底部
|
||||
onReachBottom(() => {
|
||||
switch (tabsActive.value) {
|
||||
case 0:
|
||||
goodsListRef.value?.reachBottom();
|
||||
break;
|
||||
case 1:
|
||||
orderListRef.value?.reachBottom();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 获取配置信息
|
||||
async function getShopInfoAjax() {
|
||||
try {
|
||||
const res = await getShopInfo();
|
||||
form.value.onlineStatus = res.isGroupBuy;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面显示
|
||||
onShow(() => {
|
||||
switch (tabsActive.value) {
|
||||
case 0:
|
||||
goodsListRef.value?.getGbWarePageAjax(1);
|
||||
break;
|
||||
case 1:
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
onLoad(() => {
|
||||
getShopInfoAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
$bgColor: #e6f0ff;
|
||||
$primarColor: #318afe;
|
||||
.content {
|
||||
padding: calc(54px + 28upx) 28upx 28upx;
|
||||
}
|
||||
|
||||
.tab-wrap {
|
||||
height: 54px;
|
||||
padding: 10px 14px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
.tab-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: $bgColor;
|
||||
padding: 6upx;
|
||||
border-radius: 12upx;
|
||||
.item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8upx;
|
||||
.t {
|
||||
color: $primarColor;
|
||||
font-size: 28upx;
|
||||
}
|
||||
&.active {
|
||||
background-color: $primarColor;
|
||||
.t {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user