新增积分锁客页面，基础设置，商品设置，兑换记录
This commit is contained in:
415
pageMarket/points/addProduct.vue
Normal file
415
pageMarket/points/addProduct.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-form ref="formRef" :model="form" :rules="rules" label-position="top">
|
||||
<view class="card">
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品类型</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<u-radio-group v-model="form.goodsCategory">
|
||||
<u-radio label="优惠券" name="优惠券"></u-radio>
|
||||
<u-radio label="其它商品" name="其它商品"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="couponId" v-if="includesString(form.goodsCategory, '优惠券')">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">选择优惠券</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<my-select-coupon v-model="form.couponId"></my-select-coupon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="goodsName">
|
||||
<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.goodsName"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="goodsImageUrl" v-if="includesString(form.goodsCategory, '其它商品')">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品图片</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<my-upload-img v-model="form.goodsImageUrl"></my-upload-img>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="requiredPoints">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">所需积分</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="8" v-model="form.requiredPoints" @change="requiredPointsInput">
|
||||
<template #suffix>
|
||||
<text>积分</text>
|
||||
</template>
|
||||
</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-input placeholder="请输入" :maxlength="8" v-model="form.extraPrice" @change="extraPriceInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="quantity">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">数量</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="8" v-model="form.quantity" @change="quantityInput"></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-input placeholder="请输入" :maxlength="8" v-model="form.sort" @change="sortInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="limitQuota">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">每人限购</text>
|
||||
<u-switch v-model="isLimitQuota" :active-value="1" :inactive-value="0" @change="isLimitQuotaChange"></u-switch>
|
||||
</view>
|
||||
<view class="info" v-if="isLimitQuota == 1">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入限购数量" :maxlength="8" v-model="form.limitQuota" @change="limitQuotaInput"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="limitQuota">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">发放方式</text>
|
||||
<text class="intro">
|
||||
<template class="tips" v-if="includesString(form.goodsCategory, '优惠券')">系统发放</template>
|
||||
<template class="tips" v-if="includesString(form.goodsCategory, '其它商品')">需要用户到店内领取核销</template>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card" v-if="includesString(form.goodsCategory, '其它商品')">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">商品图片</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<my-upload-imgs v-model="imgs"></my-upload-imgs>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="limitQuota">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">是否上架</text>
|
||||
<u-switch v-model="form.status" :active-value="1" :inactive-value="0"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</u-form>
|
||||
<my-footer-btn type="horizontal" showCancel @confirm="submitHandle"></my-footer-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { pointsGoodsPost, pointsGoodsDetail } from '@/http/api/market/point.js';
|
||||
import { includesString, filterNumberInput } from '@/utils/index.js';
|
||||
|
||||
const formRef = ref(null);
|
||||
const isLimitQuota = ref(0);
|
||||
const imgs = ref([]);
|
||||
const form = ref({
|
||||
id: '',
|
||||
goodsCategory: '优惠券', // 商品类型 优惠券 其它商品
|
||||
couponId: '', // 优惠券id
|
||||
goodsName: '', // 商品名称/优惠券名称
|
||||
goodsImageUrl: '', // 商品图片URL
|
||||
requiredPoints: '', // 所需积分
|
||||
extraPrice: '', // 额外价格
|
||||
quantity: '', // 数量
|
||||
sort: 0,
|
||||
status: 1, // 是否上架 1-是 0-否
|
||||
receiveType: '', // 领取方式 店内自取、系统发放
|
||||
limitQuota: '', // 限购数量
|
||||
goodsDescription: '' // 商品详情
|
||||
});
|
||||
|
||||
function isLimitQuotaChange() {
|
||||
form.value.limitQuota = '';
|
||||
}
|
||||
|
||||
const rules = ref({
|
||||
couponId: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请选择优惠券',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.couponId === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
goodsName: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.goodsName === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
goodsImageUrl: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['change'],
|
||||
message: '请上传商品封面图',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.goodsImageUrl === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
requiredPoints: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.requiredPoints < 0 || form.value.requiredPoints === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
quantity: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.quantity < 0 || form.value.quantity === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
limitQuota: [
|
||||
{
|
||||
trigger: ['blur'],
|
||||
message: '请输入限购数量',
|
||||
validator: (rule, value, callback) => {
|
||||
if (isLimitQuota.value == 1 && form.value.limitQuota === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function requiredPointsInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.requiredPoints = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function extraPriceInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.extraPrice = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function quantityInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.quantity = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function sortInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.sort = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function limitQuotaInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.limitQuota = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submitHandle() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
const data = { ...form.value };
|
||||
if (imgs.value.length > 0) {
|
||||
data.goodsDescription = JSON.stringify(imgs.value);
|
||||
}
|
||||
await pointsGoodsPost(data);
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// 积分:商品:详情
|
||||
async function pointsGoodsDetailAjax() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
const obj = await pointsGoodsDetail(form.value.id);
|
||||
form.value = obj;
|
||||
if (obj.goodsDescription !== '') {
|
||||
imgs.value = JSON.parse(obj.goodsDescription);
|
||||
}
|
||||
if (obj.limitQuota !== '' && obj.limitQuota !== null) {
|
||||
isLimitQuota.value = 1;
|
||||
} else {
|
||||
isLimitQuota.value = 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.id) {
|
||||
form.value.id = options.id;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑商品'
|
||||
});
|
||||
pointsGoodsDetailAjax();
|
||||
}
|
||||
});
|
||||
</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;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user