index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <div class="showGoodsIdx">
  3. <s-header :name="$t('device.diyFlower')" :noback="false"></s-header>
  4. <div class="headerCon kBordBott o-plr-10 o-ptb-16 l-flex-RC">
  5. <div class="line o-mr-6"></div>
  6. <div>
  7. <span class="c-color c-text-14">{{ $t('device.showGoodsPage.equipmentName') }}:</span>
  8. <span class="c-text-color c-text-14">{{ equipmentName }}</span>
  9. </div>
  10. </div>
  11. </div>
  12. <van-cell center :title="checked ? $t('DIYFlower.openStatus') : $t('DIYFlower.closeStatus')" size="large"
  13. title-style="color: #404d74;">
  14. <template #right-icon>
  15. <van-switch :model-value="checked" @update:model-value="updateStatus" size="24" />
  16. </template>
  17. </van-cell>
  18. <van-collapse v-if="checked" v-model="activeNames">
  19. <van-collapse-item :title="$t('DIYFlower.shape')" name="1" size="large" title-style="color: #404d74;">
  20. <van-row class="goods">
  21. <van-col v-for="(item, index) in shapeData" :key="index" class="goodsCon o-mlr-5 o-mb-20" span="11">
  22. <div class="l-flex-RC">
  23. <van-image width="50" height="50" fit="contain" :src="showSugerPhoto(item)" />
  24. <span class="o-ml-10" style="color: #000;word-wrap: break-word; width: 50px;">{{ item.name }}</span>
  25. <van-checkbox class="o-ml-10" shape="square" v-model="shapeStates[index]" @change="shapeChange(index)" />
  26. </div>
  27. </van-col>
  28. </van-row>
  29. </van-collapse-item>
  30. <van-collapse-item :title="$t('DIYFlower.sugar')" name="2" size="large" title-style="color: #404d74;">
  31. <van-row class="goods">
  32. <van-col v-for="(item, index) in sugarData" :key="index" class="goodsCon o-mlr-5 o-mb-20" span="11">
  33. <div class="l-flex-RC">
  34. <van-image width="50" height="50" fit="contain" :src="showSugerPhoto(item)" />
  35. <span class="o-ml-10" style="color: #000;word-wrap: break-word; width: 50px;">{{ item.name }}</span>
  36. <van-checkbox class="o-ml-10" shape="square" v-model="sugarStates[index]" @change="sugarChange(index)" />
  37. </div>
  38. </van-col>
  39. </van-row>
  40. </van-collapse-item>
  41. </van-collapse>
  42. <div class="l-flex-center" v-if="checked" style="margin: 16px">
  43. <van-button round block class="Btn" type="primary" native-type="submit" @click="updateShowGoods()">
  44. {{ $t('device.submitAndPushDeviceUpdates') }}
  45. </van-button>
  46. </div>
  47. </template>
  48. <script>
  49. // 导入接口
  50. import { selectDIYFlowers, updateDIYFlowerStatus, updateDIYProductShow } from '@/service/device/index';
  51. import sHeader from "@/components/SimpleHeader";
  52. import { ref, reactive } from "@vue/reactivity";
  53. import { onMounted } from '@vue/runtime-core';
  54. import { useRoute, useRouter } from 'vue-router';
  55. import { Dialog, Toast } from 'vant';
  56. import { useI18n } from "vue-i18n";
  57. import { styleUrl } from '../../../common/js/utils';
  58. export default {
  59. components: {
  60. sHeader
  61. },
  62. setup() {
  63. // 引入语言
  64. const { t } = useI18n();
  65. // 路由
  66. const route = useRoute();
  67. const router = useRouter();
  68. // 商品数据
  69. const shapeData = ref([]);
  70. const sugarData = ref([]);
  71. const switchStates = ref([]);
  72. const shapeStates = ref([]);
  73. const sugarStates = ref([]);
  74. // 设备名称
  75. const equipmentName = ref('');
  76. const checked = ref(false);
  77. // 刚进页面
  78. onMounted(() => {
  79. // 加载样式
  80. styleUrl('showGoods');
  81. const id = route.query.deviceId || "";
  82. const name = route.query.name || "";
  83. const diyFlowerStatus = route.query.diyFlowerStatus || "";
  84. if (diyFlowerStatus == "1") {
  85. checked.value = true;
  86. cofficentForm.equipmentId = id;
  87. getList();
  88. }
  89. if (id) {
  90. equipmentName.value = name;
  91. }
  92. });
  93. const showSugerPhoto = (row) => {
  94. let imgId = row.no;
  95. if (imgId) {
  96. return require(`../../../assets/device/diyFlowers/${imgId}.png`);
  97. }
  98. return imgId;
  99. };
  100. // 获取商品列表
  101. const getList = () => {
  102. const flower = route.query.flower || "";
  103. selectDIYFlowers({
  104. equipmentId: cofficentForm.equipmentId
  105. }).then(res => {
  106. console.log('res', res)
  107. const {
  108. data
  109. } = res.data;
  110. if (data) {
  111. if (data.length > 0) {
  112. // 是否修改状态
  113. data.forEach(item => {
  114. flowerNumber(item, flower);
  115. if (item.no.includes('T')) {
  116. sugarData.value.push(item);
  117. if (item.showType == null || item.showType == '0') {
  118. sugarStates.value.push(false);
  119. } else {
  120. sugarStates.value.push(true);
  121. }
  122. }
  123. })
  124. }
  125. }
  126. })
  127. }
  128. // 修改的价格
  129. const cofficentForm = reactive({
  130. equipmentId: '',
  131. });
  132. // 判断花型数目
  133. const flowerNumber = (item, number) => {
  134. var shape = null;
  135. if (number == '18') {
  136. shape = ['S01', 'S02', 'S03'];
  137. } else if (number == '22') {
  138. shape = ['S01', 'S02', 'S03', 'S04'];
  139. } else if (number == '26') {
  140. shape = ['S01', 'S02', 'S03', 'S04', 'S05'];
  141. } else if (number == '30') {
  142. shape = ['S01', 'S02', 'S03', 'S04', 'S05', 'S06'];
  143. } else {
  144. shape = ['S01', 'S02', 'S03', 'S04', 'S05', 'S06', 'S07', 'S08', 'S09'];
  145. }
  146. if (shape.includes(item.no)) {
  147. shapeData.value.push(item);
  148. if (item.showType == null || item.showType == '0') {
  149. shapeStates.value.push(false);
  150. } else {
  151. shapeStates.value.push(true);
  152. }
  153. }
  154. }
  155. // 更改状态
  156. const shapeChange = (index) => {
  157. if (shapeStates.value[index]) {
  158. shapeData.value[index].showType = 1;
  159. } else {
  160. shapeData.value[index].showType = 0;
  161. }
  162. console.log("形状", shapeData.value[index]);
  163. };
  164. const sugarChange = (index) => {
  165. if (sugarStates.value[index]) {
  166. sugarData.value[index].showType = 1;
  167. } else {
  168. sugarData.value[index].showType = 0;
  169. }
  170. console.log("糖", sugarData.value[index]);
  171. };
  172. const updateStatus = (newValue) => {
  173. const params = {
  174. equipmentId: cofficentForm.equipmentId,
  175. DIYFlowerStatus: newValue ? '1' : '0',
  176. };
  177. Dialog.confirm({
  178. title: t('DIYFlower.tips'),
  179. message: t('DIYFlower.content'),
  180. }).then(async () => {
  181. const { data } = await updateDIYFlowerStatus(params);
  182. if (data.code) {
  183. // checked.value = newValue;
  184. Toast(t('DIYFlower.successfully'));
  185. setTimeout(() => {
  186. router.go(-1);
  187. }, 1500);
  188. } else {
  189. Toast.fail(data.message);
  190. }
  191. }).catch((error) => {
  192. console.log(error);
  193. Toast.fail(t('device.unknownError'));
  194. });
  195. }
  196. // 点击提交
  197. const updateShowGoods = () => {
  198. Dialog.confirm({
  199. title: t('device.openRemind'),
  200. message: t('device.editCheck'),
  201. }).then(() => {
  202. var products = shapeData.value.concat(sugarData.value);
  203. var list = JSON.stringify(products);
  204. console.log(list);
  205. updateDIYProductShow({
  206. productList: list
  207. }).then((res) => {
  208. console.log(res.data.message);
  209. Dialog.alert({
  210. message: t('DIYFlower.successfully'),
  211. }).then(() => {
  212. //返回上一页
  213. router.go(-1);
  214. });
  215. // setTimeout(() => {
  216. // getList();
  217. // }, 1000);
  218. }).catch((error) => {
  219. console.log(error);
  220. Toast.fail(t('device.unknownError'));
  221. });
  222. });
  223. };
  224. const activeNames = ref(['1', '2']);
  225. return {
  226. cofficentForm,
  227. shapeData,
  228. sugarData,
  229. equipmentName,
  230. updateShowGoods,
  231. switchStates,
  232. shapeStates,
  233. sugarStates,
  234. shapeChange,
  235. sugarChange,
  236. checked,
  237. showSugerPhoto,
  238. activeNames,
  239. updateStatus
  240. };
  241. },
  242. };
  243. </script>
  244. <style lang="less" scoped></style>