123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <template>
- <!-- 购买优惠码 -->
- <div class="discountCodePage flex-col">
- <s-header :name="$t('discountCode.applDiscCode')" :noback="false"></s-header>
- <div class="discountCodeBox flex-col">
- <van-form @submit="onSubmit">
- <van-field
- v-model="number"
- name="number"
- :label="$t('discountCode.numberOfDiscountCodesLabel')"
- :placeholder="$t('discountCode.numberOfDiscountCodesPlaceholder')"
- >
- <template #button>
- <span>{{$t('discountCode.aSingleGenerationCannotExceed')}}</span>
- </template>
- </van-field>
- <van-field
- v-model="month"
- name="number"
- :label="$t('discountCode.termOfValidity')"
- :placeholder="$t('discountCode.pleaseEnterTheValidityPeriod')"
- >
- <template #button>
- <span>{{$t('discountCode.Months')}}<span>{{$t('discountCode.noMoreThanMonths')}}</span></span>
- </template>
- </van-field>
- <van-field
- readonly
- v-model="validDays"
- :label="$t('discountCode.validDays')"
- placeholder=""
- />
- <div class="van-cell van-field">
- <div class="van-cell__title van-field__label"><span>{{$t('discountCode.type')}}</span></div>
- <div class="van-cell__value van-field__value radioBox">
- <van-radio-group v-model="type" direction="horizontal">
- <van-radio name="1" icon-size="18px">{{$t('discountCode.deductionRoll')}}</van-radio>
- <van-radio name="0" icon-size="18px">{{$t('discountCode.discount2')}}</van-radio>
- </van-radio-group>
- </div>
- </div>
- <van-field
- v-if='type === "1"'
- v-model="discount"
- name="number"
- :label="$t('discountCode.deductionPriceLabdel')"
- :placeholder="$t('discountCode.deductionPricePlaceholder')"
- >
- </van-field>
- <van-field
- v-if='type === "0"'
- v-model="discount"
- name="number"
- :label="$t('discountCode.discount')"
- :placeholder="$t('discountCode.enterNumber')"
- >
- <template #button>
- <span>0-10</span>
- </template>
- </van-field>
- <div class="van-cell van-field" v-if='type === "0" && discount === "0"'>
- <div class="van-cell__title van-field__label"><span>{{$t('discountCode.paymentMethod')}}</span></div>
- <div class="van-cell__value van-field__value radioBox">
- <van-radio-group v-model="frpCode" direction="horizontal">
- <van-radio name="WEIXIN_NATIVE" icon-size="18px">{{$t('discountCode.weChat')}}</van-radio>
- <van-radio name="ALIPAY_NATIVE" icon-size="18px">{{$t('discountCode.alipay')}}</van-radio>
- </van-radio-group>
- </div>
- </div>
- <van-row justify="space-around" style="padding: 1em;">
- <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('discountCode.apply')}}</van-button>
- </van-row>
- </van-form>
- </div>
- <van-popup v-model:show="payCodeType" round class="payCodePopup" @close="payCodeClose">
- <div style="text-align: center; font-size: 14px; padding: 1em; line-height: 1.8;">
- <div>price: {{ewmObj.price||''}}</div>
- <div>sn: {{ewmObj.sn||''}}</div>
- <img :src="ewmObj.image"/>
- </div>
- </van-popup>
- </div>
- </template>
- <script>
- import sHeader from "@/components/SimpleHeader";
- import { onMounted, reactive, toRefs, ref, watch } from "vue";
- import { getLoginUser,$M_FormatCalcuDecial } from "@/common/js/utils";
- import { Toast } from "vant";
- import { addCode } from "@/service/discountCode";
- import { useRouter } from "vue-router";
- import { useI18n } from "vue-i18n";
- export default {
- name: "payCode",
- components: { sHeader },
- setup() {
- // 引入语言
- const {t} = useI18n();
- const router = useRouter();
- let payParams = reactive({
- number: '', // 优惠码个数
- month: '', // 有效期
- type: '1', // 优惠卷类型
- discount: '', // 折扣
- frpCode: 'WEIXIN_NATIVE', // 支付方式
- });
- const payCodeType = ref(false);
- const ewmObj = ref(null);
- // 初始化页面
- onMounted(async () => {
- payCodeType.value = false;
- payParams.number = '';
- payParams.month = '';
- payParams.type = '1';
- payParams.discount = '';
- payParams.frpCode = 'WEIXIN_NATIVE';
- const user = getLoginUser();
- if (user) { payParams.adminId = user.id; }
- });
-
- // 提交搜索表单触发搜索
- const onSubmit = async () => {
- if (payParams.number === '') { Toast.fail(t('discountCode.numberOfDiscountCodesPlaceholder')); return; }
- if (payParams.month === '') { Toast.fail(t('discountCode.pleaseEnterTheValidityPeriod')); return; }
- if (payParams.type === '1' && payParams.discount === '') { Toast.fail(t('discountCode.deductionPricePlaceholder')); return; }
- if (payParams.type === '0' && payParams.discount === '') { Toast.fail(t('discountCode.pleaseEnterDiscount')); return; }
- if (parseInt(payParams.number) > 200) { Toast.fail(t('discountCode.theNumberOfDiscountCodesCannotExceed')); return; }
- if (parseInt(payParams.month) > 3) { Toast.fail(t('discountCode.theValidityPeriodCannotExceedMonths')); return; }
- if (payParams.type === '0' && parseInt(payParams.discount) > 10) { Toast.fail(t('discountCode.discountCannotBeGreaterThan')); return; }
- const { data } = await addCode( Object.assign({}, payParams) );
- if (payParams.type === '0') {
- ewmObj.value = data.data;
- payCodeType.value = true;
- } else {
- if (data.code === '00000') {
- Toast.success(t('discountCode.successfulProductionOfDiscountCode'));
- router.push({ path: '/discountCode' });
- } else {
- Toast.fail(data.message);
- }
- }
- }
- const payCodeClose = () => { router.push({ path: '/discountCode' }); }
- // 有效天数
- const validDays = ref('0天');
- // 监听有效期,计算有效天数
- watch(()=>payParams.month,(newVal)=>{
- validDays.value = $M_FormatCalcuDecial(newVal,30)+'天';
- },{immediate:true,deep:true});
- return {
- ...toRefs(payParams),
- payCodeType,
- ewmObj,
- onSubmit,
- payCodeClose,
- validDays,
- };
- },
- };
- </script>
- <style lang="less" scoped>
- @import "../../common/style/common.less";
- @import "./index.less";
- .discountCodePage {
- /deep/ .van-field__button{
- width: 150px;
- }
- .van-field{
- width:100%;
- display: flex;
- align-items: center;//上下对齐
- justify-content: space-between;
- }
- }
- </style>
|