nk-shop2.0/pages/product/basicSet.vue

775 lines
20 KiB
Vue
Raw Normal View History

2023-05-10 16:07:28 +08:00
<template>
2023-08-28 14:02:12 +08:00
<view class="basic_set">
<view class="basice_item">
<view class="headline">
<view class="text flex_a_c">
<u--image :showLoading="true" src="../../static/images/SHSZ/JBPZ.png" width="50.82rpx"
height="50.82rpx"></u--image>
店铺基本配置
</view>
</view>
<view class="store_bg">
<view class="text flex_a_c">上传店铺背景图</view>
<block v-if="images[0].img">
<u--image :showLoading="true" :src="images[0].img" width="100%" height="210.53rpx" radius="4px"
@click="delImg(0)" mode="aspectFill"></u--image>
</block>
<view v-else class="upload" @click="seleckImage(0)">
<u--image :showLoading="true" src="../../static/images/SHSZ/SCBJ.png" width="87.62rpx"
height="87.62rpx"></u--image>
建议尺寸710*220PX
</view>
</view>
<view class="store_avatar flex_a_c_j_sb">
<view class="avatar_box">
<view class="text flex_a_c">上传店铺头像</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="aspectFill"></u--image>
</block>
<view v-else class="avatar_img" @click="seleckImage(1)">
<u--image :showLoading="true" src="../../static/images/SHSZ/SCBJ.png" width="87.62rpx"
height="87.62rpx"></u--image>
</view>
</view>
<view class="zizhi_box">
<view class="text">店铺资质</view>
<block v-if="images[3].img">
<u--image :showLoading="true" :src="images[3].img" width="382.46rpx" height="210.53rpx"
radius="4px" @click="delImg(3)"></u--image>
</block>
<view v-else class="zizhi_img" @click="seleckImage(3)">
<u--image :showLoading="true" src="../../static/images/SHSZ/SCBJ.png" width="87.62rpx"
height="87.62rpx"></u--image>
</view>
</view>
</view>
<view class="ask_title">拍摄要求</view>
<view class="ask_tit">
<u--image :showLoading="true" src="../../static/images/SHSZ/SLDP.png" width="147.2rpx"
height="105.14rpx"></u--image>
<u--image :showLoading="true" src="../../static/images/SHSZ/YYZZ.png" width="147.2rpx"
height="105.14rpx"></u--image>
<view class="">
<view style="font-weight: bold;">
正确示范
</view>
<view>
请上传真实有效的图片信息
</view>
</view>
</view>
<view class="shoot_ask flex_a_c_j_sb">
<block v-for="(item,i) in shootAsk" :key="i">
<view class="shoot_item">
<u--image :showLoading="true" class="shoot_img" :src="item.url" width="94.02rpx"
height="87.62rpx"></u--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">
<view class="text flex_a_c"> 店铺街背景图</view>
<block v-if="images[2].img">
<u--image :showLoading="true" :src="images[2].img" width="100%" height="210.53rpx" radius="4px"
@click="delImg(2)"></u--image>
</block>
<view v-else class="street_img flex_a_c" @click="seleckImage(2)">
<u--image :showLoading="true" src="../../static/images/SHSZ/SCBJ.png" width="87.62rpx"
height="87.62rpx"></u--image>
<view style="margin-left: 20rpx;">建议尺寸:710*134px或710*460px(请根据平台要求选择尺寸此图如未上传默认展示店铺背景图)</view>
</view>
</view>
</view>
<view class="basice_item">
<view class="headline" style="display: flex;align-items: center;">
<u--image :showLoading="true" src="../../static/images/SHSZ/FHPZ.png" width="37.54rpx"
height="28.57rpx"></u--image>
<view class="text flex_a_c" style="margin-left: 10rpx;">发货基本配置</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" color="#FFCC33" :value="check.ziti" /><text
class="text ziti">到店自提</text>
<checkbox :checked="isKuaidi" :value="check.kuaidi" /><text class="text">快递配送</text>
</checkbox-group> -->
<u-checkbox-group @change="checkboxChange">
<u-checkbox :checked="isZiti" :value="check.ziti" shape="circle" /><text
class="text ziti">到店自提</text>
<u-checkbox :checked="isKuaidi" :value="check.kuaidi" shape="circle" /><text
class="text ziti">快递配送</text>
</u-checkbox-group>
</view>
</view>
<view class="remark">
*只选择一种配送方式时,会自动修改店铺所有商品配送方式
</view>
</view>
<block>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c">详细地址</view>
<input class="com_input" type="text" v-model="mer_address" placeholder="输入商户地址">
</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">
<u--image :showLoading="true" src="../../static/images/SHSZ/DW.png" width="50.82rpx"
height="50.82rpx"></u--image>
<!-- <i class="iconfont icon-dizhi"></i> -->
</view>
</view>
<view class="sub_title flex_a_c">提货点营业日期:</view>
<view class="week_box">
<view class="week_item" v-for="(item,index) in dateWeek" :key="index" @click="sel(item,index)">
<view class="date_week" :class="item.isCheck ? 'date_week_a' : ''">
{{ item.name }}
</view>
</view>
</view>
<view class="sub_title flex_a_c">提货点营业时间:</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">
<u--image :showLoading="true" src="../../static/images/SHSZ/DPPZ.png" width="37.54rpx"
height="28.57rpx"></u--image>
<view class="text flex_a_c">店铺基本配置</view>
</view>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c"></i>商户简介</view>
<input class="com_input" type="text" v-model="intro" placeholder="输入商户简介">
</view>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c"></i>客服电话</view>
<input class="com_input" type="number" v-model="servicePhone" placeholder="输入客服电话">
</view>
<view class="item_cell flex_a_c">
<view class="sub_title flex_a_c">开启先货后款</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">先货后款结算周期:</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">先货后款结算利率</view>
<input type="number" maxlength="5" v-model="interest_rate" placeholder="请输入 /利率单位为: %">
</view>
<view class="remarks">*利率结算范围为:0.01 ~ 0.1 利率单位为:%</view>
<!-- <view class="item_cell">
2023-05-10 16:07:28 +08:00
<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> -->
2023-08-28 14:02:12 +08:00
</view>
2023-05-10 16:07:28 +08:00
2023-08-28 14:02:12 +08:00
<button class="submit_btn l_center" @click="postMerchantUpdata">提交审核</button>
2023-05-10 16:07:28 +08:00
2023-08-28 14:02:12 +08:00
<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>
2023-05-10 16:07:28 +08:00
2023-08-28 14:02:12 +08:00
</view>
2023-05-10 16:07:28 +08:00
</template>
<script>
2023-08-28 14:02:12 +08:00
import {
Toast
} from '@/libs/uniApi.js'
import {
merchantUpdateAPI,
merchantInfoAPI
} from "@/api/product"
import {
uploads
} from '@/api/upload.js'
export default {
data() {
return {
shootAsk: [{
url: '../../static/images/SHSZ/BZ1.png',
text: '标准拍摄'
},
{
url: '../../static/images/SHSZ/BKQS.png',
text: '边框缺失'
},
{
url: '../../static/images/SHSZ/ZPMH.png',
text: '照片模糊'
},
{
url: '../../static/images/SHSZ/SGQL.png',
text: '闪光强烈'
}
],
images: [{
img: ''
}, {
img: ''
}, {
img: ''
}, {
img: ''
}],
storeBg: '',
check: {
ziti: '1',
kuaidi: '2'
},
isZiti: false,
isKuaidi: false,
delivery_way: [],
takeName: '',
takePhone: '',
servicePhone: '',
cruxText: '',
intro: '',
detailSite: '',
longitude: '', // 经度
latitude: '', // 纬度
longLati: '', // 经纬度
merState: true, // 是否开启商户
dateWeek: [{
name: '星期一',
id: 1,
isCheck: false
}, {
name: '星期二',
id: 2,
isCheck: false
}, {
name: '星期三',
id: 3,
isCheck: false
}, {
name: '星期四',
id: 4,
isCheck: false
}, {
name: '星期五',
id: 5,
isCheck: false
}, {
name: '星期六',
id: 6,
isCheck: false
}, {
name: '星期日',
id: 7,
isCheck: false
}],
selarr: [],
mer_take_time: [],
beginTimeShow: false,
overTimeShow: false,
mer_address: '',
id: '',
mer_certificate: '',
credit_buy: false, //开启信用购
interest_rate: '', //利率
settle_cycle: '', //周期
}
},
onLoad(e) {
this.id = e.mer_id
this.getMerchantInfo(e.mer_id)
},
onShow() {},
methods: {
getMerchantInfo(id) {
merchantInfoAPI({
id
}).then(res => {
console.log(res);
this.images[0].img = res.data.mer_banner
this.images[1].img = res.data.mer_avatar
this.images[2].img = res.data.mini_banner
this.images[3].img = res.data.mer_certificate
this.delivery_way = res.data.delivery_way.split(',')
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.longLati = res.data.mer_take_location.join(',') ?? ''
res.data.mer_take_day.forEach((item, i) => {
this.dateWeek[Number(item) - 1].isCheck = true
})
this.mer_take_time = res.data.mer_take_time
this.intro = res.data.mer_info
this.cruxText = res.data.mer_keyword
this.servicePhone = res.data.service_phone
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
}
// console.log('res', res.data);
}).catch(err => {
// console.log('err', err);
})
},
checkboxChange(val) {
this.delivery_way = val.detail.value
},
//开启信用购
change(e) {
this.credit_buy = e
console.log(e);
},
// 上传店铺背景
sel(item, i) {
if (item.isCheck == false) {
item.isCheck = true;
this.selarr.push(String(item.id));
} else {
item.isCheck = false;
this.selarr.splice(this.selarr.indexOf(i + 1), 1);
}
},
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: this.selarr, // 提货点营业日期
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
}
merchantUpdateAPI(data).then(res => {
Toast(res.message)
setTimeout(() => {
uni.switchTab({
url: '/pages/gather/gather',
fail: (err) => {
// console.log('err', err);
}
});
}, 2000)
}).catch(err => {
Toast(err)
})
},
selfLocation() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
console.log(res);
this.latitude = res.latitude.toString();
this.longitude = res.longitude.toString();
this.longLati = `${res.latitude},${res.longitude}`
},
fail: (err) => {
Toast(err)
}
});
},
seleckImage(i) {
let that = this
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
console.log(res);
uni.showLoading({
title: '上传中...'
})
uploads(res.tempFilePaths[0], 'img').then(res => {
that.images[i].img = res
uni.hideLoading()
}).catch(err => {
Toast('添加失败')
uni.hideLoading()
})
},
fail: function(err) {
Toast('添加失败')
}
});
},
delImg(i) {
let that = this
uni.showModal({
title: '删除图片',
content: '确定删除图片?',
success: res => {
if (res.confirm) {
that.images[i].img = ''
}
}
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
}
2023-05-10 16:07:28 +08:00
</script>
2023-08-28 14:02:12 +08:00
<style lang="scss" scoped>
/* 页面样式 */
input {
font-size: 28rpx;
}
.basic_set {
background-color: white;
padding: 30rpx;
}
.basice_item {
box-sizing: border-box;
background-color: #F4F7FE;
padding: 38.6rpx 35.09rpx;
margin-bottom: 35.09rpx;
border-radius: 20rpx;
}
.headline {
margin-bottom: 42.11rpx;
display: flex;
align-items: center;
.text {
font-size: 35.09rpx;
font-weight: bold;
}
}
.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;
background-color: white;
text-align: center;
font-size: 28.07rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: 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;
background-color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon-tupian1 {
font-size: 52.63rpx;
color: #666666;
}
}
}
.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;
background-color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon-tupian1 {
font-size: 52.63rpx;
color: #666666;
}
}
}
}
.ask_title {
margin: 36.84rpx 0 24.56rpx 0;
}
.ask_tit {
display: flex;
justify-content: space-around;
}
.shoot_ask {
margin-bottom: 49.12rpx;
.shoot_item {
width: 150.7rpx;
height: 101.64rpx;
background-color: #DEE9FE;
position: relative;
.shoot_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-bottom: 15rpx;
}
.shoot_msg {
margin-top: 100rpx;
justify-content: center;
text-align: center;
// position: absolute;
}
}
}
.street_bg {
color: #666666;
.text {
font-size: 31.58rpx;
margin-bottom: 24.56rpx;
}
.street_img {
padding: 0 20rpx;
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;
background-color: white;
font-size: 28.07rpx;
}
}
.sub_title {
// font-size: 31.58rpx;
}
.item_cell {
padding: 31.58rpx 0;
border-bottom: 1px solid #F7F7F7;
border-bottom: 1px solid #B3CBFC;
.ziti {
margin-right: 21.05rpx;
}
}
.remark {
margin-top: 24.56rpx;
font-size: 24.56rpx;
color: #CCCCCC;
}
.remarks {
margin-left: 20px;
font-size: 24.56rpx;
color: #CCCCCC;
margin-top: 10rpx;
}
.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;
justify-content: space-between;
.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;
border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
background-color: #F2F2F2;
}
.date_week_a {
color: #3274F9;
background-color: #B3CBFC;
border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
}
}
}
.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: #E7EFFE;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
}
}
.submit_btn {
margin-left: 50%;
transform: translate(-50%);
line-height: 84.21rpx;
border-radius: 100px;
background-color: #3274F9;
color: #fff;
height: 84.21rpx;
width: 680.7rpx;
margin-top: 84.21rpx;
margin-bottom: 175.44rpx;
}
2023-05-10 16:07:28 +08:00
</style>