You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 lines
12 KiB
525 lines
12 KiB
<template>
|
|
<view class="page1">
|
|
<view class="hero">
|
|
<view class="hero-title">店铺资料</view>
|
|
<view class="hero-subtitle">维护副标题、联系方式和收款信息</view>
|
|
</view>
|
|
|
|
<view class="form-wrap">
|
|
<view class="content">
|
|
<view class="section-title">可编辑信息</view>
|
|
<view class="value">
|
|
<view class="name">副标题</view>
|
|
<view class="text">
|
|
<input type="text" v-model="shop.subtitle" maxlength="24" placeholder="请输入副标题" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">联系方式</view>
|
|
<view class="text">
|
|
<input type="number" v-model="shop.contactPhone" maxlength="11" placeholder="请输入联系方式" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">支付宝账号</view>
|
|
<view class="text">
|
|
<input type="text" v-model="shop.aliAccount" maxlength="32" placeholder="请输入支付宝账号" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">支付宝实名</view>
|
|
<view class="text">
|
|
<input type="text" v-model="shop.aliName" maxlength="16" placeholder="请输入支付宝实名" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<button :loading="submitLoading" @tap="submit">保存</button>
|
|
|
|
<view class="content">
|
|
<view class="section-title">基础信息</view>
|
|
<view class="value image-row">
|
|
<view class="name">门头图</view>
|
|
<view class="text image-cell">
|
|
<view class="upload-img" v-if="!shop.shopIcon">
|
|
<uni-icons type="image" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<image :src="shop.shopIcon" v-else mode="aspectFill" class="upload-img"></image>
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">店铺名称</view>
|
|
<view class="text">{{shop.shopName || '暂无'}}</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">店铺分类</view>
|
|
<view class="text">{{currentShopTypeText || '暂无'}}</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">所属区域</view>
|
|
<view class="text">{{currentRegionText || '暂无'}}</view>
|
|
</view>
|
|
<view class="value textarea-row">
|
|
<view class="name">店铺地址</view>
|
|
<view class="text">{{shop.shopAddress || '暂无'}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content" v-if="certificateImages.length">
|
|
<view class="section-title">认证资料</view>
|
|
<view class="cert-grid">
|
|
<view class="cert-item" v-for="(item,index) in certificateImages" :key="index"
|
|
@tap="previewImage(item)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<text>{{certificateNames[index] || '补充资料'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
shop: {},
|
|
shopTypeList: [],
|
|
submitLoading: false,
|
|
certificateImages: [],
|
|
certificateNames: ['身份证正面', '身份证反面', '营业执照', '补充证照']
|
|
}
|
|
},
|
|
computed: {
|
|
currentRegionText() {
|
|
return this.shop.shopAreaTitle || this.shop.region || ''
|
|
},
|
|
currentShopTypeText() {
|
|
return this.shop.shopTypeTitle || this.getShopTypeText(this.shop.shopType) || ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getShopTypeList()
|
|
this.getShopMsg()
|
|
},
|
|
methods: {
|
|
getShopId() {
|
|
return this.shop.id || uni.getStorageSync('shopId') || ''
|
|
},
|
|
getShopMsg() {
|
|
const shopId = uni.getStorageSync('shopId')
|
|
if (!shopId) {
|
|
this.applyShop(this.getCachedShop())
|
|
return
|
|
}
|
|
let regionId = ''
|
|
try {
|
|
const area = uni.getStorageSync('area')
|
|
regionId = area ? JSON.parse(area).regionId : ''
|
|
} catch (e) {}
|
|
this.NB.sendRequest('/app/shop/getShopInfoById', {
|
|
id: shopId,
|
|
regionId: regionId
|
|
}, false, 'POST', 'application/x-www-form-urlencoded').then(res => {
|
|
|
|
if (res.code == 200) {
|
|
this.applyShop(this.normalizeShopResult(res.result))
|
|
} else {
|
|
this.applyShop(this.getCachedShop())
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
normalizeShopResult(result) {
|
|
if (result.shop) {
|
|
const data = Object.assign({}, result.shop, result)
|
|
delete data.shop
|
|
return data
|
|
}
|
|
return result || {}
|
|
},
|
|
getCachedShop() {
|
|
const shopList = uni.getStorageSync('schoolShop') || []
|
|
const shopId = uni.getStorageSync('shopId')
|
|
if (Array.isArray(shopList)) {
|
|
const item = shopList.find(shop => shop.id == shopId || shop.shopName == uni.getStorageSync(
|
|
'shopName'))
|
|
if (item) return item
|
|
}
|
|
return uni.getStorageSync('shop') || {
|
|
id: shopId,
|
|
shopName: uni.getStorageSync('shopName') || '',
|
|
shopIcon: uni.getStorageSync('shopIcon') || ''
|
|
}
|
|
},
|
|
applyShop(data) {
|
|
const shop = Object.assign({
|
|
id: '',
|
|
shopName: '',
|
|
shopIcon: '',
|
|
shopType: '',
|
|
shopTypeTitle: '',
|
|
subtitle: '',
|
|
shopAddress: '',
|
|
contactPhone: '',
|
|
aliAccount: '',
|
|
aliName: '',
|
|
remark: '',
|
|
shopArea: '',
|
|
shopAreaTitle: '',
|
|
regionId: '',
|
|
region: ''
|
|
}, data || {})
|
|
Object.keys(shop).forEach(key => {
|
|
if (shop[key] === null) shop[key] = ''
|
|
})
|
|
this.shop = shop
|
|
this.parseShopImages(shop.shopImages)
|
|
},
|
|
parseShopImages(value) {
|
|
const list = []
|
|
if (!value) {
|
|
this.certificateImages = []
|
|
return
|
|
}
|
|
const parts = String(value).split('@@')
|
|
parts.forEach((item, index) => {
|
|
if (!item) return
|
|
if (index == 3) {
|
|
try {
|
|
const extra = JSON.parse(item)
|
|
if (Array.isArray(extra)) {
|
|
extra.forEach(url => {
|
|
if (url) list.push(url)
|
|
})
|
|
}
|
|
} catch (e) {}
|
|
} else {
|
|
list.push(item)
|
|
}
|
|
})
|
|
this.certificateImages = list
|
|
},
|
|
getShopTypeList() {
|
|
this.NB.sendRequest('/dictData/getByCondition', {
|
|
sort: 'sortOrder',
|
|
order: 'asc',
|
|
dictId: '1712359407444168704'
|
|
}, false, 'GET', 'application/x-www-form-urlencoded').then(res => {
|
|
|
|
if (res.code == 200) {
|
|
const content = res.result && res.result.content ? res.result.content : []
|
|
this.shopTypeList = content.map(item => {
|
|
return {
|
|
value: item.value,
|
|
text: item.title
|
|
}
|
|
})
|
|
if (this.shop.shopType && !this.shop.shopTypeTitle) {
|
|
this.shop.shopTypeTitle = this.getShopTypeText(this.shop.shopType)
|
|
}
|
|
} else {
|
|
this.applyShop(this.getCachedShop())
|
|
|
|
}
|
|
})
|
|
},
|
|
getShopTypeText(value) {
|
|
const item = this.shopTypeList.find(item => item.value == value || item.text == value)
|
|
return item ? item.text : value
|
|
},
|
|
normalizeId(value) {
|
|
return String(value || '').split(',')[0]
|
|
},
|
|
previewImage(url) {
|
|
if (!url) return
|
|
uni.previewImage({
|
|
current: url,
|
|
urls: this.certificateImages
|
|
})
|
|
},
|
|
validateShop() {
|
|
if (!this.shop.shopArea) return '店铺区域信息缺失，请重新进入页面后再保存'
|
|
if (!this.shop.contactPhone) return '请输入联系方式'
|
|
if (!this.shop.aliAccount) return '请输入支付宝账号'
|
|
if (!this.shop.aliName) return '请输入支付宝实名'
|
|
return ''
|
|
},
|
|
updateLocalShopCache() {
|
|
let shopList = uni.getStorageSync('schoolShop') || []
|
|
if (Array.isArray(shopList)) {
|
|
shopList = shopList.map(item => item.id == this.shop.id ? Object.assign({}, item, this.shop) : item)
|
|
uni.setStorageSync('schoolShop', shopList)
|
|
}
|
|
uni.setStorageSync('shop', this.shop)
|
|
uni.setStorageSync('shopName', this.shop.shopName)
|
|
uni.setStorageSync('shopIcon', this.shop.shopIcon)
|
|
},
|
|
submit() {
|
|
const error = this.validateShop()
|
|
if (error) {
|
|
uni.showToast({
|
|
title: error,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
const shopId = this.getShopId()
|
|
const payload = {
|
|
id: this.normalizeId(shopId),
|
|
shopArea: this.normalizeId(this.shop.shopArea),
|
|
subtitle: this.shop.subtitle,
|
|
contactPhone: this.shop.contactPhone,
|
|
aliAccount: this.shop.aliAccount,
|
|
aliName: this.shop.aliName
|
|
}
|
|
const query = Object.keys(payload).map(key => {
|
|
return key + '=' + encodeURIComponent(payload[key] == null ? '' : payload[key])
|
|
}).join('&')
|
|
this.submitLoading = true
|
|
this.NB.sendRequest('/app/shop/edit?' + query, {}, false, 'PUT', 'application/x-www-form-urlencoded').then(res => {
|
|
|
|
if (res.code == 200) {
|
|
this.updateLocalShopCache()
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '店铺资料已更新',
|
|
showCancel: false,
|
|
success: (modalRes) => {
|
|
if (modalRes.confirm) uni.navigateBack()
|
|
}
|
|
})
|
|
}
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page,
|
|
.page1 {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
font-size: 24rpx;
|
|
color: #12342d;
|
|
background:
|
|
radial-gradient(circle at 92% 120rpx, rgba(166, 255, 234, 0.45) 0, rgba(166, 255, 234, 0) 240rpx),
|
|
linear-gradient(180deg, #f3fff6 0%, #f5f8f5 36%, #eef4f1 100%);
|
|
overflow: scroll;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 260rpx;
|
|
padding: 58rpx 42rpx 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(135deg, rgba(227, 255, 150, 0.95) 0%, rgba(166, 255, 234, 0.86) 58%, rgba(255, 255, 255, 0.72) 100%),
|
|
url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') center/cover no-repeat;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -34rpx;
|
|
top: -44rpx;
|
|
width: 290rpx;
|
|
height: 290rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.32);
|
|
}
|
|
|
|
.hero-title {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 46rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 900;
|
|
letter-spacing: 2rpx;
|
|
color: #07362d;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 12rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: rgba(0, 35, 28, 0.62);
|
|
}
|
|
|
|
.form-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 92%;
|
|
margin: -54rpx auto 0;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-bottom: 24rpx;
|
|
overflow: hidden;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.86);
|
|
border-radius: 28rpx;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 16rpx 36rpx rgba(0, 35, 28, 0.08);
|
|
}
|
|
|
|
.section-title {
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
padding: 0 28rpx;
|
|
border-bottom: 1rpx solid #edf3f0;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
color: #102f28;
|
|
}
|
|
|
|
.value {
|
|
width: 100%;
|
|
min-height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-top: 1rpx solid #edf3f0;
|
|
padding: 0 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.section-title+.value {
|
|
border-top: none;
|
|
}
|
|
|
|
.name {
|
|
width: 210rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
color: #153c34;
|
|
}
|
|
|
|
.text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: right;
|
|
color: #263f39;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.text input {
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #263f39;
|
|
}
|
|
|
|
.text textarea {
|
|
width: 100%;
|
|
height: 132rpx;
|
|
line-height: 42rpx;
|
|
padding-top: 18rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #263f39;
|
|
}
|
|
|
|
.textarea-row {
|
|
align-items: flex-start;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 18rpx;
|
|
}
|
|
|
|
.textarea-row .name {
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.picker-text {
|
|
min-height: 96rpx;
|
|
line-height: 96rpx;
|
|
font-size: 28rpx;
|
|
color: #263f39;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.picker-text.placeholder {
|
|
color: #9aa7a3;
|
|
}
|
|
|
|
.image-row {
|
|
min-height: 212rpx;
|
|
}
|
|
|
|
.image-cell {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.upload-img {
|
|
width: 172rpx;
|
|
height: 172rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 24rpx;
|
|
background: #f6faf8;
|
|
border: 1rpx dashed rgba(11, 155, 115, 0.26);
|
|
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.cert-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 18rpx;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cert-item {
|
|
overflow: hidden;
|
|
border-radius: 22rpx;
|
|
background: #f6faf8;
|
|
border: 1rpx solid #edf3f0;
|
|
}
|
|
|
|
.cert-item image {
|
|
width: 100%;
|
|
height: 180rpx;
|
|
display: block;
|
|
}
|
|
|
|
.cert-item text {
|
|
display: block;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
color: #153c34;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
margin: 44rpx auto 12rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(90deg, #e3ff96 0%, #a6ffea 100%);
|
|
color: #00231c;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
box-shadow: 0 18rpx 36rpx rgba(0, 35, 28, 0.14);
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
</style>
|