Huanyuyuehui/pages/admin/shopInfo/index.vue

651 lines
16 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="step_one" >
<view class="popup_group">
<view class="popup_group_item" >
<view class="popup_group_item_label">商户名称</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<span v-if="shopInfo.mer_name" class="popup_group_item_message_value">{{ shopInfo.mer_name }}</span>
<span v-else>请填写商户名称</span>
</view>
<!-- <view><span class="iconfont">&#xe6bd;</span></view> -->
</view>
</view>
<view class="popup_group_item" >
<view class="popup_group_item_label">商户负责人手机号</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<span v-if="shopInfo.mer_take_phone" class="popup_group_item_message_value">{{ shopInfo.mer_take_phone }}</span>
<span v-else>请填写商户负责人手机号</span>
</view>
<!-- <view><span class="iconfont">&#xe6bd;</span></view> -->
</view>
</view>
<view class="popup_group_item" >
<view class="popup_group_item_label">商户负责人姓名</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<text v-if="shopInfo.mer_take_name" class="popup_group_item_message_value line1">{{ shopInfo.mer_take_name }}</text>
<text v-else>请填写商户负责人姓名</text>
</view>
<!-- <view><text class="iconfont">&#xe6bd;</text></view> -->
</view>
</view>
<view class="popup_group_item">
<view class="popup_group_item_label">商户入住时间</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<text v-if="shopInfo.create_time" class="popup_group_item_message_value line1">{{ shopInfo.create_time.split(' ')[0] }}</text>
<text v-else>请填写商户入住时间</text>
</view>
</view>
</view>
</view>
<view class="popup_group">
<!-- <view class="radio">
<view class="radio_label ">规格选择</view>
<radio-group class="select_group flex_start" @change="specificationsRadioChange($event)">
<label class="radio_select" v-for="(val, i) in specificationsRadioList" :key="val.value">
<view><radio :value="val.value" :checked="val.value == setFormData.spec_type" /></view>
<view>{{ val.name }}</view>
</label>
</radio-group>
</view> -->
<view class="popup_group_item" >
<view class="popup_group_item_label">详细地址</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<input v-model="shopInfo.mer_address" type="text" placeholder="请填写详细地址" />
</view>
</view>
</view>
<view class="popup_group_item" >
<view class="popup_group_item_label">商户承诺</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message" v-if="shopInfo.detail">
<input v-model="shopInfo.detail.promise" type="text" placeholder="请填写商户承诺" />
</view>
</view>
</view>
<view class="popup_group_item" style="display: flex;flex-direction: column;">
<view class="popup_group_item_label" style="width: 100%;">提供服务</view>
<view class="" style="margin-top: 14px;">
<checkbox-group @change="checkServiceChange" style="display: flex;flex-direction: row;flex-wrap: wrap;grid-row-gap: 8px;grid-column-gap: 35px;">
<label v-for="(item,index) in list">
<checkbox :value="item" :checked="shopInfo.detail.services.indexOf(item)>-1" />{{item}}
</label>
</checkbox-group>
</view>
</view>
<view class="popup_group_item" style="display: flex;flex-direction: column;">
<view class="popup_group_item_label" style="width: 100%;">营业日期</view>
<view class="" style="margin-top: 14px;">
<checkbox-group @change="checkboxChange" style="display: flex;flex-direction: row;flex-wrap: wrap;grid-row-gap: 8px;grid-column-gap: 35px;">
<label v-for="(item,index) in week">
<checkbox :value="item.value+''" :checked="shopInfo.mer_take_day.indexOf(item.value)>-1" />{{item.name}}
</label>
</checkbox-group>
</view>
</view>
<view class="popup_group_item" >
<view class="popup_group_item_label">营业时间</view>
<view class="popup_group_item_value">
<picker mode="time" style="min-width: 50px;height: 20px;text-align:center;" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
<picker mode="time" style="min-width: 50px;height: 20px;text-align:center;" :value="time2" start="09:01" end="21:01" @change="bindTimeChange2">
<view class="uni-input">{{time2}}</view>
</picker>
</view>
</view>
<view class="popup_group_item" >
<view class="popup_group_item_label">客服电话</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<input v-model="shopInfo.mer_phone" type="text" placeholder="请填写客服电话" />
<!-- <span v-else>去设置</span> -->
</view>
<view><span class="iconfont">&#xe6bd;</span></view>
</view>
</view>
</view>
<view class="popup_group">
<view class="popup_group_item" style="flex-direction: column;">
<view class="popup_group_item_label" style="width: 100%;">商户信息</view>
</view>
<view class="popup_group_item" style="flex-direction: column;">
<view class="popup_group_item_value" v-if="shopInfo.detail">
<textarea style="font-size: 14px;color: #666;" maxlength="-1" v-model="shopInfo.detail.detail" type="text" placeholder="商户信息" />
</view>
</view>
<view class="upload" style="padding-left: 15px;">
<text class="item-title" style="width: 100%;">请上传商户轮播图</text>
<text class="item-desc" style="width: 100%;">(图片最多可上传10张,图片格式支持JPG、PNG、JPEG)</text>
<view class="update-list">
<view class='pictrue' v-for="(item,index) in pics" :key="index" :data-index="index" @click="getPhotoClickIdx">
<image :src='item.img' style="border-radius: 4px;"></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text>
</view>
<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="pics.length < 10">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
</view>
<view class="handle"><view class="handle_button" @click="updateInfo">保存信息</view></view>
</view>
</view>
</template>
<script>
import {getAdminInfo,updateAdminInfo,getAdminConfig} from '@/api/admin.js'
export default {
components: {
},
data() {
return {
shopInfo:{},
mer_id:'',
detail:'',
pics:[],
time:'',
time2:'',
list:[],
service:[],
navtop:0,
// week: [ "周一", "周二", "周三", "周四", "周五", "周六","周日"],
week:[{name:'周一',value:1},{name:'周二',value:2},
{name:'周三',value:3},{name:'周四',value:4},
{name:'周五',value:5},{name:'周六',value:6},
{name:'周日',value:7}]
};
},
onLoad(option){
this.mer_id = option.mer_id
},
onShow() {
this.getInfo();
getAdminConfig(this.mer_id).then((res)=>{
if(res){
this.list=res.data;
}
});
},
created() {
let statusBarHeight= uni.getSystemInfoSync().statusBarHeight+"px";
this.navtop=statusBarHeight;
},
methods:{
goBack(){
uni.navigateBack({
delta:1
})
},
checkboxChange (e) {
this.shopInfo.mer_take_day = e.detail.value.map(Number);
},
checkServiceChange(e){
this.service=e.detail.value;
},
bindTimeChange(e) {
this.time = e.detail.value
},
bindTimeChange2(e) {
this.time2 = e.detail.value
},
getInfo(){
getAdminInfo(this.mer_id).then((res)=>{
if(res){
this.shopInfo=res.data;
this.time=res.data.mer_take_time[0];
this.time2=res.data.mer_take_time[1];
this.pics=res.data.detail.images;
}
})
},
updateInfo(){
let data1={
detail:this.shopInfo.detail.detail,
promise:this.shopInfo.detail.promise,
images:this.pics,
mer_take_phone:this.shopInfo.mer_take_phone,
mer_take_day:this.shopInfo.mer_take_day,
mer_take_time:[this.time,this.time2],
services:this.service,
}
updateAdminInfo(data1,this.mer_id).then((res)=>{
if(res.status==200){
this.$util.Tips({
title: res.message
})
setTimeout(()=>{
uni.navigateBack()
},2000)
}
})
},
// 图片预览
// 获得相册 idx
getPhotoClickIdx(e) {
let _this = this;
let idx = e.currentTarget.dataset.index;
_this.imgPreview(_this.pics, idx);
},
// 图片预览
imgPreview: function(list, idx) {
// list图片 url 数组
if (list && list.length > 0) {
uni.previewImage({
current: list[idx], // 传 Number H5端出现不兼容
urls: list
});
}
},
DelPic: function(index) {
let that = this,
pic = this.pics[index];
that.pics.splice(index, 1);
that.$set(that, 'pics', that.pics);
},
uploadpic: function() {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.pics.push({img:res.data.path});
that.$set(that, 'pics', that.pics);
});
},
}
};
</script>
<style lang="scss" scoped>
// addGoodsFormData
// singleSpecification -- 单规格
// attrValue -- 多规格数据
// modifyPriceData -- 多规格选择时,已经存储的数据
.container {
padding-top: 20rpx;
padding-bottom: 156rpx;
}
.container .top-tab{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 28rpx 0;
font-size: 32rpx;
font-weight: bold;
background-color: white;
}
.container .top-tab .tab-location{
font-size: 28rpx;
font-weight: 500;
position: absolute;
left:28rpx;
display: flex;
align-items: center;
}
.container .top-tab .tab-sao{
font-size: 40rpx;
position: absolute;
right:28rpx;
color:var(--view-theme);
}
.container .top-tab .tab-location .icon-dingwei{
color: var(--view-theme);
font-size: 28rpx;
}
/deep/ .uni-checkbox-input.uni-checkbox-input-checked{
border: 1px solid #2291F8 !important;
background-color: #2291F8 !important;
}
.pictrue {
width: 130rpx;
height: 130rpx;
margin: 24rpx 22rpx 0 0;
position: relative;
font-size: 11px;
color: #bbb;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-last-child(1) {
border: 0.5px solid #ddd;
box-sizing: border-box;
}
uni-image,
image {
width: 100%;
height: 100%;
border-radius: 1px;
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
}
.icon-guanbi1 {
font-size: 33rpx;
position: absolute;
top: -10px;
right: -10px;
}
}
.tip {
padding: 16rpx 0 0 40rpx;
font-size: 22rpx;
color: #2291f8;
display: flex;
align-items: center;
margin-bottom: 40rpx;
.iconfont {
display: inline-block;
margin-right: 10rpx;
}
}
.upload {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.upload {
margin-top: 20rpx;
padding: 20rpx 0;
justify-content: center;
align-items: center;
}
.item-desc {
color: #B2B2B2;
font-size: 22rpx;
display: block;
margin-top: 9rpx;
line-height: 36rpx;
}
.update-list{
display: flex;
flex-direction: row;
grid-gap: 12px;
flex-wrap: wrap;
}
.popup_group {
background: #fff;
margin: 31rpx auto;
width: 710rpx;
font-size: 30rpx;
border-radius: 10rpx;
.popup_group_item {
padding: 32rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.popup_group_item_value {
display: flex;
align-items: center;
.popup_group_item_message {
margin-right: 15rpx;
color: #bbbbbb;
max-width: 400rpx;
&_value {
display: inline-block;
max-width: 400rpx;
color: #000;
}
}
.iconfont {
color: #bbbbbb;
}
input {
text-align: right;
}
}
}
> view:not(:last-child) {
border-bottom: 1px solid #eeeeee;
}
}
.handle {
width: 100%;
height: 126rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
&_button {
width: 690rpx;
height: 86rpx;
background: #2291f8;
border-radius: 43px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #ffffff;
}
}
.input_content {
background: #fff;
padding: 20rpx 30rpx 40rpx 30rpx;
width: 710rpx;
margin: auto;
box-sizing: border-box;
border-radius: 10rpx;
&_textarea {
border-bottom: 1px solid #eeeeee;
padding-bottom: 19rpx;
textarea {
height: 114rpx;
}
> view {
text-align: right;
color: #666666;
font-size: 24rpx;
}
}
&_photo {
margin-top: 30rpx;
display: flex;
flex-wrap: wrap;
&_adPh {
position: relative;
width: 210rpx;
height: 210rpx;
border: 1px solid #dddddd;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
box-sizing: border-box;
&:nth-child(3n){
margin-right: 0;
}
> view:nth-child(1) {
height: 37rpx;
margin-bottom: 16rpx;
display: flex;
justify-content: center;
image {
width: 45rpx;
display: block;
}
}
> view:nth-child(2) {
text-align: center;
color: #bbbbbb;
font-size: 24rpx;
}
.photos {
width: 206rpx;
// height: 208rpx;
}
&_jiao {
position: absolute;
top: -2rpx;
right: -1rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 8rpx 0 8rpx;
image {
width: 16rpx;
height: 16rpx;
}
}
}
}
&_describe {
border-top: 1px solid #eeeeee;
padding-top: 30rpx;
padding-bottom: 47rpx;
border-bottom: 1px solid #eeeeee;
&_title {
display: flex;
align-items: center;
justify-content: space-between;
&_msg {
color: #333333;
font-size: 30rpx;
}
&_num {
color: #666666;
font-size: 24rpx;
}
}
&_textarea {
border-radius: 10px;
margin-top: 20rpx;
height: 180rpx;
background: #f5f5f5;
padding: 20rpx;
textarea {
font-size: 28rpx;
height: 150rpx;
}
}
}
&_keyword {
padding-top: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
&_value {
flex: 1;
margin-left: 30rpx;
input {
width: 100%;
text-align: right;
}
}
}
}
.photo_count{
margin-top: 28rpx;
.photo_size{
font-size: 24rpx;
color: #999999;
}
}
.radio {
padding: 30rpx;
&_label {
padding-left: 10rpx;
color: #333333;
font-size: 30rpx;
display: flex;
align-items: center;
.select_check {
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 40rpx;
border: 1px solid #cccccc;
border-radius: 50%;
margin-right: 20rpx;
.iconfont {
font-size: 24rpx;
}
}
.select {
background: #2291f8;
border: none;
.iconfont {
color: #fff;
}
}
}
.select_group {
display: flex;
}
.flex_start {
padding: 0 10rpx;
margin-top: 40rpx;
justify-content: flex-start;
}
&_select {
display: flex;
margin-right: 110rpx;
}
}
.dobuButton {
padding: 0 30rpx;
}
.margin_right {
background: #FD6523;
margin-right: 30rpx;
}
</style>