增加激活码列表页面,修复进件部分问题
This commit is contained in:
395
activationCode/index/index.vue
Normal file
395
activationCode/index/index.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28 color-333">
|
||||
<up-sticky>
|
||||
<view class="top u-flex gap-20">
|
||||
<!-- <up-select :options="types" @select="typesSelect">
|
||||
<template #text>
|
||||
<text v-if="query.type!==''">{{returnTypesLabel(query.type)}}</text>
|
||||
<text v-else>类型</text>
|
||||
</template>
|
||||
</up-select> -->
|
||||
<up-select :options="statusList" @select="statusListSelect">
|
||||
<template #text>
|
||||
<text v-if="query.state!==''">{{returnStatusLabel(query.state)}}</text>
|
||||
<text v-else>状态</text>
|
||||
</template>
|
||||
</up-select>
|
||||
<view class="u-flex-1">
|
||||
<datePickerSelect v-model:start="query.startTime" v-model:end="query.endTime">
|
||||
</datePickerSelect>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</up-sticky>
|
||||
<view class="box">
|
||||
<view class="container" v-for="(item,index) in list" :key="index">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>
|
||||
<text class="color-666">创建时间：</text>
|
||||
<text class="font-bold">{{item.createTime}}</text>
|
||||
</view>
|
||||
<view class="status" :class="returnStatusClass(item.status)">{{item.status?'已使用':'未使用'}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<view>
|
||||
<text class="color-666">激活时长(月)：</text>
|
||||
<text class="font-bold">{{item.periodMonth}}个月</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-32" v-if="item.shopName">
|
||||
<view>
|
||||
<text class="color-666">使用店铺名称：</text>
|
||||
<text class="font-bold">{{item.shopName}}</text>
|
||||
<text class="u-m-l-10">({{item.registerType=='before'?'快餐版':'餐饮版'}})</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="u-m-t-24 u-flex u-col-center">
|
||||
<text class="color-666">激活码：</text>
|
||||
<view class="status success u-font-24">{{item.registerCode}}</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-32 u-row-right gap-20">
|
||||
|
||||
<view style="min-width: 160rpx;">
|
||||
<my-button @click="oncopy(item.registerCode)">复制激活码</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="query.shopName">
|
||||
<up-empty v-if="list.length<=0" text="未搜索到相关信息"></up-empty>
|
||||
<up-loadmore :status="isEnd?'nomore':'loading'" v-else></up-loadmore>
|
||||
</template>
|
||||
<template v-else>
|
||||
<up-empty v-if="list.length<=0" text="未搜索到相关信息"></up-empty>
|
||||
<up-loadmore v-else :status="isEnd?'nomore':'loading'"></up-loadmore>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view style="height: 140rpx;"></view>
|
||||
<view class="bottom">
|
||||
<my-button @click="toAdd()">添加激活码</my-button>
|
||||
</view>
|
||||
|
||||
<up-popup :show="addShow" mode="center"
|
||||
@close="addShow=false" round="16rpx" :close-on-click-overlay="true">
|
||||
<view class="add-box">
|
||||
<view class="font-bold u-font-32 text-center">生成激活码</view>
|
||||
<view class="u-p-l-20 u-p-r-20 u-m-r-32">
|
||||
<up-form label-width="auto">
|
||||
<up-form-item label="激活时长" required>
|
||||
<up-number-box input-width="200rpx" v-model="form.periodMonth" :integer="true" :step="1" ></up-number-box>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
<up-form label-width="auto">
|
||||
<up-form-item label="生产数量" required>
|
||||
<up-number-box input-width="200rpx" v-model="form.num" :integer="true" :step="1" ></up-number-box>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
</view>
|
||||
<view class="u-flex gap-20 u-m-t-42">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="addShow=false">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button @click="submit">生产激活码</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</up-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
onReachBottom,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import * as Api from '@/http/api/account/merchantRegister.js'
|
||||
|
||||
import datePickerSelect from '../components/date-picker-select.vue'
|
||||
|
||||
const code = ref('')
|
||||
const addShow = ref(false)
|
||||
|
||||
const form =reactive({
|
||||
periodMonth:1,
|
||||
num:1,
|
||||
})
|
||||
watch(()=>addShow.value,(newval)=>{
|
||||
if(!newval){
|
||||
form.periodMonth=1;
|
||||
form.num=1;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const codeType = ref('')
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
|
||||
}
|
||||
|
||||
function submit(){
|
||||
Api.addMerchantRegister(form).then(res=>{
|
||||
if(res){
|
||||
uni.$u.toast('添加成功')
|
||||
addShow.value=false
|
||||
search()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const statusList = [{
|
||||
value: 1,
|
||||
name: '已激活',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '待激活',
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const types = [{
|
||||
value: 'before',
|
||||
name: '快餐版',
|
||||
},
|
||||
{
|
||||
value: 'after',
|
||||
name: '餐饮版',
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
function oncopy(code) {
|
||||
uni.setClipboardData({
|
||||
data: code
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function statusListSelect(e) {
|
||||
query.state = e.value
|
||||
}
|
||||
|
||||
function typesSelect(e) {
|
||||
query.type = e.value
|
||||
}
|
||||
|
||||
const statusLabelJson = {
|
||||
'REJECTED': '已拒绝'
|
||||
}
|
||||
const statusClassJson = {
|
||||
'REJECTED': 'error'
|
||||
}
|
||||
|
||||
function returnStatusLabel(state) {
|
||||
const item = statusList.find(v => v.value == state)
|
||||
if (item) {
|
||||
return item.name
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function returnTypesLabel(state) {
|
||||
const item = types.find(v => v.value == state)
|
||||
if (item) {
|
||||
return item.name
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function returnStatusClass(state) {
|
||||
if (state == 1) {
|
||||
return 'success'
|
||||
}
|
||||
return 'gray'
|
||||
}
|
||||
|
||||
function showCode(item, type) {
|
||||
if (type == 'wx') {
|
||||
code.value = item.wechatSignUrl
|
||||
}
|
||||
if (type == 'aliPay') {
|
||||
code.value = item.alipaySignUrl
|
||||
}
|
||||
codeType.value = type
|
||||
addShow.value = true
|
||||
|
||||
}
|
||||
|
||||
const showShopSelect = ref(false)
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
state: '',
|
||||
type: '',
|
||||
startTime:'',
|
||||
endTime:'',
|
||||
})
|
||||
watch(() => query.state, (newval) => {
|
||||
search()
|
||||
})
|
||||
watch(() => query.startTime, (newval) => {
|
||||
search()
|
||||
})
|
||||
watch(() => query.endTime, (newval) => {
|
||||
search()
|
||||
})
|
||||
watch(() => query.type, (newval) => {
|
||||
search()
|
||||
})
|
||||
const isEnd = ref(false)
|
||||
const list = ref([])
|
||||
|
||||
function search() {
|
||||
isEnd.value = false
|
||||
query.page = 1
|
||||
getData()
|
||||
}
|
||||
|
||||
function toAdd(shop) {
|
||||
addShow.value = true
|
||||
}
|
||||
|
||||
|
||||
function toEdit(shop) {
|
||||
console.log(shop)
|
||||
uni.navigateTo({
|
||||
url: '/pagesShops/add/add?id=' + shop.id
|
||||
})
|
||||
}
|
||||
|
||||
let isAjaxIng=ref(false)
|
||||
function getData() {
|
||||
if(isAjaxIng.value){
|
||||
return
|
||||
}
|
||||
isAjaxIng.value=true
|
||||
Api.getMerchantRegister({
|
||||
...query,
|
||||
startTime:'',
|
||||
endTime:'',
|
||||
createdAt:query.startTime&&query.endTime?( [query.startTime,query.endTime]):''
|
||||
}).then(res => {
|
||||
isAjaxIng.value=false
|
||||
isEnd.value = query.page >= res.totalPage * 1
|
||||
if (query.page == 1) {
|
||||
list.value = res.records
|
||||
} else {
|
||||
list.value.push(...res.records)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function queryStatus(item) {
|
||||
queryEntry({
|
||||
licenceNo: item.licenceNo,
|
||||
shopId: item.shopId
|
||||
}).then(res => {
|
||||
isEnd.value = false
|
||||
query.page = 1;
|
||||
getData()
|
||||
})
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if (!isEnd.value) {
|
||||
query.page++
|
||||
getData()
|
||||
}
|
||||
|
||||
})
|
||||
onShow(getData)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.min-page {
|
||||
.box {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
padding: 32rpx 28rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.types {}
|
||||
|
||||
.status {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #333;
|
||||
|
||||
&.success {
|
||||
border-color: rgba(123, 209, 54, 1);
|
||||
color: rgba(123, 209, 54, 1);
|
||||
background: rgba(123, 209, 54, 0.12);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: rgba(255, 141, 40, 1);
|
||||
color: rgba(255, 141, 40, 1);
|
||||
background: rgba(255, 141, 40, 0.12);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #FF1C1C;
|
||||
color: #FF1C1C;
|
||||
background: rgba(255, 28, 28, 0.18);
|
||||
}
|
||||
|
||||
&.gray {
|
||||
color: #bbb;
|
||||
background-color: #f7f7f7;
|
||||
border-color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: 32rpx 28rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.add-box {
|
||||
background-color: #fff;
|
||||
width: 690rpx;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user