mkm/OfficeApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增开设店铺组件

Browse Source
This commit is contained in:
weipengfei 2023-07-29 15:41:50 +08:00
parent 53f9569558
commit bc6ef96146
1 changed files with 210 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
components/newArchives/store.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<view class="">
<view class="title">开设店铺</view>
<block v-for="(item, index) in formData">
<u--form labelPosition="left" :model="item" :rules="rules" ref="breedingForm">
<u-form-item labelWidth="auto" label="有无门面" required prop="shop_front" borderBottom>
<u-radio-group v-model="item.shop_front" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="门面面积" required prop="cultivated_area" borderBottom>
<u--input v-model="item.cultivated_area" placeholder="请输入门面面积"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="经营地点" required prop="cultivated_area" borderBottom>
<u--input v-model="item.cultivated_area" placeholder="请输入经营地点"></u--input>
</u-form-item>
<picker :range="storeTypeList" mode="selector" @change="changeLanPlan" :data-index="index">
<u-form-item labelWidth="auto" label="经营类型" required prop="planning" borderBottom>
<u--input :value="storeTypeList[item.planning]" placeholder="请选择经营类型" disabled disabledColor="#fff"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</picker>
<u-form-item labelWidth="auto" label="门面环境" required prop="notes" borderBottom>
<u--input v-model="item.cultivated_area" placeholder="请输入门面环境"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="服务对象" required prop="notes" borderBottom>
<u--input v-model="item.cultivated_area" placeholder="请输入服务对象"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="有无营业资质" required prop="planting_company" borderBottom>
<u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="有无进货渠道" required prop="planting_company" borderBottom>
<u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="店铺规模" required prop="notes" borderBottom>
<u--input v-model="item.breeding_type" placeholder="请输入店铺规模"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="商品来源" required prop="notes" borderBottom>
<u--input v-model="item.breeding_type" placeholder="请输入商品来源"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="服务对象" required prop="notes" borderBottom>
<u--input v-model="item.breeding_type" placeholder="请输入服务对象"></u--input>
</u-form-item>
<u-form-item labelWidth="auto" label="有无线上展示" required prop="planting_company" borderBottom>
<u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="有无品牌" required prop="planting_company" borderBottom>
<u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" label="库存情况" required prop="planting_company" borderBottom>
<u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
<u-radio :customStyle="{marginRight: '16px'}"
v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
:name="item.value">
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item labelWidth="auto" labelPosition="top" label="经营诉求" required prop="farm_tools" borderBottom>
<u--textarea v-model="item.farm_tools" autoHeight placeholder="请输入经营诉求" border="surround"
count></u--textarea>
</u-form-item>
<button type="primary" v-if="formData.length>1" class="delete"
@click="removeBreedingList(index)">删除以上开设店铺信息</button>
</u--form>
</block>
<button type="primary" class="plus" @click="pushBreedingList">+</button>
</view>
</template>
<script>
export default {
data() {
return {
storeTypeList: ['超市','生鲜','饭店','五金','杂货','服装','文具','其他'],
formData: [
{
shop_front:'',//有无门面
}
],
rules: {
}
}
},
created() {
this.initRules()
},
methods: {
// 初始化校验
initRules(){
let arr = Object.keys(this.formData[0]);
arr.forEach(key=>{
this.rules[key] = {
validator: (rule, value, callback )=>{
if(Array.isArray(this.$refs.breedingForm)) for(let i = 0;i<this.$refs.breedingForm.length;i++){
this.$refs.breedingForm[i].clearValidate(rule.field);
}
value.trim()!==''?callback():callback('不能为空');
},
trigger: ['change', 'blur']
}
})
},
// 校验
async validate(){
let flag = true;
if(Array.isArray(this.$refs.breedingForm)) for(let i = 0;i<this.$refs.breedingForm.length;i++){
let res = await this.$refs.breedingForm[i].validate();
if(!res) {
flag = false;
break;
}
}
return flag;
},
// 选择土地规划
changeLanPlan(e) {
let index = e.currentTarget.dataset.index;
this.formData[index].planning = e.detail.value;
},
// 选择时间
changeDate(e){
let data = e.currentTarget.dataset;
this.formData[data.index][data.value] = e.detail.value;
},
// 新增开设店铺
pushBreedingList() {
this.formData.push({})
},
// 删除开设店铺
removeBreedingList(index) {
uni.showModal({
confirmColor: '#f56c6c',
content: '确定删除吗?',
success: (res) => {
if (res.confirm) {
this.formData.splice(index, 1);
}
}
})
},
},
}
</script>
<style lang="scss">
.title {
margin-top: 30rpx;
font-weight: 500;
font-size: 34rpx;
&::before {
width: 8rpx;
height: 26rpx;
border-radius: 4rpx;
background-color: #3175f9;
content: "";
display: inline-block;
margin-right: 8rpx;
}
}
.delete {
margin: 22rpx 0;
// margin-bottom: 40rpx;
width: 100%;
height: 54rpx;
line-height: 54rpx;
background: #f56c6c;
border-radius: 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
}
.plus {
margin: 22rpx 0;
// margin-bottom: 40rpx;
width: 100%;
height: 54rpx;
line-height: 54rpx;
background: $theme-oa-color;
border-radius: 14rpx;
color: #fff;
text-align: center;
}
</style>