first
This commit is contained in:
216
pageDevice/storePage/storeDetails.vue
Normal file
216
pageDevice/storePage/storeDetails.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{ height: '776rpx' }" class="store-wrapper">
|
||||
<JeepayCustomNavbar
|
||||
textColor="#fff"
|
||||
bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)"
|
||||
title="门店详情"
|
||||
backCtrl="back"
|
||||
/>
|
||||
|
||||
<!-- 通用渲染组件 -->
|
||||
<JeepayTableListItem viewClass="list-item-by-detail"
|
||||
:title="vdata.record.storeName" :subtitle="vdata.record.storeId" :logo="vdata.record.storeLogo || '/static/indexImg/icon-store.svg'" :moreBtnList="moreBtnList" ref="refTabel"/>
|
||||
|
||||
<view class="create-time">
|
||||
<view class="time-title">创建时间</view>
|
||||
<view class="time-info">{{ vdata.record.createdAt }}</view>
|
||||
</view>
|
||||
|
||||
<JeepayCard :editText="ak.ent.has('ENT_MCH_STORE_EDIT') ? '修改门店' : null" @editTap="go.to('PAGES_APP_STORE_EDIT', {storeId: vdata.record.storeId})">
|
||||
<JeepayDescview>
|
||||
<JeepayDescviewItem title="门店名称" :desc="vdata.record.storeName"/>
|
||||
<JeepayDescviewItem title="联系人电话" :desc="vdata.record.contactPhone" />
|
||||
<JeepayDescviewItem title="门店地址" :desc="vdata.record.address" />
|
||||
<JeepayDescviewItem title="蚂蚁店铺">
|
||||
<template #desc>
|
||||
<JeepayTag type="blue">{{ calcAliStatusText() }}</JeepayTag>
|
||||
</template>
|
||||
</JeepayDescviewItem>
|
||||
<JeepayDescviewItem title="备注" :desc="vdata.record.remark || '未填写'" :bottomBorder="true" />
|
||||
<JeepayDescviewItem title="门店Logo" :desc="vdata.record.storeLogo" :descIsImg="true" />
|
||||
<JeepayDescviewItem title="门店内景照" :desc="vdata.record.storeInnerImg" :descIsImg="true" />
|
||||
<JeepayDescviewItem title="门头照" :desc="vdata.record.storeOuterImg" :descIsImg="true" />
|
||||
</JeepayDescview>
|
||||
</JeepayCard>
|
||||
|
||||
<!-- <JeepayCard title="其他设置" viewStyle="margin-top: 30rpx">
|
||||
<JeepayTableListItem title="是否默认" subtitle="设为默认后，该门店将成为当前商户的默认下单门店">
|
||||
<template #titleRight> -->
|
||||
<!-- 显示条件： 1. 权限支持， 2. 仅支持 非默认 调整为 默认， 反向不支持 -->
|
||||
<!-- <JeepayStateSwitch v-model:state="vdata.record.defaultFlag" :showSwitchType="ent.has('ENT_MCH_STORE_EDIT') && vdata.record.defaultFlag == 0" :updateStateFunc="updateDefaultFlagFunc"/>
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
</JeepayCard> -->
|
||||
|
||||
</JeepayBackground>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST,$queryAliStore,API_URI_DEV_RUYI } from '@/http/apiManager.js'
|
||||
import ak from '@/commons/utils/ak.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import formUtil from '@/commons/utils/formUtil.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import ent from '@/commons/utils/ent.js'
|
||||
|
||||
const moreBtnList = reactive([
|
||||
{ label: '删除门店', value: 'delete', color: 'red', entId: "ENT_MCH_STORE_DELETE", confirmText: '确认删除门店？', fun: deleteFunc},
|
||||
{ label: '同步蚂蚁店铺', value: 'aliStore', entId: "ENT_MCH_ALIPAY_SHOP_ADD", fun: ()=>{ go.to('PAGES_APP_STORE_EDIT', {storeId: vdata.record.storeId,type:'aliStore',aliStatus:vdata.record.alipayShopStatus}) }},
|
||||
{ label: '解除蚂蚁店铺', value: 'delAliStore', confirmText: '是否确认解除该蚂蚁店铺同步?', entId: "ENT_MCH_ALIPAY_SHOP_DELETE", fun: ()=>{ closeAliStore()}},
|
||||
{ label: '刷新蚂蚁店铺状态', value: 'queryAliStore', entId: "ENT_MCH_ALIPAY_SHOP_STATUS", fun: ()=>{ queryAliStoreStatus()}},
|
||||
])
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.storeId)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record : { }
|
||||
})
|
||||
const refTabel = ref(null)
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_STORE_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_STORE_DETAIL, function(data){
|
||||
refData(vdata.record.storeId)
|
||||
})
|
||||
function refData (storeId) {
|
||||
reqLoad.getById(API_URL_MCH_STORE_LIST, storeId).then(({ bizData }) => {
|
||||
vdata.record = bizData
|
||||
if(bizData.alipayShopStatus !=0){
|
||||
queryAliStoreStatus(true)
|
||||
}else{
|
||||
calcTabelList(bizData.alipayShopStatus)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 针对 列表按钮 处理
|
||||
const orgTabelArray = []
|
||||
function calcTabelList (key) {
|
||||
const orgTabelArrayIncludesData = (index)=>{
|
||||
if (orgTabelArray.findIndex(ite => ite.value == moreBtnList[index].value) == '-1') {
|
||||
orgTabelArray.push(moreBtnList[index]) // 存储 列表数据 以便状态更新 时 恢复列表
|
||||
}
|
||||
}
|
||||
const delValue = ['delAliStore', 'queryAliStore']
|
||||
const i = moreBtnList.findIndex(v => v.value == 'aliStore')
|
||||
if(i !='-1'){
|
||||
moreBtnList[i].label = '同步蚂蚁店铺'
|
||||
}
|
||||
if (['0', '-1'].includes(key)) {
|
||||
const index = delValue.map((v) => moreBtnList.findIndex(ite => ite.value == v)) //筛选出 需要删除的下标
|
||||
if (index.length) {
|
||||
index.sort((a, b) => b - a) //排序 从大到小
|
||||
index.forEach(v => {
|
||||
orgTabelArrayIncludesData(v)
|
||||
moreBtnList.splice(v, 1)
|
||||
})
|
||||
}
|
||||
} else if(key !='031') {
|
||||
const queryIndex = moreBtnList.findIndex(v=>v.value=='queryAliStore')
|
||||
if(queryIndex != '-1' && orgTabelArray.findIndex(v=>v.value =='queryAliStore') !='-1'){
|
||||
moreBtnList.splice(queryIndex,1)
|
||||
}
|
||||
moreBtnList.push(...orgTabelArray)
|
||||
const i = moreBtnList.findIndex(v => v.value == 'aliStore')
|
||||
if (i != '-1') {
|
||||
moreBtnList[i].label = '修改蚂蚁店铺'
|
||||
moreBtnList.sort((a, b) => a.label.length - b.label.length) //对列表进行排序
|
||||
}
|
||||
}
|
||||
const delIndex = moreBtnList.findIndex(v => v.value == 'delAliStore')
|
||||
if (key == '031') {
|
||||
if(moreBtnList.findIndex(v=>v.value=='queryAliStore')=='-1'){
|
||||
moreBtnList.push(orgTabelArray.find(v=>v.value == 'queryAliStore'))
|
||||
}
|
||||
if (delIndex != '-1') {
|
||||
moreBtnList.splice(delIndex, 1)
|
||||
}
|
||||
if(i !='-1'){
|
||||
orgTabelArrayIncludesData(i)
|
||||
moreBtnList.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateDefaultFlagFunc(isDefault){
|
||||
return reqLoad.updateById(API_URL_MCH_STORE_LIST, vdata.record.storeId, { defaultFlag: isDefault }).then(() => {
|
||||
emit.pageEmit(emit.ENAME_REF_STORE_LIST)
|
||||
infoBox.showSuccessToast("修改成功");
|
||||
})
|
||||
}
|
||||
function deleteFunc(){
|
||||
return reqLoad.delById(API_URL_MCH_STORE_LIST, vdata.record.storeId).then(() => {
|
||||
infoBox.showSuccessToast("删除成功");
|
||||
go.back(1, emit.ENAME_REF_STORE_LIST) // 返回页面 && 更新
|
||||
})
|
||||
}
|
||||
const closeAliStore = ()=>{
|
||||
reqLoad.delById(API_URI_DEV_RUYI,vdata.record.storeId).then(res=>{
|
||||
infoBox.showSuccessToast("解除成功");
|
||||
refData(vdata.record.storeId)
|
||||
})
|
||||
}
|
||||
const queryAliStoreStatus =(tooast) =>{
|
||||
$queryAliStore(vdata.record.storeId).then(({bizData})=>{
|
||||
if(bizData){
|
||||
vdata.record.alipayShopStatus = bizData.alipayShopStatus
|
||||
calcTabelList(bizData.alipayShopStatus)
|
||||
if(!tooast){
|
||||
infoBox.showToast('刷新蚂蚁店铺状态成功。')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 计算 蚂蚁店铺 状态 文字
|
||||
const calcAliStatusText =()=>{
|
||||
let text = ''
|
||||
switch (vdata.record.alipayShopStatus){
|
||||
case '0' :
|
||||
text = '未同步'
|
||||
break
|
||||
case '-1':
|
||||
text = '同步失败'
|
||||
break
|
||||
case '031':
|
||||
text = '已提交审核'
|
||||
break
|
||||
case '99':
|
||||
text = '已同步'
|
||||
break
|
||||
}
|
||||
return text
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.create-time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 75rpx;
|
||||
padding: 50rpx 0;
|
||||
font-size: 30rpx;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
.time-title {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.time-info {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.store-info {
|
||||
padding: 0.1rpx;
|
||||
margin: 0 35rpx;
|
||||
background-color: #fff;
|
||||
border-radius: $J-b-r32;
|
||||
}
|
||||
.default-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.store-wrapper {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user