|
|
@@ -1,110 +1,123 @@
|
|
|
<template>
|
|
|
<div class="adopt-list" :class="{ 'has-btn': isManySetting }">
|
|
|
<div class="select-wrap">
|
|
|
- <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
|
|
|
+ <el-select class="select-item" v-model="areaVal" :placeholder="t('adoptList.placeholders.allArea')" style="width: 116px">
|
|
|
<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
- <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
|
|
|
+ <el-select class="select-item" v-model="typeVal" :placeholder="t('adoptList.placeholders.allCategory')" style="width: 116px">
|
|
|
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
- <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
|
|
|
+ <el-select class="select-item" v-model="ageVal" :placeholder="t('adoptList.placeholders.treeAge')" style="width: 116px">
|
|
|
<el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="select-wrap select-b">
|
|
|
- <el-select class="select-item" v-model="allVal" placeholder="综合评分" style="width: 116px">
|
|
|
+ <el-select class="select-item" v-model="allVal" :placeholder="t('adoptList.placeholders.overallScore')" style="width: 116px">
|
|
|
<el-option v-for="item in allOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
- <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
|
|
|
+ <el-select class="select-item" v-model="ecologyVal" :placeholder="t('adoptList.placeholders.ecologyScore')" style="width: 116px">
|
|
|
<el-option v-for="item in ecologyOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
- <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
|
|
|
+ <el-select class="select-item" v-model="statusVal" :placeholder="t('adoptList.placeholders.allStatus')" style="width: 116px">
|
|
|
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
<div class="many-setting select-wrap" v-show="isManySetting">
|
|
|
- <el-select class="select-item many-select" v-model="settingType" placeholder="选中设置项" style="width: 96px">
|
|
|
+ <el-select class="select-item many-select" v-model="settingType" :placeholder="t('adoptList.placeholders.selectSetting')" style="width: 96px">
|
|
|
<template #label="{ label, value }">
|
|
|
- <span v-show="value!=='total'">设置</span>
|
|
|
+ <span v-show="value !== 'total'">{{ t('adoptList.setting') }}</span>
|
|
|
<span>{{ label }}</span>
|
|
|
</template>
|
|
|
<el-option v-for="(item, index) in settingTypeOptions" :key="index" :label="item.name" :value="item.value" />
|
|
|
</el-select>
|
|
|
<el-input-number
|
|
|
style="width: 174px"
|
|
|
- placeholder="请输入"
|
|
|
+ :placeholder="t('adoptList.placeholders.input')"
|
|
|
class="number-input"
|
|
|
:controls="false"
|
|
|
v-model="unifyPrice"
|
|
|
:min="0"
|
|
|
@change="setManyPrice"
|
|
|
/>
|
|
|
- <span class="unit">{{settingType === "price" ? "元/斤" : settingType === "age" ? "年" : "斤"}}</span>
|
|
|
+ <span class="unit">{{ settingUnit }}</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="list-wrap">
|
|
|
<div class="list-item" v-for="(item, index) in displayedAdoptList" :key="index">
|
|
|
<div class="list-info">
|
|
|
<div class="tree-icon">
|
|
|
- <div class="tree-tag" v-show="item.status === 0">{{ ROLE == 1 ? "未定价" : "可团购"}}</div>
|
|
|
- <div class="tree-tag wait" v-show="item.status === 1">{{ ROLE == 1 ? "待认养" : "可团购"}}</div>
|
|
|
- <div class="tree-tag done" v-show="item.status === 2">{{ ROLE == 1 ? "已认养" : "已认养"}}</div>
|
|
|
- <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
|
|
|
+ <div class="tree-tag" v-show="item.status === 0">
|
|
|
+ {{ ROLE == 1 ? t('adoptList.unpPriced') : t('home.legend.groupBuy') }}
|
|
|
+ </div>
|
|
|
+ <div class="tree-tag wait" v-show="item.status === 1">
|
|
|
+ {{ ROLE == 1 ? t('home.legend.pending') : t('home.legend.groupBuy') }}
|
|
|
+ </div>
|
|
|
+ <div class="tree-tag done" v-show="item.status === 2">{{ t('home.legend.adopted') }}</div>
|
|
|
<img class="tree-img" :src="require(`@/assets/images/foster-home/list/${index < 7 ? index : 0}.png`)" alt="" />
|
|
|
- <div class="tree-type-name-tag">白糖罂</div>
|
|
|
+ <div class="tree-type-name-tag">{{ t('gardenIntroduce.cropType') }}</div>
|
|
|
</div>
|
|
|
<div class="item-center">
|
|
|
<div class="center-t">
|
|
|
- {{item.bm ? item.bm : "BTY-A3"+index}}
|
|
|
- <span class="type-tag">综合:{{item.zh||94}}分</span>
|
|
|
- <span class="type-tag">生态:{{item.st||92}}分</span>
|
|
|
+ {{ item.bm ? item.bm : "BTY-A3" + index }}
|
|
|
+ <span class="type-tag">{{ t('adoptList.overall') }}{{ item.zh || 94 }}{{ t('adoptList.points') }}</span>
|
|
|
+ <span class="type-tag">{{ t('adoptList.ecology') }}{{ item.st || 92 }}{{ t('adoptList.points') }}</span>
|
|
|
</div>
|
|
|
- <!-- 批量设置单价 -->
|
|
|
- <div class="center-item" v-show="isManySetting && settingType !== 'price'">单价:<span class="unit">{{item.price||12}}元/斤</span></div>
|
|
|
-
|
|
|
- <!-- 批量设置树龄或单项设置 -->
|
|
|
+ <div class="center-item" v-show="isManySetting && settingType !== 'price'">
|
|
|
+ {{ t('adoptList.unitPrice') }}<span class="unit">{{ item.price || 12 }}{{ t('adoptList.units.yuanPerJin') }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'age') || item.settingPrice">
|
|
|
- <span class="edit-label">树龄:</span>
|
|
|
+ <span class="edit-label">{{ t('adoptList.treeAgeLabel') }}</span>
|
|
|
<el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.age" :min="0" />
|
|
|
- <span class="unit">年</span>
|
|
|
+ <span class="unit">{{ t('adoptList.units.year') }}</span>
|
|
|
</div>
|
|
|
- <!-- 不是编辑状态 -->
|
|
|
<div class="center-item p-t-2 age-line" v-show="!isManySetting && !item.settingPrice">
|
|
|
<div class="age-wrap">
|
|
|
<div class="has-age">
|
|
|
- <div class="age">树龄:<span class="unit">5年</span></div>
|
|
|
+ <div class="age">
|
|
|
+ {{ t('adoptList.treeAgeLabel') }}<span class="unit">{{ t('adoptList.defaultAge') }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="sort-line"></div>
|
|
|
</div>
|
|
|
- 单价:<span class="unit">{{item.status === 0 ? "--" : item.price||12}}元/斤</span>
|
|
|
+ {{ t('adoptList.unitPrice') }}<span class="unit">{{ item.status === 0 ? "--" : item.price || 12 }}{{ t('adoptList.units.yuanPerJin') }}</span>
|
|
|
</div>
|
|
|
<div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
|
|
|
- <span class="edit-label">单价:</span>
|
|
|
+ <span class="edit-label">{{ t('adoptList.unitPrice') }}</span>
|
|
|
<el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
|
|
|
- <span class="unit">元/斤</span>
|
|
|
+ <span class="unit">{{ t('adoptList.units.yuanPerJin') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="center-item" v-show="isManySetting && settingType !== 'age'">
|
|
|
+ {{ t('adoptList.treeAgeLabel') }}<span class="unit">{{ item.age || 5 }}{{ t('adoptList.units.year') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="center-item" v-show="!item.settingPrice && !isManySetting && ROLE == 1">
|
|
|
+ {{ t('adoptList.totalAdopt') }}<span class="unit">{{ item.total || 212 }}{{ t('adoptList.units.jin') }}</span>
|
|
|
</div>
|
|
|
- <div class="center-item" v-show="isManySetting && settingType !== 'age'">树龄:<span class="unit">{{item.age||5}}年</span></div>
|
|
|
- <div class="center-item" v-show="!item.settingPrice && !isManySetting && ROLE == 1">总认养斤数:<span class="unit">{{item.total||212}}斤</span></div>
|
|
|
- <div class="center-item" v-show="(isManySetting && settingType !== 'total' && ROLE == 1)">总认养斤数:<span class="unit">{{item.total||212}}斤</span></div>
|
|
|
-
|
|
|
+ <div class="center-item" v-show="isManySetting && settingType !== 'total' && ROLE == 1">
|
|
|
+ {{ t('adoptList.totalAdopt') }}<span class="unit">{{ item.total || 212 }}{{ t('adoptList.units.jin') }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
|
|
|
- <span class="edit-label">总认养斤数:</span>
|
|
|
+ <span class="edit-label">{{ t('adoptList.totalAdopt') }}</span>
|
|
|
<el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.total" :min="0" />
|
|
|
- <span class="unit">斤</span>
|
|
|
+ <span class="unit">{{ t('adoptList.units.jin') }}</span>
|
|
|
</div>
|
|
|
- <!-- 团长角色 -->
|
|
|
- <div class="center-item p-t-2 progress-wrap" v-show="ROLE==2 && item.status !== 2">
|
|
|
- 剩余可购:
|
|
|
- <el-progress :percentage="60" color="#FFD887"><span class="progress-text"><span class="over">150</span>/215斤</span></el-progress>
|
|
|
+ <div class="center-item p-t-2 progress-wrap" v-show="ROLE == 2 && item.status !== 2">
|
|
|
+ {{ t('adoptList.remaining') }}
|
|
|
+ <el-progress :percentage="60" color="#FFD887">
|
|
|
+ <span class="progress-text">
|
|
|
+ <span class="over">150</span>/215{{ t('adoptList.units.jin') }}
|
|
|
+ </span>
|
|
|
+ </el-progress>
|
|
|
</div>
|
|
|
- <div class="center-item p-t-2 progress-wrap" v-show="ROLE==2 && item.status === 2">
|
|
|
- 权属人:
|
|
|
+ <div class="center-item p-t-2 progress-wrap" v-show="ROLE == 2 && item.status === 2">
|
|
|
+ {{ t('adoptList.owner') }}
|
|
|
<span class="unit">
|
|
|
<div class="user-item">
|
|
|
<div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
|
|
|
- {{ owner.userName }}({{ owner.value }}斤)
|
|
|
- <span v-show="oI<owners.length-1">/</span>
|
|
|
+ {{ formatOwner(owner) }}
|
|
|
+ <span v-show="oI < owners.length - 1">/</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</span>
|
|
|
@@ -115,67 +128,88 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-show="item.settingPrice" class="btn-group edit-one">
|
|
|
- <!-- 渐变主色按钮 -->
|
|
|
- <div class="btn cancel-btn" @click="toSettingSinglePrice(index, false)">取消</div>
|
|
|
- <div class="btn edit-btn" @click="toSettingSinglePrice(index, false)">确认修改</div>
|
|
|
+ <div class="btn cancel-btn" @click="toSettingSinglePrice(index, false)">{{ t('home.cancel') }}</div>
|
|
|
+ <div class="btn edit-btn" @click="toSettingSinglePrice(index, false)">{{ t('adoptList.confirmEdit') }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 渐变主色按钮 -->
|
|
|
- <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">批量定价</div>
|
|
|
- <!-- 渐变主色按钮 -->
|
|
|
+ <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">{{ t('adoptList.batchPricing') }}</div>
|
|
|
<div class="btn-group list-btn" v-show="isManySetting">
|
|
|
- <div class="btn cancel-btn" @click="saveManySetting(0)">取消</div>
|
|
|
- <div class="btn edit-btn" @click="saveManySetting(1)">保存</div>
|
|
|
+ <div class="btn cancel-btn" @click="saveManySetting(0)">{{ t('home.cancel') }}</div>
|
|
|
+ <div class="btn edit-btn" @click="saveManySetting(1)">{{ t('gardenIntroduce.save') }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from "vue";
|
|
|
+import { computed, onMounted, ref } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
-let store = useStore();
|
|
|
+import { useI18n } from "@/i18n";
|
|
|
|
|
|
+const { t } = useI18n();
|
|
|
+const store = useStore();
|
|
|
const ROLE = store.state.home.userRole;
|
|
|
|
|
|
+const ageRangeOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.ageRange1"), value: 1 },
|
|
|
+ { label: t("adoptList.filters.ageRange2"), value: 2 },
|
|
|
+]);
|
|
|
+
|
|
|
const areaVal = ref(0);
|
|
|
-const areaOptions = ref([
|
|
|
- { label: "全区", value: 0 },
|
|
|
- { label: "1区", value: 1 },
|
|
|
- { label: "2区", value: 2 },
|
|
|
+const areaOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.allArea"), value: 0 },
|
|
|
+ { label: t("adoptList.filters.zone1"), value: 1 },
|
|
|
+ { label: t("adoptList.filters.zone2"), value: 2 },
|
|
|
]);
|
|
|
+
|
|
|
const typeVal = ref(0);
|
|
|
-const typeOptions = ref([
|
|
|
- { label: "全部品类", value: 0 },
|
|
|
- { label: "白糖罂", value: 1 },
|
|
|
- { label: "井岗红糯", value: 2 },
|
|
|
+const typeOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.allCategory"), value: 0 },
|
|
|
+ { label: t("gardenIntroduce.cropType"), value: 1 },
|
|
|
+ { label: t("adoptList.filters.jinggang"), value: 2 },
|
|
|
]);
|
|
|
+
|
|
|
const ageVal = ref(0);
|
|
|
-const ageOptions = ref([
|
|
|
- { label: "全部树龄", value: 0 },
|
|
|
- { label: "0-10年", value: 1 },
|
|
|
- { label: "10-20年", value: 2 },
|
|
|
+const ageOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.allAge"), value: 0 },
|
|
|
+ ...ageRangeOptions.value,
|
|
|
]);
|
|
|
+
|
|
|
const allVal = ref(0);
|
|
|
-const allOptions = ref([
|
|
|
- { label: "全部评分", value: 0 },
|
|
|
- { label: "0-10年", value: 1 },
|
|
|
- { label: "10-20年", value: 2 },
|
|
|
+const allOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.allScore"), value: 0 },
|
|
|
+ ...ageRangeOptions.value,
|
|
|
]);
|
|
|
+
|
|
|
const ecologyVal = ref(0);
|
|
|
-const ecologyOptions = ref([
|
|
|
- { label: "生态评分", value: 0 },
|
|
|
- { label: "0-10年", value: 1 },
|
|
|
- { label: "10-20年", value: 2 },
|
|
|
+const ecologyOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.ecologyScore"), value: 0 },
|
|
|
+ ...ageRangeOptions.value,
|
|
|
]);
|
|
|
+
|
|
|
const statusVal = ref(0);
|
|
|
-const statusOptions = ref([
|
|
|
- { label: "全部状态", value: 0 },
|
|
|
- { label: "0-10年", value: 1 },
|
|
|
- { label: "10-20年", value: 2 },
|
|
|
+const statusOptions = computed(() => [
|
|
|
+ { label: t("adoptList.filters.allStatus"), value: 0 },
|
|
|
+ ...ageRangeOptions.value,
|
|
|
]);
|
|
|
|
|
|
+const settingUnit = computed(() => {
|
|
|
+ if (settingType.value === "price") return t("adoptList.units.yuanPerJin");
|
|
|
+ if (settingType.value === "age") return t("adoptList.units.year");
|
|
|
+ return t("adoptList.units.jin");
|
|
|
+});
|
|
|
+
|
|
|
+const settingTypeOptions = computed(() => [
|
|
|
+ { name: t("adoptList.settingType.price"), value: "price" },
|
|
|
+ { name: t("adoptList.settingType.age"), value: "age" },
|
|
|
+ { name: t("adoptList.settingType.total"), value: "total" },
|
|
|
+]);
|
|
|
+
|
|
|
+function formatOwner(owner) {
|
|
|
+ return t("adoptList.ownerJin", { name: owner.userName, value: owner.value });
|
|
|
+}
|
|
|
+
|
|
|
const adoptList = ref([
|
|
|
{ status: 0, price: 10, bm: "BTY-A21", pz: "白糖罂", zh: 94, st: 92, sl: 5, total: 215 },
|
|
|
{ status: 0, price: 12, bm: "BTY-A22", pz: "白糖罂", zh: 92, st: 94, sl: 6, total: 201 },
|
|
|
@@ -188,45 +222,42 @@ const adoptList = ref([
|
|
|
{ status: 2, price: 16 },
|
|
|
]);
|
|
|
|
|
|
-const owners = ref([{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}])
|
|
|
+const owners = ref([
|
|
|
+ { userName: "王丽丽", value: 50 },
|
|
|
+ { userName: "张山", value: 30 },
|
|
|
+]);
|
|
|
|
|
|
-const displayedAdoptList = ref([...adoptList.value]); // 初始时显示完整列表
|
|
|
+const displayedAdoptList = ref([...adoptList.value]);
|
|
|
|
|
|
onMounted(() => {});
|
|
|
|
|
|
-// 批量定价
|
|
|
const unifyPrice = ref(null);
|
|
|
const isManySetting = ref(false);
|
|
|
-const settingTypeOptions = [
|
|
|
- {name: "单价", value: "price"},
|
|
|
- {name: "树龄", value: "age"},
|
|
|
- {name: "认养斤数", value: "total"},
|
|
|
-]
|
|
|
-const settingType = ref("price")
|
|
|
+const settingType = ref("price");
|
|
|
+
|
|
|
function manySetPrice() {
|
|
|
isManySetting.value = true;
|
|
|
displayedAdoptList.value = adoptList.value.filter((item) => item.status === 0);
|
|
|
}
|
|
|
+
|
|
|
function saveManySetting(isToSave) {
|
|
|
isManySetting.value = false;
|
|
|
- displayedAdoptList.value = [...adoptList.value]; // 显示完整列表
|
|
|
+ displayedAdoptList.value = [...adoptList.value];
|
|
|
if (isToSave) {
|
|
|
// 保存
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function setManyPrice(v) {
|
|
|
- displayedAdoptList.value.map(item => item.price = v)
|
|
|
+ displayedAdoptList.value.map((item) => (item.price = v));
|
|
|
}
|
|
|
|
|
|
-// 设置单棵树单价
|
|
|
-
|
|
|
function toSettingSinglePrice(i, val) {
|
|
|
- console.log('tototot');
|
|
|
- displayedAdoptList.value[i].settingPrice = val
|
|
|
+ displayedAdoptList.value[i].settingPrice = val;
|
|
|
}
|
|
|
+
|
|
|
function settingSinglePrice() {
|
|
|
- console.log('sss');
|
|
|
+ // 单项设置保存
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -294,7 +325,7 @@ function settingSinglePrice() {
|
|
|
padding: 5px;
|
|
|
&.cancel-btn {
|
|
|
border-color: #363636;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -346,10 +377,10 @@ function settingSinglePrice() {
|
|
|
}
|
|
|
.center-item {
|
|
|
color: #6c6c6c;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 11px;
|
|
|
padding-top: 2px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.progress-wrap {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -361,7 +392,7 @@ function settingSinglePrice() {
|
|
|
font-size: 12px;
|
|
|
color: #999999;
|
|
|
.over {
|
|
|
- color: #FFD489;
|
|
|
+ color: #ffd489;
|
|
|
}
|
|
|
}
|
|
|
::v-deep {
|
|
|
@@ -381,7 +412,7 @@ function settingSinglePrice() {
|
|
|
margin: 0 10px;
|
|
|
height: 10px;
|
|
|
width: 1px;
|
|
|
- background: #6C6C6C;
|
|
|
+ background: #6c6c6c;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -395,10 +426,6 @@ function settingSinglePrice() {
|
|
|
padding-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
- .small-btn-group {
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
.list-item + .list-item {
|