217 lines
7.6 KiB
Vue
217 lines
7.6 KiB
Vue
<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>
|