shop-applet/pages/product/basicSet.vue

831 lines
21 KiB
Vue
Raw Permalink 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="basic_set">
<!-- 老板说这里不要 -->
<view class="basice_item">
<view class="headline">
<view class="text flex_a_c">店铺基本配置</view>
</view>
<view class="store_bg" v-if="false">
<view class="text flex_a_c"><i class="iconfont icon-xinghao"></i>店铺背景图</view>
<block v-if="images[0].img">
<u--image :showLoading="true" :src="images[0].img" width="680rpx" height="210.53rpx" radius="4px"
@click="delImg(0)"></u--image>
</block>
<view v-else class="upload" @click="seleckImage(0)">
<view class="iconfont icon-tupian1"></view>
建议尺寸710*220px
</view>
</view>
<view class="store_avatar flex_a_c_j_sb">
<view class="avatar_box">
<view class="text flex_a_c"><i class="iconfont icon-xinghao"></i>店铺头像</view>
<block v-if="images[1].img">
<u--image :showLoading="true" :src="images[1].img" width="210.53rpx" height="210.53rpx"
radius="4px" @click="delImg(1)" mode="aspectFit"></u--image>
</block>
<view v-else class="avatar_img" @click="seleckImage(1)">
<view class="iconfont icon-tupian1"></view>
建议尺寸120*120px
</view>
</view>
<view class="zizhi_box">
<view class="text">店铺资质</view>
<block v-if="images[3].img">
<u--image :showLoading="true" @click="!imgUpload?priviewImg([images[3].img]):seleckImage(3)"
:src="images[3].img" width="382.46rpx" height="210.53rpx" radius="4px"></u--image>
</block>
<view v-else class="zizhi_img" @click="seleckImage(3)">
<view class="iconfont icon-tupian1"></view>
</view>
</view>
</view>
<view class="store_avatar flex_a_c_j_sb" style="padding: 20rpx 0;" v-if="imagesArr.length>0">
<view class="avatar_box">
<view class="text flex_a_c"></i>店铺其他资质</view>
<view class="other-img">
<view class="other-item" v-for="(imgArr,index) in imagesArr" :key="index"
:style="{marginRight: (index+1)%3==0?'0rpx':'20rpx'}">
<u--image :showLoading="true" @click="priviewImg(imagesArr, index)" :src="imgArr"
width="210.53rpx" height="210.53rpx" radius="4px"></u--image>
</view>
</view>
</view>
</view>
<view class="ask_title">拍摄要求</view>
<view class="shoot_ask flex_a_c_j_sb">
<block v-for="(item,i) in shootAsk" :key="i">
<view class="shoot_item">
<image class="shoot_img" :src="item.url" mode=""></image>
<view class="shoot_msg flex_a_c">
<u-icon v-if="i > 0" name="close" color="#F20950" size="18"></u-icon>
<u-icon v-else name="checkmark" color="#20A162" size="18"></u-icon>
{{ item.text }}
</view>
</view>
</block>
</view>
<view class="street_bg" style="margin-bottom:20rpx;" v-if="false">
<view class="text flex_a_c"> <i class="iconfont icon-xinghao"></i> 店铺街背景图</view>
<block v-if="images[2].img">
<u--image :showLoading="true" :src="images[2].img" width="680rpx" height="210.53rpx" radius="4px"
@click="delImg(2)"></u--image>
</block>
<view v-else class="street_img flex_a_c" @click="seleckImage(2)">
<view class="iconfont icon-tupian1"></view>
<view>建议尺寸:710*134px或710*460px(请根据平台要求选择尺寸,此图如未上传默认展示店铺背景图)</view>
</view>
</view>
</view>
<view class="basice_item">
<view class="headline">
<view class="text flex_a_c">配送基本配置</view>
</view>
<view class="item_cell">
<view class="flex_a_c">
<text class="sub_title">配送方式:</text>
<view class="flex">
<checkbox-group name="" @change="checkboxChange">
<checkbox :checked="isZiti" :value="check.ziti" /><text class="text ziti">到店自提</text>
<checkbox :checked="isKuaidi" :value="check.kuaidi" /><text class="text">商家配送</text>
</checkbox-group>
</view>
</view>
<view class="remark">
*只选择一种配送方式时,会自动修改店铺所有商品的配送方式
</view>
</view>
<block>
<view class="item_cell flex_a_c"
style="display: flex;justify-content: space-between;align-items: flex-start;">
<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>详细地址:</view>
<view class="input" style="flex: 1;margin-right: 15rpx;">{{mer_address}}</view>
<view class="get_site flex_a_c" @click="navTo('/pages/select_address/select_address_n')">
<i class="iconfont icon-dizhi"></i>
获取地址
</view>
</view>
<!-- <view class="long_lat">
<input class="com_input site_input" type="text" v-model="longLati" placeholder="输入经纬度坐标">
<view class="get_site flex_a_c" @click="selfLocation">
<i class="iconfont icon-dizhi"></i>
获取地址
</view>
</view> -->
<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>提货点营业日期:</view>
<view class="week_box">
<view class="week_item" v-for="(item,index) in dateWeek" :key="index" @click="sel(index)">
<view class="date_week" :class="item.isCheck ? 'date_week_a' : ''">
{{ item.name }}
</view>
</view>
</view>
<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>店铺营业时间:</view>
<view class="bus_time flex_a_c">
<view class="select" @click="beginTimeShow = true">
{{ mer_take_time[0] ? mer_take_time[0] : '选择开始时间' }}
</view>
<view class="select" @click="overTimeShow = true">
{{ mer_take_time[1] ? mer_take_time[1] : '选择结束时间' }}
</view>
</view>
</block>
</view>
<view class="basice_item">
<view class="headline">
<view class="text flex_a_c">商户信息配置</view>
</view>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c">商户名称:</view>
<view class="com_input">{{mer_name}}</view>
</view>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c">商户分类:</view>
<view class="com_input">{{category_name}}</view>
</view>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c">客服电话:</view>
<view class="com_input">{{servicePhone}}</view>
</view>
<!-- <view class="item_cell flex_a_c" v-if="type_code!='TypeFamousSpecialties'||type_code!='TypeLocalCuisine'||type_code!='TypeFeaturedCultural'" >
<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao" v-if="credit_buy"></i>开启先货后款:</view>
<u-switch v-model="credit_buy" @change="change"></u-switch>
</view>
<view class="item_cell flex_a_c" v-if="credit_buy">
<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>先货后款结算周期:</view>
<input type="number" v-model="settle_cycle" placeholder="请输入 /周期单位为:天">
</view>
<view class="remarks" v-if="credit_buy">*周期结算时间范围为:15~90 周期单位为:天</view>
<view class="item_cell flex_a_c" v-if="credit_buy">
<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>先货后款结算利率:</view>
<input type="number" maxlength="5" v-model="interest_rate" placeholder="请输入 /利率单位为: %">
</view>
<view class="remarks">*利率结算范围为:0.01 ~ 0.1 利率单位为:%</view> -->
<!-- <view class="item_cell">
<view class="if_btn flex_a_c_j_sb">
<text class="sub_title">是否开启商户:</text>
<u-switch v-model="merState"></u-switch>
</view>
<text style="color: #CCCCCC;">开启后,店铺即可展示在移动端</text>
</view> -->
</view>
<button class="submit_btn l_center" @click="postMerchantUpdata">提交</button>
<u-datetime-picker :show="beginTimeShow" v-model="mer_take_time[0]" mode="time" @close="beginTimeShow = false"
:closeOnClickOverlay="true" @cancel="beginTimeShow = false"
@confirm="beginTimeShow = false"></u-datetime-picker>
<u-datetime-picker :show="overTimeShow" v-model="mer_take_time[1]" mode="time" @close="overTimeShow = false"
:closeOnClickOverlay="true" @cancel="overTimeShow = false"
@confirm="overTimeShow = false"></u-datetime-picker>
</view>
</template>
<script>
import {
navigateBack,
Toast
} from '@/libs/uniApi.js'
import {
getGeocoder,
} from '@/api/store.js';
import {
merchantUpdateAPI,
merchantInfoAPI
} from "@/api/product"
import {
uploads
} from '@/api/upload.js'
export default {
data() {
return {
shootAsk: [{
url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/bzps.png',
text: '标准拍摄'
},
{
url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/bkqs.png',
text: '边框缺失'
},
{
url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/zpmh.png',
text: '照片模糊'
},
{
url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/sgql.png',
text: '闪光强烈'
}
],
images: [{
img: ''
}, {
img: ''
}, {
img: ''
}, {
img: ''
}],
imgUpload: true, // 是否可以上传店铺资质
imagesArr: [],
storeBg: '',
check: {
ziti: '1',
kuaidi: '2'
},
isZiti: false,
isKuaidi: false,
delivery_way: [1, 2],
takeName: '',
takePhone: '',
servicePhone: '',
cruxText: '',
intro: '',
detailSite: '',
longitude: '', // 经度
latitude: '', // 纬度
longLati: '', // 经纬度
merState: true, // 是否开启商户
dateWeek: [{
name: '星期一',
id: 1,
isCheck: true
}, {
name: '星期二',
id: 2,
isCheck: true
}, {
name: '星期三',
id: 3,
isCheck: true
}, {
name: '星期四',
id: 4,
isCheck: true
}, {
name: '星期五',
id: 5,
isCheck: true
}, {
name: '星期六',
id: 6,
isCheck: true
}, {
name: '星期日',
id: 7,
isCheck: true
}],
mer_take_time: ['08:00', '18:00'],
beginTimeShow: false,
overTimeShow: false,
mer_address: '',
id: '',
mer_certificate: '',
credit_buy: false, //开启信用购
interest_rate: '', //利率
settle_cycle: '', //周期
mer_name: '',
category_name: '', //分类名称
type_code: ''
}
},
onLoad(e) {
this.id = e.mer_id
this.getMerchantInfo(e.mer_id);
},
methods: {
getMerchantInfo(id) {
merchantInfoAPI({
id
}).then(res => {
console.log(res)
this.mer_name = res.data.mer_name
this.category_name = res.data.merchantCategory.category_name
// this.images[0].img = res.data.mer_banner
this.images[1].img = res.data.mer_avatar
// this.images[2].img = res.data.mini_banner
if (typeof res.data.mer_certificate != 'string') {
this.images[3].img = res.data.mer_certificate[0];
res.data.mer_certificate.shift();
this.imagesArr = res.data.mer_certificate;
} else this.images[3].img = res.data.mer_certificate;
if (this.images[3].img) this.imgUpload = false;
// 初始化默认
if (!res.data.delivery_way || res.data.delivery_way.length == 0) {
this.delivery_way = [1, 2];
this.isZiti = true;
this.isKuaidi = true;
} else {
if (typeof res.data.delivery_way == 'string') this.delivery_way = res.data.delivery_way
.split(
',');
else this.delivery_way = res.data.delivery_way;
this.delivery_way.forEach(item => {
if (item === '1') this.isZiti = true
if (item === '2') this.isKuaidi = true
})
}
this.takeName = res.data.mer_take_name
this.takePhone = res.data.mer_take_phone
this.detailSite = res.data.mer_take_address
this.servicePhone = res.data.mer_phone;
res.data.mer_take_location ? this.longLati = res.data.mer_take_location?.join(',') : null;
// 是否有营业日期
if (res.data.mer_take_day && res.data.mer_take_day.length > 0) {
this.dateWeek.forEach(item => {
let day = res.data.mer_take_day.find(i => i == item.id);
if (day) item.isCheck = true;
else item.isCheck = false;
})
}
this.type_code = res.data.type_code
this.mer_take_time = res.data.mer_take_time
this.intro = res.data.mer_info
this.cruxText = res.data.mer_keyword
if (!res.data.mer_address) {
this.selfLocation();
} else {
this.mer_address = res.data.mer_address;
}
this.merState = res.data.mer_state === 1 ? true : false
this.credit_buy = res.data.credit_buy === 1 ? true : false
if (res.data.settle_cycle == 0) {
this.settle_cycle = ''
} else {
this.settle_cycle = res.data.settle_cycle
}
if (res.data.interest_rate == 0) {
this.interest_rate = ''
} else {
this.interest_rate = res.data.interest_rate
}
}).catch(err => {
// console.log('err', err);
})
},
checkboxChange(val) {
if (val.detail.value.length == 0) {
this.isZiti = false;
this.isKuaidi = false;
this.$nextTick(() => {
if (this.delivery_way[0] == 1) this.isZiti = true;
else this.isKuaidi = true;
})
return Toast('请至少选择一种配送方式!');
}
this.delivery_way = val.detail.value;
},
//开启信用购
change(e) {
this.credit_buy = e
},
// 选择营业日期
sel(i) {
this.dateWeek[i].isCheck = !this.dateWeek[i].isCheck;
},
postMerchantUpdata() {
uni.showModal({
title: '确定提交吗',
success: (res) => {
if (res.confirm) {
this.submitData()
}
}
})
},
submitData() {
if (this.settle_cycle < 15) {
this.settle_cycle = 15
} else if (this.settle_cycle > 90) {
this.settle_cycle = 90
}
if (this.interest_rate < 0.01) {
this.interest_rate = 0.01
} else if (this.interest_rate > 0.1) {
this.interest_rate = 0.1
}
let data = {
mer_banner: this.images[0].img,
mer_avatar: this.images[1].img,
mini_banner: this.images[2].img,
mer_certificate: this.images[3].img,
delivery_way: this.delivery_way,
mer_take_name: this.takeName,
mer_take_phone: this.takePhone,
mer_take_address: this.detailSite,
lat: this.latitude,
long: this.longitude,
mer_take_location: [this.latitude, this.longitude], // 经纬度
mer_take_day: [], // 提货点营业日期
mer_take_time: this.mer_take_time, // 提货时间
mer_info: this.intro,
mer_keyword: this.cruxText,
service_phone: this.servicePhone,
mer_address: this.mer_address,
mer_state: this.merState ? '1' : '0',
type: '2',
uploadedqualifications: '',
id: this.id,
credit_buy: this.credit_buy,
settle_cycle: this.settle_cycle,
interest_rate: this.interest_rate
}
// 营业时间
this.dateWeek.map(i => {
if (i.isCheck) {
data.mer_take_day.push(i.id)
}
})
merchantUpdateAPI(data).then(res => {
Toast(res.message)
setTimeout(() => {
uni.navigateBack();
}, 1000)
}).catch(err => {
Toast(err)
})
},
selfLocation() {
let that = this;
uni.getLocation({
type: 'wgs84',
success: (res) => {
that.latitude = res.latitude.toString();
that.longitude = res.longitude.toString();
that.longLati = `${res.latitude},${res.longitude}`
getGeocoder({
lat: that.latitude,
long: that.longitude
}).then(res => {
this.mer_address = res.data.address;
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
this.street = '定位失败'
})
},
fail: (err) => {
Toast(err)
}
});
},
seleckImage(i) {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.images[i].img = res.data.path
});
},
seleckImageArr() {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.imagesArr.push(res.data.path)
});
},
delImg(i) {
let that = this
uni.showModal({
title: '删除图片',
content: '确定删除图片?',
success: res => {
if (res.confirm) {
that.images[i].img = ''
}
}
})
},
delImgArr(i) {
let that = this
uni.showModal({
title: '删除图片',
content: '确定删除图片?',
success: res => {
if (res.confirm) {
that.imagesArr.splice(i, 1);
}
}
})
},
priviewImg(url, index = 0) {
uni.previewImage({
urls: url,
current: index
})
},
navTo(url) {
if (url == '/pages/select_address/select_address_n') {
uni.$once('changeAddress', (res) => {
this.mer_address = res.formatted_addresses.recommend;
this.latitude = res.latitude;
this.longitude = res.longitude;
this.longLati = `${res.latitude},${res.longitude}`
})
}
uni.navigateTo({
url: url
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.icon-xinghao {
font-size: 28.07rpx;
color: red;
margin-right: 6px;
}
.basice_item {
background-color: #fff;
padding: 38.6rpx 35.09rpx;
margin-bottom: 35.09rpx;
}
.headline {
margin-bottom: 42.11rpx;
.text {
font-size: 35.09rpx;
font-weight: bold;
&::before {
content: '';
display: inline-block;
width: 4px;
height: 20px;
background: linear-gradient(180deg, #66CE69 0%, #20A162 100%);
border-radius: 0px 2px 2px 0px;
margin-right: 8.77rpx;
}
}
}
.store_bg {
margin-bottom: 49.12rpx;
.text {
font-size: 31.58rpx;
margin-bottom: 24.56rpx;
}
.upload {
width: 100%;
height: 210.53rpx;
border-radius: 7.02rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dpbjt.png');
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 28.07rpx;
display: flex;
flex-direction: column;
justify-content: center;
.icon-tupian1 {
font-size: 77.19rpx;
color: #666666;
}
}
}
.store_avatar {
width: 100%;
.avatar_box {
.text {
font-size: 31.58rpx;
margin-bottom: 24.56rpx;
}
.avatar_img {
width: 210.53rpx;
height: 210.53rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dptx.png');
background-repeat: no-repeat;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
.icon-tupian1 {
font-size: 52.63rpx;
color: #666666;
}
}
}
.other-img {
display: flex;
width: 100%;
flex-wrap: wrap;
.other-item {
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
.zizhi_box {
.text {
font-size: 31.58rpx;
margin-bottom: 24.56rpx;
}
.zizhi_img {
width: 382.46rpx;
height: 210.53rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dpzz.png');
background-repeat: no-repeat;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
.icon-tupian1 {
font-size: 52.63rpx;
color: #666666;
}
}
}
}
.ask_title {
margin: 36.84rpx 0 24.56rpx 0;
}
.shoot_ask {
margin-bottom: 49.12rpx;
.shoot_item {
.shoot_img {
width: 157.89rpx;
height: 105.26rpx;
}
.shoot_msg {
justify-content: center;
text-align: center;
}
}
}
.street_bg {
color: #666666;
.text {
font-size: 31.58rpx;
margin-bottom: 24.56rpx;
}
.street_img {
padding: 0 31.58rpx;
width: 100%;
height: 184.21rpx;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dpbjt.png');
background-repeat: no-repeat;
background-size: cover;
font-size: 28.07rpx;
.icon-tupian1 {
font-size: 52.63rpx;
margin-right: 47.37rpx;
}
}
}
.sub_title {
font-size: 31.58rpx;
flex-shrink: 0;
}
.item_cell {
padding: 31.58rpx 0;
border-bottom: 1px solid #F7F7F7;
.com_input {
flex: 1;
}
.ziti {
margin-right: 21.05rpx;
}
.get_site {
color: #20A162;
}
}
.remark {
margin-top: 24.56rpx;
font-size: 24.56rpx;
color: #CCCCCC;
}
.remarks {
margin-left: 20px;
font-size: 24.56rpx;
color: #CCCCCC;
}
.long_lat {
margin: 31.58rpx 0;
width: 100%;
height: 92.98rpx;
border-radius: 14.04rpx;
padding: 0 21.05rpx;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f7f7f7;
.get_site {
color: #20A162;
}
}
.week_box {
margin-top: 31.58rpx;
display: flex;
flex-wrap: wrap;
.week_item {
margin-right: 17.54rpx;
margin-bottom: 17.54rpx;
&:nth-child(4n) {
margin-right: 0;
}
.date_week {
text-align: center;
line-height: 56.14rpx;
width: 149.12rpx;
height: 56.14rpx;
background-color: #F2F2F2;
}
.date_week_a {
color: #20A162;
background-color: rgba(102, 206, 105, 0.5);
}
}
}
.bus_time {
margin-top: 24.56rpx;
justify-content: space-between;
.select {
color: #999999;
text-align: center;
line-height: 84.21rpx;
width: 284.21rpx;
height: 84.21rpx;
background: #F6F6F6;
border-radius: 4px;
}
}
.submit_btn {
margin-left: 50%;
transform: translate(-50%);
line-height: 84.21rpx;
border-radius: 100px;
background-color: #20A162;
color: #fff;
height: 84.21rpx;
width: 680.7rpx;
margin-top: 84.21rpx;
margin-bottom: 175.44rpx;
}
</style>