payCode.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <!-- 购买优惠码 -->
  3. <div class="discountCodePage flex-col">
  4. <s-header :name="$t('discountCode.applDiscCode')" :noback="false"></s-header>
  5. <div class="discountCodeBox flex-col">
  6. <van-form @submit="onSubmit">
  7. <van-field
  8. v-model="number"
  9. name="number"
  10. :label="$t('discountCode.numberOfDiscountCodesLabel')"
  11. :placeholder="$t('discountCode.numberOfDiscountCodesPlaceholder')"
  12. >
  13. <template #button>
  14. <span>{{$t('discountCode.aSingleGenerationCannotExceed')}}</span>
  15. </template>
  16. </van-field>
  17. <van-field
  18. v-model="month"
  19. name="number"
  20. :label="$t('discountCode.termOfValidity')"
  21. :placeholder="$t('discountCode.pleaseEnterTheValidityPeriod')"
  22. >
  23. <template #button>
  24. <span>{{$t('discountCode.Months')}}<span>{{$t('discountCode.noMoreThanMonths')}}</span></span>
  25. </template>
  26. </van-field>
  27. <van-field
  28. readonly
  29. v-model="validDays"
  30. :label="$t('discountCode.validDays')"
  31. placeholder=""
  32. />
  33. <div class="van-cell van-field">
  34. <div class="van-cell__title van-field__label"><span>{{$t('discountCode.type')}}</span></div>
  35. <div class="van-cell__value van-field__value radioBox">
  36. <van-radio-group v-model="type" direction="horizontal">
  37. <van-radio name="1" icon-size="18px">{{$t('discountCode.deductionRoll')}}</van-radio>
  38. <van-radio name="0" icon-size="18px">{{$t('discountCode.discount2')}}</van-radio>
  39. </van-radio-group>
  40. </div>
  41. </div>
  42. <van-field
  43. v-if='type === "1"'
  44. v-model="discount"
  45. name="number"
  46. :label="$t('discountCode.deductionPriceLabdel')"
  47. :placeholder="$t('discountCode.deductionPricePlaceholder')"
  48. >
  49. </van-field>
  50. <van-field
  51. v-if='type === "0"'
  52. v-model="discount"
  53. name="number"
  54. :label="$t('discountCode.discount')"
  55. :placeholder="$t('discountCode.enterNumber')"
  56. >
  57. <template #button>
  58. <span>0-10</span>
  59. </template>
  60. </van-field>
  61. <div class="van-cell van-field" v-if='type === "0" && discount === "0"'>
  62. <div class="van-cell__title van-field__label"><span>{{$t('discountCode.paymentMethod')}}</span></div>
  63. <div class="van-cell__value van-field__value radioBox">
  64. <van-radio-group v-model="frpCode" direction="horizontal">
  65. <van-radio name="WEIXIN_NATIVE" icon-size="18px">{{$t('discountCode.weChat')}}</van-radio>
  66. <van-radio name="ALIPAY_NATIVE" icon-size="18px">{{$t('discountCode.alipay')}}</van-radio>
  67. </van-radio-group>
  68. </div>
  69. </div>
  70. <van-row justify="space-around" style="padding: 1em;">
  71. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('discountCode.apply')}}</van-button>
  72. </van-row>
  73. </van-form>
  74. </div>
  75. <van-popup v-model:show="payCodeType" round class="payCodePopup" @close="payCodeClose">
  76. <div style="text-align: center; font-size: 14px; padding: 1em; line-height: 1.8;">
  77. <div>price: {{ewmObj.price||''}}</div>
  78. <div>sn: {{ewmObj.sn||''}}</div>
  79. <img :src="ewmObj.image"/>
  80. </div>
  81. </van-popup>
  82. </div>
  83. </template>
  84. <script>
  85. import sHeader from "@/components/SimpleHeader";
  86. import { onMounted, reactive, toRefs, ref, watch } from "vue";
  87. import { getLoginUser,$M_FormatCalcuDecial } from "@/common/js/utils";
  88. import { Toast } from "vant";
  89. import { addCode } from "@/service/discountCode";
  90. import { useRouter } from "vue-router";
  91. import { useI18n } from "vue-i18n";
  92. export default {
  93. name: "payCode",
  94. components: { sHeader },
  95. setup() {
  96. // 引入语言
  97. const {t} = useI18n();
  98. const router = useRouter();
  99. let payParams = reactive({
  100. number: '', // 优惠码个数
  101. month: '', // 有效期
  102. type: '1', // 优惠卷类型
  103. discount: '', // 折扣
  104. frpCode: 'WEIXIN_NATIVE', // 支付方式
  105. });
  106. const payCodeType = ref(false);
  107. const ewmObj = ref(null);
  108. // 初始化页面
  109. onMounted(async () => {
  110. payCodeType.value = false;
  111. payParams.number = '';
  112. payParams.month = '';
  113. payParams.type = '1';
  114. payParams.discount = '';
  115. payParams.frpCode = 'WEIXIN_NATIVE';
  116. const user = getLoginUser();
  117. if (user) { payParams.adminId = user.id; }
  118. });
  119. // 提交搜索表单触发搜索
  120. const onSubmit = async () => {
  121. if (payParams.number === '') { Toast.fail(t('discountCode.numberOfDiscountCodesPlaceholder')); return; }
  122. if (payParams.month === '') { Toast.fail(t('discountCode.pleaseEnterTheValidityPeriod')); return; }
  123. if (payParams.type === '1' && payParams.discount === '') { Toast.fail(t('discountCode.deductionPricePlaceholder')); return; }
  124. if (payParams.type === '0' && payParams.discount === '') { Toast.fail(t('discountCode.pleaseEnterDiscount')); return; }
  125. if (parseInt(payParams.number) > 200) { Toast.fail(t('discountCode.theNumberOfDiscountCodesCannotExceed')); return; }
  126. if (parseInt(payParams.month) > 3) { Toast.fail(t('discountCode.theValidityPeriodCannotExceedMonths')); return; }
  127. if (payParams.type === '0' && parseInt(payParams.discount) > 10) { Toast.fail(t('discountCode.discountCannotBeGreaterThan')); return; }
  128. const { data } = await addCode( Object.assign({}, payParams) );
  129. if (payParams.type === '0') {
  130. ewmObj.value = data.data;
  131. payCodeType.value = true;
  132. } else {
  133. if (data.code === '00000') {
  134. Toast.success(t('discountCode.successfulProductionOfDiscountCode'));
  135. router.push({ path: '/discountCode' });
  136. } else {
  137. Toast.fail(data.message);
  138. }
  139. }
  140. }
  141. const payCodeClose = () => { router.push({ path: '/discountCode' }); }
  142. // 有效天数
  143. const validDays = ref('0天');
  144. // 监听有效期,计算有效天数
  145. watch(()=>payParams.month,(newVal)=>{
  146. validDays.value = $M_FormatCalcuDecial(newVal,30)+'天';
  147. },{immediate:true,deep:true});
  148. return {
  149. ...toRefs(payParams),
  150. payCodeType,
  151. ewmObj,
  152. onSubmit,
  153. payCodeClose,
  154. validDays,
  155. };
  156. },
  157. };
  158. </script>
  159. <style lang="less" scoped>
  160. @import "../../common/style/common.less";
  161. @import "./index.less";
  162. .discountCodePage {
  163. /deep/ .van-field__button{
  164. width: 150px;
  165. }
  166. .van-field{
  167. width:100%;
  168. display: flex;
  169. align-items: center;//上下对齐
  170. justify-content: space-between;
  171. }
  172. }
  173. </style>