Skip to content

O
occloud-server
Commit fd6ab3c7 by liuliufashi
Options

update

parent 8a9ab000
Showing with 13820 additions and 10 deletions
web-vue-admin/.history/src/views/goods-cabinet/index_20220715202524.vue 0 → 100644
<template>
<div class="good-page">
<div class="good-search" v-if="!isShowGoods">
<div>
<a-radio-group v-model:value="status">
<a-radio-button value="0" class="status" @click="onSearch">全部</a-radio-button>
<a-radio-button value="1" class="status" @click="onSearch">正常</a-radio-button>
<a-radio-button value="2" class="status" @click="onSearch">已下架</a-radio-button>
</a-radio-group>
<a-input-search v-model:value="value" placeholder="请输入商品名称" style="width: 200px; margin-left: 10px"
@search="onSearch" />
</div>
<div class="good-cad">
<a-button type="primary" class="mr10" @click="onGoods(0)">新建商品</a-button>
<a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
</div>
</div>
<div class="goods-list" v-if="!isShowGoods">
<a-table :columns="columns" :data-source="list">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'tags'">
<a-button type="primary">编辑</a-button>
<a-button type="primary" style="margin-left:20px;">统计</a-button>
<a-button type="primary" style="margin-left:20px;">下架</a-button>
<a-button type="primary" style="margin-left:20px;">删除</a-button>
</template>
</template>
</a-table>
</div>
<div v-if="isShowGoods">
<div style="display: flex; align-items: center; justify-content: space-between" v-if="isShowGoods">
<a-button class="small left" @click="onBack">
<template #icon>
<LeftOutlined />
</template>
</a-button>
</div>
<GoodsBags :props="{ propsData }" v-if="propsData.isCad == 0" @onBack="onBack"></GoodsBags>
<GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack"> </GoodsBagSubs>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/goods/index.vue";
import GoodsBagSubs from "./components/goodsubs/index.vue";
import { onSelectGoods,onfindby } from '@/api/index'
import { getUid } from "@/utils/userInfo";
const columns = [
{
title: "商品编号",
dataIndex: "goodsid",
key: "goodsid",
},
{
title: "商品名称",
dataIndex: "shortname",
key: "shortname",
},
{
title: "商品类型",
dataIndex: "sellingmodel",
key: "sellingmodel",
},
{
title: "商品售卖数",
key: "markingprice",
dataIndex: "markingprice",
},
{
title: "默认金额售卖数",
key: "price",
dataIndex: "price",
},
{
title: "已售金额",
key: "price",
dataIndex: "price",
},
{
title: "商品状态",
key: "status",
dataIndex: "status",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
interface props {
isCad: Number;
}
const list = ref<Array<Object>>([])
const value = ref<string>("");
const status = ref<string>("0")
const propsData = reactive<props>({
isCad: 0,
});
const isShowGoods = ref<Boolean>(false);
const onSearch = async() => {
const params = {
status:status.value,
name:value.value,
uid:getUid()
}
const data = await onfindby(params)
list.value = data.data
};
const onGoods = (e: Number) => {
propsData.isCad = e;
isShowGoods.value = true;
};
const onBack = (e: Number) => {
isShowGoods.value = !isShowGoods.value;
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
return list
})
defineExpose({
status,
value,
columns,
isShowGoods,
propsData,
onBack,
onSearch,
onGoods,
});
</script>
<style lang="less" scoped>
.good-page {
.good-search {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.status{
margin-right: 20px;
width: 80px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.65);
}
.status::before{
display: none;
}
.ant-radio-button-wrapper-checked{
border: 1px solid @primary-color;
}
.ood-cad {
width: 100%;
}
.ml10 {
margin-left: 10px;
}
.mr10 {
margin-right: 10px;
}
}
.goods-list {
margin-top: 10px;
}
.small {
border: none;
height: 30px;
width: 50px;
}
.left {
border-left: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-right-width: 80%;
border-right: 1px solid rgb(236, 236, 236);
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
}
</style>
<style lang="less">
.ant-layout-content{
overflow-y: scroll;
}
</style>
web-vue-admin/.history/src/views/goods-cabinet/index_20220715202528.vue 0 → 100644
<template>
<div class="good-page">
<div class="good-search" v-if="!isShowGoods">
<div>
<a-radio-group v-model:value="status">
<a-radio-button value="0" class="status" @click="onSearch">全部</a-radio-button>
<a-radio-button value="1" class="status" @click="onSearch">正常</a-radio-button>
<a-radio-button value="2" class="status" @click="onSearch">已下架</a-radio-button>
</a-radio-group>
<a-input-search v-model:value="value" placeholder="请输入商品名称" style="width: 200px; margin-left: 10px"
@search="onSearch" />
</div>
<div class="good-cad">
<a-button type="primary" class="mr10" @click="onGoods(0)">新建商品</a-button>
<a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
</div>
</div>
<div class="goods-list" v-if="!isShowGoods">
<a-table :columns="columns" :data-source="list">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'tags'">
<a-button type="primary">编辑</a-button>
<a-button type="primary" style="margin-left:20px;">统计</a-button>
<a-button type="primary" style="margin-left:20px;">下架</a-button>
<a-button type="primary" style="margin-left:20px;">删除</a-button>
</template>
</template>
</a-table>
</div>
<div v-if="isShowGoods">
<div style="display: flex; align-items: center; justify-content: space-between" v-if="isShowGoods">
<a-button class="small left" @click="onBack">
<template #icon>
<LeftOutlined />
</template>
</a-button>
</div>
<GoodsBags :props="{ propsData }" v-if="propsData.isCad == 0" @onBack="onBack"></GoodsBags>
<GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack"> </GoodsBagSubs>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/goods/index.vue";
import GoodsBagSubs from "./components/goodsubs/index.vue";
import { onSelectGoods,onfindby } from '@/api/index'
import { getUid } from "@/utils/userInfo";
const columns = [
{
title: "商品编号",
dataIndex: "goodsid",
key: "goodsid",
},
{
title: "商品名称",
dataIndex: "shortname",
key: "shortname",
},
{
title: "商品类型",
dataIndex: "sellingmodel",
key: "sellingmodel",
},
{
title: "商品售卖数",
key: "markingprice",
dataIndex: "markingprice",
},
{
title: "默认金额售卖数",
key: "price",
dataIndex: "price",
},
{
title: "已售金额",
key: "price",
dataIndex: "price",
},
{
title: "商品状态",
key: "status",
dataIndex: "status",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
interface props {
isCad: Number;
}
const list = ref<Array<Object>>([])
const value = ref<string>("");
const status = ref<string>("0")
const propsData = reactive<props>({
isCad: 0,
});
const isShowGoods = ref<Boolean>(false);
const onSearch = async() => {
const params = {
status:status.value,
name:value.value,
uid:getUid()
}
const data = await onfindby(params)
list.value = data.data
};
const onGoods = (e: Number) => {
propsData.isCad = e;
isShowGoods.value = true;
};
const onBack = async(e: Number) => {
isShowGoods.value = !isShowGoods.value;
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
return list
})
defineExpose({
status,
value,
columns,
isShowGoods,
propsData,
onBack,
onSearch,
onGoods,
});
</script>
<style lang="less" scoped>
.good-page {
.good-search {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.status{
margin-right: 20px;
width: 80px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.65);
}
.status::before{
display: none;
}
.ant-radio-button-wrapper-checked{
border: 1px solid @primary-color;
}
.ood-cad {
width: 100%;
}
.ml10 {
margin-left: 10px;
}
.mr10 {
margin-right: 10px;
}
}
.goods-list {
margin-top: 10px;
}
.small {
border: none;
height: 30px;
width: 50px;
}
.left {
border-left: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-right-width: 80%;
border-right: 1px solid rgb(236, 236, 236);
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
}
</style>
<style lang="less">
.ant-layout-content{
overflow-y: scroll;
}
</style>
web-vue-admin/.history/src/views/goods-cabinet/index_20220715202532.vue 0 → 100644
<template>
<div class="good-page">
<div class="good-search" v-if="!isShowGoods">
<div>
<a-radio-group v-model:value="status">
<a-radio-button value="0" class="status" @click="onSearch">全部</a-radio-button>
<a-radio-button value="1" class="status" @click="onSearch">正常</a-radio-button>
<a-radio-button value="2" class="status" @click="onSearch">已下架</a-radio-button>
</a-radio-group>
<a-input-search v-model:value="value" placeholder="请输入商品名称" style="width: 200px; margin-left: 10px"
@search="onSearch" />
</div>
<div class="good-cad">
<a-button type="primary" class="mr10" @click="onGoods(0)">新建商品</a-button>
<a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
</div>
</div>
<div class="goods-list" v-if="!isShowGoods">
<a-table :columns="columns" :data-source="list">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'tags'">
<a-button type="primary">编辑</a-button>
<a-button type="primary" style="margin-left:20px;">统计</a-button>
<a-button type="primary" style="margin-left:20px;">下架</a-button>
<a-button type="primary" style="margin-left:20px;">删除</a-button>
</template>
</template>
</a-table>
</div>
<div v-if="isShowGoods">
<div style="display: flex; align-items: center; justify-content: space-between" v-if="isShowGoods">
<a-button class="small left" @click="onBack">
<template #icon>
<LeftOutlined />
</template>
</a-button>
</div>
<GoodsBags :props="{ propsData }" v-if="propsData.isCad == 0" @onBack="onBack"></GoodsBags>
<GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack"> </GoodsBagSubs>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/goods/index.vue";
import GoodsBagSubs from "./components/goodsubs/index.vue";
import { onSelectGoods,onfindby } from '@/api/index'
import { getUid } from "@/utils/userInfo";
const columns = [
{
title: "商品编号",
dataIndex: "goodsid",
key: "goodsid",
},
{
title: "商品名称",
dataIndex: "shortname",
key: "shortname",
},
{
title: "商品类型",
dataIndex: "sellingmodel",
key: "sellingmodel",
},
{
title: "商品售卖数",
key: "markingprice",
dataIndex: "markingprice",
},
{
title: "默认金额售卖数",
key: "price",
dataIndex: "price",
},
{
title: "已售金额",
key: "price",
dataIndex: "price",
},
{
title: "商品状态",
key: "status",
dataIndex: "status",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
interface props {
isCad: Number;
}
const list = ref<Array<Object>>([])
const value = ref<string>("");
const status = ref<string>("0")
const propsData = reactive<props>({
isCad: 0,
});
const isShowGoods = ref<Boolean>(false);
const onSearch = async() => {
const params = {
status:status.value,
name:value.value,
uid:getUid()
}
const data = await onfindby(params)
list.value = data.data
};
const onGoods = (e: Number) => {
propsData.isCad = e;
isShowGoods.value = true;
};
const onBack = async(e: Number) => {
isShowGoods.value = !isShowGoods.value;
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
return list
})
defineExpose({
status,
value,
columns,
isShowGoods,
propsData,
onBack,
onSearch,
onGoods,
});
</script>
<style lang="less" scoped>
.good-page {
.good-search {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.status{
margin-right: 20px;
width: 80px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.65);
}
.status::before{
display: none;
}
.ant-radio-button-wrapper-checked{
border: 1px solid @primary-color;
}
.ood-cad {
width: 100%;
}
.ml10 {
margin-left: 10px;
}
.mr10 {
margin-right: 10px;
}
}
.goods-list {
margin-top: 10px;
}
.small {
border: none;
height: 30px;
width: 50px;
}
.left {
border-left: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-right-width: 80%;
border-right: 1px solid rgb(236, 236, 236);
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
}
</style>
<style lang="less">
.ant-layout-content{
overflow-y: scroll;
}
</style>
web-vue-admin/.history/src/views/pay-bind/index_20220715202116.vue 0 → 100644
<template>
<div class="bind-page">
<div style="display: flex; align-items: center; justify-content: space-between">
<div>
<a-button class="small left" @click="onSetBackShowTable">
<template #icon>
<LeftOutlined />
</template>
</a-button>
<a-button class="small right">
<template #icon>
<MenuUnfoldOutlined />
</template>
</a-button>
</div>
<div>
<a-button type="primary" block @click="showModal" v-if="query && query.isShow">新建支付通道</a-button>
</div>
</div>
<div style="margin-top: 10px">
<a-table :columns="columns" :data-source="list" :pagination="false" v-if="isShowTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'wx'">
<div v-if="record.paytype == '1'">
<CheckCircleFilled style="font-size:25px; color:rgb(12, 191, 33);"></CheckCircleFilled>
</div>
<div v-else>
<CloseCircleFilled style="font-size:25px;color: rgb(250, 116, 116);"></CloseCircleFilled>
</div>
</template>
<template v-else-if="column.key === 'zfb'">
<div v-if="record.paytype == '2'">
<CheckCircleFilled style="font-size:25px;color:rgb(12, 191, 33);"></CheckCircleFilled>
</div>
<div v-else>
<CloseCircleFilled style="font-size:25px;color: rgb(250, 116, 116);"></CloseCircleFilled>
</div>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag v-for="tag in record.tags" :key="tag" :color="
tag === 'loser'
? 'volcano'
: tag.length > 5
? 'geekblue'
: 'green'
">
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'status'">
<div v-if="record.status === 0">
<span class="ml20" style="color: rgba(12, 191, 33, 1)">良好</span>
</div>
<div v-else-if="record.status === 1">
<span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
</div>
</template>
<template v-else-if="column.key === 'weight'">
<a-input-number id="inputNumber" v-model:value="record.weight" :min="1" :max="10"
@blur="onChangeWeight(record)" />
<span>1-10</span>
</template>
<template v-else-if="column.key === 'ref'">
<span>
<a-button danger @click="onSetShowTable(record)">配置</a-button>
</span>
<span>
<a-button danger style="margin-left: 10px" @click="onDis(record)">禁用</a-button>
</span>
</template>
</template>
</a-table>
<div v-else>
<a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
<a-form-item label="通道名称" has-feedback labelAlign="left" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入通道名称" />
</a-form-item>
<a-form-item label="appid:" has-feedback labelAlign="left" v-bind="validateInfos.appid">
<a-input v-model:value="modelRef.appid" placeholder="请输入appid" />
</a-form-item>
<a-form-item label="商户id:" has-feedback labelAlign="left" v-bind="validateInfos.privatekey">
<a-input v-model:value="modelRef.privatekey" placeholder="请输入商户id" />
</a-form-item>
<a-form-item label="密钥:" has-feedback labelAlign="left" v-bind="validateInfos.alipaypublickey">
<a-input v-model:value="modelRef.alipaypublickey" placeholder="请输入密钥" />
</a-form-item>
<!-- <a-form-item
label="域名配置:"
has-feedback
labelAlign="left"
v-bind="validateInfos.server_url"
>
<a-input
v-model:value="modelRef.server_url"
placeholder="请输入域名配置"
/>
</a-form-item> -->
<a-form-item>
<a-button type="primary" @click="onSubmit">保存</a-button>
</a-form-item>
</a-form>
</div>
</div>
<a-modal v-model:visible="visible" title="支付通道名称" @ok="handleOk" :footer="null">
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
@finish="onFinish" @finishFailed="onFinishFailed">
<a-form-item label="支付通道名称" name="name" :rules="[{ required: true, message: '请输入新建支付通道名称' }]">
<a-input v-model:value="formState.name" />
</a-form-item>
<p class="title">建议用该微信商户号主体名称作为通道名称</p>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit" @click="onCreate">确认</a-button>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { defineExpose, ref, reactive, computed, toRaw, onMounted } from "vue";
import { useRoute } from "vue-router";
import { Form } from "ant-design-vue";
import {
LeftOutlined,
MenuUnfoldOutlined,
CheckCircleFilled,
CloseCircleFilled,
} from "@ant-design/icons-vue";
import { onZfbPay, onWxPay, onfindAli, onfindWX, onUpdate, onUpdateWX } from "@/api/index";
import { message } from "ant-design-vue";
import { getUid } from "@/utils/userInfo";
import router from "@/router";
interface FormState {
name: String;
}
interface AppFormStateWX {
uid: String;
appid: String;
name: String;
mchid: String;
mchkey:String;
// server_url: String;
}
interface AppFormStateAl {
uid: String;
appid: String;
privatekey: String;
alipaypublickey: String;
name: String;
// server_url: String;
}
const useForm = Form.useForm;
const columns = [
{
title: "支付通道名称",
dataIndex: "name",
key: "name",
},
{
title: "微信",
dataIndex: "wx",
key: "wx",
},
{
title: "支付宝",
dataIndex: "zfb",
key: "zfb",
},
{
title: "状态",
key: "status",
dataIndex: "status",
},
{
title: "权重",
key: "weight",
},
{
title: "操作",
key: "ref",
},
];
const list = ref([]);
const route = useRoute();
const status = ref(0)
let modelRef = reactive<any>({})
let rulesRef = reactive<any>({})
const query: any = computed({
get: () => {
return route.query;
},
set: () => {
return route.query;
},
});
const dataFrom = ref<any>({})
const onChangeWeight = async (record: any) => {
const prarms = {
uid: getUid(),
...record
}
let data: any = {
}
if (query.value.paytype == 1) {
data = await onUpdateWX(JSON.stringify(prarms))
} else if (query.value.paytype == 2) {
data = await onUpdate(JSON.stringify(prarms))
}
if (data.state == 1) {
message.success('修改成功')
await init()
}
}
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
const onSubmit = async () => {
validate()
.then(async () => {
let data: any = {};
const prarms = {
paytype: query.value.paytype,
uid:getUid(),
...toRaw(modelRef),
};
if (status.value === 1) {
dataFrom.value = {
amount: dataFrom.value.amount,
id: dataFrom.value.id,
paystate: dataFrom.value.paystate,
paytype: dataFrom.value.paytype,
status: dataFrom.value.status,
weight: dataFrom.value.weight,
mchid:toRaw(modelRef).mchid,
mchkey:toRaw(modelRef).mchkey,
...toRaw(modelRef)
}
if (query.value.paytype == "1") {
data = await onUpdateWX(JSON.stringify(dataFrom.value))
} else if (query.value.paytype == "2") {
data = await onUpdate(JSON.stringify(dataFrom.value))
}
if (data.state === 1) {
isShowTable.value = true
message.success(data.message, 10);
} else {
message.warning(data.message, 10);
}
await init()
} else {
if (query.value.paytype == 1) {
data = await onWxPay(prarms);
} else if (query.value.paytype == 2) {
data = await onZfbPay(prarms);
}
if (data.state === 1) {
isShowTable.value = true
message.success(data.message, 10);
} else {
message.warning(data.message, 10);
}
await init()
}
})
.catch((err) => {
console.log("error", err);
});
};
const visible = ref<boolean>(false);
const isShowTable = ref<boolean>(true);
const showModal = () => {
visible.value = true;
};
const formState = reactive<FormState>({
name: "",
});
const handleOk = (e: MouseEvent) => {
visible.value = false;
};
const onFinish = (values: any) => {
console.log("Success:", values);
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const onSetShowTable = async (data: any) => {
console.log(data,'data');
status.value = 1
isShowTable.value = false;
if(query.value.paytype == 1){
const { mchid, mchkey, appid, name } = data
const uid: any = getUid()
modelRef.mchid = mchid
modelRef.mchkey = mchkey
modelRef.appid = appid
modelRef.name = name
// modelRef.server_url =server_url
modelRef.uid = uid
}else{
const { alipaypublickey, privatekey, appid, name } = data
const uid: any = getUid()
modelRef.alipaypublickey = alipaypublickey
modelRef.privatekey = privatekey
modelRef.appid = appid
modelRef.name = name
// modelRef.server_url =server_url
modelRef.uid = uid
}
dataFrom.value = data
};
const onCreated = () => {
isShowTable.value = false;
}
const onSetBackShowTable = () => {
router.go(-1)
};
const onDis = (data: any) => {
console.log(data, 'data');
}
const onCreate = () => {
modelRef.name = formState.name
visible.value = !visible.value
onCreated()
}
const init = async () => {
const uid: any = getUid()
let data: any = {}
if (query.value.paytype == 1) {
data = await onfindWX(uid);
} else if (query.value.paytype == 2) {
data = await onfindAli(uid);
}
list.value = data.data;
return list;
}
onMounted(async () => {
await init()
let rulesRef
let modelRef
if(query.value.paytype == 1) {
rulesRef = reactive({
mchid: [
{
required: true,
message: "请输入商户id",
},
],
mchkey: [
{
required: true,
message: "请输入密钥",
},
],
name: [
{
required: true,
message: "请输入通道名称",
},
],
// server_url: [
// {
// required: true,
// message: "请输入server_url",
// },
// ],
appid: [
{
required: true,
message: "请输入appid",
},
],
});
modelRef = reactive<AppFormStateWX>({
mchid: "",
mchkey: "",
uid: "",
appid: "",
name: "",
// server_url: "",
});
}else{
rulesRef = reactive({
alipaypublickey: [
{
required: true,
message: "请输入商户id",
},
],
privatekey: [
{
required: true,
message: "请输入密钥",
},
],
name: [
{
required: true,
message: "请输入通道名称",
},
],
// server_url: [
// {
// required: true,
// message: "请输入server_url",
// },
// ],
appid: [
{
required: true,
message: "请输入appid",
},
],
});
modelRef = reactive<AppFormStateAl>({
alipaypublickey: "",
privatekey: "",
uid: "",
appid: "",
name: "",
// server_url: "",
});
}
return {rulesRef,modelRef}
});
defineExpose({
list,
columns,
visible,
showModal,
handleOk,
formState,
onFinish,
onFinishFailed,
isShowTable,
onSetShowTable,
onCreated,
validateInfos,
resetFields,
onSubmit,
onCreate,
query,
onChangeWeight,
onDis,
modelRef
});
</script>
<style lang="less" scoped>
.bind-page {
.small {
border: none;
height: 30px;
width: 50px;
}
.left {
border-left: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-right-width: 80%;
border-right: 1px solid rgb(236, 236, 236);
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
.right {
border-right: 1px solid rgb(236, 236, 236);
border-top: 1px solid rgb(236, 236, 236);
border-bottom: 1px solid rgb(236, 236, 236);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
}
}
</style>
<style scoped>
.title {
text-align: center;
font-family: SourceHanSansSC;
font-weight: 400;
font-size: 13px;
color: rgba(190, 190, 190, 1);
font-style: normal;
letter-spacing: 0px;
line-height: 19px;
text-decoration: none;
}
</style>
web-vue-admin/.history/src/views/pay-config/compoents/header/index_20220715203350.vue 0 → 100644
<template>
<a-table :columns="columns" :data-source="props.list" :pagination="false">
<template #bodyCell="{ text, record, index, column }">
<div v-if="record.paytype == '1'&& column.key === 'name' ">
<div class="flex">
<WechatFilled :style="{ fontSize: '24px' }"></WechatFilled
><span class="ml20">微信支付</span>
</div>
</div>
<div v-else-if="record.paytype == '2'&& column.key === 'name' ">
<div class="flex">
<AlipaySquareFilled :style="{ fontSize: '24px' }"></AlipaySquareFilled
><span class="ml20">支付宝</span>
</div>
</div>
<div v-else-if="record.paytype == '3'&& column.key === 'name' ">
<div class="flex">
<DollarCircleFilled :style="{ fontSize: '24px' }"></DollarCircleFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-else-if="record.paytype == '4'&& column.key === 'name' ">
<div class="flex">
<CreditCardFilled :style="{ fontSize: '24px' }"></CreditCardFilled
><span class="ml20">花呗</span>
</div>
</div>
<div v-else-if="record.paytype == '5'&& column.key === 'name' ">
<div class="flex">
<SkypeFilled :style="{ fontSize: '24px' }"></SkypeFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-if="record.status== '0' &&column.key === 'status'">
<span class="ml20" style="color: rgba(12,191,33,1)">良好</span>
</div>
<div v-else-if="record.status== '1' &&column.key === 'status'">
<span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
</div>
<div v-else-if="column.key === 'tags'">
<a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button>
<a-popconfirm placement="top" ok-text="Yes" cancel-text="No" @confirm="confirm(record, index, column)">
<template #title>
<p>确任删除这条数据</p>
</template>
</a-popconfirm>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import { defineExpose,defineProps } from "vue";
import { useRouter } from "vue-router";
import {
AlipaySquareFilled,
WechatFilled,
DollarCircleFilled,
CreditCardFilled,
SkypeFilled,
} from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';
const columns = [
{
title: "支付渠道",
name: "Name",
dataIndex: "name",
key: "name",
},
{
title: "绑定账户数",
dataIndex: "amount",
key: "amount",
},
{
title: "当前预警",
dataIndex: "status",
key: "status",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
const router=useRouter()
const props = defineProps({
list:{
type:Object
}
})
const onOpenInfo = (record:any, index:any, column:any) => {
router.push({
path:'/home/paybind',
query:{
isShow:1,
paytype:record.paytype
}
})
};
const confirm = (record:any, index:any, column:any)=>{
console.log(record,index,column,"record");
}
defineExpose({
props,
onOpenInfo,
confirm
});
</script>
<style lang="less" scoped>
.flex {
display: flex;
align-items: center;
}
.ml20 {
margin-left: 20px;
}
</style>
web-vue-admin/.history/src/views/pay-config/compoents/header/index_20220715203353.vue 0 → 100644
<template>
<a-table :columns="columns" :data-source="props.list" :pagination="false">
<template #bodyCell="{ text, record, index, column }">
<div v-if="record.paytype == '1'&& column.key === 'name' ">
<div class="flex">
<WechatFilled :style="{ fontSize: '24px' }"></WechatFilled
><span class="ml20">微信支付</span>
</div>
</div>
<div v-else-if="record.paytype == '2'&& column.key === 'name' ">
<div class="flex">
<AlipaySquareFilled :style="{ fontSize: '24px' }"></AlipaySquareFilled
><span class="ml20">支付宝</span>
</div>
</div>
<div v-else-if="record.paytype == '3'&& column.key === 'name' ">
<div class="flex">
<DollarCircleFilled :style="{ fontSize: '24px' }"></DollarCircleFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-else-if="record.paytype == '4'&& column.key === 'name' ">
<div class="flex">
<CreditCardFilled :style="{ fontSize: '24px' }"></CreditCardFilled
><span class="ml20">花呗</span>
</div>
</div>
<div v-else-if="record.paytype == '5'&& column.key === 'name' ">
<div class="flex">
<SkypeFilled :style="{ fontSize: '24px' }"></SkypeFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-if="record.status== '0' &&column.key === 'status'">
<span class="ml20" style="color: rgba(12,191,33,1)">良好</span>
</div>
<div v-else-if="record.status== '1' &&column.key === 'status'">
<span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
</div>
<div v-else-if="column.key === 'tags'">
<a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button>
<a-popconfirm placement="top" ok-text="Yes" cancel-text="No" @confirm="confirm(record, index, column)">
<template #title>
<p>确任删除这条数据</p>
</template>
</a-popconfirm>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import { defineExpose,defineProps } from "vue";
import { useRouter } from "vue-router";
import {
AlipaySquareFilled,
WechatFilled,
DollarCircleFilled,
CreditCardFilled,
SkypeFilled,
} from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';
const columns = [
{
title: "支付渠道",
name: "Name",
dataIndex: "name",
key: "name",
},
{
title: "绑定账户数",
dataIndex: "amount",
key: "amount",
},
{
title: "当前预警",
dataIndex: "status",
key: "status",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
const router=useRouter()
const props = defineProps({
list:{
type:Object
}
})
const onOpenInfo = (record:any, index:any, column:any) => {
router.push({
path:'/home/paybind',
query:{
isShow:1,
paytype:record.paytype
}
})
};
const confirm = (record:any, index:any, column:any)=>{
console.log(record,index,column,"record");
}
defineExpose({
props,
onOpenInfo,
confirm
});
</script>
<style lang="less" scoped>
.flex {
display: flex;
align-items: center;
}
.ml20 {
margin-left: 20px;
}
</style>
web-vue-admin/.history/src/views/pay-config/compoents/header/index_20220715203358.vue 0 → 100644
<template>
<a-table :columns="columns" :data-source="props.list" :pagination="false">
<template #bodyCell="{ text, record, index, column }">
<div v-if="record.paytype == '1'&& column.key === 'name' ">
<div class="flex">
<WechatFilled :style="{ fontSize: '24px' }"></WechatFilled
><span class="ml20">微信支付</span>
</div>
</div>
<div v-else-if="record.paytype == '2'&& column.key === 'name' ">
<div class="flex">
<AlipaySquareFilled :style="{ fontSize: '24px' }"></AlipaySquareFilled
><span class="ml20">支付宝</span>
</div>
</div>
<div v-else-if="record.paytype == '3'&& column.key === 'name' ">
<div class="flex">
<DollarCircleFilled :style="{ fontSize: '24px' }"></DollarCircleFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-else-if="record.paytype == '4'&& column.key === 'name' ">
<div class="flex">
<CreditCardFilled :style="{ fontSize: '24px' }"></CreditCardFilled
><span class="ml20">花呗</span>
</div>
</div>
<div v-else-if="record.paytype == '5'&& column.key === 'name' ">
<div class="flex">
<SkypeFilled :style="{ fontSize: '24px' }"></SkypeFilled
><span class="ml20">京东白条</span>
</div>
</div>
<div v-if="record.status== '0' &&column.key === 'status'">
<span class="ml20" style="color: rgba(12,191,33,1)">良好</span>
</div>
<div v-else-if="record.status== '1' &&column.key === 'status'">
<span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
</div>
<div v-else-if="column.key === 'tags'">
<a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button>
</div>
</template>
</a-table>
</template>
<script lang="ts" setup>
import { defineExpose,defineProps } from "vue";
import { useRouter } from "vue-router";
import {
AlipaySquareFilled,
WechatFilled,
DollarCircleFilled,
CreditCardFilled,
SkypeFilled,
} from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';
const columns = [
{
title: "支付渠道",
name: "Name",
dataIndex: "name",
key: "name",
},
{
title: "绑定账户数",
dataIndex: "amount",
key: "amount",
},
{
title: "当前预警",
dataIndex: "status",
key: "status",
},
{
title: "操作",
key: "tags",
dataIndex: "tags",
},
];
const router=useRouter()
const props = defineProps({
list:{
type:Object
}
})
const onOpenInfo = (record:any, index:any, column:any) => {
router.push({
path:'/home/paybind',
query:{
isShow:1,
paytype:record.paytype
}
})
};
const confirm = (record:any, index:any, column:any)=>{
console.log(record,index,column,"record");
}
defineExpose({
props,
onOpenInfo,
confirm
});
</script>
<style lang="less" scoped>
.flex {
display: flex;
align-items: center;
}
.ml20 {
margin-left: 20px;
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715185351.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192152.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<!-- <a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price" /> -->
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192154.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192158.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192201.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price || 0" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192202.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price || 0" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192206.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192216.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="''" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192218.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192228.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="formState.paymentmodel" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192411.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192631.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, Watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
Watch('watchSubject',{'fromState.subject':true})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192722.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch:{
'formState.'
}
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192802.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch:{
'formState.'
}
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715192905.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch:(()=>{
formState.subject
},(val)=>{
console.log(val,'val');
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193040.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch('formState.subject',(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193055.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch('formState',(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193108.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch('formState',(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193116.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState.subject,(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193203.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193315.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
if(newVal.paymentmodel =='0'){
price = optionss[formState.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193316.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price = optionss[formState.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193328.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price = optionss[formState.subject.index]
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193336.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
console.log(optionss,'optionss');
price = optionss[formState.subject.index]
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193338.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
console.log(optionss,'optionss');
// price = optionss[formState.subject.index]
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193407.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(newVal,'newVal');
if(newVal.paymentmodel =='0'){
console.log(optionss,'optionss');
// price = optionss[formState.subject.index]
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193408.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(newVal,'newVal');
if(newVal.paymentmodel =='0'){
console.log(optionss,'optionss');
// price = optionss[formState.subject.index]
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193447.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(newVal,'newVal');
if(newVal.paymentmodel =='0'){
price = optionss[newVal.subject.index].price || 0
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193451.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price = optionss[newVal.subject.index].price || 0
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193520.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(optionss[newVal.subject.index]);
// if(newVal.paymentmodel =='0'){
// price = optionss[newVal.subject.index].price || 0
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193523.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(optionss[newVal.subject.index]);
// if(newVal.paymentmodel =='0'){
// price = optionss[newVal.subject.index].price || 0
// }
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193544.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(optionss[newVal.subject.index],newVal.subject.index);
// if(newVal.paymentmodel =='0'){
// price = optionss[newVal.subject.index].price || 0
// }
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193559.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
console.log(optionss,newVal.subject.index);
// if(newVal.paymentmodel =='0'){
// price = optionss[newVal.subject.index].price || 0
// }
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193635.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss[newVal.subject.index].price || 0
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193638.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss[newVal.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193705.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss.value[newVal.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193735.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= optionss.value[formState.subject.index].price
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss.value[newVal.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193751.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= price.value
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss.value[newVal.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/.history/src/views/pay-list/components/createpay/index_20220715193802.vue 0 → 100644
<template>
<div class="page">
<!-- {{props.props.propsData.isCad}} -->
<div class="title">支付项目信息</div>
<a-form style="margin-top: 30px" :model="formState" name="basic" :wrapper-col="{ span: 6 }" autocomplete="off">
<a-form-item label="选择商品" name="subject" :rules="rulesRef.subject" :label-col="{ span: 2 }"
labelAlign="left">
<div style="width:100%;display: flex;align-items: center;">
<!-- <a-radio-group v-model:value="formState.subject">
<div v-for="item in optionss" :value="item.goodsid">
</div>
<a-radio-button >{{ item.subject }}</a-radio-button>
</a-radio-group> -->
<a-select
v-model:value="formState.subject"
style="width: 120px"
:options="optionss.map((item,index) => ({ value: item.subject, label: item.subject,index:index }))"
@change="onSelectss"
>
</a-select>
</div>
</a-form-item>
<a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left"
:rules="rulesRef.shortname">
<a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
</a-form-item>
<a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div>
</div>
<div style="display: flex;height: 50px">
<a-radio value="1" style="width:150px;">自定义金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="priceSet" />
<div style="width:50px;">元</div>
</div>
</a-radio-group>
</a-form-item>
<a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
<a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
<div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
<a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
<div>{{item.value}}</div>
</a-checkbox>
<div style="margin-left:20px;">收款账户</div>
<div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
<div style="margin-left:20px;color: black;" v-else>默认</div>
<div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
</div>
</a-checkbox-group>
</a-form-item>
<a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display: flex;">
<a-switch v-model:checked="formState.fullphone" />
</div>
</a-form-item>
<a-form-item label="开始时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="结束时间" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat" :disabledDate="disabledDate"/> <a-time-picker v-model:value="endvalue" format="HH:mm" />
</div>
</a-form-item>
<a-form-item label="信息备注" name="price" :label-col="{ span: 2 }"
labelAlign="left">
<div style="display:flex">
<a-input v-model:value="formState.remark" placeholder="请填写备注" />
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 0, span: 8 }">
<a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
</a-form-item>
</a-form>
<a-modal
v-model:visible="visible"
title="Modal"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
@cancel="onCancel"
>
<a-radio-group v-model:value="modalvalue">
<div v-for="item in list" :itemkey="item">
<a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
</div>
</a-radio-group>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods,onCreateGoodsPay,onfindWX,onfindAli } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import moment from 'moment';
const useForm = Form.useForm;
interface FormState {
subject: any,
shortname: string,
payment: string,
paymentmodel: string,
checked:boolean,
starttime:string,
expireendtime:string,
fullphone:boolean,
remark:string,
}
const visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = ref([{
}])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
{ value: '微信', label: '1' },
{ label: '2', value: '支付宝' },
{ label: '3', value: '京东白条' },
{ label: '4', value: '花呗' }
];
const checkboxValue = ref([])
const onSelectss =(value:any, option:any)=>{
formState.subject = option
}
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
subject: [],
shortname: '',
payment: '',
paymentmodel: '0',
checked:false,
starttime:'',
expireendtime:'',
fullphone:false,
remark:''
});
let price = ref(0)
let priceSet = ref(0)
const modalvalue = ref<any>(0)
let radioValue= reactive<any>({
})
let listValue = ref<any>([])
const rulesRef = reactive({
subject: [
{
required: true,
message: '请输入商品名称!',
},
],
shortname: [
{
required: true,
message: '请输入商品简介!',
},
],
});
const { resetFields, validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
price.value = option.itemKey.price
}
const onSubmit = () => {
validate()
.then(async (res) => {
const uid =getUid()
const starttime = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment
if(formState.paymentmodel == '1'){
payment= price.value
}else{
payment =priceSet
}
const prarms = {
subject:toRaw(formState).subject[0].label,
shortname:toRaw(formState).shortname,
paymentmodel:toRaw(formState).paymentmodel,
fullphone:toRaw(formState).paymentmodel?0:1,
expireendtime:expireendtime,
starttime:starttime,
goodsid: toRaw(formState).subject[0].label,
goodspayditch:goodspayditch.value,
payment:payment,
uid,
}
const data:any = await onCreateGoodsPay(prarms)
if(data.status === 1){
message.success(data.message)
}
})
.catch(err => {
console.log('error', err);
});
};
const disabledDate = (current:any)=>{
return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
radioValue = {}
visible.value = false;
}
const onChangeRadioName = (e:any)=>{
radioValue = e
}
const onSet = async(index:string)=>{
console.log(index,'index');
const uid =getUid()
let data:any ={}
if (index == '1') {
data = await onfindWX(uid);
} else if (index == '2') {
data = await onfindAli(uid);
}
list.value = data.data;
showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
visible.value = true;
};
const hideModal = () => {
goodspayditch.value[radioValue.paytype-1] = {
appointpay: radioValue.id,
goodsid: radioValue.id,
goodspayid: formState.subject[0].label,
optpay: radioValue.paytype,
payname: radioValue.name,
random: '1',
status: radioValue.status
}
listValue.value.push(radioValue)
visible.value = false;
};
onMounted(async () => {
const uid = getUid()
const data = await onSelectGoods(uid)
optionss.value = data.data
return optionss
})
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss.value[newVal.subject.index].price
}
})
defineExpose({
optionss,
value1: ref<Dayjs>(),
onSelect,
price,
priceSet,
dateFormat,
disabledDate,
startvalue,
endvalue,
checkboxValue,
onChangeRadioName,
onSet,
visible,
showModal,
hideModal,
list,
modalvalue,
onSelectCheckboxValue
});
</script>
<style lang="less" scoped>
.page {
width: 100%;
.title {
padding-top: 20px;
text-align: left;
}
.pay {
display: flex;
flex-direction: column;
.ant-radio-wrapper {
height: 40px;
}
}
}
</style>
<style lang="less">
.ant-checkbox-wrapper {
height: 50px;
span {
display: flex;
}
}
</style>
web-vue-admin/src/views/goods-cabinet/index.vue
...@@ -112,8 +112,11 @@ const onGoods = (e: Number) => { ...@@ -112,8 +112,11 @@ const onGoods = (e: Number) => {
propsData.isCad = e; propsData.isCad = e;
isShowGoods.value = true; isShowGoods.value = true;
}; };
const onBack = (e: Number) => { const onBack = async(e: Number) => {
isShowGoods.value = !isShowGoods.value; isShowGoods.value = !isShowGoods.value;
const uid = getUid()
const data = await onSelectGoods(uid)
list.value = data.data
}; };
onMounted(async () => { onMounted(async () => {
const uid = getUid() const uid = getUid()
......
web-vue-admin/src/views/pay-bind/index.vue
...@@ -228,6 +228,7 @@ const onSubmit = async () => { ...@@ -228,6 +228,7 @@ const onSubmit = async () => {
let data: any = {}; let data: any = {};
const prarms = { const prarms = {
paytype: query.value.paytype, paytype: query.value.paytype,
uid:getUid(),
...toRaw(modelRef), ...toRaw(modelRef),
}; };
if (status.value === 1) { if (status.value === 1) {
......
web-vue-admin/src/views/pay-config/compoents/header/index.vue
...@@ -40,12 +40,6 @@ ...@@ -40,12 +40,6 @@
</div> </div>
<div v-else-if="column.key === 'tags'"> <div v-else-if="column.key === 'tags'">
<a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button> <a-button type="primary" @click="onOpenInfo(record, index, column)">查看</a-button>
<a-popconfirm placement="top" ok-text="Yes" cancel-text="No" @confirm="confirm(record, index, column)">
<template #title>
<p>确任删除这条数据</p>
</template>
<a-button type="primary" style="margin-left:20px">删除</a-button>
</a-popconfirm>
</div> </div>
</template> </template>
......
web-vue-admin/src/views/pay-list/components/createpay/index.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay"> <a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
<div style="display: flex;height: 50px;"> <div style="display: flex;height: 50px;">
<a-radio value="0" style="width:150px;">商品默认金额</a-radio> <a-radio value="0" style="width:150px;">商品默认金额</a-radio>
<a-input-number style="width:200px;height: 40px;" v-model:value="optionss[formState.subject.index].price" /> <a-input-number style="width:200px;height: 40px;" v-model:value="price" />
<div style="width:50px;">元</div> <div style="width:50px;">元</div>
</div> </div>
<div style="display: flex;height: 50px"> <div style="display: flex;height: 50px">
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue"; import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, watch } from "vue";
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { message, UploadProps, Upload } from "ant-design-vue"; import { message, UploadProps, Upload } from "ant-design-vue";
...@@ -185,7 +185,7 @@ const onSubmit = () => { ...@@ -185,7 +185,7 @@ const onSubmit = () => {
const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]')) const expireendtime = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
let payment let payment
if(formState.paymentmodel == '1'){ if(formState.paymentmodel == '1'){
payment= optionss[formState.subject.index].price payment= price.value
}else{ }else{
payment =priceSet payment =priceSet
} }
...@@ -260,6 +260,11 @@ onMounted(async () => { ...@@ -260,6 +260,11 @@ onMounted(async () => {
optionss.value = data.data optionss.value = data.data
return optionss return optionss
}) })
watch(formState,(newVal,oldVal) => {
if(newVal.paymentmodel =='0'){
price.value = optionss.value[newVal.subject.index].price
}
})
defineExpose({ defineExpose({
optionss, optionss,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment